openk8s 1.0.4 → 1.1.0

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

@@ -17,7 +17,7 @@ export function KindRows({ resourceKinds, selectedKind, onSelect, onActivate }:
 
   useEffect(() => {
     scrollRef.current?.scrollChildIntoView(`kind:${selectedKind}`);
-  }, [selectedKind]);
+  }, [selectedKind, resourceKinds]);
 
   if (resourceKinds.length === 0) {
     return (

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

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState } from "react";
+import { TextAttributes } from "@opentui/core";
+
+import { GLYPHS, KEY_HINT, OVERLAY_SURFACE, TEXT_PRIMARY, TEXT_SUBTLE, toneStyles } from "../theme";
+import {
+  NOTIFICATION_PROGRESS_INTERVAL_MS,
+  NOTIFICATION_SLIDE_FRAMES,
+  NOTIFICATION_SLIDE_INTERVAL_MS,
+  TOAST_DURATION_MS,
+} from "../constants";
+import type { Notification } from "../../lib/k8s/types";
+
+export interface NotificationCardProps {
+  notification: Notification;
+  onDismiss: (id: string) => void;
+  onAction: (notificationId: string, actionId: string) => void;
+}
+
+const TONE_ICONS: Record<Notification["tone"], string> = {
+  info: GLYPHS.dotEmpty,
+  success: GLYPHS.dot,
+  warning: GLYPHS.warn,
+  danger: GLYPHS.cross,
+};
+
+const SLIDE_DISTANCE = 15;
+
+function easeOut(t: number): number {
+  return 1 - Math.pow(1 - t, 2);
+}
+
+export function NotificationCard({ notification, onDismiss, onAction }: NotificationCardProps) {
+  const palette = toneStyles(notification.tone);
+  const icon = TONE_ICONS[notification.tone];
+
+  const [phase, setPhase] = useState<"entering" | "visible" | "exiting">("entering");
+  const [slideOffset, setSlideOffset] = useState(SLIDE_DISTANCE);
+  const [progress, setProgress] = useState(1);
+
+  const slideFrameRef = useRef(0);
+  const progressRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+  // Slide-in animation
+  useEffect(() => {
+    const interval = setInterval(() => {
+      slideFrameRef.current += 1;
+      const frame = slideFrameRef.current;
+      if (frame >= NOTIFICATION_SLIDE_FRAMES) {
+        setSlideOffset(0);
+        setPhase("visible");
+        clearInterval(interval);
+        return;
+      }
+      const t = frame / NOTIFICATION_SLIDE_FRAMES;
+      setSlideOffset(Math.round(SLIDE_DISTANCE * (1 - easeOut(t))));
+    }, NOTIFICATION_SLIDE_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Progress bar (non-persistent only)
+  useEffect(() => {
+    if (notification.persistent || phase !== "visible") return;
+
+    const startTime = Date.now();
+    progressRef.current = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const remaining = Math.max(0, 1 - elapsed / TOAST_DURATION_MS);
+      setProgress(remaining);
+      if (remaining <= 0) {
+        if (progressRef.current) clearInterval(progressRef.current);
+      }
+    }, NOTIFICATION_PROGRESS_INTERVAL_MS);
+
+    return () => {
+      if (progressRef.current) clearInterval(progressRef.current);
+    };
+  }, [notification.persistent, phase]);
+
+  const handleDismiss = (): void => {
+    if (phase === "exiting") return;
+    if (progressRef.current) clearInterval(progressRef.current);
+    setPhase("exiting");
+    slideFrameRef.current = 0;
+    const interval = setInterval(() => {
+      slideFrameRef.current += 1;
+      const frame = slideFrameRef.current;
+      if (frame >= NOTIFICATION_SLIDE_FRAMES) {
+        clearInterval(interval);
+        onDismiss(notification.id);
+        return;
+      }
+      const t = frame / NOTIFICATION_SLIDE_FRAMES;
+      setSlideOffset(Math.round(SLIDE_DISTANCE * easeOut(t)));
+    }, NOTIFICATION_SLIDE_INTERVAL_MS);
+  };
+
+  const barWidth = Math.round(progress * 20);
+
+  return (
+    <box
+      style={{
+        border: true,
+        borderColor: palette.border,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        paddingLeft: 1,
+        paddingRight: 1,
+        flexDirection: "column",
+        marginLeft: slideOffset,
+      }}
+      onMouseDown={handleDismiss}
+    >
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        <text fg={palette.fg}>
+          {icon}
+        </text>
+        <text fg={TEXT_PRIMARY} wrapMode="word" style={{ flexGrow: 1, marginLeft: 1 }}>
+          {notification.message}
+        </text>
+      </box>
+      {notification.actions.length > 0 ? (
+        <box style={{ flexDirection: "row", columnGap: 2, marginTop: 0 }}>
+          {notification.actions.map((action) => (
+            <text
+              key={action.id}
+              fg={KEY_HINT}
+              attributes={TextAttributes.BOLD}
+              onMouseDown={(e: unknown) => {
+                (e as { stopPropagation?: () => void })?.stopPropagation?.();
+                onAction(notification.id, action.id);
+              }}
+            >
+              {`[${action.label}]`}
+            </text>
+          ))}
+          {!notification.persistent && (
+            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+              {`${"█".repeat(barWidth)}${"░".repeat(20 - barWidth)}`}
+            </text>
+          )}
+        </box>
+      ) : null}
+    </box>
+  );
+}

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

@@ -1,59 +1,40 @@
-import { GLYPHS, OVERLAY_SURFACE, TEXT_SUBTLE, toneStyles } from "../theme";
+import { MAX_VISIBLE_NOTIFICATIONS, NOTIFICATION_WIDTH_PCT } from "../constants";
 import type { Notification } from "../../lib/k8s/types";
+import { NotificationCard } from "./notification-card";
 
 export interface NotificationTrayProps {
   notifications: Notification[];
   onDismiss: (id: string) => void;
+  onAction: (notificationId: string, actionId: string) => void;
 }
 
-export function NotificationTray({ notifications, onDismiss }: NotificationTrayProps) {
+export function NotificationTray({ notifications, onDismiss, onAction }: NotificationTrayProps) {
   if (notifications.length === 0) {
-    return undefined;
+    return null;
   }
 
-  // Show at most 3, most recent last (rendered top-to-bottom)
-  const visible = notifications.slice(-3);
+  // Show at most MAX_VISIBLE_NOTIFICATIONS, most recent last (rendered bottom-to-top)
+  const visible = notifications.slice(-MAX_VISIBLE_NOTIFICATIONS);
 
   return (
     <box
       style={{
         position: "absolute",
-        left: "55%",
-        top: 3,
-        width: "44%",
+        bottom: 5,
+        right: 1,
+        width: NOTIFICATION_WIDTH_PCT,
         flexDirection: "column",
-        rowGap: 1,
+        rowGap: 0,
       }}
     >
-      {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>
-        );
-      })}
+      {visible.map((notification) => (
+        <NotificationCard
+          key={notification.id}
+          notification={notification}
+          onDismiss={onDismiss}
+          onAction={onAction}
+        />
+      ))}
     </box>
   );
 }

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

@@ -3,13 +3,12 @@ import { TextAttributes } from "@opentui/core";
 import {
   DANGER,
   GLYPHS,
-  KEY_HINT,
   OVERLAY_SURFACE,
-  TEXT_MUTED,
+  ATTR_DIM,
   TEXT_SUBTLE,
   toneStyles,
 } from "../../theme";
-import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH } from "./shared";
+import { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, KeyHintRow } from "./shared";
 import { statusLine } from "../../utils";
 import type { ResourceRef } from "../../../lib/k8s/types";
 
@@ -20,7 +19,11 @@ export interface DeleteConfirmOverlayProps {
 export function DeleteConfirmOverlay({ targets }: DeleteConfirmOverlayProps) {
   const palette = toneStyles("danger");
   const title =
-    targets.length <= 1 ? `Delete ${statusLine({ ref: targets[0] })}?` : `Delete ${targets.length} selected resources?`;
+    targets.length === 0
+      ? "No selection"
+      : 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 (
@@ -43,8 +46,12 @@ export function DeleteConfirmOverlay({ targets }: DeleteConfirmOverlayProps) {
       <text fg={palette.fg} attributes={TextAttributes.BOLD}>
         {title}
       </text>
-      {targets.length <= 1 ? (
-        <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+      {targets.length === 0 ? (
+        <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
+          Nothing selected for deletion.
+        </text>
+      ) : targets.length === 1 ? (
+        <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
           Runs kubectl delete on the current selection.
         </text>
       ) : (
@@ -54,7 +61,7 @@ export function DeleteConfirmOverlay({ targets }: DeleteConfirmOverlayProps) {
               <text
                 key={`${target.kind}:${target.namespace ?? "cluster"}:${target.name}`}
                 fg={TEXT_SUBTLE}
-                attributes={TEXT_MUTED}
+                attributes={ATTR_DIM}
               >
                 <span fg={DANGER}>{GLYPHS.cross}</span>
                 {" "}
@@ -64,16 +71,7 @@ export function DeleteConfirmOverlay({ targets }: DeleteConfirmOverlayProps) {
           </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>
+      <KeyHintRow hints={[[GLYPHS.enter, "confirm"], [GLYPHS.esc, "cancel"]]} />
     </box>
   );
 }

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

@@ -1,16 +1,7 @@
 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";
+import { GLYPHS, ATTR_DIM, TEXT_SUBTLE, toneStyles } from "../../theme";
+import { DialogFrame, KeyHintRow, TextInput } from "./shared";
 
 export interface HelmRollbackOverlayProps {
   releaseName: string;
@@ -22,65 +13,20 @@ export function HelmRollbackOverlay({ releaseName, revisionValue, onChange }: He
   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"
-    >
+    <DialogFrame title="Helm Rollback" tone="warning" height={12}>
       <text fg={palette.fg} attributes={TextAttributes.BOLD}>
         {releaseName}
       </text>
-      <text fg={TEXT_SUBTLE} attributes={TEXT_MUTED}>
+      <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
         {"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>
+      <TextInput
+        label="Revision:"
+        value={revisionValue}
+        placeholder="(previous)"
+        onChange={onChange}
+      />
+      <KeyHintRow hints={[[GLYPHS.enter, "rollback"], [GLYPHS.esc, "cancel"]]} />
+    </DialogFrame>
   );
 }

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

@@ -0,0 +1,173 @@
+import { TextAttributes } from "@opentui/core";
+import { useTerminalDimensions } from "@opentui/react";
+
+import { GLYPHS, OVERLAY_SURFACE, PANEL_BORDER_ACTIVE, KEY_HINT, TEXT_SUBTLE, ATTR_DIM, toneStyles } from "../../theme";
+import { KeyHintRow } from "./shared";
+
+interface HelpSection {
+  title: string;
+  rows: [string, string][];
+}
+
+const LEFT_SECTIONS: HelpSection[] = [
+  {
+    title: "Navigation",
+    rows: [
+      ["Tab / Shift+Tab", "cycle panes"],
+      ["Up/Down or k/j", "navigate list"],
+      ["Left or h", "back / prev tab"],
+      ["Right", "forward / next tab"],
+      ["Space", "multi-select resource"],
+    ],
+  },
+  {
+    title: "Inspector Tabs",
+    rows: [
+      ["S", "summary tab"],
+      ["Y", "yaml tab (press again to copy)"],
+      ["V", "events tab"],
+      ["I", "describe tab"],
+    ],
+  },
+  {
+    title: "Resource Actions",
+    rows: [
+      ["L", "logs"],
+      ["E", "edit (or edit helm values)"],
+      ["X", "shell (kubectl exec)"],
+      ["F", "port forward (per-resource)"],
+      ["D", "delete"],
+      ["Shift+S", "scale"],
+      ["Shift+R", "rollout restart"],
+    ],
+  },
+  {
+    title: "Helm Actions",
+    rows: [
+      ["B", "rollback"],
+      ["U", "upgrade --reuse-values"],
+    ],
+  },
+];
+
+const RIGHT_SECTIONS: HelpSection[] = [
+  {
+    title: "Overlays",
+    rows: [
+      ["C", "cluster switcher"],
+      ["N", "namespace switcher"],
+      ["Shift+N", "notification history"],
+      ["Shift+F", "active port forwards"],
+      ["?", "this help"],
+    ],
+  },
+  {
+    title: "Filter",
+    rows: [
+      ["/", "enter filter mode"],
+      ["Enter", "confirm filter"],
+      ["Escape", "cancel filter"],
+      ["Ctrl+U", "clear filter"],
+    ],
+  },
+  {
+    title: "Logs Overlay",
+    rows: [
+      ["/", "search"],
+      ["N / Shift+N", "next / prev match"],
+      ["C", "switch container"],
+      ["P", "toggle previous logs"],
+      ["T", "set tail lines"],
+      ["S", "set since duration"],
+      ["Up/Down", "scroll logs"],
+    ],
+  },
+  {
+    title: "Port Forward List",
+    rows: [
+      ["X", "stop selected forward"],
+      ["C", "stop all forwards"],
+    ],
+  },
+  {
+    title: "Global",
+    rows: [
+      ["R", "refresh current view"],
+      ["Escape", "close overlay"],
+      ["Ctrl+C", "quit"],
+    ],
+  },
+];
+
+const ALL_SECTIONS = [...LEFT_SECTIONS, ...RIGHT_SECTIONS];
+
+const TWO_COLUMN_THRESHOLD = 90;
+
+function renderSection(section: HelpSection, index: number, keyWidth: number): React.ReactNode {
+  return (
+    <box key={section.title} style={{ flexDirection: "column", width: "100%" }}>
+      {index > 0 && <box style={{ height: 1 }} />}
+      <text fg={toneStyles("accent").fg} attributes={TextAttributes.BOLD}>
+        {section.title}
+      </text>
+      {section.rows.map(([key, label], rowIdx) => (
+        <box key={`${index}:${rowIdx}`} style={{ flexDirection: "row", width: "100%", paddingLeft: 2 }}>
+          <box style={{ width: keyWidth }}>
+            <text fg={KEY_HINT}>{key}</text>
+          </box>
+          <text fg={TEXT_SUBTLE} attributes={ATTR_DIM}>
+            {label}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+function renderColumn(sections: HelpSection[], keyWidth: number): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1, width: "100%" }}>
+      {sections.map((section, index) => renderSection(section, index, keyWidth))}
+    </box>
+  );
+}
+
+export function HelpOverlay() {
+  const dims = useTerminalDimensions();
+  const twoColumns = dims.width >= TWO_COLUMN_THRESHOLD;
+
+  const left = twoColumns ? "8%" : "16%";
+  const width = twoColumns ? "84%" : "68%";
+  const keyWidth = twoColumns ? 20 : 24;
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left,
+        top: "6%",
+        width,
+        height: "86%",
+        border: true,
+        borderColor: PANEL_BORDER_ACTIVE,
+        borderStyle: "rounded",
+        backgroundColor: OVERLAY_SURFACE,
+        padding: 1,
+        flexDirection: "column",
+      }}
+      title="Keyboard Shortcuts"
+    >
+      <scrollbox style={{ flexGrow: 1 }} focused>
+        {twoColumns ? (
+          <box style={{ flexDirection: "row", width: "100%", columnGap: 2 }}>
+            {renderColumn(LEFT_SECTIONS, keyWidth)}
+            {renderColumn(RIGHT_SECTIONS, keyWidth)}
+          </box>
+        ) : (
+          renderColumn(ALL_SECTIONS, keyWidth)
+        )}
+      </scrollbox>
+      <KeyHintRow hints={[[GLYPHS.esc, "close"]]} />
+    </box>
+  );
+}

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

@@ -1,4 +1,4 @@
-export { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, KeyHintRow } from "./shared";
+export { DIALOG_LEFT, DIALOG_TOP, DIALOG_WIDTH, DialogFrame, KeyHintRow, TextInput } from "./shared";
 export { SelectOverlay, type SelectOverlayProps } from "./select-overlay";
 export { DeleteConfirmOverlay, type DeleteConfirmOverlayProps } from "./delete-confirm-overlay";
 export {
@@ -7,6 +7,9 @@ export {
   type PortForwardOverlayProps,
   buildPortForwardEntries,
 } from "./port-forward-overlay";
-export { LogsDialog, type LogsDialogActions, type LogsDialogProps, logLineColor } from "./logs-dialog";
+export { PortForwardListOverlay, type PortForwardListOverlayProps } from "./port-forward-list-overlay";
+export { LogsDialog, type LogsDialogActions, type LogsDialogProps } from "./logs-dialog";
 export { ScaleDialog, type ScaleDialogProps } from "./scale-dialog";
 export { HelmRollbackOverlay, type HelmRollbackOverlayProps } from "./helm-rollback-overlay";
+export { NotificationHistoryOverlay, type NotificationHistoryOverlayProps } from "./notification-history-overlay";
+export { HelpOverlay } from "./help-overlay";