openk8s 1.0.4 → 1.1.0

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,22 +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";
-
-function logLineColor(line: string): string {
-  const lower = line.toLowerCase();
-  if (/\b(error|err|fatal|panic|critical)\b/.test(lower)) return toneStyles("danger").fg;
-  if (/\bwarn(?:ing)?\b/.test(lower)) return toneStyles("warning").fg;
-  if (/\binfo(?:rmation)?\b/.test(lower)) return toneStyles("info").fg;
-  if (/\bdebug\b/.test(lower)) return TEXT_SUBTLE;
-  if (/\btrace\b/.test(lower)) return YAML_COMMENT;
-  return TEXT_SUBTLE;
-}
+import { KeyHintRow, TextInput } from "./shared";
 
 export interface LogsDialogActions {
   nextMatch: () => void;
@@ -43,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({
@@ -62,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);
 
@@ -73,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;
@@ -102,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;
@@ -131,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>
@@ -184,7 +191,7 @@ export function LogsDialog({
                 const matched = line.slice(matchStart, matchStart + searchText.length);
                 const after = line.slice(matchStart + searchText.length);
                 return (
-                  <text key={`${index}:${line}`} fg={logLineColor(line)}>
+                  <text key={`${index}:${line}`} fg={TEXT_SUBTLE}>
                     {before}
                     <span fg={warningFg} attributes={isCurrentMatch ? TextAttributes.BOLD : TextAttributes.DIM}>
                       {matched}
@@ -194,7 +201,7 @@ export function LogsDialog({
                 );
               }
               return (
-                <text key={`${index}:${line}`} fg={logLineColor(line)}>
+                <text key={`${index}:${line}`} fg={TEXT_SUBTLE}>
                   {line}
                 </text>
               );
@@ -205,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 */}
@@ -261,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}
@@ -273,31 +259,15 @@ 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>
   );
 }
 
-export { logLineColor };
+

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>
   );
 }

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

@@ -1,17 +1,7 @@
 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 { GLYPHS, TEXT_PRIMARY, TEXT_SUBTLE, ATTR_DIM, toneStyles } from "../../theme";
+import { DialogFrame, KeyHintRow, TextInput } from "./shared";
 
 export interface ScaleDialogProps {
   target: string;
@@ -24,26 +14,11 @@ export function ScaleDialog({ target, currentReplicas, replicasValue, onChange }
   const palette = toneStyles("accent");
 
   return (
-    <box
-      style={{
-        position: "absolute",
-        left: DIALOG_LEFT,
-        top: DIALOG_TOP,
-        width: DIALOG_WIDTH,
-        height: 12,
-        border: true,
-        borderStyle: "rounded",
-        borderColor: palette.border,
-        backgroundColor: OVERLAY_SURFACE,
-        padding: 1,
-        flexDirection: "column",
-      }}
-      title="Scale Replicas"
-    >
+    <DialogFrame title="Scale Replicas" tone="accent" height={12}>
       <text fg={palette.fg} attributes={TextAttributes.BOLD}>
         {target}
       </text>
-      <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+      <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
         {currentReplicas !== undefined ? (
           <>
             {"Current  "}
@@ -54,43 +29,13 @@ export function ScaleDialog({ target, currentReplicas, replicasValue, onChange }
           "Replicas unknown"
         )}
       </text>
-      <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}>
-          Target:
-        </text>
-        <input
-          focused
-          value={replicasValue}
-          placeholder={currentReplicas !== undefined ? String(currentReplicas) : "0"}
-          style={{ flexGrow: 1, marginLeft: 1 }}
-          onInput={onChange}
-          onChange={onChange}
-        />
-      </box>
-      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-          <span fg={KEY_HINT}>{GLYPHS.enter}</span>
-          {" scale"}
-        </text>
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
-          {" cancel"}
-        </text>
-      </box>
-    </box>
+      <TextInput
+        label="Target:"
+        value={replicasValue}
+        placeholder={currentReplicas !== undefined ? String(currentReplicas) : "0"}
+        onChange={onChange}
+      />
+      <KeyHintRow hints={[[GLYPHS.enter, "scale"], [GLYPHS.esc, "cancel"]]} />
+    </DialogFrame>
   );
 }

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

@@ -1,13 +1,12 @@
 import {
   GLYPHS,
-  KEY_HINT,
   OVERLAY_SURFACE,
   PANEL_BORDER_ACTIVE,
   ROW_SELECTED,
-  TEXT_MUTED,
   TEXT_PRIMARY,
   TEXT_SUBTLE,
 } from "../../theme";
+import { KeyHintRow } from "./shared";
 
 export interface SelectOverlayProps {
   title: string;
@@ -17,6 +16,7 @@ export interface SelectOverlayProps {
 }
 
 export function SelectOverlay({ title, items, selectedIndex, onChange }: SelectOverlayProps) {
+  const clampedIndex = items.length > 0 ? Math.min(selectedIndex, items.length - 1) : 0;
   return (
     <box
       style={{
@@ -48,21 +48,12 @@ export function SelectOverlay({ title, items, selectedIndex, onChange }: SelectO
           selectedDescriptionColor={TEXT_PRIMARY}
           showDescription
           showScrollIndicator
-          selectedIndex={selectedIndex}
+          selectedIndex={clampedIndex}
           options={items}
-          onChange={(index) => onChange(index)}
+          onChange={onChange}
         />
       </box>
-      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-          <span fg={KEY_HINT}>{GLYPHS.enter}</span>
-          {" select"}
-        </text>
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
-          {" close"}
-        </text>
-      </box>
+      <KeyHintRow hints={[[GLYPHS.enter, "select"], [GLYPHS.esc, "close"]]} />
     </box>
   );
 }