openk8s 0.0.1 → 1.0.0

package/src/app/components/overlays/select-overlay.tsx

@@ -0,0 +1,68 @@
+import {
+  GLYPHS,
+  KEY_HINT,
+  OVERLAY_SURFACE,
+  PANEL_BORDER_ACTIVE,
+  ROW_SELECTED,
+  TEXT_MUTED,
+  TEXT_PRIMARY,
+  TEXT_SUBTLE,
+} from "../../theme";
+
+export interface SelectOverlayProps {
+  title: string;
+  items: Array<{ name: string; description: string }>;
+  selectedIndex: number;
+  onChange: (index: number) => void;
+}
+
+export function SelectOverlay({ title, items, selectedIndex, onChange }: SelectOverlayProps) {
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: "20%",
+        top: "15%",
+        width: "60%",
+        height: "70%",
+        border: true,
+        borderColor: PANEL_BORDER_ACTIVE,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title={title}
+    >
+      <box style={{ flexGrow: 1 }}>
+        <select
+          focused
+          style={{ flexGrow: 1 }}
+          backgroundColor={OVERLAY_SURFACE}
+          focusedBackgroundColor={OVERLAY_SURFACE}
+          textColor={TEXT_PRIMARY}
+          focusedTextColor={TEXT_PRIMARY}
+          selectedBackgroundColor={ROW_SELECTED}
+          selectedTextColor={TEXT_PRIMARY}
+          descriptionColor={TEXT_SUBTLE}
+          selectedDescriptionColor={TEXT_PRIMARY}
+          showDescription
+          showScrollIndicator
+          selectedIndex={selectedIndex}
+          options={items}
+          onChange={(index) => onChange(index)}
+        />
+      </box>
+      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.enter}</span>
+          {" select"}
+        </text>
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
+          {" close"}
+        </text>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { GLYPHS, KEY_HINT, TEXT_MUTED, TEXT_SUBTLE } from "../../theme";
+
+export const DIALOG_LEFT = "28%";
+export const DIALOG_TOP = "20%";
+export const DIALOG_WIDTH = "44%";
+
+export function KeyHintRow({ hints }: { hints: [string, string][] }) {
+  return (
+    <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1 }}>
+      {hints.map(([key, label]) => (
+        <text key={key} fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.enter === key || GLYPHS.esc === key ? key : key}</span>
+          {` ${label}`}
+        </text>
+      ))}
+    </box>
+  );
+}

package/src/app/components/port-forwards-tray.tsx

@@ -0,0 +1,57 @@
+import { TextAttributes } from "@opentui/core";
+
+import { DANGER, GLYPHS, KEY_HINT, OVERLAY_SURFACE, PANEL_BORDER, TEXT_PRIMARY, TEXT_SUBTLE } from "../theme";
+import { activePortForwardLabel } from "../utils";
+import type { ActivePortForward } from "../../lib/k8s/types";
+
+export interface PortForwardsTrayProps {
+  forwards: ActivePortForward[];
+  onStop: (id: string) => void;
+}
+
+export function PortForwardsTray({ forwards, onStop }: PortForwardsTrayProps) {
+  if (forwards.length === 0) {
+    return undefined;
+  }
+
+  return (
+    <box
+      style={{
+        border: true,
+        borderColor: PANEL_BORDER,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        paddingLeft: 1,
+        paddingRight: 1,
+        flexDirection: "column",
+      }}
+    >
+      {/* Tray heading */}
+      <text fg={KEY_HINT}>
+        {GLYPHS.forward}
+        <span fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>{" Port Forwards"}</span>
+      </text>
+      <box style={{ flexDirection: "column", width: "100%" }}>
+        {forwards.map((forward) => {
+          const isReady = forward.status === "ready";
+          const statusDot = isReady ? GLYPHS.dot : GLYPHS.dotEmpty;
+          const statusFg = isReady ? KEY_HINT : TEXT_SUBTLE;
+
+          return (
+            <box key={forward.id} style={{ flexDirection: "row", justifyContent: "space-between", width: "100%" }}>
+              <text fg={isReady ? TEXT_PRIMARY : TEXT_SUBTLE}>
+                <span fg={statusFg}>{statusDot}</span>
+                {`  ${activePortForwardLabel(forward)}  `}
+                <span fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>{forward.status}</span>
+              </text>
+              <text fg={DANGER} onMouseDown={() => onStop(forward.id)}>
+                <span fg={DANGER}>{GLYPHS.stop}</span>
+                {" stop"}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,120 @@
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { useEffect, useRef } from "react";
+
+import { GLYPHS, KEY_HINT, ROW_SELECTED, ROW_SELECTED_ALT, TEXT_PRIMARY, TEXT_SUBTLE, toneStyles } from "../theme";
+import { resourceEmptyState, statusTone } from "../utils";
+import type { LoadStatus, NodeMetricEntry, PodMetricEntry, ResourceListItem } from "../../lib/k8s/types";
+
+export interface ResourceRowsProps {
+  resources: ResourceListItem[];
+  selectedName?: string | undefined;
+  selectedNames: string[];
+  status: LoadStatus;
+  filter: string;
+  /** Set of "kind:name" keys for resources with active port-forwards */
+  activeForwardKeys: ReadonlySet<string>;
+  podMetrics?: Record<string, PodMetricEntry> | undefined;
+  nodeMetrics?: Record<string, NodeMetricEntry> | undefined;
+  onSelect: (name?: string | undefined) => void;
+  onToggleSelected: (name: string) => void;
+  onActivate: () => void;
+}
+
+export function ResourceRows({
+  resources,
+  selectedName,
+  selectedNames,
+  status,
+  filter,
+  activeForwardKeys,
+  podMetrics,
+  nodeMetrics,
+  onSelect,
+  onToggleSelected,
+  onActivate,
+}: ResourceRowsProps) {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  useEffect(() => {
+    if (selectedName) {
+      scrollRef.current?.scrollChildIntoView(`resource:${selectedName}`);
+    }
+  }, [selectedName, resources]);
+
+  return (
+    <scrollbox ref={scrollRef} onMouseDown={onActivate} style={{ flexGrow: 1 }}>
+      {resources.length === 0 ? (
+        <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+          {resourceEmptyState(status, filter)}
+        </text>
+      ) : (
+      <box style={{ flexDirection: "column", width: "100%" }}>
+        {resources.map((resource) => {
+          const selected = resource.ref.name === selectedName;
+          const marked = selectedNames.includes(resource.ref.name);
+          const palette = toneStyles(statusTone(resource.status));
+
+          // Determine status glyph
+          const tone = statusTone(resource.status);
+          const statusGlyph =
+            tone === "danger" ? GLYPHS.cross :
+            tone === "warning" ? GLYPHS.warn :
+            tone === "success" ? GLYPHS.dot :
+            GLYPHS.dotEmpty;
+
+          const hasActiveForward = activeForwardKeys.has(
+            `${resource.ref.kind.toLowerCase()}:${resource.ref.name}`
+          );
+
+          // Metrics suffix
+          const pm = podMetrics?.[resource.ref.name];
+          const nm = nodeMetrics?.[resource.ref.name];
+          let metricsSuffix = "";
+          if (pm) {
+            metricsSuffix = `  cpu ${pm.cpu}  mem ${pm.memory}`;
+          } else if (nm) {
+            metricsSuffix = `  cpu ${nm.cpu} (${nm.cpuPct}%)  mem ${nm.memory} (${nm.memPct}%)`;
+          }
+
+          return (
+            <box
+              id={`resource:${resource.ref.name}`}
+              key={`${resource.ref.kind}:${resource.ref.namespace ?? "cluster"}:${resource.ref.name}`}
+              onMouseDown={() => {
+                onActivate();
+                onSelect(resource.ref.name);
+              }}
+              style={{
+                width: "100%",
+                flexDirection: "column",
+                paddingLeft: 1,
+                paddingRight: 1,
+                backgroundColor: selected ? ROW_SELECTED : marked ? ROW_SELECTED_ALT : undefined,
+              }}
+            >
+              {/* Name row: cursor ▶ + mark ◆/◇ + name + optional forward icon */}
+              <text fg={TEXT_PRIMARY} attributes={selected ? TextAttributes.BOLD : undefined}>
+                <span fg={selected ? palette.fg : "transparent"}>{GLYPHS.cursor}</span>
+                {" "}
+                <span fg={marked ? palette.fg : TEXT_SUBTLE}>
+                  {marked ? GLYPHS.marked : GLYPHS.unmarked}
+                </span>
+                {` ${resource.ref.name}`}
+                {hasActiveForward ? (
+                  <span fg={KEY_HINT}>{` ${GLYPHS.forward}`}</span>
+                ) : undefined}
+              </text>
+              {/* Status row: dot + status text + age + summary */}
+              <text fg={palette.fg}>
+                {"     "}
+                <span fg={palette.fg}>{statusGlyph}</span>
+                {` ${resource.status}  ${resource.age}${resource.summary ? `  ${resource.summary}` : ""}${metricsSuffix}`}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+      )}
+    </scrollbox>
+  );
+}