openk8s 1.0.5 → 1.2.0

package/README.md

@@ -155,7 +155,7 @@ Three resizable panes: resource kinds (left), resources (center), inspector (rig
 
 - **Context & namespace switching** — browse any cluster in your kubeconfig, any namespace
 - **Resource browsing** — auto-discovers API resource kinds and lists resources with status, age, and summary; curates a sensible default ordering
-- **Log streaming** — `kubectl logs --follow` with search, container picker, tail count, since duration, and previous logs toggle; Deployments/StatefulSets use `--all-pods`
+- **Log streaming** — `kubectl logs --follow` with search, container picker, tail count, since duration, and previous logs toggle; Deployments/StatefulSets use `--all-containers`
 - **Shell** — drop into a container via `kubectl exec -it sh` (renderer suspends, resumes on exit)
 - **Edit** — `kubectl edit` for resources, temp-file + `helm upgrade --reuse-values` for HelmReleases (opens `$EDITOR`)
 - **Port-forward** — declare ports, start/stop forwards inline with live status

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openk8s",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "description": "A terminal UI for Kubernetes",
   "license": "MIT",
   "type": "module",
@@ -34,7 +34,8 @@
     "dev": "bun run --watch src/index.tsx",
     "prepare": "husky || exit 0",
     "test": "bun test",
-    "test:watch": "bun test --watch"
+    "test:watch": "bun test --watch",
+    "typecheck": "tsc --noEmit"
   },
   "release": {
     "branches": [
@@ -42,18 +43,20 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "^21.0.1",
-    "@commitlint/config-conventional": "^21.0.1",
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
     "@types/bun": "latest",
-    "@types/node": "^25.8.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
     "husky": "^9.1.7",
-    "semantic-release": "^25.0.3",
+    "semantic-release": "^25.0.5",
     "typescript": "^6.0.3"
   },
   "dependencies": {
-    "@opentui/core": "^0.2.12",
-    "@opentui/react": "^0.2.12",
-    "react": "^19.2.6"
+    "@opentui/core": "^0.4.1",
+    "@opentui/react": "^0.4.1",
+    "@types/js-yaml": "^4.0.9",
+    "js-yaml": "^5.1.0",
+    "react": "^19.2.7"
   }
 }

package/src/app/__tests__/app-state.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import { reducer, initialState, DEFAULT_NAMESPACE } from "../app-state";
+import { NOTIFICATION_HISTORY_LIMIT } from "../constants";
 import type { AppAction } from "../app-actions";
 import type { AppState, ResourceListItem, ActivePortForward, Notification } from "../../lib/k8s/types";
 
@@ -173,7 +174,7 @@ describe("reducer", () => {
 
   describe("setSelectedResourceDetail", () => {
     test("sets detail", () => {
-      const detail: any = { ref: { kind: "Pod", name: "test" }, summaryLines: [], summarySections: [], yaml: "" };
+      const detail: any = { ref: { kind: "Pod", name: "test" }, summarySections: [], yaml: "" };
       const state = reduce({ type: "setSelectedResourceDetail", detail });
       expect(state.selectedResourceDetail).toBe(detail);
     });
@@ -253,21 +254,62 @@ describe("reducer", () => {
 
   // ── Notifications ────────────────────────────────────────────────────────
 
+  function makeNotification(overrides: Partial<Notification> = {}): Notification {
+    return {
+      id: "n-1",
+      tone: "info",
+      message: "Hello",
+      persistent: false,
+      createdAt: Date.now(),
+      actions: [],
+      ...overrides,
+    };
+  }
+
   describe("pushNotification", () => {
     test("adds a notification", () => {
-      const notification: Notification = { id: "n-1", tone: "info", message: "Hello" };
+      const notification = makeNotification();
       const state = reduce({ type: "pushNotification", notification });
       expect(state.notifications).toHaveLength(1);
     });
   });
 
   describe("dismissNotification", () => {
-    test("removes a notification", () => {
-      const n1: Notification = { id: "n-1", tone: "info", message: "Hello" };
-      const n2: Notification = { id: "n-2", tone: "success", message: "Done" };
-      const state = reduce({ type: "dismissNotification", id: "n-1" }, { notifications: [n1, n2] });
+    test("removes a notification and adds to history", () => {
+      const n1 = makeNotification({ id: "n-1" });
+      const n2 = makeNotification({ id: "n-2", tone: "success", message: "Done" });
+      const state = reduce({ type: "dismissNotification", id: "n-1" }, { notifications: [n1, n2], notificationHistory: [] });
       expect(state.notifications).toHaveLength(1);
       expect(state.notifications[0]?.id).toBe("n-2");
+      expect(state.notificationHistory).toHaveLength(1);
+      expect(state.notificationHistory[0]?.id).toBe("n-1");
+    });
+
+    test("does not add to history if notification not found", () => {
+      const state = reduce({ type: "dismissNotification", id: "missing" }, { notifications: [], notificationHistory: [] });
+      expect(state.notificationHistory).toHaveLength(0);
+    });
+  });
+
+  describe("clearNotificationHistory", () => {
+    test("clears all history", () => {
+      const n1 = makeNotification({ id: "n-1" });
+      const state = reduce({ type: "clearNotificationHistory" }, { notificationHistory: [n1] });
+      expect(state.notificationHistory).toHaveLength(0);
+    });
+  });
+
+  describe("notification history cap", () => {
+    test("caps history at NOTIFICATION_HISTORY_LIMIT", () => {
+      const notifications = Array.from({ length: NOTIFICATION_HISTORY_LIMIT + 5 }, (_, i) =>
+        makeNotification({ id: `n-${i}` }),
+      );
+      let state: { notifications: Notification[]; notificationHistory: Notification[] } = { notifications: [], notificationHistory: [] };
+      for (const n of notifications) {
+        state = reduce({ type: "pushNotification", notification: n }, state);
+        state = reduce({ type: "dismissNotification", id: n.id }, state);
+      }
+      expect(state.notificationHistory.length).toBeLessThanOrEqual(NOTIFICATION_HISTORY_LIMIT);
     });
   });
 

package/src/app/__tests__/utils.test.ts

@@ -10,7 +10,6 @@ import {
   parseLocalPort,
   statusTone,
   kindDescription,
-  currentKindLabel,
   resourcePreview,
   normalizeFilter,
   filterResources,
@@ -187,19 +186,6 @@ describe("kindDescription", () => {
   });
 });
 
-// ── currentKindLabel ─────────────────────────────────────────────────────────
-
-describe("currentKindLabel", () => {
-  test("finds kind by name", () => {
-    const kinds: ResourceKind[] = [{ name: "pods", namespaced: true, shortNames: ["po"] }];
-    expect(currentKindLabel({ resourceKinds: kinds, selectedKind: "pods" })).toBe("pods");
-  });
-
-  test("falls back to selected kind string", () => {
-    expect(currentKindLabel({ resourceKinds: [], selectedKind: "pods" })).toBe("pods");
-  });
-});
-
 // ── resourcePreview ──────────────────────────────────────────────────────────
 
 describe("resourcePreview", () => {
@@ -312,7 +298,7 @@ describe("defaultNamespace", () => {
 describe("selectedRef", () => {
   const detail: ResourceDetail = {
     ref: { kind: "Pod", name: "web", namespace: "default" },
-    summaryLines: [], summarySections: [], yaml: "",
+    summarySections: [], yaml: "",
   };
 
   test("returns detail ref when it matches resource", () => {
@@ -357,6 +343,11 @@ describe("truncate", () => {
   test("handles single-char limit", () => {
     expect(truncate("ab", 1)).toBe("\u2026");
   });
+
+  test("handles zero maxLen", () => {
+    expect(truncate("abc", 0)).toBe("\u2026");
+    expect(truncate("", 0)).toBe("");
+  });
 });
 
 // ── formatClusterName ─────────────────────────────────────────────────────────

package/src/app/app-actions.ts

@@ -198,6 +198,10 @@ export interface DismissNotificationAction {
   id: string;
 }
 
+export interface ClearNotificationHistoryAction {
+  type: "clearNotificationHistory";
+}
+
 export interface SetRevealedSecretValueAction {
   type: "setRevealedSecretValue";
   id: string;
@@ -256,6 +260,7 @@ export type AppAction =
   | SetLogsOptionsAction
   | PushNotificationAction
   | DismissNotificationAction
+  | ClearNotificationHistoryAction
   | SetRevealedSecretValueAction
   | SetPodMetricsAction
   | SetNodeMetricsAction

package/src/app/app-state.ts

@@ -1,5 +1,6 @@
 import type { AppAction } from "./app-actions";
-import type { AppState, PaneId } from "../lib/k8s/types";
+import type { AppState, Notification, PaneId } from "../lib/k8s/types";
+import { NOTIFICATION_HISTORY_LIMIT } from "./constants";
 
 export { type AppAction } from "./app-actions";
 
@@ -39,6 +40,7 @@ export const initialState: AppState = {
   revealedSecretValues: {},
   activePortForwards: [],
   notifications: [],
+  notificationHistory: [],
   podMetrics: {},
   nodeMetrics: {},
   helmRollbackRevision: "",
@@ -189,11 +191,18 @@ export function reducer(state: AppState, action: AppAction): AppState {
         ...state,
         notifications: [...state.notifications, action.notification],
       };
-    case "dismissNotification":
+    case "dismissNotification": {
+      const dismissed = state.notifications.find((n) => n.id === action.id);
+      if (!dismissed) return state;
+      const history = [dismissed, ...state.notificationHistory].slice(0, NOTIFICATION_HISTORY_LIMIT);
       return {
         ...state,
         notifications: state.notifications.filter((n) => n.id !== action.id),
+        notificationHistory: history,
       };
+    }
+    case "clearNotificationHistory":
+      return { ...state, notificationHistory: [] };
     case "setRevealedSecretValue":
       return {
         ...state,

package/src/app/app.tsx

@@ -1,9 +1,17 @@
 import { type ScrollBoxRenderable } from "@opentui/core";
 import { useRenderer, useTerminalDimensions } from "@opentui/react";
-import { useCallback, useMemo, useReducer, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 
 import { DEFAULT_NAMESPACE, initialState, reducer } from "./app-state";
 import { loadPersistedState } from "./persistence";
+import {
+  INSPECTOR_MIN_WIDTH,
+  INSPECTOR_PANE_WIDTH,
+  KIND_PANE_WIDTH,
+  POLL_CLUSTER_MS,
+  POLL_METRICS_MS,
+  POLL_RESOURCE_MS,
+} from "./constants";
 import {
   FILTER_BACKGROUND,
   GLYPHS,
@@ -14,13 +22,12 @@ import {
   PANEL_BORDER_ACTIVE,
   RESOURCE_SURFACE,
   SURFACE,
-  TEXT_MUTED,
+  ATTR_DIM,
   TEXT_PRIMARY,
   TEXT_SUBTLE,
   paneBorder,
 } from "./theme";
 import {
-  currentKindLabel,
   filterResources,
   formatClusterName,
   nextVisibleResourceName,
@@ -32,7 +39,7 @@ import {
 } from "./utils";
 import { usePollingTick } from "./use-polling-tick";
 import { useFooterHints, useFooterHintRows } from "./use-footer-hints";
-import { InspectorBody, InspectorTabs, INSPECTOR_TABS } from "./components/inspector";
+import { InspectorBody, InspectorTabs } from "./components/inspector";
 import { KindRows } from "./components/kind-rows";
 import { ResourceRows } from "./components/resource-rows";
 import { Header } from "./components/header";
@@ -42,17 +49,19 @@ import {
   HelmRollbackOverlay,
   LogsDialog,
   type LogsDialogActions,
+  NotificationHistoryOverlay,
+  HelpOverlay,
   PortForwardOverlay,
+  PortForwardListOverlay,
   ScaleDialog,
   SelectOverlay,
   buildPortForwardEntries,
 } from "./components/overlays";
-import { PortForwardsTray } from "./components/port-forwards-tray";
 import { NotificationTray } from "./components/notification-tray";
 import { KubectlService } from "../lib/kubectl/kubectl-service";
 import type { ClusterContext, NamespaceItem, OverlayId, PaneId, ResourceDetailLine } from "../lib/k8s/types";
-import type { NotificationTone } from "../lib/k8s/types";
 
+import { useNotifications } from "./hooks/use-notifications";
 import { useClipboard } from "./hooks/use-clipboard";
 import { usePortForward } from "./hooks/use-port-forward";
 import { useLogStream } from "./hooks/use-log-stream";
@@ -73,10 +82,13 @@ const OVERLAY_TITLES: Record<OverlayId, string> = {
   "namespace-switcher": "Namespace Switcher",
   "delete-confirm": "Confirm Delete",
   "port-forward": "Port Forward",
+  "port-forward-list": "Port Forwards",
   logs: "Logs",
   scale: "Scale",
   "container-picker": "Select Container",
   "helm-rollback": "Helm Rollback",
+  "notification-history": "Notification History",
+  help: "Keyboard Shortcuts",
 };
 
 export function App() {
@@ -86,8 +98,7 @@ export function App() {
     const { activeContext, activeNamespace } = loadPersistedState();
     return {
       ...initialState,
-      ...(activeContext !== undefined ? { activeContext } : {}),
-      ...(activeNamespace !== undefined ? { activeNamespace } : {}),
+      ...(activeContext !== undefined ? { activeContext } : {}),      ...(activeNamespace !== undefined ? { activeNamespace } : {}),
     };
   });
   const [overlayIndex, setOverlayIndex] = useState(0);
@@ -102,11 +113,12 @@ export function App() {
 
   const logsScrollRef = useRef<ScrollBoxRenderable | null>(null);
   const logsActionsRef = useRef<LogsDialogActions | null>(null);
-  const notificationTimersRef = useRef(new Map<string, ReturnType<typeof setTimeout>>());
 
-  const clusterPollTick = usePollingTick({ enabled: Boolean(state.activeContext), intervalMs: 30_000 });
-  const viewPollTick = usePollingTick({ enabled: Boolean(state.activeContext), intervalMs: 5_000 });
-  const metricsPollTick = usePollingTick({ enabled: Boolean(state.activeContext), intervalMs: 15_000 });
+  const { toast, toastError, dismiss: dismissNotification, executeAction: executeNotificationAction } = useNotifications(dispatch);
+
+  const clusterPollTick = usePollingTick({ enabled: Boolean(state.activeContext), intervalMs: POLL_CLUSTER_MS });
+  const viewPollTick = usePollingTick({ enabled: Boolean(state.activeContext), intervalMs: POLL_RESOURCE_MS });
+  const metricsPollTick = usePollingTick({ enabled: Boolean(state.activeContext), intervalMs: POLL_METRICS_MS });
 
   const selectedKind = useMemo(
     () => state.resourceKinds.find((kind) => kind.name === state.selectedKind),
@@ -191,31 +203,18 @@ export function App() {
   );
 
   const activeForwardKeys = useMemo(
-    () => new Set(state.activePortForwards.map((f) => `${f.ref.kind.toLowerCase()}:${f.ref.name}`)),
+    () => new Set(state.activePortForwards.map((f) => `${f.ref.kind.toLowerCase()}:${f.ref.namespace ?? "cluster"}:${f.ref.name}`)),
     [state.activePortForwards],
   );
 
-  const selectedKindLabel = useMemo(
-    () => currentKindLabel({ resourceKinds: state.resourceKinds, selectedKind: state.selectedKind }),
-    [state.resourceKinds, state.selectedKind],
-  );
+  const selectedKindLabel = state.selectedKind;
 
-  const footerHints = useFooterHints(filterMode, state, activeResourceRef, activeDetail, selectedResourcePortForwards, deleteTargets, kubectl);
+  const footerHints = useFooterHints(filterMode, state.activePane, activeResourceRef, activeDetail, selectedResourcePortForwards, state.activePortForwards.length, deleteTargets, kubectl);
   const { footerHintsRow1, footerHintsRow2 } = useFooterHintRows(footerHints, dims.width);
 
   // ── Hooks ─────────────────────────────────────────────────────────────────
 
-  const toast = useCallback((tone: NotificationTone, message: string): void => {
-    const id = `notif-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-    dispatch({ type: "pushNotification", notification: { id, tone, message } });
-    const timer = setTimeout(() => {
-      notificationTimersRef.current.delete(id);
-      dispatch({ type: "dismissNotification", id });
-    }, 2_500);
-    notificationTimersRef.current.set(id, timer);
-  }, []);
-
-  const { copyToClipboard, toastError } = useClipboard(dispatch, toast);
+  const { copyToClipboard } = useClipboard(dispatch, toast);
 
   const { portForwardProcessesRef, stopPortForward, startPortForward, openPortForwardOverlay: rawOpenPortForwardOverlay } = usePortForward(dispatch, kubectl, toastError);
 
@@ -235,7 +234,14 @@ export function App() {
     setFilterMode,
   );
 
-  useAppSideEffects(state, dispatch, portForwardProcessesRef, notificationTimersRef, activeResourceRef);
+  useAppSideEffects(state, dispatch, portForwardProcessesRef, activeResourceRef);
+
+  // If the terminal is too narrow to show the inspector, don't let focus rest on it.
+  useEffect(() => {
+    if (state.activePane === "inspector" && dims.width < INSPECTOR_MIN_WIDTH) {
+      dispatch({ type: "setActivePane", pane: "resources" });
+    }
+  }, [state.activePane, dims.width]);
 
   const openPortForwardOverlay = useCallback(() => {
     rawOpenPortForwardOverlay(activeDetail, selectedResourcePortForwards, setPortForwardLocalPort, setOverlayIndex, dispatch);
@@ -358,7 +364,7 @@ export function App() {
           title={PANE_TITLES.clusters}
           onMouseDown={() => dispatch({ type: "setActivePane", pane: "clusters" })}
           style={{
-            width: 34,
+            width: KIND_PANE_WIDTH,
             border: true,
             borderColor: paneBorder(state.activePane === "clusters"),
             borderStyle: "rounded",
@@ -374,7 +380,7 @@ export function App() {
             </text>
           </box>
           <box style={{ width: "100%" }}>
-            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
               <span fg={KEY_HINT}>{GLYPHS.ns}</span>
               {` ${truncate(state.activeNamespace, 26)}`}
             </text>
@@ -385,7 +391,7 @@ export function App() {
             onActivate={() => dispatch({ type: "setActivePane", pane: "clusters" })}
             onSelect={(kind) => dispatch({ type: "setSelectedKind", kind })}
           />
-          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
             {"["}
             <span fg={KEY_HINT}>C</span>
             {"] cluster  ["}
@@ -427,7 +433,7 @@ export function App() {
               flexDirection: "row",
             }}
           >
-            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
               Filter:
             </text>
             <input
@@ -456,12 +462,12 @@ export function App() {
         </box>
 
         {/* Inspector pane — hidden when terminal is too narrow */}
-        {dims.width >= 110 && (
+        {dims.width >= INSPECTOR_MIN_WIDTH && (
         <box
           title={PANE_TITLES.inspector}
           onMouseDown={() => dispatch({ type: "setActivePane", pane: "inspector" })}
           style={{
-            width: 52,
+            width: INSPECTOR_PANE_WIDTH,
             border: true,
             borderColor: paneBorder(state.activePane === "inspector"),
             borderStyle: "rounded",
@@ -496,18 +502,10 @@ export function App() {
         )}
       </box>
 
-      <PortForwardsTray forwards={state.activePortForwards} onStop={stopPortForward} />
-
       <NotificationTray
         notifications={state.notifications}
-        onDismiss={(id) => {
-          const timer = notificationTimersRef.current.get(id);
-          if (timer) {
-            clearTimeout(timer);
-            notificationTimersRef.current.delete(id);
-          }
-          dispatch({ type: "dismissNotification", id });
-        }}
+        onDismiss={dismissNotification}
+        onAction={executeNotificationAction}
       />
 
       {/* Overlays */}
@@ -552,6 +550,19 @@ export function App() {
             revisionValue={state.helmRollbackRevision}
             onChange={(value) => dispatch({ type: "setHelmRollbackRevision", value })}
           />
+        ) : state.overlay === "port-forward-list" ? (
+          <PortForwardListOverlay
+            forwards={state.activePortForwards}
+            selectedIndex={overlayIndex}
+            onChange={setOverlayIndex}
+          />
+        ) : state.overlay === "notification-history" ? (
+          <NotificationHistoryOverlay
+            history={state.notificationHistory}
+            onClear={() => dispatch({ type: "clearNotificationHistory" })}
+          />
+        ) : state.overlay === "help" ? (
+          <HelpOverlay />
         ) : (
           <SelectOverlay
             title={OVERLAY_TITLES[state.overlay]}

package/src/app/components/detail-sections.tsx

@@ -59,8 +59,8 @@ export interface DetailSectionsInternalProps {
 export function DetailSectionsInternal({ sections, revealedIds, revealedSecretValues, onToggleReveal, onCopyText }: DetailSectionsInternalProps) {
   return (
     <box style={{ flexDirection: "column", width: "100%" }}>
-      {sections.map((section) => (
-        <box key={section.title} style={{ flexDirection: "column", marginBottom: 1 }}>
+      {sections.map((section, sectionIndex) => (
+        <box key={`${sectionIndex}:${section.title}`} style={{ flexDirection: "column", marginBottom: 1 }}>
           <text fg={KEY_HINT}>
             {"─ "}
             <span fg={TEXT_PRIMARY} attributes={TextAttributes.BOLD}>{section.title}</span>

package/src/app/components/footer.tsx

@@ -1,16 +1,29 @@
-import { TextAttributes } from "@opentui/core";
-
-import { KEY_HINT, TEXT_MUTED, TEXT_SUBTLE, toneStyles } from "../theme";
+import { KEY_HINT, ATTR_DIM, TEXT_SUBTLE, toneStyles } from "../theme";
+import { FOOTER_PADDING } from "../constants";
 
 export interface FooterProps {
   hintRows: [string, string][][];
 }
 
+function FooterHintRow({ hints }: { hints: [string, string][] }) {
+  return (
+    <box style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flexGrow: 1 }}>
+      <box style={{ flexDirection: "row", columnGap: 2 }}>
+        {hints.map(([key, label], index) => (
+          <text key={`${index}:${key}:${label}`} fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
+            {"["}
+            <span fg={KEY_HINT}>{key}</span>
+            {`] ${label}`}
+          </text>
+        ))}
+      </box>
+    </box>
+  );
+}
+
 export function Footer({ hintRows }: FooterProps) {
-  const [row1, row2] = hintRows;
   const palette = toneStyles("neutral");
-  const textFg = TEXT_SUBTLE;
-  const dimAttr = TEXT_MUTED;
+  const [row1, row2] = hintRows;
 
   return (
     <box
@@ -20,33 +33,13 @@ export function Footer({ hintRows }: FooterProps) {
         borderColor: palette.border,
         borderStyle: "rounded",
         backgroundColor: palette.bg,
-        paddingLeft: 1,
-        paddingRight: 1,
+        paddingLeft: FOOTER_PADDING,
+        paddingRight: FOOTER_PADDING,
         flexDirection: "column",
       }}
     >
-      <box style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flexGrow: 1 }}>
-        <box style={{ flexDirection: "row", columnGap: 2 }}>
-          {(row1 ?? []).map(([key, label]) => (
-            <text key={`${key}:${label}`} fg={textFg} attributes={dimAttr}>
-              {"["}
-              <span fg={KEY_HINT}>{key}</span>
-              {`] ${label}`}
-            </text>
-          ))}
-        </box>
-      </box>
-      <box style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flexGrow: 1 }}>
-        <box style={{ flexDirection: "row", columnGap: 2 }}>
-          {(row2 ?? []).map(([key, label]) => (
-            <text key={`${key}:${label}`} fg={textFg} attributes={dimAttr}>
-              {"["}
-              <span fg={KEY_HINT}>{key}</span>
-              {`] ${label}`}
-            </text>
-          ))}
-        </box>
-      </box>
+      <FooterHintRow hints={row1 ?? []} />
+      <FooterHintRow hints={row2 ?? []} />
     </box>
   );
 }