openk8s 1.0.5 → 1.2.0

package/src/app/components/overlays/help-overlay.tsx

@@ -0,0 +1,171 @@
+import { TextAttributes } from "@opentui/core";
+import { useTerminalDimensions } from "@opentui/react";
+
+import { GLYPHS, OVERLAY_SURFACE, PANEL_BORDER_ACTIVE, KEY_HINT, TEXT_SUBTLE, ATTR_DIM, toneStyles } from "../../theme";
+import { KeyHintRow } from "./shared";
+
+interface HelpSection {
+  title: string;
+  rows: [string, string][];
+}
+
+const LEFT_SECTIONS: HelpSection[] = [
+  {
+    title: "Navigation",
+    rows: [
+      ["Tab / Shift+Tab", "cycle panes"],
+      ["Up/Down or k/j", "navigate list"],
+      ["Left or h", "back / prev tab"],
+      ["Right", "forward / next tab"],
+      ["Space", "multi-select resource"],
+    ],
+  },
+  {
+    title: "Inspector Tabs",
+    rows: [
+      ["S", "summary tab (incl. recent events)"],
+      ["Y", "yaml tab (press again to copy)"],
+    ],
+  },
+  {
+    title: "Resource Actions",
+    rows: [
+      ["L", "logs"],
+      ["E", "edit (or edit helm values)"],
+      ["X", "shell (kubectl exec)"],
+      ["F", "port forward (per-resource)"],
+      ["D", "delete"],
+      ["Shift+S", "scale"],
+      ["Shift+R", "rollout restart"],
+    ],
+  },
+  {
+    title: "Helm Actions",
+    rows: [
+      ["B", "rollback"],
+      ["U", "upgrade --reuse-values"],
+    ],
+  },
+];
+
+const RIGHT_SECTIONS: HelpSection[] = [
+  {
+    title: "Overlays",
+    rows: [
+      ["C", "cluster switcher"],
+      ["N", "namespace switcher"],
+      ["Shift+N", "notification history"],
+      ["Shift+F", "active port forwards"],
+      ["?", "this help"],
+    ],
+  },
+  {
+    title: "Filter",
+    rows: [
+      ["/", "enter filter mode"],
+      ["Enter", "confirm filter"],
+      ["Escape", "cancel filter"],
+      ["Ctrl+U", "clear filter"],
+    ],
+  },
+  {
+    title: "Logs Overlay",
+    rows: [
+      ["/", "search"],
+      ["N / Shift+N", "next / prev match"],
+      ["C", "switch container"],
+      ["P", "toggle previous logs"],
+      ["T", "set tail lines"],
+      ["S", "set since duration"],
+      ["Up/Down", "scroll logs"],
+    ],
+  },
+  {
+    title: "Port Forward List",
+    rows: [
+      ["X", "stop selected forward"],
+      ["C", "stop all forwards"],
+    ],
+  },
+  {
+    title: "Global",
+    rows: [
+      ["R", "refresh current view"],
+      ["Escape", "close overlay"],
+      ["Ctrl+C", "quit"],
+    ],
+  },
+];
+
+const ALL_SECTIONS = [...LEFT_SECTIONS, ...RIGHT_SECTIONS];
+
+const TWO_COLUMN_THRESHOLD = 90;
+
+function renderSection(section: HelpSection, index: number, keyWidth: number): React.ReactNode {
+  return (
+    <box key={section.title} style={{ flexDirection: "column", width: "100%" }}>
+      {index > 0 && <box style={{ height: 1 }} />}
+      <text fg={toneStyles("accent").fg} attributes={TextAttributes.BOLD}>
+        {section.title}
+      </text>
+      {section.rows.map(([key, label], rowIdx) => (
+        <box key={`${index}:${rowIdx}`} style={{ flexDirection: "row", width: "100%", paddingLeft: 2 }}>
+          <box style={{ width: keyWidth }}>
+            <text fg={KEY_HINT}>{key}</text>
+          </box>
+          <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
+            {label}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+function renderColumn(sections: HelpSection[], keyWidth: number): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1, width: "100%" }}>
+      {sections.map((section, index) => renderSection(section, index, keyWidth))}
+    </box>
+  );
+}
+
+export function HelpOverlay() {
+  const dims = useTerminalDimensions();
+  const twoColumns = dims.width >= TWO_COLUMN_THRESHOLD;
+
+  const left = twoColumns ? "8%" : "16%";
+  const width = twoColumns ? "84%" : "68%";
+  const keyWidth = twoColumns ? 20 : 24;
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left,
+        top: "6%",
+        width,
+        height: "86%",
+        border: true,
+        borderColor: PANEL_BORDER_ACTIVE,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title="Keyboard Shortcuts"
+    >
+      <scrollbox style={{ flexGrow: 1 }} focused>
+        {twoColumns ? (
+          <box style={{ flexDirection: "row", width: "100%", columnGap: 2 }}>
+            {renderColumn(LEFT_SECTIONS, keyWidth)}
+            {renderColumn(RIGHT_SECTIONS, keyWidth)}
+          </box>
+        ) : (
+          renderColumn(ALL_SECTIONS, keyWidth)
+        )}
+      </scrollbox>
+      <KeyHintRow hints={[[GLYPHS.esc, "close"]]} />
+    </box>
+  );
+}

package/src/app/components/overlays/index.ts

@@ -1,4 +1,4 @@
-export { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, KeyHintRow } from "./shared";
+export { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, DialogFrame, KeyHintRow, TextInput } from "./shared";
 export { SelectOverlay, type SelectOverlayProps } from "./select-overlay";
 export { DeleteConfirmOverlay, type DeleteConfirmOverlayProps } from "./delete-confirm-overlay";
 export {
@@ -7,6 +7,9 @@ export {
   type PortForwardOverlayProps,
   buildPortForwardEntries,
 } from "./port-forward-overlay";
+export { PortForwardListOverlay, type PortForwardListOverlayProps } from "./port-forward-list-overlay";
 export { LogsDialog, type LogsDialogActions, type LogsDialogProps } from "./logs-dialog";
 export { ScaleDialog, type ScaleDialogProps } from "./scale-dialog";
 export { HelmRollbackOverlay, type HelmRollbackOverlayProps } from "./helm-rollback-overlay";
+export { NotificationHistoryOverlay, type NotificationHistoryOverlayProps } from "./notification-history-overlay";
+export { HelpOverlay } from "./help-overlay";

package/src/app/components/overlays/logs-dialog.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import type { MutableRefObject } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
 
 import {
@@ -7,12 +8,13 @@ import {
   KEY_HINT,
   OVERLAY_SURFACE,
   PANEL_BORDER_ACTIVE,
-  TEXT_MUTED,
+  ATTR_DIM,
   TEXT_SUBTLE,
   YAML_COMMENT,
   toneStyles,
 } from "../../theme";
 import type { LoadStatus, LogOptions } from "../../../lib/k8s/types";
+import { KeyHintRow, TextInput } from "./shared";
 
 export interface LogsDialogActions {
   nextMatch: () => void;
@@ -33,7 +35,7 @@ export interface LogsDialogProps {
   searchMode?: boolean | undefined;
   searchText?: string | undefined;
   onSearchChange?: ((value: string) => void) | undefined;
-  actionsRef?: React.MutableRefObject<LogsDialogActions | null> | undefined;
+  actionsRef?: MutableRefObject<LogsDialogActions | null> | undefined;
 }
 
 export function LogsDialog({
@@ -52,7 +54,7 @@ export function LogsDialog({
   onSearchChange,
   actionsRef,
 }: LogsDialogProps) {
-  const lines = logsText ? logsText.split("\n") : [];
+  const lines = useMemo(() => (logsText ? logsText.split("\n") : []), [logsText]);
   const palette = toneStyles("info");
   const [currentMatchIdx, setCurrentMatchIdx] = useState(0);
 
@@ -63,18 +65,31 @@ export function LogsDialog({
       if (line.toLowerCase().includes(lower)) acc.push(i);
       return acc;
     }, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [logsText, searchText]);
+  }, [lines, searchText]);
 
+  // Reset to first match when search text changes, and clamp when matches shrink (e.g. new logs stream in)
   useEffect(() => {
-    if (!searchText) return;
+    if (!searchText) {
+      setCurrentMatchIdx(0);
+      return;
+    }
     setCurrentMatchIdx(0);
     const firstLine = matchIndices[0];
     if (firstLine !== undefined) {
       scrollRef.current?.scrollTo(firstLine);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchText]);
+  }, [searchText, matchIndices]);
+
+  // Keep currentMatchIdx in range when matchIndices shrinks
+  useEffect(() => {
+    if (matchIndices.length === 0) {
+      if (currentMatchIdx !== 0) setCurrentMatchIdx(0);
+      return;
+    }
+    if (currentMatchIdx >= matchIndices.length) {
+      setCurrentMatchIdx(matchIndices.length - 1);
+    }
+  }, [matchIndices, currentMatchIdx]);
 
   const nextMatch = () => {
     if (matchIndices.length === 0) return;
@@ -92,9 +107,11 @@ export function LogsDialog({
     if (lineIdx !== undefined) scrollRef.current?.scrollTo(lineIdx);
   };
 
-  if (actionsRef) {
-    actionsRef.current = { nextMatch, prevMatch };
-  }
+  useEffect(() => {
+    if (actionsRef) {
+      actionsRef.current = { nextMatch, prevMatch };
+    }
+  });
 
   const warningFg = toneStyles("warning").fg;
   const multiContainer = (containers?.length ?? 0) > 1;
@@ -121,22 +138,22 @@ export function LogsDialog({
     >
       {/* Options status bar */}
       <box style={{ flexDirection: "row", columnGap: 2, marginBottom: 0 }}>
-        <text fg={logsOptions.previous ? warningFg : TEXT_SUBTLE} attributes={TEXT_MUTED}>
+        <text fg={logsOptions.previous ? warningFg : TEXT_SUBTLE} attributes={ATTR_DIM}>
           <span fg={KEY_HINT}>P</span>
           {` prev:${logsOptions.previous ? "on" : "off"}`}
         </text>
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+        <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
           <span fg={KEY_HINT}>T</span>
           {` tail:${logsOptions.tail}`}
         </text>
         {logsOptions.since ? (
-          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
             <span fg={KEY_HINT}>S</span>
             {` since:${logsOptions.since}`}
           </text>
         ) : undefined}
         {multiContainer ? (
-          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
             <span fg={KEY_HINT}>C</span>
             {logsContainer ? ` ctr:${logsContainer}` : " all-ctrs"}
           </text>
@@ -195,33 +212,12 @@ export function LogsDialog({
 
       {/* Option input row */}
       {inputMode ? (
-        <box
-          style={{
-            border: true,
-            borderColor: PANEL_BORDER_ACTIVE,
-            borderStyle: "rounded",
-            backgroundColor: FILTER_BACKGROUND,
-            paddingLeft: 1,
-            paddingRight: 1,
-            marginTop: 1,
-            height: 3,
-            justifyContent: "center",
-            alignItems: "center",
-            flexDirection: "row",
-          }}
-        >
-          <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
-            {inputMode === "tail" ? "Tail lines:" : "Since (e.g. 1h, 30m):"}
-          </text>
-          <input
-            focused
-            value={inputValue ?? ""}
-            placeholder={inputMode === "tail" ? "120" : "1h"}
-            style={{ flexGrow: 1, marginLeft: 1 }}
-            onInput={onOptionInputChange}
-            onChange={onOptionInputChange}
-          />
-        </box>
+        <TextInput
+          label={inputMode === "tail" ? "Tail lines:" : "Since (e.g. 1h, 30m):"}
+          value={inputValue ?? ""}
+          placeholder={inputMode === "tail" ? "120" : "1h"}
+          onChange={onOptionInputChange ?? (() => undefined)}
+        />
       ) : undefined}
 
       {/* Search input row */}
@@ -251,11 +247,11 @@ export function LogsDialog({
             onChange={onSearchChange}
           />
           {matchIndices.length > 0 ? (
-            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
               {` ${currentMatchIdx + 1}/${matchIndices.length}`}
             </text>
           ) : searchText ? (
-            <text fg={toneStyles("danger").fg} attributes={TEXT_MUTED}>
+            <text fg={toneStyles("danger").fg} attributes={ATTR_DIM}>
               {" no match"}
             </text>
           ) : undefined}
@@ -263,29 +259,13 @@ export function LogsDialog({
       ) : undefined}
 
       {/* Hints */}
-      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
-        {inputMode || searchMode ? (
-          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-            <span fg={KEY_HINT}>{GLYPHS.enter}</span>
-            {" confirm"}
-          </text>
-        ) : (
-          <>
-            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-              <span fg={KEY_HINT}>{"/"}</span>
-              {" search"}
-            </text>
-            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-              <span fg={KEY_HINT}>{"↑↓"}</span>
-              {" scroll"}
-            </text>
-          </>
-        )}
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
-          {" close"}
-        </text>
-      </box>
+      <KeyHintRow
+        hints={
+          inputMode || searchMode
+            ? [[GLYPHS.enter, "confirm"], [GLYPHS.esc, "close"]]
+            : [["/", "search"], ["↑↓", "scroll"], [GLYPHS.esc, "close"]]
+        }
+      />
     </box>
   );
 }

package/src/app/components/overlays/notification-history-overlay.tsx

@@ -0,0 +1,79 @@
+import { TextAttributes } from "@opentui/core";
+
+import { GLYPHS, OVERLAY_SURFACE, PANEL_BORDER_ACTIVE, TEXT_PRIMARY, TEXT_SUBTLE, ATTR_DIM, toneStyles } from "../../theme";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, KeyHintRow } from "./shared";
+import type { Notification } from "../../../lib/k8s/types";
+
+export interface NotificationHistoryOverlayProps {
+  history: Notification[];
+  onClear: () => void;
+}
+
+const TONE_ICONS: Record<Notification["tone"], string> = {
+  info: GLYPHS.dotEmpty,
+  success: GLYPHS.dot,
+  warning: GLYPHS.warn,
+  danger: GLYPHS.cross,
+};
+
+function formatTimeAgo(timestamp: number): string {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export function NotificationHistoryOverlay({ history, onClear }: NotificationHistoryOverlayProps) {
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: DIALOG_LEFT,
+        top: DIALOG_TOP,
+        width: DIALOG_WIDTH,
+        height: "60%",
+        border: true,
+        borderColor: PANEL_BORDER_ACTIVE,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title="Notification History"
+    >
+      {history.length === 0 ? (
+        <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+          No notification history
+        </text>
+      ) : (
+        <scrollbox style={{ flexGrow: 1 }} focused>
+          <box style={{ flexDirection: "column", width: "100%" }}>
+            {history.map((notification, index) => {
+              const palette = toneStyles(notification.tone);
+              const icon = TONE_ICONS[notification.tone];
+              return (
+                <box
+                  key={`${index}:${notification.id}`}
+                  style={{ flexDirection: "row", marginBottom: 0, width: "100%" }}
+                >
+                  <text fg={palette.fg}>{icon}</text>
+                  <text fg={TEXT_PRIMARY} wrapMode="word" style={{ flexGrow: 1, marginLeft: 1 }}>
+                    {notification.message}
+                  </text>
+                  <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
+                    {formatTimeAgo(notification.createdAt)}
+                  </text>
+                </box>
+              );
+            })}
+          </box>
+        </scrollbox>
+      )}
+      <KeyHintRow hints={[["C", "clear history"], [GLYPHS.esc, "close"]]} />
+    </box>
+  );
+}

package/src/app/components/overlays/port-forward-list-overlay.tsx

@@ -0,0 +1,85 @@
+import { TextAttributes } from "@opentui/core";
+
+import {
+  GLYPHS,
+  OVERLAY_SURFACE,
+  PANEL_BORDER_ACTIVE,
+  ROW_SELECTED,
+  TEXT_PRIMARY,
+  TEXT_SUBTLE,
+} from "../../theme";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, KeyHintRow } from "./shared";
+import { statusLine } from "../../utils";
+import type { ActivePortForward } from "../../../lib/k8s/types";
+
+export interface PortForwardListOverlayProps {
+  forwards: ActivePortForward[];
+  selectedIndex: number;
+  onChange: (index: number) => void;
+}
+
+export function PortForwardListOverlay({ forwards, selectedIndex, onChange }: PortForwardListOverlayProps) {
+  const clampedIndex = forwards.length > 0 ? Math.min(selectedIndex, forwards.length - 1) : 0;
+
+  const items = forwards.map((f) => {
+    const isReady = f.status === "ready";
+    const dot = isReady ? GLYPHS.dot : GLYPHS.dotEmpty;
+    return {
+      name: `${dot} ${statusLine({ ref: f.ref })}  localhost:${f.localPort} \u2192 :${f.remotePort}`,
+      description: f.status,
+    };
+  });
+
+  const hints: [string, string][] = [];
+  if (forwards.length > 0) {
+    hints.push(["X", "stop"]);
+    hints.push(["C", "stop all"]);
+  }
+  hints.push([GLYPHS.esc, "close"]);
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: DIALOG_LEFT,
+        top: DIALOG_TOP,
+        width: DIALOG_WIDTH,
+        height: "60%",
+        border: true,
+        borderColor: PANEL_BORDER_ACTIVE,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title="Port Forwards"
+    >
+      {forwards.length === 0 ? (
+        <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+          No active port forwards
+        </text>
+      ) : (
+        <box style={{ flexGrow: 1 }}>
+          <select
+            focused
+            style={{ flexGrow: 1 }}
+            backgroundColor={OVERLAY_SURFACE}
+            focusedBackgroundColor={OVERLAY_SURFACE}
+            textColor={TEXT_PRIMARY}
+            focusedTextColor={TEXT_PRIMARY}
+            selectedBackgroundColor={ROW_SELECTED}
+            selectedTextColor={TEXT_PRIMARY}
+            descriptionColor={TEXT_SUBTLE}
+            selectedDescriptionColor={TEXT_PRIMARY}
+            showDescription
+            showScrollIndicator
+            selectedIndex={clampedIndex}
+            options={items}
+            onChange={onChange}
+          />
+        </box>
+      )}
+      <KeyHintRow hints={hints} />
+    </box>
+  );
+}

package/src/app/components/overlays/port-forward-overlay.tsx

@@ -1,17 +1,14 @@
 import { TextAttributes } from "@opentui/core";
 
 import {
-  FILTER_BACKGROUND,
   GLYPHS,
   KEY_HINT,
   OVERLAY_SURFACE,
-  PANEL_BORDER_ACTIVE,
-  TEXT_MUTED,
   TEXT_PRIMARY,
   TEXT_SUBTLE,
   toneStyles,
 } from "../../theme";
-import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH } from "./shared";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, KeyHintRow, TextInput } from "./shared";
 import type { ActivePortForward } from "../../../lib/k8s/types";
 
 export interface PortForwardEntry {
@@ -101,7 +98,7 @@ export function PortForwardOverlay({
 
           return (
             <text
-              key={entry.remotePort}
+              key={`${entry.remotePort}:${entry.suggestedLocalPort}`}
               fg={selected ? TEXT_PRIMARY : TEXT_SUBTLE}
               attributes={selected ? undefined : TextAttributes.DIM}
             >
@@ -126,59 +123,22 @@ export function PortForwardOverlay({
       </box>
 
       {selectedEntry && !selectedIsActive && (
-        <box
-          style={{
-            border: true,
-            borderColor: PANEL_BORDER_ACTIVE,
-            borderStyle: "rounded",
-            backgroundColor: FILTER_BACKGROUND,
-            paddingLeft: 1,
-            paddingRight: 1,
-            marginTop: 1,
-            height: 3,
-            justifyContent: "center",
-            alignItems: "center",
-            flexDirection: "row",
-          }}
-        >
-          <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
-            Local:
-          </text>
-          <input
-            focused
-            value={localPortValue}
-            placeholder={String(selectedEntry.suggestedLocalPort)}
-            style={{ flexGrow: 1, marginLeft: 1 }}
-            onInput={onChange}
-            onChange={onChange}
-          />
-        </box>
+        <TextInput
+          label="Local:"
+          value={localPortValue}
+          placeholder={String(selectedEntry.suggestedLocalPort)}
+          onChange={onChange}
+        />
       )}
 
-      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
-        {anyInactive && (
-          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-            <span fg={KEY_HINT}>{GLYPHS.enter}</span>
-            {" start"}
-          </text>
-        )}
-        {anyActive && (
-          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-            <span fg={KEY_HINT}>{"X"}</span>
-            {" stop"}
-          </text>
-        )}
-        {entries.length > 1 && (
-          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-            <span fg={KEY_HINT}>{"↑↓"}</span>
-            {" navigate"}
-          </text>
-        )}
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
-          {" close"}
-        </text>
-      </box>
+      <KeyHintRow
+        hints={[
+          ...(anyInactive ? [[GLYPHS.enter, "start"] as [string, string]] : []),
+          ...(anyActive ? [["X", "stop"] as [string, string]] : []),
+          ...(entries.length > 1 ? [["↑↓", "navigate"] as [string, string]] : []),
+          [GLYPHS.esc, "close"],
+        ]}
+      />
     </box>
   );
 }