openk8s 1.0.5 → 1.2.0

package/src/app/components/inspector.tsx

@@ -9,15 +9,13 @@ import {
   TEXT_PRIMARY,
   TEXT_SUBTLE,
 } from "../theme";
-import { tokenizeYamlLine, tokenizeDescribeLine } from "./inspector-tokens";
+import { yamlSyntaxStyle } from "../syntax-theme";
 import { EventList, DetailSectionsInternal } from "./detail-sections";
 import type { EventItem, InspectorTab, PaneId, ResourceDetail } 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" },
 ];
 
 export interface InspectorTabsProps {
@@ -101,81 +99,33 @@ export function InspectorBody({
     return (
       <box style={{ flexGrow: 1, flexDirection: "column" }}>
         <box style={{ height: 1 }} />
-        <scrollbox
+        <box
           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>
-    );
-  }
-
-  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>
+          {detail ? (
+            <code
+              content={detail.yaml}
+              filetype="yaml"
+              syntaxStyle={yamlSyntaxStyle}
+              drawUnstyledText
+              wrapMode="none"
+              style={{ width: "100%", height: "100%" }}
+            />
+          ) : detailStatus === "loading" ? (
+            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+              Loading YAML...
+            </text>
+          ) : (
+            <text fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
+              No YAML available
+            </text>
+          )}
+        </box>
       </box>
     );
   }
@@ -185,23 +135,30 @@ export function InspectorBody({
       <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}
-            />
+          {detail ? (
+            <>
+              <DetailSectionsInternal
+                sections={detail.summarySections}
+                revealedIds={revealedDetailLineIds}
+                revealedSecretValues={revealedSecretValues}
+                onToggleReveal={onToggleReveal}
+                onCopyText={onCopyText}
+              />
+              <box style={{ flexDirection: "column", marginTop: 1, marginBottom: 1 }}>
+                <text fg={KEY_HINT}>
+                  {"─ "}
+                  <span fg={TEXT_PRIMARY} attributes={TextAttributes.BOLD}>Recent Events</span>
+                </text>
+                <EventList events={events} status={eventsStatus} />
+              </box>
+            </>
           ) : 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}>
+            fallbackLines.map((line, index) => (
+              <text key={`${index}:${line}`} fg={TEXT_SUBTLE} attributes={TextAttributes.DIM}>
                 {line}
               </text>
             ))

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>
   );
 }