openk8s 0.0.1 → 1.0.0

package/src/app/hooks/use-port-forward.ts

@@ -0,0 +1,149 @@
+import { useRef } from "react";
+import type { ChildProcess } from "node:child_process";
+
+import type { AppAction } from "../app-state";
+import type { ActivePortForward, ResourceDetail, ResourceRef } from "../../lib/k8s/types";
+import type { StartPortForwardLifecycleOptions } from "../utils";
+import { portForwardId, statusLine } from "../utils";
+import { KubectlService } from "../../lib/kubectl/kubectl-service";
+
+export function usePortForward(
+  dispatch: React.Dispatch<AppAction>,
+  kubectl: KubectlService,
+  toastError: (error: unknown) => void,
+) {
+  const portForwardProcessesRef = useRef(new Map<string, ChildProcess>());
+
+  const stopPortForward = (id: string): void => {
+    const child = portForwardProcessesRef.current.get(id);
+
+    if (!child) {
+      dispatch({ type: "removeActivePortForward", id });
+      return;
+    }
+
+    child.kill("SIGINT");
+  };
+
+  const openPortForwardOverlay = (
+    activeDetail: ResourceDetail | undefined,
+    selectedResourcePortForwards: ActivePortForward[],
+    setPortForwardLocalPort: (value: string) => void,
+    setOverlayIndex: (value: number) => void,
+    dispatch: React.Dispatch<AppAction>,
+  ): void => {
+    const portForwards = activeDetail?.portForwards ?? [];
+    const firstInactive = portForwards.find(
+      (pf) => !selectedResourcePortForwards.some((af) => af.remotePort === pf.remotePort),
+    );
+    setPortForwardLocalPort(String((firstInactive ?? portForwards[0])?.localPort ?? ""));
+    setOverlayIndex(0);
+    dispatch({ type: "setOverlay", overlay: "port-forward" });
+  };
+
+  const startPortForward = (options: StartPortForwardLifecycleOptions): void => {
+    const id = portForwardId({
+      context: options.context,
+      namespace: options.namespace,
+      ref: options.target,
+      localPort: options.localPort,
+      remotePort: options.remotePort,
+    });
+
+    if (portForwardProcessesRef.current.has(id)) {
+      dispatch({
+        type: "setStatusMessage",
+        message: `Already forwarding ${statusLine({ ref: options.target })} on localhost:${options.localPort}`,
+      });
+      dispatch({ type: "setOverlay", overlay: undefined });
+      return;
+    }
+
+    const forward: ActivePortForward = {
+      id,
+      context: options.context,
+      namespace: options.namespace,
+      namespaced: options.namespaced,
+      ref: options.target,
+      localPort: options.localPort,
+      remotePort: options.remotePort,
+      status: "starting",
+    };
+
+    dispatch({ type: "addActivePortForward", forward });
+    dispatch({
+      type: "setStatusMessage",
+      message: `Starting forward for ${statusLine({ ref: options.target })} on localhost:${options.localPort}`,
+    });
+    dispatch({ type: "setError", error: undefined });
+    dispatch({ type: "setOverlay", overlay: undefined });
+
+    const child = kubectl.startPortForward({
+      context: options.context,
+      namespace: options.namespace,
+      resourceRef: options.target,
+      namespaced: options.namespaced,
+      localPort: options.localPort,
+      remotePort: options.remotePort,
+    });
+
+    portForwardProcessesRef.current.set(id, child);
+
+    const handleOutput = (chunk: Buffer | string): void => {
+      const text = chunk.toString();
+
+      if (text.includes("Forwarding from")) {
+        dispatch({
+          type: "updateActivePortForward",
+          id,
+          patch: { status: "ready", message: text.trim() },
+        });
+        dispatch({
+          type: "setStatusMessage",
+          message: `Forwarding ${statusLine({ ref: options.target })} on localhost:${options.localPort} -> ${options.remotePort}`,
+        });
+      }
+    };
+
+    child.stdout?.on("data", handleOutput);
+    child.stderr?.on("data", handleOutput);
+
+    child.on("close", (code, signal) => {
+      portForwardProcessesRef.current.delete(id);
+      dispatch({ type: "removeActivePortForward", id });
+
+      if (code === 0 || code === 130 || signal === "SIGINT") {
+        dispatch({ type: "setError", error: undefined });
+        dispatch({
+          type: "setStatusMessage",
+          message: `Stopped forwarding ${statusLine({ ref: options.target })} on localhost:${options.localPort}`,
+        });
+        return;
+      }
+
+      dispatch({
+        type: "setError",
+        error: {
+          message: `Port-forward failed for ${statusLine({ ref: options.target })}`,
+          detail: code !== null ? `Exit code ${code}` : signal ? `Signal ${signal}` : undefined,
+        },
+      });
+      dispatch({
+        type: "setStatusMessage",
+        message: `Port-forward failed for ${statusLine({ ref: options.target })}`,
+      });
+    });
+
+    child.on("error", (error) => {
+      portForwardProcessesRef.current.delete(id);
+      dispatch({ type: "removeActivePortForward", id });
+      toastError(error);
+      dispatch({
+        type: "setStatusMessage",
+        message: `Port-forward failed for ${statusLine({ ref: options.target })}`,
+      });
+    });
+  };
+
+  return { portForwardProcessesRef, stopPortForward, startPortForward, openPortForwardOverlay };
+}

package/src/app/persistence.ts

@@ -0,0 +1,44 @@
+import { readFileSync, mkdirSync, writeFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+
+export interface PersistedAppState {
+  activeContext?: string | undefined;
+  activeNamespace?: string | undefined;
+}
+
+function configPath(): string {
+  const home = process.env.HOME ?? process.env.USERPROFILE ?? ".";
+  return join(home, ".config", "openk8s", "state.json");
+}
+
+/** Synchronously loads persisted context/namespace from disk. Returns {} on any error. */
+export function loadPersistedState(): PersistedAppState {
+  try {
+    const text = readFileSync(configPath(), "utf8");
+    const parsed = JSON.parse(text) as unknown;
+
+    if (typeof parsed !== "object" || parsed === null) {
+      return {};
+    }
+
+    const data = parsed as Record<string, unknown>;
+
+    return {
+      activeContext: typeof data.activeContext === "string" ? data.activeContext : undefined,
+      activeNamespace: typeof data.activeNamespace === "string" ? data.activeNamespace : undefined,
+    };
+  } catch {
+    return {};
+  }
+}
+
+/** Best-effort write of context/namespace to disk. Errors are silently ignored. */
+export function savePersistedState(state: PersistedAppState): void {
+  try {
+    const path = configPath();
+    mkdirSync(dirname(path), { recursive: true });
+    writeFileSync(path, JSON.stringify(state, null, 2), "utf8");
+  } catch {
+    // Best-effort; ignore write errors
+  }
+}

package/src/app/theme.ts

@@ -0,0 +1,95 @@
+import { TextAttributes } from "@opentui/core";
+
+export type Tone = "neutral" | "info" | "success" | "warning" | "danger" | "accent";
+
+export interface ToneStyle {
+  border: string;
+  bg: string;
+  fg: string;
+}
+
+// ── Surfaces ─────────────────────────────────────────────────────────────────
+export const SURFACE = "#0b0f1a";
+export const SURFACE_ACCENT = "#0f1524";
+export const NAV_SURFACE = "#0d1320";
+export const RESOURCE_SURFACE = "#0c1422";
+export const INSPECTOR_SURFACE = "#0d1525";
+export const OVERLAY_SURFACE = "#111827";
+
+// ── Borders ───────────────────────────────────────────────────────────────────
+// Active border uses the official Kubernetes blue (#326CE5)
+export const PANEL_BORDER = "#1e3558";
+export const PANEL_BORDER_ACTIVE = "#326ce5";
+
+// ── Selection rows ────────────────────────────────────────────────────────────
+export const ROW_SELECTED = "#152040";
+export const ROW_SELECTED_ALT = "#111c38";
+
+// ── Text ──────────────────────────────────────────────────────────────────────
+export const TEXT_MUTED = TextAttributes.DIM;
+export const TEXT_PRIMARY = "#d4e1f7";
+export const TEXT_SUBTLE = "#6474a0";
+export const FILTER_BACKGROUND = "#090e1a";
+
+// ── Semantic tone colors ──────────────────────────────────────────────────────
+export const INFO = "#4a90d9";
+export const SUCCESS = "#4a9e72";
+export const WARNING = "#b08a3a";
+export const DANGER = "#a05050";
+export const ACCENT = "#5b8edb";
+
+// Key-hint accent (for [X] badge letter)
+export const KEY_HINT = "#5b8edb";
+
+// ── YAML colorizer ────────────────────────────────────────────────────────────
+export const YAML_KEY = "#7aa2f7";
+export const YAML_VALUE = "#9ece6a";
+export const YAML_COMMENT = "#4e5f88";
+
+// ── Unicode glyphs ────────────────────────────────────────────────────────────
+export const GLYPHS = {
+  // Row selection / multi-select
+  cursor:   "▶",   // active row cursor
+  marked:   "◆",   // multi-select on
+  unmarked: "◇",   // multi-select off
+
+  // Status dots
+  dot:      "●",   // healthy / ready
+  dotEmpty: "○",   // pending / starting
+  cross:    "✗",   // error / delete
+
+  // Event type
+  warn:     "▲",   // warning event
+
+  // Actions
+  stop:     "×",   // port-forward stop
+  forward:  "⇄",   // port-forward icon
+
+  // Key hints
+  enter:    "↵",   // confirm
+  esc:      "⎋",   // cancel / close
+  tab:      "⇥",   // tab key
+
+  // Inline decorators
+  sep:      "│",   // inline separator
+  cluster:  "◈",   // cluster header icon
+  ns:       "⊡",   // namespace header icon
+} as const;
+
+// ── Tone palette ──────────────────────────────────────────────────────────────
+const TONE_STYLES: Record<Tone, ToneStyle> = {
+  neutral: { border: PANEL_BORDER,    bg: "#12171d", fg: TEXT_SUBTLE },
+  info:    { border: INFO,            bg: "#101e30", fg: "#7ab3e8" },
+  success: { border: SUCCESS,         bg: "#0f1d18", fg: "#7abf9e" },
+  warning: { border: WARNING,         bg: "#1d1810", fg: "#c9a85a" },
+  danger:  { border: DANGER,          bg: "#1d1010", fg: "#c98080" },
+  accent:  { border: ACCENT,          bg: "#101a2e", fg: "#88aaee" },
+};
+
+export function toneStyles(tone: Tone): ToneStyle {
+  return TONE_STYLES[tone];
+}
+
+export function paneBorder(active: boolean): string {
+  return active ? PANEL_BORDER_ACTIVE : PANEL_BORDER;
+}

package/src/app/use-polling-tick.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+export interface UsePollingTickOptions {
+  enabled: boolean;
+  intervalMs: number;
+}
+
+/** Returns a counter that increments every intervalMs when enabled. Use as an effect dependency to trigger periodic re-fetches. */
+export function usePollingTick(options: UsePollingTickOptions): number {
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    if (!options.enabled) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setTick((current) => current + 1);
+    }, options.intervalMs);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [options.enabled, options.intervalMs]);
+
+  return tick;
+}

package/src/app/utils.ts

@@ -0,0 +1,274 @@
+import { DEFAULT_NAMESPACE } from "./app-state";
+import type { Tone } from "./theme";
+import type {
+  ActivePortForward,
+  LoadStatus,
+  NamespaceItem,
+  ResourceDetail,
+  ResourceDetailLine,
+  ResourceKind,
+  ResourceListItem,
+  ResourceRef,
+} from "../lib/k8s/types";
+
+export type ActionId = "open-shell" | "port-forward" | "toggle-logs" | "delete";
+
+export interface SelectedRefOptions {
+  detail?: ResourceDetail | undefined;
+  resource?: ResourceListItem | undefined;
+}
+
+export interface SelectedForwardsForRefOptions {
+  forwards: ActivePortForward[];
+  ref?: ResourceRef | undefined;
+}
+
+export interface StatusLineOptions {
+  ref?: ResourceRef | undefined;
+}
+
+export interface ResourceDetailTextResult {
+  id: string;
+  text: string;
+  revealable: boolean;
+}
+
+export interface DefaultNamespaceOptions {
+  namespaces: NamespaceItem[];
+  currentNamespace: string;
+}
+
+export interface FilterResourcesOptions {
+  resources: ResourceListItem[];
+  filter: string;
+}
+
+export interface NextVisibleResourceNameOptions {
+  resources: ResourceListItem[];
+  selectedName?: string | undefined;
+}
+
+export interface ResourcePreviewOptions {
+  resource?: ResourceListItem | undefined;
+}
+
+export interface CurrentKindLabelOptions {
+  resourceKinds: ResourceKind[];
+  selectedKind: string;
+}
+
+export interface PortForwardIdOptions {
+  context: string;
+  namespace: string;
+  ref: ResourceRef;
+  localPort: number;
+  remotePort: number;
+}
+
+export interface StartPortForwardLifecycleOptions {
+  context: string;
+  namespace: string;
+  target: ResourceRef;
+  namespaced: boolean;
+  localPort: number;
+  remotePort: number;
+}
+
+/** Converts an unknown thrown value into a displayable error object. Bug-fix: populates detail from error.cause. */
+export function loadError(error: unknown): { message: string; detail?: string | undefined } {
+  if (error instanceof Error) {
+    const detail = error.cause !== undefined ? String(error.cause) : undefined;
+    return { message: error.message, detail };
+  }
+
+  return { message: "Unexpected error" };
+}
+
+export function statusLine(options: StatusLineOptions): string {
+  if (!options.ref) {
+    return "No selection";
+  }
+
+  return `${options.ref.kind} ${options.ref.namespace ? `${options.ref.namespace}/` : ""}${options.ref.name}`;
+}
+
+export function deleteStatusMessage(targets: ResourceRef[], prefix: string): string {
+  if (targets.length === 0) {
+    return `${prefix} no selection`;
+  }
+
+  if (targets.length === 1) {
+    return `${prefix} ${statusLine({ ref: targets[0] })}`;
+  }
+
+  return `${prefix} ${targets.length} resources`;
+}
+
+export function resourceSelectionHint(selectedCount: number): string {
+  return selectedCount > 0 ? `/ filter  Space select  d delete ${selectedCount}` : "/ filter  Space select";
+}
+
+export function resourceEmptyState(status: LoadStatus, filter: string): string {
+  if (status === "loading") {
+    return "Loading resources...";
+  }
+
+  return filter ? `No resources match "${filter}"` : "No resources loaded";
+}
+
+/** Bug-fix: uses revealedText (was concealedText) to show the real value when revealed. */
+export function resourceDetailText(
+  line: string | ResourceDetailLine,
+  revealedIds: string[],
+): ResourceDetailTextResult {
+  if (typeof line === "string") {
+    return { id: line, text: line, revealable: false };
+  }
+
+  if (!line.revealable || !line.revealedText) {
+    return { id: line.id, text: line.text, revealable: false };
+  }
+
+  return {
+    id: line.id,
+    text: revealedIds.includes(line.id) ? line.revealedText : `${line.text}  [click to reveal]`,
+    revealable: true,
+  };
+}
+
+export function activePortForwardRoute(portForward: ActivePortForward): string {
+  return `localhost:${portForward.localPort} -> ${portForward.remotePort}`;
+}
+
+export function activePortForwardLabel(portForward: ActivePortForward): string {
+  return `${statusLine({ ref: portForward.ref })}  ${activePortForwardRoute(portForward)}`;
+}
+
+export function portForwardId(options: PortForwardIdOptions): string {
+  return `${options.context}:${options.namespace}:${options.ref.kind}:${options.ref.name}:${options.localPort}:${options.remotePort}`;
+}
+
+export function parseLocalPort(value: string): number | undefined {
+  if (!/^\d+$/.test(value.trim())) {
+    return undefined;
+  }
+
+  const parsed = Number.parseInt(value.trim(), 10);
+  return parsed > 0 && parsed <= 65_535 ? parsed : undefined;
+}
+
+export function statusTone(status: string): Tone {
+  const normalized = status.toLowerCase();
+
+  if (
+    ["fail", "error", "backoff", "crash", "evicted", "terminated", "stopped", "notready"].some((value) =>
+      normalized.includes(value),
+    )
+  ) {
+    return "danger";
+  }
+
+  if (["pending", "init", "terminating", "warning", "pressure"].some((value) => normalized.includes(value))) {
+    return "warning";
+  }
+
+  if (["running", "ready", "complete", "succeeded", "available"].some((value) => normalized.includes(value))) {
+    return "success";
+  }
+
+  return "info";
+}
+
+export function kindDescription(kind: ResourceKind): string {
+  const scope = kind.namespaced ? "Namespaced" : "Cluster";
+  const shortNames = kind.shortNames.length > 0 ? `  ${kind.shortNames.join(",")}` : "";
+  return `${scope}${shortNames}`;
+}
+
+export function currentKindLabel(options: CurrentKindLabelOptions): string {
+  return options.resourceKinds.find((kind) => kind.name === options.selectedKind)?.name ?? options.selectedKind;
+}
+
+export function resourcePreview(options: ResourcePreviewOptions): string[] {
+  if (!options.resource) {
+    return ["Select a resource to inspect it."];
+  }
+
+  return [
+    `kind: ${options.resource.ref.kind}`,
+    `name: ${options.resource.ref.name}`,
+    `namespace: ${options.resource.ref.namespace ?? "cluster"}`,
+    `status: ${options.resource.status}`,
+    `age: ${options.resource.age}`,
+    options.resource.summary ? `summary: ${options.resource.summary}` : "summary: -",
+  ];
+}
+
+export function normalizeFilter(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+export function filterResources(options: FilterResourcesOptions): ResourceListItem[] {
+  const query = normalizeFilter(options.filter);
+
+  if (!query) {
+    return options.resources;
+  }
+
+  return options.resources.filter((resource) => {
+    const searchBlob = [resource.ref.name, resource.status, resource.summary, resource.ref.namespace, resource.ref.kind]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+
+    return searchBlob.includes(query);
+  });
+}
+
+export function nextVisibleResourceName(options: NextVisibleResourceNameOptions): string | undefined {
+  if (options.resources.length === 0) {
+    return undefined;
+  }
+
+  if (options.selectedName && options.resources.some((resource) => resource.ref.name === options.selectedName)) {
+    return options.selectedName;
+  }
+
+  return options.resources[0]?.ref.name;
+}
+
+/** Returns the best namespace to use after loading. Removes the old openk8s-demo hard-code. */
+export function defaultNamespace(options: DefaultNamespaceOptions): string {
+  if (options.namespaces.some((namespace) => namespace.name === options.currentNamespace)) {
+    return options.currentNamespace;
+  }
+
+  return options.namespaces[0]?.name ?? DEFAULT_NAMESPACE;
+}
+
+export function selectedRef(options: SelectedRefOptions): ResourceRef | undefined {
+  if (
+    options.detail &&
+    options.resource &&
+    options.detail.ref.name === options.resource.ref.name &&
+    options.detail.ref.kind === options.resource.ref.kind &&
+    (options.detail.ref.namespace ?? "") === (options.resource.ref.namespace ?? "")
+  ) {
+    return options.detail.ref;
+  }
+
+  return options.resource?.ref;
+}
+
+export function selectedForwardsForRef(options: SelectedForwardsForRefOptions): ActivePortForward[] {
+  if (!options.ref) {
+    return [];
+  }
+
+  return options.forwards.filter(
+    (forward) =>
+      forward.ref.kind === options.ref?.kind &&
+      forward.ref.name === options.ref?.name &&
+      (forward.ref.namespace ?? "") === (options.ref?.namespace ?? ""),
+  );
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { App } from "./app/app";
+
+const renderer = await createCliRenderer({
+  useMouse: true,
+});
+createRoot(renderer).render(<App />);

package/src/lib/k8s/k8s-format.ts

@@ -0,0 +1,42 @@
+export function formatAge(value?: string | undefined): string {
+  if (!value) {
+    return "-";
+  }
+
+  // Normalize helm-style timestamps: "2024-05-12 10:30:00.123456789 +0000 UTC"
+  // into ISO 8601: "2024-05-12T10:30:00.123+00:00"
+  // Standard ISO strings (from kubectl) pass through unchanged.
+  const normalized = value
+    .replace(/ [A-Z]+$/, "")           // strip trailing timezone name: " UTC", " EST"
+    .replace(/(\.\d{3})\d*/, "$1")     // truncate sub-millisecond digits
+    .replace(" ", "T")                 // first space → T (date/time separator)
+    .replace(" ", "")                  // second space (before offset) → removed
+    .replace(/([+-]\d{2})(\d{2})$/, "$1:$2"); // +0000 → +00:00
+
+  const created = new Date(normalized);
+
+  if (Number.isNaN(created.valueOf())) {
+    return "-";
+  }
+
+  const diffMs = Date.now() - created.valueOf();
+  const diffMinutes = Math.max(0, Math.floor(diffMs / 60_000));
+
+  if (diffMinutes < 1) {
+    return "now";
+  }
+
+  if (diffMinutes < 60) {
+    return `${diffMinutes}m`;
+  }
+
+  const diffHours = Math.floor(diffMinutes / 60);
+
+  if (diffHours < 24) {
+    return `${diffHours}h`;
+  }
+
+  const diffDays = Math.floor(diffHours / 24);
+
+  return `${diffDays}d`;
+}