@yourfam/yf-vitals 0.1.1 → 0.2.0

package/README.md

@@ -42,7 +42,9 @@ One live dashboard. Refresh every **1.0s** (or `--interval`, or **2.0s** with `-
 
 Header: `yf-vitals` · hostname · OS · `NP/NL` cores · RAM total · tick interval.
 
-Each percent row has a 20-cell bar and a sparkline of the last 60 ticks. Disk and net sparklines scale to the **max in that buffer** (rates have no 100% ceiling). CPU / RAM / GPU sparklines are percent 0–100.
+Each percent row has a 20-cell bar and a sparkline of the last 60 ticks. Unused spark slots use the lowest tick (`▁` / `_`), not blank space. Bar fill stays the row color below 50%, turns **yellow at 50%**, **red at 80%**. Sparklines stay the row color.
+
+Disk and net each show **two** sparks (`R`/`W`, `↑`/`↓`) scaled to the **max of that pair** in the buffer (rates have no 100% ceiling). CPU / RAM / GPU sparks are percent 0–100.
 
 First disk/net tick may show `—` while counters settle.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourfam/yf-vitals",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Live terminal dashboard for CPU, RAM, disk, net, and optional GPU",
   "type": "module",
   "bin": {

package/src/args.js

@@ -99,6 +99,7 @@ Usage:
 
 q / Q / Ctrl+C quit. GPU row is omitted when the OS has no GPU telemetry.
 Disk rates are KiB/s–GiB/s; network rates are kbps/Mbps/Gbps.
-Disk / net sparklines scale to the max in the last 60 ticks (no 100% ceiling).
+Disk / net sparks are split (R/W, ↑/↓) and scale to the pair max in the last 60 ticks.
+Bar fill turns yellow ≥50% and red ≥80%. Unused spark slots use the lowest tick.
 Needs a terminal (no pipes). Node 20+.`;
 }

package/src/bar.js

@@ -55,8 +55,9 @@ export function sparkline(values, width, opts = {}) {
   if (w === 0) return "";
   const charset = opts.ascii ? ASC_SPARK : UNI_SPARK;
   const list = Array.isArray(values) ? values : [];
+  const floor = charset[0];
   if (list.length === 0) {
-    return " ".repeat(w);
+    return floor.repeat(w);
   }
   const slice = list.slice(-w);
   const pad = w - slice.length;
@@ -64,7 +65,21 @@ export function sparkline(values, width, opts = {}) {
   const dataMax = slice.reduce((m, v) => (v > m ? v : m), 0);
   const max = explicitMax != null ? explicitMax : dataMax;
   const chars = slice.map((v) => sparkChar(v, max, charset));
-  return " ".repeat(pad) + chars.join("");
+  return floor.repeat(pad) + chars.join("");
+}
+
+export const HEAT_WARM = 50;
+export const HEAT_HOT = 80;
+
+/**
+ * @param {number} percent
+ * @returns {"ok" | "warm" | "hot"}
+ */
+export function heatLevel(percent) {
+  const n = Number(percent);
+  if (!Number.isFinite(n) || n < HEAT_WARM) return "ok";
+  if (n < HEAT_HOT) return "warm";
+  return "hot";
 }
 
 /**

package/src/color.js

@@ -12,6 +12,7 @@ export function createColor(opts) {
     magenta: (value) => pc.magenta(String(value)),
     green: (value) => pc.green(String(value)),
     yellow: (value) => pc.yellow(String(value)),
+    red: (value) => pc.red(String(value)),
     dim: (value) => pc.dim(String(value)),
   };
 }

package/src/history.js

@@ -5,12 +5,14 @@ import { HISTORY_SIZE } from "./bar.js";
  * @property {number[]} cpu
  * @property {number[]} ram
  * @property {number[]} gpu
- * @property {number[]} dsk
- * @property {number[]} net
+ * @property {number[]} dskR
+ * @property {number[]} dskW
+ * @property {number[]} netUp
+ * @property {number[]} netDn
  */
 
 export function createHistory() {
-  return { cpu: [], ram: [], gpu: [], dsk: [], net: [] };
+  return { cpu: [], ram: [], gpu: [], dskR: [], dskW: [], netUp: [], netDn: [] };
 }
 
 /**
@@ -33,26 +35,13 @@ export function pushSample(buf, value, size = HISTORY_SIZE) {
  * @returns {History}
  */
 export function appendHistory(history, snap) {
-  const cpu = snap.cpu?.percent;
-  const ram = snap.ram?.percent;
-  const gpu = snap.gpu?.percent;
-  const read = snap.disk?.readBps;
-  const write = snap.disk?.writeBps;
-  const tx = snap.net?.txBps;
-  const rx = snap.net?.rxBps;
-  let dsk;
-  if (read != null || write != null) {
-    dsk = (read ?? 0) + (write ?? 0);
-  }
-  let net;
-  if (tx != null || rx != null) {
-    net = (tx ?? 0) + (rx ?? 0);
-  }
   return {
-    cpu: pushSample(history.cpu, cpu),
-    ram: pushSample(history.ram, ram),
-    gpu: pushSample(history.gpu, gpu),
-    dsk: pushSample(history.dsk, dsk),
-    net: pushSample(history.net, net),
+    cpu: pushSample(history.cpu, snap.cpu?.percent),
+    ram: pushSample(history.ram, snap.ram?.percent),
+    gpu: pushSample(history.gpu, snap.gpu?.percent),
+    dskR: pushSample(history.dskR, snap.disk?.readBps),
+    dskW: pushSample(history.dskW, snap.disk?.writeBps),
+    netUp: pushSample(history.netUp, snap.net?.txBps),
+    netDn: pushSample(history.netDn, snap.net?.rxBps),
   };
 }

package/src/render.js

@@ -1,5 +1,12 @@
 import { useAscii } from "./ascii.js";
-import { BAR_WIDTH, bar, barCharset, sparkWidth, sparkline } from "./bar.js";
+import {
+  BAR_WIDTH,
+  bar,
+  barCharset,
+  heatLevel,
+  sparkWidth,
+  sparkline,
+} from "./bar.js";
 import { createColor, stripAnsi } from "./color.js";
 import {
   formatBitRate,
@@ -39,6 +46,58 @@ export function fitLine(line, columns) {
   return out;
 }
 
+/**
+ * @param {ReturnType<typeof createColor>} color
+ * @param {number} percent
+ * @param {"cyan" | "magenta" | "green"} row
+ */
+export function heatPaint(color, percent, row) {
+  const level = heatLevel(percent);
+  if (level === "hot") return color.red;
+  if (level === "warm") return color.yellow;
+  return color[row];
+}
+
+/**
+ * Percent bar: fill takes heat color, empty stays dim. Sparkline stays the row color.
+ *
+ * @param {number} percent
+ * @param {ReturnType<typeof createColor>} color
+ * @param {"cyan" | "magenta" | "green"} row
+ * @param {boolean} ascii
+ */
+export function paintPercentBar(percent, color, row, ascii) {
+  const cs = barCharset(ascii);
+  const raw = bar(percent, BAR_WIDTH, cs);
+  const filled = raw.replaceAll(cs.empty, "").length;
+  const fill = raw.slice(0, filled);
+  const empty = raw.slice(filled);
+  const paint = heatPaint(color, percent, row);
+  return `[${paint(fill)}${color.dim(empty)}]`;
+}
+
+/**
+ * Two labeled sparks on one line, sharing a max so the pair is comparable.
+ *
+ * @param {string} leftLabel
+ * @param {number[]} leftVals
+ * @param {string} rightLabel
+ * @param {number[]} rightVals
+ * @param {number} sparkW
+ * @param {boolean} ascii
+ */
+export function splitSparkLine(leftLabel, leftVals, rightLabel, rightVals, sparkW, ascii) {
+  const leftTag = `${leftLabel} `;
+  const mid = `  ${rightLabel} `;
+  const overhead = leftTag.length + mid.length;
+  const inner = Math.max(overhead + 8, Number(sparkW) || 16);
+  const each = Math.max(4, Math.floor((inner - overhead) / 2));
+  const pairMax = Math.max(0, ...leftVals, ...rightVals);
+  const left = sparkline(leftVals, each, { ascii, max: pairMax || undefined });
+  const right = sparkline(rightVals, each, { ascii, max: pairMax || undefined });
+  return `${leftTag}${left}${mid}${right}`;
+}
+
 /**
  * @param {import("./sample.js").GpuSample | null | undefined} gpu
  * @param {{ history: number[], ascii: boolean, color: ReturnType<typeof createColor>, sparkW: number }} opts
@@ -47,18 +106,15 @@ export function fitLine(line, columns) {
 export function buildGpuRow(gpu, opts) {
   if (gpu == null) return null;
   const { ascii, color, sparkW, history } = opts;
-  const cs = barCharset(ascii);
   const pct = gpu.percent;
-  const barStr =
-    pct == null ? null : bar(pct, BAR_WIDTH, cs);
   const pctStr = pct == null ? "n/a" : formatPercent(pct);
   const mem =
     gpu.used != null && gpu.total != null ? formatBytePair(gpu.used, gpu.total) : "";
   const label = color.green("GPU");
   const head =
-    barStr == null
+    pct == null
       ? `${label}  ${pctStr}${mem ? `   ${mem}` : ""}`
-      : `${label}  [${color.green(barStr)}]  ${pctStr}${mem ? `   ${mem}` : ""}`;
+      : `${label}  ${paintPercentBar(pct, color, "green", ascii)}  ${pctStr}${mem ? `   ${mem}` : ""}`;
   const spark = color.green(sparkline(history, sparkW, { ascii, max: 100 }));
   return [head, `     ${spark}`];
 }
@@ -74,7 +130,6 @@ export function renderFrame(snap, history, opts = {}) {
   const ascii = useAscii(env);
   const color = createColor({ isTTY: Boolean(opts.isTTY), env });
   const sparkW = sparkWidth(columns);
-  const cs = barCharset(ascii);
   const interval = formatInterval(opts.intervalSec ?? 1);
   const cores = formatCores(snap.physical, snap.logical);
   const ramTot = formatBytes(snap.ramTotal);
@@ -91,10 +146,9 @@ export function renderFrame(snap, history, opts = {}) {
   const lines = [header, ""];
 
   if (snap.cpu) {
-    const b = color.cyan(bar(snap.cpu.percent, BAR_WIDTH, cs));
     const detail = formatCoresDetail(snap.physical, snap.logical);
     lines.push(
-      `${color.cyan("CPU")}  [${b}]  ${formatPercent(snap.cpu.percent)}   ${detail}`,
+      `${color.cyan("CPU")}  ${paintPercentBar(snap.cpu.percent, color, "cyan", ascii)}  ${formatPercent(snap.cpu.percent)}   ${detail}`,
     );
     lines.push(`     ${color.cyan(sparkline(history.cpu, sparkW, { ascii, max: 100 }))}`);
   } else {
@@ -104,9 +158,8 @@ export function renderFrame(snap, history, opts = {}) {
   lines.push("");
 
   if (snap.ram) {
-    const b = color.magenta(bar(snap.ram.percent, BAR_WIDTH, cs));
     lines.push(
-      `${color.magenta("RAM")}  [${b}]  ${formatPercent(snap.ram.percent)}   ${formatBytePair(snap.ram.used, snap.ram.total)}`,
+      `${color.magenta("RAM")}  ${paintPercentBar(snap.ram.percent, color, "magenta", ascii)}  ${formatPercent(snap.ram.percent)}   ${formatBytePair(snap.ram.used, snap.ram.total)}`,
     );
     lines.push(`     ${color.magenta(sparkline(history.ram, sparkW, { ascii, max: 100 }))}`);
   } else {
@@ -130,10 +183,14 @@ export function renderFrame(snap, history, opts = {}) {
     const r = formatByteRate(snap.disk.readBps);
     const w = formatByteRate(snap.disk.writeBps);
     lines.push(`${color.green("DSK")}  R  ${r.padStart(11)}   W  ${w.padStart(11)}`);
-    lines.push(`     ${color.green(sparkline(history.dsk, sparkW, { ascii }))}`);
+    lines.push(
+      `     ${color.green(splitSparkLine("R", history.dskR, "W", history.dskW, sparkW, ascii))}`,
+    );
   } else {
     lines.push(`${color.green("DSK")}  n/a`);
-    lines.push(`     ${color.green(sparkline(history.dsk, sparkW, { ascii }))}`);
+    lines.push(
+      `     ${color.green(splitSparkLine("R", history.dskR, "W", history.dskW, sparkW, ascii))}`,
+    );
   }
   lines.push("");
 
@@ -141,10 +198,14 @@ export function renderFrame(snap, history, opts = {}) {
     const up = formatBitRate(snap.net.txBps);
     const down = formatBitRate(snap.net.rxBps);
     lines.push(`${color.yellow("NET")}  ↑  ${up.padStart(12)}    ↓  ${down.padStart(12)}`);
-    lines.push(`     ${color.yellow(sparkline(history.net, sparkW, { ascii }))}`);
+    lines.push(
+      `     ${color.yellow(splitSparkLine("↑", history.netUp, "↓", history.netDn, sparkW, ascii))}`,
+    );
   } else {
     lines.push(`${color.yellow("NET")}  n/a`);
-    lines.push(`     ${color.yellow(sparkline(history.net, sparkW, { ascii }))}`);
+    lines.push(
+      `     ${color.yellow(splitSparkLine("↑", history.netUp, "↓", history.netDn, sparkW, ascii))}`,
+    );
   }
   lines.push("");
   lines.push("q quit");