pyre-cli 5.1.0 → 6.1.0

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,241 @@ 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 < 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}%`);
+  }
+  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);
+      let ioStr = '';
+      if (d.readBytesSec !== undefined || d.writeBytesSec !== undefined) {
+        const rStr = formatBytes(d.readBytesSec || 0);
+        const wStr = formatBytes(d.writeBytesSec || 0);
+        ioStr = ` R:${rStr}/s W:${wStr}/s`;
+      }
+      diskLines.push(`${mountShort} ${d.used}/${d.size} [${gaugeBar(capNum, Math.max(3, contentWidth - 18 - ioStr.length))}] ${d.capacity}${ioStr}`);
+    }
+    const totalRead = data.disk.reduce((acc, d) => acc + (d.readBytesSec || 0), 0);
+    const totalWrite = data.disk.reduce((acc, d) => acc + (d.writeBytesSec || 0), 0);
+    const diskHeaderRight = `R:${formatBytes(totalRead)}/s W:${formatBytes(totalWrite)}/s`;
+    out.push(...panel('0 disk io', diskLines, width, theme.disk, theme.border, diskLines.length, diskHeaderRight));
   }
-  if (vis.thermal !== false) {
-    cards.push({ title: 'Thermal', accent: theme.thermal, lines: thermalCard(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)));
   }
-  if (vis.network !== false) {
-    cards.push({ title: 'Network', accent: theme.network, lines: networkCard(data, 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';
+
+  const themeName = opts.theme || 'default';
+  const theme = THEMES[themeName] || THEMES.default;
+
+  const out: string[] = [];
+  out.push(...header(data, width, [], theme.border));
+  out.push('');
 
-  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 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/themes.ts

@@ -8,7 +8,11 @@
  */
 import chalk from 'chalk';
 
-export type ThemeName = 'default' | 'dracula' | 'cyberpunk' | 'monochrome' | 'nord' | 'gruvbox';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+export type ThemeName = string;
 
 export interface ThemeColors {
    border: (s: string) => string;
@@ -24,16 +28,7 @@ export interface ThemeColors {
    process: (s: string) => string;
 }
 
-/**
- * Built-in colour themes.
- *
- * - **default** — muted greys and cyan accents, safe for any terminal.
- * - **dracula**  — the popular Dracula dark palette.
- * - **cyberpunk** — high-contrast neon on black.
- * - **monochrome** — white-only, useful for colour-blind users or
- *   terminals without 256-colour support.
- */
-export const THEMES: Record<ThemeName, ThemeColors> = {
+export const BUILTIN_THEMES: Record<string, ThemeColors> = {
    default: {
      border: chalk.hex('#4b5563'),
      cpu: chalk.hex('#22d3ee'),
@@ -112,4 +107,44 @@ export const THEMES: Record<ThemeName, ThemeColors> = {
       graphs: chalk.hex('#fb4934'),
       process: chalk.hex('#ebdbb2'),
     },
-  };
+  };
+
+export function loadCustomThemes(): Record<string, ThemeColors> {
+  const themes = { ...BUILTIN_THEMES };
+  const themesDir = path.join(os.homedir(), '.config', 'pyre', 'themes');
+  try {
+    if (fs.existsSync(themesDir)) {
+      const files = fs.readdirSync(themesDir);
+      for (const file of files) {
+        if (file.endsWith('.json')) {
+          const name = path.basename(file, '.json');
+          try {
+            const raw = fs.readFileSync(path.join(themesDir, file), 'utf-8');
+            const data = JSON.parse(raw);
+            const buildColor = (val?: string) => (val ? (val.startsWith('#') ? chalk.hex(val) : (chalk as any)[val] || chalk.white) : chalk.white);
+            themes[name] = {
+              border: buildColor(data.border),
+              cpu: buildColor(data.cpu),
+              mem: buildColor(data.mem),
+              gpu: buildColor(data.gpu),
+              power: buildColor(data.power),
+              battery: buildColor(data.battery),
+              thermal: buildColor(data.thermal),
+              network: buildColor(data.network),
+              disk: buildColor(data.disk),
+              graphs: buildColor(data.graphs),
+              process: buildColor(data.process),
+            };
+          } catch {
+            // ignore bad theme file
+          }
+        }
+      }
+    }
+  } catch {
+    // ignore directory read error
+  }
+  return themes;
+}
+
+export const THEMES: Record<string, ThemeColors> = loadCustomThemes();

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';
+}