openk8s 1.0.5 → 1.2.0

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

package/src/app/components/overlays/shared.tsx

@@ -1,18 +1,97 @@
-import { GLYPHS, KEY_HINT, TEXT_MUTED, TEXT_SUBTLE } from "../../theme";
+import { TextAttributes } from "@opentui/core";
+
+import { FILTER_BACKGROUND, GLYPHS, KEY_HINT, OVERLAY_SURFACE, PANEL_BORDER_ACTIVE, ATTR_DIM, TEXT_SUBTLE, toneStyles } from "../../theme";
 
 export const DIALOG_LEFT = "28%";
 export const DIALOG_TOP = "20%";
 export const DIALOG_WIDTH = "44%";
 
-export function KeyHintRow({ hints }: { hints: [string, string][] }) {
+const GLYPH_VALUES: ReadonlySet<string> = new Set<string>(Object.values(GLYPHS));
+
+export function isGlyph(value: string): boolean {
+  return GLYPH_VALUES.has(value);
+}
+
+export function KeyHintRow({ hints, justifyContent = "flex-end" }: { hints: [string, string][]; justifyContent?: string }) {
   return (
-    <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1 }}>
-      {hints.map(([key, label]) => (
-        <text key={key} fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-          <span fg={KEY_HINT}>{GLYPHS.enter === key || GLYPHS.esc === key ? key : key}</span>
+    <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: justifyContent as "flex-end" | "flex-start" | "center" }}>
+      {hints.map(([key, label], index) => (
+        <text key={`${index}:${key}`} fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
+          <span fg={KEY_HINT}>{key}</span>
           {` ${label}`}
         </text>
       ))}
     </box>
   );
 }
+
+export interface TextInputProps {
+  label: string;
+  value: string;
+  placeholder?: string | undefined;
+  onChange: (value: string) => void;
+  focused?: boolean | undefined;
+}
+
+export function TextInput({ label, value, placeholder, onChange, focused = true }: TextInputProps) {
+  return (
+    <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}>
+        {label}
+      </text>
+      <input
+        focused={focused}
+        value={value}
+        placeholder={placeholder ?? ""}
+        style={{ flexGrow: 1, marginLeft: 1 }}
+        onInput={onChange}
+        onChange={onChange}
+      />
+    </box>
+  );
+}
+
+export interface DialogFrameProps {
+  title: string;
+  tone: "accent" | "warning" | "danger" | "info" | "success" | "neutral";
+  height: number;
+  children: React.ReactNode;
+}
+
+export function DialogFrame({ title, tone, height, children }: DialogFrameProps) {
+  const palette = toneStyles(tone);
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: DIALOG_LEFT,
+        top: DIALOG_TOP,
+        width: DIALOG_WIDTH,
+        height,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: palette.border,
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title={title}
+    >
+      {children}
+    </box>
+  );
+}

package/src/app/components/resource-rows.tsx

@@ -67,7 +67,7 @@ export function ResourceRows({
             GLYPHS.dotEmpty;
 
           const hasActiveForward = activeForwardKeys.has(
-            `${resource.ref.kind.toLowerCase()}:${resource.ref.name}`
+            `${resource.ref.kind.toLowerCase()}:${resource.ref.namespace ?? "cluster"}:${resource.ref.name}`
           );
 
           // Metrics suffix

package/src/app/constants.ts

@@ -0,0 +1,24 @@
+// Polling intervals (milliseconds)
+export const POLL_CLUSTER_MS = 30_000;
+export const POLL_RESOURCE_MS = 5_000;
+export const POLL_METRICS_MS = 15_000;
+
+// UI
+export const TOAST_DURATION_MS = 4_000;
+export const INSPECTOR_MIN_WIDTH = 110;
+export const KIND_PANE_WIDTH = 34;
+export const INSPECTOR_PANE_WIDTH = 52;
+export const TRUNCATE_DEFAULT = 26;
+
+// Footer hint layout
+export const FOOTER_PADDING = 4;
+export const HINT_CELL_OVERHEAD = 3;
+
+// Notifications
+export const MAX_VISIBLE_NOTIFICATIONS = 3;
+export const NOTIFICATION_HISTORY_LIMIT = 50;
+export const NOTIFICATION_SLIDE_FRAMES = 6;
+export const NOTIFICATION_SLIDE_INTERVAL_MS = 30;
+export const NOTIFICATION_PROGRESS_INTERVAL_MS = 50;
+export const NOTIFICATION_WIDTH_PCT = "40%";
+

package/src/app/hooks/keyboard/filter-handlers.ts

@@ -1,4 +1,5 @@
 import type { AppAction } from "../../app-actions";
+import { isSlash } from "./keys";
 
 export function handleFilterKeys(
   key: { name: string; ctrl?: boolean; sequence?: string },
@@ -12,7 +13,7 @@ export function handleFilterKeys(
     return true;
   }
 
-  if (activePane === "resources" && (key.sequence === "/" || key.name === "slash")) {
+  if (activePane === "resources" && isSlash(key)) {
     setFilterMode(true);
     return true;
   }

package/src/app/hooks/keyboard/global-handlers.ts

@@ -1,7 +1,9 @@
 import { abortRunningProcesses } from "../../../lib/kubectl/spawn-utils";
+import { isHelmRelease } from "../../../lib/kubectl/kubectl-helpers";
 import type { AppAction } from "../../app-actions";
 import type { AppState, ResourceRef, ResourceKind, ResourceDetail, NotificationTone } from "../../../lib/k8s/types";
 import { statusLine } from "../../utils";
+import type { ToastOptions } from "../use-notifications";
 
 export function handleCtrlC(
   key: { name: string; ctrl?: boolean },
@@ -16,7 +18,7 @@ export function handleCtrlC(
 }
 
 export function handleGlobalHotkeys(
-  key: { name: string; shift?: boolean },
+  key: { name: string; shift?: boolean; sequence?: string },
   state: AppState,
   dispatch: React.Dispatch<AppAction>,
   activeResourceRef: ResourceRef | undefined,
@@ -27,7 +29,7 @@ export function handleGlobalHotkeys(
   visibleSelectedResourceName: string | undefined,
   setOverlayIndex: React.Dispatch<React.SetStateAction<number>>,
   openPortForwardOverlay: () => void,
-  toast: (tone: NotificationTone, message: string) => void,
+  toast: (tone: NotificationTone, message: string, options?: ToastOptions) => void,
   copyToClipboard: (text: string, label?: string) => void,
   setManualRefreshNonce: React.Dispatch<React.SetStateAction<number>>,
   setScaleReplicasInput: React.Dispatch<React.SetStateAction<string>>,
@@ -35,14 +37,14 @@ export function handleGlobalHotkeys(
   if (state.overlay) return false;
 
   // C → cluster switcher
-  if (key.name === "c") {
+  if (key.name === "c" && !key.shift) {
     dispatch({ type: "setOverlay", overlay: "cluster-switcher" });
     setOverlayIndex(Math.max(0, state.contexts.findIndex((context) => context.name === state.activeContext)));
     return true;
   }
 
   // N → namespace switcher
-  if (key.name === "n") {
+  if (key.name === "n" && !key.shift) {
     dispatch({ type: "setOverlay", overlay: "namespace-switcher" });
     setOverlayIndex(Math.max(0, state.namespaces.findIndex((namespace) => namespace.name === state.activeNamespace)));
     return true;
@@ -62,7 +64,7 @@ export function handleGlobalHotkeys(
   }
 
   // Y → yaml tab
-  if (key.name === "y") {
+  if (key.name === "y" && !key.shift) {
     if (state.inspectorTab === "yaml" && activeDetail?.yaml) {
       copyToClipboard(activeDetail.yaml, "YAML");
     } else {
@@ -71,22 +73,10 @@ export function handleGlobalHotkeys(
     return true;
   }
 
-  // V → events tab
-  if (key.name === "v") {
-    dispatch({ type: "setInspectorTab", tab: "events" });
-    return true;
-  }
-
-  // I → describe tab
-  if (key.name === "i") {
-    dispatch({ type: "setInspectorTab", tab: "describe" });
-    return true;
-  }
-
   // L → logs
-  if (key.name === "l") {
+  if (key.name === "l" && !key.shift) {
     if (activeResourceRef) {
-      if (activeResourceRef.kind.toLowerCase() === "helmreleases") {
+      if (isHelmRelease(activeResourceRef)) {
         dispatch({ type: "setStatusMessage", message: "Logs not supported for Helm releases" });
         return true;
       }
@@ -106,13 +96,13 @@ export function handleGlobalHotkeys(
   }
 
   // F → port-forward overlay
-  if (key.name === "f" && activeResourceRef && selectedKind && state.activeContext && ((activeDetail?.portForwards?.length ?? 0) > 0 || selectedResourcePortForwards.length > 0)) {
+  if (key.name === "f" && !key.shift && activeResourceRef && selectedKind && state.activeContext && ((activeDetail?.portForwards?.length ?? 0) > 0 || selectedResourcePortForwards.length > 0)) {
     openPortForwardOverlay();
     return true;
   }
 
   // D → delete confirm
-  if (key.name === "d" && selectedKind && state.activeContext && deleteTargets.length > 0) {
+  if (key.name === "d" && !key.shift && selectedKind && state.activeContext && deleteTargets.length > 0) {
     dispatch({ type: "setOverlay", overlay: "delete-confirm" });
     return true;
   }
@@ -130,5 +120,24 @@ export function handleGlobalHotkeys(
     return true;
   }
 
+  // Shift+N → notification history
+  if (key.shift && key.name === "n") {
+    dispatch({ type: "setOverlay", overlay: "notification-history" });
+    return true;
+  }
+
+  // Shift+F → port forward list
+  if (key.shift && key.name === "f") {
+    dispatch({ type: "setOverlay", overlay: "port-forward-list" });
+    setOverlayIndex(0);
+    return true;
+  }
+
+  // ? → help
+  if (key.sequence === "?" || (key.name === "slash" && key.shift)) {
+    dispatch({ type: "setOverlay", overlay: "help" });
+    return true;
+  }
+
   return false;
 }

package/src/app/hooks/keyboard/helm-handlers.ts

@@ -1,6 +1,8 @@
 import type { AppAction } from "../../app-actions";
 import type { AppState, ResourceRef, ResourceKind, ResourceDetail, NotificationTone } from "../../../lib/k8s/types";
+import { isHelmRelease } from "../../../lib/kubectl/kubectl-helpers";
 import { KubectlService } from "../../../lib/kubectl/kubectl-service";
+import type { ToastOptions } from "../use-notifications";
 
 export function handleHelmRollbackKeys(
   key: { name: string },
@@ -8,8 +10,8 @@ export function handleHelmRollbackKeys(
   dispatch: React.Dispatch<AppAction>,
   activeResourceRef: ResourceRef | undefined,
   kubectl: KubectlService,
-  toast: (tone: NotificationTone, message: string) => void,
-  toastError: (error: unknown) => void,
+  toast: (tone: NotificationTone, message: string, options?: ToastOptions) => void,
+  toastError: (error: unknown, options?: ToastOptions) => void,
   setManualRefreshNonce: React.Dispatch<React.SetStateAction<number>>,
 ): boolean {
   if (state.overlay !== "helm-rollback") return false;
@@ -19,7 +21,8 @@ export function handleHelmRollbackKeys(
     const namespace = state.activeNamespace;
     const name = activeResourceRef.name;
     const revisionStr = state.helmRollbackRevision.trim();
-    const revision = revisionStr ? Number.parseInt(revisionStr, 10) : undefined;
+    const parsedRevision = revisionStr ? Number.parseInt(revisionStr, 10) : undefined;
+    const revision = parsedRevision !== undefined && Number.isFinite(parsedRevision) ? parsedRevision : undefined;
 
     dispatch({ type: "setOverlay", overlay: undefined });
     dispatch({
@@ -33,7 +36,9 @@ export function handleHelmRollbackKeys(
         toast("success", `${name} rolled back${revision !== undefined ? ` to r${revision}` : ""}`);
         setManualRefreshNonce((current) => current + 1);
       })
-      .catch(toastError);
+      .catch((error: unknown) => {
+        toastError(error, { actions: [{ label: "retry", onAction: () => { void kubectl.helmRollback({ context, namespace, name, revision }).then(() => setManualRefreshNonce((c) => c + 1)).catch(toastError); } }] });
+      });
 
     return true;
   }
@@ -55,21 +60,21 @@ export function handleHelmUpgradeKeys(
   selectedKind: ResourceKind | undefined,
   activeDetail: ResourceDetail | undefined,
   kubectl: KubectlService,
-  toast: (tone: NotificationTone, message: string) => void,
-  toastError: (error: unknown) => void,
+  toast: (tone: NotificationTone, message: string, options?: ToastOptions) => void,
+  toastError: (error: unknown, options?: ToastOptions) => void,
   setManualRefreshNonce: React.Dispatch<React.SetStateAction<number>>,
 ): boolean {
   if (state.overlay) return false;
 
   // B → Helm rollback overlay
-  if (key.name === "b" && activeResourceRef?.kind.toLowerCase() === "helmreleases" && state.activeContext) {
+  if (key.name === "b" && isHelmRelease(activeResourceRef) && state.activeContext) {
     dispatch({ type: "setHelmRollbackRevision", value: "" });
     dispatch({ type: "setOverlay", overlay: "helm-rollback" });
     return true;
   }
 
   // U → Helm upgrade --reuse-values
-  if (key.name === "u" && activeResourceRef?.kind.toLowerCase() === "helmreleases" && selectedKind && state.activeContext) {
+  if (key.name === "u" && isHelmRelease(activeResourceRef) && selectedKind && state.activeContext) {
     const chartName = activeDetail?.helmChart ?? "";
     if (!chartName) {
       dispatch({ type: "setStatusMessage", message: "Chart name unavailable — load the detail pane first" });
@@ -95,7 +100,7 @@ export function handleHelmUpgradeKeys(
     });
     upgradeChild.on("error", (err) => {
       renderer.resume();
-      toastError(err);
+      toastError(err, { actions: [{ label: "retry", onAction: () => { kubectl.helmUpgrade({ context, namespace, name: target.name, chart: chartName }); } }] });
     });
     return true;
   }

package/src/app/hooks/keyboard/keys.ts

@@ -0,0 +1,18 @@
+export interface KeyEvent {
+  name: string;
+  shift?: boolean;
+  ctrl?: boolean;
+  sequence?: string;
+}
+
+export function isUp(key: KeyEvent): boolean {
+  return key.name === "up" || key.name === "k";
+}
+
+export function isDown(key: KeyEvent): boolean {
+  return key.name === "down" || key.name === "j";
+}
+
+export function isSlash(key: KeyEvent): boolean {
+  return key.sequence === "/" || key.name === "slash";
+}

package/src/app/hooks/keyboard/logs-handlers.ts

@@ -3,6 +3,7 @@ import type { ScrollBoxRenderable } from "@opentui/core";
 import type { AppAction } from "../../app-actions";
 import type { AppState } from "../../../lib/k8s/types";
 import type { LogsDialogActions } from "../../components/overlays";
+import { isSlash } from "./keys";
 
 export function handleLogsKeys(
   key: { name: string; shift?: boolean; sequence?: string },
@@ -54,7 +55,7 @@ export function handleLogsKeys(
     } else if (key.name === "s") {
       setLogsInputMode("since");
       setLogsInputValue(state.logsOptions.since ?? "");
-    } else if (key.sequence === "/" || key.name === "slash") {
+    } else if (isSlash(key)) {
       setLogsSearchMode(true);
     } else if (key.name === "n" && !key.shift) {
       logsActionsRef.current?.nextMatch();
@@ -74,6 +75,7 @@ export function handleLogsKeys(
     setLogsInputValue("");
   } else if (logsSearchMode && key.name === "return") {
     setLogsSearchMode(false);
+    setLogsSearchText("");
   }
 
   return true;

package/src/app/hooks/keyboard/navigation-handlers.ts

@@ -1,5 +1,6 @@
 import type { AppAction } from "../../app-actions";
 import { INSPECTOR_TABS } from "../../components/inspector";
+import { isDown, isUp } from "./keys";
 import type { AppState, ResourceKind, ResourceListItem } from "../../../lib/k8s/types";
 
 export function handlePaneNavigation(
@@ -18,7 +19,7 @@ export function handlePaneNavigation(
   if (state.activePane === "clusters") {
     const currentIndex = Math.max(0, state.resourceKinds.findIndex((kind) => kind.name === state.selectedKind));
 
-    if ((key.name === "up" || key.name === "k") && currentIndex > 0) {
+    if (isUp(key) && currentIndex > 0) {
       const nextKind = state.resourceKinds[currentIndex - 1];
       if (nextKind) {
         dispatch({ type: "setSelectedKind", kind: nextKind.name });
@@ -26,7 +27,7 @@ export function handlePaneNavigation(
       return true;
     }
 
-    if ((key.name === "down" || key.name === "j") && currentIndex < state.resourceKinds.length - 1) {
+    if (isDown(key) && currentIndex < state.resourceKinds.length - 1) {
       const nextKind = state.resourceKinds[currentIndex + 1];
       if (nextKind) {
         dispatch({ type: "setSelectedKind", kind: nextKind.name });
@@ -49,7 +50,7 @@ export function handlePaneNavigation(
       filteredResources.findIndex((resource) => resource.ref.name === visibleSelectedResourceName),
     );
 
-    if ((key.name === "up" || key.name === "k") && currentIndex > 0) {
+    if (isUp(key) && currentIndex > 0) {
       const nextResource = filteredResources[currentIndex - 1];
       if (nextResource) {
         dispatch({ type: "setSelectedResourceName", name: nextResource.ref.name });
@@ -57,7 +58,7 @@ export function handlePaneNavigation(
       return true;
     }
 
-    if ((key.name === "down" || key.name === "j") && currentIndex < filteredResources.length - 1) {
+    if (isDown(key) && currentIndex < filteredResources.length - 1) {
       const nextResource = filteredResources[currentIndex + 1];
       if (nextResource) {
         dispatch({ type: "setSelectedResourceName", name: nextResource.ref.name });

package/src/app/hooks/keyboard/overlay-handlers.ts

@@ -2,6 +2,8 @@ import type { AppAction } from "../../app-actions";
 import type { AppState, ResourceListItem, ResourceKind, ResourceRef } from "../../../lib/k8s/types";
 import { deleteStatusMessage, statusLine } from "../../utils";
 import { KubectlService } from "../../../lib/kubectl/kubectl-service";
+import { isDown, isUp } from "./keys";
+import type { ToastOptions } from "../use-notifications";
 
 export function handleGenericEscape(
   key: { name: string },
@@ -31,17 +33,19 @@ export function handleOverlayNavigation(
       ? state.contexts
       : state.overlay === "namespace-switcher"
         ? state.namespaces
-        : state.overlay === "container-picker"
-          ? []
-          : [];
+        : state.overlay === "port-forward-list"
+          ? state.activePortForwards
+          : state.overlay === "container-picker"
+            ? []
+            : [];
 
-  if (key.name === "up") {
+  if (isUp(key)) {
     setOverlayIndex((current) => Math.max(0, current - 1));
     return true;
   }
 
-  if (key.name === "down") {
-    setOverlayIndex((current) => Math.min(items.length - 1, current + 1));
+  if (isDown(key)) {
+    setOverlayIndex((current) => Math.max(0, Math.min(items.length - 1, current + 1)));
     return true;
   }
 
@@ -79,7 +83,7 @@ export function handleDeleteConfirm(
   selectedKind: ResourceKind | undefined,
   deleteTargets: ResourceListItem[],
   kubectl: KubectlService,
-  toastError: (error: unknown) => void,
+  toastError: (error: unknown, options?: ToastOptions) => void,
   setManualRefreshNonce: React.Dispatch<React.SetStateAction<number>>,
 ): boolean {
   if (state.overlay !== "delete-confirm") return false;