metwatch 0.1.0 → 0.2.0

package/src/ui/App.tsx

@@ -0,0 +1,165 @@
+// ---------------------------------------------------------------------------
+// App — Top-level ink/React component
+//
+// Owns:
+//   - Panel visibility state (collapsible layout)
+//   - Global keyboard bindings (q, ?, d, n, R, p, l)
+//   - Help overlay
+//   - Focus management (process table vs logs panel)
+// ---------------------------------------------------------------------------
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import type { ResolvedConfig } from '../types/config.types.ts';
+import type { LauncherHandle } from '../core/launcher.ts';
+import type { LogManagerHandle } from '../core/log-manager.ts';
+import { CpuPanel }          from './widgets/cpu.widget.tsx';
+import { MemoryPanel }       from './widgets/memory.widget.tsx';
+import { DiskPanel }         from './widgets/disk.widget.tsx';
+import { NetworkPanel }      from './widgets/network.widget.tsx';
+import { RuntimePanel }      from './widgets/runtime.widget.tsx';
+import { ProcessTablePanel } from './widgets/process-table.widget.tsx';
+import { LogsPanel }         from './widgets/logs.widget.tsx';
+
+interface AppProps {
+  config:     ResolvedConfig;
+  launcher:   LauncherHandle | null;
+  logManager: LogManagerHandle | null;
+  onQuit:     () => void;
+}
+
+type FocusTarget = 'processes' | 'logs';
+
+const HELP_CONTENT = `
+  Navigation
+  ↑ / k       Move process selection up
+  ↓ / j       Move process selection down
+
+  View
+  a           Process table: All mode
+  f           Process table: Watched mode
+  c / m       Sort by CPU / Memory
+
+  Panel Toggles
+  d           Toggle Disk panel
+  n           Toggle Network panel
+  R           Toggle Runtime panel
+  p           Toggle Process panel
+
+  Actions
+  K           Kill selected process
+  r           Restart managed process
+  s           Stop managed process
+  l           Focus log panel
+  Escape      Unfocus log panel
+  q / Ctrl+C  Quit
+  ?           Close this help
+`.trim();
+
+export function App({ config, launcher, logManager, onQuit }: AppProps): React.ReactElement {
+  const { exit } = useApp();
+  const panels = config.panels;
+
+  const [visible, setVisible] = useState({
+    disk:      panels.disk      !== false,
+    network:   panels.network   !== false,
+    runtime:   panels.runtime   !== false,
+    processes: panels.processes !== false,
+    logs:      panels.logs      !== false,
+  });
+
+  const [showHelp, setShowHelp]     = useState(false);
+  const [focused, setFocused]       = useState<FocusTarget>('processes');
+
+  const toggle = useCallback((key: keyof typeof visible): void => {
+    setVisible(v => ({ ...v, [key]: !v[key] }));
+  }, []);
+
+  const quit = useCallback((): void => {
+    onQuit();
+    exit();
+  }, [onQuit, exit]);
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') { quit(); return; }
+    if (input === 'q') { quit(); return; }
+    if (input === '?') { setShowHelp(s => !s); return; }
+    if (input === 'd') { toggle('disk');      return; }
+    if (input === 'n') { toggle('network');   return; }
+    if (input === 'R') { toggle('runtime');   return; }
+    if (input === 'p') { toggle('processes'); return; }
+    if (input === 'l') { setFocused('logs');  return; }
+    if (key.escape && focused === 'logs') { setFocused('processes'); return; }
+  });
+
+  const managedNames = new Set<string>(launcher ? launcher.getAll().map(p => p.name) : []);
+  const getManagedById = (id: string) => launcher?.get(id);
+
+  const nullLogManager: LogManagerHandle = {
+    getLines:   () => [],
+    getAllLines: () => [],
+    clearLines: () => undefined,
+    destroy:    () => undefined,
+  };
+
+  return (
+    <Box flexDirection="column" width="100%" height="100%">
+      {/* Row A: CPU + Memory + (Disk) — fixed height ~20% */}
+      <Box flexDirection="row" height="20%" flexShrink={0}>
+        <CpuPanel />
+        <MemoryPanel />
+        {visible.disk && <DiskPanel />}
+      </Box>
+
+      {/* Row B: Network + Runtime — ~24% if either visible */}
+      {(visible.network || visible.runtime) && (
+        <Box flexDirection="row" height="24%" flexShrink={0}>
+          {visible.network && <NetworkPanel />}
+          {visible.runtime && <RuntimePanel />}
+        </Box>
+      )}
+
+      {/* Row C + D: Processes + Logs — share remaining space */}
+      <Box flexDirection="column" flexGrow={1}>
+        {visible.processes && (
+          <Box height={visible.logs ? "55%" : "100%"}>
+            <ProcessTablePanel
+              config={config}
+              getManagedById={getManagedById}
+              managedNames={managedNames}
+              isFocused={focused === 'processes'}
+            />
+          </Box>
+        )}
+        {visible.logs && (
+          <Box height={visible.processes ? "45%" : "100%"}>
+            <LogsPanel
+              logManager={logManager ?? nullLogManager}
+              processCount={managedNames.size}
+              isFocused={focused === 'logs'}
+            />
+          </Box>
+        )}
+      </Box>
+
+      {/* Help overlay */}
+      {showHelp && (
+        <Box
+          position="absolute"
+          borderStyle="single"
+          borderColor="white"
+          flexDirection="column"
+          paddingX={2}
+          paddingY={1}
+          width={54}
+        >
+          <Text bold> MetWatch — Keybindings </Text>
+          <Text> </Text>
+          {HELP_CONTENT.split('\n').map((line, i) => (
+            <Text key={i}>{line}</Text>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/ui/screen.ts

@@ -1,45 +1,16 @@
 // ---------------------------------------------------------------------------
-// Screen
+// Screen shim — ink/React replacement
 //
-// Creates and exports the blessed screen singleton. This is the only place
-// in the codebase where `blessed.screen()` is called. All other modules
-// receive the screen via parameter or import this module.
-//
-// Configuration choices:
-//   smartCSR  — only redraw damaged regions (significant perf boost)
-//   fullUnicode — required for block chars (█) used in bars/gauges
-//   dockBorders — adjacent panels share border chars cleanly (┬ ┤ etc.)
-//   autoPadding — children auto-respect parent border+padding
+// In the blessed era this module owned the screen singleton and a render
+// coalescer. With ink, React drives re-renders automatically; this module
+// is kept as a no-op shim so any residual imports compile without changes.
 // ---------------------------------------------------------------------------
 
-import blessed from 'blessed';
-import type { BlessedScreen } from 'blessed';
-
-let _screen: BlessedScreen | null = null;
-
-export function createScreen(): BlessedScreen {
-  if (_screen) return _screen;
-
-  _screen = blessed.screen({
-    smartCSR: true,
-    fullUnicode: true,
-    dockBorders: true,
-    autoPadding: true,
-    title: 'MetWatch',
-    ignoreLocked: ['C-c'],
-  });
-
-  return _screen;
-}
+/** No-op in ink mode — React re-renders on state change. */
+export function scheduleRender(): void { /* no-op */ }
 
-export function getScreen(): BlessedScreen {
-  if (!_screen) throw new Error('Screen not initialized. Call createScreen() first.');
-  return _screen;
-}
+/** No-op — ink's render() in index.ts owns the terminal. */
+export function createScreen(): void { /* no-op */ }
 
-export function destroyScreen(): void {
-  if (_screen) {
-    _screen.destroy();
-    _screen = null;
-  }
-}
+/** No-op — ink's unmount() in index.ts owns teardown. */
+export function destroyScreen(): void { /* no-op */ }

package/src/ui/widgets/cpu.widget.tsx

@@ -0,0 +1,71 @@
+// ---------------------------------------------------------------------------
+// CPU Widget — ink/React
+// ---------------------------------------------------------------------------
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { bus } from '../../core/event-bus.ts';
+import { getCpuMetrics } from '../../core/state-manager.ts';
+import type { CpuMetrics } from '../../types/metrics.types.ts';
+import { formatPercent, colorPercent } from '../../utils/formatters.ts';
+
+interface BarRowProps {
+  label: string;
+  usage: number;
+  barWidth: number;
+}
+
+function BarRow({ label, usage, barWidth }: BarRowProps): React.ReactElement {
+  const filled = Math.round((Math.min(100, Math.max(0, usage)) / 100) * barWidth);
+  const empty  = barWidth - filled;
+  const color  = colorPercent(usage);
+  return (
+    <Box flexDirection="row">
+      <Text> {label.padEnd(8)} </Text>
+      <Text color={color}>{'█'.repeat(filled)}</Text><Text color="gray">{'░'.repeat(empty)}</Text>
+      <Text> </Text>
+      <Text color={color}>{formatPercent(usage)}</Text>
+    </Box>
+  );
+}
+
+export function CpuPanel(): React.ReactElement {
+  const { stdout } = useStdout();
+  const [metrics, setMetrics] = useState<CpuMetrics | null>(getCpuMetrics);
+
+  useEffect(() => {
+    const unsub = bus.on('metrics:cpu:updated', setMetrics);
+    return unsub;
+  }, []);
+
+  // ~34% of terminal width minus borders/label/padding
+  const barWidth = Math.max(10, Math.floor((stdout.columns ?? 80) * 0.34) - 22);
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="cyan"
+      flexDirection="column"
+      flexGrow={1}
+      paddingX={1}
+    >
+      <Text color="cyan" bold> CPU </Text>
+      {metrics === null ? (
+        <Text color="gray"> Collecting…</Text>
+      ) : (
+        <>
+          <BarRow label="Overall" usage={metrics.usage} barWidth={barWidth} />
+          <Text> </Text>
+          {metrics.cores.slice(0, 8).map(core => (
+            <BarRow key={core.index} label={`Core ${core.index}`} usage={core.usage} barWidth={barWidth} />
+          ))}
+          {metrics.cores.length > 8 && (
+            <Text color="gray">   ... +{metrics.cores.length - 8} cores</Text>
+          )}
+          <Text> </Text>
+          <Text color="gray"> Model: {metrics.model}</Text>
+        </>
+      )}
+    </Box>
+  );
+}

package/src/ui/widgets/disk.widget.tsx

@@ -0,0 +1,85 @@
+// ---------------------------------------------------------------------------
+// Disk Widget — ink/React
+// ---------------------------------------------------------------------------
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { bus } from '../../core/event-bus.ts';
+import { getDiskMetrics } from '../../core/state-manager.ts';
+import type { DiskMetrics, DiskMount } from '../../types/metrics.types.ts';
+import { formatBytes, colorPercent, truncate } from '../../utils/formatters.ts';
+
+function formatRate(bps: number): string {
+  if (bps < 1024)        return `${bps.toFixed(0)} B/s`;
+  if (bps < 1024 * 1024) return `${(bps / 1024).toFixed(1)} KB/s`;
+  return `${(bps / (1024 * 1024)).toFixed(1)} MB/s`;
+}
+
+function MountRow({ m }: { m: DiskMount }): React.ReactElement {
+  const barWidth = 10;
+  const filled   = Math.round((Math.min(100, m.percent) / 100) * barWidth);
+  const empty    = barWidth - filled;
+  const barColor = m.percent >= 90 ? 'red' : m.percent >= 75 ? 'yellow' : 'green';
+  const pctColor = colorPercent(m.percent);
+
+  return (
+    <Box>
+      <Text> [</Text>
+      <Text color={barColor}>{'█'.repeat(filled)}</Text>
+      <Text color="gray">{'░'.repeat(empty)}</Text>
+      <Text>] </Text>
+      <Text>{truncate(m.fs, 14)}  </Text>
+      <Text color="gray">{truncate(m.mount, 12)}  </Text>
+      <Text color="gray">{truncate(m.type, 6)}  </Text>
+      <Text>{formatBytes(m.used, 0)}/{formatBytes(m.total, 0)}  </Text>
+      <Text color={pctColor}>{m.percent.toFixed(1)}%</Text>
+    </Box>
+  );
+}
+
+export function DiskPanel(): React.ReactElement {
+  const [metrics, setMetrics] = useState<DiskMetrics | null>(getDiskMetrics);
+
+  useEffect(() => {
+    const unsub = bus.on('metrics:disk:updated', setMetrics);
+    return unsub;
+  }, []);
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="blue"
+      flexDirection="column"
+      flexGrow={1}
+      paddingX={1}
+      overflow="hidden"
+    >
+      <Text color="blue" bold> Disk [d=toggle] </Text>
+      {metrics === null ? (
+        <Text color="gray"> Collecting disk metrics…</Text>
+      ) : (
+        <>
+          <Box>
+            <Text bold> IO:  </Text>
+            <Text color="green">↓ {formatRate(metrics.totalReadBytesPerSec).padEnd(12)}</Text>
+            <Text>  </Text>
+            <Text color="red">↑ {formatRate(metrics.totalWriteBytesPerSec)}</Text>
+          </Box>
+          <Text> </Text>
+          {metrics.mounts.length === 0 ? (
+            <Text color="gray">  No mounted filesystems detected.</Text>
+          ) : (
+            <>
+              <Box>
+                <Text color="cyan" bold> DEVICE         MOUNT        TYPE    USED / TOTAL     USE%</Text>
+              </Box>
+              {metrics.mounts.map((m, i) => (
+                <MountRow key={i} m={m} />
+              ))}
+            </>
+          )}
+        </>
+      )}
+    </Box>
+  );
+}

package/src/ui/widgets/logs.widget.tsx

@@ -0,0 +1,126 @@
+// ---------------------------------------------------------------------------
+// Logs Widget — ink/React
+// ---------------------------------------------------------------------------
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { bus } from '../../core/event-bus.ts';
+import type { LogManagerHandle } from '../../core/log-manager.ts';
+
+const MAX_LINES = 500;
+
+interface LogsProps {
+  logManager:   LogManagerHandle;
+  processCount: number;
+  isFocused:    boolean;
+}
+
+function fmtTime(ts: number): string {
+  const totalSec = Math.floor(ts / 1000);
+  const s = totalSec % 60;
+  const totalMin = Math.floor(totalSec / 60);
+  const m = totalMin % 60;
+  const h = Math.floor(totalMin / 60) % 24;
+  return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+}
+
+interface LogLine {
+  id: string;
+  stream: 'stdout' | 'stderr';
+  text: string;
+  timestamp: number;
+  kind: 'log' | 'system';
+  systemColor?: 'gray' | 'red' | 'yellow';
+}
+
+export function LogsPanel({ logManager, processCount, isFocused }: LogsProps): React.ReactElement {
+  const { stdout } = useStdout();
+  const showPrefix = processCount > 1;
+
+  const [lines, setLines] = useState<LogLine[]>(() => {
+    const history = logManager.getAllLines();
+    return history.slice(-MAX_LINES).map(l => ({
+      id: l.id, stream: l.stream, text: l.line,
+      timestamp: l.timestamp, kind: 'log' as const,
+    }));
+  });
+
+  // Scroll offset: 0 = show tail (auto-scroll), positive = locked at offset from tail
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const pendingLines = useRef<LogLine[]>([]);
+  const flushPending = useRef(false);
+
+  const pushLine = (line: LogLine): void => {
+    pendingLines.current.push(line);
+    if (!flushPending.current) {
+      flushPending.current = true;
+      setImmediate(() => {
+        flushPending.current = false;
+        setLines(prev => {
+          const next = [...prev, ...pendingLines.current];
+          pendingLines.current = [];
+          return next.length > MAX_LINES ? next.slice(-MAX_LINES) : next;
+        });
+      });
+    }
+  };
+
+  useEffect(() => {
+    const unsubLine = bus.on('log:line', ({ id, stream, line, timestamp }) => {
+      pushLine({ id, stream, text: line, timestamp, kind: 'log' });
+    });
+    const unsubStarted = bus.on('managed:started', ({ id, pid }) => {
+      pushLine({ id, stream: 'stdout', text: `── ${id} started (pid ${pid}) ──`, timestamp: Date.now(), kind: 'system', systemColor: 'gray' });
+    });
+    const unsubCrashed = bus.on('managed:crashed', ({ id, exitCode, restarts }) => {
+      pushLine({ id, stream: 'stderr', text: `── ${id} crashed (exit ${exitCode ?? '?'}) — restart #${restarts} scheduled ──`, timestamp: Date.now(), kind: 'system', systemColor: 'red' });
+    });
+    const unsubRestarted = bus.on('managed:restarted', ({ id, pid, restarts }) => {
+      pushLine({ id, stream: 'stdout', text: `── ${id} restarted (pid ${pid}, #${restarts}) ──`, timestamp: Date.now(), kind: 'system', systemColor: 'yellow' });
+    });
+    const unsubStopped = bus.on('managed:stopped', ({ id }) => {
+      pushLine({ id, stream: 'stdout', text: `── ${id} stopped ──`, timestamp: Date.now(), kind: 'system', systemColor: 'gray' });
+    });
+
+    return () => {
+      unsubLine(); unsubStarted(); unsubCrashed(); unsubRestarted(); unsubStopped();
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // How many rows are available for log lines (rough estimate)
+  const visibleRows = Math.max(4, Math.floor((stdout.rows ?? 24) * 0.26) - 4);
+
+  // Determine what slice to show
+  const total = lines.length;
+  const tailStart = Math.max(0, total - visibleRows - scrollOffset);
+  const visible = lines.slice(tailStart, tailStart + visibleRows);
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="green"
+      flexDirection="column"
+      flexGrow={1}
+      overflow="hidden"
+    >
+      <Text color="green" bold> Logs [↑↓=scroll when focused]{isFocused ? ' — FOCUSED' : ''} </Text>
+      {lines.length === 0 ? (
+        <Text color="gray"> Waiting for output from managed processes...</Text>
+      ) : (
+        visible.map((line, i) => {
+          if (line.kind === 'system') {
+            return <Text key={i} color={line.systemColor ?? 'gray'}>{fmtTime(line.timestamp)} {line.text}</Text>;
+          }
+          return (
+            <Box key={i}>
+              <Text color="gray">{fmtTime(line.timestamp)} </Text>
+              {showPrefix && <Text color="cyan">[{line.id}] </Text>}
+              <Text color={line.stream === 'stderr' ? 'red' : undefined}>{line.text}</Text>
+            </Box>
+          );
+        })
+      )}
+    </Box>
+  );
+}

package/src/ui/widgets/memory.widget.tsx

@@ -0,0 +1,60 @@
+// ---------------------------------------------------------------------------
+// Memory Widget — ink/React
+// ---------------------------------------------------------------------------
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { bus } from '../../core/event-bus.ts';
+import { getMemoryMetrics } from '../../core/state-manager.ts';
+import type { MemoryMetrics } from '../../types/metrics.types.ts';
+import { formatBytes, formatPercent, colorPercent } from '../../utils/formatters.ts';
+
+export function MemoryPanel(): React.ReactElement {
+  const { stdout } = useStdout();
+  const [metrics, setMetrics] = useState<MemoryMetrics | null>(getMemoryMetrics);
+
+  useEffect(() => {
+    const unsub = bus.on('metrics:memory:updated', setMetrics);
+    return unsub;
+  }, []);
+
+  const barWidth = Math.max(10, Math.floor((stdout.columns ?? 80) * 0.33) - 22);
+
+  const renderBar = (pct: number): React.ReactElement => {
+    const filled = Math.round((Math.min(100, Math.max(0, pct)) / 100) * barWidth);
+    const empty  = barWidth - filled;
+    const color  = colorPercent(pct);
+    return (
+      <Box flexDirection="row">
+        <Text> {'RAM'.padEnd(8)} </Text>
+        <Text color={color}>{'█'.repeat(filled)}</Text><Text color="gray">{'░'.repeat(empty)}</Text>
+        <Text> </Text>
+        <Text color={color}>{formatPercent(pct)}</Text>
+      </Box>
+    );
+  };
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="magenta"
+      flexDirection="column"
+      flexGrow={1}
+      paddingX={1}
+    >
+      <Text color="magenta" bold> Memory </Text>
+      {metrics === null ? (
+        <Text color="gray"> Collecting…</Text>
+      ) : (
+        <>
+          {renderBar(metrics.percent)}
+          <Text> </Text>
+          <Text> <Text bold>Used  </Text>  : {formatBytes(metrics.used)}</Text>
+          <Text> <Text bold>Free  </Text>  : {formatBytes(metrics.free)}</Text>
+          <Text> <Text bold>Cached</Text>  : {formatBytes(metrics.cached)}</Text>
+          <Text> <Text bold>Total </Text>  : {formatBytes(metrics.total)}</Text>
+        </>
+      )}
+    </Box>
+  );
+}