@profullstack/hqtui-demo 0.1.7 → 0.1.9

package/src/screens/services.ts

@@ -1,5 +1,5 @@
 import type { Container, Theme } from "@profullstack/hqtui";
-import { cursor, type DemoState } from "../state.ts";
+import { focusPane, pane, scrollPane, type DemoState } from "../state.ts";
 import { bytes, num, percent } from "../format.ts";
 
 function rate(value: number): string {
@@ -23,11 +23,15 @@ export function servicesScreen(ui: Container, state: DemoState, theme: Theme): v
         p.label("systemd not available on this host.");
         return;
       }
+      const units = pane(state, "services.units", t.services.length);
       p.table({
         rows: t.services,
-        selected: cursor(state).selected,
-        offset: cursor(state).offset,
+        selected: units.selected,
+        offset: units.offset,
         followSelection: true,
+        onScroll: (delta) => scrollPane(units, delta),
+        onFocus: () => focusPane(state, "services.units"),
+        onSelectRow: (row) => { units.selected = units.offset + row; },
         zebra: true,
         scrollbar: true,
         columns: [
@@ -66,8 +70,16 @@ export function servicesScreen(ui: Container, state: DemoState, theme: Theme): v
           p.label("(docker not installed or not reachable)", { size: 1 });
           return;
         }
+        const containers = pane(state, "services.containers", t.containers.length);
         p.table({
           rows: t.containers,
+          selected: containers.selected,
+          offset: containers.offset,
+          followSelection: true,
+          scrollbar: true,
+          onScroll: (delta) => scrollPane(containers, delta),
+          onFocus: () => focusPane(state, "services.containers"),
+          onSelectRow: (row) => { containers.selected = containers.offset + row; },
           zebra: true,
           columns: [
             { key: "name", title: "Name", min: 12, color: theme.primary },
@@ -106,8 +118,16 @@ export function servicesScreen(ui: Container, state: DemoState, theme: Theme): v
       p.label("No filesystems reported.");
       return;
     }
+    const filesystems = pane(state, "services.filesystems", t.filesystems.length);
     p.table({
       rows: t.filesystems,
+      selected: filesystems.selected,
+      offset: filesystems.offset,
+      followSelection: true,
+      scrollbar: true,
+      onScroll: (delta) => scrollPane(filesystems, delta),
+      onFocus: () => focusPane(state, "services.filesystems"),
+      onSelectRow: (row) => { filesystems.selected = filesystems.offset + row; },
       zebra: true,
       columns: [
         { key: "mount", title: "Mount", min: 14, color: theme.primary },

package/src/screens/sessions.ts

@@ -1,5 +1,5 @@
 import type { Container, Theme } from "@profullstack/hqtui";
-import { cursor, type DemoState } from "../state.ts";
+import { focusPane, pane, 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 {
@@ -12,8 +12,16 @@ export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): v
         p.label("(`who` reports nothing on this host)", { size: 1 });
         return;
       }
+      const active = pane(state, "sessions.active", t.sessions.length);
       p.table({
         rows: t.sessions,
+        selected: active.selected,
+        offset: active.offset,
+        followSelection: true,
+        scrollbar: true,
+        onScroll: (delta) => scrollPane(active, delta),
+        onFocus: () => focusPane(state, "sessions.active"),
+        onSelectRow: (row) => { active.selected = active.offset + row; },
         columns: [
           { key: "user", title: "User", width: 12, color: theme.primary },
           { key: "tty", title: "TTY", width: 10 },
@@ -40,11 +48,15 @@ export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): v
         p.label("No login history available.");
         return;
       }
+      const logins = pane(state, "sessions.logins", t.logins.length);
       p.table({
         rows: t.logins,
-        selected: cursor(state).selected,
-          offset: cursor(state).offset,
-          followSelection: true,
+        selected: logins.selected,
+        offset: logins.offset,
+        followSelection: true,
+        onScroll: (delta) => scrollPane(logins, delta),
+        onFocus: () => focusPane(state, "sessions.logins"),
+        onSelectRow: (row) => { logins.selected = logins.offset + row; },
         zebra: true,
         scrollbar: true,
         columns: [
@@ -69,8 +81,16 @@ export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): v
           p.label("(btmp is usually root-only)", { size: 1 });
           return;
         }
+        const failed = pane(state, "sessions.failed", t.failedLogins.length);
         p.table({
           rows: t.failedLogins,
+          selected: failed.selected,
+          offset: failed.offset,
+          followSelection: true,
+          scrollbar: true,
+          onScroll: (delta) => scrollPane(failed, delta),
+          onFocus: () => focusPane(state, "sessions.failed"),
+          onSelectRow: (row) => { failed.selected = failed.offset + row; },
           columns: [
             { key: "user", title: "User", width: 12, color: theme.danger },
             { key: "from", title: "From", min: 12 },

package/src/screens/traffic.ts

@@ -1,6 +1,6 @@
 import type { Container, Theme } from "@profullstack/hqtui";
 import { seriesColor } from "@profullstack/hqtui";
-import { cursor, type DemoState } from "../state.ts";
+import { focusPane, pane, scrollPane, type DemoState } from "../state.ts";
 import { num, percent } from "../format.ts";
 
 function rate(value: number): string {
@@ -116,8 +116,16 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
           { labelWidth: 5, valueWidth: 7 },
         );
         p.divider({ label: "top paths" });
+        const paths = pane(state, "traffic.paths", http.topPaths.length);
         p.table({
           rows: http.topPaths,
+          selected: paths.selected,
+          offset: paths.offset,
+          followSelection: true,
+          scrollbar: true,
+          onScroll: (delta) => scrollPane(paths, delta),
+          onFocus: () => focusPane(state, "traffic.paths"),
+          onSelectRow: (row) => { paths.selected = paths.offset + row; },
           header: false,
           columns: [
             { key: "path", title: "Path", min: 20, color: theme.primary },
@@ -133,11 +141,15 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
           p.label("No sshd events in the journal.");
           return;
         }
+        const ssh = pane(state, "traffic.ssh", t.ssh.length);
         p.table({
           rows: [...t.ssh].reverse(),
-          selected: cursor(state).selected,
-          offset: cursor(state).offset,
+          selected: ssh.selected,
+          offset: ssh.offset,
           followSelection: true,
+          onScroll: (delta) => scrollPane(ssh, delta),
+          onFocus: () => focusPane(state, "traffic.ssh"),
+          onSelectRow: (row) => { ssh.selected = ssh.offset + row; },
           zebra: true,
           scrollbar: true,
           columns: [
@@ -163,8 +175,16 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
           p.label("No remote peers.");
           return;
         }
+        const remotes = pane(state, "traffic.remotes", t.remotes.length);
         p.table({
           rows: t.remotes,
+          selected: remotes.selected,
+          offset: remotes.offset,
+          followSelection: true,
+          scrollbar: true,
+          onScroll: (delta) => scrollPane(remotes, delta),
+          onFocus: () => focusPane(state, "traffic.remotes"),
+          onSelectRow: (row) => { remotes.selected = remotes.offset + row; },
           zebra: true,
           columns: [
             { key: "host", title: "Host", min: 16, color: theme.accent },
@@ -178,8 +198,15 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
 
   if (http && http.recent.length) {
     ui.panel({ title: "Recent Requests", size: 10, borderColor: theme.primary }, (p) => {
+      const requests = pane(state, "traffic.requests", http.recent.length);
       p.table({
         rows: http.recent,
+        selected: requests.selected,
+        offset: requests.offset,
+        followSelection: true,
+        onScroll: (delta) => scrollPane(requests, delta),
+        onFocus: () => focusPane(state, "traffic.requests"),
+        onSelectRow: (row) => { requests.selected = requests.offset + row; },
         zebra: true,
         scrollbar: true,
         columns: [

package/src/state.ts

@@ -18,10 +18,13 @@ export interface DemoState {
   /** Why hardware sensors are missing on this host, when they are. */
   sensorNote: string;
   /**
-   * One cursor per screen. A single shared selection meant the arrow keys moved
-   * an index the visible table did not use, so its scrollbar never moved.
+   * One cursor per scrollable pane, not per screen. Sharing a cursor across a
+   * screen meant only one of its lists could ever be driven, so the second
+   * scrollbar on a screen sat there doing nothing.
    */
-  cursors: Record<ScreenName, { selected: number; offset: number }>;
+  panes: Record<string, Pane>;
+  /** Which pane the arrow keys drive, per screen. Clicking a pane sets it. */
+  focused: Partial<Record<ScreenName, string>>;
   sort: "cpu" | "mem" | "pid" | "name";
   filter: string;
   filtering: boolean;
@@ -48,9 +51,67 @@ export interface DemoState {
   bytes: number;
 }
 
-/** The cursor for whichever screen is showing. */
-export function cursor(state: DemoState): { selected: number; offset: number } {
-  return state.cursors[state.screen] ?? { selected: 0, offset: 0 };
+export interface Pane {
+  selected: number;
+  offset: number;
+  /** Row count, refreshed by the screen each frame so keys can clamp. */
+  total: number;
+  /**
+   * A log has no selected row: the arrows move its window instead, and it
+   * counts backwards from the newest line rather than forwards from the first.
+   */
+  kind: "list" | "log";
+}
+
+/**
+ * The cursor for one scrollable, created on first use. Screens call this while
+ * drawing, which is also what registers the pane as existing.
+ */
+export function pane(state: DemoState, id: string, total: number, kind: Pane["kind"] = "list"): Pane {
+  const existing = state.panes[id];
+  if (existing) {
+    existing.total = total;
+    return existing;
+  }
+  const created: Pane = { selected: 0, offset: 0, total, kind };
+  state.panes[id] = created;
+  // The first pane a screen draws is the one the arrows drive by default.
+  if (!state.focused[state.screen]) state.focused[state.screen] = id;
+  return created;
+}
+
+/** The pane the arrow keys act on, for the screen that is showing. */
+export function focusedPane(state: DemoState): Pane | undefined {
+  const id = state.focused[state.screen];
+  return id ? state.panes[id] : undefined;
+}
+
+export function focusPane(state: DemoState, id: string): void {
+  state.focused[state.screen] = id;
+}
+
+/** Move a pane's window, dragging the selection so it stays inside. */
+export function scrollPane(p: Pane, delta: number, rows = 3): void {
+  const max = Math.max(0, p.total - 1);
+  p.offset = Math.max(0, Math.min(p.offset + delta * rows, max));
+  if (p.kind !== "log") p.selected = Math.max(p.offset, Math.min(p.selected, max));
+}
+
+/**
+ * What the arrow keys do to the focused pane. Lists move the selection and let
+ * the widget scroll to follow it; logs have nothing to select, so they move
+ * their own window.
+ */
+export function moveSelection(state: DemoState, delta: number): void {
+  const p = focusedPane(state);
+  if (!p || p.total === 0) return;
+  if (p.kind === "log") {
+    // Down means newer, which is a smaller distance from the end.
+    p.offset = Math.max(0, Math.min(p.total - 1, p.offset - delta));
+    return;
+  }
+  p.selected = Math.max(0, Math.min(p.total - 1, p.selected + delta));
+  p.offset = Math.max(0, Math.min(p.offset, Math.max(0, p.total - 1)));
 }
 
 export function createState(
@@ -65,9 +126,8 @@ export function createState(
     screen: "dashboard",
     source,
     unavailable,
-    cursors: Object.fromEntries(
-      SCREENS.map((screen) => [screen, { selected: 0, offset: 0 }]),
-    ) as DemoState["cursors"],
+    panes: {},
+    focused: {},
     sort: "cpu",
     filter: "",
     filtering: false,