openk8s 0.0.1 → 1.0.0

package/src/app/hooks/use-app-keyboard.ts

@@ -0,0 +1,723 @@
+import { useKeyboard, useRenderer } from "@opentui/react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { unlinkSync, writeFileSync } from "node:fs";
+import { spawn } from "node:child_process";
+import type { ChildProcess } from "node:child_process";
+
+import type { AppAction } from "../app-state";
+import type { AppState } from "../../lib/k8s/types";
+import type {
+  ActivePortForward,
+  NotificationTone,
+  ResourceDetail,
+  ResourceKind,
+  ResourceListItem,
+  ResourceRef,
+} from "../../lib/k8s/types";
+import type { LogsDialogActions } from "../components/overlays";
+import type { StartPortForwardLifecycleOptions } from "../utils";
+import { buildPortForwardEntries } from "../components/overlays";
+import {
+  deleteStatusMessage,
+  parseLocalPort,
+  statusLine,
+} from "../utils";
+import { KubectlService } from "../../lib/kubectl/kubectl-service";
+import { INSPECTOR_TABS } from "../components/inspector";
+
+type Renderer = ReturnType<typeof useRenderer>;
+
+export function useAppKeyboard(
+  state: AppState,
+  dispatch: React.Dispatch<AppAction>,
+  renderer: Renderer,
+  filteredResources: ResourceListItem[],
+  visibleSelectedResourceName: string | undefined,
+  activeDetail: ResourceDetail | undefined,
+  activeResourceRef: ResourceRef | undefined,
+  activeLogsRef: { kind: string; name: string; namespaced: boolean } | undefined,
+  selectedKind: ResourceKind | undefined,
+  deleteTargets: ResourceListItem[],
+  selectedResourcePortForwards: ActivePortForward[],
+  portForwardProcessesRef: React.MutableRefObject<Map<string, ChildProcess>>,
+  kubectl: KubectlService,
+  filterMode: boolean,
+  overlayIndex: number,
+  portForwardLocalPort: string,
+  scaleReplicasInput: string,
+  logsInputMode: "tail" | "since" | undefined,
+  logsInputValue: string,
+  logsSearchMode: boolean,
+  setOverlayIndex: React.Dispatch<React.SetStateAction<number>>,
+  setFilterMode: React.Dispatch<React.SetStateAction<boolean>>,
+  setPortForwardLocalPort: React.Dispatch<React.SetStateAction<string>>,
+  setScaleReplicasInput: React.Dispatch<React.SetStateAction<string>>,
+  setLogsInputMode: React.Dispatch<React.SetStateAction<"tail" | "since" | undefined>>,
+  setLogsInputValue: React.Dispatch<React.SetStateAction<string>>,
+  setLogsSearchMode: React.Dispatch<React.SetStateAction<boolean>>,
+  setLogsSearchText: React.Dispatch<React.SetStateAction<string>>,
+  setManualRefreshNonce: React.Dispatch<React.SetStateAction<number>>,
+  stopPortForward: (id: string) => void,
+  startPortForward: (options: StartPortForwardLifecycleOptions) => void,
+  openPortForwardOverlay: () => void,
+  toast: (tone: NotificationTone, message: string) => void,
+  toastError: (error: unknown) => void,
+  copyToClipboard: (text: string, label?: string) => void,
+  handleToggleReveal: (id: string) => void,
+  logsScrollRef: React.MutableRefObject<ScrollBoxRenderable | null>,
+  logsActionsRef: React.MutableRefObject<LogsDialogActions | null>,
+) {
+  useKeyboard((key) => {
+    // Exit immediately on Ctrl+C — one press, no ambiguity
+    if (key.ctrl && key.name === "c") {
+      renderer.destroy();
+      return;
+    }
+
+    if (key.name === "tab") {
+      dispatch({ type: "cyclePane", direction: key.shift ? -1 : 1 });
+      return;
+    }
+
+    if (filterMode && key.name === "escape") {
+      setFilterMode(false);
+      return;
+    }
+
+    // Port-forward overlay: ESC closes; Up/Down navigate port list; Enter starts; X stops
+    if (state.overlay === "port-forward") {
+      if (key.name === "escape") {
+        dispatch({ type: "setOverlay", overlay: undefined });
+        return;
+      }
+      const pfEntries = buildPortForwardEntries(activeDetail?.portForwards ?? [], selectedResourcePortForwards);
+      if (key.name === "up" || key.name === "k") {
+        const newIndex = Math.max(0, overlayIndex - 1);
+        setOverlayIndex(newIndex);
+        const entry = pfEntries[newIndex];
+        if (entry && !entry.activeForward) {
+          setPortForwardLocalPort(String(entry.suggestedLocalPort));
+        }
+        return;
+      }
+      if (key.name === "down" || key.name === "j") {
+        const newIndex = Math.min(Math.max(0, pfEntries.length - 1), overlayIndex + 1);
+        setOverlayIndex(newIndex);
+        const entry = pfEntries[newIndex];
+        if (entry && !entry.activeForward) {
+          setPortForwardLocalPort(String(entry.suggestedLocalPort));
+        }
+        return;
+      }
+      const selectedEntry = pfEntries[overlayIndex];
+      if (key.name === "x" && selectedEntry?.activeForward) {
+        stopPortForward(selectedEntry.activeForward.id);
+        return;
+      }
+      if (key.name === "return" && activeResourceRef && selectedKind && state.activeContext && selectedEntry && !selectedEntry.activeForward) {
+        const localPort = parseLocalPort(portForwardLocalPort) ?? selectedEntry.suggestedLocalPort;
+        startPortForward({
+          context: state.activeContext,
+          namespace: state.activeNamespace,
+          target: activeResourceRef,
+          namespaced: selectedKind.namespaced,
+          localPort,
+          remotePort: selectedEntry.remotePort,
+        });
+      }
+      return;
+    }
+
+    // Scale overlay: Enter confirms, everything else is swallowed
+    if (state.overlay === "scale") {
+      if (key.name === "return" && activeResourceRef && selectedKind && state.activeContext) {
+        const replicas = Number.parseInt(scaleReplicasInput, 10);
+
+        if (!Number.isNaN(replicas) && replicas >= 0) {
+          const context = state.activeContext;
+          const namespace = state.activeNamespace;
+          const namespaced = selectedKind.namespaced;
+          const target = activeResourceRef;
+
+          dispatch({ type: "setStatusMessage", message: `Scaling ${statusLine({ ref: target })} to ${replicas}` });
+          dispatch({ type: "setError", error: undefined });
+          dispatch({ type: "setOverlay", overlay: undefined });
+
+          void kubectl
+            .scaleResource({ context, namespace, resourceRef: target, namespaced, replicas })
+            .then(() => {
+              dispatch({
+                type: "setStatusMessage",
+                message: `Scaled ${statusLine({ ref: target })} to ${replicas}`,
+              });
+              setManualRefreshNonce((current) => current + 1);
+            })
+            .catch((error: unknown) => {
+              toastError(error);
+              dispatch({
+                type: "setStatusMessage",
+                message: `Scale failed for ${statusLine({ ref: target })}`,
+              });
+            });
+        }
+      }
+      return;
+    }
+
+    // Logs overlay: multi-level ESC, scroll, and option/search hotkeys
+    // This block must come BEFORE the generic escape so multi-level ESC works correctly.
+    if (state.overlay === "logs") {
+      if (key.name === "escape") {
+        if (logsInputMode !== undefined) {
+          setLogsInputMode(undefined);
+          setLogsInputValue("");
+          return;
+        }
+        if (logsSearchMode) {
+          setLogsSearchMode(false);
+          setLogsSearchText("");
+          return;
+        }
+        // Fall through to generic escape below, which closes the overlay
+      } else {
+        // All non-escape keys are handled then swallowed
+        if (!logsInputMode && !logsSearchMode) {
+          if (key.name === "up" || key.name === "k") {
+            logsScrollRef.current?.scrollBy(-3);
+          } else if (key.name === "down" || key.name === "j") {
+            logsScrollRef.current?.scrollBy(3);
+          } else if (key.name === "c") {
+            const containers = activeDetail?.containers ?? [];
+            if (containers.length > 1) {
+              setOverlayIndex(0);
+              dispatch({ type: "setOverlay", overlay: "container-picker" });
+            }
+          } else if (key.name === "p") {
+            dispatch({ type: "setLogsOptions", options: { ...state.logsOptions, previous: !state.logsOptions.previous } });
+          } else if (key.name === "t") {
+            setLogsInputMode("tail");
+            setLogsInputValue(String(state.logsOptions.tail));
+          } else if (key.name === "s") {
+            setLogsInputMode("since");
+            setLogsInputValue(state.logsOptions.since ?? "");
+          } else if (key.sequence === "/" || key.name === "slash") {
+            setLogsSearchMode(true);
+          } else if (key.name === "n" && !key.shift) {
+            logsActionsRef.current?.nextMatch();
+          } else if (key.shift && key.name === "n") {
+            logsActionsRef.current?.prevMatch();
+          }
+        } else if (logsInputMode && key.name === "return") {
+          if (logsInputMode === "tail") {
+            const tail = Number.parseInt(logsInputValue, 10);
+            if (!Number.isNaN(tail) && tail > 0) {
+              dispatch({ type: "setLogsOptions", options: { ...state.logsOptions, tail } });
+            }
+          } else if (logsInputMode === "since") {
+            dispatch({ type: "setLogsOptions", options: { ...state.logsOptions, since: logsInputValue || undefined } });
+          }
+          setLogsInputMode(undefined);
+          setLogsInputValue("");
+        } else if (logsSearchMode && key.name === "return") {
+          setLogsSearchMode(false);
+        }
+        return;
+      }
+    }
+
+    // Helm rollback overlay: Enter confirms, ESC closes
+    if (state.overlay === "helm-rollback") {
+      if (key.name === "return" && activeResourceRef && state.activeContext) {
+        const context = state.activeContext;
+        const namespace = state.activeNamespace;
+        const name = activeResourceRef.name;
+        const revisionStr = state.helmRollbackRevision.trim();
+        const revision = revisionStr ? Number.parseInt(revisionStr, 10) : undefined;
+
+        dispatch({ type: "setOverlay", overlay: undefined });
+        dispatch({
+          type: "setStatusMessage",
+          message: `Rolling back ${name}${revision !== undefined ? ` to r${revision}` : " to previous"}`,
+        });
+
+        void kubectl
+          .helmRollback({ context, namespace, name, revision })
+          .then(() => {
+            toast("success", `${name} rolled back${revision !== undefined ? ` to r${revision}` : ""}`);
+            setManualRefreshNonce((current) => current + 1);
+          })
+          .catch(toastError);
+      }
+      if (key.name === "escape") {
+        dispatch({ type: "setOverlay", overlay: undefined });
+      }
+      return;
+    }
+
+    if (key.name === "escape") {
+      if (state.overlay) {
+        dispatch({ type: "setOverlay", overlay: undefined });
+      }
+      return;
+    }
+
+    // Generic list-overlay navigation (cluster-switcher, namespace-switcher, container-picker)
+    if (state.overlay) {
+      const items: Array<unknown> =
+        state.overlay === "cluster-switcher"
+          ? state.contexts
+          : state.overlay === "namespace-switcher"
+            ? state.namespaces
+            : state.overlay === "container-picker"
+              ? (activeDetail?.containers ?? [])
+              : [];
+
+      if (key.name === "up") {
+        setOverlayIndex((current) => Math.max(0, current - 1));
+        return;
+      }
+
+      if (key.name === "down") {
+        setOverlayIndex((current) => Math.min(items.length - 1, current + 1));
+        return;
+      }
+
+      if (state.overlay === "delete-confirm") {
+        if (key.name === "return" && selectedKind && state.activeContext && deleteTargets.length > 0) {
+          const context = state.activeContext;
+          const namespace = state.activeNamespace;
+          const namespaced = selectedKind.namespaced;
+          const targets = deleteTargets.map((resource) => resource.ref);
+
+          dispatch({ type: "setStatusMessage", message: deleteStatusMessage(targets, "Deleting") });
+
+          void Promise.all(
+            targets.map((target) => kubectl.deleteResource({ context, namespace, resourceRef: target, namespaced })),
+          )
+            .then(() => {
+              dispatch({ type: "clearTransientViews" });
+              dispatch({ type: "setSelectedResourceDetail", detail: undefined });
+              dispatch({ type: "setSelectedResourceName", name: undefined });
+              dispatch({ type: "clearSelectedResources" });
+              dispatch({ type: "setError", error: undefined });
+              dispatch({ type: "setStatusMessage", message: deleteStatusMessage(targets, "Deleted") });
+              setManualRefreshNonce((current) => current + 1);
+            })
+            .catch((error: unknown) => {
+              toastError(error);
+              dispatch({ type: "setStatusMessage", message: deleteStatusMessage(targets, "Delete failed for") });
+            });
+
+          dispatch({ type: "setOverlay", overlay: undefined });
+        }
+        return;
+      }
+
+      if (key.name === "return") {
+        if (state.overlay === "container-picker") {
+          const container = (activeDetail?.containers ?? [])[overlayIndex];
+          if (container !== undefined) {
+            dispatch({ type: "setLogsContainer", container });
+          }
+          dispatch({ type: "setOverlay", overlay: "logs" });
+          return;
+        }
+
+        if (state.overlay === "cluster-switcher") {
+          const selectedContext = state.contexts[overlayIndex];
+          if (selectedContext) {
+            dispatch({ type: "setActiveContext", activeContext: selectedContext.name });
+          }
+        }
+
+        if (state.overlay === "namespace-switcher") {
+          const selectedNamespace = state.namespaces[overlayIndex];
+          if (selectedNamespace) {
+            dispatch({ type: "setActiveNamespace", namespace: selectedNamespace.name });
+          }
+        }
+
+        dispatch({ type: "setOverlay", overlay: undefined });
+      }
+      return;
+    }
+
+    // Filter mode input
+    if (state.activePane === "resources" && (key.sequence === "/" || key.name === "slash")) {
+      setFilterMode(true);
+      return;
+    }
+
+    if (filterMode && state.activePane === "resources") {
+      if (key.ctrl && key.name === "u") {
+        dispatch({ type: "setResourceFilter", value: "" });
+        return;
+      }
+
+      if (key.name === "return") {
+        setFilterMode(false);
+        return;
+      }
+
+      return;
+    }
+
+    if (state.activePane === "resources" && !filterMode && key.ctrl && key.name === "u") {
+      dispatch({ type: "setResourceFilter", value: "" });
+      return;
+    }
+
+    // Global hotkeys
+    if (key.name === "c") {
+      dispatch({ type: "setOverlay", overlay: "cluster-switcher" });
+      setOverlayIndex(Math.max(0, state.contexts.findIndex((context) => context.name === state.activeContext)));
+      return;
+    }
+
+    if (key.name === "n") {
+      dispatch({ type: "setOverlay", overlay: "namespace-switcher" });
+      setOverlayIndex(Math.max(0, state.namespaces.findIndex((namespace) => namespace.name === state.activeNamespace)));
+      return;
+    }
+
+    if (key.name === "r" && !key.shift) {
+      toast("info", "Refreshing current view");
+      setManualRefreshNonce((current) => current + 1);
+      return;
+    }
+
+    if (key.name === "s" && !key.shift) {
+      dispatch({ type: "setInspectorTab", tab: "summary" });
+      return;
+    }
+
+    if (key.name === "y") {
+      // y when already on yaml tab → copy full YAML to clipboard
+      if (state.inspectorTab === "yaml" && activeDetail?.yaml) {
+        copyToClipboard(activeDetail.yaml, "YAML");
+      } else {
+        dispatch({ type: "setInspectorTab", tab: "yaml" });
+      }
+      return;
+    }
+
+    if (key.name === "v") {
+      dispatch({ type: "setInspectorTab", tab: "events" });
+      return;
+    }
+
+    if (key.name === "i") {
+      dispatch({ type: "setInspectorTab", tab: "describe" });
+      return;
+    }
+
+    // B → Helm rollback overlay (helmreleases only)
+    if (key.name === "b" && activeResourceRef?.kind.toLowerCase() === "helmreleases" && state.activeContext) {
+      dispatch({ type: "setHelmRollbackRevision", value: "" });
+      dispatch({ type: "setOverlay", overlay: "helm-rollback" });
+      return;
+    }
+
+    // U → Helm upgrade --reuse-values (helmreleases only)
+    if (key.name === "u" && activeResourceRef?.kind.toLowerCase() === "helmreleases" && selectedKind && state.activeContext) {
+      const chartName = activeDetail?.helmChart ?? "";
+      if (!chartName) {
+        dispatch({ type: "setStatusMessage", message: "Chart name unavailable — load the detail pane first" });
+        return;
+      }
+      const context = state.activeContext;
+      const namespace = state.activeNamespace;
+      const target = activeResourceRef;
+
+      dispatch({ type: "setStatusMessage", message: `Upgrading ${target.name}` });
+      dispatch({ type: "setError", error: undefined });
+      renderer.suspend();
+
+      const upgradeChild = kubectl.helmUpgrade({ context, namespace, name: target.name, chart: chartName });
+      upgradeChild.on("close", (code) => {
+        renderer.resume();
+        if (code === 0) {
+          toast("success", `${target.name} upgraded`);
+          setManualRefreshNonce((current) => current + 1);
+        } else {
+          dispatch({ type: "setStatusMessage", message: `Upgrade failed for ${target.name}` });
+        }
+      });
+      upgradeChild.on("error", (err) => {
+        renderer.resume();
+        toastError(err);
+      });
+      return;
+    }
+
+    if (key.name === "l") {
+      if (activeResourceRef) {
+        if (activeResourceRef.kind.toLowerCase() === "helmreleases") {
+          dispatch({ type: "setStatusMessage", message: "Logs not supported for Helm releases" });
+          return;
+        }
+        const containers = activeDetail?.containers ?? [];
+        if (containers.length > 1 && !state.logsContainer) {
+          setOverlayIndex(0);
+          dispatch({ type: "setOverlay", overlay: "container-picker" });
+        } else {
+          dispatch({ type: "setOverlay", overlay: "logs" });
+        }
+        dispatch({
+          type: "setStatusMessage",
+          message: `Showing logs for ${statusLine({ ref: activeResourceRef })}`,
+        });
+      }
+      return;
+    }
+
+    if (key.name === "f" && activeResourceRef && selectedKind && state.activeContext && ((activeDetail?.portForwards?.length ?? 0) > 0 || selectedResourcePortForwards.length > 0)) {
+      openPortForwardOverlay();
+      return;
+    }
+
+    if (key.name === "d" && selectedKind && state.activeContext && deleteTargets.length > 0) {
+      dispatch({ type: "setOverlay", overlay: "delete-confirm" });
+      return;
+    }
+
+    if (state.activePane === "resources" && !filterMode && key.name === "space" && visibleSelectedResourceName) {
+      dispatch({ type: "toggleSelectedResource", name: visibleSelectedResourceName });
+      return;
+    }
+
+    if (key.name === "x" && activeResourceRef && selectedKind && state.activeContext) {
+      if (activeResourceRef.kind.toLowerCase() === "helmreleases") {
+        dispatch({ type: "setStatusMessage", message: "Shell not supported for Helm releases" });
+        return;
+      }
+      dispatch({ type: "setStatusMessage", message: `Opening shell in ${statusLine({ ref: activeResourceRef })}` });
+      dispatch({ type: "setError", error: undefined });
+      renderer.suspend();
+
+      const context = state.activeContext;
+      const namespace = state.activeNamespace;
+      const namespaced = selectedKind.namespaced;
+      const target = activeResourceRef;
+
+      const child = kubectl.startShell({ context, namespace, resourceRef: target, namespaced });
+      child.on("close", () => {
+        renderer.resume();
+        dispatch({ type: "setError", error: undefined });
+        dispatch({ type: "setStatusMessage", message: `Returned from shell in ${statusLine({ ref: target })}` });
+        setManualRefreshNonce((current) => current + 1);
+      });
+      child.on("error", (error) => {
+        renderer.resume();
+        toastError(error);
+        dispatch({ type: "setStatusMessage", message: `Shell failed for ${statusLine({ ref: target })}` });
+      });
+      return;
+    }
+
+    // E → edit resource (kubectl edit) or edit helm values ($EDITOR + helm upgrade)
+    if (key.name === "e" && !key.shift && activeResourceRef && selectedKind && state.activeContext) {
+      const context = state.activeContext;
+      const namespace = state.activeNamespace;
+      const namespaced = selectedKind.namespaced;
+      const target = activeResourceRef;
+      const isHelm = target.kind.toLowerCase() === "helmreleases";
+
+      if (isHelm) {
+        const chartName = activeDetail?.helmChart ?? "";
+        const values = activeDetail?.yaml ?? "";
+        const tmpPath = `/tmp/openk8s-${target.name}-${Date.now()}.yaml`;
+        const cleanupTmp = (): void => { try { unlinkSync(tmpPath); } catch { /* ignore */ } };
+
+        if (!chartName) {
+          dispatch({ type: "setStatusMessage", message: "Chart name unavailable — load the detail pane first" });
+          return;
+        }
+
+        try {
+          writeFileSync(tmpPath, values, "utf8");
+        } catch (err) {
+          toastError(err);
+          return;
+        }
+
+        dispatch({ type: "setStatusMessage", message: `Editing values for ${target.name}` });
+        dispatch({ type: "setError", error: undefined });
+        renderer.suspend();
+
+        const editor = process.env.EDITOR ?? process.env.VISUAL ?? "vi";
+        const editorChild = spawn(editor, [tmpPath], { env: process.env, stdio: "inherit" });
+
+        editorChild.on("close", (code) => {
+          if (code === 0) {
+            kubectl
+              .helmUpgradeValues({ context, namespace, name: target.name, chart: chartName, valuesFile: tmpPath })
+              .then(() => {
+                renderer.resume();
+                toast("success", `${target.name} upgraded`);
+                setManualRefreshNonce((current) => current + 1);
+              })
+              .catch((err: unknown) => {
+                renderer.resume();
+                toastError(err);
+              })
+              .finally(cleanupTmp);
+          } else {
+            renderer.resume();
+            dispatch({ type: "setStatusMessage", message: "Edit cancelled" });
+            cleanupTmp();
+          }
+        });
+
+        editorChild.on("error", (err) => {
+          renderer.resume();
+          toastError(err);
+          cleanupTmp();
+        });
+      } else {
+        dispatch({ type: "setStatusMessage", message: `Editing ${statusLine({ ref: target })}` });
+        dispatch({ type: "setError", error: undefined });
+        renderer.suspend();
+
+        const editChild = kubectl.editResource({ context, namespace, resourceRef: target, namespaced });
+
+        editChild.on("close", (code) => {
+          renderer.resume();
+          if (code === 0) {
+            dispatch({ type: "setStatusMessage", message: `Saved ${statusLine({ ref: target })}` });
+            setManualRefreshNonce((current) => current + 1);
+          } else if (code !== null) {
+            dispatch({ type: "setStatusMessage", message: `Edit cancelled for ${statusLine({ ref: target })}` });
+          }
+        });
+
+        editChild.on("error", (err) => {
+          renderer.resume();
+          toastError(err);
+          dispatch({ type: "setStatusMessage", message: `Edit failed for ${statusLine({ ref: target })}` });
+        });
+      }
+      return;
+    }
+
+    // Shift+S → scale dialog
+    if (key.shift && key.name === "s" && activeResourceRef && selectedKind && state.activeContext && kubectl.canScale(activeResourceRef)) {
+      setScaleReplicasInput(activeDetail?.replicas !== undefined ? String(activeDetail.replicas) : "");
+      dispatch({ type: "setOverlay", overlay: "scale" });
+      return;
+    }
+
+    // Shift+R → rollout restart (direct, no overlay); always captured to provide feedback
+    if (key.shift && key.name === "r") {
+      if (activeResourceRef && selectedKind && state.activeContext && kubectl.canRolloutRestart(activeResourceRef)) {
+        const context = state.activeContext;
+        const namespace = state.activeNamespace;
+        const namespaced = selectedKind.namespaced;
+        const target = activeResourceRef;
+
+        dispatch({ type: "setStatusMessage", message: `Restarting ${statusLine({ ref: target })}` });
+        dispatch({ type: "setError", error: undefined });
+
+        void kubectl
+          .rolloutRestart({ context, namespace, resourceRef: target, namespaced })
+          .then(() => {
+            dispatch({ type: "setStatusMessage", message: `Restarted ${statusLine({ ref: target })}` });
+            setManualRefreshNonce((current) => current + 1);
+          })
+          .catch((error: unknown) => {
+            toastError(error);
+            dispatch({
+              type: "setStatusMessage",
+              message: `Rollout restart failed for ${statusLine({ ref: target })}`,
+            });
+          });
+      } else {
+        dispatch({ type: "setStatusMessage", message: "Rollout restart not supported for this resource" });
+      }
+      return;
+    }
+
+    // Pane navigation
+    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) {
+        const nextKind = state.resourceKinds[currentIndex - 1];
+        if (nextKind) {
+          dispatch({ type: "setSelectedKind", kind: nextKind.name });
+        }
+        return;
+      }
+
+      if ((key.name === "down" || key.name === "j") && currentIndex < state.resourceKinds.length - 1) {
+        const nextKind = state.resourceKinds[currentIndex + 1];
+        if (nextKind) {
+          dispatch({ type: "setSelectedKind", kind: nextKind.name });
+        }
+        return;
+      }
+
+      if (key.name === "right") {
+        dispatch({ type: "setActivePane", pane: "resources" });
+        return;
+      }
+    }
+
+    if (state.activePane === "resources") {
+      const currentIndex = Math.max(
+        0,
+        filteredResources.findIndex((resource) => resource.ref.name === visibleSelectedResourceName),
+      );
+
+      if ((key.name === "up" || key.name === "k") && currentIndex > 0) {
+        const nextResource = filteredResources[currentIndex - 1];
+        if (nextResource) {
+          dispatch({ type: "setSelectedResourceName", name: nextResource.ref.name });
+        }
+        return;
+      }
+
+      if ((key.name === "down" || key.name === "j") && currentIndex < filteredResources.length - 1) {
+        const nextResource = filteredResources[currentIndex + 1];
+        if (nextResource) {
+          dispatch({ type: "setSelectedResourceName", name: nextResource.ref.name });
+        }
+        return;
+      }
+
+      if (key.name === "left" || key.name === "h") {
+        dispatch({ type: "setActivePane", pane: "clusters" });
+        return;
+      }
+
+      if (key.name === "right") {
+        dispatch({ type: "setActivePane", pane: "inspector" });
+        return;
+      }
+    }
+
+    if (state.activePane === "inspector") {
+      // left/right (and h) navigate between tabs; left on first tab → back to resources pane
+      if (key.name === "left" || key.name === "h") {
+        const currentIndex = INSPECTOR_TABS.findIndex((tab) => tab.id === state.inspectorTab);
+        if (currentIndex > 0) {
+          const prevTab = INSPECTOR_TABS[currentIndex - 1];
+          if (prevTab) dispatch({ type: "setInspectorTab", tab: prevTab.id });
+        } else {
+          dispatch({ type: "setActivePane", pane: "resources" });
+        }
+        return;
+      }
+
+      if (key.name === "right") {
+        const currentIndex = INSPECTOR_TABS.findIndex((tab) => tab.id === state.inspectorTab);
+        const nextTab = INSPECTOR_TABS[currentIndex + 1];
+        if (nextTab) {
+          dispatch({ type: "setInspectorTab", tab: nextTab.id });
+        }
+        return;
+      }
+      // up/down are NOT intercepted here — they fall through to the focused scrollbox
+    }
+  });
+}