openk8s 1.0.1 → 1.0.2

package/src/app/components/footer.tsx

@@ -0,0 +1,52 @@
+import { TextAttributes } from "@opentui/core";
+
+import { KEY_HINT, TEXT_MUTED, TEXT_SUBTLE, toneStyles } from "../theme";
+
+export interface FooterProps {
+  hintRows: [string, string][][];
+}
+
+export function Footer({ hintRows }: FooterProps) {
+  const [row1, row2] = hintRows;
+  const palette = toneStyles("neutral");
+  const textFg = TEXT_SUBTLE;
+  const dimAttr = TEXT_MUTED;
+
+  return (
+    <box
+      style={{
+        height: 4,
+        border: true,
+        borderColor: palette.border,
+        borderStyle: "rounded",
+        backgroundColor: palette.bg,
+        paddingLeft: 1,
+        paddingRight: 1,
+        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>
+    </box>
+  );
+}

package/src/app/components/header.tsx

@@ -0,0 +1,37 @@
+import { TextAttributes } from "@opentui/core";
+
+import { PANEL_BORDER, SURFACE_ACCENT, TEXT_SUBTLE, KEY_HINT } from "../theme";
+
+export interface HeaderProps {
+  activeContext: string | undefined;
+  activeNamespace: string;
+  selectedKindLabel: string;
+  statusMessage: string;
+  onActivate: () => void;
+}
+
+export function Header({ activeContext, activeNamespace, selectedKindLabel, statusMessage, onActivate }: HeaderProps) {
+  return (
+    <box
+      onMouseDown={onActivate}
+      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}>
+        {activeContext
+          ? `${activeContext} / ${activeNamespace} / ${selectedKindLabel}`
+          : statusMessage}
+      </text>
+    </box>
+  );
+}

package/src/app/components/inspector-tokens.ts

@@ -0,0 +1,93 @@
+import { YAML_COMMENT, YAML_KEY, TEXT_SUBTLE, YAML_VALUE } from "../theme";
+
+export interface YamlToken {
+  text: string;
+  fg: string;
+}
+
+export function tokenizeDescribeLine(line: string): YamlToken[] {
+  if (!line.trim()) {
+    return [{ text: line || " ", fg: TEXT_SUBTLE }];
+  }
+
+  if (/^[A-Z][A-Za-z ]+:/.test(line.trimStart()) && !line.startsWith(" ")) {
+    const colonIdx = line.indexOf(":");
+    const key = line.slice(0, colonIdx);
+    const rest = line.slice(colonIdx + 1);
+    return [
+      { text: key, fg: YAML_KEY },
+      { text: ":", fg: TEXT_SUBTLE },
+      { text: rest, fg: YAML_VALUE },
+    ];
+  }
+
+  const colonSpaceIdx = line.indexOf(":  ");
+  if (colonSpaceIdx > 0) {
+    const key = line.slice(0, colonSpaceIdx);
+    const value = line.slice(colonSpaceIdx + 1);
+    return [
+      { text: key, fg: TEXT_SUBTLE },
+      { text: value, fg: YAML_VALUE },
+    ];
+  }
+
+  const colonIdx = line.indexOf(":");
+  if (colonIdx > 0 && colonIdx < line.length - 1) {
+    const key = line.slice(0, colonIdx);
+    const value = line.slice(colonIdx + 1);
+    return [
+      { text: key, fg: TEXT_SUBTLE },
+      { text: ":", fg: TEXT_SUBTLE },
+      { text: value, fg: YAML_VALUE },
+    ];
+  }
+
+  return [{ text: line, fg: TEXT_SUBTLE }];
+}
+
+export function tokenizeYamlLine(line: string): YamlToken[] {
+  if (!line.trim()) {
+    return [{ text: line || " ", fg: TEXT_SUBTLE }];
+  }
+
+  if (/^\s*#/.test(line)) {
+    return [{ text: line, fg: YAML_COMMENT }];
+  }
+
+  const indentLen = line.length - line.trimStart().length;
+  const indent = line.slice(0, indentLen);
+  let rest = line.trimStart();
+
+  let listMarker = "";
+  if (rest.startsWith("- ")) {
+    listMarker = "- ";
+    rest = rest.slice(2);
+  } else if (rest === "-") {
+    return [{ text: line, fg: TEXT_SUBTLE }];
+  }
+
+  const colonSpaceIdx = rest.indexOf(": ");
+  const isKeyOnly = rest === rest.trimEnd() && rest.endsWith(":");
+
+  if (colonSpaceIdx !== -1) {
+    const key = rest.slice(0, colonSpaceIdx);
+    const value = rest.slice(colonSpaceIdx + 2);
+    return [
+      { text: indent + listMarker, fg: TEXT_SUBTLE },
+      { text: key, fg: YAML_KEY },
+      { text: ": ", fg: TEXT_SUBTLE },
+      { text: value, fg: YAML_VALUE },
+    ];
+  }
+
+  if (isKeyOnly) {
+    const key = rest.slice(0, -1);
+    return [
+      { text: indent + listMarker, fg: TEXT_SUBTLE },
+      { text: key, fg: YAML_KEY },
+      { text: ":", fg: TEXT_SUBTLE },
+    ];
+  }
+
+  return [{ text: line, fg: TEXT_SUBTLE }];
+}

package/src/app/components/inspector.tsx

@@ -8,13 +8,10 @@ import {
   ROW_SELECTED,
   TEXT_PRIMARY,
   TEXT_SUBTLE,
-  YAML_COMMENT,
-  YAML_KEY,
-  YAML_VALUE,
-  toneStyles,
 } from "../theme";
-import { statusTone } from "../utils";
-import type { EventItem, InspectorTab, PaneId, ResourceDetail, ResourceDetailLine, ResourceDetailSection } from "../../lib/k8s/types";
+import { tokenizeYamlLine, tokenizeDescribeLine } from "./inspector-tokens";
+import { EventList, DetailSectionsInternal } from "./detail-sections";
+import type { EventItem, InspectorTab, PaneId, ResourceDetail } from "../../lib/k8s/types";
 
 export const INSPECTOR_TABS: Array<{ id: InspectorTab; label: string; hotkey: string }> = [
   { id: "summary", label: "Summary", hotkey: "s" },
@@ -23,101 +20,6 @@ export const INSPECTOR_TABS: Array<{ id: InspectorTab; label: string; hotkey: st
   { id: "describe", label: "Describe", hotkey: "i" },
 ];
 
-interface YamlToken {
-  text: string;
-  fg: string;
-}
-
-function tokenizeDescribeLine(line: string): YamlToken[] {
-  if (!line.trim()) {
-    return [{ text: line || " ", fg: TEXT_SUBTLE }];
-  }
-
-  // Section header lines (e.g. "Name:", "Labels:", or "Events:")
-  if (/^[A-Z][A-Za-z ]+:/.test(line.trimStart()) && !line.startsWith(" ")) {
-    const colonIdx = line.indexOf(":");
-    const key = line.slice(0, colonIdx);
-    const rest = line.slice(colonIdx + 1);
-    return [
-      { text: key, fg: YAML_KEY },
-      { text: ":", fg: TEXT_SUBTLE },
-      { text: rest, fg: YAML_VALUE },
-    ];
-  }
-
-  // Indented key: value lines
-  const colonSpaceIdx = line.indexOf(":  ");
-  if (colonSpaceIdx > 0) {
-    const key = line.slice(0, colonSpaceIdx);
-    const value = line.slice(colonSpaceIdx + 1);
-    return [
-      { text: key, fg: TEXT_SUBTLE },
-      { text: value, fg: YAML_VALUE },
-    ];
-  }
-
-  const colonIdx = line.indexOf(":");
-  if (colonIdx > 0 && colonIdx < line.length - 1) {
-    const key = line.slice(0, colonIdx);
-    const value = line.slice(colonIdx + 1);
-    return [
-      { text: key, fg: TEXT_SUBTLE },
-      { text: ":", fg: TEXT_SUBTLE },
-      { text: value, fg: YAML_VALUE },
-    ];
-  }
-
-  return [{ text: line, fg: TEXT_SUBTLE }];
-}
-
-function tokenizeYamlLine(line: string): YamlToken[] {  if (!line.trim()) {
-    return [{ text: line || " ", fg: TEXT_SUBTLE }];
-  }
-
-  if (/^\s*#/.test(line)) {
-    return [{ text: line, fg: YAML_COMMENT }];
-  }
-
-  const indentLen = line.length - line.trimStart().length;
-  const indent = line.slice(0, indentLen);
-  let rest = line.trimStart();
-
-  // Strip list marker
-  let listMarker = "";
-  if (rest.startsWith("- ")) {
-    listMarker = "- ";
-    rest = rest.slice(2);
-  } else if (rest === "-") {
-    return [{ text: line, fg: TEXT_SUBTLE }];
-  }
-
-  // "key: value" or "key:"
-  const colonSpaceIdx = rest.indexOf(": ");
-  const isKeyOnly = rest === rest.trimEnd() && rest.endsWith(":");
-
-  if (colonSpaceIdx !== -1) {
-    const key = rest.slice(0, colonSpaceIdx);
-    const value = rest.slice(colonSpaceIdx + 2);
-    return [
-      { text: indent + listMarker, fg: TEXT_SUBTLE },
-      { text: key, fg: YAML_KEY },
-      { text: ": ", fg: TEXT_SUBTLE },
-      { text: value, fg: YAML_VALUE },
-    ];
-  }
-
-  if (isKeyOnly) {
-    const key = rest.slice(0, -1);
-    return [
-      { text: indent + listMarker, fg: TEXT_SUBTLE },
-      { text: key, fg: YAML_KEY },
-      { text: ":", fg: TEXT_SUBTLE },
-    ];
-  }
-
-  return [{ text: line, fg: TEXT_SUBTLE }];
-}
-
 export interface InspectorTabsProps {
   activeTab: InspectorTab;
   activePane: PaneId;
@@ -195,8 +97,6 @@ export function InspectorBody({
   onToggleReveal,
   onCopyText,
 }: InspectorBodyProps) {
-  // YAML tab — scrollX enables horizontal scrolling (no maxWidth constraint on content).
-  // The 1-row gap is a non-scrollable spacer inside the wrapper, before the scrollbox.
   if (activeTab === "yaml") {
     return (
       <box style={{ flexGrow: 1, flexDirection: "column" }}>
@@ -240,7 +140,6 @@ export function InspectorBody({
     );
   }
 
-  // Describe tab — raw kubectl describe output with light colorization
   if (activeTab === "describe") {
     return (
       <box style={{ flexGrow: 1, flexDirection: "column" }}>
@@ -281,7 +180,6 @@ export function InspectorBody({
     );
   }
 
-  // Summary / Events tabs
   return (
     <box style={{ flexGrow: 1, flexDirection: "column" }}>
       <box style={{ height: 1 }} />
@@ -313,137 +211,3 @@ export function InspectorBody({
     </box>
   );
 }
-
-interface EventListProps {
-  events: EventItem[];
-  status: string;
-}
-
-function EventList({ events, status }: EventListProps) {
-  if (status === "loading") {
-    return (
-      <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
-        Loading events...
-      </text>
-    );
-  }
-
-  if (events.length === 0) {
-    return (
-      <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
-        No related events
-      </text>
-    );
-  }
-
-  return (
-    <box style={{ flexDirection: "column", width: "100%" }}>
-      {events.map((event, index) => {
-        const isWarning = event.type.toLowerCase() === "warning";
-        const palette = toneStyles(isWarning ? "warning" : "info");
-        const typeGlyph = isWarning ? GLYPHS.warn : GLYPHS.dot;
-
-        return (
-          <box key={`${event.reason}:${event.age}:${index}`} style={{ flexDirection: "column", marginBottom: 1 }}>
-            <text fg={palette.fg}>
-              <span fg={palette.border}>{typeGlyph}</span>
-              {` ${event.type}  `}
-              <span fg={TEXT_SUBTLE}>{GLYPHS.sep}</span>
-              {`  ${event.reason}  ${event.age}`}
-            </text>
-            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>{`  ${event.source}  ${event.message}`}</text>
-          </box>
-        );
-      })}
-    </box>
-  );
-}
-
-interface DetailSectionsInternalProps {
-  sections: ResourceDetailSection[];
-  revealedIds: string[];
-  revealedSecretValues: Record<string, string>;
-  onToggleReveal: (id: string) => void;
-  onCopyText: (text: string, label?: string) => void;
-}
-
-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 }}>
-          {/* Section header: ─ Title */}
-          <text fg={KEY_HINT}>
-            {"─ "}
-            <span fg={TEXT_PRIMARY} attributes={TextAttributes.BOLD}>{section.title}</span>
-          </text>
-          {section.lines.map((line, index) => {
-            // Narrow to structured line early so the rest is clean
-            const structuredLine: ResourceDetailLine | undefined =
-              typeof line === "string" ? undefined : line;
-            const lineId = structuredLine?.id ?? line as string;
-            const isRevealable = !!(structuredLine?.revealable && structuredLine.revealedText);
-            const isRevealed = isRevealable && revealedIds.includes(structuredLine!.id);
-
-            // Prefer the live-fetched secret value; fall back to the static revealedText placeholder
-            const fetchedValue = structuredLine ? revealedSecretValues[structuredLine.id] : undefined;
-
-            // raw line.text — no "[click to reveal]" suffix
-            const rawText = structuredLine?.text ?? (line as string);
-            const displayText = isRevealable && isRevealed
-              ? (fetchedValue ?? structuredLine!.revealedText ?? rawText)
-              : rawText;
-            // What gets copied: fetched value > revealedText > rawText
-            const copyValue = fetchedValue ?? structuredLine?.revealedText ?? rawText;
-            // Show [copy] on all structured lines (env vars) regardless of revealable status
-            const hasCopyButton = structuredLine !== undefined;
-
-            // Short label for the "copied" toast: extract var name before "=" or first word
-            const copyLabel: string | undefined = structuredLine
-              ? (() => {
-                  const eqIdx = rawText.indexOf("=");
-                  if (eqIdx > 0) return rawText.slice(0, eqIdx);
-                  const spaceIdx = rawText.indexOf(" ");
-                  return spaceIdx > 0 ? rawText.slice(0, spaceIdx) : rawText;
-                })()
-              : undefined;
-
-            return (
-              <box
-                key={`${section.title}:${index}:${lineId}`}
-                style={{ flexDirection: "row", width: "100%" }}
-              >
-                <box
-                  onMouseDown={isRevealable ? () => onToggleReveal(structuredLine!.id) : undefined}
-                  style={{ flexGrow: 1 }}
-                >
-                  <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
-                    {"  "}
-                    {displayText}
-                  </text>
-                </box>
-                {isRevealable && (
-                  <box
-                    onMouseDown={() => onToggleReveal(structuredLine!.id)}
-                    style={{ paddingLeft: 1 }}
-                  >
-                    <text fg={KEY_HINT} attributes={TextAttributes.DIM}>
-                      {isRevealed ? "[hide]" : "[reveal]"}
-                    </text>
-                  </box>
-                )}
-                {hasCopyButton && (
-                  <box onMouseDown={() => onCopyText(copyValue, copyLabel)} style={{ paddingLeft: 1 }}>
-                    <text fg={KEY_HINT} attributes={TextAttributes.DIM}>
-                      {"[copy]"}
-                    </text>
-                  </box>
-                )}
-              </box>
-            );
-          })}
-        </box>
-      ))}
-    </box>
-  );
-}

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

@@ -49,6 +49,11 @@ export function ResourceRows({
         </text>
       ) : (
       <box style={{ flexDirection: "column", width: "100%" }}>
+        {status === "loading" ? (
+          <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+            {"\u27F3 Refreshing..."}
+          </text>
+        ) : null}
         {resources.map((resource) => {
           const selected = resource.ref.name === selectedName;
           const marked = selectedNames.includes(resource.ref.name);

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

@@ -0,0 +1,40 @@
+import type { AppAction } from "../../app-actions";
+
+export function handleFilterKeys(
+  key: { name: string; ctrl?: boolean; sequence?: string },
+  filterMode: boolean,
+  activePane: string,
+  dispatch: React.Dispatch<AppAction>,
+  setFilterMode: React.Dispatch<React.SetStateAction<boolean>>,
+): boolean {
+  if (filterMode && key.name === "escape") {
+    setFilterMode(false);
+    return true;
+  }
+
+  if (activePane === "resources" && (key.sequence === "/" || key.name === "slash")) {
+    setFilterMode(true);
+    return true;
+  }
+
+  if (filterMode && activePane === "resources") {
+    if (key.ctrl && key.name === "u") {
+      dispatch({ type: "setResourceFilter", value: "" });
+      return true;
+    }
+
+    if (key.name === "return") {
+      setFilterMode(false);
+      return true;
+    }
+
+    return true;
+  }
+
+  if (activePane === "resources" && !filterMode && key.ctrl && key.name === "u") {
+    dispatch({ type: "setResourceFilter", value: "" });
+    return true;
+  }
+
+  return false;
+}

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

@@ -0,0 +1,134 @@
+import { abortRunningProcesses } from "../../../lib/kubectl/spawn-utils";
+import type { AppAction } from "../../app-actions";
+import type { AppState, ResourceRef, ResourceKind, ResourceDetail, NotificationTone } from "../../../lib/k8s/types";
+import { statusLine } from "../../utils";
+
+export function handleCtrlC(
+  key: { name: string; ctrl?: boolean },
+  renderer: { destroy: () => void },
+): boolean {
+  if (key.ctrl && key.name === "c") {
+    abortRunningProcesses();
+    renderer.destroy();
+    return true;
+  }
+  return false;
+}
+
+export function handleGlobalHotkeys(
+  key: { name: string; shift?: boolean },
+  state: AppState,
+  dispatch: React.Dispatch<AppAction>,
+  activeResourceRef: ResourceRef | undefined,
+  selectedKind: ResourceKind | undefined,
+  activeDetail: ResourceDetail | undefined,
+  selectedResourcePortForwards: { length: number },
+  deleteTargets: { length: number },
+  visibleSelectedResourceName: string | undefined,
+  setOverlayIndex: React.Dispatch<React.SetStateAction<number>>,
+  openPortForwardOverlay: () => void,
+  toast: (tone: NotificationTone, message: string) => void,
+  copyToClipboard: (text: string, label?: string) => void,
+  setManualRefreshNonce: React.Dispatch<React.SetStateAction<number>>,
+  setScaleReplicasInput: React.Dispatch<React.SetStateAction<string>>,
+): boolean {
+  if (state.overlay) return false;
+
+  // C → cluster switcher
+  if (key.name === "c") {
+    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") {
+    dispatch({ type: "setOverlay", overlay: "namespace-switcher" });
+    setOverlayIndex(Math.max(0, state.namespaces.findIndex((namespace) => namespace.name === state.activeNamespace)));
+    return true;
+  }
+
+  // R → refresh
+  if (key.name === "r" && !key.shift) {
+    toast("info", "Refreshing current view");
+    setManualRefreshNonce((current) => current + 1);
+    return true;
+  }
+
+  // S → summary tab
+  if (key.name === "s" && !key.shift) {
+    dispatch({ type: "setInspectorTab", tab: "summary" });
+    return true;
+  }
+
+  // Y → yaml tab
+  if (key.name === "y") {
+    if (state.inspectorTab === "yaml" && activeDetail?.yaml) {
+      copyToClipboard(activeDetail.yaml, "YAML");
+    } else {
+      dispatch({ type: "setInspectorTab", tab: "yaml" });
+    }
+    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 (activeResourceRef) {
+      if (activeResourceRef.kind.toLowerCase() === "helmreleases") {
+        dispatch({ type: "setStatusMessage", message: "Logs not supported for Helm releases" });
+        return true;
+      }
+      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 true;
+  }
+
+  // F → port-forward overlay
+  if (key.name === "f" && 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) {
+    dispatch({ type: "setOverlay", overlay: "delete-confirm" });
+    return true;
+  }
+
+  // Space → multi-select
+  if (state.activePane === "resources" && key.name === "space" && visibleSelectedResourceName) {
+    dispatch({ type: "toggleSelectedResource", name: visibleSelectedResourceName });
+    return true;
+  }
+
+  // Shift+S → scale dialog
+  if (key.shift && key.name === "s" && activeResourceRef && selectedKind && state.activeContext) {
+    setScaleReplicasInput(activeDetail?.replicas !== undefined ? String(activeDetail.replicas) : "");
+    dispatch({ type: "setOverlay", overlay: "scale" });
+    return true;
+  }
+
+  return false;
+}