metwatch 0.1.0 → 0.2.0

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

@@ -1,98 +0,0 @@
-// ---------------------------------------------------------------------------
-// CPU Widget
-//
-// Renders per-core CPU usage as stacked horizontal gauges plus an overall
-// usage bar. Subscribes to 'metrics:cpu:updated' events and re-renders.
-//
-// Layout:
-//   ┌─ CPU ──────────────────────────────────┐
-//   │ Overall  ████████░░░░░░░░  45.3%        │
-//   │ Core 0   ██████░░░░░░░░░░  38.1%        │
-//   │ Core 1   █████████░░░░░░░  52.4%        │
-//   │ ...                                      │
-//   └─────────────────────────────────────────┘
-// ---------------------------------------------------------------------------
-
-import blessed from 'blessed';
-import type { BlessedScreen, Box } from 'blessed';
-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 CpuWidgetOptions {
-  screen: BlessedScreen;
-  top: number | string;
-  left: number | string;
-  width: number | string;
-  height: number | string;
-}
-
-interface CpuWidgetHandle {
-  box: Box;
-  destroy: () => void;
-}
-
-export function createCpuWidget(options: CpuWidgetOptions): CpuWidgetHandle {
-  const { screen, top, left, width, height } = options;
-
-  const box = blessed.box({
-    top,
-    left,
-    width,
-    height,
-    label: ' CPU ',
-    tags: true,
-    border: { type: 'line' },
-    style: {
-      border: { fg: 'cyan' },
-      label: { fg: 'cyan', bold: true },
-    },
-    padding: { top: 0, left: 1, right: 1, bottom: 0 },
-  });
-
-  screen.append(box as unknown as import('blessed').BlessedElement);
-
-  function renderMetrics(metrics: CpuMetrics): void {
-    const innerWidth = (typeof width === 'string' ? box.width : width as number) - 4;
-    const barWidth = Math.max(10, innerWidth - 14); // reserve space for label + percent
-
-    function makeLine(label: string, usage: number): string {
-      const filled = Math.round((Math.min(100, usage) / 100) * barWidth);
-      const empty = barWidth - filled;
-      const barColor = usage >= 85 ? '{red-fg}' : usage >= 60 ? '{yellow-fg}' : '{green-fg}';
-      const bar = `${barColor}${'█'.repeat(filled)}{/}${'░'.repeat(empty)}`;
-      const pct = colorPercent(usage);
-      return ` ${label.padEnd(8)} ${bar} ${pct}`;
-    }
-
-    const lines: string[] = [
-      makeLine('Overall', metrics.usage),
-      '',
-      ...metrics.cores.slice(0, 8).map(c => makeLine(`Core ${c.index}`, c.usage)),
-    ];
-
-    if (metrics.cores.length > 8) {
-      lines.push(` {gray-fg}  ... +${metrics.cores.length - 8} cores{/gray-fg}`);
-    }
-
-    lines.push('');
-    lines.push(` {gray-fg}Model: ${metrics.model}{/gray-fg}`);
-
-    box.setContent(lines.join('\n'));
-    screen.render();
-  }
-
-  // Paint immediately if state is already populated (re-mount case)
-  const initial = getCpuMetrics();
-  if (initial) renderMetrics(initial);
-
-  const unsub = bus.on('metrics:cpu:updated', renderMetrics);
-
-  function destroy(): void {
-    unsub();
-    box.destroy();
-  }
-
-  return { box: box as unknown as Box, destroy };
-}

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

@@ -1,134 +0,0 @@
-// ---------------------------------------------------------------------------
-// Disk Widget
-//
-// Displays per-mount disk usage and aggregate IO rates.
-//
-// Layout (inside a bordered box):
-//   Row 0:  IO summary  →  Read: 12.3 MB/s   Write: 4.5 MB/s
-//   Row 1+: Per mount    →  [bar] /dev/sda1   /  (ext4)  45.2 GB / 200 GB  22.6%
-//
-// Toggle key: d  (handled in layout.ts, not here)
-// ---------------------------------------------------------------------------
-
-import blessed from 'blessed';
-import type { BlessedScreen, BlessedElement } from 'blessed';
-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, bar, colorPercent, truncate } from '../../utils/formatters.ts';
-
-interface DiskWidgetOptions {
-  screen: BlessedScreen;
-  top:    number | string;
-  left:   number | string;
-  width:  number | string;
-  height: number | string;
-}
-
-interface DiskWidgetHandle {
-  box:     BlessedElement;
-  destroy: () => void;
-}
-
-// ── Formatters ────────────────────────────────────────────────────────────────
-
-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 mountLine(m: DiskMount, innerWidth: number): string {
-  const barWidth   = 12;
-  const usageBar   = bar(m.percent, barWidth);
-  const barColored = m.percent >= 90
-    ? `{red-fg}${usageBar}{/red-fg}`
-    : m.percent >= 75
-      ? `{yellow-fg}${usageBar}{/yellow-fg}`
-      : `{green-fg}${usageBar}{/green-fg}`;
-
-  const pct     = colorPercent(m.percent);
-  const space   = `${formatBytes(m.used, 0)} / ${formatBytes(m.total, 0)}`;
-  const fs      = truncate(m.fs,    14);
-  const mnt     = truncate(m.mount, 12);
-  const fstype  = truncate(m.type,  6);
-
-  // Right-align the space/pct section
-  const right    = `${space}  ${pct}`;
-  const leftPart = `[${barColored}] ${fs}  ${mnt}  ${fstype}`;
-
-  return ` ${leftPart.padEnd(innerWidth - right.length - 2)}${right}`;
-}
-
-// ── Widget factory ────────────────────────────────────────────────────────────
-
-export function createDiskWidget(options: DiskWidgetOptions): DiskWidgetHandle {
-  const { screen, top, left, width, height } = options;
-
-  const box = blessed.box({
-    top,
-    left,
-    width,
-    height,
-    label: ' Disk [d=toggle] ',
-    tags: true,
-    border: { type: 'line' },
-    scrollable: true,
-    alwaysScroll: true,
-    keys: false,
-    mouse: true,
-    style: {
-      border: { fg: 'blue' },
-      label:  { fg: 'blue', bold: true },
-    },
-    padding: { top: 0, left: 1, right: 1, bottom: 0 },
-  });
-
-  screen.append(box);
-
-  function render(metrics: DiskMetrics): void {
-    const lines: string[] = [];
-
-    // IO summary row
-    const rStr = formatRate(metrics.totalReadBytesPerSec);
-    const wStr = formatRate(metrics.totalWriteBytesPerSec);
-    lines.push(
-      ` {bold}IO:{/bold}  {green-fg}↓ ${rStr.padEnd(12)}{/green-fg}  {red-fg}↑ ${wStr}{/red-fg}`
-    );
-    lines.push('');
-
-    if (metrics.mounts.length === 0) {
-      lines.push('{gray-fg}  No mounted filesystems detected.{/gray-fg}');
-    } else {
-      // Header
-      lines.push(
-        ' {bold}{cyan-fg}' +
-        'DEVICE         MOUNT        TYPE    USED / TOTAL     USE%' +
-        '{/cyan-fg}{/bold}'
-      );
-      for (const m of metrics.mounts) {
-        lines.push(mountLine(m, 72));
-      }
-    }
-
-    box.setContent(lines.join('\n'));
-    screen.render();
-  }
-
-  // ── Initial render ────────────────────────────────────────────────────────
-  const initial = getDiskMetrics();
-  if (initial) {
-    render(initial);
-  } else {
-    box.setContent('{gray-fg} Collecting disk metrics…{/gray-fg}');
-  }
-
-  const unsub = bus.on('metrics:disk:updated', render);
-
-  function destroy(): void {
-    unsub();
-    box.destroy();
-  }
-
-  return { box, destroy };
-}

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

@@ -1,168 +0,0 @@
-// ---------------------------------------------------------------------------
-// Logs Widget
-//
-// Displays realtime stdout/stderr from managed processes.
-//
-//   stdout lines → white
-//   stderr lines → {red-fg}
-//   prefix       → [{id}] shown when more than one process is managed
-//
-// On mount: reads existing lines from LogManager (history).
-// Live:     subscribes to 'log:line' events on the bus.
-//
-// Focus key 'l' → this box scrolls; 'Escape' returns focus to screen.
-// ---------------------------------------------------------------------------
-
-import blessed from 'blessed';
-import type { BlessedScreen, BlessedElement } from 'blessed';
-import { bus } from '../../core/event-bus.ts';
-import type { LogManagerHandle } from '../../core/log-manager.ts';
-
-interface LogsWidgetOptions {
-  screen:     BlessedScreen;
-  logManager: LogManagerHandle;
-  /** How many distinct managed process IDs exist — used to decide prefix display */
-  processCount: number;
-  top:    number | string;
-  left:   number | string;
-  width:  number | string;
-  height: number | string;
-}
-
-interface LogsWidgetHandle {
-  box:     BlessedElement;
-  destroy: () => void;
-}
-
-export function createLogsWidget(options: LogsWidgetOptions): LogsWidgetHandle {
-  const { screen, logManager, processCount, top, left, width, height } = options;
-
-  const showPrefix = processCount > 1;
-
-  const box = blessed.box({
-    top,
-    left,
-    width,
-    height,
-    label: ' Logs [l=focus  ↑↓=scroll] ',
-    tags: true,
-    border: { type: 'line' },
-    scrollable: true,
-    alwaysScroll: true,
-    keys: true,
-    vi: false,
-    mouse: true,
-    scrollbar: { ch: '│', style: { fg: 'green' } } as never,
-    style: {
-      border: { fg: 'green' },
-      label:  { fg: 'green', bold: true },
-      scrollbar: { fg: 'green' },
-    },
-    padding: { top: 0, left: 1, right: 1, bottom: 0 },
-  });
-
-  screen.append(box);
-
-  // ── Line formatter ────────────────────────────────────────────────────────
-
-  function formatLine(
-    id: string,
-    stream: 'stdout' | 'stderr',
-    line: string,
-    timestamp: number
-  ): string {
-    const time = new Date(timestamp).toLocaleTimeString('en', { hour12: false });
-    const prefix = showPrefix ? `{cyan-fg}[${id}]{/cyan-fg} ` : '';
-    const ts     = `{gray-fg}${time}{/gray-fg} `;
-    const text   = stream === 'stderr'
-      ? `{red-fg}${line}{/red-fg}`
-      : line;
-    return `${ts}${prefix}${text}`;
-  }
-
-  // ── Render history on mount ────────────────────────────────────────────────
-
-  const history = logManager.getAllLines();
-  const historyLines = history.map(l => formatLine(l.id, l.stream, l.line, l.timestamp));
-  if (historyLines.length > 0) {
-    box.setContent(historyLines.join('\n'));
-    // Scroll to bottom after setting content
-    (box as unknown as { setScrollPerc: (n: number) => void }).setScrollPerc(100);
-  } else {
-    box.setContent(
-      '{gray-fg}Waiting for output from managed processes...{/gray-fg}'
-    );
-  }
-
-  // ── Live subscription ─────────────────────────────────────────────────────
-
-  // Maintain a local line buffer for efficient append
-  const lines: string[] = [...historyLines];
-
-  const unsubLine = bus.on('log:line', ({ id, stream, line, timestamp }) => {
-    // Replace placeholder on first real line
-    if (lines.length === 0 || (lines.length === 1 && lines[0]?.includes('Waiting'))) {
-      lines.length = 0;
-    }
-    lines.push(formatLine(id, stream, line, timestamp));
-    box.setContent(lines.join('\n'));
-    (box as unknown as { setScrollPerc: (n: number) => void }).setScrollPerc(100);
-    screen.render();
-  });
-
-  const unsubStarted = bus.on('managed:started', ({ id, pid }) => {
-    lines.push(`{gray-fg}── ${id} started (pid ${pid}) ──{/gray-fg}`);
-    box.setContent(lines.join('\n'));
-    (box as unknown as { setScrollPerc: (n: number) => void }).setScrollPerc(100);
-    screen.render();
-  });
-
-  const unsubCrashed = bus.on('managed:crashed', ({ id, exitCode, restarts }) => {
-    lines.push(
-      `{red-fg}── ${id} crashed (exit ${exitCode ?? '?'}) — restart #${restarts} scheduled ──{/red-fg}`
-    );
-    box.setContent(lines.join('\n'));
-    (box as unknown as { setScrollPerc: (n: number) => void }).setScrollPerc(100);
-    screen.render();
-  });
-
-  const unsubRestarted = bus.on('managed:restarted', ({ id, pid, restarts }) => {
-    lines.push(`{yellow-fg}── ${id} restarted (pid ${pid}, #${restarts}) ──{/yellow-fg}`);
-    box.setContent(lines.join('\n'));
-    (box as unknown as { setScrollPerc: (n: number) => void }).setScrollPerc(100);
-    screen.render();
-  });
-
-  const unsubStopped = bus.on('managed:stopped', ({ id }) => {
-    lines.push(`{gray-fg}── ${id} stopped ──{/gray-fg}`);
-    box.setContent(lines.join('\n'));
-    (box as unknown as { setScrollPerc: (n: number) => void }).setScrollPerc(100);
-    screen.render();
-  });
-
-  // ── Focus key ─────────────────────────────────────────────────────────────
-
-  screen.key(['l'], () => {
-    box.focus();
-    screen.render();
-  });
-
-  box.key(['escape'], () => {
-    // Return focus to the screen root so other key bindings take over again
-    (screen as unknown as { focusPop: () => void }).focusPop?.();
-    screen.render();
-  });
-
-  // ── Destroy ───────────────────────────────────────────────────────────────
-
-  function destroy(): void {
-    unsubLine();
-    unsubStarted();
-    unsubCrashed();
-    unsubRestarted();
-    unsubStopped();
-    box.destroy();
-  }
-
-  return { box, destroy };
-}

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

@@ -1,94 +0,0 @@
-// ---------------------------------------------------------------------------
-// Memory Widget
-//
-// Renders RAM usage as a visual bar + breakdown of used/free/cached.
-// Subscribes to 'metrics:memory:updated' events.
-//
-// Layout:
-//   ┌─ Memory ─────────────────────────────────┐
-//   │ Used     ████████████░░░░░░░░  62.4%      │
-//   │                                           │
-//   │ Used    : 9.8 GB                          │
-//   │ Free    : 5.9 GB                          │
-//   │ Cached  : 1.2 GB                          │
-//   │ Total   : 15.7 GB                         │
-//   └───────────────────────────────────────────┘
-// ---------------------------------------------------------------------------
-
-import blessed from 'blessed';
-import type { BlessedScreen, Box } from 'blessed';
-import { bus } from '../../core/event-bus.ts';
-import { getMemoryMetrics } from '../../core/state-manager.ts';
-import type { MemoryMetrics } from '../../types/metrics.types.ts';
-import { formatBytes, colorPercent } from '../../utils/formatters.ts';
-
-interface MemoryWidgetOptions {
-  screen: BlessedScreen;
-  top: number | string;
-  left: number | string;
-  width: number | string;
-  height: number | string;
-}
-
-interface MemoryWidgetHandle {
-  box: Box;
-  destroy: () => void;
-}
-
-export function createMemoryWidget(options: MemoryWidgetOptions): MemoryWidgetHandle {
-  const { screen, top, left, width, height } = options;
-
-  const box = blessed.box({
-    top,
-    left,
-    width,
-    height,
-    label: ' Memory ',
-    tags: true,
-    border: { type: 'line' },
-    style: {
-      border: { fg: 'magenta' },
-      label: { fg: 'magenta', bold: true },
-    },
-    padding: { top: 0, left: 1, right: 1, bottom: 0 },
-  });
-
-  screen.append(box as unknown as import('blessed').BlessedElement);
-
-  function renderMetrics(metrics: MemoryMetrics): void {
-    const innerWidth = (typeof width === 'string' ? box.width : width as number) - 4;
-    const barWidth = Math.max(10, innerWidth - 14);
-
-    const filled = Math.round((Math.min(100, metrics.percent) / 100) * barWidth);
-    const empty = barWidth - filled;
-    const barColor = metrics.percent >= 85
-      ? '{red-fg}'
-      : metrics.percent >= 60 ? '{yellow-fg}' : '{green-fg}';
-    const bar = `${barColor}${'█'.repeat(filled)}{/}${'░'.repeat(empty)}`;
-    const pct = colorPercent(metrics.percent);
-
-    const lines: string[] = [
-      ` ${'RAM'.padEnd(8)} ${bar} ${pct}`,
-      '',
-      ` {bold}Used  {/bold}  : ${formatBytes(metrics.used)}`,
-      ` {bold}Free  {/bold}  : ${formatBytes(metrics.free)}`,
-      ` {bold}Cached{/bold}  : ${formatBytes(metrics.cached)}`,
-      ` {bold}Total {/bold}  : ${formatBytes(metrics.total)}`,
-    ];
-
-    box.setContent(lines.join('\n'));
-    screen.render();
-  }
-
-  const initial = getMemoryMetrics();
-  if (initial) renderMetrics(initial);
-
-  const unsub = bus.on('metrics:memory:updated', renderMetrics);
-
-  function destroy(): void {
-    unsub();
-    box.destroy();
-  }
-
-  return { box: box as unknown as Box, destroy };
-}

package/src/ui/widgets/network.widget.ts

@@ -1,185 +0,0 @@
-// ---------------------------------------------------------------------------
-// Network Widget
-//
-// Layout (side by side inside a borderless container):
-//   Left  ~28%: Interfaces panel (total summary + per-interface rows)
-//   Right ~72%: Throughput line chart (rx green / tx red, rolling 60s)
-//
-// Toggle key: n  (handled in layout.ts)
-// ---------------------------------------------------------------------------
-
-import blessed from 'blessed';
-import contrib from 'blessed-contrib';
-import type { BlessedScreen, BlessedElement } from 'blessed';
-import { bus }               from '../../core/event-bus.ts';
-import { getNetworkMetrics } from '../../core/state-manager.ts';
-import type { NetworkMetrics, NetworkInterface } from '../../types/metrics.types.ts';
-import { truncate } from '../../utils/formatters.ts';
-
-interface NetworkWidgetOptions {
-  screen: BlessedScreen;
-  top:    number | string;
-  left:   number | string;
-  width:  number | string;
-  height: number | string;
-}
-
-interface NetworkWidgetHandle {
-  box:     BlessedElement;
-  destroy: () => void;
-}
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const HISTORY_LEN = 30;
-
-// ── Formatters ────────────────────────────────────────────────────────────────
-
-function fmtRate(bps: number): string {
-  if (bps < 1024)        return `${bps.toFixed(0)} B/s`;
-  if (bps < 1024 * 1024) return `${(bps / 1024).toFixed(1)} KB/s`;
-  if (bps < 1024 ** 3)   return `${(bps / (1024 * 1024)).toFixed(1)} MB/s`;
-  return `${(bps / (1024 ** 3)).toFixed(1)} GB/s`;
-}
-
-function stateTag(s: NetworkInterface['operstate']): string {
-  if (s === 'up')   return '{green-fg}▲{/green-fg}';
-  if (s === 'down') return '{red-fg}▼{/red-fg}';
-  return '{gray-fg}?{/gray-fg}';
-}
-
-// X-axis labels: real time strings at every position so blessed-contrib's
-// internal showNthLabel recalc never skips them. We show seconds ago from right to left.
-function makeXLabels(): string[] {
-  return Array.from({ length: HISTORY_LEN }, (_, i) => {
-    const age = HISTORY_LEN - 1 - i;
-    return `-${age}s`;
-  });
-}
-
-// ── Widget factory ────────────────────────────────────────────────────────────
-
-export function createNetworkWidget(options: NetworkWidgetOptions): NetworkWidgetHandle {
-  const { screen, top, left, width, height } = options;
-
-  // Outer container — no border; children carry their own borders.
-  // NOTE: appended to screen AFTER all children are parented so that
-  // contrib.line's 'attach' event fires with real dimensions.
-  const box = blessed.box({ top, left, width, height, tags: false });
-
-  // ── Left: Interfaces panel ────────────────────────────────────────────────
-
-  const statsBox = blessed.box({
-    parent: box as unknown as BlessedElement,
-    top: 0,
-    left: 0,
-    width: '28%',
-    height: '100%',
-    label: ' Interfaces ',
-    tags: true,
-    border: { type: 'line' },
-    scrollable: true,
-    alwaysScroll: true,
-    mouse: true,
-    style: {
-      border: { fg: 'magenta' },
-      label:  { fg: 'magenta', bold: true },
-    },
-    padding: { top: 0, left: 1, right: 1, bottom: 0 },
-  });
-
-  // ── Right: Throughput line chart ──────────────────────────────────────────
-
-  const rxHistory: number[] = new Array(HISTORY_LEN).fill(0);
-  const txHistory: number[] = new Array(HISTORY_LEN).fill(0);
-
-  const chart = new contrib.line({
-    parent: box as unknown as BlessedElement,
-    top: 0,
-    left: '28%',
-    width: '72%',
-    height: '100%',
-    label: ' Throughput MB/s [n=toggle] ',
-    showLegend: true,
-    legend: { width: 10 },
-    xLabelPadding: 1,
-    xPadding: 2,
-    numYLabels: 3,
-    showNthLabel: 5,
-    minY: 0,
-    style: {
-      line:     ['green', 'red'],
-      text:     'white',
-      baseline: 'black',
-    },
-  });
-
-  // Append box AFTER all children are parented → 'attach' fires on chart with real dims
-  screen.append(box);
-
-  // ── Render ────────────────────────────────────────────────────────────────
-
-  function render(metrics: NetworkMetrics): void {
-    // ── Update chart history ─────────────────────────────────────────────
-    rxHistory.push(metrics.totalRxBytesPerSec);
-    rxHistory.shift();
-    txHistory.push(metrics.totalTxBytesPerSec);
-    txHistory.shift();
-
-    const MB = 1024 * 1024;
-    const maxVal = Math.max(...rxHistory, ...txHistory, 1024);
-    const xLabels = makeXLabels();
-
-    (chart as unknown as { options: { maxY: number } }).options.maxY = (maxVal / MB) * 1.2;
-    (chart as unknown as { setData: (d: unknown) => void }).setData([
-      { title: '↓ RX', x: xLabels, y: rxHistory.map(v => v / MB), style: { line: 'green' } },
-      { title: '↑ TX', x: xLabels, y: txHistory.map(v => v / MB), style: { line: 'red'   } },
-    ]);
-
-    // ── Update interfaces panel ──────────────────────────────────────────
-    const lines: string[] = [];
-
-    lines.push(
-      `{bold}Total{/bold}`,
-      `{green-fg}↓ ${fmtRate(metrics.totalRxBytesPerSec)}{/green-fg}`,
-      `{red-fg}↑ ${fmtRate(metrics.totalTxBytesPerSec)}{/red-fg}`,
-      '',
-    );
-
-    if (metrics.interfaces.length === 0) {
-      lines.push('{gray-fg}No interfaces{/gray-fg}');
-    } else {
-      for (const iface of metrics.interfaces) {
-        const state = stateTag(iface.operstate);
-        const name  = truncate(iface.iface, 12);
-        const ip    = truncate(iface.ip4 || iface.ip6 || '—', 15);
-        const rx    = `{green-fg}↓ ${fmtRate(iface.rxBytesPerSec)}{/green-fg}`;
-        const tx    = `{red-fg}↑ ${fmtRate(iface.txBytesPerSec)}{/red-fg}`;
-        const err   = iface.rxErrors + iface.txErrors > 0
-          ? `\n  {red-fg}err:${iface.rxErrors + iface.txErrors}{/red-fg}`
-          : '';
-        lines.push(`${state} {bold}${name}{/bold}`, `  ${ip}`, `  ${rx}`, `  ${tx}${err}`, '');
-      }
-    }
-
-    statsBox.setContent(lines.join('\n'));
-    screen.render();
-  }
-
-  // Initial paint
-  const initial = getNetworkMetrics();
-  if (initial) {
-    render(initial);
-  } else {
-    statsBox.setContent('{gray-fg}Collecting…{/gray-fg}');
-  }
-
-  const unsub = bus.on('metrics:network:updated', render);
-
-  function destroy(): void {
-    unsub();
-    box.destroy();
-  }
-
-  return { box, destroy };
-}