openk8s 1.0.1 → 1.0.2

package/src/app/app-state.ts

@@ -1,17 +1,7 @@
-import type {
-  ActivePortForward,
-  AppError,
-  AppState,
-  EventItem,
-  LoadStatus,
-  LogOptions,
-  Notification,
-  OverlayId,
-  PaneId,
-  ResourceDetail,
-  ResourceKind,
-  ResourceListItem,
-} from "../lib/k8s/types";
+import type { AppAction } from "./app-actions";
+import type { AppState, PaneId } from "../lib/k8s/types";
+
+export { type AppAction } from "./app-actions";
 
 export const DEFAULT_NAMESPACE = "default";
 
@@ -54,254 +44,6 @@ export const initialState: AppState = {
   helmRollbackRevision: "",
 };
 
-export interface SetActivePaneAction {
-  type: "setActivePane";
-  pane: PaneId;
-}
-
-export interface CyclePaneAction {
-  type: "cyclePane";
-  direction: 1 | -1;
-}
-
-export interface SetOverlayAction {
-  type: "setOverlay";
-  overlay?: OverlayId | undefined;
-}
-
-export interface SetInspectorTabAction {
-  type: "setInspectorTab";
-  tab: AppState["inspectorTab"];
-}
-
-export interface SetKubectlAvailableAction {
-  type: "setKubectlAvailable";
-  available: boolean;
-}
-
-export interface SetStatusMessageAction {
-  type: "setStatusMessage";
-  message: string;
-}
-
-export interface SetErrorAction {
-  type: "setError";
-  error?: AppError | undefined;
-}
-
-export interface SetContextsStatusAction {
-  type: "setContextsStatus";
-  status: LoadStatus;
-}
-
-export interface SetContextsAction {
-  type: "setContexts";
-  contexts: AppState["contexts"];
-  activeContext?: string | undefined;
-}
-
-export interface SetActiveContextAction {
-  type: "setActiveContext";
-  activeContext?: string | undefined;
-}
-
-export interface SetNamespacesStatusAction {
-  type: "setNamespacesStatus";
-  status: LoadStatus;
-}
-
-export interface SetNamespacesAction {
-  type: "setNamespaces";
-  namespaces: AppState["namespaces"];
-  activeNamespace: string;
-}
-
-export interface SetActiveNamespaceAction {
-  type: "setActiveNamespace";
-  namespace: string;
-}
-
-export interface SetResourceKindsStatusAction {
-  type: "setResourceKindsStatus";
-  status: LoadStatus;
-}
-
-export interface SetResourceKindsAction {
-  type: "setResourceKinds";
-  resourceKinds: ResourceKind[];
-  selectedKind: string;
-}
-
-export interface SetSelectedKindAction {
-  type: "setSelectedKind";
-  kind: string;
-}
-
-export interface SetResourcesStatusAction {
-  type: "setResourcesStatus";
-  status: LoadStatus;
-}
-
-export interface SetResourcesAction {
-  type: "setResources";
-  resources: ResourceListItem[];
-  selectedResourceName?: string | undefined;
-}
-
-export interface ToggleSelectedResourceAction {
-  type: "toggleSelectedResource";
-  name: string;
-}
-
-export interface ClearSelectedResourcesAction {
-  type: "clearSelectedResources";
-}
-
-export interface SetResourceFilterAction {
-  type: "setResourceFilter";
-  value: string;
-}
-
-export interface SetSelectedResourceNameAction {
-  type: "setSelectedResourceName";
-  name?: string | undefined;
-}
-
-export interface SetSelectedResourceDetailStatusAction {
-  type: "setSelectedResourceDetailStatus";
-  status: LoadStatus;
-}
-
-export interface SetSelectedResourceDetailAction {
-  type: "setSelectedResourceDetail";
-  detail?: ResourceDetail | undefined;
-}
-
-export interface SetEventsStatusAction {
-  type: "setEventsStatus";
-  status: LoadStatus;
-}
-
-export interface SetEventsAction {
-  type: "setEvents";
-  events: EventItem[];
-}
-
-export interface ToggleRevealDetailLineAction {
-  type: "toggleRevealDetailLine";
-  id: string;
-}
-
-export interface AddActivePortForwardAction {
-  type: "addActivePortForward";
-  forward: ActivePortForward;
-}
-
-export interface UpdateActivePortForwardAction {
-  type: "updateActivePortForward";
-  id: string;
-  patch: Partial<ActivePortForward>;
-}
-
-export interface RemoveActivePortForwardAction {
-  type: "removeActivePortForward";
-  id: string;
-}
-
-export interface ClearTransientViewsAction {
-  type: "clearTransientViews";
-}
-
-export interface SetLogsDataAction {
-  type: "setLogsData";
-  logsTarget?: string | undefined;
-  logsText: string;
-  logsStatus: LoadStatus;
-}
-
-export interface SetLogsContainerAction {
-  type: "setLogsContainer";
-  container?: string | undefined;
-}
-
-export interface SetLogsOptionsAction {
-  type: "setLogsOptions";
-  options: LogOptions;
-}
-
-export interface PushNotificationAction {
-  type: "pushNotification";
-  notification: Notification;
-}
-
-export interface DismissNotificationAction {
-  type: "dismissNotification";
-  id: string;
-}
-
-export interface SetRevealedSecretValueAction {
-  type: "setRevealedSecretValue";
-  id: string;
-  value: string;
-}
-
-export interface SetPodMetricsAction {
-  type: "setPodMetrics";
-  metrics: AppState["podMetrics"];
-}
-
-export interface SetNodeMetricsAction {
-  type: "setNodeMetrics";
-  metrics: AppState["nodeMetrics"];
-}
-
-export interface SetHelmRollbackRevisionAction {
-  type: "setHelmRollbackRevision";
-  value: string;
-}
-
-export type AppAction =
-  | SetActivePaneAction
-  | CyclePaneAction
-  | SetOverlayAction
-  | SetInspectorTabAction
-  | SetKubectlAvailableAction
-  | SetStatusMessageAction
-  | SetErrorAction
-  | SetContextsStatusAction
-  | SetContextsAction
-  | SetActiveContextAction
-  | SetNamespacesStatusAction
-  | SetNamespacesAction
-  | SetActiveNamespaceAction
-  | SetResourceKindsStatusAction
-  | SetResourceKindsAction
-  | SetSelectedKindAction
-  | SetResourcesStatusAction
-  | SetResourcesAction
-  | ToggleSelectedResourceAction
-  | ClearSelectedResourcesAction
-  | SetResourceFilterAction
-  | SetSelectedResourceNameAction
-  | SetSelectedResourceDetailStatusAction
-  | SetSelectedResourceDetailAction
-  | SetEventsStatusAction
-  | SetEventsAction
-  | ToggleRevealDetailLineAction
-  | AddActivePortForwardAction
-  | UpdateActivePortForwardAction
-  | RemoveActivePortForwardAction
-  | ClearTransientViewsAction
-  | SetLogsDataAction
-  | SetLogsContainerAction
-  | SetLogsOptionsAction
-  | PushNotificationAction
-  | DismissNotificationAction
-  | SetRevealedSecretValueAction
-  | SetPodMetricsAction
-  | SetNodeMetricsAction
-  | SetHelmRollbackRevisionAction;
-
 const PANE_ORDER: PaneId[] = ["clusters", "resources", "inspector"];
 
 export function reducer(state: AppState, action: AppAction): AppState {

package/src/app/app.tsx

@@ -1,4 +1,4 @@
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { type ScrollBoxRenderable } from "@opentui/core";
 import { useRenderer, useTerminalDimensions } from "@opentui/react";
 import { useCallback, useMemo, useReducer, useRef, useState } from "react";
 
@@ -14,12 +14,10 @@ import {
   PANEL_BORDER_ACTIVE,
   RESOURCE_SURFACE,
   SURFACE,
-  SURFACE_ACCENT,
   TEXT_MUTED,
   TEXT_PRIMARY,
   TEXT_SUBTLE,
   paneBorder,
-  toneStyles,
 } from "./theme";
 import {
   currentKindLabel,
@@ -31,9 +29,12 @@ import {
   statusLine,
 } from "./utils";
 import { usePollingTick } from "./use-polling-tick";
+import { useFooterHints, useFooterHintRows } from "./use-footer-hints";
 import { InspectorBody, InspectorTabs, INSPECTOR_TABS } from "./components/inspector";
 import { KindRows } from "./components/kind-rows";
 import { ResourceRows } from "./components/resource-rows";
+import { Header } from "./components/header";
+import { Footer } from "./components/footer";
 import {
   DeleteConfirmOverlay,
   HelmRollbackOverlay,
@@ -47,13 +48,7 @@ import {
 import { PortForwardsTray } from "./components/port-forwards-tray";
 import { NotificationTray } from "./components/notification-tray";
 import { KubectlService } from "../lib/kubectl/kubectl-service";
-import type {
-  ClusterContext,
-  NamespaceItem,
-  OverlayId,
-  PaneId,
-  ResourceDetailLine,
-} from "../lib/k8s/types";
+import type { ClusterContext, NamespaceItem, OverlayId, PaneId, ResourceDetailLine } from "../lib/k8s/types";
 import type { NotificationTone } from "../lib/k8s/types";
 
 import { useClipboard } from "./hooks/use-clipboard";
@@ -198,7 +193,13 @@ export function App() {
     [state.activePortForwards],
   );
 
-  const footerPalette = toneStyles("neutral");
+  const selectedKindLabel = useMemo(
+    () => currentKindLabel({ resourceKinds: state.resourceKinds, selectedKind: state.selectedKind }),
+    [state.resourceKinds, state.selectedKind],
+  );
+
+  const footerHints = useFooterHints(filterMode, state, activeResourceRef, activeDetail, selectedResourcePortForwards, deleteTargets, kubectl);
+  const { footerHintsRow1, footerHintsRow2 } = useFooterHintRows(footerHints, dims.width);
 
   // ── Hooks ─────────────────────────────────────────────────────────────────
 
@@ -334,168 +335,19 @@ export function App() {
             }))
           : [];
 
-  // ── Footer hints (context-aware) ─────────────────────────────────────────
-
-  const footerHints = useMemo((): [string, string][] => {
-    // Filter mode: only show filter-specific controls
-    if (filterMode) {
-      return [
-        [GLYPHS.enter, "confirm"],
-        [GLYPHS.esc, "cancel"],
-        ["^U", "clear"],
-      ];
-    }
-
-    const isHelm = activeResourceRef?.kind.toLowerCase() === "helmreleases";
-    const hasResource = Boolean(activeResourceRef);
-    const hasPortForwards =
-      (activeDetail?.portForwards?.length ?? 0) > 0 || selectedResourcePortForwards.length > 0;
-
-    // Clusters pane: kind-list navigation only
-    if (state.activePane === "clusters") {
-      return [
-        [GLYPHS.tab, "panes"],
-        ["↑↓", "kinds"],
-        ["R", "refresh"],
-      ];
-    }
-
-    // Inspector pane: navigation back, refresh
-    if (state.activePane === "inspector") {
-      return [
-        [GLYPHS.tab, "panes"],
-        ["←", "back"],
-        ["R", "refresh"],
-      ];
-    }
-
-    // Resources pane — base hints always present
-    const hints: [string, string][] = [
-      [GLYPHS.tab, "panes"],
-      ["↑↓", "navigate"],
-      ["/", "filter"],
-      ["R", "refresh"],
-    ];
-
-    if (!hasResource) return hints;
-
-    if (isHelm) {
-      hints.push(
-        ["E", "edit values"],
-        ...(deleteTargets.length > 0 ? [["D", "delete"] as [string, string]] : []),
-        ["B", "rollback"],
-        ["U", "upgrade"],
-      );
-    } else {
-      hints.push(["L", "logs"], ["E", "edit"], ["X", "shell"]);
-      if (hasPortForwards) hints.push(["F", "forward"]);
-      if (deleteTargets.length > 0) hints.push(["D", "delete"]);
-      if (activeResourceRef && kubectl.canScale(activeResourceRef)) hints.push(["⇧S", "scale"]);
-      if (activeResourceRef && kubectl.canRolloutRestart(activeResourceRef)) hints.push(["⇧R", "restart"]);
-    }
-
-    return hints;
-  }, [
-    filterMode,
-    state.activePane,
-    activeResourceRef,
-    activeDetail,
-    selectedResourcePortForwards,
-    deleteTargets,
-  ]);
-
-  // Split footerHints across two rows so hints never overflow.
-  // Row 1: primary hints, Row 2: overflow hints.
-  // Each badge: key.length + label.length + 3 chars; columnGap: 2 between items.
-  const { footerHintsRow1, footerHintsRow2 } = useMemo(() => {
-    const innerWidth = dims.width - 4; // 2 border + 2 padding
-    const avail1 = innerWidth;
-    const avail2 = innerWidth;
-    const row1: [string, string][] = [];
-    const row2: [string, string][] = [];
-    let used1 = 0;
-    let used2 = 0;
-    for (const [key, label] of footerHints) {
-      const w = key.length + label.length + 3;
-      const gap1 = row1.length === 0 ? 0 : 2;
-      const gap2 = row2.length === 0 ? 0 : 2;
-      if (used1 + gap1 + w <= avail1) {
-        used1 += gap1 + w;
-        row1.push([key, label]);
-      } else if (used2 + gap2 + w <= avail2) {
-        used2 += gap2 + w;
-        row2.push([key, label]);
-      }
-      // else drop — can't fit either row
-    }
-    return { footerHintsRow1: row1, footerHintsRow2: row2 };
-  }, [footerHints, dims.width]);
-
   // ── Render ────────────────────────────────────────────────────────────────
 
   return (
     <box style={{ flexDirection: "column", flexGrow: 1, backgroundColor: SURFACE }}>
-      {/* Header bar */}
-      <box
-        onMouseDown={() => dispatch({ type: "setActivePane", pane: "clusters" })}
-        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}>
-          {state.activeContext
-            ? `${state.activeContext} / ${state.activeNamespace} / ${selectedKind?.name ?? "..."}`
-            : state.statusMessage}
-        </text>
-      </box>
+      <Header
+        activeContext={state.activeContext}
+        activeNamespace={state.activeNamespace}
+        selectedKindLabel={selectedKindLabel}
+        statusMessage={state.statusMessage}
+        onActivate={() => dispatch({ type: "setActivePane", pane: "clusters" })}
+      />
 
-      {/* Footer bar — status + hotkeys across two rows */}
-      <box
-        style={{
-          height: 4,
-          border: true,
-          borderColor: footerPalette.border,
-          borderStyle: "rounded",
-          backgroundColor: footerPalette.bg,
-          paddingLeft: 1,
-          paddingRight: 1,
-          flexDirection: "column",
-        }}
-      >
-        {/* Row 1: first set of key hints */}
-        <box style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flexGrow: 1 }}>
-          <box style={{ flexDirection: "row", columnGap: 2 }}>
-            {footerHintsRow1.map(([key, label]) => (
-              <text key={`${key}:${label}`} fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-                {"["}
-                <span fg={KEY_HINT}>{key}</span>
-                {`] ${label}`}
-              </text>
-            ))}
-          </box>
-        </box>
-        {/* Row 2: overflow hints, right-aligned */}
-        <box style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flexGrow: 1 }}>
-          <box style={{ flexDirection: "row", columnGap: 2 }}>
-            {footerHintsRow2.map(([key, label]) => (
-              <text key={`${key}:${label}`} fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
-                {"["}
-                <span fg={KEY_HINT}>{key}</span>
-                {`] ${label}`}
-              </text>
-            ))}
-          </box>
-        </box>
-      </box>
+      <Footer hintRows={[footerHintsRow1, footerHintsRow2]} />
 
       {/* Main content area */}
       <box style={{ flexGrow: 1, flexDirection: "row", columnGap: 1, padding: 1, backgroundColor: SURFACE }}>
@@ -538,7 +390,7 @@ export function App() {
 
         {/* Resources pane */}
         <box
-          title={`${PANE_TITLES.resources}: ${currentKindLabel({ resourceKinds: state.resourceKinds, selectedKind: state.selectedKind })}`}
+          title={`${PANE_TITLES.resources}: ${selectedKindLabel}`}
           onMouseDown={() => dispatch({ type: "setActivePane", pane: "resources" })}
           style={{
             flexGrow: 1,
@@ -569,7 +421,7 @@ export function App() {
               flexDirection: "row",
             }}
           >
-            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+            <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
               Filter:
             </text>
             <input

package/src/app/components/detail-sections.tsx

@@ -0,0 +1,131 @@
+import { TextAttributes } from "@opentui/core";
+
+import { GLYPHS, KEY_HINT, TEXT_PRIMARY, TEXT_SUBTLE, toneStyles } from "../theme";
+import type { EventItem, ResourceDetailLine, ResourceDetailSection } from "../../lib/k8s/types";
+
+export interface EventListProps {
+  events: EventItem[];
+  status: string;
+}
+
+export 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>
+  );
+}
+
+export interface DetailSectionsInternalProps {
+  sections: ResourceDetailSection[];
+  revealedIds: string[];
+  revealedSecretValues: Record<string, string>;
+  onToggleReveal: (id: string) => void;
+  onCopyText: (text: string, label?: string) => void;
+}
+
+export 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 }}>
+          <text fg={KEY_HINT}>
+            {"─ "}
+            <span fg={TEXT_PRIMARY} attributes={TextAttributes.BOLD}>{section.title}</span>
+          </text>
+          {section.lines.map((line, index) => {
+            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);
+
+            const fetchedValue = structuredLine ? revealedSecretValues[structuredLine.id] : undefined;
+
+            const rawText = structuredLine?.text ?? (line as string);
+            const displayText = isRevealable && isRevealed
+              ? (fetchedValue ?? structuredLine!.revealedText ?? rawText)
+              : rawText;
+            const copyValue = fetchedValue ?? structuredLine?.revealedText ?? rawText;
+            const hasCopyButton = structuredLine !== undefined;
+
+            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>
+  );
+}