@skyhook-io/k8s-ui 1.8.7 → 1.8.9

package/src/components/resources/ResourcesView.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useMemo, useEffect, useCallback, useRef, useContext, useId } from 'react'
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
-import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { PaneLoader } from '../ui/PaneLoader'
 import { RestrictedState } from '../ui/RestrictedState'
 import type { TopPodMetrics, TopNodeMetrics } from '../../types'
@@ -13,7 +12,6 @@ import {
   ChevronDown,
   ChevronUp,
   ArrowUpDown,
-  Clock,
   ListFilter,
   X,
   Columns3,
@@ -133,6 +131,7 @@ import { SEVERITY_BADGE, EVENT_TYPE_COLORS, SEVERITY_TEXT } from '../../utils/ba
 import { pluralize } from '../../utils/pluralize'
 import { getPodGpuCount, getNodeGpuCount } from '../../utils/extended-resources'
 import { type CustomColumnDef, type CustomColumnSource, customColumnKey, readCustomColumnValue, sanitizeCustomColumnDefs } from '../../utils/custom-columns'
+import { FreshnessControl, type FreshnessConnection } from '../ui/FreshnessControl'
 import { Tooltip } from '../ui/Tooltip'
 import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 // CRD-specific cell components (extracted)
@@ -1851,6 +1850,9 @@ interface ResourcesViewProps {
   resourceUnavailable?: string[]
   // Single query for the currently selected kind's full data
   selectedKindQuery?: ResourceQueryResult
+  // Cluster/SSE connection health — the list is SSE-invalidated ("Auto-updating"),
+  // so it must degrade to "Reconnecting…" when the stream drops.
+  connectionState?: FreshnessConnection
   largeListGuard?: LargeListGuardState | null
   topPodMetrics?: TopPodMetrics[]
   topNodeMetrics?: TopNodeMetrics[]
@@ -2017,51 +2019,6 @@ function getInitialFiltersFromURL() {
 // Sort state type
 type SortDirection = 'asc' | 'desc' | null
 
-// Coarse "just now / Xm / Xh / Xd" buckets — finer-grained updates
-// add motion in the periphery without aiding any user decision.
-function formatLastUpdatedBucket(elapsedMs: number): string {
-  const elapsedSec = Math.max(0, Math.floor(elapsedMs / 1000))
-  if (elapsedSec < 60) return 'just now'
-  const minutes = Math.floor(elapsedSec / 60)
-  if (minutes < 60) return `${minutes}m`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h`
-  return `${Math.floor(hours / 24)}d`
-}
-
-// ms until the displayed bucket would change.
-function msToNextBucket(elapsedMs: number): number {
-  const elapsed = Math.max(0, elapsedMs)
-  if (elapsed < 60_000) return 60_000 - elapsed
-  if (elapsed < 3_600_000) return 60_000 - (elapsed % 60_000)
-  if (elapsed < 86_400_000) return 3_600_000 - (elapsed % 3_600_000)
-  return 86_400_000 - (elapsed % 86_400_000)
-}
-
-// Isolated subtree so re-renders don't cascade into the parent's
-// virtualized table.
-function LastUpdatedLabel({ lastUpdated }: { lastUpdated: Date }) {
-  const [, force] = useState(0)
-  useEffect(() => {
-    let id: ReturnType<typeof setTimeout>
-    function schedule() {
-      const delay = Math.max(1000, msToNextBucket(Date.now() - lastUpdated.getTime()))
-      id = setTimeout(() => {
-        force(t => t + 1)
-        schedule()
-      }, delay)
-    }
-    schedule()
-    return () => clearTimeout(id)
-  }, [lastUpdated])
-  return (
-    <div className="flex items-center gap-1.5 text-xs text-theme-text-tertiary">
-      <Clock className="w-3.5 h-3.5" />
-      <span>Updated {formatLastUpdatedBucket(Date.now() - lastUpdated.getTime())}</span>
-    </div>
-  )
-}
-
 export function ResourcesView({
   namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange,
   apiResources: apiResourcesProp,
@@ -2071,6 +2028,7 @@ export function ResourcesView({
   resourceReasons,
   resourceUnavailable: resourceUnavailableProp,
   selectedKindQuery: selectedKindQueryProp,
+  connectionState,
   largeListGuard,
   topPodMetrics,
   topNodeMetrics,
@@ -2130,7 +2088,6 @@ export function ResourcesView({
   const [regexMode, setRegexMode] = useState(false)
   const [sortColumn, setSortColumn] = useState<string | null>(null)
   const [sortDirection, setSortDirection] = useState<SortDirection>(null)
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
   // Filter state
   const [columnFilters, setColumnFilters] = useState<Record<string, string[]>>(initialFilters.columnFilters)
   const [problemFilters, setProblemFilters] = useState<string[]>(initialFilters.problemFilters)
@@ -2951,6 +2908,11 @@ export function ResourcesView({
       params.set('resource', resourceNs ? `${resourceNs}/${resourceName}` : resourceName)
     } else {
       params.delete('resource')
+      // `full` (over-list fullscreen) and `tab` are resource-scoped — when no
+      // resource is selected they're stale; drop them so they can't leak onto a
+      // later selection (e.g. after a kind switch or closing the drawer).
+      params.delete('full')
+      params.delete('tab')
     }
 
     const newPath = `${basePath}/${kindInfo.name}`
@@ -3244,23 +3206,6 @@ export function ResourcesView({
   }, [resources])
   const isLoading = selectedQuery?.isLoading ?? true
   const selectedQueryError = selectedQuery?.error
-  const refetchFn = selectedQuery?.refetch
-  const dataUpdatedAt = selectedQuery?.dataUpdatedAt
-
-  const [refetch, isRefreshAnimating, refreshPhase] = useRefreshAnimation(() => refetchFn?.())
-
-  // React Query bumps dataUpdatedAt on no-op refetches (window focus,
-  // mount, sibling subscribers); structural sharing returns the same
-  // resources reference when data is byte-identical. Skip the timer
-  // reset in that case — otherwise opening a filter drawer looks like
-  // it triggered a real fetch.
-  const lastDataRef = useRef<unknown>(undefined)
-  useEffect(() => {
-    if (!dataUpdatedAt) return
-    if (resources === lastDataRef.current) return
-    lastDataRef.current = resources
-    setLastUpdated(new Date(dataUpdatedAt))
-  }, [dataUpdatedAt, resources])
 
   // Derive counts — prefer lightweight resourceCounts prop over full query data
   const counts = useMemo(() => {
@@ -4288,19 +4233,19 @@ export function ResourcesView({
             </Tooltip>
           )}
 
-          {lastUpdated && <LastUpdatedLabel lastUpdated={lastUpdated} />}
           {/* Column picker */}
           <div className="relative" ref={columnPickerRef}>
+            <Tooltip content="Configure columns">
             <button
               onClick={() => setShowColumnPicker(prev => !prev)}
               className={clsx(
                 'p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg',
                 showColumnPicker && 'bg-theme-elevated text-theme-text-primary'
               )}
-              title="Configure columns"
             >
               <Columns3 className="w-4 h-4" />
             </button>
+            </Tooltip>
             {showColumnPicker && (
               <div className="absolute right-0 top-full mt-1 z-50 bg-theme-surface border border-theme-border rounded-lg shadow-lg py-1 min-w-[200px] max-h-[400px] flex flex-col">
                 <div className="shrink-0 px-3 py-2 border-b border-theme-border flex items-center justify-between">
@@ -4406,20 +4351,6 @@ export function ResourcesView({
               </div>
             )}
           </div>
-          <button
-            onClick={refetch}
-            disabled={isRefreshAnimating}
-            className={clsx(
-              'p-2 hover:bg-theme-elevated rounded-lg disabled:opacity-50 transition-colors duration-500',
-              refreshPhase === 'success' ? 'text-emerald-400' : 'text-theme-text-secondary hover:text-theme-text-primary'
-            )}
-            title="Refresh"
-          >
-            {refreshPhase === 'success'
-              ? <Check className="w-4 h-4 stroke-[2.5]" />
-              : <RefreshCw className={clsx('w-4 h-4', refreshPhase === 'spinning' && 'animate-spin')} />
-            }
-          </button>
           {onCreateResource && (
             <Tooltip content={`Create ${selectedKind.kind || 'resource'}`}>
               <button
@@ -4470,6 +4401,14 @@ export function ResourcesView({
               </button>
             </Tooltip>
           )}
+          {/* Freshness/liveness status — trailing and divided off from the action
+              buttons so it reads as a status, not another control. Resources has
+              no PageHeader, so this toolbar is its home. */}
+          <div className="mx-1 h-5 w-px bg-theme-border/60" />
+          {/* The list is SSE-invalidated (near-real-time), so it reads
+              "Auto-updating" with no refresh button — the stream keeps it
+              current, so a manual refresh would only undercut the claim. */}
+          <FreshnessControl mode="auto" connectionState={connectionState} />
         </div>
 
         {/* Bulk actions bar */}

package/src/components/scope-pill/ScopePill.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+export interface ScopePillProps {
+  /**
+   * The scope segments — typically a cluster switcher followed by a namespace
+   * picker, each rendered in its `variant="segment"` form (borderless). They're
+   * separated by a divider and read as one "what am I looking at" unit.
+   */
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * ScopePill is the shared bordered shell for the cluster + namespace "scope"
+ * control, used by both OSS Radar's header and Radar Hub's cluster top bar so
+ * the two stay visually identical. It is purely the container: the segments
+ * (ClusterSwitcher / NamespacePicker in segment variant) and their data,
+ * view-awareness, and any layout pinning are the host's concern.
+ *
+ * Deliberately NO `overflow-hidden`: ClusterSwitcher's dropdown renders inline
+ * (absolute, not portaled), so clipping this ancestor would hide it. Instead of
+ * clipping, the outer corners of the first/last segment's TRIGGER button are
+ * rounded (7px = the 8px pill radius minus its 1px border) so each segment's
+ * hover/active fill follows the pill's shape instead of poking square corners
+ * past it. `>button` targets only the trigger, never the dropdown's buttons.
+ */
+export function ScopePill({ children, className = '' }: ScopePillProps) {
+  return (
+    <div
+      className={`flex items-stretch shrink-0 rounded-lg border border-theme-border bg-theme-surface divide-x divide-theme-border [&>*:first-child>button]:rounded-l-[7px] [&>*:last-child>button]:rounded-r-[7px] ${className}`}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/scope-pill/index.ts

@@ -0,0 +1,2 @@
+export { ScopePill } from './ScopePill'
+export type { ScopePillProps } from './ScopePill'

package/src/components/timeline/TimelineList.tsx

@@ -99,6 +99,32 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     onQueryChange?.({ timeRange, kind: kindFilter || undefined })
   }, [timeRange, kindFilter, onQueryChange])
 
+  // Kind filter options: seed with common kinds, then accumulate every kind seen
+  // in the data so CRDs the cluster actually emits become filterable. The set only
+  // grows — selecting a kind narrows the server query to it, so deriving options
+  // from the current events alone would collapse the dropdown to that one kind.
+  const [seenKinds, setSeenKinds] = useState<Set<string>>(() => new Set(RESOURCE_KINDS))
+  useEffect(() => {
+    if (!events?.length) return
+    setSeenKinds((prev) => {
+      let next: Set<string> | null = null
+      for (const e of events) {
+        if (e.kind && !prev.has(e.kind)) {
+          if (!next) next = new Set(prev)
+          next.add(e.kind)
+        }
+      }
+      return next ?? prev
+    })
+  }, [events])
+  // Common kinds keep their curated order (most-used first); kinds discovered in
+  // the data that aren't in the seed (CRDs) are appended alphabetically.
+  const kindOptions = useMemo(() => {
+    const seeded = new Set<string>(RESOURCE_KINDS)
+    const extra = [...seenKinds].filter((k) => !seeded.has(k)).sort()
+    return [...RESOURCE_KINDS, ...extra]
+  }, [seenKinds])
+
 
   const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(onRefresh ?? (() => {}))
 
@@ -341,7 +367,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
           className="appearance-none bg-theme-elevated text-theme-text-primary text-sm rounded-lg px-3 py-2 border border-theme-border-light focus:outline-none focus:ring-2 focus:ring-blue-500"
         >
           <option value="">All Kinds</option>
-          {RESOURCE_KINDS.map((kind) => (
+          {kindOptions.map((kind) => (
             <option key={kind} value={kind}>
               {kind}
             </option>

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/SummaryTile.tsx

@@ -12,12 +12,16 @@ export function SummaryTile({
   tone = 'neutral',
   onClick,
   active = false,
+  loading = false,
 }: {
   label: string
   value: number
   tone?: SummaryTone
   onClick?: () => void
   active?: boolean
+  /** First fetch in flight — render a pulse instead of the value. A tile
+   *  that reads "0" while loading is a false zero, not a count. */
+  loading?: boolean
 }) {
   const toneClass = {
     neutral: 'text-theme-text-primary',
@@ -33,7 +37,11 @@ export function SummaryTile({
     error: 'border-red-500',
     info: 'border-sky-500',
   }[tone]
-  const value$ = <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
+  const value$ = loading ? (
+    <div className="my-1 h-3.5 w-8 animate-pulse rounded bg-theme-hover" aria-hidden />
+  ) : (
+    <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
+  )
   const label$ = <div className="text-xs text-theme-text-tertiary">{label}</div>
   if (!onClick) {
     return (

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'