kubeops 0.1.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/use-age-tick.ts

@@ -0,0 +1,40 @@
+import { useSyncExternalStore } from 'react';
+
+const INTERVAL_MS = 30_000;
+
+let tick = 0;
+let listeners = new Set<() => void>();
+let timer: ReturnType<typeof setInterval> | null = null;
+
+function startTimer() {
+  if (timer) return;
+  timer = setInterval(() => {
+    tick++;
+    listeners.forEach((l) => l());
+  }, INTERVAL_MS);
+}
+
+function stopTimer() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  if (listeners.size === 1) startTimer();
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) stopTimer();
+  };
+}
+
+function getSnapshot() {
+  return tick;
+}
+
+/** Returns a counter that increments every 30s. All consumers share a single timer. */
+export function useAgeTick(): number {
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

package/src/hooks/use-auto-update.ts

@@ -0,0 +1,100 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { UpdateStatus } from '@/types/electron';
+
+export type UpdatePhase =
+  | 'idle'
+  | 'checking'
+  | 'available'
+  | 'not-available'
+  | 'downloading'
+  | 'downloaded'
+  | 'error';
+
+export function useAutoUpdate() {
+  const [phase, setPhase] = useState<UpdatePhase>('idle');
+  const [version, setVersion] = useState<string | null>(null);
+  const [percent, setPercent] = useState(0);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [appVersion, setAppVersion] = useState<string | null>(null);
+
+  const api = typeof window !== 'undefined' ? window.electronUpdater : undefined;
+  const isAvailable = !!api;
+  const apiRef = useRef(api);
+  apiRef.current = api;
+
+  useEffect(() => {
+    apiRef.current?.getAppVersion().then(setAppVersion).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!apiRef.current) return;
+
+    const unsubscribe = apiRef.current.onUpdateStatus((status: UpdateStatus) => {
+      switch (status.status) {
+        case 'checking':
+          setPhase('checking');
+          break;
+        case 'available':
+          setPhase('available');
+          setVersion(status.version ?? null);
+          break;
+        case 'not-available':
+          setPhase('not-available');
+          setTimeout(() => setPhase('idle'), 3000);
+          break;
+        case 'downloading':
+          setPhase('downloading');
+          setPercent(status.percent ?? 0);
+          break;
+        case 'downloaded':
+          setPhase('downloaded');
+          setVersion(status.version ?? null);
+          break;
+        case 'error':
+          setPhase('error');
+          setErrorMessage(status.message ?? 'Unknown error');
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const checkForUpdates = useCallback(() => {
+    if (!apiRef.current) return;
+    setPhase('checking');
+    setErrorMessage(null);
+    apiRef.current.checkForUpdates().catch(() => {});
+  }, []);
+
+  const downloadUpdate = useCallback(() => {
+    if (!apiRef.current) return;
+    setPercent(0);
+    apiRef.current.downloadUpdate().catch(() => {});
+  }, []);
+
+  const quitAndInstall = useCallback(() => {
+    if (!apiRef.current) return;
+    apiRef.current.quitAndInstall().catch(() => {});
+  }, []);
+
+  const dismiss = useCallback(() => {
+    setPhase('idle');
+    setErrorMessage(null);
+  }, []);
+
+  return {
+    phase,
+    version,
+    percent,
+    errorMessage,
+    isAvailable,
+    appVersion,
+    checkForUpdates,
+    downloadUpdate,
+    quitAndInstall,
+    dismiss,
+  };
+}

package/src/hooks/use-clusters.ts

@@ -0,0 +1,32 @@
+import useSWR from 'swr';
+import { useEffect } from 'react';
+import { ClusterInfo } from '@/types/cluster';
+import { useNamespaceStore } from '@/stores/namespace-store';
+
+export function useClusters() {
+  const { data, error, isLoading, mutate } = useSWR<{ clusters: ClusterInfo[] }>(
+    '/api/clusters',
+    {
+      refreshInterval: 30000,
+    }
+  );
+
+  const { activeNamespaces, setActiveNamespace } = useNamespaceStore();
+
+  // Auto-set namespace from kubeconfig context when not yet configured
+  useEffect(() => {
+    if (!data?.clusters) return;
+    for (const cluster of data.clusters) {
+      if (cluster.namespace && !activeNamespaces[cluster.name]) {
+        setActiveNamespace(cluster.name, cluster.namespace);
+      }
+    }
+  }, [data?.clusters, activeNamespaces, setActiveNamespace]);
+
+  return {
+    clusters: data?.clusters || [],
+    error,
+    isLoading,
+    mutate,
+  };
+}

package/src/hooks/use-namespaces.ts

@@ -0,0 +1,17 @@
+import useSWR from 'swr';
+
+export function useNamespaces(clusterId: string | null) {
+  const key = clusterId
+    ? `/api/clusters/${encodeURIComponent(clusterId)}/namespaces`
+    : null;
+
+  const { data, error, isLoading } = useSWR(key, {
+    refreshInterval: 30000,
+  });
+
+  return {
+    namespaces: data?.namespaces || [],
+    error,
+    isLoading,
+  };
+}

package/src/hooks/use-pod-watcher.ts

@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { usePodWatcherStore } from '@/stores/pod-watcher-store';
+import { toast } from 'sonner';
+
+interface PodLike {
+  metadata?: {
+    name?: string;
+    namespace?: string;
+  };
+  status?: {
+    containerStatuses?: Array<{
+      restartCount?: number;
+    }>;
+  };
+}
+
+export function usePodRestartWatcher(
+  clusterId: string,
+  pods: PodLike[] | undefined
+) {
+  const { watchedPods, notificationsEnabled, getSnapshot, updateSnapshot } =
+    usePodWatcherStore();
+  const initializedRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!pods || pods.length === 0) return;
+
+    for (const pod of pods) {
+      const name = pod.metadata?.name;
+      const namespace = pod.metadata?.namespace;
+      if (!name || !namespace) continue;
+
+      const watchKey = { clusterId, namespace, name };
+      const isWatched = watchedPods.some(
+        (w) =>
+          w.clusterId === clusterId &&
+          w.namespace === namespace &&
+          w.name === name
+      );
+      if (!isWatched) continue;
+
+      const totalRestarts = (pod.status?.containerStatuses || []).reduce(
+        (sum, cs) => sum + (cs.restartCount || 0),
+        0
+      );
+
+      const snapshotKey = `${clusterId}/${namespace}/${name}`;
+      const previousSnapshot = getSnapshot(watchKey);
+
+      if (previousSnapshot === undefined) {
+        // First time seeing this pod — set baseline, no notification
+        updateSnapshot(watchKey, totalRestarts);
+        initializedRef.current.add(snapshotKey);
+        continue;
+      }
+
+      if (totalRestarts > previousSnapshot) {
+        const delta = totalRestarts - previousSnapshot;
+        const msg = `Pod ${name} restarted ${delta} time${delta > 1 ? 's' : ''} (total: ${totalRestarts})`;
+
+        if (notificationsEnabled) {
+          toast.warning(msg, { duration: 8000 });
+
+          if (
+            typeof window !== 'undefined' &&
+            'Notification' in window &&
+            Notification.permission === 'granted'
+          ) {
+            new Notification('Pod Restart Detected', { body: msg });
+          }
+        }
+
+        updateSnapshot(watchKey, totalRestarts);
+      }
+    }
+  }, [pods, clusterId, watchedPods, notificationsEnabled, getSnapshot, updateSnapshot]);
+}

package/src/hooks/use-port-forwards.ts

@@ -0,0 +1,18 @@
+import useSWR from 'swr';
+
+interface PortForward {
+  id: string;
+  localPort: number;
+  containerPort: number;
+  status: string;
+}
+
+/**
+ * Shared hook for port-forward data.
+ * No polling — relies on globalMutate('/api/port-forward') calls after start/stop actions.
+ */
+export function usePortForwards() {
+  const { data, mutate } = useSWR<{ forwards: PortForward[] }>('/api/port-forward');
+  const forwards: PortForward[] = data?.forwards || [];
+  return { forwards, mutate };
+}

package/src/hooks/use-resource-detail.ts

@@ -0,0 +1,28 @@
+import useSWR from 'swr';
+
+interface UseResourceDetailOptions {
+  clusterId: string | null;
+  namespace: string;
+  resourceType: string;
+  name: string;
+  refreshInterval?: number;
+  enabled?: boolean;
+}
+
+export function useResourceDetail({
+  clusterId,
+  namespace,
+  resourceType,
+  name,
+  refreshInterval = 5000,
+  enabled = true,
+}: UseResourceDetailOptions) {
+  const key =
+    enabled && clusterId
+      ? `/api/clusters/${encodeURIComponent(clusterId)}/resources/${namespace}/${resourceType}/${name}`
+      : null;
+
+  return useSWR(key, {
+    refreshInterval,
+  });
+}

package/src/hooks/use-resource-list.ts

@@ -0,0 +1,26 @@
+import useSWR from 'swr';
+
+interface UseResourceListOptions {
+  clusterId: string | null;
+  namespace: string;
+  resourceType: string;
+  refreshInterval?: number;
+  enabled?: boolean;
+}
+
+export function useResourceList({
+  clusterId,
+  namespace,
+  resourceType,
+  refreshInterval = 5000,
+  enabled = true,
+}: UseResourceListOptions) {
+  const key =
+    enabled && clusterId
+      ? `/api/clusters/${encodeURIComponent(clusterId)}/resources/${namespace}/${resourceType}`
+      : null;
+
+  return useSWR(key, {
+    refreshInterval,
+  });
+}