@skyhook-io/k8s-ui 1.8.6 → 1.8.8

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/timeline/TimelineSwimlanes.tsx

@@ -573,6 +573,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
           <HealthBarLegendItem color="bg-blue-500/60 dark:bg-blue-500/60" label="rolling" description="Expected degradation during deployment rollout" />
           <HealthBarLegendItem color="bg-amber-500/60 dark:bg-[#b8861e]" label="degraded" description="Unexpected partial availability" />
           <HealthBarLegendItem color="bg-red-500/60 dark:bg-red-500/60" label="unhealthy" description="Resource is failing or not ready" />
+          <HealthBarLegendItem color="bg-sky-500/60 dark:bg-sky-500/60" label="idle" description="Intentionally off/resting (completed, suspended, scaled to zero)" />
         </div>
       </div>
 

package/src/components/timeline/shared.tsx

@@ -138,6 +138,10 @@ export function HealthSpanLegend() {
         <span className="w-4 h-2 rounded-sm bg-red-500/60 dark:bg-red-500/60" />
         <span>Unhealthy</span>
       </span>
+      <span className="flex items-center gap-1">
+        <span className="w-4 h-2 rounded-sm bg-sky-500/60 dark:bg-sky-500/60" />
+        <span>Idle</span>
+      </span>
     </div>
   )
 }
@@ -387,7 +391,7 @@ export function TimeAxis({ startTime, endTime, tickCount = 8, labelColumnClass =
  * Health span bar showing a health state over a time range.
  */
 interface HealthSpanProps {
-  health: 'healthy' | 'degraded' | 'unhealthy' | string
+  health: 'healthy' | 'rolling' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown' | string
   left: number // percentage
   width: number // percentage
   title?: string
@@ -408,6 +412,9 @@ export function HealthSpan({ health, left, width, title, createdBefore }: Health
         return 'bg-amber-500/60 dark:bg-[#b8861e]'
       case 'unhealthy':
         return 'bg-red-500/60 dark:bg-red-500/60'
+      case 'neutral':
+        // intentional/idle (suspended, scaled-to-0) — sky, calm
+        return 'bg-sky-500/60 dark:bg-sky-500/60'
       default:
         // Unknown or other states
         return 'bg-gray-400/40'
@@ -569,7 +576,11 @@ export function buildHealthSpans(
   const existsUntil = deleteEvent ? new Date(deleteEvent.timestamp).getTime() : now
 
   const spans: { start: number; end: number; health: string }[] = []
-  let currentHealth = 'unknown'
+  // `null` is the "no health observed yet" sentinel — kept distinct from the
+  // real 'unknown' health value (emitted for node-lost pods). Overloading
+  // 'unknown' as both swallowed genuine-unknown spans and then false-greened
+  // them via the empty-spans fallback below.
+  let currentHealth: string | null = null
   let spanStart = Math.max(existsFrom, startTime)
 
   for (const evt of sorted) {
@@ -586,7 +597,7 @@ export function buildHealthSpans(
       continue
     }
 
-    if (newHealth !== currentHealth && currentHealth !== 'unknown') {
+    if (newHealth !== currentHealth && currentHealth !== null) {
       spans.push({ start: spanStart, end: ts, health: currentHealth })
       spanStart = ts
     }
@@ -594,7 +605,7 @@ export function buildHealthSpans(
   }
 
   // Close final span (only up to when resource existed)
-  if (currentHealth !== 'unknown') {
+  if (currentHealth !== null) {
     spans.push({ start: spanStart, end: Math.min(existsUntil, now), health: currentHealth })
   }
 

package/src/components/topology/K8sResourceNode.tsx

@@ -3,15 +3,17 @@ import { Handle, Position } from '@xyflow/react'
 import {
   ChevronDown,
   ChevronUp,
+  TriangleAlert,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
-import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
+import { healthToSeverity, SEVERITY_DOT, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { workloadHue } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { midTruncate } from '../../utils/format'
 import { Tooltip } from '../ui/Tooltip'
+import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 
 // Get actionable tooltip content for health issues
 function getIssueTooltip(issue: string | undefined): React.ReactNode {
@@ -215,6 +217,12 @@ const STATUS_STYLES: Record<HealthStatus, React.CSSProperties> = {
     border: '2px solid rgb(239 68 68 / 0.7)',
     backgroundColor: 'rgb(248 113 113 / 0.15)',
   },
+  // neutral = intentional/idle (suspended, scaled-to-0) — sky outline, calm.
+  // Distinct from `unknown`/`healthy` which carry no outline.
+  neutral: {
+    border: '2px solid rgb(56 189 248 / 0.55)',
+    backgroundColor: 'rgb(56 189 248 / 0.1)',
+  },
   healthy: {},
   unknown: {},
 }
@@ -376,6 +384,15 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   id,
 }: K8sResourceNodeProps) {
   const { kind, name, status, nodeData, selected, dimmed, onExpand, onCollapse, isExpanded } = data
+  // Cluster Audit findings joined onto this node by the host (web/ enriches each
+  // node's data by auditKey). The host only counts "badge-worthy" findings —
+  // reference-integrity / lifecycle, "this resource is actually broken" — not the
+  // posture/best-practice nags that fire near-universally, so the indicator stays
+  // a signal. Colored by worst severity (danger red, else warning amber).
+  const auditDanger = typeof nodeData.auditDanger === 'number' ? nodeData.auditDanger : 0
+  const auditWarning = typeof nodeData.auditWarning === 'number' ? nodeData.auditWarning : 0
+  const auditTotal = auditDanger + auditWarning
+  const auditMessages = Array.isArray(nodeData.auditMessages) ? (nodeData.auditMessages as AuditBadgeMessage[]) : []
   // Workload tint (application graph): a node owned by exactly one workload
   // carries that workload's hue. Only on healthy/unknown cards — degraded/
   // unhealthy already own the card background for health, which must win.
@@ -506,6 +523,16 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   <ChevronUp className="w-3.5 h-3.5 text-theme-text-secondary" />
                 </button>
               )}
+              {auditTotal > 0 && (
+                <Tooltip
+                  content={auditMessages.length > 0
+                    ? <AuditBadgeTooltip messages={auditMessages} clickHint={false} />
+                    : `${auditTotal} audit ${auditTotal === 1 ? 'finding' : 'findings'}${auditDanger > 0 ? ` · ${auditDanger} danger` : ''}`}
+                  position="right"
+                >
+                  <TriangleAlert className={clsx('w-3 h-3 cursor-help', auditDanger > 0 ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)} />
+                </Tooltip>
+              )}
               {issueTooltip ? (
                 <Tooltip content={issueTooltip} position="right">
                   <span className={clsx('w-1.5 h-1.5 rounded-full cursor-help', getStatusDotColor(status))} />

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/topology/layout.ts

@@ -731,11 +731,14 @@ export function buildHierarchicalElkGraph(
   }
 }
 
-// Lower number = higher severity
-const HEALTH_PRIORITY: Record<HealthStatus, number> = { unhealthy: 0, degraded: 1, unknown: 2, healthy: 3 }
+// Lower number = higher severity. `neutral` (intentional/idle) is the
+// most-benign tier, so a group whose every member is idle rolls up to neutral,
+// while a mixed healthy+idle group still reads healthy (healthy out-ranks
+// neutral). An empty/unresolved group defaults to healthy.
+const HEALTH_PRIORITY: Record<HealthStatus, number> = { unhealthy: 0, degraded: 1, unknown: 2, healthy: 3, neutral: 4 }
 
 function computeGroupHealth(memberIds: string[], nodeMap: Map<string, TopologyNode>): { worstStatus: HealthStatus; unhealthyCount: number } {
-  let worstPriority = 3
+  let worstPriority = Infinity
   let worstStatus: HealthStatus = 'healthy'
   let unhealthyCount = 0
   for (const id of memberIds) {
@@ -804,8 +807,11 @@ function computeWorkloadCards(
     })
     const primary = sorted[0]
 
-    // Compute worst health
-    let worstPriority = 3
+    // Compute worst health. Seed with Infinity (not 3) so an all-neutral
+    // component can surface neutral — `neutral` is priority 4 (most benign), so a
+    // `< 3` seed would never accept it and the card would stay green. Matches
+    // computeGroupHealth.
+    let worstPriority = Infinity
     let worstStatus: HealthStatus = 'healthy'
     for (const node of comp) {
       const p = HEALTH_PRIORITY[node.status] ?? 2

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

@@ -5,9 +5,14 @@ import radarLoadingIconAsset from '../../assets/radar/radar-icon-loading.svg'
 // StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
 const radarLoadingIcon = assetUrl(radarLoadingIconAsset)
 
-// PaneLoader — center-of-pane loading state. Animated radar icon stacked
-// above a label so swapping the label across the loading chain doesn't
-// shift the icon horizontally. Pin to the parent's fill via `className`
+// PaneLoader — center-of-pane loading state. The animated radar icon is
+// pinned to the pane's exact center; the label hangs at a fixed offset
+// BELOW it, absolutely positioned (not a flex sibling), so the label never
+// affects where the icon sits. The icon therefore holds a single position
+// while only the text under it appears/changes — and it lands at the same
+// point as the host/connect splash surfaces (which center the icon at 50%
+// with the label decoupled below), so a splash → PaneLoader hand-off no
+// longer makes the logo jump. Pin to the parent's fill via `className`
 // (`flex-1`, `h-full`, `h-32`, `absolute inset-0`, etc.). The SVG self-
 // animates (sweep arm + blips, `prefers-reduced-motion` honored).
 export function PaneLoader({
@@ -17,10 +22,23 @@ export function PaneLoader({
   label?: string
   className?: string
 }) {
+  // No `relative` on the root: the label anchors to the inner `relative` span
+  // below, and callers may pass a positioning class (e.g. `absolute inset-0`,
+  // for topology panes) — a root `relative` would conflict with it.
   return (
-    <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
-      <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-      <span className="text-sm text-theme-text-tertiary">{label}</span>
+    <div className={`flex items-center justify-center ${className}`} aria-live="polite">
+      {/* The icon is the only in-flow child, so it centers in the pane. The
+          label is absolutely positioned below the icon and so never shifts it. */}
+      <span className="relative">
+        <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+        {/* Label style matches the splash surfaces (17px semibold tracking-tight,
+            primary) so the whole loading family — boot splash, connect splash,
+            PaneLoader — reads as one continuous state, not a font change at the
+            hand-off. */}
+        <span className="absolute left-1/2 top-full mt-3 -translate-x-1/2 whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
+          {label}
+        </span>
+      </span>
     </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/drawer-components.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ProblemAlerts, OperationalIssuesShownContext } from './drawer-components'
+
+const problems = [
+  { color: 'red' as const, message: 'Application is Degraded' },
+  { color: 'yellow' as const, message: 'Application is OutOfSync' },
+]
+
+describe('ProblemAlerts', () => {
+  it('renders every problem', () => {
+    const html = renderToString(<ProblemAlerts problems={problems} />)
+    expect(html).toContain('Application is Degraded')
+    expect(html).toContain('Application is OutOfSync')
+  })
+
+  it('renders nothing when there are no problems', () => {
+    expect(renderToString(<ProblemAlerts problems={[]} />)).toBe('')
+  })
+
+  // Regression guard: ProblemAlerts is used only by GitOps renderers, whose
+  // problems the live-Issues pipeline does not comprehensively emit. It must NOT
+  // suppress itself under the Operational-Issues context — doing so hid real
+  // GitOps warnings (e.g. a manual Argo app's OutOfSync). Pod/Workload renderers
+  // self-gate their own arrays; this component never should.
+  it('still renders under OperationalIssuesShownContext (does not self-suppress)', () => {
+    const html = renderToString(
+      <OperationalIssuesShownContext.Provider value={true}>
+        <ProblemAlerts problems={problems} />
+      </OperationalIssuesShownContext.Provider>
+    )
+    expect(html).toContain('Application is Degraded')
+    expect(html).toContain('Application is OutOfSync')
+  })
+})