pyre-cli 5.1.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pyre-cli",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "description": "CLI Mac monitoring tool: temps, system stats, live dashboard, packet monitor, battery predictor, export",
   "main": "dist/index.js",
   "type": "module",

package/src/formatters/index.ts

@@ -11,7 +11,7 @@
  * - `render.ts` — dashboard layout, cards, tables, and the main `formatTable`
  * - `output.ts` — JSON/CSV/TSV export and sparkline graph rendering
  */
-export { formatTable, clampWidth, gridColumns, thermalColor, capacityColor, getTabHitboxes, TAB_BAR_ROW, TAB_DEFS, panel, formatBytes } from './render.js';
+export { formatTable, clampWidth, gridColumns, thermalColor, capacityColor, getTabHitboxes, TAB_BAR_ROW, TAB_DEFS, panel, formatBytes, padVisible, visLen, fitVisible } from './render.js';
 export { formatJson, formatCsv, formatTsv, formatGraphs, formatHtml, formatMarkdown } from './output.js';
 export type { ThemeName, ThemeColors, VisibleItems, TableOptions, AnomalyAlert } from './types.js';
 export { THEMES } from './themes.js';

package/src/formatters/output.ts

@@ -10,8 +10,7 @@ import { sparkline } from '../sparkline.js';
 import type { History } from '../history.js';
 import type { StatsData } from './types.js';
 import { THEMES, type ThemeName } from './themes.js';
-import { formatBytes, celsiusToFahrenheit, formatTemp } from './render.js';
-import { panel } from './render.js';
+import { formatBytes, celsiusToFahrenheit, formatTemp, panel, fitVisible } from './render.js';
 
 export function formatJson(data: StatsData): string {
   return JSON.stringify(data, null, 2);
@@ -434,24 +433,24 @@ export function formatGraphs(history: History, width = 80, themeName: ThemeName
   const theme = THEMES[themeName] || THEMES.default;
   const contentWidth = width - 4;
   const sampleCount = history.cpuUsage.length;
-  const sparkWidth = Math.max(10, contentWidth - 28);
+  const sparkWidth = Math.max(10, contentWidth - 24);
 
   const lines: string[] = [];
-  lines.push(graphRow('CPU %', history.cpuUsage, { min: 0, max: 100 }, v => `${v.toFixed(0)}%`, sparkWidth, 'collecting data...', graphMode));
-  lines.push(graphRow('Mem %', history.memUsage, { min: 0, max: 100 }, v => `${v.toFixed(0)}%`, sparkWidth, 'collecting data...', graphMode));
+  lines.push(graphRow('CPU %', history.cpuUsage, { min: 0, max: 100 }, v => `${v.toFixed(0)}%`, sparkWidth, 'collecting data...', graphMode, contentWidth));
+  lines.push(graphRow('Mem %', history.memUsage, { min: 0, max: 100 }, v => `${v.toFixed(0)}%`, sparkWidth, 'collecting data...', graphMode, contentWidth));
   lines.push(
-    graphRow('Temp', history.temp, {}, formatTemp, sparkWidth, 'no sensor access (needs sudo powermetrics)', graphMode)
+    graphRow('Temp', history.temp, {}, v => `${v.toFixed(1)}°C`, sparkWidth, 'no sensor access', graphMode, contentWidth)
   );
-  lines.push(graphRow('Net RX/s', history.netRxRate, {}, v => `${formatBytes(v)}/s`, sparkWidth, 'collecting data...', graphMode));
-  lines.push(graphRow('Net TX/s', history.netTxRate, {}, v => `${formatBytes(v)}/s`, sparkWidth, 'collecting data...', graphMode));
+  lines.push(graphRow('Net RX/s', history.netRxRate, {}, v => `${formatBytes(v)}/s`, sparkWidth, 'collecting data...', graphMode, contentWidth));
+  lines.push(graphRow('Net TX/s', history.netTxRate, {}, v => `${formatBytes(v)}/s`, sparkWidth, 'collecting data...', graphMode, contentWidth));
   if (history.powerWatts.length) {
-    lines.push(graphRow('Power W', history.powerWatts, {}, v => `${v.toFixed(1)} W`, sparkWidth, 'collecting data...', graphMode));
+    lines.push(graphRow('Power W', history.powerWatts, {}, v => `${v.toFixed(1)} W`, sparkWidth, 'collecting data...', graphMode, contentWidth));
   }
   if (history.rxPacketRate.length) {
-    lines.push(graphRow('RX pkt/s', history.rxPacketRate, {}, v => `${v.toFixed(0)} pkt/s`, sparkWidth, 'collecting data...', graphMode));
+    lines.push(graphRow('RX pkt/s', history.rxPacketRate, {}, v => `${v.toFixed(0)} pkt/s`, sparkWidth, 'collecting data...', graphMode, contentWidth));
   }
   if (history.txPacketRate.length) {
-    lines.push(graphRow('TX pkt/s', history.txPacketRate, {}, v => `${v.toFixed(0)} pkt/s`, sparkWidth, 'collecting data...', graphMode));
+    lines.push(graphRow('TX pkt/s', history.txPacketRate, {}, v => `${v.toFixed(0)} pkt/s`, sparkWidth, 'collecting data...', graphMode, contentWidth));
   }
 
   const title = `Graphs · mode:${graphMode} · last ${sampleCount} sample${sampleCount === 1 ? '' : 's'}`;
@@ -465,7 +464,8 @@ function graphRow(
   fmt: (v: number) => string,
   sparkWidth = 40,
   emptyMessage = 'collecting data...',
-  mode: 'spark' | 'bar' = 'spark'
+  mode: 'spark' | 'bar' = 'spark',
+  contentWidth = 76
 ): string {
   if (!values.length) {
     return `${chalk.dim(label.padEnd(10))} ${chalk.dim(emptyMessage)}`;
@@ -480,7 +480,8 @@ function graphRow(
     color = pct > 90 ? chalk.red : pct > 70 ? chalk.yellow : chalk.green;
   }
 
-  return `${chalk.dim(label.padEnd(10))}${color(spark)}  ${chalk.bold(fmt(current))}`;
+  const raw = `${chalk.dim(label.padEnd(10))}${color(spark)}  ${chalk.bold(fmt(current))}`;
+  return fitVisible(raw, contentWidth);
 }
 
 function barGraph(values: number[], bounds: { min?: number; max?: number }, width: number): string {

package/src/formatters/render.ts

@@ -10,22 +10,58 @@
  * all layout-related code is co-located.
  */
 import chalk from 'chalk';
-import { sparkline } from '../sparkline.js';
+import { sparkline, multiRowSparkline } from '../sparkline.js';
 import type { History } from '../history.js';
 import type { StatsData, VisibleItems, TableOptions, AnomalyAlert } from './types.js';
-import { THEMES, type ThemeName } from './themes.js';
+import { THEMES, type ThemeName, type ThemeColors } from './themes.js';
+
 
 // --- low-level box drawing ---------------------------------------------------
 
-function visLen(s: string): number {
+export function visLen(s: string): number {
   // eslint-disable-next-line no-control-regex
   return s.replace(/\x1b\[[0-9;]*m/g, '').length;
 }
 
-function padVisible(s: string, width: number): string {
+export function fitVisible(s: string, width: number): string {
+  const w = Math.max(0, width);
   const len = visLen(s);
-  if (len >= width) return s;
-  return s + ' '.repeat(width - len);
+  if (len === w) return s;
+  if (len < w) return s + ' '.repeat(w - len);
+
+  let visibleCount = 0;
+  let out = '';
+  let inAnsi = false;
+
+  for (let i = 0; i < s.length; i++) {
+    const char = s[i];
+    if (char === '\x1b') {
+      inAnsi = true;
+      out += char;
+    } else if (inAnsi) {
+      out += char;
+      if ((char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z')) {
+        inAnsi = false;
+      }
+    } else {
+      if (visibleCount < w) {
+        out += char;
+        visibleCount++;
+      } else {
+        break;
+      }
+    }
+  }
+  out += '\x1b[0m';
+  const resLen = visLen(out);
+  if (resLen < w) {
+    out += ' '.repeat(w - resLen);
+  }
+  return out;
+}
+
+export function padVisible(s: string, width: number): string {
+  return fitVisible(s, width);
 }
 
 function truncatePlain(s: string, width: number): string {
@@ -40,29 +76,50 @@ export function panel(
   width: number,
   accent: (s: string) => string,
   borderAccent: (s: string) => string,
-  height?: number
+  height?: number,
+  rightTitle?: string
 ): string[] {
   const h = height ?? lines.length;
   const contentWidth = Math.max(1, width - 4);
-  const label = ` ${title} `;
-  const top = borderAccent('┌' + label + '─'.repeat(width - label.length - 2) + '┐');
-  const bottom = borderAccent('└' + '─'.repeat(width - 2) + '┘');
+  const leftLabel = title ? ` ${title} ` : '';
+  const rightLabel = rightTitle ? ` ${rightTitle} ` : '';
+  const innerW = Math.max(0, width - 2);
+  let topInner = leftLabel + '─'.repeat(Math.max(0, innerW - visLen(leftLabel) - visLen(rightLabel))) + rightLabel;
+  if (visLen(topInner) > innerW) {
+    topInner = fitVisible(topInner, innerW);
+  } else if (visLen(topInner) < innerW) {
+    topInner = topInner + '─'.repeat(innerW - visLen(topInner));
+  }
+  const top = borderAccent('┌' + topInner + '┐');
+  const bottom = borderAccent('└' + '─'.repeat(innerW) + '┘');
   const body: string[] = [];
   for (let i = 0; i < h; i++) {
     const line = lines[i] ?? '';
-    body.push(`${borderAccent('│')} ${padVisible(line, contentWidth)} ${borderAccent('│')}`);
+    body.push(`${borderAccent('│')} ${fitVisible(line, contentWidth)} ${borderAccent('│')}`);
   }
   return [top, ...body, bottom];
 }
 
+export function gaugeBar(percent: number, width = 12): string {
+  const w = Math.max(1, width);
+  const pct = Math.min(100, Math.max(0, percent));
+  const filled = Math.round((pct / 100) * w);
+  const empty = w - filled;
+  const filledStr = '█'.repeat(filled);
+  const emptyStr = '░'.repeat(empty);
+  const color = pct > 85 ? chalk.red : pct > 65 ? chalk.yellow : chalk.cyan;
+  return color(filledStr) + chalk.dim(emptyStr);
+}
+
 /** Join equal-or-uneven-height panel blocks side by side with a gap. */
 function hstack(blocks: string[][], gap = 2, targetWidth?: number): string[] {
   if (!blocks.length) return [];
   const height = Math.max(...blocks.map(b => b.length));
-  const widths = blocks.map(b => visLen(b[0] ?? ''));
+  const widths = blocks.map(b => Math.max(0, ...b.map(l => visLen(l))));
   const padded = blocks.map((b, i) => {
-    const filler = ' '.repeat(widths[i]);
-    const arr = [...b];
+    const w = widths[i];
+    const filler = ' '.repeat(w);
+    const arr = b.map(line => fitVisible(line, w));
     while (arr.length < height) arr.push(filler);
     return arr;
   });
@@ -70,14 +127,14 @@ function hstack(blocks: string[][], gap = 2, targetWidth?: number): string[] {
   for (let row = 0; row < height; row++) {
     let line = padded.map(a => a[row]).join(' '.repeat(gap));
     if (targetWidth !== undefined) {
-      const pad = Math.max(0, targetWidth - visLen(line));
-      line += ' '.repeat(pad);
+      line = fitVisible(line, targetWidth);
     }
     out.push(line);
   }
   return out;
 }
 
+
 function statRow(label: string, value: string, width = 9): string {
   const w = Math.max(width, label.length + 1);
   return `${chalk.dim(label.padEnd(w))}${value}`;
@@ -117,7 +174,8 @@ export function capacityColor(percent: number) {
 }
 
 export function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
+  if (isNaN(bytes) || bytes < 0) return '0 B';
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
@@ -280,7 +338,7 @@ function header(data: StatsData, width: number, badges: string[] = [], borderAcc
   const left = `${chalk.hex('#ff5500').bold(' PYRE ')} ${chalk.bold(data.header.hostname)}  ${chalk.dim(data.header.os)}  ${chalk.dim('up ' + data.header.uptime)}`;
   const right = `${chalk.dim(now)}  ${badges.join('  ')}`;
   const gap = Math.max(1, width - visLen(left) - visLen(right));
-  const line = left + ' '.repeat(gap) + right;
+  const line = fitVisible(left + ' '.repeat(gap) + right, width);
   return [line, borderAccent('─'.repeat(width))];
 }
 
@@ -342,9 +400,27 @@ function tabBar(activePanel: string, width: number, theme: ThemeColors): string
     return `${keyHint}${label}`;
   });
 
-  const joined = rendered.join(chalk.dim(' │ '));
-  const padded = visLen(joined) < width ? joined + ' '.repeat(width - visLen(joined)) : joined;
-  return chalk.dim('  ') + padded;
+  const separator = chalk.dim(' │ ');
+  const joined = rendered.join(separator);
+  const indent = '  ';
+  const available = width - visLen(indent);
+  let result = joined;
+  if (visLen(joined) > available) {
+    let used = 0;
+    const kept: string[] = [];
+    for (let i = 0; i < rendered.length; i++) {
+      const tabW = visLen(rendered[i]) + (kept.length > 0 ? visLen(separator) : 0);
+      if (used + tabW > available && kept.length > 0) break;
+      kept.push(rendered[i]);
+      used += tabW;
+    }
+    if (kept.length < rendered.length) {
+      result = kept.join(separator) + chalk.dim('⋯');
+    }
+  }
+
+  const pad = Math.max(0, available - visLen(result));
+  return fitVisible(chalk.dim(indent) + result + ' '.repeat(pad), width);
 }
 
 // --- process / disk tables ---------------------------------------------------
@@ -596,126 +672,232 @@ function anomalyPanel(anomalies: AnomalyAlert[], width: number, theme: ThemeColo
   for (const a of anomalies) {
     const color = a.severity === 'critical' ? chalk.red.bold : chalk.yellow;
     const direction = a.zScore > 0 ? '↑ spike' : '↓ drop';
-    lines.push(color(` ⚠ ${a.metric}: ${a.value.toFixed(1)} (${direction}, σ=${a.zScore.toFixed(1)})`));
+    const valStr = a.metric.toLowerCase().includes('net') ? `${formatBytes(a.value)}/s` : `${a.value.toFixed(1)}%`;
+    lines.push(color(` ⚠ ${a.metric}: ${valStr} (${direction}, σ=${a.zScore.toFixed(1)})`));
   }
   return lines;
 }
 
-export function formatTable(data: StatsData, opts: TableOptions = {}): string {
-   const width = clampWidth(opts.width);
-   const activePanel = opts.activePanel || 'grid';
-   const columns = gridColumns(width);
-   const gap = 2;
-   const cardWidth = Math.floor((width - gap * (columns - 1)) / columns);
-   const contentWidth = cardWidth - 4;
-
-   const themeName = opts.theme || 'default';
-   const theme = THEMES[themeName] || THEMES.default;
-   const vis = opts.visible ?? {};
-
-   const out: string[] = [];
-   out.push(...header(data, width, [], theme.border));
-   out.push('');
-
-   const anomalies = opts.anomalies ?? [];
-   if (anomalies.length && activePanel === 'grid') {
-     out.push(...anomalyPanel(anomalies, width, theme));
-     out.push('');
-   }
+function btopCpuBox(data: StatsData, width: number, theme: ThemeColors, opts: TableOptions): string[] {
+  const contentWidth = width - 4;
+  const rightTitle = `${data.header.hostname} · up ${data.header.uptime} · ${data.cpu.usage.toFixed(0)}%`;
 
-   out.push(tabBar(activePanel, width, theme));
-   out.push('');
+  if (contentWidth >= 65) {
+    const leftW = Math.floor(contentWidth * 0.48);
+    const rightW = contentWidth - leftW - 2;
 
-  if (activePanel !== 'grid') {
-    const lines = activeDetailLines(data, activePanel, width, opts);
-    if (lines) {
-      out.push(...panel(detailPanelTitle(activePanel), lines, width, theme[activePanel as keyof ThemeColors] ?? theme.cpu, theme.border));
+    const leftLines: string[] = [];
+    leftLines.push(fitVisible(theme.cpu('CPU Usage History'), leftW));
+
+    const cpuHistory = opts.history?.cpuUsage || [];
+    if (cpuHistory.length > 1) {
+      const graphRows = multiRowSparkline(cpuHistory, 3, { min: 0, max: 100 });
+      for (const gr of graphRows) {
+        leftLines.push(theme.cpu(fitVisible(gr, leftW)));
+      }
+    } else {
+      leftLines.push(theme.cpu(fitVisible(gaugeBar(data.cpu.usage, leftW), leftW)));
+      leftLines.push(' '.repeat(leftW));
+      leftLines.push(' '.repeat(leftW));
     }
-    return out.join('\n');
+
+    const rightLines: string[] = [];
+    rightLines.push(fitVisible(chalk.bold(truncatePlain(data.cpu.brand, rightW)), rightW));
+
+    const cpuBarW = Math.max(6, rightW - 18);
+    const tempStr = data.cpu.temperature ? formatTempUnit(data.cpu.temperature, opts.tempUnit) : '';
+    rightLines.push(fitVisible(`CPU ${gaugeBar(data.cpu.usage, cpuBarW)} ${data.cpu.usage.toFixed(0).padStart(3)}% ${tempStr}`, rightW));
+
+    const loadStr = data.cpu.loadAvg.map(l => l.toFixed(2)).join(' ');
+    rightLines.push(fitVisible(`${chalk.dim('Load:')} ${loadStr}`, rightW));
+
+    if (data.cpu.coreUsage && data.cpu.coreUsage.length) {
+      const coreColW = Math.floor((rightW - 1) / 2);
+      const half = Math.ceil(data.cpu.coreUsage.length / 2);
+      for (let i = 0; i < Math.min(2, half); i++) {
+        const u1 = data.cpu.coreUsage[i];
+        const u2 = data.cpu.coreUsage[i + half];
+        const c1BarW = Math.max(3, coreColW - 8);
+        const c1Str = `C${i} ${gaugeBar(u1, c1BarW)} ${Math.round(u1)}%`;
+        const c2Str = u2 !== undefined ? `C${i + half} ${gaugeBar(u2, c1BarW)} ${Math.round(u2)}%` : '';
+        rightLines.push(fitVisible(fitVisible(c1Str, coreColW) + ' ' + fitVisible(c2Str, coreColW), rightW));
+      }
+    }
+
+    if (data.gpu) {
+      rightLines.push(fitVisible(`GPU ${gaugeBar(data.gpu.utilization, cpuBarW)} ${data.gpu.utilization}% ${formatBytes(data.gpu.memory)}`, rightW));
+    }
+
+    const combinedBody = hstack([leftLines, rightLines], 2, contentWidth);
+    return panel('1 cpu', combinedBody, width, theme.cpu, theme.border, combinedBody.length, rightTitle);
+  } else {
+    const lines: string[] = [];
+    lines.push(chalk.bold(truncatePlain(data.cpu.brand, contentWidth)));
+    lines.push(`CPU ${gaugeBar(data.cpu.usage, Math.max(4, contentWidth - 12))} ${data.cpu.usage.toFixed(0)}%`);
+    if (opts.history?.cpuUsage.length) {
+      lines.push(theme.cpu(sparkline(opts.history.cpuUsage, { min: 0, max: 100 })));
+    }
+    lines.push(`Load: ${data.cpu.loadAvg.map(l => l.toFixed(2)).join(' ')}`);
+    return panel('1 cpu', lines, width, theme.cpu, theme.border, lines.length, rightTitle);
   }
+}
 
-  type Card = { title: string; accent: (s: string) => string; lines: string[] };
-  const cards: Card[] = [];
+function btopLeftColumn(data: StatsData, width: number, theme: ThemeColors, opts: TableOptions): string[] {
+  const contentWidth = width - 4;
+  const out: string[] = [];
 
-   if (vis.cpu !== false) {
-     cards.push({ title: 'CPU', accent: theme.cpu, lines: cpuCard(data, contentWidth) });
-   }
-   if (vis.mem !== false) {
-     cards.push({ title: 'Memory', accent: theme.mem, lines: memCard(data, contentWidth) });
-   }
-   if (vis.gpu !== false) {
-     const gpu = gpuCard(data, contentWidth);
-     if (gpu) cards.push({ title: 'GPU', accent: theme.gpu, lines: gpu });
-   }
-   if (vis.power !== false) {
-     const power = powerCard(data);
-     if (power) cards.push({ title: 'Power', accent: theme.power, lines: power });
-   }
-  if (vis.battery !== false) {
-    const battery = batteryCard(data, contentWidth);
-    if (battery) cards.push({ title: 'Battery', accent: theme.battery, lines: battery });
+  // --- Box 1: 2 mem ---
+  const memLines: string[] = [];
+  memLines.push(`RAM [${gaugeBar(data.memory.usagePercent, Math.max(4, contentWidth - 12))}] ${data.memory.usagePercent}%`);
+  memLines.push(`Used: ${formatBytes(data.memory.used)} / ${formatBytes(data.memory.total)}`);
+  memLines.push(`Free: ${formatBytes(data.memory.free)} · Cache: ${formatBytes(data.memory.total - data.memory.free - data.memory.used)}`);
+  if (data.memory.swapTotal > 0) {
+    const swapPct = Math.round((data.memory.swapUsed / data.memory.swapTotal) * 100);
+    memLines.push(`Swap [${gaugeBar(swapPct, Math.max(4, contentWidth - 12))}] ${swapPct}%`);
   }
-  if (vis.thermal !== false) {
-    cards.push({ title: 'Thermal', accent: theme.thermal, lines: thermalCard(data, contentWidth) });
+  out.push(...panel('2 mem', memLines, width, theme.mem, theme.border, memLines.length, `${formatBytes(data.memory.used)}`));
+
+  // --- Box 2: 0 disk ---
+  if (data.disk.length) {
+    const diskLines: string[] = [];
+    for (const d of data.disk.slice(0, 2)) {
+      const capNum = parseInt(d.capacity, 10) || 0;
+      const mountShort = truncatePlain(d.mountpoint, 8);
+      diskLines.push(`${mountShort} ${d.used}/${d.size} [${gaugeBar(capNum, Math.max(3, contentWidth - 18))}] ${d.capacity}`);
+    }
+    out.push(...panel('0 disk io', diskLines, width, theme.disk, theme.border, diskLines.length));
   }
-  if (vis.network !== false) {
-    cards.push({ title: 'Network', accent: theme.network, lines: networkCard(data, contentWidth) });
+
+  // --- Box 3: 7 net ---
+  const netLines: string[] = [];
+  const rxRate = opts.history?.netRxRate.length ? opts.history.netRxRate[opts.history.netRxRate.length - 1] : 0;
+  const txRate = opts.history?.netTxRate.length ? opts.history.netTxRate[opts.history.netTxRate.length - 1] : 0;
+
+  netLines.push(`down ▼ ${formatBytes(rxRate)}/s (${formatBytes(data.network.rxBytes)})`);
+  if (opts.history?.netRxRate.length) {
+    netLines.push(chalk.cyan(fitVisible(sparkline(opts.history.netRxRate, {}), contentWidth)));
+  }
+
+  netLines.push(`up   ▲ ${formatBytes(txRate)}/s (${formatBytes(data.network.txBytes)})`);
+  if (opts.history?.netTxRate.length) {
+    netLines.push(theme.network(fitVisible(sparkline(opts.history.netTxRate, {}), contentWidth)));
   }
-  if (vis.packets !== false) {
-    const packets = packetCard(data, contentWidth);
-    if (packets) cards.push({ title: 'Packets', accent: theme.network, lines: packets });
+
+  out.push(...panel('7 net', netLines, width, theme.network, theme.border, netLines.length, `${data.network.interface}`));
+
+  return out;
+}
+
+function btopProcBox(data: StatsData, width: number, targetHeight: number, theme: ThemeColors, opts: TableOptions): string[] {
+  const contentWidth = width - 4;
+  const filtered = opts.filter
+    ? data.processes.filter(p => p.command.toLowerCase().includes(opts.filter!.toLowerCase()))
+    : data.processes;
+  const sorted = sortProcesses(filtered, opts.sortBy ?? 'cpu');
+
+  const headerRowOverhead = 2; // top & bottom border
+  const tableHeaderOverhead = 2; // header + separator line
+  const availableRows = Math.max(1, targetHeight - headerRowOverhead - tableHeaderOverhead);
+
+  const limited = sorted.slice(0, availableRows);
+
+  const pidW = 6, userW = 7, thrW = 3, memW = 6, cpuW = 6;
+  const fixedW = pidW + userW + thrW + memW + cpuW + 5;
+  const cmdW = Math.max(8, contentWidth - fixedW);
+
+  const head =
+    chalk.bold('PID'.padEnd(pidW)) + ' ' +
+    chalk.bold('PROGRAM'.padEnd(cmdW)) + ' ' +
+    chalk.bold('USER'.padEnd(userW)) + ' ' +
+    chalk.bold('THR'.padStart(thrW)) + ' ' +
+    chalk.bold('MEM%'.padStart(memW)) + ' ' +
+    chalk.bold('CPU%'.padStart(cpuW));
+
+  if (opts.treeView) {
+    const treeLines = buildProcessTree(limited);
+    const rightTitle = opts.filter ? `filter: "${opts.filter}"` : `tree · sort: ${opts.sortBy || 'cpu'}`;
+    return panel('P proc', [head, theme.border('─'.repeat(contentWidth)), ...treeLines], width, theme.process, theme.border, targetHeight - 2, rightTitle);
   }
-  if (vis.tasks !== false) {
-    const tasks = tasksCard(data, contentWidth);
-    if (tasks) cards.push({ title: 'Tasks', accent: theme.process, lines: tasks });
+
+  const rows = limited.map(p => {
+    const cpuVal = p.cpu.toFixed(1) + '%';
+    const cpuStr = p.cpu > 50 ? chalk.red.bold(cpuVal.padStart(cpuW)) : p.cpu > 20 ? chalk.yellow(cpuVal.padStart(cpuW)) : chalk.green(cpuVal.padStart(cpuW));
+    const memStr = (p.mem.toFixed(1) + '%').padStart(memW);
+    const userStr = truncatePlain(p.user, userW).padEnd(userW);
+    const thrStr = String(p.threads).padStart(thrW);
+    const pidStr = String(p.pid).padEnd(pidW);
+    const cmdStr = truncatePlain(p.command, cmdW).padEnd(cmdW);
+
+    return `${pidStr} ${cmdStr} ${userStr} ${thrStr} ${memStr} ${cpuStr}`;
+  });
+
+  const lines = [head, theme.border('─'.repeat(contentWidth)), ...rows];
+  if (rows.length === 0) {
+    lines.push(chalk.dim(`No processes match "${opts.filter || ''}"`));
   }
 
-   for (let i = 0; i < cards.length; i += columns) {
-     const row = cards.slice(i, i + columns);
-     const rowHeight = Math.max(...row.map(c => c.lines.length));
-     const blocks = row.map(c => panel(c.title, c.lines, cardWidth, c.accent, theme.border, rowHeight));
-     out.push(...hstack(blocks, gap, width));
-     out.push('');
-   }
+  const rightTitle = opts.filter ? `filter: "${opts.filter}"` : `sort: ${opts.sortBy || 'cpu'}`;
+  return panel('P proc', lines, width, theme.process, theme.border, targetHeight - 2, rightTitle);
+}
+
+export function formatTable(data: StatsData, opts: TableOptions = {}): string {
+  const width = clampWidth(opts.width);
+  const activePanel = opts.activePanel || 'grid';
 
-  if (vis.disk !== false && data.disk.length) {
-    const dw = width - 4;
-    out.push(...panel('Disk', diskTableLines(data.disk, dw, theme.border), width, theme.disk, theme.border));
+  const themeName = opts.theme || 'default';
+  const theme = THEMES[themeName] || THEMES.default;
+
+  const out: string[] = [];
+  out.push(...header(data, width, [], theme.border));
+  out.push('');
+
+  const anomalies = opts.anomalies ?? [];
+  if (anomalies.length && activePanel === 'grid') {
+    out.push(...anomalyPanel(anomalies, width, theme));
     out.push('');
   }
 
-if (vis.process !== false) {
-     const filteredProcesses = opts.filter
-       ? data.processes.filter(p => p.command.toLowerCase().includes(opts.filter!.toLowerCase()))
-       : data.processes;
-     const sortedProcesses = sortProcesses(filteredProcesses, opts.sortBy ?? 'cpu');
-     const limited = opts.processLimit ? sortedProcesses.slice(0, opts.processLimit) : sortedProcesses;
-
-     const procTitle = opts.filter
-       ? `Processes · filter "${opts.filter}" · sort ${opts.sortBy ?? 'cpu'}`
-       : `Processes · sort ${opts.sortBy ?? 'cpu'}`;
-
-     if (opts.treeView) {
-       const treeLines = buildProcessTree(limited);
-       if (treeLines.length) {
-         out.push(...panel(procTitle + ' · tree', treeLines, width, theme.process, theme.border));
-       } else if (opts.filter) {
-         out.push(...panel(procTitle, [chalk.dim(`No processes match "${opts.filter}"`)], width, theme.process, theme.border));
-       }
-     } else if (limited.length) {
-       out.push(...panel(procTitle, processTableLines(limited, width - 4, theme.border), width, theme.process, theme.border));
-     } else if (opts.filter) {
-       out.push(...panel(procTitle, [chalk.dim(`No processes match "${opts.filter}"`)], width, theme.process, theme.border));
-     }
-   }
+  out.push(tabBar(activePanel, width, theme));
+  out.push('');
+
+  if (activePanel !== 'grid') {
+    const lines = activeDetailLines(data, activePanel, width, opts);
+    if (lines) {
+      out.push(...panel(detailPanelTitle(activePanel), lines, width, theme[activePanel as keyof ThemeColors] ?? theme.cpu, theme.border));
+    }
+    return out.join('\n');
+  }
+
+  // --- btop Dashboard Grid ---
+  // 1. Top CPU & System Overview Box
+  out.push(...btopCpuBox(data, width, theme, opts));
+  out.push('');
+
+  // 2. Bottom Split Section
+  if (width >= 85) {
+    const leftColW = Math.max(32, Math.floor(width * 0.38));
+    const rightColW = width - leftColW - 2;
+
+    const leftLines = btopLeftColumn(data, leftColW, theme, opts);
+    const procLines = btopProcBox(data, rightColW, leftLines.length, theme, opts);
+
+    out.push(...hstack([leftLines, procLines], 2, width));
+  } else {
+    const leftLines = btopLeftColumn(data, width, theme, opts);
+    out.push(...leftLines);
+    out.push('');
+    const procLines = btopProcBox(data, width, 12, theme, opts);
+    out.push(...procLines);
+  }
 
   return out.join('\n');
 }
 
+
 /** Clamp/normalize a terminal width to a sane range, defaulting to 80 cols. */
 export function clampWidth(width?: number): number {
   if (!width || Number.isNaN(width)) return 80;
-  return Math.max(60, Math.min(width, 240));
+  return Math.max(40, Math.min(width, 240));
 }
 
 /**

package/src/formatters/types.ts

@@ -8,6 +8,7 @@
  */
 import type { ThemeName } from './themes.js';
 import type { StatsData } from '../monitors/types.js';
+import type { History } from '../history.js';
 
 export type { ThemeName };
 
@@ -70,4 +71,8 @@ export interface TableOptions {
     anomalies?: AnomalyAlert[];
     /** Temperature display unit: 'c' or 'f'. */
     tempUnit?: 'c' | 'f';
-}
+    /** Rolling history instance for live graphs. */
+    history?: History;
+    /** Graph mode: 'spark' or 'bar'. */
+    graphMode?: 'spark' | 'bar';
+}