@profullstack/hqtui-demo 0.1.2 → 0.1.3

package/src/screens/services.ts

@@ -0,0 +1,136 @@
+import type { Container, Theme } from "@profullstack/hqtui";
+import type { DemoState } from "../state.ts";
+import { bytes, num, percent } from "../format.ts";
+
+function rate(value: number): string {
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}K/s`;
+  return `${value.toFixed(0)}/s`;
+}
+
+/** Services, containers, kernel counters, filesystems and hardware sensors. */
+export function servicesScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const t = state.sample.telemetry;
+  const failed = t.services.filter((s) => s.active === "failed");
+
+  ui.row({ size: "1fr", gap: 1 }, (row) => {
+    row.panel({
+      title: "Services",
+      subtitle: failed.length ? `${failed.length} failed` : `${t.services.length} units`,
+      subtitleColor: failed.length ? theme.danger : theme.muted,
+      borderColor: failed.length ? theme.danger : theme.success,
+    }, (p) => {
+      if (t.services.length === 0) {
+        p.label("systemd not available on this host.");
+        return;
+      }
+      p.table({
+        rows: t.services,
+        selected: state.selected % Math.max(1, t.services.length),
+        offset: state.offset,
+        zebra: true,
+        scrollbar: true,
+        columns: [
+          { key: "name", title: "Unit", min: 18, color: theme.primary },
+          {
+            key: "active",
+            title: "Active",
+            width: 10,
+            color: (row) =>
+              row.active === "failed" ? theme.danger : row.active === "active" ? theme.success : theme.muted,
+          },
+          { key: "sub", title: "Sub", width: 10, color: theme.muted },
+          { key: "description", title: "Description", min: 16, color: theme.muted },
+        ],
+      });
+    });
+
+    row.column({ width: "0.85fr", gap: 1 }, (column) => {
+      column.panel({ title: "Kernel", size: 11, borderColor: theme.accent }, (p) => {
+        const k = t.kernel;
+        p.keyValues([
+          { label: "Context switches", value: rate(k.contextSwitchRate), color: theme.accent },
+          { label: "Interrupts", value: rate(k.interruptRate), color: theme.accent },
+          { label: "Forks", value: rate(k.forkRate), color: theme.accent },
+          { label: "Procs running", value: String(k.procsRunning), color: theme.success },
+          { label: "Procs blocked", value: String(k.procsBlocked), color: k.procsBlocked ? theme.warning : theme.muted },
+          { label: "Open file descriptors", value: k.openFiles.toLocaleString(), color: theme.primary },
+          { label: "Entropy available", value: String(k.entropy), color: k.entropy < 200 ? theme.warning : theme.success },
+          { label: "Page in / out", value: `${(k.pageIn / 1000).toFixed(0)}K / ${(k.pageOut / 1000).toFixed(0)}K`, color: theme.muted },
+        ]);
+      });
+
+      column.panel({ title: "Containers", size: 9, borderColor: theme.primary }, (p) => {
+        if (t.containers.length === 0) {
+          p.label("No running containers.");
+          p.label("(docker not installed or not reachable)", { size: 1 });
+          return;
+        }
+        p.table({
+          rows: t.containers,
+          zebra: true,
+          columns: [
+            { key: "name", title: "Name", min: 12, color: theme.primary },
+            { key: "image", title: "Image", min: 14, color: theme.muted },
+            { key: "status", title: "Status", min: 12, color: theme.success },
+          ],
+        });
+      });
+
+      column.panel({ title: "Hardware", size: "1fr", borderColor: theme.warning }, (p) => {
+        const rows: { label: string; value: string; color?: number }[] = [];
+        if (t.power) {
+          rows.push(
+            { label: "Battery", value: `${t.power.battery}% (${t.power.timeRemaining})`, color: theme.success },
+            { label: "AC", value: t.power.acConnected ? "connected" : "on battery", color: theme.muted },
+            { label: "Draw", value: `${num(t.power.powerDraw, 1)} W`, color: theme.warning },
+          );
+        }
+        for (const gpu of t.gpus) {
+          rows.push(
+            { label: gpu.name, value: `${percent(gpu.utilization)} · ${gpu.temperature}°C`, color: theme.accent },
+            { label: "GPU memory", value: `${bytes(gpu.memoryUsed)} / ${bytes(gpu.memoryTotal)}`, color: theme.muted },
+          );
+        }
+        if (rows.length === 0) {
+          p.label("No battery or GPU telemetry on this host.");
+          return;
+        }
+        p.keyValues(rows);
+      });
+    });
+  });
+
+  ui.panel({ title: "Filesystems", size: 10, borderColor: theme.secondary }, (p) => {
+    if (t.filesystems.length === 0) {
+      p.label("No filesystems reported.");
+      return;
+    }
+    p.table({
+      rows: t.filesystems,
+      zebra: true,
+      columns: [
+        { key: "mount", title: "Mount", min: 14, color: theme.primary },
+        { key: "device", title: "Device", min: 12, color: theme.muted },
+        { key: "type", title: "Type", width: 8, color: theme.muted },
+        { key: "size", title: "Size", width: 10, align: "right", render: (r) => bytes(r.size, 0) },
+        { key: "used", title: "Used", width: 10, align: "right", render: (r) => bytes(r.used, 0) },
+        {
+          key: "pct",
+          title: "Use%",
+          width: 6,
+          align: "right",
+          render: (r) => (r.size ? percent(r.used / r.size) : "-"),
+          color: (r) => (r.size && r.used / r.size > 0.9 ? theme.danger : theme.warning),
+        },
+        {
+          key: "inodes",
+          title: "Inodes",
+          width: 16,
+          align: "right",
+          render: (r) => (r.inodesTotal ? `${percent(r.inodesUsed / r.inodesTotal)} of ${(r.inodesTotal / 1e6).toFixed(1)}M` : "-"),
+          color: theme.muted,
+        },
+      ],
+    });
+  });
+}

package/src/screens/sessions.ts

@@ -0,0 +1,85 @@
+import type { Container, Theme } from "@profullstack/hqtui";
+import type { DemoState } from "../state.ts";
+
+/** Who is on this machine, who has been, and who failed to get in. */
+export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const t = state.sample.telemetry;
+
+  ui.row({ size: 9, gap: 1 }, (row) => {
+    row.panel({ title: "Active Sessions", subtitle: String(t.sessions.length), borderColor: theme.success }, (p) => {
+      if (t.sessions.length === 0) {
+        p.label("No interactive sessions.");
+        p.label("(`who` reports nothing on this host)", { size: 1 });
+        return;
+      }
+      p.table({
+        rows: t.sessions,
+        columns: [
+          { key: "user", title: "User", width: 12, color: theme.primary },
+          { key: "tty", title: "TTY", width: 10 },
+          { key: "from", title: "From", min: 12, color: theme.accent },
+          { key: "loginAt", title: "Login", width: 14, color: theme.muted },
+          { key: "idle", title: "Idle", width: 8, align: "right" },
+        ],
+      });
+    });
+    row.panel({ title: "Process States", width: 34, borderColor: theme.primary }, (p) => {
+      const s = t.states;
+      p.meter({ label: "run ", value: s.total ? s.running / s.total : 0, text: String(s.running), heat: false, color: theme.success });
+      p.meter({ label: "slp ", value: s.total ? s.sleeping / s.total : 0, text: String(s.sleeping), heat: false, color: theme.primary });
+      p.meter({ label: "stop", value: s.total ? s.stopped / s.total : 0, text: String(s.stopped), heat: false, color: theme.warning });
+      p.meter({ label: "zomb", value: s.total ? s.zombie / s.total : 0, text: String(s.zombie), heat: false, color: theme.danger });
+      p.spacer(1);
+      p.keyValues([{ label: "Total", value: String(s.total), color: theme.accent }]);
+    });
+  });
+
+  ui.row({ size: "1fr", gap: 1 }, (row) => {
+    row.panel({ title: "Recent Logins", subtitle: `${t.logins.length} from wtmp`, borderColor: theme.accent }, (p) => {
+      if (t.logins.length === 0) {
+        p.label("No login history available.");
+        return;
+      }
+      p.table({
+        rows: t.logins,
+        selected: state.selected % Math.max(1, t.logins.length),
+        zebra: true,
+        scrollbar: true,
+        columns: [
+          { key: "user", title: "User", width: 12, color: theme.primary },
+          { key: "tty", title: "TTY", width: 12, color: theme.muted },
+          { key: "from", title: "From", min: 14, color: theme.accent },
+          { key: "when", title: "When", min: 16, color: theme.muted },
+          {
+            key: "status",
+            title: "Status",
+            width: 8,
+            color: (row) => (row.status === "still" ? theme.success : theme.muted),
+          },
+        ],
+      });
+    });
+
+    row.column({ width: "0.8fr", gap: 1 }, (column) => {
+      column.panel({ title: "Failed Logins", borderColor: theme.danger }, (p) => {
+        if (t.failedLogins.length === 0) {
+          p.label("None recorded.");
+          p.label("(btmp is usually root-only)", { size: 1 });
+          return;
+        }
+        p.table({
+          rows: t.failedLogins,
+          columns: [
+            { key: "user", title: "User", width: 12, color: theme.danger },
+            { key: "from", title: "From", min: 12 },
+            { key: "when", title: "When", min: 14, color: theme.muted },
+          ],
+        });
+      });
+      column.panel({ title: "Session History", size: 8, borderColor: theme.secondary }, (p) => {
+        p.label("concurrent sessions", { size: 1 });
+        p.graph({ values: t.sessionHistory, min: 0, fill: true, color: theme.success });
+      });
+    });
+  });
+}

package/src/screens/traffic.ts

@@ -0,0 +1,199 @@
+import type { Container, Theme } from "@profullstack/hqtui";
+import { seriesColor } from "@profullstack/hqtui";
+import type { DemoState } from "../state.ts";
+import { num, percent } from "../format.ts";
+
+function rate(value: number): string {
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M/s`;
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}K/s`;
+  return `${value.toFixed(0)}/s`;
+}
+
+const STATUS_COLORS = (theme: Theme): Record<string, number> => ({
+  "2xx": theme.success,
+  "3xx": theme.accent,
+  "4xx": theme.warning,
+  "5xx": theme.danger,
+  "1xx": theme.secondary,
+});
+
+/** Every protocol in and out of this host: sockets, TCP counters, SSH, HTTP. */
+export function trafficScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const t = state.sample.telemetry;
+  const net = t.net;
+  const http = t.http;
+
+  ui.row({ size: 13, gap: 1 }, (row) => {
+    row.panel({
+      title: "Protocols",
+      subtitle: `${t.inboundConnections} in / ${t.outboundConnections} out`,
+      borderColor: theme.accent,
+    }, (p) => {
+      if (t.protocols.length === 0) {
+        p.label("No sockets visible.");
+        return;
+      }
+      const max = Math.max(1, ...t.protocols.map((x) => x.total));
+      p.meters(
+        t.protocols.slice(0, 9).map((bucket, i) => ({
+          label: bucket.protocol,
+          value: bucket.total / max,
+          color: seriesColor(theme, i),
+          text: `${bucket.total}`,
+        })),
+        { labelWidth: 13, valueWidth: 5 },
+      );
+    });
+
+    row.panel({ title: "TCP", width: "0.9fr", borderColor: theme.primary }, (p) => {
+      p.row({ size: 1 }, (r) => {
+        r.text(`↓ ${rate(net.rates.inSegs)} seg`, { fg: theme.primary });
+        r.text(`↑ ${rate(net.rates.outSegs)} seg`, { fg: theme.secondary, align: "right" });
+      });
+      p.graph({
+        series: [
+          { values: t.netInHistory, color: theme.primary, fill: true },
+          { values: t.netOutHistory, color: theme.secondary, fill: true },
+        ],
+        min: 0,
+        size: "1fr",
+      });
+      p.divider();
+      p.keyValues([
+        { label: "Established", value: String(net.tcpEstablished), color: theme.success },
+        { label: "Opens in/out", value: `${rate(net.rates.passiveOpens)} / ${rate(net.rates.activeOpens)}`, color: theme.accent },
+        { label: "Resets sent", value: net.tcpOutRsts.toLocaleString(), color: theme.muted },
+      ]);
+    });
+
+    row.panel({
+      title: "Retransmits",
+      width: "0.7fr",
+      borderColor: net.retransRatio > 0.02 ? theme.danger : theme.success,
+    }, (p) => {
+      p.text(percent(net.retransRatio, 2), {
+        fg: net.retransRatio > 0.02 ? theme.danger : theme.success,
+        bold: true,
+        size: 1,
+      });
+      p.label("of outbound segments", { size: 1 });
+      p.graph({ values: t.retransHistory, min: 0, fill: true, color: theme.danger, size: "1fr" });
+      p.keyValues([
+        { label: "UDP in/out", value: `${rate(net.rates.udpIn)} / ${rate(net.rates.udpOut)}`, color: theme.muted },
+        { label: "ICMP", value: `${net.icmpInMsgs} / ${net.icmpOutMsgs}`, color: theme.muted },
+      ]);
+    });
+  });
+
+  ui.row({ size: "1fr", gap: 1 }, (row) => {
+    row.column({ gap: 1 }, (column) => {
+      column.panel({
+        title: "HTTP",
+        subtitle: http ? `${num(http.requestsPerSecond, 1)} req/s` : "no access log",
+        borderColor: theme.success,
+      }, (p) => {
+        if (!http) {
+          p.label("No readable HTTP access log.");
+          p.label("nginx, apache, httpd and caddy logs are", { size: 1 });
+          p.label("root/adm readable — run with sudo to track requests.", { size: 1 });
+          return;
+        }
+        p.row({ size: 1 }, (r) => {
+          r.text(http.source, { fg: theme.muted });
+          r.text(`${http.upgrades} upgrades (ws)`, { fg: theme.secondary, align: "right" });
+        });
+        p.graph({ values: http.history, min: 0, fill: true, color: theme.success, size: 6 });
+        p.divider({ label: "status" });
+        const colors = STATUS_COLORS(theme);
+        const max = Math.max(1, ...http.statusClasses.map((s) => s.count));
+        p.meters(
+          http.statusClasses.map((entry) => ({
+            label: entry.class,
+            value: entry.count / max,
+            color: colors[entry.class] ?? theme.muted,
+            text: String(entry.count),
+          })),
+          { labelWidth: 5, valueWidth: 7 },
+        );
+        p.divider({ label: "top paths" });
+        p.table({
+          rows: http.topPaths,
+          header: false,
+          columns: [
+            { key: "path", title: "Path", min: 20, color: theme.primary },
+            { key: "count", title: "Hits", width: 7, align: "right", color: theme.accent },
+          ],
+        });
+      });
+    });
+
+    row.column({ width: "0.85fr", gap: 1 }, (column) => {
+      column.panel({ title: "SSH Activity", subtitle: String(t.ssh.length), borderColor: theme.warning }, (p) => {
+        if (t.ssh.length === 0) {
+          p.label("No sshd events in the journal.");
+          return;
+        }
+        p.table({
+          rows: [...t.ssh].reverse(),
+          zebra: true,
+          scrollbar: true,
+          columns: [
+            { key: "time", title: "Time", width: 9, color: theme.muted },
+            {
+              key: "action",
+              title: "Action",
+              width: 11,
+              color: (row) =>
+                row.action === "accepted" ? theme.success
+                  : row.action === "disconnect" ? theme.muted
+                    : theme.danger,
+            },
+            { key: "user", title: "User", width: 12, color: theme.primary },
+            { key: "from", title: "From", min: 14, color: theme.accent },
+            { key: "method", title: "Method", width: 10, color: theme.muted },
+          ],
+        });
+      });
+
+      column.panel({ title: "Top Remote Hosts", size: 10, borderColor: theme.secondary }, (p) => {
+        if (t.remotes.length === 0) {
+          p.label("No remote peers.");
+          return;
+        }
+        p.table({
+          rows: t.remotes,
+          zebra: true,
+          columns: [
+            { key: "host", title: "Host", min: 16, color: theme.accent },
+            { key: "connections", title: "Conns", width: 6, align: "right", color: theme.success },
+            { key: "protocols", title: "Protocols", min: 12, color: theme.muted },
+          ],
+        });
+      });
+    });
+  });
+
+  if (http && http.recent.length) {
+    ui.panel({ title: "Recent Requests", size: 10, borderColor: theme.primary }, (p) => {
+      p.table({
+        rows: http.recent,
+        zebra: true,
+        scrollbar: true,
+        columns: [
+          { key: "time", title: "Time", width: 9, color: theme.muted },
+          { key: "method", title: "Method", width: 7, color: theme.secondary },
+          { key: "path", title: "Path", min: 24, color: theme.primary },
+          {
+            key: "status",
+            title: "Status",
+            width: 7,
+            align: "right",
+            color: (row) => STATUS_COLORS(theme)[`${String(row.status)[0]}xx`] ?? theme.muted,
+          },
+          { key: "client", title: "Client", width: 16, color: theme.accent },
+          { key: "bytes", title: "Bytes", width: 9, align: "right", color: theme.muted },
+        ],
+      });
+    });
+  }
+}

package/src/simulation.ts

@@ -23,8 +23,15 @@ export interface ProcessSample {
   state: string;
 }
 
+import { type Telemetry, emptyTelemetry } from "./system/telemetry.ts";
+import { updateTelemetry } from "./system/simulated-telemetry.ts";
+
+export type { Telemetry };
+
 export interface SystemSample {
   time: number;
+  /** Everything beyond classic CPU/memory/disk monitoring. */
+  telemetry: Telemetry;
   cpu: {
     total: number;
     cores: number[];
@@ -153,6 +160,7 @@ export class SystemSimulation {
     const totalMemory = 16 * 1024 ** 3;
     this.state = {
       time: 0,
+      telemetry: emptyTelemetry(),
       cpu: {
         total: 0.18,
         cores: new Array(cores).fill(0.15),
@@ -332,6 +340,10 @@ export class SystemSimulation {
       { label: "GPU Power", value: `${(4 + s.cpu.total * 9).toFixed(1)} W` },
     ];
 
+    updateTelemetry(s.telemetry, this.random, this.tick, s.cpu.total);
+    s.system.processCount = s.telemetry.states.total;
+    s.system.threadCount = 940 + Math.round(s.cpu.total * 120);
+
     s.system.uptime += dt;
     s.system.threadCount = 940 + Math.round(s.cpu.total * 120);
     s.system.contextSwitches = Math.round(48000 + s.cpu.total * 20000);

package/src/state.ts

@@ -1,9 +1,14 @@
 import type { Theme } from "@profullstack/hqtui";
 import type { SystemSample } from "./system/index.ts";
 
-export type ScreenName = "dashboard" | "components" | "graphics" | "themes" | "input" | "stress";
+export type ScreenName =
+  | "dashboard" | "traffic" | "sessions" | "network" | "services"
+  | "components" | "graphics" | "themes" | "input" | "stress";
 
-export const SCREENS: ScreenName[] = ["dashboard", "components", "graphics", "themes", "input", "stress"];
+export const SCREENS: ScreenName[] = [
+  "dashboard", "traffic", "sessions", "network", "services",
+  "components", "graphics", "themes", "input", "stress",
+];
 
 export interface DemoState {
   sample: SystemSample;

package/src/system/common.ts

@@ -2,6 +2,7 @@ import { execFile } from "node:child_process";
 import { promisify } from "node:util";
 import os from "node:os";
 import type { SystemSample } from "../simulation.ts";
+import { emptyTelemetry } from "./telemetry.ts";
 
 const run = promisify(execFile);
 
@@ -31,6 +32,7 @@ export function baseSample(): SystemSample {
   const total = os.totalmem();
   return {
     time: 0,
+    telemetry: emptyTelemetry(),
     cpu: {
       total: 0,
       cores: new Array(Math.max(1, cpus.length)).fill(0),