@skyhook-io/k8s-ui 1.8.7 → 1.8.8

package/src/components/topology/TopologyControls.tsx

@@ -1,4 +1,6 @@
-import { FolderTree, ShieldCheck } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { FolderTree, ShieldCheck, ChevronDown, Check } from 'lucide-react'
+import { clsx } from 'clsx'
 import type { TopologyMode, GroupingMode } from '../../types/core'
 import { Tooltip } from '../ui/Tooltip'
 
@@ -18,6 +20,8 @@ interface TopologyControlsProps {
    * here from the live, observed Traffic view. Omitted by hosts without one.
    */
   onNavigateToTraffic?: () => void
+  /** Optional leading element (e.g. a freshness/liveness indicator). */
+  leadingSlot?: ReactNode
 }
 
 export function TopologyControls({
@@ -30,9 +34,63 @@ export function TopologyControls({
   onShowPolicyEffectChange,
   showFleetMode = false,
   onNavigateToTraffic,
+  leadingSlot,
 }: TopologyControlsProps) {
+  const [groupOpen, setGroupOpen] = useState(false)
+  const groupRef = useRef<HTMLDivElement>(null)
+  const groupTriggerRef = useRef<HTMLButtonElement>(null)
+  const groupItemRefs = useRef<(HTMLButtonElement | null)[]>([])
+
+  const groupOptions: { value: GroupingMode; label: string }[] = [
+    ...(showNoGrouping ? [{ value: 'none' as GroupingMode, label: 'No Grouping' }] : []),
+    { value: 'namespace', label: 'By Namespace' },
+    { value: 'app', label: 'By App Label' },
+  ]
+  const currentGroupLabel = groupOptions.find((o) => o.value === groupingMode)?.label ?? 'Grouping'
+
+  const closeGroup = useCallback((restoreFocus = false) => {
+    setGroupOpen(false)
+    if (restoreFocus) groupTriggerRef.current?.focus()
+  }, [])
+
+  // On open, move focus onto the active option so the menu is keyboard-navigable
+  // (parity with the native <select> this replaced). Click-outside closes it.
+  useEffect(() => {
+    if (!groupOpen) return
+    const active = Math.max(0, groupOptions.findIndex((o) => o.value === groupingMode))
+    groupItemRefs.current[active]?.focus()
+    const onDown = (e: MouseEvent) => {
+      if (groupRef.current && !groupRef.current.contains(e.target as Node)) setGroupOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    return () => document.removeEventListener('mousedown', onDown)
+    // groupOptions/groupingMode are read once at open; re-running on their
+    // identity change would steal focus mid-interaction.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupOpen])
+
+  const onGroupMenuKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    const items = groupItemRefs.current.filter(Boolean) as HTMLButtonElement[]
+    const i = items.indexOf(document.activeElement as HTMLButtonElement)
+    if (e.key === 'ArrowDown') { e.preventDefault(); items[(i + 1) % items.length]?.focus() }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); items[(i - 1 + items.length) % items.length]?.focus() }
+    else if (e.key === 'Home') { e.preventDefault(); items[0]?.focus() }
+    else if (e.key === 'End') { e.preventDefault(); items[items.length - 1]?.focus() }
+    else if (e.key === 'Escape') { e.preventDefault(); closeGroup(true) }
+  }
+
   return (
     <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+      {/* Freshness/liveness status — backed for legibility over the canvas but
+          borderless + divided off, so it reads as a status, not another control. */}
+      {leadingSlot && (
+        <>
+          <div className="flex items-center rounded-lg bg-theme-surface/80 px-2.5 py-1.5 backdrop-blur">
+            {leadingSlot}
+          </div>
+          <div className="h-5 w-px bg-theme-border/70" />
+        </>
+      )}
       {/* Policy effect toggle */}
       {onShowPolicyEffectChange && (
         <button
@@ -49,20 +107,38 @@ export function TopologyControls({
         </button>
       )}
 
-      {/* Grouping selector */}
-      <div className="flex items-center gap-1.5 px-2 py-1.5 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg">
-        <FolderTree className="w-3.5 h-3.5 text-theme-text-secondary" />
-        <select
-          value={groupingMode}
-          onChange={(e) => onGroupingModeChange(e.target.value as GroupingMode)}
-          className="appearance-none bg-transparent text-theme-text-primary text-xs focus:outline-none"
+      {/* Grouping selector — themed dropdown (not a native <select>). */}
+      <div ref={groupRef} className="relative">
+        <button
+          ref={groupTriggerRef}
+          type="button"
+          onClick={() => setGroupOpen((v) => !v)}
+          aria-haspopup="menu"
+          aria-expanded={groupOpen}
+          className="flex items-center gap-1.5 px-2 py-1.5 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg text-xs text-theme-text-primary hover:bg-theme-elevated transition-colors"
         >
-          {showNoGrouping && (
-            <option value="none" className="bg-theme-surface">No Grouping</option>
-          )}
-          <option value="namespace" className="bg-theme-surface">By Namespace</option>
-          <option value="app" className="bg-theme-surface">By App Label</option>
-        </select>
+          <FolderTree className="w-3.5 h-3.5 text-theme-text-secondary" />
+          {currentGroupLabel}
+          <ChevronDown className="w-3 h-3 text-theme-text-tertiary" />
+        </button>
+        {groupOpen && (
+          <div role="menu" onKeyDown={onGroupMenuKey} className="absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl">
+            {groupOptions.map((o, idx) => (
+              <button
+                key={o.value}
+                ref={(el) => { groupItemRefs.current[idx] = el }}
+                type="button"
+                role="menuitemradio"
+                aria-checked={groupingMode === o.value}
+                onClick={() => { onGroupingModeChange(o.value); closeGroup(true) }}
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary focus:bg-theme-hover focus:text-theme-text-primary focus:outline-none transition-colors"
+              >
+                <Check className={clsx('w-3.5 h-3.5 shrink-0', groupingMode === o.value ? 'opacity-100 text-skyhook-500' : 'opacity-0')} />
+                <span className="truncate">{o.label}</span>
+              </button>
+            ))}
+          </div>
+        )}
       </div>
 
       {/* View mode toggle */}

package/src/components/ui/FreshnessControl.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react'
+import { clsx } from 'clsx'
+import { RefreshCw, Check } from 'lucide-react'
+import { Tooltip } from './Tooltip'
+import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { formatUpdatedAgo, msToNextBucket } from '../../utils/format'
+
+export type FreshnessMode = 'auto' | 'snapshot'
+export type FreshnessConnection = 'connected' | 'disconnected' | 'connecting'
+
+interface FreshnessControlProps {
+  // 'auto'     — the view keeps itself current (polls or streams). Reads
+  //              "Auto-updating". Pass onRefresh on slow polled views for a
+  //              "check now" hatch; omit it on instant stream-backed views.
+  // 'snapshot' — a one-shot load that only changes on demand. Reads "Updated N
+  //              ago" with a manual refresh button.
+  mode: FreshnessMode
+  // Epoch ms of the last successful load (React Query dataUpdatedAt). Optional
+  // for 'auto' streams that have no per-fetch timestamp (e.g. topology).
+  dataUpdatedAt?: number
+  // Spins the refresh icon during background refetches (for views with a button).
+  isFetching?: boolean
+  // Manual refresh. Provide it on polled + snapshot views where forcing a fetch
+  // is useful; omit on stream-backed 'auto' views (instant, so a refresh button
+  // would just undercut "Auto-updating"). May return a promise — the animation
+  // waits for it before showing success.
+  onRefresh?: () => void | Promise<unknown>
+  // Cluster/SSE connection health. When not connected, freshness must not claim
+  // currency — it degrades to "Reconnecting…" instead of a stale age/Auto-updating.
+  connectionState?: FreshnessConnection
+  // 'auto' streams only: paused (e.g. topology pause toggle). "Auto-updating"
+  // while paused would be a lie, so it degrades to "Paused".
+  paused?: boolean
+  className?: string
+}
+
+// The canonical freshness/liveness signal. It answers "does this view stay
+// current on its own?" — "Auto-updating" for anything self-refreshing (poll or
+// stream, mechanism deliberately not exposed), "Updated N ago" + refresh for a
+// manual snapshot. Place it at the right end of a view's header — never a band.
+export function FreshnessControl({
+  mode,
+  dataUpdatedAt,
+  isFetching,
+  onRefresh,
+  connectionState = 'connected',
+  paused = false,
+  className,
+}: FreshnessControlProps) {
+  const [, force] = useState(0)
+  const showAge = typeof dataUpdatedAt === 'number' && dataUpdatedAt > 0
+
+  // Re-render exactly when the displayed age bucket flips (not every second).
+  useEffect(() => {
+    if (!showAge) return
+    let id: ReturnType<typeof setTimeout>
+    function schedule() {
+      const delay = Math.max(1000, msToNextBucket(Date.now() - (dataUpdatedAt as number)))
+      id = setTimeout(() => {
+        force((t) => t + 1)
+        schedule()
+      }, delay)
+    }
+    schedule()
+    return () => clearTimeout(id)
+  }, [showAge, dataUpdatedAt])
+
+  const [refresh, , phase] = useRefreshAnimation(() => onRefresh?.())
+  const spinning = phase === 'spinning' || !!isFetching
+
+  // Any non-connected state (disconnected OR mid-reconnect) must not claim
+  // currency — the signal degrades rather than showing a stale age/Auto-updating.
+  const degraded = connectionState !== 'connected'
+
+  // Show the refresh button whenever the host wired one. Stream-backed 'auto'
+  // views (Resources, Topology) deliberately omit onRefresh — they update
+  // instantly, so a manual refresh would only undercut "Auto-updating". Slow
+  // polled views keep it as a "check now" escape hatch.
+  const showRefresh = !!onRefresh
+
+  const exact = showAge ? `Last updated ${new Date(dataUpdatedAt as number).toLocaleTimeString()}` : null
+  const age = showAge ? formatUpdatedAgo(Date.now() - (dataUpdatedAt as number)) : null
+
+  // Tooltip is only rendered when it ADDS information beyond the visible label.
+  let label: string | null
+  let tooltip: string | null
+  let live = false
+  if (degraded) {
+    label = 'Reconnecting…'
+    tooltip = 'Not connected to the cluster — data may be stale until the connection is restored.'
+  } else if (mode === 'auto' && paused) {
+    label = 'Paused'
+    tooltip = 'Live updates are paused — resume to keep this view current.'
+  } else if (mode === 'auto') {
+    label = 'Auto-updating'
+    tooltip = exact ?? 'Updates automatically as the data changes.'
+    live = true
+  } else if (age) {
+    label = `Updated ${age}`
+    tooltip = exact
+  } else {
+    // Snapshot before its first load — render just the button, no stale text.
+    label = null
+    tooltip = null
+  }
+
+  // The relative age is the dynamic trust detail. It rides alongside every 'auto'
+  // label, and alongside a degraded label in either mode — "Reconnecting… ·
+  // updated 8m ago" is exactly when staleness matters most. (In connected
+  // 'snapshot' mode the age IS the label, so no suffix.)
+  const ageSuffix = age && (mode === 'auto' || degraded) ? age : null
+
+  const labelNode = label ? (
+    <span className="flex items-center gap-1 text-xs text-theme-text-tertiary">
+      {(live || (mode === 'auto' && paused)) && !degraded && (
+        <span
+          className={clsx('w-1.5 h-1.5 rounded-full', paused ? 'bg-amber-400' : 'bg-green-500 animate-pulse')}
+          aria-hidden
+        />
+      )}
+      <span className="tabular-nums">{label}</span>
+      {ageSuffix && <span className="tabular-nums text-theme-text-quaternary">· updated {ageSuffix}</span>}
+    </span>
+  ) : null
+
+  return (
+    <div className={clsx('flex items-center gap-1.5 whitespace-nowrap', className)}>
+      {/* Only wrap in a tooltip when it adds information beyond the label. */}
+      {labelNode && (tooltip
+        ? <Tooltip content={tooltip} delay={100} position="bottom">{labelNode}</Tooltip>
+        : labelNode)}
+      {showRefresh && (
+        <Tooltip content="Refresh now" delay={100} position="bottom">
+          <button
+            type="button"
+            onClick={refresh}
+            // Only disable during the button's own refresh animation (prevents
+            // double-trigger); stay clickable during background refetches.
+            disabled={phase === 'spinning'}
+            aria-label="Refresh now"
+            className="p-1.5 rounded-lg text-theme-text-tertiary hover:text-theme-text-secondary hover:bg-theme-hover transition-colors disabled:opacity-50"
+          >
+            {phase === 'success' ? (
+              <Check className="w-3.5 h-3.5 text-emerald-500" />
+            ) : (
+              <RefreshCw className={clsx('w-3.5 h-3.5', spinning && 'animate-spin')} />
+            )}
+          </button>
+        </Tooltip>
+      )}
+    </div>
+  )
+}

package/src/components/ui/SortableTh.tsx

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react'
 import { clsx } from 'clsx'
-import { ChevronUp, ChevronDown } from 'lucide-react'
+import { ChevronUp, ChevronDown, ArrowUpDown } from 'lucide-react'
 
 export type SortDir = 'asc' | 'desc'
 
-// Canonical dense-table header-cell styling, shared so the Applications and
-// GitOps tables (modeled on the Resources table) read as one table family.
+// Canonical dense-table header-cell styling, shared so the Applications,
+// GitOps, and Helm tables read as one family with the Resources table.
 export const TH_CLASS =
-  'border-b border-theme-border px-3 py-2 text-left text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary'
+  'border-b border-theme-border px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-theme-text-secondary'
 
 // A clickable, sortable column header. Clicking fires onSort(sortKey); the
 // consumer owns the cycle (toggle dir, or asc→desc→off). One chevron marks the
@@ -42,16 +42,22 @@ export function SortableTh<K extends string>({
         type="button"
         onClick={() => onSort(sortKey)}
         className={clsx(
-          'inline-flex items-center gap-1 select-none hover:text-theme-text-primary focus-visible:outline-none focus-visible:text-theme-text-primary',
+          // `uppercase` is repeated here on purpose: Tailwind Preflight resets
+          // `button { text-transform: none }`, which would otherwise cancel the
+          // inherited uppercase from TH_CLASS and render sortable headers in
+          // title case while non-sortable <th> cells stay uppercase.
+          'inline-flex items-center gap-1 select-none uppercase hover:text-theme-text-primary focus-visible:outline-none focus-visible:text-theme-text-primary',
           align === 'right' && 'w-full justify-end',
         )}
       >
         {label}
-        {active ? (
-          direction === 'asc' ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />
-        ) : (
-          <span className="w-3" />
-        )}
+        <span className="shrink-0 text-theme-text-tertiary">
+          {active ? (
+            direction === 'asc' ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />
+          ) : (
+            <ArrowUpDown className="h-3 w-3 opacity-50" />
+          )}
+        </span>
       </button>
     </th>
   )

package/src/components/ui/Toast.tsx

@@ -227,7 +227,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
               {toast.detail}
             </button>
           ) : (
-            <p className={clsx('mt-1 text-xs break-all', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
+            <p className={clsx('mt-1 text-xs break-words', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
               {toast.detail}
             </p>
           )

package/src/components/ui/index.ts

@@ -1,4 +1,6 @@
 export { Tooltip } from './Tooltip'
+export { FreshnessControl } from './FreshnessControl'
+export type { FreshnessMode, FreshnessConnection } from './FreshnessControl'
 export { PaneLoader } from './PaneLoader'
 export { ClusterName } from './ClusterName'
 export { MiddleEllipsis } from './MiddleEllipsis'