metwatch 0.1.0 → 0.2.0

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

@@ -0,0 +1,125 @@
+// ---------------------------------------------------------------------------
+// Network Widget — ink/React
+// ---------------------------------------------------------------------------
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useStdout } from 'ink';
+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';
+import { Sparkline, RingBuffer } from './sparkline.tsx';
+
+const HISTORY_LEN = 60;
+
+function fmtRate(bps: number): string {
+  if (bps < 1024)          return `${bps.toFixed(0)} B/s`;
+  if (bps < 1_048_576)     return `${(bps / 1024).toFixed(1)} KB/s`;
+  if (bps < 1_073_741_824) return `${(bps / 1_048_576).toFixed(1)} MB/s`;
+  return `${(bps / 1_073_741_824).toFixed(1)} GB/s`;
+}
+
+function IfaceRow({ iface }: { iface: NetworkInterface }): React.ReactElement {
+  const stateColor = iface.operstate === 'up' ? 'green' : iface.operstate === 'down' ? 'red' : 'gray';
+  const stateChar  = iface.operstate === 'up' ? '▲' : iface.operstate === 'down' ? '▼' : '?';
+  const errors = iface.rxErrors + iface.txErrors;
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box flexDirection="row">
+        <Text color={stateColor}>{stateChar} </Text>
+        <Text bold>{truncate(iface.iface, 12)}</Text>
+      </Box>
+      <Text>  {truncate(iface.ip4 || iface.ip6 || '—', 15)}</Text>
+      <Box flexDirection="row">
+        <Text>  </Text><Text color="green">↓ {fmtRate(iface.rxBytesPerSec)}</Text>
+      </Box>
+      <Box flexDirection="row">
+        <Text>  </Text><Text color="red">↑ {fmtRate(iface.txBytesPerSec)}</Text>
+      </Box>
+      {errors > 0 && (
+        <Box flexDirection="row"><Text>  </Text><Text color="red">err:{errors}</Text></Box>
+      )}
+    </Box>
+  );
+}
+
+export function NetworkPanel(): React.ReactElement {
+  const { stdout } = useStdout();
+  const [metrics, setMetrics] = useState<NetworkMetrics | null>(getNetworkMetrics);
+
+  // Ring buffers persist across re-renders via refs
+  const rxHistory = useRef(new RingBuffer(HISTORY_LEN));
+  const txHistory = useRef(new RingBuffer(HISTORY_LEN));
+
+  // Arrays derived from ring buffers — updated on each metrics tick
+  const [rxSeries, setRxSeries] = useState<number[]>(() => rxHistory.current.toArray());
+  const [txSeries, setTxSeries] = useState<number[]>(() => txHistory.current.toArray());
+
+  useEffect(() => {
+    const unsub = bus.on('metrics:network:updated', (m) => {
+      setMetrics(m);
+      rxHistory.current.push(m.totalRxBytesPerSec);
+      txHistory.current.push(m.totalTxBytesPerSec);
+      setRxSeries(rxHistory.current.toArray());
+      setTxSeries(txHistory.current.toArray());
+    });
+    return unsub;
+  }, []);
+
+  // Chart takes 72% of the network row; subtract borders, padding, Y-label space
+  const totalCols  = stdout.columns ?? 80;
+  const chartCols  = Math.max(20, Math.floor(totalCols * 0.55 * 0.72) - 4);
+
+  return (
+    <Box flexDirection="row" flexGrow={1}>
+      {/* Left: interfaces panel */}
+      <Box
+        borderStyle="single"
+        borderColor="magenta"
+        flexDirection="column"
+        width="28%"
+        paddingX={1}
+        overflow="hidden"
+      >
+        <Text color="magenta" bold> Interfaces </Text>
+        {metrics === null ? (
+          <Text color="gray">Collecting…</Text>
+        ) : (
+          <>
+            <Box flexDirection="column" marginBottom={1}>
+              <Text bold>Total</Text>
+              <Box flexDirection="row">
+                <Text color="green">↓ {fmtRate(metrics.totalRxBytesPerSec)}</Text>
+              </Box>
+              <Box flexDirection="row">
+                <Text color="red">↑ {fmtRate(metrics.totalTxBytesPerSec)}</Text>
+              </Box>
+            </Box>
+            {metrics.interfaces.length === 0 ? (
+              <Text color="gray">No interfaces</Text>
+            ) : (
+              metrics.interfaces.map((iface, i) => <IfaceRow key={i} iface={iface} />)
+            )}
+          </>
+        )}
+      </Box>
+
+      {/* Right: sparkline throughput chart */}
+      <Box
+        borderStyle="single"
+        borderColor="magenta"
+        flexDirection="column"
+        flexGrow={1}
+        paddingX={1}
+      >
+        <Sparkline
+          rxSeries={rxSeries}
+          txSeries={txSeries}
+          width={chartCols}
+          label="Throughput [n=toggle]"
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/ui/widgets/process-table.widget.tsx

@@ -0,0 +1,262 @@
+// ---------------------------------------------------------------------------
+// Process Table Widget — ink/React
+// ---------------------------------------------------------------------------
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { bus } from '../../core/event-bus.ts';
+import { getProcesses } from '../../core/state-manager.ts';
+import type { ProcessInfo, ProcessList, ProcessViewMode, ProcessSortKey } from '../../types/process.types.ts';
+import type { ResolvedConfig } from '../../types/config.types.ts';
+import type { ManagedProcess } from '../../types/managed-process.types.ts';
+import { formatBytes, formatPercent, formatUptime, truncate } from '../../utils/formatters.ts';
+
+interface ProcessTableProps {
+  config:         ResolvedConfig;
+  getManagedById: (id: string) => ManagedProcess | undefined;
+  managedNames:   Set<string>;
+  isFocused:      boolean;
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  running:    '● ',
+  restarting: '↻ ',
+  crashed:    '✕ ',
+  stopped:    '■ ',
+};
+
+function uptime(p: ProcessInfo): string {
+  if (!p.startedAt) return '—';
+  return formatUptime(Math.floor((Date.now() - p.startedAt) / 1000));
+}
+
+const COL_WIDTHS = [7, 22, 7, 10, 6, 10, 5, 11] as const;
+const HEADERS    = ['PID', 'NAME', 'CPU%', 'MEM', 'MEM%', 'USER', 'THR', 'STATUS'];
+
+function ProcessRow({ p, managed, isManaged, selected }: {
+  p: ProcessInfo;
+  managed?: ManagedProcess;
+  isManaged: boolean;
+  selected: boolean;
+}): React.ReactElement {
+  const badge  = managed ? (STATUS_BADGE[managed.status] ?? '') : '  ';
+  const name   = badge + truncate(p.name, 19);
+  const status = managed
+    ? `${managed.status}${managed.restarts > 0 ? ` ×${managed.restarts}` : ''}`
+    : p.status;
+
+  const cells = [
+    String(p.pid).padEnd(COL_WIDTHS[0]),
+    name.padEnd(COL_WIDTHS[1]),
+    formatPercent(p.cpu).padEnd(COL_WIDTHS[2]),
+    formatBytes(p.memory).padEnd(COL_WIDTHS[3]),
+    formatPercent(p.memoryPercent).padEnd(COL_WIDTHS[4]),
+    truncate(p.user || '—', 10).padEnd(COL_WIDTHS[5]),
+    String(p.threads || 1).padEnd(COL_WIDTHS[4]),
+    status.padEnd(COL_WIDTHS[7]),
+  ];
+
+  const line = ' ' + cells.join(' ');
+
+  let color: string | undefined;
+  if (isManaged)   color = 'cyan';
+  else if (p.cpu >= 50) color = 'red';
+  else if (p.cpu >= 20) color = 'yellow';
+
+  return (
+    <Text inverse={selected} color={color}>{line}</Text>
+  );
+}
+
+export function ProcessTablePanel({ config, getManagedById, managedNames, isFocused }: ProcessTableProps): React.ReactElement {
+  const [viewMode, setViewMode]   = useState<ProcessViewMode>('all');
+  const [sortKey, setSortKey]     = useState<ProcessSortKey>('cpu');
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [list, setList]           = useState<ProcessList>([]);
+  const [flash, setFlash]         = useState<string | null>(null);
+  const [killTarget, setKillTarget] = useState<ProcessInfo | null>(null);
+
+  // Patterns (rebuilt when managedNames changes)
+  const watchedPatterns = config.watchedProcesses.map(w => w.name.toLowerCase());
+  const managedPatterns = [...managedNames].map(n => n.toLowerCase());
+
+  const buildList = useCallback((raw: ProcessList, mode: ProcessViewMode, sort: ProcessSortKey): ProcessList => {
+    let filtered = mode === 'all' ? raw : raw.filter(p => {
+      const name = p.name.toLowerCase();
+      return watchedPatterns.some(pat => name.includes(pat))
+          || managedPatterns.some(m   => name.includes(m));
+    });
+    return [...filtered].sort((a, b) => {
+      switch (sort) {
+        case 'cpu':    return b.cpu    - a.cpu;
+        case 'memory': return b.memory - a.memory;
+        case 'name':   return a.name.localeCompare(b.name);
+        case 'pid':    return a.pid    - b.pid;
+      }
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewMode, sortKey, managedNames]);
+
+  useEffect(() => {
+    const refresh = (raw: ProcessList): void => {
+      const built = buildList(raw, viewMode, sortKey);
+      setList(built);
+      setSelectedIdx(i => Math.min(i, Math.max(0, built.length - 1)));
+    };
+
+    const unsubProc     = bus.on('processes:updated', refresh);
+    const unsubStarted  = bus.on('managed:started',  () => refresh(getProcesses()));
+    const unsubStopped  = bus.on('managed:stopped',  () => refresh(getProcesses()));
+    const unsubCrashed  = bus.on('managed:crashed',  () => refresh(getProcesses()));
+    const unsubRestart  = bus.on('managed:restarted',() => refresh(getProcesses()));
+    const unsubKill     = bus.on('process:kill:result', ({ pid, success, error }) => {
+      const msg = success
+        ? `Process ${pid} terminated.`
+        : `Kill failed for ${pid}: ${error ?? 'unknown'}`;
+      showFlash(msg, success ? 'green' : 'red');
+    });
+
+    // Initial fill
+    refresh(getProcesses());
+
+    return () => {
+      unsubProc(); unsubStarted(); unsubStopped();
+      unsubCrashed(); unsubRestart(); unsubKill();
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewMode, sortKey, managedNames]);
+
+  function showFlash(msg: string, _color?: string): void {
+    setFlash(msg);
+    setTimeout(() => setFlash(null), 2500);
+  }
+
+  useInput((input, key) => {
+    if (!isFocused) return;
+
+    // Kill confirm modal intercepts all input
+    if (killTarget !== null) {
+      if (input.toLowerCase() === 'y') {
+        bus.emit('process:kill:requested', { pid: killTarget.pid });
+        setKillTarget(null);
+      } else if (input.toLowerCase() === 'n' || key.escape) {
+        setKillTarget(null);
+      }
+      return;
+    }
+
+    if (input === 'a') { setViewMode('all');     return; }
+    if (input === 'f') { setViewMode('watched'); return; }
+    if (input === 'c') { setSortKey('cpu');      return; }
+    if (input === 'm') { setSortKey('memory');   return; }
+
+    if (key.upArrow || input === 'k') {
+      setSelectedIdx(i => Math.max(0, i - 1));
+      return;
+    }
+    if (key.downArrow || input === 'j') {
+      setSelectedIdx(i => Math.min(list.length - 1, i + 1));
+      return;
+    }
+
+    if (input === 'K') {
+      const proc = list[selectedIdx];
+      if (proc) setKillTarget(proc);
+      return;
+    }
+
+    if (input === 'r') {
+      const proc = list[selectedIdx];
+      if (proc && managedNames.has(proc.name)) {
+        bus.emit('managed:restart:requested', { id: proc.name });
+        showFlash(`Restarting ${proc.name}…`);
+      }
+      return;
+    }
+
+    if (input === 's') {
+      const proc = list[selectedIdx];
+      if (proc && managedNames.has(proc.name)) {
+        bus.emit('managed:stop:requested', { id: proc.name });
+        showFlash(`Stopping ${proc.name}…`);
+      }
+      return;
+    }
+  });
+
+  const { stdout } = useStdout();
+
+  // Cap rows to what fits in the process panel (~30% of terminal height minus chrome rows)
+  const panelRows = Math.max(4, Math.floor((stdout.rows ?? 24) * 0.30) - 4);
+  const visibleList = list.slice(0, panelRows);
+
+  const hasManagedKeys = managedNames.size > 0;
+  const labelHint = hasManagedKeys
+    ? ' Processes [a/f c/m ↑↓ K=kill r=restart s=stop] '
+    : ' Processes [a/f c/m ↑↓ K=kill] ';
+  const title = flash !== null ? ` ${flash} ` : labelHint;
+
+  const headerLine = ' ' + HEADERS.map((h, i) => h.padEnd(COL_WIDTHS[i] ?? 10)).join(' ');
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="yellow"
+      flexDirection="column"
+      flexGrow={1}
+      overflow="hidden"
+    >
+      {/* Title / flash */}
+      <Text color="yellow" bold>{title}</Text>
+
+      {/* Mode bar */}
+      <Box>
+        <Text>{' '}</Text>
+        <Text
+          inverse={viewMode === 'all'}
+          color={viewMode === 'all' ? 'cyan' : 'gray'}
+        > ALL </Text>
+        <Text> </Text>
+        <Text
+          inverse={viewMode === 'watched'}
+          color={viewMode === 'watched' ? 'cyan' : 'gray'}
+        > WATCH </Text>
+        <Text color="gray">  sort:{sortKey}</Text>
+        {hasManagedKeys && <Text color="gray">  [r]=restart [s]=stop managed</Text>}
+      </Box>
+
+      {/* Header */}
+      <Text color="cyan" bold>{headerLine}</Text>
+
+      {/* Rows */}
+      {list.length === 0 ? (
+        <Text color="gray">  No processes found.</Text>
+      ) : (
+        visibleList.map((p, i) => (
+          <ProcessRow
+            key={p.pid}
+            p={p}
+            managed={getManagedById(p.name)}
+            isManaged={managedNames.has(p.name)}
+            selected={i === selectedIdx}
+          />
+        ))
+      )}
+
+      {/* Kill confirm modal */}
+      {killTarget !== null && (
+        <Box
+          borderStyle="single"
+          borderColor="red"
+          flexDirection="column"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text color="red" bold> Confirm Kill </Text>
+          <Text>Kill "{killTarget.name}" (PID {killTarget.pid})?</Text>
+          <Text color="gray">Press <Text color="white" bold>y</Text> to confirm, <Text color="white" bold>n</Text> to cancel</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,82 @@
+// ---------------------------------------------------------------------------
+// Runtime Widget — ink/React
+// ---------------------------------------------------------------------------
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { bus } from '../../core/event-bus.ts';
+import { getAllRuntimeMetrics } from '../../core/state-manager.ts';
+import type { RuntimeMetrics } from '../../types/metrics.types.ts';
+import { formatBytes, formatUptime, colorPercent } from '../../utils/formatters.ts';
+
+function lagColor(ms: number): 'red' | 'yellow' | 'green' {
+  if (ms >= 100) return 'red';
+  if (ms >= 20)  return 'yellow';
+  return 'green';
+}
+
+function ProcessRuntime({ m }: { m: RuntimeMetrics }): React.ReactElement {
+  const heapPct  = m.heapTotal > 0 ? (m.heapUsed / m.heapTotal) * 100 : 0;
+  const barWidth = 16;
+  const filled   = Math.round((Math.min(100, heapPct) / 100) * barWidth);
+  const empty    = barWidth - filled;
+  const barColor = colorPercent(heapPct);
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="cyan" bold>◈ {m.managedId}</Text>
+        <Text color="gray">  pid:{m.pid}  uptime:{formatUptime(m.uptime)}</Text>
+      </Box>
+      <Box>
+        <Text>   Heap [</Text>
+        <Text color={barColor}>{'█'.repeat(filled)}</Text>
+        <Text color="gray">{'░'.repeat(empty)}</Text>
+        <Text>] {formatBytes(m.heapUsed)}/{formatBytes(m.heapTotal)}  </Text>
+        <Text color={barColor}>{heapPct.toFixed(1)}%</Text>
+      </Box>
+      <Text>   RSS: {formatBytes(m.rss)}   External: {formatBytes(m.external)}   ArrayBuf: {formatBytes(m.arrayBuffers)}</Text>
+      <Box>
+        <Text>   EventLoop Lag: </Text>
+        <Text color={lagColor(m.eventLoopLag)}>{m.eventLoopLag.toFixed(1)}ms</Text>
+        <Text>   Handles: {m.activeHandles}   Requests: {m.activeRequests}</Text>
+      </Box>
+      <Text>
+        {'   GC: '}{m.gc.count} events   Total: {m.gc.totalPauseMs.toFixed(0)}ms
+        {m.gc.lastPauseMs !== null ? `   Last: ${m.gc.lastPauseMs.toFixed(1)}ms` : ''}
+      </Text>
+    </Box>
+  );
+}
+
+export function RuntimePanel(): React.ReactElement {
+  const [all, setAll] = useState<RuntimeMetrics[]>(getAllRuntimeMetrics);
+
+  useEffect(() => {
+    const unsub = bus.on('metrics:runtime:updated', () => {
+      setAll(getAllRuntimeMetrics());
+    });
+    return unsub;
+  }, []);
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="cyan"
+      flexDirection="column"
+      flexGrow={1}
+      paddingX={1}
+      overflow="hidden"
+    >
+      <Text color="cyan" bold> Runtime [R=toggle] </Text>
+      {all.length === 0 ? (
+        <>
+          <Text color="gray"> No runtime metrics yet.</Text>
+          <Text color="gray"> Launch a managed process with `mw start &lt;file&gt;` to see Node/Bun internals.</Text>
+        </>
+      ) : (
+        all.map(m => <ProcessRuntime key={m.managedId} m={m} />)
+      )}
+    </Box>
+  );
+}

package/src/ui/widgets/sparkline.tsx

@@ -0,0 +1,107 @@
+// ---------------------------------------------------------------------------
+// Sparkline — simple two-row ASCII throughput chart
+//
+// Renders two lines of block characters (▁▂▃▄▅▆▇█):
+//   Row 1: RX (green)
+//   Row 2: TX (red)
+//
+// Each column = one time sample (oldest left → newest right).
+// Height of each character = sample value / maxVal mapped to 8 levels.
+// ---------------------------------------------------------------------------
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+// 8-level block chars: index 0 = empty, index 8 = full block
+const BLOCKS = ['▁', '▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'] as const;
+
+function formatRate(bps: number): string {
+  if (bps < 1024)        return `${bps.toFixed(0)} B/s`;
+  if (bps < 1_048_576)   return `${(bps / 1024).toFixed(1)} KB/s`;
+  if (bps < 1_073_741_824) return `${(bps / 1_048_576).toFixed(1)} MB/s`;
+  return `${(bps / 1_073_741_824).toFixed(1)} GB/s`;
+}
+
+interface SparklineProps {
+  /** RX series in bytes/sec (oldest → newest) */
+  rxSeries: number[];
+  /** TX series in bytes/sec (oldest → newest) */
+  txSeries: number[];
+  /** Number of columns to display */
+  width: number;
+  label?: string;
+}
+
+function toChars(series: number[], maxVal: number, width: number): string {
+  // Pad or trim to exactly `width` samples
+  const padded = series.length >= width
+    ? series.slice(-width)
+    : [...new Array(width - series.length).fill(0) as number[], ...series];
+
+  return padded
+    .map(v => {
+      if (maxVal <= 0) return BLOCKS[0];
+      const idx = Math.min(8, Math.round((v / maxVal) * 8));
+      return BLOCKS[idx] ?? BLOCKS[8];
+    })
+    .join('');
+}
+
+export function Sparkline({ rxSeries, txSeries, width, label }: SparklineProps): React.ReactElement {
+  const maxVal = Math.max(...rxSeries, ...txSeries, 1);
+  const rxChars = toChars(rxSeries, maxVal, width);
+  const txChars = toChars(txSeries, maxVal, width);
+
+  const currentRx = rxSeries.at(-1) ?? 0;
+  const currentTx = txSeries.at(-1) ?? 0;
+
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      {label !== undefined && <Text color="magenta" bold> {label} </Text>}
+      <Box flexDirection="row" gap={1}>
+        <Text color="green" bold>↓RX</Text>
+        <Text color="green">{formatRate(currentRx)}</Text>
+        <Text color="red" bold>↑TX</Text>
+        <Text color="red">{formatRate(currentTx)}</Text>
+        <Text color="gray">max:{formatRate(maxVal)}</Text>
+      </Box>
+      <Box flexGrow={1} />
+      <Text color="green">{rxChars}</Text>
+      <Text color="red">{txChars}</Text>
+      <Text color="gray">{'─'.repeat(width)}</Text>
+    </Box>
+  );
+}
+
+// ── RingBuffer ────────────────────────────────────────────────────────────────
+// Re-exported for use in network.widget.tsx
+
+export class RingBuffer {
+  private readonly buf: number[];
+  private head = 0;
+  readonly length: number;
+
+  constructor(size: number) {
+    this.length = size;
+    this.buf = new Array(size).fill(0) as number[];
+  }
+
+  push(value: number): void {
+    this.buf[this.head] = value;
+    this.head = (this.head + 1) % this.length;
+  }
+
+  toArray(): number[] {
+    const out = new Array(this.length) as number[];
+    for (let i = 0; i < this.length; i++) {
+      out[i] = this.buf[(this.head + i) % this.length]!;
+    }
+    return out;
+  }
+
+  max(): number {
+    let m = 0;
+    for (const v of this.buf) { if (v > m) m = v; }
+    return m;
+  }
+}

package/src/utils/formatters.ts

@@ -8,15 +8,19 @@
 
 const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;
 
+// Hoisted constants — avoid recomputing inside hot-path functions.
+const LOG_1024  = Math.log(1024);
+const BYTE_DIVS = [1, 1024, 1_048_576, 1_073_741_824, 1_099_511_627_776] as const;
+
 /**
  * Format bytes into the most appropriate human-readable unit.
  * @example formatBytes(1536) → "1.5 KB"
  */
 export function formatBytes(bytes: number, decimals = 1): string {
   if (bytes <= 0) return '0 B';
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const i      = Math.floor(Math.log(bytes) / LOG_1024);
   const capped = Math.min(i, BYTE_UNITS.length - 1);
-  const value = bytes / Math.pow(1024, capped);
+  const value  = bytes / BYTE_DIVS[capped]!;
   return `${value.toFixed(decimals)} ${BYTE_UNITS[capped]}`;
 }
 
@@ -49,7 +53,8 @@ export function formatUptime(seconds: number): string {
  * @example truncate('hello world', 8) → "hello..."
  */
 export function truncate(str: string, maxLen: number): string {
-  if (str.length <= maxLen) return str.padEnd(maxLen);
+  if (str.length === maxLen) return str;          // already exact — no allocation
+  if (str.length < maxLen)  return str.padEnd(maxLen);
   return str.slice(0, maxLen - 3) + '...';
 }
 
@@ -63,12 +68,11 @@ export function bar(percent: number, width = 20): string {
 }
 
 /**
- * Color-code a percentage as a blessed tag string.
+ * Return an ink/React color string for a percentage value.
  * green < 60, yellow < 85, red >= 85
  */
-export function colorPercent(percent: number): string {
-  const formatted = formatPercent(percent);
-  if (percent >= 85) return `{red-fg}${formatted}{/red-fg}`;
-  if (percent >= 60) return `{yellow-fg}${formatted}{/yellow-fg}`;
-  return `{green-fg}${formatted}{/green-fg}`;
+export function colorPercent(percent: number): 'red' | 'yellow' | 'green' {
+  if (percent >= 85) return 'red';
+  if (percent >= 60) return 'yellow';
+  return 'green';
 }