@skyhook-io/k8s-ui 1.5.6 → 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -47,7 +47,8 @@
     "./theme/tailwind-theme.css": "./src/theme/tailwind-theme.css",
     "./theme/components.css": "./src/theme/components.css",
     "./theme": "./src/theme/index.ts",
-    "./topology.css": "./src/components/topology/topology.css"
+    "./topology.css": "./src/components/topology/topology.css",
+    "./assets/radar/radar-icon-loading.svg": "./src/assets/radar/radar-icon-loading.svg"
   },
   "scripts": {
     "tsc": "tsc --noEmit",

package/src/assets/radar/radar-icon-loading.svg

@@ -0,0 +1,147 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
+  <defs>
+    <!-- Dark emerald background gradient -->
+    <radialGradient id="bgHub" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#072920"/>
+      <stop offset="70%" stop-color="#03180f"/>
+      <stop offset="100%" stop-color="#010a06"/>
+    </radialGradient>
+
+    <!-- Sweep trail gradient, emerald -->
+    <linearGradient id="sweepGlowHub" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(-45, 0.5, 0.5)">
+      <stop offset="0%" stop-color="#10b981" stop-opacity="0"/>
+      <stop offset="60%" stop-color="#10b981" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#a7f3d0" stop-opacity="0.55"/>
+    </linearGradient>
+
+    <!-- Ring glow -->
+    <filter id="ringGlowHub" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Dot glow -->
+    <filter id="dotGlowHub" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur stdDeviation="2.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Sweep line glow -->
+    <filter id="lineGlowHub" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Outer ring glow -->
+    <filter id="outerGlowHub" x="-10%" y="-10%" width="120%" height="120%">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <clipPath id="radarClipHub">
+      <circle cx="128" cy="128" r="118"/>
+    </clipPath>
+
+    <!--
+      Self-contained CSS animation. This SVG is consumed via <img>, so
+      neither external CSS nor JS reaches it — keyframes have to live
+      inside the file. Sweep arm rotates around (128,128); each blip
+      pings via animation-delay timed to when the arm passes its angle
+      (cycle = 2400ms, baseline = 45° NE). Honors prefers-reduced-motion.
+    -->
+    <style>
+      .sweep-arm {
+        transform-origin: 128px 128px;
+        animation: radar-sweep 2.4s linear infinite;
+      }
+      @keyframes radar-sweep {
+        to { transform: rotate(360deg); }
+      }
+
+      .blip {
+        transform-origin: center;
+        transform-box: fill-box;
+        animation: blip-ping 2.4s linear infinite;
+      }
+      @keyframes blip-ping {
+        0%   { opacity: 1;    transform: scale(1.45); }
+        6%   { opacity: 0.95; transform: scale(1.15); }
+        25%  { opacity: 0.6;  transform: scale(1);    }
+        100% { opacity: 0.55; transform: scale(1);    }
+      }
+
+      .center-dot {
+        transform-origin: 128px 128px;
+        animation: center-pulse 2.4s ease-in-out infinite;
+      }
+      @keyframes center-pulse {
+        0%, 100% { opacity: 0.75; }
+        50%      { opacity: 1;    }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .sweep-arm,
+        .blip,
+        .center-dot { animation: none; }
+      }
+    </style>
+  </defs>
+
+  <!-- Background -->
+  <circle cx="128" cy="128" r="128" fill="#010a06"/>
+  <circle cx="128" cy="128" r="118" fill="url(#bgHub)"/>
+
+  <!-- Outer ring -->
+  <circle cx="128" cy="128" r="118" fill="none" stroke="#34d399" stroke-width="3.5" filter="url(#outerGlowHub)" opacity="0.9"/>
+
+  <!-- Concentric rings -->
+  <g filter="url(#ringGlowHub)" opacity="0.6">
+    <circle cx="128" cy="128" r="90" fill="none" stroke="#059669" stroke-width="1.2"/>
+    <circle cx="128" cy="128" r="62" fill="none" stroke="#059669" stroke-width="1.2"/>
+    <circle cx="128" cy="128" r="34" fill="none" stroke="#059669" stroke-width="1.2"/>
+  </g>
+
+  <!-- Crosshairs -->
+  <g opacity="0.15" stroke="#34d399" stroke-width="0.5">
+    <line x1="128" y1="10" x2="128" y2="246"/>
+    <line x1="10" y1="128" x2="246" y2="128"/>
+  </g>
+
+  <!-- Radar blips. animation-delay = -((360 - (angle - 45)) mod 360) / 360 * 2400ms,
+       so the 0% peak fires when the rotating sweep arm is at the blip's angle.
+       Negative delays put the animation mid-cycle at t=0 so the first paint isn't
+       a sea of bright pings. -->
+  <g filter="url(#dotGlowHub)">
+    <circle class="blip" cx="155" cy="68"  r="4"   fill="#ffffff" style="animation-delay: -140ms"/>
+    <circle class="blip" cx="178" cy="108" r="3.5" fill="#ffffff" style="animation-delay: -2247ms"/>
+    <circle class="blip" cx="98"  cy="85"  r="3"   fill="#ecfdf5" style="animation-delay: -533ms"/>
+    <circle class="blip" cx="85"  cy="155" r="3.5" fill="#ecfdf5" style="animation-delay: -1113ms"/>
+    <circle class="blip" cx="160" cy="175" r="3"   fill="#ecfdf5" style="animation-delay: -1727ms"/>
+    <circle class="blip" cx="108" cy="195" r="3.5" fill="#ecfdf5" style="animation-delay: -1387ms"/>
+  </g>
+
+  <!-- Sweep arm: trail + leading line, rotated as one group -->
+  <g class="sweep-arm">
+    <g clip-path="url(#radarClipHub)">
+      <path d="M128,128 L128,10 A118,118 0 0,1 211.5,44.5 Z" fill="url(#sweepGlowHub)" opacity="0.75"/>
+      <path d="M128,128 L211.5,44.5 A118,118 0 0,1 240,95 Z" fill="#10b981" opacity="0.06"/>
+    </g>
+    <line x1="128" y1="128" x2="211" y2="45" stroke="#a7f3d0" stroke-width="2" filter="url(#lineGlowHub)" stroke-linecap="round"/>
+    <line x1="128" y1="128" x2="211" y2="45" stroke="#ffffff" stroke-width="1" opacity="0.9" stroke-linecap="round"/>
+  </g>
+
+  <!-- Center dot -->
+  <circle class="center-dot" cx="128" cy="128" r="3" fill="#6ee7b7" filter="url(#dotGlowHub)"/>
+</svg>

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -0,0 +1,347 @@
+import {
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { ChevronDown, Check, Loader2, Search, Server, X } from 'lucide-react'
+import { ClusterName } from '../ui/ClusterName'
+import { StatusDot, type StatusTone } from '../ui/status-tone'
+
+export interface ClusterSwitcherItem {
+  id: string
+  /** Raw context / display string. ClusterName collapses GKE/EKS/AKS
+   *  shapes; user-named clusters pass through unchanged. */
+  name: string
+  secondary?: string
+  badge?: string
+  group?: { key: string; label?: string }
+  disabled?: boolean
+  status?: StatusTone
+  /** Hard navigation target. Takes precedence over the parent's `onSelect`. */
+  href?: string
+  /** Native tooltip — useful on disabled rows to explain why the row is inert.
+   *  ClusterName supplies its own tooltip for the cluster name itself; this
+   *  is for row-level affordances (e.g. "Cluster offline — reconnect…"). */
+  title?: string
+}
+
+export interface ClusterSwitcherProps {
+  currentId?: string
+  /** Raw context / display string. Pass it as-is — the trigger renders
+   *  through ClusterName, which handles parse + provider badge + tooltip. */
+  currentName: string
+  items: ClusterSwitcherItem[]
+  onSelect?: (item: ClusterSwitcherItem) => void
+  searchable?: boolean
+  showGroupHeaders?: boolean
+  showCurrentBullet?: boolean
+  loading?: boolean
+  disabled?: boolean
+  emptyText?: string
+  footerSlot?: ReactNode
+  errorSlot?: ReactNode
+  className?: string
+  align?: 'left' | 'right'
+}
+
+// Trigger width cap. With middle-truncation kicking in, this is a
+// horizontal-real-estate guard rather than a readability one. The cap
+// grows with viewport so wide screens (where there's no real estate
+// pressure) show full cluster names rather than middle-truncating
+// pointlessly. The xl tier (~400px) fits names up to ~30 chars in
+// full — comfortably covering parsed cluster names from any provider.
+const TRIGGER_NAME_MAX_WIDTH = 'max-w-[160px] sm:max-w-[260px] xl:max-w-[400px]'
+
+export function ClusterSwitcher({
+  currentId,
+  currentName,
+  items,
+  onSelect,
+  searchable = true,
+  showGroupHeaders = true,
+  showCurrentBullet = true,
+  loading = false,
+  disabled = false,
+  emptyText = 'No clusters',
+  footerSlot,
+  errorSlot,
+  className = '',
+  align = 'left',
+}: ClusterSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  const groups = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    const matches = (item: ClusterSwitcherItem) => {
+      if (!q) return true
+      return (
+        item.name.toLowerCase().includes(q) ||
+        item.secondary?.toLowerCase().includes(q) ||
+        item.badge?.toLowerCase().includes(q) ||
+        item.group?.label?.toLowerCase().includes(q)
+      )
+    }
+    const map = new Map<string, { key: string; label?: string; items: ClusterSwitcherItem[] }>()
+    for (const item of items) {
+      if (!matches(item)) continue
+      const key = item.group?.key ?? ''
+      if (!map.has(key)) map.set(key, { key, label: item.group?.label, items: [] })
+      map.get(key)!.items.push(item)
+    }
+    return Array.from(map.values())
+  }, [items, search])
+
+  const flat = useMemo(() => groups.flatMap(g => g.items), [groups])
+  const indexById = useMemo(() => {
+    const m = new Map<string, number>()
+    flat.forEach((it, i) => m.set(it.id, i))
+    return m
+  }, [flat])
+
+  useEffect(() => {
+    if (!isOpen) return
+    setSearch('')
+    setHighlightedIndex(-1)
+    requestAnimationFrame(() => searchInputRef.current?.focus())
+  }, [isOpen])
+
+  useEffect(() => {
+    setHighlightedIndex(-1)
+  }, [search])
+
+  useEffect(() => {
+    if (!isOpen || highlightedIndex < 0 || !rootRef.current) return
+    const el = rootRef.current.querySelector('[data-highlighted="true"]')
+    if (el) (el as HTMLElement).scrollIntoView({ block: 'nearest' })
+  }, [highlightedIndex, isOpen])
+
+  // Listeners attach only while open so a closed switcher doesn't intercept
+  // ESC or click-outside meant for parent modals/overlays.
+  useEffect(() => {
+    if (!isOpen) return
+    function onClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setIsOpen(false)
+    }
+    function onEsc(e: KeyboardEvent) {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onEsc)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onEsc)
+    }
+  }, [isOpen])
+
+  const select = (item: ClusterSwitcherItem) => {
+    if (item.disabled || item.id === currentId) return
+    setIsOpen(false)
+    if (item.href) {
+      window.location.href = item.href
+      return
+    }
+    onSelect?.(item)
+  }
+
+  const onSearchKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightedIndex(p => (p < flat.length - 1 ? p + 1 : p))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightedIndex(p => (p > 0 ? p - 1 : 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (highlightedIndex >= 0 && flat[highlightedIndex]) select(flat[highlightedIndex])
+      else if (flat.length > 0) setHighlightedIndex(0)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsOpen(false)
+    }
+  }
+
+  const positionClass = align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left'
+
+  return (
+    <div className={`relative ${className}`} ref={rootRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(v => !v)}
+        disabled={disabled || loading}
+        className={`
+          flex items-center gap-1.5 px-2.5 py-1.5
+          bg-theme-elevated border border-theme-border rounded text-sm font-medium
+          text-theme-text-primary hover:bg-theme-hover hover:border-theme-border-light
+          transition-colors cursor-pointer
+          disabled:opacity-50 disabled:cursor-not-allowed
+        `}
+      >
+        {loading ? (
+          <>
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            <span className={`${TRIGGER_NAME_MAX_WIDTH} block truncate`}>Switching…</span>
+          </>
+        ) : (
+          // ClusterName parses the context (provider badge for GKE/EKS/AKS,
+          // raw name for custom kubeconfig) and middle-truncates to the cap.
+          // Server icon is the fallback badge for the no-provider case so
+          // the trigger always has a leading visual. Tooltip is suppressed
+          // while the dropdown is open — the popover already shows the raw
+          // context inline (per-row secondary line), and an extra hover
+          // tooltip would just overlap the search input.
+          <ClusterName
+            name={currentName}
+            fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
+            className={TRIGGER_NAME_MAX_WIDTH}
+            noTooltip={isOpen}
+          />
+        )}
+        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <div
+          className={`absolute top-full ${positionClass} mt-1 z-50 min-w-[280px] max-w-[420px] bg-theme-surface border border-theme-border-light rounded-lg shadow-xl overflow-hidden`}
+        >
+          {searchable && (
+            <div className="p-2 border-b border-theme-border">
+              <div className="relative">
+                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  onKeyDown={onSearchKeyDown}
+                  placeholder="Search clusters..."
+                  className="w-full bg-theme-base text-theme-text-primary text-xs rounded px-2 py-1.5 pl-7 pr-7 border border-theme-border-light focus:outline-none focus:ring-1 focus:ring-[var(--color-brand)] placeholder:text-theme-text-tertiary"
+                />
+                {search && (
+                  <button
+                    type="button"
+                    onClick={() => setSearch('')}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-secondary"
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="max-h-[400px] overflow-y-auto">
+            {flat.length === 0 ? (
+              <div className="px-3 py-6 text-center text-xs text-theme-text-tertiary">
+                {search ? `No clusters match "${search}"` : emptyText}
+              </div>
+            ) : (
+              groups.map((group, gi) => (
+                <div key={group.key || `g${gi}`}>
+                  {gi > 0 && <div className="border-t border-theme-border-light my-1" />}
+                  {showGroupHeaders && group.label && (
+                    <div className="px-3 py-1 bg-theme-elevated/60 border-b border-theme-border/60">
+                      <span className="text-[11px] text-theme-text-secondary font-semibold">
+                        {group.label}
+                      </span>
+                    </div>
+                  )}
+                  {group.items.map(item => {
+                    const idx = indexById.get(item.id) ?? -1
+                    const isCurrent = item.id === currentId
+                    return (
+                      <button
+                        type="button"
+                        key={item.id}
+                        data-highlighted={idx === highlightedIndex}
+                        onClick={() => select(item)}
+                        onMouseEnter={() => setHighlightedIndex(idx)}
+                        disabled={isCurrent || item.disabled}
+                        title={item.title}
+                        className={`
+                          w-full flex items-center gap-2 px-3 py-2 text-left transition-colors
+                          ${isCurrent
+                            ? 'selection'
+                            : idx === highlightedIndex
+                              ? 'bg-theme-hover cursor-pointer'
+                              : 'hover:bg-theme-hover cursor-pointer'}
+                          disabled:opacity-50
+                        `}
+                      >
+                        <div className="shrink-0 w-4 h-4 flex items-center justify-center">
+                          {isCurrent ? (
+                            <Check className="w-3.5 h-3.5 selection-text" />
+                          ) : showCurrentBullet ? (
+                            <div className="w-1.5 h-1.5 rounded-full bg-theme-text-tertiary/30" />
+                          ) : null}
+                        </div>
+                        {item.status && (
+                          <span className="shrink-0">
+                            <StatusDot tone={item.status} />
+                          </span>
+                        )}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-1.5">
+                            {/* No tooltip on row names — each row already
+                                renders the raw context inline below the
+                                name (item.secondary), so the hover tooltip
+                                would just repeat what's already visible. */}
+                            <ClusterName
+                              name={item.name}
+                              noTooltip
+                              className={`text-sm font-medium flex-1 ${
+                                isCurrent
+                                  ? 'selection-text'
+                                  : item.disabled
+                                    ? 'text-theme-text-tertiary'
+                                    : 'text-theme-text-primary'
+                              }`}
+                            />
+                            {item.badge && (
+                              <span className="shrink-0 text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
+                                {item.badge}
+                              </span>
+                            )}
+                          </div>
+                          {item.secondary && (
+                            <div
+                              className="text-[10px] text-theme-text-tertiary opacity-70 truncate mt-0.5"
+                              title={item.secondary}
+                            >
+                              {item.secondary}
+                            </div>
+                          )}
+                        </div>
+                      </button>
+                    )
+                  })}
+                </div>
+              ))
+            )}
+          </div>
+
+          {search && flat.length > 0 && flat.length < items.length && (
+            <div className="px-3 py-1.5 text-[10px] text-theme-text-tertiary border-t border-theme-border bg-theme-base">
+              {flat.length} of {items.length} clusters
+            </div>
+          )}
+
+          {footerSlot && (
+            <div className="border-t border-theme-border bg-theme-base">{footerSlot}</div>
+          )}
+
+          {errorSlot && (
+            <div className="px-3 py-2 bg-red-500/10 border-t border-red-500/20">
+              {errorSlot}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/cluster-switcher/index.ts

@@ -0,0 +1,2 @@
+export { ClusterSwitcher } from './ClusterSwitcher'
+export type { ClusterSwitcherProps, ClusterSwitcherItem } from './ClusterSwitcher'

package/src/components/resources/ResourcesView.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useEffect, useCallback, useRef, useContext } from 'react'
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { PaneLoader } from '../ui/PaneLoader'
 import type { TopPodMetrics, TopNodeMetrics } from '../../types'
 import {
   Search,
@@ -1694,8 +1695,20 @@ function getInitialKindFromURL(
   locationPathname?: string,
   locationSearch?: string,
 ): SelectedKindInfo {
-  const pathname = locationPathname || window.location.pathname
-  const search = locationSearch || window.location.search
+  // Prefer injected pathname/search from the host router. Using `||` would incorrectly fall back to
+  // window when the host passes '' before hydration. SSR has no window.
+  const pathname =
+    locationPathname !== undefined
+      ? locationPathname
+      : typeof window !== 'undefined'
+        ? window.location.pathname
+        : ''
+  const search =
+    locationSearch !== undefined
+      ? locationSearch
+      : typeof window !== 'undefined'
+        ? window.location.search
+        : ''
   const base = basePath.replace(/\/$/, '') // strip trailing slash
   let kind: string | null = null
   if (pathname.startsWith(base + '/')) {
@@ -1750,8 +1763,8 @@ export function ResourcesView({
   pinned = [],
   togglePin = () => {},
   isPinned = () => false,
-  locationSearch = '',
-  locationPathname = '',
+  locationSearch,
+  locationPathname,
   onNavigate,
   basePath = '/resources',
   onOpenLogs,
@@ -1762,7 +1775,6 @@ export function ResourcesView({
   extraLeadingColumns,
   onRowSelect,
 }: ResourcesViewProps) {
-  const location = useMemo(() => ({ search: locationSearch, pathname: locationPathname }), [locationSearch, locationPathname])
   const initialFilters = getInitialFiltersFromURL()
   const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(() => getInitialKindFromURL(basePath, locationPathname, locationSearch))
   // Sync selectedKind from URL when locationPathname changes (e.g., browser back, external sidebar navigation)
@@ -1771,7 +1783,7 @@ export function ResourcesView({
     if (kindFromURL.name !== selectedKind.name || kindFromURL.group !== selectedKind.group) {
       setSelectedKind(kindFromURL)
     }
-  }, [locationPathname]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [locationPathname, locationSearch]) // eslint-disable-line react-hooks/exhaustive-deps
   // Notify parent of selected kind changes (including initial mount)
   useEffect(() => {
     onSelectedKindChange?.(selectedKind)
@@ -2354,7 +2366,7 @@ export function ResourcesView({
     requestAnimationFrame(() => {
       isSyncingFromURL.current = false
     })
-  }, [location.search, location.pathname]) // Re-run when URL path or search params change
+  }, [locationPathname, locationSearch]) // Re-run when injected URL path or search params change
 
   const navigate = useMemo(() => {
     if (!onNavigate) return (_pathOrObj: any, _opts?: any) => {}
@@ -3547,9 +3559,7 @@ export function ResourcesView({
           }}
         >
           {isLoading ? (
-            <div className="absolute inset-0 flex items-center justify-center text-theme-text-tertiary">
-              Loading...
-            </div>
+            <PaneLoader className="absolute inset-0" />
           ) : isSelectedForbidden ? (
             <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary">
               <Shield className="w-8 h-8 text-amber-400 mb-2" />

package/src/components/resources/resource-utils-cnpg.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { getCNPGClusterCertificateExpirations } from './resource-utils-cnpg'
+
+describe('getCNPGClusterCertificateExpirations', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-04-28T12:00:00Z'))
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('regression: future Go-format dates are not flagged as expired (issue #554)', () => {
+    const resource = {
+      status: {
+        certificates: {
+          expirations: {
+            'mycluster-ca': '2026-07-27 08:27:41 +0000 UTC',
+            'mycluster-server': '2026-07-27 08:27:41 +0000 UTC',
+            'mycluster-replication': '2026-07-27 08:27:41 +0000 UTC',
+          },
+        },
+      },
+    }
+    const certs = getCNPGClusterCertificateExpirations(resource)
+    expect(certs).toHaveLength(3)
+    for (const cert of certs) {
+      expect(cert.daysUntilExpiry).toBeGreaterThan(0)
+      expect(cert.daysUntilExpiry).toBeLessThanOrEqual(91)
+    }
+  })
+
+  it('floors fractional days down so threshold banners do not misfire', () => {
+    // Pinned now: 2026-04-28T12:00:00Z; expiry 2026-07-27T00:00:00Z is 89.5
+    // days away. Math.floor pins this to 89, not 90 — locks day-boundary
+    // semantics so a future Math.ceil/round refactor doesn't shift the
+    // <30d / <7d alert thresholds.
+    const resource = {
+      status: {
+        certificates: {
+          expirations: { 'mycluster-ca': '2026-07-27 00:00:00 +0000 UTC' },
+        },
+      },
+    }
+    const [cert] = getCNPGClusterCertificateExpirations(resource)
+    expect(cert.daysUntilExpiry).toBe(89)
+  })
+
+  it('flags genuinely expired certificates as negative', () => {
+    const resource = {
+      status: {
+        certificates: {
+          expirations: {
+            'mycluster-ca': '2026-04-27 08:27:41 +0000 UTC',
+          },
+        },
+      },
+    }
+    const [cert] = getCNPGClusterCertificateExpirations(resource)
+    expect(cert.daysUntilExpiry).toBeLessThan(0)
+  })
+
+  it('maps unparseable values to the -1 sentinel (renders as "expired")', () => {
+    const resource = {
+      status: { certificates: { expirations: { 'mycluster-ca': 'garbage' } } },
+    }
+    const [cert] = getCNPGClusterCertificateExpirations(resource)
+    expect(cert.daysUntilExpiry).toBe(-1)
+  })
+
+  it('returns empty list when no expirations are present', () => {
+    expect(getCNPGClusterCertificateExpirations({})).toEqual([])
+    expect(getCNPGClusterCertificateExpirations({ status: {} })).toEqual([])
+  })
+})