@profullstack/hqtui-demo 0.2.0 → 0.3.0

package/src/screens/services.ts

@@ -1,5 +1,5 @@
 import type { Container, Theme } from "@profullstack/hqtui";
-import { focusPane, pane, scrollPane, type DemoState } from "../state.ts";
+import { focusPane, pane, panelGap, scrollPane, type DemoState } from "../state.ts";
 import { bytes, num, percent } from "../format.ts";
 
 function rate(value: number): string {
@@ -9,6 +9,7 @@ function rate(value: number): string {
 
 /** Services, containers, kernel counters, filesystems and hardware sensors. */
 export function servicesScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const gap = panelGap(state);
   const t = state.sample.telemetry;
   const failed = t.services.filter((s) => s.active === "failed");
 
@@ -49,7 +50,7 @@ export function servicesScreen(ui: Container, state: DemoState, theme: Theme): v
       });
     });
 
-    row.column({ width: "0.85fr", gap: 1 }, (column) => {
+    row.column({ width: "0.85fr", gap }, (column) => {
       column.panel({ title: "Kernel", size: 11, borderColor: theme.accent }, (p) => {
         const k = t.kernel;
         p.keyValues([

package/src/screens/sessions.ts

@@ -1,11 +1,12 @@
 import type { Container, Theme } from "@profullstack/hqtui";
-import { focusPane, pane, scrollPane, type DemoState } from "../state.ts";
+import { focusPane, pane, panelGap, scrollPane, 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 gap = panelGap(state);
   const t = state.sample.telemetry;
 
-  ui.row({ size: 9, gap: 1 }, (row) => {
+  ui.row({ size: 9, gap }, (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.");
@@ -74,7 +75,7 @@ export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): v
       });
     });
 
-    row.column({ width: "0.8fr", gap: 1 }, (column) => {
+    row.column({ width: "0.8fr", gap }, (column) => {
       column.panel({ title: "Failed Logins", borderColor: theme.danger }, (p) => {
         if (t.failedLogins.length === 0) {
           p.label("None recorded.");

package/src/screens/stress.ts

@@ -1,12 +1,13 @@
 import type { Container, Theme } from "@profullstack/hqtui";
 import { gradient } from "@profullstack/hqtui";
-import type { DemoState } from "../state.ts";
+import { panelGap, type DemoState } from "../state.ts";
 import { num } from "../format.ts";
 
 /** Every cell changes every frame — the worst case for a differential renderer. */
 export function stressScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const gap = panelGap(state);
   const t = state.sample.time;
-  ui.row({ size: 3, gap: 1 }, (r) => {
+  ui.row({ size: 3, gap }, (r) => {
     r.panel({ title: "Render" }, (p) => {
       p.text(`${num(state.renderMs, 2)} ms/frame`, { fg: theme.success });
     });

package/src/screens/traffic.ts

@@ -1,6 +1,6 @@
 import type { Container, Theme } from "@profullstack/hqtui";
 import { seriesColor } from "@profullstack/hqtui";
-import { focusPane, pane, scrollPane, type DemoState } from "../state.ts";
+import { focusPane, pane, panelGap, scrollPane, type DemoState } from "../state.ts";
 import { num, percent } from "../format.ts";
 
 function rate(value: number): string {
@@ -19,11 +19,12 @@ const STATUS_COLORS = (theme: Theme): Record<string, number> => ({
 
 /** Every protocol in and out of this host: sockets, TCP counters, SSH, HTTP. */
 export function trafficScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const gap = panelGap(state);
   const t = state.sample.telemetry;
   const net = t.net;
   const http = t.http;
 
-  ui.row({ size: 13, gap: 1 }, (row) => {
+  ui.row({ size: 13, gap }, (row) => {
     row.panel({
       title: "Protocols",
       subtitle: `${t.inboundConnections} in / ${t.outboundConnections} out`,
@@ -86,7 +87,7 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
   });
 
   ui.row({ size: "1fr", gap: 1 }, (row) => {
-    row.column({ gap: 1 }, (column) => {
+    row.column({ gap }, (column) => {
       column.panel({
         title: "HTTP",
         subtitle: http ? `${num(http.requestsPerSecond, 1)} req/s` : "no access log",
@@ -135,7 +136,7 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
       });
     });
 
-    row.column({ width: "0.85fr", gap: 1 }, (column) => {
+    row.column({ width: "0.85fr", gap }, (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.");

package/src/state.ts

@@ -26,6 +26,13 @@ export interface DemoState {
   /** Which pane the arrow keys drive, per screen. Clicking a pane sets it. */
   focused: Partial<Record<ScreenName, string>>;
   sort: "cpu" | "mem" | "pid" | "name";
+  /**
+   * Whether the [c] key has merged adjacent panel borders. Collapsing only
+   * happens where two bordered siblings actually touch, so the screens read
+   * this to lay out at a gap of zero; leaving them at one meant the key
+   * toggled a flag that could never reach a seam and nothing moved.
+   */
+  collapsed: boolean;
   filter: string;
   filtering: boolean;
   showHelp: boolean;
@@ -51,6 +58,11 @@ export interface DemoState {
   bytes: number;
 }
 
+/** The seam between panels: zero while collapsed, so their borders can merge. */
+export function panelGap(state: DemoState): number {
+  return state.collapsed ? 0 : 1;
+}
+
 export interface Pane {
   selected: number;
   offset: number;
@@ -129,6 +141,7 @@ export function createState(
     panes: {},
     focused: {},
     sort: "cpu",
+    collapsed: false,
     filter: "",
     filtering: false,
     showHelp: false,