openk8s 0.0.1 → 1.0.1

package/src/app/components/overlays/helm-rollback-overlay.tsx

@@ -0,0 +1,86 @@
+import { TextAttributes } from "@opentui/core";
+
+import {
+  FILTER_BACKGROUND,
+  GLYPHS,
+  KEY_HINT,
+  OVERLAY_SURFACE,
+  PANEL_BORDER_ACTIVE,
+  TEXT_MUTED,
+  TEXT_SUBTLE,
+  toneStyles,
+} from "../../theme";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH } from "./shared";
+
+export interface HelmRollbackOverlayProps {
+  releaseName: string;
+  revisionValue: string;
+  onChange: (value: string) => void;
+}
+
+export function HelmRollbackOverlay({ releaseName, revisionValue, onChange }: HelmRollbackOverlayProps) {
+  const palette = toneStyles("warning");
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: DIALOG_LEFT,
+        top: DIALOG_TOP,
+        width: DIALOG_WIDTH,
+        height: 12,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: palette.border,
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title="Helm Rollback"
+    >
+      <text fg={palette.fg} attributes={TextAttributes.BOLD}>
+        {releaseName}
+      </text>
+      <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+        {"Leave revision empty to roll back to previous version"}
+      </text>
+      <box
+        style={{
+          border: true,
+          borderColor: PANEL_BORDER_ACTIVE,
+          borderStyle: "rounded",
+          backgroundColor: FILTER_BACKGROUND,
+          paddingLeft: 1,
+          paddingRight: 1,
+          marginTop: 1,
+          height: 3,
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+        }}
+      >
+        <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+          Revision:
+        </text>
+        <input
+          focused
+          value={revisionValue}
+          placeholder="(previous)"
+          style={{ flexGrow: 1, marginLeft: 1 }}
+          onInput={onChange}
+          onChange={onChange}
+        />
+      </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>
+          {" rollback"}
+        </text>
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
+          {" cancel"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/app/components/overlays/index.ts

@@ -0,0 +1,12 @@
+export { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, KeyHintRow } from "./shared";
+export { SelectOverlay, type SelectOverlayProps } from "./select-overlay";
+export { DeleteConfirmOverlay, type DeleteConfirmOverlayProps } from "./delete-confirm-overlay";
+export {
+  PortForwardOverlay,
+  type PortForwardEntry,
+  type PortForwardOverlayProps,
+  buildPortForwardEntries,
+} from "./port-forward-overlay";
+export { LogsDialog, type LogsDialogActions, type LogsDialogProps, logLineColor } from "./logs-dialog";
+export { ScaleDialog, type ScaleDialogProps } from "./scale-dialog";
+export { HelmRollbackOverlay, type HelmRollbackOverlayProps } from "./helm-rollback-overlay";

package/src/app/components/overlays/logs-dialog.tsx

@@ -0,0 +1,303 @@
+import { useEffect, useMemo, useState } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+
+import {
+  FILTER_BACKGROUND,
+  GLYPHS,
+  KEY_HINT,
+  OVERLAY_SURFACE,
+  PANEL_BORDER_ACTIVE,
+  TEXT_MUTED,
+  TEXT_SUBTLE,
+  YAML_COMMENT,
+  toneStyles,
+} from "../../theme";
+import type { LoadStatus, LogOptions } from "../../../lib/k8s/types";
+
+function logLineColor(line: string): string {
+  const lower = line.toLowerCase();
+  if (/\b(error|err|fatal|panic|critical)\b/.test(lower)) return toneStyles("danger").fg;
+  if (/\bwarn(?:ing)?\b/.test(lower)) return toneStyles("warning").fg;
+  if (/\binfo(?:rmation)?\b/.test(lower)) return toneStyles("info").fg;
+  if (/\bdebug\b/.test(lower)) return TEXT_SUBTLE;
+  if (/\btrace\b/.test(lower)) return YAML_COMMENT;
+  return TEXT_SUBTLE;
+}
+
+export interface LogsDialogActions {
+  nextMatch: () => void;
+  prevMatch: () => void;
+}
+
+export interface LogsDialogProps {
+  target?: string | undefined;
+  logsText: string;
+  status: LoadStatus;
+  scrollRef: { current: ScrollBoxRenderable | null };
+  logsOptions: LogOptions;
+  logsContainer?: string | undefined;
+  containers?: string[] | undefined;
+  inputMode?: "tail" | "since" | undefined;
+  inputValue?: string | undefined;
+  onOptionInputChange?: ((value: string) => void) | undefined;
+  searchMode?: boolean | undefined;
+  searchText?: string | undefined;
+  onSearchChange?: ((value: string) => void) | undefined;
+  actionsRef?: React.MutableRefObject<LogsDialogActions | null> | undefined;
+}
+
+export function LogsDialog({
+  target,
+  logsText,
+  status,
+  scrollRef,
+  logsOptions,
+  logsContainer,
+  containers,
+  inputMode,
+  inputValue,
+  onOptionInputChange,
+  searchMode,
+  searchText,
+  onSearchChange,
+  actionsRef,
+}: LogsDialogProps) {
+  const lines = logsText ? logsText.split("\n") : [];
+  const palette = toneStyles("info");
+  const [currentMatchIdx, setCurrentMatchIdx] = useState(0);
+
+  const matchIndices = useMemo(() => {
+    if (!searchText) return [];
+    const lower = searchText.toLowerCase();
+    return lines.reduce<number[]>((acc, line, i) => {
+      if (line.toLowerCase().includes(lower)) acc.push(i);
+      return acc;
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [logsText, searchText]);
+
+  useEffect(() => {
+    if (!searchText) return;
+    setCurrentMatchIdx(0);
+    const firstLine = matchIndices[0];
+    if (firstLine !== undefined) {
+      scrollRef.current?.scrollTo(firstLine);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText]);
+
+  const nextMatch = () => {
+    if (matchIndices.length === 0) return;
+    const next = (currentMatchIdx + 1) % matchIndices.length;
+    setCurrentMatchIdx(next);
+    const lineIdx = matchIndices[next];
+    if (lineIdx !== undefined) scrollRef.current?.scrollTo(lineIdx);
+  };
+
+  const prevMatch = () => {
+    if (matchIndices.length === 0) return;
+    const prev = (currentMatchIdx - 1 + matchIndices.length) % matchIndices.length;
+    setCurrentMatchIdx(prev);
+    const lineIdx = matchIndices[prev];
+    if (lineIdx !== undefined) scrollRef.current?.scrollTo(lineIdx);
+  };
+
+  if (actionsRef) {
+    actionsRef.current = { nextMatch, prevMatch };
+  }
+
+  const warningFg = toneStyles("warning").fg;
+  const multiContainer = (containers?.length ?? 0) > 1;
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: "10%",
+        top: "8%",
+        width: "80%",
+        height: "84%",
+        border: true,
+        borderColor: palette.border,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 1,
+        paddingBottom: 1,
+        flexDirection: "column",
+      }}
+      title={`Logs  ${target ?? ""}${logsContainer ? `  [${logsContainer}]` : ""}`}
+    >
+      {/* Options status bar */}
+      <box style={{ flexDirection: "row", columnGap: 2, marginBottom: 0 }}>
+        <text fg={logsOptions.previous ? warningFg : TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>P</span>
+          {` prev:${logsOptions.previous ? "on" : "off"}`}
+        </text>
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>T</span>
+          {` tail:${logsOptions.tail}`}
+        </text>
+        {logsOptions.since ? (
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <span fg={KEY_HINT}>S</span>
+            {` since:${logsOptions.since}`}
+          </text>
+        ) : undefined}
+        {multiContainer ? (
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <span fg={KEY_HINT}>C</span>
+            {logsContainer ? ` ctr:${logsContainer}` : " all-ctrs"}
+          </text>
+        ) : undefined}
+      </box>
+
+      {/* Log content */}
+      <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} stickyScroll stickyStart="bottom">
+        <box style={{ flexDirection: "column", width: "100%" }}>
+          {status === "loading" ? (
+            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+              <span fg={KEY_HINT}>{GLYPHS.dotEmpty}</span>
+              {" Loading logs..."}
+            </text>
+          ) : lines.length === 0 ? (
+            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+              No logs loaded
+            </text>
+          ) : (
+            lines.map((line, index) => {
+              if (searchText) {
+                const lowerLine = line.toLowerCase();
+                const lowerSearch = searchText.toLowerCase();
+                const isMatch = lowerLine.includes(lowerSearch);
+                if (!isMatch) {
+                  return (
+                    <text key={`${index}:${line}`} fg={YAML_COMMENT} attributes={TextAttributes.DIM}>
+                      {line}
+                    </text>
+                  );
+                }
+                const isCurrentMatch = matchIndices[currentMatchIdx] === index;
+                const matchStart = lowerLine.indexOf(lowerSearch);
+                const before = line.slice(0, matchStart);
+                const matched = line.slice(matchStart, matchStart + searchText.length);
+                const after = line.slice(matchStart + searchText.length);
+                return (
+                  <text key={`${index}:${line}`} fg={logLineColor(line)}>
+                    {before}
+                    <span fg={warningFg} attributes={isCurrentMatch ? TextAttributes.BOLD : TextAttributes.DIM}>
+                      {matched}
+                    </span>
+                    {after}
+                  </text>
+                );
+              }
+              return (
+                <text key={`${index}:${line}`} fg={logLineColor(line)}>
+                  {line}
+                </text>
+              );
+            })
+          )}
+        </box>
+      </scrollbox>
+
+      {/* Option input row */}
+      {inputMode ? (
+        <box
+          style={{
+            border: true,
+            borderColor: PANEL_BORDER_ACTIVE,
+            borderStyle: "rounded",
+            backgroundColor: FILTER_BACKGROUND,
+            paddingLeft: 1,
+            paddingRight: 1,
+            marginTop: 1,
+            height: 3,
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "row",
+          }}
+        >
+          <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+            {inputMode === "tail" ? "Tail lines:" : "Since (e.g. 1h, 30m):"}
+          </text>
+          <input
+            focused
+            value={inputValue ?? ""}
+            placeholder={inputMode === "tail" ? "120" : "1h"}
+            style={{ flexGrow: 1, marginLeft: 1 }}
+            onInput={onOptionInputChange}
+            onChange={onOptionInputChange}
+          />
+        </box>
+      ) : undefined}
+
+      {/* Search input row */}
+      {searchMode ? (
+        <box
+          style={{
+            border: true,
+            borderColor: PANEL_BORDER_ACTIVE,
+            borderStyle: "rounded",
+            backgroundColor: FILTER_BACKGROUND,
+            paddingLeft: 1,
+            paddingRight: 1,
+            marginTop: 1,
+            height: 3,
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "row",
+          }}
+        >
+          <text fg={KEY_HINT}>/</text>
+          <input
+            focused
+            value={searchText ?? ""}
+            placeholder="search..."
+            style={{ flexGrow: 1, marginLeft: 1 }}
+            onInput={onSearchChange}
+            onChange={onSearchChange}
+          />
+          {matchIndices.length > 0 ? (
+            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+              {` ${currentMatchIdx + 1}/${matchIndices.length}`}
+            </text>
+          ) : searchText ? (
+            <text fg={toneStyles("danger").fg} attributes={TEXT_MUTED}>
+              {" no match"}
+            </text>
+          ) : undefined}
+        </box>
+      ) : undefined}
+
+      {/* Hints */}
+      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
+        {inputMode || searchMode ? (
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <span fg={KEY_HINT}>{GLYPHS.enter}</span>
+            {" confirm"}
+          </text>
+        ) : (
+          <>
+            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+              <span fg={KEY_HINT}>{"/"}</span>
+              {" search"}
+            </text>
+            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+              <span fg={KEY_HINT}>{"↑↓"}</span>
+              {" scroll"}
+            </text>
+          </>
+        )}
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
+          {" close"}
+        </text>
+      </box>
+    </box>
+  );
+}
+
+export { logLineColor };

package/src/app/components/overlays/port-forward-overlay.tsx

@@ -0,0 +1,184 @@
+import { TextAttributes } from "@opentui/core";
+
+import {
+  FILTER_BACKGROUND,
+  GLYPHS,
+  KEY_HINT,
+  OVERLAY_SURFACE,
+  PANEL_BORDER_ACTIVE,
+  TEXT_MUTED,
+  TEXT_PRIMARY,
+  TEXT_SUBTLE,
+  toneStyles,
+} from "../../theme";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH } from "./shared";
+import type { ActivePortForward } from "../../../lib/k8s/types";
+
+export interface PortForwardEntry {
+  remotePort: number;
+  suggestedLocalPort: number;
+  activeForward?: ActivePortForward | undefined;
+}
+
+export interface PortForwardOverlayProps {
+  target: string;
+  /** All ports declared on the resource, merged with active-forward status */
+  entries: PortForwardEntry[];
+  /** Index into entries that has keyboard focus */
+  selectedIndex: number;
+  /** Current value of the local-port input (for the selected inactive entry) */
+  localPortValue: string;
+  onChange: (value: string) => void;
+}
+
+export function buildPortForwardEntries(
+  portForwards: { localPort: number; remotePort: number }[],
+  activeForwards: ActivePortForward[],
+): PortForwardEntry[] {
+  const entries: PortForwardEntry[] = portForwards.map((pf) => ({
+    remotePort: pf.remotePort,
+    suggestedLocalPort: pf.localPort,
+    activeForward: activeForwards.find((af) => af.remotePort === pf.remotePort),
+  }));
+
+  // Append any active forwards whose remotePort is not already in portForwards
+  for (const af of activeForwards) {
+    if (!entries.some((e) => e.remotePort === af.remotePort)) {
+      entries.push({ remotePort: af.remotePort, suggestedLocalPort: af.localPort, activeForward: af });
+    }
+  }
+
+  return entries;
+}
+
+export function PortForwardOverlay({
+  target,
+  entries,
+  selectedIndex,
+  localPortValue,
+  onChange,
+}: PortForwardOverlayProps) {
+  const palette = toneStyles("accent");
+  const selectedEntry = entries[selectedIndex];
+  const selectedIsActive = Boolean(selectedEntry?.activeForward);
+  const anyActive = entries.some((e) => e.activeForward);
+  const anyInactive = entries.some((e) => !e.activeForward);
+
+  // height: border(2) + padding(2) + title(1) + list rows(N) + input(4 if inactive selected) + gap(1) + hints(1)
+  const inputSection = selectedEntry && !selectedIsActive ? 4 : 0;
+  const overlayHeight = Math.min(26, 7 + entries.length + inputSection);
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: DIALOG_LEFT,
+        top: DIALOG_TOP,
+        width: DIALOG_WIDTH,
+        height: overlayHeight,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: palette.border,
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title="Port Forward"
+    >
+      <text fg={palette.fg} attributes={TextAttributes.BOLD}>
+        <span fg={KEY_HINT}>{GLYPHS.forward}</span>
+        {`  ${target}`}
+      </text>
+
+      <box style={{ flexDirection: "column", marginTop: 1 }}>
+        {entries.map((entry, index) => {
+          const selected = index === selectedIndex;
+          const fwd = entry.activeForward;
+          const fwdPalette = fwd
+            ? toneStyles(fwd.status === "ready" ? "success" : "warning")
+            : toneStyles("neutral");
+          const statusDot = fwd ? GLYPHS.dot : GLYPHS.dotEmpty;
+
+          return (
+            <text
+              key={entry.remotePort}
+              fg={selected ? TEXT_PRIMARY : TEXT_SUBTLE}
+              attributes={selected ? undefined : TextAttributes.DIM}
+            >
+              <span fg={selected ? palette.fg : "transparent"}>{GLYPHS.cursor}</span>
+              {" "}
+              <span fg={fwdPalette.fg}>{statusDot}</span>
+              {fwd
+                ? ` localhost:${fwd.localPort} → :${entry.remotePort}  `
+                : ` :${entry.remotePort}  `}
+              {fwd ? (
+                <span fg={fwdPalette.fg} attributes={TextAttributes.DIM}>
+                  {fwd.status}
+                </span>
+              ) : (
+                <span fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+                  {`→ local :${entry.suggestedLocalPort}`}
+                </span>
+              )}
+            </text>
+          );
+        })}
+      </box>
+
+      {selectedEntry && !selectedIsActive && (
+        <box
+          style={{
+            border: true,
+            borderColor: PANEL_BORDER_ACTIVE,
+            borderStyle: "rounded",
+            backgroundColor: FILTER_BACKGROUND,
+            paddingLeft: 1,
+            paddingRight: 1,
+            marginTop: 1,
+            height: 3,
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "row",
+          }}
+        >
+          <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+            Local:
+          </text>
+          <input
+            focused
+            value={localPortValue}
+            placeholder={String(selectedEntry.suggestedLocalPort)}
+            style={{ flexGrow: 1, marginLeft: 1 }}
+            onInput={onChange}
+            onChange={onChange}
+          />
+        </box>
+      )}
+
+      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
+        {anyInactive && (
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <span fg={KEY_HINT}>{GLYPHS.enter}</span>
+            {" start"}
+          </text>
+        )}
+        {anyActive && (
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <span fg={KEY_HINT}>{"X"}</span>
+            {" stop"}
+          </text>
+        )}
+        {entries.length > 1 && (
+          <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+            <span fg={KEY_HINT}>{"↑↓"}</span>
+            {" navigate"}
+          </text>
+        )}
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
+          {" close"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/app/components/overlays/scale-dialog.tsx

@@ -0,0 +1,96 @@
+import { TextAttributes } from "@opentui/core";
+
+import {
+  FILTER_BACKGROUND,
+  GLYPHS,
+  KEY_HINT,
+  OVERLAY_SURFACE,
+  PANEL_BORDER_ACTIVE,
+  TEXT_MUTED,
+  TEXT_PRIMARY,
+  TEXT_SUBTLE,
+  toneStyles,
+} from "../../theme";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH } from "./shared";
+
+export interface ScaleDialogProps {
+  target: string;
+  currentReplicas?: number | undefined;
+  replicasValue: string;
+  onChange: (value: string) => void;
+}
+
+export function ScaleDialog({ target, currentReplicas, replicasValue, onChange }: ScaleDialogProps) {
+  const palette = toneStyles("accent");
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: DIALOG_LEFT,
+        top: DIALOG_TOP,
+        width: DIALOG_WIDTH,
+        height: 12,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: palette.border,
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title="Scale Replicas"
+    >
+      <text fg={palette.fg} attributes={TextAttributes.BOLD}>
+        {target}
+      </text>
+      <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+        {currentReplicas !== undefined ? (
+          <>
+            {"Current  "}
+            <span fg={TEXT_PRIMARY} attributes={TextAttributes.BOLD}>{currentReplicas}</span>
+            {" replicas"}
+          </>
+        ) : (
+          "Replicas unknown"
+        )}
+      </text>
+      <box
+        style={{
+          border: true,
+          borderColor: PANEL_BORDER_ACTIVE,
+          borderStyle: "rounded",
+          backgroundColor: FILTER_BACKGROUND,
+          paddingLeft: 1,
+          paddingRight: 1,
+          marginTop: 1,
+          height: 3,
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+        }}
+      >
+        <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+          Target:
+        </text>
+        <input
+          focused
+          value={replicasValue}
+          placeholder={currentReplicas !== undefined ? String(currentReplicas) : "0"}
+          style={{ flexGrow: 1, marginLeft: 1 }}
+          onInput={onChange}
+          onChange={onChange}
+        />
+      </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>
+          {" scale"}
+        </text>
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
+          {" cancel"}
+        </text>
+      </box>
+    </box>
+  );
+}