metwatch 0.1.0 → 0.2.0

package/README.md

@@ -17,8 +17,8 @@
 - **CPU panel** — overall usage percentage + per-core bars, color-coded by load
 - **Memory panel** — RAM used / free / cached / total with visual gauge
 - **Disk panel** — per-mount usage bars with read/write IO rates
-- **Network panel** — realtime RX/TX throughput graph (last 30 s) + per-interface stats
-- **Process table** — all system processes sorted by CPU or memory; dual-mode (All / Watched)
+- **Network panel** — realtime RX/TX throughput sparkline (last 60 s) + per-interface stats
+- **Process table** — all system processes sorted by CPU or memory; dual-mode (All / Watched); viewport-capped (no terminal scroll)
 - **Managed processes** — launch scripts with `mw start`, get auto-restart with exponential back-off
 - **Runtime metrics** — Node.js / Bun heap, RSS, event-loop lag and GC stats via Chrome DevTools Protocol
 - **Log streaming** — stdout/stderr of managed processes buffered and displayed in the Logs panel
@@ -252,7 +252,7 @@ MetWatch reads `metwatch.config.json` from the current working directory at star
 | **CPU** | always on | Overall CPU% + per-core bars colored by load |
 | **Memory** | always on | RAM used / free / cached / total with gauge |
 | **Disk** | `d` | Per-mount usage bars + read/write IO rates (MB/s) |
-| **Network** | `n` | Per-interface RX/TX rates + 30-second throughput graph |
+| **Network** | `n` | Per-interface RX/TX rates + 60-second throughput sparkline |
 | **Runtime** | `R` | Heap, RSS, event-loop lag, GC stats for managed processes |
 | **Processes** | `p` | Scrollable process table — All or Watched mode |
 | **Logs** | `l` (focus) | Buffered stdout/stderr of managed processes |
@@ -311,9 +311,9 @@ Contributions are welcome! Here is how to get started:
 ### Code conventions (summary)
 
 - **TypeScript strict mode** — no `any`, no `@ts-ignore` without a comment
-- **Factory functions** over classes — use `create*()` returning plain objects
-- **Event bus** — every `bus.on()` must store and call its unsubscribe in `destroy()`
-- **Widgets are stateless renderers** — no domain data, only UI state
+- **Factory functions** over classes — managers use `create*()` returning plain objects
+- **React components** — widgets are `.tsx` files using `useState`/`useEffect` hooks; `useInput` for keyboard handling
+- **Event bus** — every `bus.on()` must store and call its unsubscribe in the `useEffect` cleanup
 - **Layer rules** — widgets never import from `services/` directly; all data via bus + state
 - **No `.then()` chains** — use `async/await` everywhere
 

package/index.ts

@@ -3,40 +3,38 @@
 //
 // Initialization order:
 //   1. Load config
-//   2. Create blessed screen
-//   3. Create launcher + log-manager + runtime-manager (if managed procs)
-//   4. Wire launcher → runtime-manager (register inspector on start)
-//   5. Build layout (widgets register bus subscriptions)
-//   6. Start metrics + process managers
-//   7. Launcher starts all managed processes
-//   8. Register global keybindings + signal handlers
-//   9. First screen render
+//   2. Create launcher + log-manager + runtime-manager (if managed procs)
+//   3. Wire launcher → runtime-manager (register inspector on start)
+//   4. Start metrics + process managers
+//   5. Launcher starts all managed processes
+//   6. Render ink/React app
+//   7. Register signal handlers
 //
 // Teardown (quit):
 //   1. Stop polling managers + runtime-manager
 //   2. Stop all managed processes
-//   3. Destroy layout (widgets unsubscribe)
-//   4. Destroy screen (restore terminal)
-//   5. process.exit(0)
+//   3. Unmount ink app
+//   4. process.exit(0)
 // ---------------------------------------------------------------------------
 
 import { readFileSync, existsSync } from 'fs';
 import { resolve } from 'path';
-
-import { createScreen, destroyScreen }      from './src/ui/screen.ts';
-import { buildLayout }                       from './src/ui/layout.ts';
-import { createMetricsManager }              from './src/core/metrics-manager.ts';
-import { createProcessManager }             from './src/core/process-manager.ts';
-import { createLauncher }                   from './src/core/launcher.ts';
-import { createLogManager }                 from './src/core/log-manager.ts';
-import { createRuntimeManager }             from './src/core/runtime-manager.ts';
-import { bus }                               from './src/core/event-bus.ts';
+import { render } from 'ink';
+import React from 'react';
+
+import { createMetricsManager }  from './src/core/metrics-manager.ts';
+import { createProcessManager }  from './src/core/process-manager.ts';
+import { createLauncher }        from './src/core/launcher.ts';
+import { createLogManager }      from './src/core/log-manager.ts';
+import { createRuntimeManager }  from './src/core/runtime-manager.ts';
+import { bus }                   from './src/core/event-bus.ts';
 import {
   DEFAULT_CONFIG,
   type MetWatchConfig,
   type ResolvedConfig,
 } from './src/types/config.types.ts';
-import type { ManagedProcessDef }            from './src/types/managed-process.types.ts';
+import type { ManagedProcessDef } from './src/types/managed-process.types.ts';
+import { App } from './src/ui/App.tsx';
 
 // ── Config loading ──────────────────────────────────────────────────────────
 
@@ -84,53 +82,60 @@ export async function main(extraDefs: ManagedProcessDef[] = []): Promise<void> {
   const logManager      = hasManaged ? createLogManager(config.logScrollback ?? 500) : null;
   const runtimeManager  = hasManaged ? createRuntimeManager(config.refreshInterval)  : null;
 
-  // Wire launcher events to runtime-manager so we get inspector connections
-  // automatically whenever a managed process starts or stops.
-  const unsubStarted   = hasManaged ? bus.on('managed:started', ({ id, pid }) => {
-    // The launcher appends --inspect=0; the WS URL is reported on stderr.
-    // We receive it via the log:line event below.
-    void id; void pid;
-  }) : () => undefined;
-
-  // Parse inspector URL from log lines (Node/Bun print it to stderr on start)
+  // Wire launcher events to runtime-manager
   const inspectorUrls = new Map<string, string>();
-  const unsubLogLine  = hasManaged ? bus.on('log:line', ({ id, stream, line }) => {
-    if (stream !== 'stderr') return;
-    // e.g.: "Debugger listening on ws://127.0.0.1:9229/uuid"
-    const m = line.match(/Debugger listening on (ws:\/\/[^\s]+)/);
-    if (m && m[1] && !inspectorUrls.has(id)) {
-      inspectorUrls.set(id, m[1]);
-      // Find the pid from the latest managed:started event via launcher
-      const proc = launcher?.get(id);
-      if (proc?.pid) {
-        runtimeManager?.register(id, proc.pid, m[1]);
+  const managedCount  = mergedDefs.length;
+  let unsubLogLine: (() => void) | null = null;
+
+  if (hasManaged) {
+    unsubLogLine = bus.on('log:line', ({ id, stream, line }) => {
+      if (stream !== 'stderr') return;
+      if (inspectorUrls.has(id)) return;
+      const m = line.match(/Debugger listening on (ws:\/\/[^\s]+)/);
+      if (m && m[1]) {
+        inspectorUrls.set(id, m[1]);
+        const proc = launcher?.get(id);
+        if (proc?.pid) {
+          runtimeManager?.register(id, proc.pid, m[1]);
+        }
+        if (inspectorUrls.size >= managedCount && unsubLogLine) {
+          unsubLogLine();
+          unsubLogLine = null;
+        }
       }
-    }
-  }) : () => undefined;
+    });
+  }
 
-  const unsubStopped  = hasManaged ? bus.on('managed:stopped', ({ id }) => {
+  const unsubStopped = hasManaged ? bus.on('managed:stopped', ({ id }) => {
     runtimeManager?.unregister(id);
     inspectorUrls.delete(id);
   }) : () => undefined;
 
-  const unsubCrashed  = hasManaged ? bus.on('managed:crashed', ({ id }) => {
+  const unsubCrashed = hasManaged ? bus.on('managed:crashed', ({ id }) => {
     runtimeManager?.unregister(id);
     inspectorUrls.delete(id);
   }) : () => undefined;
 
-  const screen = createScreen();
-  const layout = buildLayout({ screen, config, launcher, logManager });
-
   const metricsManager = createMetricsManager({ intervalMs: config.refreshInterval });
   const processManager = createProcessManager(config);
 
   metricsManager.start();
   processManager.start();
 
-  // Start managed processes after widgets are ready
   launcher?.startAll();
 
-  // ── Global keybindings ────────────────────────────────────────────────────
+  // ── Error handling ────────────────────────────────────────────────────────
+
+  const unsubError = bus.on('app:error', ({ source, error }) => {
+    process.stderr.write(`[MetWatch] error [${source}]: ${error.message}\n`);
+  });
+
+  process.on('unhandledRejection', (reason) => {
+    const msg = reason instanceof Error ? reason.message : String(reason);
+    process.stderr.write(`[MetWatch] unhandledRejection: ${msg}\n`);
+  });
+
+  // ── Teardown ──────────────────────────────────────────────────────────────
 
   function quit(): void {
     bus.emit('ui:quit', undefined);
@@ -139,33 +144,26 @@ export async function main(extraDefs: ManagedProcessDef[] = []): Promise<void> {
     runtimeManager?.stop();
     launcher?.stopAll();
     logManager?.destroy();
-    unsubStarted();
-    unsubLogLine();
+    unsubLogLine?.();
     unsubStopped();
     unsubCrashed();
-    layout.destroy();
-    destroyScreen();
+    unsubError();
+    unmount();
     process.exit(0);
   }
 
-  screen.key(['q', 'C-c'], quit);
-
-  // ── Error handling ────────────────────────────────────────────────────────
-
-  bus.on('app:error', ({ source, error }) => {
-    void source;
-    void error;
-  });
-
-  // ── First render ──────────────────────────────────────────────────────────
+  // ── Render ────────────────────────────────────────────────────────────────
 
-  screen.render();
+  const { unmount } = render(
+    React.createElement(App, { config, launcher, logManager, onQuit: quit }),
+    { exitOnCtrlC: false }
+  );
 
   // ── Signal handling ───────────────────────────────────────────────────────
 
   process.on('SIGTERM', quit);
   process.on('uncaughtException', (err) => {
-    destroyScreen();
+    unmount();
     console.error('[MetWatch] Uncaught exception:', err);
     process.exit(1);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metwatch",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Terminal process monitoring & management tool — like htop + PM2 in your terminal",
   "module": "index.ts",
   "main": "index.ts",
@@ -35,16 +35,16 @@
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "@types/node": "^25.8.0"
+    "@types/node": "^25.8.0",
+    "@types/react": "^18.3.23"
   },
   "peerDependencies": {
     "typescript": "^5"
   },
   "dependencies": {
-    "blessed": "^0.1.81",
-    "blessed-contrib": "^4.11.0",
-    "chalk": "^5.6.2",
+    "ink": "^5.1.0",
     "pidusage": "^4.0.1",
+    "react": "^18.3.1",
     "systeminformation": "^5.31.6"
   }
 }

package/src/core/process-manager.ts

@@ -22,6 +22,7 @@ interface ProcessManagerHandle {
 
 export function createProcessManager(config: ResolvedConfig): ProcessManagerHandle {
   let timer: ReturnType<typeof setInterval> | null = null;
+  let startTimer: ReturnType<typeof setTimeout> | null = null;
   let running = false;
 
   // Listen for kill requests from the UI
@@ -61,18 +62,21 @@ export function createProcessManager(config: ResolvedConfig): ProcessManagerHand
   function start(): void {
     if (running) return;
     running = true;
-    void tick();
-    timer = setInterval(() => void tick(), config.refreshInterval);
+    // Stagger 200ms behind metrics-manager to avoid simultaneous event-loop saturation.
+    // Use 2× the metrics interval so process polls never coincide with metrics polls.
+    startTimer = setTimeout(() => {
+      startTimer = null;
+      void tick();
+      timer = setInterval(() => void tick(), config.refreshInterval * 2);
+    }, 200);
   }
 
   function stop(): void {
     if (!running) return;
     running = false;
     unsubKill();
-    if (timer !== null) {
-      clearInterval(timer);
-      timer = null;
-    }
+    if (startTimer !== null) { clearTimeout(startTimer); startTimer = null; }
+    if (timer !== null) { clearInterval(timer); timer = null; }
   }
 
   return { start, stop };

package/src/core/runtime-manager.ts

@@ -119,13 +119,21 @@ function cdpCall<T>(
 ): Promise<T> {
   return new Promise((resolve, reject) => {
     const id = session.id++;
+    let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
     session.pending.set(id, {
-      resolve: resolve as (v: unknown) => void,
-      reject,
+      resolve: (v) => {
+        if (timeoutHandle !== null) { clearTimeout(timeoutHandle); timeoutHandle = null; }
+        (resolve as (v: unknown) => void)(v);
+      },
+      reject: (e) => {
+        if (timeoutHandle !== null) { clearTimeout(timeoutHandle); timeoutHandle = null; }
+        reject(e);
+      },
     });
     session.ws.send(JSON.stringify({ id, method, params }));
     // Timeout individual calls to avoid hanging
-    setTimeout(() => {
+    timeoutHandle = setTimeout(() => {
+      timeoutHandle = null;
       if (session.pending.has(id)) {
         session.pending.delete(id);
         reject(new Error(`CDP timeout: ${method}`));
@@ -228,6 +236,7 @@ async function pollProcess(
 export function createRuntimeManager(intervalMs: number): RuntimeManagerHandle {
   const sessions = new Map<string, ProcessSession>();
   let timer: ReturnType<typeof setInterval> | null = null;
+  let warmupTimer: ReturnType<typeof setTimeout> | null = null;
 
   async function tick(): Promise<void> {
     for (const ps of sessions.values()) {
@@ -241,9 +250,9 @@ export function createRuntimeManager(intervalMs: number): RuntimeManagerHandle {
   }
 
   function startTimer(): void {
-    if (timer !== null) return;
-    // Slight delay on first poll to give the inspector time to warm up
-    setTimeout(() => {
+    if (timer !== null || warmupTimer !== null) return;
+    warmupTimer = setTimeout(() => {
+      warmupTimer = null;
       void tick();
       timer = setInterval(() => void tick(), intervalMs);
     }, 1500);
@@ -281,6 +290,7 @@ export function createRuntimeManager(intervalMs: number): RuntimeManagerHandle {
   }
 
   function stop(): void {
+    if (warmupTimer !== null) { clearTimeout(warmupTimer); warmupTimer = null; }
     if (timer !== null) { clearInterval(timer); timer = null; }
     for (const ps of sessions.values()) {
       try { ps.session?.ws.close(); } catch { /* ignore */ }

package/src/services/network.service.ts

@@ -3,9 +3,9 @@
 //
 // Wraps systeminformation network APIs to produce normalized NetworkMetrics.
 //
-// Two si calls per tick:
-//   si.networkInterfaces()  → static info (IP addresses, operstate)
-//   si.networkStats()       → cumulative byte/packet counters (delta-based)
+// Per-tick call: si.networkStats() — cumulative byte/packet counters (delta-based)
+// Cached call:   si.networkInterfaces() — static info refreshed every 30 s or on
+//                the first call. IP addresses and operstate almost never change.
 //
 // Rates are calculated as deltas between successive calls — same approach as
 // disk.service.ts. First call returns zero rates.
@@ -30,6 +30,28 @@ interface IfaceSnapshot {
 
 const _prev = new Map<string, IfaceSnapshot>();
 
+// ── Static interface cache ────────────────────────────────────────────────────
+// networkInterfaces() enumerates all NICs including virtual ones — expensive.
+// Cache for 30 s; refresh on expiry or when a previously-unknown iface appears.
+
+const IFACE_CACHE_TTL = 30_000;
+let _ifaceCache: Map<string, { ip4: string; ip6: string; operstate: string }> = new Map();
+let _ifaceCacheTs = 0;
+
+async function getStaticIfaceMap(): Promise<Map<string, { ip4: string; ip6: string; operstate: string }>> {
+  const now = Date.now();
+  if (now - _ifaceCacheTs < IFACE_CACHE_TTL) return _ifaceCache;
+
+  const raw = await si.networkInterfaces();
+  const arr = Array.isArray(raw) ? raw : [raw];
+  _ifaceCache = new Map(arr.map(i => [
+    i.iface,
+    { ip4: i.ip4 ?? '', ip6: i.ip6 ?? '', operstate: i.operstate ?? '' },
+  ]));
+  _ifaceCacheTs = now;
+  return _ifaceCache;
+}
+
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function operstate(s: string | undefined): 'up' | 'down' | 'unknown' {
@@ -38,20 +60,20 @@ function operstate(s: string | undefined): 'up' | 'down' | 'unknown' {
   return 'unknown';
 }
 
+// ── Collator for sorting (avoids constructing one inside the comparator) ──────
+const _collator = new Intl.Collator(undefined, { sensitivity: 'base' });
+
 // ── Fetch ─────────────────────────────────────────────────────────────────────
 
 export async function fetchNetworkMetrics(): Promise<NetworkMetrics> {
   const now = Date.now();
 
-  const [ifaces, stats] = await Promise.all([
-    si.networkInterfaces(),
+  // Stats every tick; static info from cache (refreshed every 30 s)
+  const [stats, staticInfo] = await Promise.all([
     si.networkStats('*'),
+    getStaticIfaceMap(),
   ]);
 
-  // Build a map of static info keyed by iface name
-  const ifaceArray = Array.isArray(ifaces) ? ifaces : [ifaces];
-  const staticInfo = new Map(ifaceArray.map(i => [i.iface, i]));
-
   const statsArray = Array.isArray(stats) ? stats : [stats];
 
   const interfaces: NetworkInterface[] = [];
@@ -65,18 +87,10 @@ export async function fetchNetworkMetrics(): Promise<NetworkMetrics> {
     const prev = _prev.get(iface);
     const dtSec = prev ? Math.max(0.001, (now - prev.ts) / 1000) : 1;
 
-    const rxBPS = prev
-      ? Math.max(0, ((s.rx_bytes ?? 0) - prev.rx_bytes) / dtSec)
-      : 0;
-    const txBPS = prev
-      ? Math.max(0, ((s.tx_bytes ?? 0) - prev.tx_bytes) / dtSec)
-      : 0;
-    const rxPPS = prev
-      ? Math.max(0, ((s.rx_sec   ?? 0) - prev.rx_sec)   / dtSec)
-      : 0;
-    const txPPS = prev
-      ? Math.max(0, ((s.tx_sec   ?? 0) - prev.tx_sec)   / dtSec)
-      : 0;
+    const rxBPS = prev ? Math.max(0, ((s.rx_bytes ?? 0) - prev.rx_bytes) / dtSec) : 0;
+    const txBPS = prev ? Math.max(0, ((s.tx_bytes ?? 0) - prev.tx_bytes) / dtSec) : 0;
+    const rxPPS = prev ? Math.max(0, ((s.rx_sec   ?? 0) - prev.rx_sec)   / dtSec) : 0;
+    const txPPS = prev ? Math.max(0, ((s.tx_sec   ?? 0) - prev.tx_sec)   / dtSec) : 0;
 
     _prev.set(iface, {
       rx_bytes:   s.rx_bytes   ?? 0,
@@ -114,12 +128,12 @@ export async function fetchNetworkMetrics(): Promise<NetworkMetrics> {
     });
   }
 
-  // Sort: up interfaces first, then by name
+  // Sort: up interfaces first, then by name using cached collator
   interfaces.sort((a, b) => {
     if (a.operstate !== b.operstate) {
       return a.operstate === 'up' ? -1 : 1;
     }
-    return a.iface.localeCompare(b.iface);
+    return _collator.compare(a.iface, b.iface);
   });
 
   return {

package/src/services/process.service.ts

@@ -8,6 +8,7 @@
 
 import si from 'systeminformation';
 import type { ProcessInfo, ProcessList, ProcessStatus } from '../types/process.types.ts';
+import { getMemoryMetrics } from '../core/state-manager.ts';
 
 function mapStatus(raw: string): ProcessStatus {
   switch (raw.toLowerCase()) {
@@ -20,14 +21,46 @@ function mapStatus(raw: string): ProcessStatus {
   }
 }
 
+/**
+ * Partial selection sort — O(n * limit) but avoids copying the entire list
+ * and sorting it when limit << n. For limit=50, n=1000 → 50k comparisons vs
+ * 10k for a full sort but saves the O(n) spread allocation.
+ * For larger limits a min-heap approach would be O(n log limit); given our
+ * default maxProcesses=50 the simple selection is fast enough and GC-friendly.
+ */
+function topKByCpu<T extends { cpu: number }>(list: T[], k: number): T[] {
+  const n      = list.length;
+  const count  = Math.min(k, n);
+  // Work on indices to avoid object allocations
+  const result: T[] = [];
+
+  // Track which indices have already been picked
+  const used = new Uint8Array(n);
+
+  for (let i = 0; i < count; i++) {
+    let bestIdx = -1;
+    let bestCpu = -1;
+    for (let j = 0; j < n; j++) {
+      if (!used[j] && list[j]!.cpu > bestCpu) {
+        bestCpu = list[j]!.cpu;
+        bestIdx = j;
+      }
+    }
+    if (bestIdx === -1) break;
+    used[bestIdx] = 1;
+    result.push(list[bestIdx]!);
+  }
+
+  return result;
+}
+
 export async function fetchProcessList(limit = 100): Promise<ProcessList> {
   const { list } = await si.processes();
 
-  // Sort by CPU descending before slicing so we surface the most active
-  const sorted = [...list].sort((a, b) => b.cpu - a.cpu);
-  const top = sorted.slice(0, limit);
+  // Top-K by CPU — avoids full O(n log n) sort + O(n) spread for large process lists.
+  const top = topKByCpu(list, limit);
 
-  const totalMem = (await si.mem()).total;
+  const totalMem = getMemoryMetrics()?.total ?? (await si.mem()).total;
 
   return top.map((p): ProcessInfo => ({
     pid:           p.pid,
@@ -39,7 +72,10 @@ export async function fetchProcessList(limit = 100): Promise<ProcessList> {
       ? Math.round(((p.memRss ?? 0) / totalMem) * 1000) / 10
       : 0,
     status:    mapStatus(p.state      ?? ''),
-    startedAt: p.started ? new Date(p.started).getTime() : null,
+    // Avoid Date construction: use numeric check first, then Date.parse as fallback.
+    startedAt: p.started
+      ? (typeof p.started === 'number' ? p.started : Date.parse(p.started as string) || null)
+      : null,
     ppid:      p.parentPid   ?? null,
     // ── Extended (Phase 2) ──────────────────────────────────────────────────
     user:      (p as unknown as { user?: string }).user      ?? '',