@profullstack/hqtui-demo 0.2.0 → 0.4.0

package/src/main.ts

@@ -10,10 +10,10 @@
 import { createApp, themeList, themes, type KeyEvent } from "@profullstack/hqtui";
 import { createCollector } from "./system/index.ts";
 import { intervalMs } from "./options.ts";
-import { createState, focusedPane, moveSelection, SCREENS, type ScreenName } from "./state.ts";
+import { createState, focusedPane, moveSelection, SCREENS, SCREEN_KEYS, type ScreenName } from "./state.ts";
 import {
   componentsScreen, dashboardScreen, graphicsScreen, inputScreen, networkScreen, servicesScreen,
-  sessionsScreen, stressScreen, themesScreen, trafficScreen, visibleProcesses,
+  sessionsScreen, stressScreen, themesScreen, trafficScreen, visibleProcesses, worldScreen,
 } from "./screens/index.ts";
 import { clock, num } from "./format.ts";
 
@@ -51,7 +51,7 @@ function parseArgs(argv: string[]): Options {
       case "-h":
       case "--help": printHelp(); process.exit(0);
       case "-v":
-      case "--version": console.log("hqtui-demo 0.2.0"); process.exit(0);
+      case "--version": console.log("hqtui-demo 0.4.0"); process.exit(0);
     }
   }
   return options;
@@ -69,13 +69,13 @@ Options:
   --seed <n>         Simulation seed (default 1337)
   --fps <n>          Frame cap (default 30, 15 over SSH)
   --theme <name>     dark, dracula, nord, tokyoNight, gruvbox, matrix, monochrome, highContrast, light
-  --screen <name>    dashboard, components, graphics, themes, input, stress
+  --screen <name>    dashboard, components, graphics, themes, input, stress, world
   --interval <ms>    Metric refresh interval (default 1000)
   -h, --help         Show this help
   -v, --version      Show the version
 
 Keys:
-  1-6 / Tab screens   F2 theme   F3 filter   F6 sort   Ctrl+K palette
+  1-0/w / Tab screens F2 theme   F3 filter   F6 sort   Ctrl+K palette
   ↑/↓ select          Space pause            F1 help   q quit
 `);
 }
@@ -91,6 +91,7 @@ const PALETTE_COMMANDS: { label: string; hint: string; run: (state: ReturnType<t
   { label: "Go to Themes", hint: "8", run: (s) => { s.screen = "themes"; } },
   { label: "Go to Input", hint: "9", run: (s) => { s.screen = "input"; } },
   { label: "Go to Stress Test", hint: "0", run: (s) => { s.screen = "stress"; } },
+  { label: "Go to World Map", hint: "w", run: (s) => { s.screen = "world"; } },
   { label: "Sort by CPU", hint: "F6", run: (s) => { s.sort = "cpu"; } },
   { label: "Sort by Memory", hint: "F6", run: (s) => { s.sort = "mem"; } },
   { label: "Pause updates", hint: "Space", run: (s) => { s.paused = !s.paused; } },
@@ -210,11 +211,28 @@ async function main(): Promise<void> {
         app.setTheme(themeList[state.themeIndex]);
         return;
       case "f3": state.filtering = true; return;
+      case "c":
+        // Shows what collapseBorders does, live. Worth a key because the
+        // difference is only visible when panels sit next to each other —
+        // which is also why the screens have to close their one-column gaps
+        // at the same time. The library only merges a seam where two bordered
+        // siblings already touch, so toggling the flag alone moved nothing.
+        state.collapsed = !state.collapsed;
+        app.setCollapseBorders(state.collapsed);
+        return;
       case "f6": {
         const order = ["cpu", "mem", "pid", "name"] as const;
         state.sort = order[(order.indexOf(state.sort) + 1) % order.length];
         return;
       }
+      case "w": state.screen = "world"; return;
+      case "z":
+        // The map is the only screen with somewhere to zoom to.
+        if (state.screen === "world") state.worldZoom = !state.worldZoom;
+        return;
+      case "r":
+        if (state.screen === "world") state.worldZoom = false;
+        return;
       case "f10": app.quit(); return;
       case "ctrl+k":
         state.showPalette = true;
@@ -257,7 +275,7 @@ async function main(): Promise<void> {
     ui.row({ size: 1 }, (header) => {
       header.text(" hqtui.com", { fg: theme.title, bold: true, size: 12 });
       header.tabs({
-        tabs: SCREENS.map((s, i) => `${(i + 1) % 10} ${s}`),
+        tabs: SCREENS.map((s) => `${SCREEN_KEYS[s]} ${s}`),
         active: SCREENS.indexOf(state.screen),
         onSelect: (index) => { state.screen = SCREENS[index]; },
       });
@@ -279,6 +297,7 @@ async function main(): Promise<void> {
         case "themes": themesScreen(body, state, theme); break;
         case "input": inputScreen(body, state, theme); break;
         case "stress": stressScreen(body, state, theme); break;
+        case "world": worldScreen(body, state, theme); break;
         default: dashboardScreen(body, state, theme); break;
       }
     });
@@ -289,6 +308,7 @@ async function main(): Promise<void> {
         { key: "F1", label: "Help" },
         { key: "F2", label: `Theme (${theme.name})` },
         { key: "F3", label: state.filtering ? `Filter: ${state.filter}_` : "Filter", active: state.filtering },
+        { key: "c", label: "Collapse", active: app.collapseBorders },
         { key: "F6", label: `Sort: ${state.sort}` },
         { key: "^K", label: "Palette" },
         { key: "Tab", label: "Screen" },
@@ -303,8 +323,9 @@ async function main(): Promise<void> {
         width: 62,
         height: 18,
         message:
-          "1-6 or Tab switch screens.\n" +
+          "1-0, w or Tab switch screens; w is the clickable world map.\n" +
           "F2 cycles themes, F3 filters processes, F6 changes sort.\n" +
+          "c collapses adjacent panel borders into shared lines.\n" +
           "Ctrl+K opens the command palette, Space pauses updates.\n" +
           "Arrows, PageUp/PageDown, Home/End move the selection.\n" +
           "Mouse: click tabs and buttons, scroll the process list.\n\n" +

package/src/screens/components.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, percent } from "../format.ts";
 
 const FILES = [
@@ -39,8 +39,9 @@ const TREE = [
 
 /** Every widget in the library, in one screen. Also the interaction sandbox. */
 export function componentsScreen(ui: Container, state: DemoState, theme: Theme): void {
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
-    row.column({ gap: 1 }, (left) => {
+  const gap = panelGap(state);
+  ui.row({ size: "1fr", gap }, (row) => {
+    row.column({ gap, bordered: true }, (left) => {
       left.panel({ title: "Buttons & Inputs", size: 13 }, (p) => {
         p.row({ size: 1, gap: 1 }, (r) => {
           r.button({ label: "Primary", width: 11, size: 11, onPress: () => { state.showModal = true; } });
@@ -115,7 +116,7 @@ export function componentsScreen(ui: Container, state: DemoState, theme: Theme):
       });
     });
 
-    row.column({ gap: 1 }, (right) => {
+    row.column({ gap, bordered: true }, (right) => {
       right.panel({ title: "Process Tree", size: 13 }, (p) => {
         p.row({ size: 1 }, (r) => {
           r.text("Name", { fg: theme.muted, bold: true });

package/src/screens/dashboard.ts

@@ -1,13 +1,13 @@
-import type { Container, Theme } from "@profullstack/hqtui";
+import type { Container, Size, Theme } from "@profullstack/hqtui";
 import { heatColor } from "@profullstack/hqtui";
-import { focusPane, pane, scrollPane, type DemoState } from "../state.ts";
+import { focusPane, pane, panelGap, scrollPane, type DemoState } from "../state.ts";
 import { bitRate, byteRate, bytes, clock, duration, num, percent } from "../format.ts";
 
 const TIME_LABELS = ["60s", "45s", "30s", "15s", "0s"];
 
-function cpuPanel(ui: Container, state: DemoState, theme: Theme, coreColumns: number): void {
+function cpuPanel(ui: Container, state: DemoState, theme: Theme, coreColumns: number, width?: Size): void {
   const cpu = state.sample.cpu;
-  ui.panel({ title: "CPU Overview", subtitle: percent(cpu.total) }, (p) => {
+  ui.panel({ title: "CPU Overview", subtitle: percent(cpu.total), width }, (p) => {
     p.label(`${cpu.model}   ${num(cpu.frequencyGhz, 1)} GHz`, { size: 1 });
     p.graph({ values: cpu.history, min: 0, max: 100, fill: true, color: theme.success, size: "1fr" });
     p.meters(
@@ -26,11 +26,11 @@ function cpuPanel(ui: Container, state: DemoState, theme: Theme, coreColumns: nu
   });
 }
 
-function memoryPanel(ui: Container, state: DemoState, theme: Theme): void {
+function memoryPanel(ui: Container, state: DemoState, theme: Theme, width?: Size): void {
   const memory = state.sample.memory;
   const used = memory.used / Math.max(1, memory.total);
   const swap = memory.swapTotal > 0 ? memory.swapUsed / memory.swapTotal : 0;
-  ui.panel({ title: "Memory & Swap" }, (p) => {
+  ui.panel({ title: "Memory & Swap", width }, (p) => {
     p.text(`Memory${" ".repeat(6)}${bytes(memory.used)} / ${bytes(memory.total)} (${percent(used)})`, {
       fg: theme.foreground,
       size: 1,
@@ -58,9 +58,9 @@ function memoryPanel(ui: Container, state: DemoState, theme: Theme): void {
   });
 }
 
-function disksPanel(ui: Container, state: DemoState, theme: Theme): void {
+function disksPanel(ui: Container, state: DemoState, theme: Theme, width?: Size): void {
   const disks = state.sample.disks;
-  ui.panel({ title: "Disks" }, (p) => {
+  ui.panel({ title: "Disks", width }, (p) => {
     if (disks.length === 0) {
       p.label("No disks reported");
       return;
@@ -87,9 +87,10 @@ function disksPanel(ui: Container, state: DemoState, theme: Theme): void {
   });
 }
 
-function systemPanel(ui: Container, state: DemoState, theme: Theme): void {
+function systemPanel(ui: Container, state: DemoState, theme: Theme, width?: Size): void {
   const s = state.sample;
-  ui.panel({ title: "System" }, (p) => {
+  const gap = panelGap(state);
+  ui.panel({ title: "System", width }, (p) => {
     p.row({ size: 6, gap: 2, min: 6 }, (r) => {
       r.keyValues([
         { label: "OS:", value: s.system.os },
@@ -114,7 +115,7 @@ function systemPanel(ui: Container, state: DemoState, theme: Theme): void {
     // Sub-panels need both width and height to be legible; otherwise they are
     // replaced by a single dense stat line.
     if (p.width >= 46 && p.height >= 16) {
-      p.row({ size: 6, gap: 1 }, (r) => {
+      p.row({ size: 6, gap }, (r) => {
         r.panel({ title: "Quick Stats" }, (q) => {
           q.keyValues([
             { label: "Uptime", value: duration(s.system.uptime), color: theme.accent },
@@ -147,12 +148,13 @@ function systemPanel(ui: Container, state: DemoState, theme: Theme): void {
   });
 }
 
-function processesPanel(ui: Container, state: DemoState, theme: Theme): void {
+function processesPanel(ui: Container, state: DemoState, theme: Theme, width?: Size): void {
   const rows = visibleProcesses(state);
   ui.panel({
     title: `Processes (sorted by ${state.sort.toUpperCase()})`,
     subtitle: state.filter ? `filter: ${state.filter}` : undefined,
     focusable: true,
+    width,
   }, (p) => {
     const procs = pane(state, "dashboard.processes", rows.length);
     p.table({
@@ -179,9 +181,9 @@ function processesPanel(ui: Container, state: DemoState, theme: Theme): void {
   });
 }
 
-function networkPanel(ui: Container, state: DemoState, theme: Theme): void {
+function networkPanel(ui: Container, state: DemoState, theme: Theme, width?: Size): void {
   const net = state.sample.network;
-  ui.panel({ title: "Network" }, (p) => {
+  ui.panel({ title: "Network", width }, (p) => {
     p.row({ size: 1 }, (r) => {
       r.text(`Download: ${bitRate(net.downRate)}`, { fg: theme.primary });
       r.text(`Upload: ${bitRate(net.upRate)}`, { fg: theme.secondary, align: "right" });
@@ -204,9 +206,9 @@ function networkPanel(ui: Container, state: DemoState, theme: Theme): void {
   });
 }
 
-function diskUsagePanel(ui: Container, state: DemoState, theme: Theme): void {
+function diskUsagePanel(ui: Container, state: DemoState, theme: Theme, width?: Size): void {
   const disks = state.sample.disks;
-  ui.panel({ title: "Disk Usage", subtitle: disks[0]?.device }, (p) => {
+  ui.panel({ title: "Disk Usage", subtitle: disks[0]?.device, width }, (p) => {
     disks.forEach((disk) => {
       const used = disk.total > 0 ? disk.used / disk.total : 0;
       p.meter({
@@ -268,8 +270,8 @@ function sensorsPanel(ui: Container, state: DemoState, theme: Theme): void {
   });
 }
 
-function logsPanel(ui: Container, state: DemoState): void {
-  ui.panel({ title: "Logs" }, (p) => {
+function logsPanel(ui: Container, state: DemoState, width?: Size): void {
+  ui.panel({ title: "Logs", width }, (p) => {
     const logs = pane(state, "dashboard.logs", state.sample.logs.length, "log");
     p.log({
       entries: state.sample.logs.map((l) => ({
@@ -304,51 +306,59 @@ export function visibleProcesses(state: DemoState): DemoState["sample"]["process
   return sorted;
 }
 
-/** The reference dashboard. Three layouts, chosen by terminal width. */
+/**
+ * The reference dashboard. Three layouts, chosen by terminal width.
+ *
+ * Panels go straight into their row rather than each inside a sizing column.
+ * A column is not a bordered child, so a row of them has no seam to merge and
+ * [c] could never change this screen; `width` on the panel does the same job
+ * and leaves the borders adjacent to each other.
+ */
 export function dashboardScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const gap = panelGap(state);
   ui.responsive({
     150: (wide) => {
       // The System column holds nested panels, so it gets the extra width —
       // and extra height whenever the terminal is tall enough to spare it.
-      wide.row({ size: wide.height >= 44 ? 19 : 16, gap: 1 }, (r) => {
-        r.column({ width: "1fr" }, (c) => cpuPanel(c, state, theme, 2));
-        r.column({ width: "0.95fr" }, (c) => memoryPanel(c, state, theme));
-        r.column({ width: "0.95fr" }, (c) => disksPanel(c, state, theme));
-        r.column({ width: "1.35fr" }, (c) => systemPanel(c, state, theme));
+      wide.row({ size: wide.height >= 44 ? 19 : 16, gap }, (r) => {
+        cpuPanel(r, state, theme, 2, "1fr");
+        memoryPanel(r, state, theme, "0.95fr");
+        disksPanel(r, state, theme, "0.95fr");
+        systemPanel(r, state, theme, "1.35fr");
       });
-      wide.row({ size: "1fr", gap: 1 }, (r) => {
-        r.column({ width: "2fr" }, (c) => processesPanel(c, state, theme));
-        r.column({ width: "1.2fr" }, (c) => networkPanel(c, state, theme));
-        r.column({ width: "1.2fr" }, (c) => diskUsagePanel(c, state, theme));
+      wide.row({ size: "1fr", gap }, (r) => {
+        processesPanel(r, state, theme, "2fr");
+        networkPanel(r, state, theme, "1.2fr");
+        diskUsagePanel(r, state, theme, "1.2fr");
       });
-      wide.row({ size: 12, gap: 1 }, (r) => {
+      wide.row({ size: 12, gap }, (r) => {
         temperaturesPanel(r, state, theme);
         sensorsPanel(r, state, theme);
-        r.column({ width: "1.6fr" }, (c) => logsPanel(c, state));
+        logsPanel(r, state, "1.6fr");
       });
     },
     100: (medium) => {
-      medium.row({ size: 14, gap: 1 }, (r) => {
+      medium.row({ size: 14, gap }, (r) => {
         cpuPanel(r, state, theme, 2);
         memoryPanel(r, state, theme);
         systemPanel(r, state, theme);
       });
-      medium.row({ size: "1fr", gap: 1 }, (r) => {
-        r.column({ width: "1.6fr" }, (c) => processesPanel(c, state, theme));
-        r.column({}, (c) => networkPanel(c, state, theme));
+      medium.row({ size: "1fr", gap }, (r) => {
+        processesPanel(r, state, theme, "1.6fr");
+        networkPanel(r, state, theme);
       });
-      medium.row({ size: 10, gap: 1 }, (r) => {
+      medium.row({ size: 10, gap }, (r) => {
         temperaturesPanel(r, state, theme);
         logsPanel(r, state);
       });
     },
     0: (compact) => {
-      compact.row({ size: 10, gap: 1 }, (r) => {
+      compact.row({ size: 10, gap }, (r) => {
         cpuPanel(r, state, theme, 1);
         memoryPanel(r, state, theme);
       });
       compact.column({ size: "1fr" }, (c) => processesPanel(c, state, theme));
-      compact.row({ size: 8, gap: 1 }, (r) => networkPanel(r, state, theme));
+      compact.row({ size: 8, gap }, (r) => networkPanel(r, state, theme));
     },
   });
 }

package/src/screens/graphics.ts

@@ -1,6 +1,6 @@
 import type { Container, Theme } from "@profullstack/hqtui";
 import { gradientSteps } from "@profullstack/hqtui";
-import type { DemoState } from "../state.ts";
+import { panelGap, type DemoState } from "../state.ts";
 
 function wave(count: number, phase: number, freq: number): number[] {
   return Array.from({ length: count }, (_, i) => Math.sin(i / freq + phase) * 50 + 50);
@@ -8,13 +8,14 @@ function wave(count: number, phase: number, freq: number): number[] {
 
 /** Rendering-mode comparison: braille vs block vs ascii, plus raw canvas access. */
 export function graphicsScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const gap = panelGap(state);
   const t = state.sample.time;
   const a = wave(240, t / 3, 9);
   const b = wave(240, t / 3 + 2, 5);
   const c = wave(240, t / 2, 17);
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
-    row.column({ gap: 1 }, (left) => {
+  ui.row({ size: "1fr", gap }, (row) => {
+    row.column({ gap, bordered: true }, (left) => {
       left.panel({ title: "Braille (2×4 pixels per cell)" }, (p) => {
         p.graph({ values: a, min: 0, max: 100, fill: true, color: theme.accent, grid: true });
       });
@@ -26,7 +27,7 @@ export function graphicsScreen(ui: Container, state: DemoState, theme: Theme): v
       });
     });
 
-    row.column({ gap: 1 }, (right) => {
+    row.column({ gap, bordered: true }, (right) => {
       right.panel({ title: "Multi-series" }, (p) => {
         p.multiGraph(
           [

package/src/screens/index.ts

@@ -8,3 +8,4 @@ export { graphicsScreen } from "./graphics.ts";
 export { themesScreen } from "./themes.ts";
 export { inputScreen } from "./input.ts";
 export { stressScreen } from "./stress.ts";
+export { worldScreen } from "./world.ts";

package/src/screens/input.ts

@@ -1,9 +1,10 @@
 import type { Container, Theme } from "@profullstack/hqtui";
-import type { DemoState } from "../state.ts";
+import { panelGap, type DemoState } from "../state.ts";
 
 /** Keyboard and mouse event visualizer — useful when debugging bindings. */
 export function inputScreen(ui: Container, state: DemoState, theme: Theme): void {
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
+  const gap = panelGap(state);
+  ui.row({ size: "1fr", gap }, (row) => {
     row.panel({ title: "Last Events" }, (p) => {
       p.keyValues([
         { label: "Key", value: state.lastKey, color: theme.accent },

package/src/screens/network.ts

@@ -1,14 +1,15 @@
 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 { byteRate, bytes } from "../format.ts";
 
 /** Interfaces, live throughput, open connections and listening ports. */
 export function networkScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const gap = panelGap(state);
   const t = state.sample.telemetry;
   const active = t.interfaces.filter((i) => i.rxTotal > 0 || i.state === "up");
   const shown = (active.length ? active : t.interfaces).slice(0, 3);
 
-  ui.row({ size: 13, gap: 1 }, (row) => {
+  ui.row({ size: 13, gap }, (row) => {
     if (shown.length === 0) {
       row.panel({ title: "Interfaces" }, (p) => p.label("No interfaces reported."));
       return;
@@ -43,7 +44,7 @@ export function networkScreen(ui: Container, state: DemoState, theme: Theme): vo
     });
   });
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
+  ui.row({ size: "1fr", gap }, (row) => {
     row.panel({
       title: "Connections",
       subtitle: `${t.connections.length} open`,
@@ -74,7 +75,7 @@ export function networkScreen(ui: Container, state: DemoState, theme: Theme): vo
       });
     });
 
-    row.column({ width: "0.7fr", gap: 1 }, (column) => {
+    row.column({ width: "0.7fr", gap, bordered: true }, (column) => {
       column.panel({ title: "Listening Ports", subtitle: String(t.listeners.length), borderColor: theme.warning }, (p) => {
         const listeners = pane(state, "network.listeners", t.listeners.length);
         p.table({

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,10 +9,11 @@ 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");
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
+  ui.row({ size: "1fr", gap }, (row) => {
     row.panel({
       title: "Services",
       subtitle: failed.length ? `${failed.length} failed` : `${t.services.length} units`,
@@ -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, bordered: true }, (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.");
@@ -42,7 +43,7 @@ export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): v
     });
   });
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
+  ui.row({ size: "1fr", gap }, (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.");
@@ -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, bordered: true }, (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/themes.ts

@@ -1,13 +1,14 @@
 import type { Container, Theme } from "@profullstack/hqtui";
 import { themeList } from "@profullstack/hqtui";
-import type { DemoState } from "../state.ts";
+import { panelGap, type DemoState } from "../state.ts";
 
 /** Live theme switching. Every theme renders the same content side by side. */
 export function themesScreen(ui: Container, state: DemoState, theme: Theme): void {
   const values = state.sample.cpu.history;
+  const gap = panelGap(state);
   ui.label(`Theme ${state.themeIndex + 1}/${themeList.length}: ${theme.name}   ←/→ or F2 to change`, { size: 1 });
   ui.spacer(1);
-  ui.grid({ columns: 3, rows: Math.ceil(themeList.length / 3), gap: 1 }, (grid) => {
+  ui.grid({ columns: 3, rows: Math.ceil(themeList.length / 3), gap }, (grid) => {
     themeList.forEach((entry, i) => {
       grid.panel({
         title: entry.name,

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`,
@@ -85,8 +86,8 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
     });
   });
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
-    row.column({ gap: 1 }, (column) => {
+  ui.row({ size: "1fr", gap }, (row) => {
+    row.column({ gap, bordered: true }, (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, bordered: true }, (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.");