openk8s 0.0.1 → 1.0.1

package/src/app/components/inspector.tsx

@@ -0,0 +1,449 @@
+import { TextAttributes } from "@opentui/core";
+
+import {
+  GLYPHS,
+  KEY_HINT,
+  PANEL_BORDER,
+  PANEL_BORDER_ACTIVE,
+  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";
+
+export const INSPECTOR_TABS: Array<{ id: InspectorTab; label: string; hotkey: string }> = [
+  { id: "summary", label: "Summary", hotkey: "s" },
+  { id: "yaml", label: "YAML", hotkey: "y" },
+  { id: "events", label: "Events", hotkey: "v" },
+  { 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;
+  onSelect: (tab: InspectorTab) => void;
+}
+
+export function InspectorTabs({ activeTab, activePane, onSelect }: InspectorTabsProps) {
+  return (
+    <box style={{ flexDirection: "row", marginBottom: 0 }}>
+      {INSPECTOR_TABS.map((tab) => {
+        const selected = tab.id === activeTab;
+        const isActive = selected && activePane === "inspector";
+
+        return (
+          <box key={tab.id} onMouseDown={() => onSelect(tab.id)} style={{ flexGrow: 1, flexDirection: "column" }}>
+            <box
+              style={{
+                height: 2,
+                backgroundColor: selected ? ROW_SELECTED : undefined,
+                paddingLeft: 1,
+                paddingRight: 1,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <text
+                fg={selected ? TEXT_PRIMARY : TEXT_SUBTLE}
+                attributes={isActive ? TextAttributes.BOLD : TextAttributes.DIM}
+              >
+                <span fg={selected ? KEY_HINT : TEXT_SUBTLE}>
+                  {selected ? GLYPHS.dot : GLYPHS.dotEmpty}
+                </span>
+                {` ${tab.label}`}
+              </text>
+            </box>
+            <box
+              style={{
+                height: 1,
+                backgroundColor: selected ? PANEL_BORDER_ACTIVE : PANEL_BORDER,
+              }}
+            />
+          </box>
+        );
+      })}
+    </box>
+  );
+}
+
+export interface InspectorBodyProps {
+  activeTab: InspectorTab;
+  detail?: ResourceDetail | undefined;
+  detailStatus: string;
+  events: EventItem[];
+  eventsStatus: string;
+  fallbackLines: string[];
+  active: boolean;
+  onActivate: () => void;
+  revealedDetailLineIds: string[];
+  revealedSecretValues: Record<string, string>;
+  onToggleReveal: (id: string) => void;
+  onCopyText: (text: string, label?: string) => void;
+}
+
+export function InspectorBody({
+  activeTab,
+  detail,
+  detailStatus,
+  events,
+  eventsStatus,
+  fallbackLines,
+  active,
+  onActivate,
+  revealedDetailLineIds,
+  revealedSecretValues,
+  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" }}>
+        <box style={{ height: 1 }} />
+        <scrollbox
+          focused={active}
+          scrollX
+          horizontalScrollbarOptions={{ showArrows: false }}
+          onMouseDown={() => {
+            onActivate();
+            if (detail?.yaml) onCopyText(detail.yaml, "YAML");
+          }}
+          flexGrow={1}
+        >
+          <box style={{ flexDirection: "column", paddingRight: 1 }}>
+            {detail ? (
+              detail.yaml.split("\n").map((line, index) => {
+                const tokens = tokenizeYamlLine(line);
+                return (
+                  <box key={`${index}:${line}`} style={{ flexDirection: "row" }}>
+                    {tokens.map((token, tokenIndex) => (
+                      <text key={tokenIndex} fg={token.fg} wrapMode="none">
+                        {token.text}
+                      </text>
+                    ))}
+                  </box>
+                );
+              })
+            ) : detailStatus === "loading" ? (
+              <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+                Loading YAML...
+              </text>
+            ) : (
+              <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+                No YAML available
+              </text>
+            )}
+          </box>
+        </scrollbox>
+      </box>
+    );
+  }
+
+  // Describe tab — raw kubectl describe output with light colorization
+  if (activeTab === "describe") {
+    return (
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>
+        <box style={{ height: 1 }} />
+        <scrollbox
+          focused={active}
+          scrollX
+          horizontalScrollbarOptions={{ showArrows: false }}
+          onMouseDown={onActivate}
+          flexGrow={1}
+        >
+          <box style={{ flexDirection: "column", paddingRight: 1 }}>
+            {detail?.describe ? (
+              detail.describe.split("\n").map((line, index) => {
+                const tokens = tokenizeDescribeLine(line);
+                return (
+                  <box key={`${index}:${line}`} style={{ flexDirection: "row" }}>
+                    {tokens.map((token, tokenIndex) => (
+                      <text key={tokenIndex} fg={token.fg} wrapMode="none">
+                        {token.text}
+                      </text>
+                    ))}
+                  </box>
+                );
+              })
+            ) : detailStatus === "loading" ? (
+              <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+                Loading describe output...
+              </text>
+            ) : (
+              <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+                No describe output available
+              </text>
+            )}
+          </box>
+        </scrollbox>
+      </box>
+    );
+  }
+
+  // Summary / Events tabs
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+      <box style={{ height: 1 }} />
+      <scrollbox focused={active} onMouseDown={onActivate} flexGrow={1}>
+        <box style={{ flexDirection: "column", width: "100%", paddingRight: 1 }}>
+          {activeTab === "events" ? (
+            <EventList events={events} status={eventsStatus} />
+          ) : detail ? (
+            <DetailSectionsInternal
+              sections={detail.summarySections}
+              revealedIds={revealedDetailLineIds}
+              revealedSecretValues={revealedSecretValues}
+              onToggleReveal={onToggleReveal}
+              onCopyText={onCopyText}
+            />
+          ) : detailStatus === "loading" ? (
+            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+              Loading resource detail...
+            </text>
+          ) : (
+            fallbackLines.map((line) => (
+              <text key={line} fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+                {line}
+              </text>
+            ))
+          )}
+        </box>
+      </scrollbox>
+    </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/kind-rows.tsx

@@ -0,0 +1,66 @@
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { useEffect, useRef } from "react";
+
+import { GLYPHS, KEY_HINT, ROW_SELECTED_ALT, TEXT_PRIMARY, TEXT_SUBTLE } from "../theme";
+import { kindDescription } from "../utils";
+import type { ResourceKind } from "../../lib/k8s/types";
+
+export interface KindRowsProps {
+  resourceKinds: ResourceKind[];
+  selectedKind: string;
+  onSelect: (kind: string) => void;
+  onActivate: () => void;
+}
+
+export function KindRows({ resourceKinds, selectedKind, onSelect, onActivate }: KindRowsProps) {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  useEffect(() => {
+    scrollRef.current?.scrollChildIntoView(`kind:${selectedKind}`);
+  }, [selectedKind]);
+
+  if (resourceKinds.length === 0) {
+    return (
+      <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+        No discovered resources
+      </text>
+    );
+  }
+
+  return (
+    <scrollbox ref={scrollRef} onMouseDown={onActivate} style={{ flexGrow: 1 }}>
+      <box style={{ flexDirection: "column", width: "100%" }}>
+        {resourceKinds.map((kind) => {
+          const selected = kind.name === selectedKind;
+
+          return (
+            <box
+              id={`kind:${kind.name}`}
+              key={kind.name}
+              onMouseDown={() => {
+                onActivate();
+                onSelect(kind.name);
+              }}
+              style={{
+                width: "100%",
+                flexDirection: "column",
+                paddingLeft: 1,
+                paddingRight: 1,
+                backgroundColor: selected ? ROW_SELECTED_ALT : undefined,
+              }}
+            >
+              <text fg={selected ? TEXT_PRIMARY : TEXT_SUBTLE} attributes={selected ? TextAttributes.BOLD : TextAttributes.DIM}>
+                <span fg={selected ? KEY_HINT : "transparent"}>{GLYPHS.cursor}</span>
+                {` ${kind.name}`}
+              </text>
+              <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+                {"   "}
+                {kindDescription(kind)}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+    </scrollbox>
+  );
+}

package/src/app/components/notification-tray.tsx

@@ -0,0 +1,59 @@
+import { GLYPHS, OVERLAY_SURFACE, TEXT_SUBTLE, toneStyles } from "../theme";
+import type { Notification } from "../../lib/k8s/types";
+
+export interface NotificationTrayProps {
+  notifications: Notification[];
+  onDismiss: (id: string) => void;
+}
+
+export function NotificationTray({ notifications, onDismiss }: NotificationTrayProps) {
+  if (notifications.length === 0) {
+    return undefined;
+  }
+
+  // Show at most 3, most recent last (rendered top-to-bottom)
+  const visible = notifications.slice(-3);
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: "55%",
+        top: 3,
+        width: "44%",
+        flexDirection: "column",
+        rowGap: 1,
+      }}
+    >
+      {visible.map((notification) => {
+        const palette = toneStyles(notification.tone);
+
+        return (
+          <box
+            key={notification.id}
+            style={{
+              border: true,
+              borderColor: palette.border,
+              borderStyle: "rounded",
+              backgroundColor: OVERLAY_SURFACE,
+              paddingLeft: 1,
+              paddingRight: 1,
+              paddingTop: 0,
+              paddingBottom: 0,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <text fg={palette.fg} wrapMode="word" style={{ flexShrink: 1, flexGrow: 1 }}>
+              {notification.message}
+            </text>
+            <text fg={TEXT_SUBTLE} onMouseDown={() => onDismiss(notification.id)}>
+              {`  ${GLYPHS.stop}`}
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/app/components/overlays/delete-confirm-overlay.tsx

@@ -0,0 +1,79 @@
+import { TextAttributes } from "@opentui/core";
+
+import {
+  DANGER,
+  GLYPHS,
+  KEY_HINT,
+  OVERLAY_SURFACE,
+  TEXT_MUTED,
+  TEXT_SUBTLE,
+  toneStyles,
+} from "../../theme";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH } from "./shared";
+import { statusLine } from "../../utils";
+import type { ResourceRef } from "../../../lib/k8s/types";
+
+export interface DeleteConfirmOverlayProps {
+  targets: ResourceRef[];
+}
+
+export function DeleteConfirmOverlay({ targets }: DeleteConfirmOverlayProps) {
+  const palette = toneStyles("danger");
+  const title =
+    targets.length <= 1 ? `Delete ${statusLine({ ref: targets[0] })}?` : `Delete ${targets.length} selected resources?`;
+  const overlayHeight = Math.min(22, Math.max(9, targets.length + 8));
+
+  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="Confirm Delete"
+    >
+      <text fg={palette.fg} attributes={TextAttributes.BOLD}>
+        {title}
+      </text>
+      {targets.length <= 1 ? (
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          Runs kubectl delete on the current selection.
+        </text>
+      ) : (
+        <scrollbox style={{ flexGrow: 1, marginTop: 1 }}>
+          <box style={{ flexDirection: "column", width: "100%" }}>
+            {targets.map((target) => (
+              <text
+                key={`${target.kind}:${target.namespace ?? "cluster"}:${target.name}`}
+                fg={TEXT_SUBTLE}
+                attributes={TEXT_MUTED}
+              >
+                <span fg={DANGER}>{GLYPHS.cross}</span>
+                {" "}
+                {statusLine({ ref: target })}
+              </text>
+            ))}
+          </box>
+        </scrollbox>
+      )}
+      <box style={{ flexDirection: "row", columnGap: 2, marginTop: 1, justifyContent: "flex-end" }}>
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={DANGER}>{GLYPHS.enter}</span>
+          {" confirm"}
+        </text>
+        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+          <span fg={KEY_HINT}>{GLYPHS.esc}</span>
+          {" cancel"}
+        </text>
+      </box>
+    </box>
+  );
+}