openk8s 0.0.1 → 1.0.0

package/src/app/app.tsx

@@ -0,0 +1,708 @@
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { useRenderer, useTerminalDimensions } from "@opentui/react";
+import { useCallback, useMemo, useReducer, useRef, useState } from "react";
+
+import { DEFAULT_NAMESPACE, initialState, reducer } from "./app-state";
+import { loadPersistedState } from "./persistence";
+import {
+  FILTER_BACKGROUND,
+  GLYPHS,
+  INSPECTOR_SURFACE,
+  KEY_HINT,
+  NAV_SURFACE,
+  PANEL_BORDER,
+  PANEL_BORDER_ACTIVE,
+  RESOURCE_SURFACE,
+  SURFACE,
+  SURFACE_ACCENT,
+  TEXT_MUTED,
+  TEXT_PRIMARY,
+  TEXT_SUBTLE,
+  paneBorder,
+  toneStyles,
+} from "./theme";
+import {
+  currentKindLabel,
+  filterResources,
+  nextVisibleResourceName,
+  resourcePreview,
+  selectedForwardsForRef,
+  selectedRef,
+  statusLine,
+} from "./utils";
+import { usePollingTick } from "./use-polling-tick";
+import { InspectorBody, InspectorTabs, INSPECTOR_TABS } from "./components/inspector";
+import { KindRows } from "./components/kind-rows";
+import { ResourceRows } from "./components/resource-rows";
+import {
+  DeleteConfirmOverlay,
+  HelmRollbackOverlay,
+  LogsDialog,
+  type LogsDialogActions,
+  PortForwardOverlay,
+  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 { useClipboard } from "./hooks/use-clipboard";
+import { usePortForward } from "./hooks/use-port-forward";
+import { useLogStream } from "./hooks/use-log-stream";
+import { useDataFetching } from "./hooks/use-data-fetching";
+import { useAppSideEffects } from "./hooks/use-app-side-effects";
+import { useAppKeyboard } from "./hooks/use-app-keyboard";
+
+const kubectl = new KubectlService();
+
+const PANE_TITLES: Record<PaneId, string> = {
+  clusters: "Navigation",
+  resources: "Resources",
+  inspector: "Inspector",
+};
+
+const OVERLAY_TITLES: Record<OverlayId, string> = {
+  "cluster-switcher": "Cluster Switcher",
+  "namespace-switcher": "Namespace Switcher",
+  "delete-confirm": "Confirm Delete",
+  "port-forward": "Port Forward",
+  logs: "Logs",
+  scale: "Scale",
+  "container-picker": "Select Container",
+  "helm-rollback": "Helm Rollback",
+};
+
+export function App() {
+  const renderer = useRenderer();
+  const dims = useTerminalDimensions();
+  const [state, dispatch] = useReducer(reducer, undefined, (): typeof initialState => {
+    const { activeContext, activeNamespace } = loadPersistedState();
+    return {
+      ...initialState,
+      ...(activeContext !== undefined ? { activeContext } : {}),
+      ...(activeNamespace !== undefined ? { activeNamespace } : {}),
+    };
+  });
+  const [overlayIndex, setOverlayIndex] = useState(0);
+  const [manualRefreshNonce, setManualRefreshNonce] = useState(0);
+  const [filterMode, setFilterMode] = useState(false);
+  const [portForwardLocalPort, setPortForwardLocalPort] = useState("");
+  const [scaleReplicasInput, setScaleReplicasInput] = useState("");
+  const [logsInputMode, setLogsInputMode] = useState<"tail" | "since" | undefined>(undefined);
+  const [logsInputValue, setLogsInputValue] = useState("");
+  const [logsSearchMode, setLogsSearchMode] = useState(false);
+  const [logsSearchText, setLogsSearchText] = useState("");
+
+  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 selectedKind = useMemo(
+    () => state.resourceKinds.find((kind) => kind.name === state.selectedKind),
+    [state.resourceKinds, state.selectedKind],
+  );
+
+  const filteredResources = useMemo(
+    () => filterResources({ resources: state.resources, filter: state.resourceFilter }),
+    [state.resourceFilter, state.resources],
+  );
+
+  const visibleSelectedResourceName = useMemo(
+    () => nextVisibleResourceName({ resources: filteredResources, selectedName: state.selectedResourceName }),
+    [filteredResources, state.selectedResourceName],
+  );
+
+  const visibleSelectedResource = useMemo(
+    () => filteredResources.find((resource) => resource.ref.name === visibleSelectedResourceName),
+    [filteredResources, visibleSelectedResourceName],
+  );
+
+  const activeDetail = useMemo(() => {
+    if (!state.selectedResourceDetail || !visibleSelectedResource) {
+      return undefined;
+    }
+
+    return state.selectedResourceDetail.ref.name === visibleSelectedResource.ref.name &&
+      state.selectedResourceDetail.ref.kind === visibleSelectedResource.ref.kind &&
+      (state.selectedResourceDetail.ref.namespace ?? "") === (visibleSelectedResource.ref.namespace ?? "")
+      ? state.selectedResourceDetail
+      : undefined;
+  }, [state.selectedResourceDetail, visibleSelectedResource]);
+
+  const activeResourceRef = useMemo(
+    () => selectedRef({ detail: activeDetail, resource: visibleSelectedResource }),
+    [activeDetail, visibleSelectedResource],
+  );
+
+  const activeLogsRef = useMemo(
+    () =>
+      activeResourceRef && selectedKind
+        ? { kind: activeResourceRef.kind, name: activeResourceRef.name, namespaced: selectedKind.namespaced }
+        : undefined,
+    [activeResourceRef?.kind, activeResourceRef?.name, selectedKind?.namespaced],
+  );
+
+  const activeLogsTarget = useMemo(
+    () => (activeResourceRef ? `${activeResourceRef.kind}/${activeResourceRef.name}` : undefined),
+    [activeResourceRef],
+  );
+
+  const activeLogsKey = useMemo(
+    () =>
+      state.activeContext && activeLogsTarget && activeLogsRef
+        ? [
+            state.activeContext,
+            state.activeNamespace,
+            activeLogsTarget,
+            activeLogsRef.namespaced ? "ns" : "cluster",
+            state.logsContainer ?? "",
+            String(state.logsOptions.tail),
+            state.logsOptions.since ?? "",
+            state.logsOptions.previous ? "1" : "0",
+          ].join(":")
+        : undefined,
+    [state.activeContext, state.activeNamespace, activeLogsRef, activeLogsTarget, state.logsContainer, state.logsOptions],
+  );
+
+  const selectedResourcePortForwards = useMemo(
+    () => selectedForwardsForRef({ forwards: state.activePortForwards, ref: activeResourceRef }),
+    [state.activePortForwards, activeResourceRef],
+  );
+
+  const selectedResources = useMemo(
+    () => state.resources.filter((resource) => state.selectedResourceNames.includes(resource.ref.name)),
+    [state.resources, state.selectedResourceNames],
+  );
+
+  const deleteTargets = useMemo(
+    () => (selectedResources.length > 0 ? selectedResources : visibleSelectedResource ? [visibleSelectedResource] : []),
+    [selectedResources, visibleSelectedResource],
+  );
+
+  const activeForwardKeys = useMemo(
+    () => new Set(state.activePortForwards.map((f) => `${f.ref.kind.toLowerCase()}:${f.ref.name}`)),
+    [state.activePortForwards],
+  );
+
+  const footerPalette = toneStyles("neutral");
+
+  // ── 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 { portForwardProcessesRef, stopPortForward, startPortForward, openPortForwardOverlay: rawOpenPortForwardOverlay } = usePortForward(dispatch, kubectl, toastError);
+
+  const logStreamRef = useLogStream(dispatch, state, activeLogsRef, activeLogsTarget, activeLogsKey, kubectl);
+
+  const { resourcesLengthRef, selectedResourceNameRef, selectedResourceDetailRef, eventsLengthRef } = useDataFetching(
+    state,
+    dispatch,
+    selectedKind,
+    activeResourceRef,
+    viewPollTick,
+    clusterPollTick,
+    metricsPollTick,
+    manualRefreshNonce,
+    filteredResources,
+    kubectl,
+    setFilterMode,
+  );
+
+  useAppSideEffects(state, dispatch, portForwardProcessesRef, notificationTimersRef, activeResourceRef);
+
+  const openPortForwardOverlay = useCallback(() => {
+    rawOpenPortForwardOverlay(activeDetail, selectedResourcePortForwards, setPortForwardLocalPort, setOverlayIndex, dispatch);
+  }, [activeDetail, selectedResourcePortForwards, setPortForwardLocalPort, setOverlayIndex, dispatch, rawOpenPortForwardOverlay]);
+
+  const handleToggleReveal = useCallback(
+    (id: string): void => {
+      const allLines = activeDetail?.summarySections.flatMap((s) => s.lines) ?? [];
+      const line = allLines.find((l): l is ResourceDetailLine => typeof l !== "string" && l.id === id);
+
+      dispatch({ type: "toggleRevealDetailLine", id });
+
+      if (line?.secretRef && !state.revealedSecretValues[id] && state.activeContext) {
+        const context = state.activeContext;
+        const namespace = state.activeNamespace;
+        const { name, key } = line.secretRef;
+
+        void (async () => {
+          try {
+            let value: string;
+
+            if (key !== undefined) {
+              value = await kubectl.getSecretValue({ context, namespace, name, key });
+            } else {
+              const allValues = await kubectl.getAllSecretValues({ context, namespace, name });
+              value = Object.entries(allValues)
+                .map(([k, v]) => `${k}=${v}`)
+                .join("  ");
+            }
+
+            dispatch({ type: "setRevealedSecretValue", id, value });
+          } catch (error: unknown) {
+            toastError(error);
+          }
+        })();
+      }
+    },
+    [activeDetail, state.revealedSecretValues, state.activeContext, state.activeNamespace, toastError],
+  );
+
+  useAppKeyboard(
+    state,
+    dispatch,
+    renderer,
+    filteredResources,
+    visibleSelectedResourceName,
+    activeDetail,
+    activeResourceRef,
+    activeLogsRef,
+    selectedKind,
+    deleteTargets,
+    selectedResourcePortForwards,
+    portForwardProcessesRef,
+    kubectl,
+    filterMode,
+    overlayIndex,
+    portForwardLocalPort,
+    scaleReplicasInput,
+    logsInputMode,
+    logsInputValue,
+    logsSearchMode,
+    setOverlayIndex,
+    setFilterMode,
+    setPortForwardLocalPort,
+    setScaleReplicasInput,
+    setLogsInputMode,
+    setLogsInputValue,
+    setLogsSearchMode,
+    setLogsSearchText,
+    setManualRefreshNonce,
+    stopPortForward,
+    startPortForward,
+    openPortForwardOverlay,
+    toast,
+    toastError,
+    copyToClipboard,
+    handleToggleReveal,
+    logsScrollRef,
+    logsActionsRef,
+  );
+
+  // ── Derived overlay data ───────────────────────────────────────────────────
+
+  const overlayItems =
+    state.overlay === "cluster-switcher"
+      ? state.contexts.map((context: ClusterContext) => ({
+          name: context.name,
+          description: context.name === state.activeContext ? "active context" : "available context",
+        }))
+      : state.overlay === "namespace-switcher"
+        ? state.namespaces.map((namespace: NamespaceItem) => ({
+            name: namespace.name,
+            description: namespace.name === state.activeNamespace ? "active namespace" : "namespace",
+          }))
+        : state.overlay === "container-picker"
+          ? (activeDetail?.containers ?? []).map((name) => ({
+              name,
+              description: name === state.logsContainer ? "currently selected" : "container",
+            }))
+          : [];
+
+  // ── Footer hints (context-aware) ─────────────────────────────────────────
+
+  const footerHints = useMemo((): [string, string][] => {
+    // Filter mode: only show filter-specific controls
+    if (filterMode) {
+      return [
+        [GLYPHS.enter, "confirm"],
+        [GLYPHS.esc, "cancel"],
+        ["^U", "clear"],
+      ];
+    }
+
+    const isHelm = activeResourceRef?.kind.toLowerCase() === "helmreleases";
+    const hasResource = Boolean(activeResourceRef);
+    const hasPortForwards =
+      (activeDetail?.portForwards?.length ?? 0) > 0 || selectedResourcePortForwards.length > 0;
+
+    // Clusters pane: kind-list navigation only
+    if (state.activePane === "clusters") {
+      return [
+        [GLYPHS.tab, "panes"],
+        ["↑↓", "kinds"],
+        ["R", "refresh"],
+      ];
+    }
+
+    // Inspector pane: navigation back, refresh
+    if (state.activePane === "inspector") {
+      return [
+        [GLYPHS.tab, "panes"],
+        ["←", "back"],
+        ["R", "refresh"],
+      ];
+    }
+
+    // Resources pane — base hints always present
+    const hints: [string, string][] = [
+      [GLYPHS.tab, "panes"],
+      ["↑↓", "navigate"],
+      ["/", "filter"],
+      ["R", "refresh"],
+    ];
+
+    if (!hasResource) return hints;
+
+    if (isHelm) {
+      hints.push(
+        ["E", "edit values"],
+        ...(deleteTargets.length > 0 ? [["D", "delete"] as [string, string]] : []),
+        ["B", "rollback"],
+        ["U", "upgrade"],
+      );
+    } else {
+      hints.push(["L", "logs"], ["E", "edit"], ["X", "shell"]);
+      if (hasPortForwards) hints.push(["F", "forward"]);
+      if (deleteTargets.length > 0) hints.push(["D", "delete"]);
+      if (activeResourceRef && kubectl.canScale(activeResourceRef)) hints.push(["⇧S", "scale"]);
+      if (activeResourceRef && kubectl.canRolloutRestart(activeResourceRef)) hints.push(["⇧R", "restart"]);
+    }
+
+    return hints;
+  }, [
+    filterMode,
+    state.activePane,
+    activeResourceRef,
+    activeDetail,
+    selectedResourcePortForwards,
+    deleteTargets,
+  ]);
+
+  // Split footerHints across two rows so hints never overflow.
+  // Row 1: primary hints, Row 2: overflow hints.
+  // Each badge: key.length + label.length + 3 chars; columnGap: 2 between items.
+  const { footerHintsRow1, footerHintsRow2 } = useMemo(() => {
+    const innerWidth = dims.width - 4; // 2 border + 2 padding
+    const avail1 = innerWidth;
+    const avail2 = innerWidth;
+    const row1: [string, string][] = [];
+    const row2: [string, string][] = [];
+    let used1 = 0;
+    let used2 = 0;
+    for (const [key, label] of footerHints) {
+      const w = key.length + label.length + 3;
+      const gap1 = row1.length === 0 ? 0 : 2;
+      const gap2 = row2.length === 0 ? 0 : 2;
+      if (used1 + gap1 + w <= avail1) {
+        used1 += gap1 + w;
+        row1.push([key, label]);
+      } else if (used2 + gap2 + w <= avail2) {
+        used2 += gap2 + w;
+        row2.push([key, label]);
+      }
+      // else drop — can't fit either row
+    }
+    return { footerHintsRow1: row1, footerHintsRow2: row2 };
+  }, [footerHints, dims.width]);
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1, backgroundColor: SURFACE }}>
+      {/* Header bar */}
+      <box
+        onMouseDown={() => dispatch({ type: "setActivePane", pane: "clusters" })}
+        style={{
+          height: 3,
+          border: true,
+          borderColor: PANEL_BORDER,
+          borderStyle: "rounded",
+          backgroundColor: SURFACE_ACCENT,
+          paddingLeft: 1,
+          paddingRight: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+        }}
+      >
+        <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+          {state.activeContext
+            ? `${state.activeContext} / ${state.activeNamespace} / ${selectedKind?.name ?? "..."}`
+            : state.statusMessage}
+        </text>
+      </box>
+
+      {/* Footer bar — status + hotkeys across two rows */}
+      <box
+        style={{
+          height: 4,
+          border: true,
+          borderColor: footerPalette.border,
+          borderStyle: "rounded",
+          backgroundColor: footerPalette.bg,
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: "column",
+        }}
+      >
+        {/* Row 1: first set of key hints */}
+        <box style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flexGrow: 1 }}>
+          <box style={{ flexDirection: "row", columnGap: 2 }}>
+            {footerHintsRow1.map(([key, label]) => (
+              <text key={`${key}:${label}`} fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+                {"["}
+                <span fg={KEY_HINT}>{key}</span>
+                {`] ${label}`}
+              </text>
+            ))}
+          </box>
+        </box>
+        {/* Row 2: overflow hints, right-aligned */}
+        <box style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flexGrow: 1 }}>
+          <box style={{ flexDirection: "row", columnGap: 2 }}>
+            {footerHintsRow2.map(([key, label]) => (
+              <text key={`${key}:${label}`} fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+                {"["}
+                <span fg={KEY_HINT}>{key}</span>
+                {`] ${label}`}
+              </text>
+            ))}
+          </box>
+        </box>
+      </box>
+
+      {/* Main content area */}
+      <box style={{ flexGrow: 1, flexDirection: "row", columnGap: 1, padding: 1, backgroundColor: SURFACE }}>
+        {/* Navigation pane */}
+        <box
+          title={PANE_TITLES.clusters}
+          onMouseDown={() => dispatch({ type: "setActivePane", pane: "clusters" })}
+          style={{
+            width: 34,
+            border: true,
+            borderColor: paneBorder(state.activePane === "clusters"),
+            borderStyle: "rounded",
+            backgroundColor: NAV_SURFACE,
+            flexDirection: "column",
+            padding: 1,
+          }}
+        >
+          <text fg={TEXT_PRIMARY}>
+            <span fg={KEY_HINT}>{GLYPHS.cluster}</span>
+            {` ${state.activeContext ?? "none"}`}
+          </text>
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <span fg={KEY_HINT}>{GLYPHS.ns}</span>
+            {` ${state.activeNamespace}`}
+          </text>
+          <KindRows
+            resourceKinds={state.resourceKinds}
+            selectedKind={state.selectedKind}
+            onActivate={() => dispatch({ type: "setActivePane", pane: "clusters" })}
+            onSelect={(kind) => dispatch({ type: "setSelectedKind", kind })}
+          />
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            {"["}
+            <span fg={KEY_HINT}>C</span>
+            {"] cluster  ["}
+            <span fg={KEY_HINT}>N</span>
+            {"] namespace"}
+          </text>
+        </box>
+
+        {/* Resources pane */}
+        <box
+          title={`${PANE_TITLES.resources}: ${currentKindLabel({ resourceKinds: state.resourceKinds, selectedKind: state.selectedKind })}`}
+          onMouseDown={() => dispatch({ type: "setActivePane", pane: "resources" })}
+          style={{
+            flexGrow: 1,
+            border: true,
+            borderColor: paneBorder(state.activePane === "resources"),
+            borderStyle: "rounded",
+            backgroundColor: RESOURCE_SURFACE,
+            flexDirection: "column",
+            padding: 1,
+          }}
+        >
+          <box
+            onMouseDown={() => {
+              dispatch({ type: "setActivePane", pane: "resources" });
+              setFilterMode(true);
+            }}
+            style={{
+              border: true,
+              borderColor: filterMode || state.activePane === "resources" ? PANEL_BORDER_ACTIVE : PANEL_BORDER,
+              borderStyle: "rounded",
+              backgroundColor: FILTER_BACKGROUND,
+              paddingLeft: 1,
+              paddingRight: 1,
+              marginBottom: 1,
+              height: 3,
+              justifyContent: "center",
+              alignItems: "center",
+              flexDirection: "row",
+            }}
+          >
+            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+              Filter:
+            </text>
+            <input
+              focused={filterMode}
+              value={state.resourceFilter}
+              placeholder="type to filter resources"
+              style={{ flexGrow: 1, marginLeft: 1 }}
+              onInput={(value) => dispatch({ type: "setResourceFilter", value })}
+              onChange={(value) => dispatch({ type: "setResourceFilter", value })}
+              onSubmit={() => setFilterMode(false)}
+            />
+          </box>
+          <ResourceRows
+            resources={filteredResources}
+            selectedName={visibleSelectedResourceName}
+            selectedNames={state.selectedResourceNames}
+            status={state.resourcesStatus}
+            filter={state.resourceFilter}
+            activeForwardKeys={activeForwardKeys}
+            podMetrics={state.podMetrics}
+            nodeMetrics={state.nodeMetrics}
+            onActivate={() => dispatch({ type: "setActivePane", pane: "resources" })}
+            onSelect={(name) => dispatch({ type: "setSelectedResourceName", name })}
+            onToggleSelected={(name) => dispatch({ type: "toggleSelectedResource", name })}
+          />
+        </box>
+
+        {/* Inspector pane — hidden when terminal is too narrow */}
+        {dims.width >= 110 && (
+        <box
+          title={PANE_TITLES.inspector}
+          onMouseDown={() => dispatch({ type: "setActivePane", pane: "inspector" })}
+          style={{
+            width: 52,
+            border: true,
+            borderColor: paneBorder(state.activePane === "inspector"),
+            borderStyle: "rounded",
+            backgroundColor: INSPECTOR_SURFACE,
+            flexDirection: "column",
+            padding: 1,
+          }}
+        >
+          <InspectorTabs
+            activeTab={state.inspectorTab}
+            activePane={state.activePane}
+            onSelect={(tab) => {
+              dispatch({ type: "setActivePane", pane: "inspector" });
+              dispatch({ type: "setInspectorTab", tab });
+            }}
+          />
+          <InspectorBody
+            activeTab={state.inspectorTab}
+            detail={activeDetail}
+            detailStatus={state.selectedResourceDetailStatus}
+            events={state.events}
+            eventsStatus={state.eventsStatus}
+            fallbackLines={resourcePreview({ resource: visibleSelectedResource })}
+            active={state.activePane === "inspector"}
+            onActivate={() => dispatch({ type: "setActivePane", pane: "inspector" })}
+            revealedDetailLineIds={state.revealedDetailLineIds}
+            revealedSecretValues={state.revealedSecretValues}
+            onToggleReveal={handleToggleReveal}
+            onCopyText={copyToClipboard}
+          />
+        </box>
+        )}
+      </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 });
+        }}
+      />
+
+      {/* Overlays */}
+      {state.overlay ? (
+        state.overlay === "delete-confirm" ? (
+          <DeleteConfirmOverlay targets={deleteTargets.map((resource) => resource.ref)} />
+        ) : state.overlay === "logs" ? (
+          <LogsDialog
+            target={state.logsTarget}
+            logsText={state.logsText}
+            status={state.logsStatus}
+            scrollRef={logsScrollRef}
+            logsOptions={state.logsOptions}
+            logsContainer={state.logsContainer}
+            containers={activeDetail?.containers}
+            inputMode={logsInputMode}
+            inputValue={logsInputValue}
+            onOptionInputChange={setLogsInputValue}
+            searchMode={logsSearchMode}
+            searchText={logsSearchText}
+            onSearchChange={setLogsSearchText}
+            actionsRef={logsActionsRef}
+          />
+        ) : state.overlay === "port-forward" && activeResourceRef ? (
+          <PortForwardOverlay
+            target={statusLine({ ref: activeResourceRef })}
+            entries={buildPortForwardEntries(activeDetail?.portForwards ?? [], selectedResourcePortForwards)}
+            selectedIndex={overlayIndex}
+            localPortValue={portForwardLocalPort}
+            onChange={setPortForwardLocalPort}
+          />
+        ) : state.overlay === "scale" && activeResourceRef ? (
+          <ScaleDialog
+            target={statusLine({ ref: activeResourceRef })}
+            currentReplicas={activeDetail?.replicas}
+            replicasValue={scaleReplicasInput}
+            onChange={setScaleReplicasInput}
+          />
+        ) : state.overlay === "helm-rollback" && activeResourceRef ? (
+          <HelmRollbackOverlay
+            releaseName={activeResourceRef.name}
+            revisionValue={state.helmRollbackRevision}
+            onChange={(value) => dispatch({ type: "setHelmRollbackRevision", value })}
+          />
+        ) : (
+          <SelectOverlay
+            title={OVERLAY_TITLES[state.overlay]}
+            items={overlayItems}
+            selectedIndex={overlayIndex}
+            onChange={setOverlayIndex}
+          />
+        )
+      ) : undefined}
+    </box>
+  );
+}