@skyhook-io/k8s-ui 1.8.6 → 1.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -85,7 +85,7 @@
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.0.0",
+    "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",
@@ -95,7 +95,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.22.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.2",

package/src/components/applications/ApplicationsList.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, type ReactNode } from 'react'
 import { type AppRow, buildSingleAppEntry } from '../../utils/applications'
 import { ApplicationsView } from './ApplicationsView'
 
@@ -11,9 +11,11 @@ import { ApplicationsView } from './ApplicationsView'
 export interface ApplicationsListProps {
   apps: AppRow[]
   onSelect: (key: string) => void
+  /** Leading element in the header actions (e.g. a freshness control). */
+  headerActions?: ReactNode
 }
 
-export function ApplicationsList({ apps, onSelect }: ApplicationsListProps) {
+export function ApplicationsList({ apps, onSelect, headerActions }: ApplicationsListProps) {
   // Env tokens this CLUSTER proved (identity classifications on the wire) feed
   // the namespace heuristic, so sibling-less rows in discovered env namespaces
   // still label without any hardcoded vocabulary.
@@ -25,6 +27,7 @@ export function ApplicationsList({ apps, onSelect }: ApplicationsListProps) {
       variant="single"
       entries={entries}
       onSelect={onSelect}
+      headerActions={headerActions}
       title="Applications"
       description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
     />

package/src/components/applications/ApplicationsView.tsx

@@ -56,6 +56,7 @@ const HEALTH_TONE: Record<AppHealth, FacetTone> = {
   unhealthy: 'error',
   degraded: 'warning',
   healthy: 'success',
+  neutral: 'info', // Idle — sky, calm
   unknown: 'neutral',
 }
 
@@ -96,9 +97,11 @@ export interface ApplicationsViewProps {
   /** Rendered instead of the built-in EmptyState when there are zero entries
    *  pre-filter (the fleet host injects a coverage/offline-aware empty). */
   emptySlot?: ReactNode
+  /** Leading element in the header actions cluster (e.g. a freshness control). */
+  headerActions?: ReactNode
 }
 
-export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot }: ApplicationsViewProps) {
+export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot, headerActions }: ApplicationsViewProps) {
   const [textFilter, setTextFilter] = useState('')
   const [fHealth, setFHealth] = useState<Set<AppHealth>>(new Set())
   const [fEnv, setFEnv] = useState<Set<string>>(new Set())
@@ -293,10 +296,12 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           description={description}
           actions={
             <>
+              {headerActions}
               <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} />
               {healthTile('unhealthy', 'error')}
               {healthTile('degraded', 'warning')}
               {healthTile('healthy', 'success')}
+              {healthTile('neutral', 'info')}
               {healthTile('unknown', 'neutral')}
             </>
           }

package/src/components/audit/AuditAlerts.tsx

@@ -5,6 +5,10 @@ import { SEVERITY_TEXT, BP_CATEGORY_BADGE, DEFAULT_BADGE_COLOR } from '../../uti
 
 export interface AuditFinding {
   kind: string
+  /** API group, backfilled by the backend from the builtin Kind→group table
+   *  (built-ins → e.g. "apps"/"batch"; CRDs → ""). Part of the resource key
+   *  used to join findings onto topology nodes / list rows. */
+  group?: string
   namespace: string
   name: string
   checkID: string

package/src/components/audit/AuditBadgeTooltip.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { AuditBadgeTooltip } from './AuditBadgeTooltip'
+
+const msgs = [
+  { severity: 'warning', message: 'Service selector matches no pods' },
+  { severity: 'danger', message: 'Ingress references missing Service' },
+  { severity: 'warning', message: 'Uses a deprecated API version' },
+  { severity: 'warning', message: 'A fourth finding' },
+]
+
+describe('AuditBadgeTooltip', () => {
+  it('lists each finding message up to the cap', () => {
+    const html = renderToString(<AuditBadgeTooltip messages={msgs.slice(0, 2)} />)
+    expect(html).toContain('Service selector matches no pods')
+    expect(html).toContain('Ingress references missing Service')
+    expect(html).not.toContain('more')
+  })
+
+  it('caps the list and collapses the rest into "+N more"', () => {
+    const html = renderToString(<AuditBadgeTooltip messages={msgs} max={3} />)
+    expect(html).toContain('+1 more')
+    expect(html).not.toContain('A fourth finding')
+  })
+
+  it('shows the click hint by default and omits it when disabled', () => {
+    expect(renderToString(<AuditBadgeTooltip messages={msgs.slice(0, 1)} />)).toContain('Click to open')
+    expect(renderToString(<AuditBadgeTooltip messages={msgs.slice(0, 1)} clickHint={false} />)).not.toContain('Click to open')
+  })
+})

package/src/components/audit/AuditBadgeTooltip.tsx

@@ -0,0 +1,47 @@
+import { ShieldAlert, AlertTriangle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { SEVERITY_TEXT } from '../../utils/badge-colors'
+
+export interface AuditBadgeMessage {
+  severity: string
+  message: string
+}
+
+interface AuditBadgeTooltipProps {
+  messages: AuditBadgeMessage[]
+  /** Max messages to list before collapsing the rest into "+N more". */
+  max?: number
+  /** Hint that clicking opens the resource — omitted when the badge isn't clickable. */
+  clickHint?: boolean
+}
+
+/**
+ * Inline tooltip body for an audit badge: lists the actual finding messages
+ * (danger-first) so the operator reads WHAT is wrong on hover, instead of a
+ * content-free "N findings". Shared by the resource-list and topology-node
+ * badges so the two can't drift.
+ */
+export function AuditBadgeTooltip({ messages, max = 3, clickHint = true }: AuditBadgeTooltipProps) {
+  const shown = messages.slice(0, max)
+  const overflow = messages.length - shown.length
+  return (
+    <div className="flex flex-col gap-1 text-left">
+      {shown.map((m, i) => {
+        const isDanger = m.severity === 'danger'
+        const Icon = isDanger ? ShieldAlert : AlertTriangle
+        return (
+          <div key={i} className="flex items-start gap-1.5">
+            <Icon className={clsx('w-3 h-3 shrink-0 mt-0.5', isDanger ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)} />
+            <span>{m.message}</span>
+          </div>
+        )
+      })}
+      {overflow > 0 && (
+        <div className="text-theme-text-tertiary">{`+${overflow} more`}</div>
+      )}
+      {clickHint && (
+        <div className="text-theme-text-tertiary mt-0.5">Click to open →</div>
+      )}
+    </div>
+  )
+}

package/src/components/audit/AuditFindingsTable.tsx

@@ -27,6 +27,10 @@ export interface CheckMeta {
   remediation: string
   frameworks?: string[]
   references?: CheckReference[]
+  /** Finding means the specific resource is broken (reference-integrity /
+   *  lifecycle), worth a per-resource topology/list badge — vs posture /
+   *  best-practice checks that fire near-universally. Set by the backend registry. */
+  badgeWorthy?: boolean
 }
 
 /** An authoritative link for a check (K8s docs, CIS, NSA/CISA, …). */

package/src/components/audit/index.ts

@@ -1,3 +1,4 @@
 export { AuditCard, type AuditCardData } from './AuditCard'
 export { AuditAlerts, type AuditFinding } from './AuditAlerts'
+export { AuditBadgeTooltip, type AuditBadgeMessage } from './AuditBadgeTooltip'
 export { AuditFindingsTable, type AuditFindingsTableProps, type ResourceGroup, type CheckMeta, type CheckReference } from './AuditFindingsTable'

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

@@ -58,6 +58,15 @@ export interface ClusterSwitcherProps {
   errorSlot?: ReactNode
   className?: string
   align?: 'left' | 'right'
+  /**
+   * 'chip' (default) renders a self-contained bordered pill. 'segment' renders
+   * a borderless label+value cell for embedding in a shared bordered container
+   * (the unified cluster+namespace scope control) — no border/background/min-w
+   * of its own, with an optional muted {@link label} before the value.
+   */
+  variant?: 'chip' | 'segment'
+  /** Muted label shown before the value in the 'segment' variant (e.g. "Cluster"). */
+  label?: string
 }
 
 // Trigger width cap. With middle-truncation kicking in, this is a
@@ -83,6 +92,8 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   errorSlot,
   className = '',
   align = 'left',
+  variant = 'chip',
+  label,
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
@@ -195,14 +206,21 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
         type="button"
         onClick={() => setIsOpen(v => !v)}
         disabled={disabled || loading}
-        className={`
-          flex items-center gap-1.5 px-2.5 py-1.5 min-w-[140px]
-          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
-        `}
+        className={
+          variant === 'segment'
+            ? `flex items-center gap-1.5 px-3 py-1.5 h-full min-w-[150px] max-w-[264px] text-[13px] font-medium
+               text-theme-text-primary hover:bg-theme-hover transition-colors cursor-pointer
+               disabled:opacity-50 disabled:cursor-not-allowed`
+            : `flex items-center gap-1.5 px-2.5 py-1.5 min-w-[140px]
+               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`
+        }
       >
+        {label && (
+          <span className="shrink-0 font-normal text-theme-text-tertiary">{label}</span>
+        )}
         {loading ? (
           <>
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -220,7 +238,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
             <ClusterName
               name={currentName}
               fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
-              className={TRIGGER_NAME_MAX_WIDTH}
+              className={variant === 'segment' ? 'min-w-0 max-w-[214px]' : TRIGGER_NAME_MAX_WIDTH}
               noTooltip={isOpen}
             />
             {currentSourceLabel && (
@@ -240,7 +258,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
             )}
           </>
         )}
-        <ChevronDown className={`w-3 h-3 ml-auto transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-3 h-3 shrink-0 transition-transform ${variant === 'segment' ? '' : 'ml-auto'} ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       {isOpen && (

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -184,11 +184,11 @@ export interface GitOpsDetailLayoutProps {
   isFleetContext?: boolean
   destinationCluster?: { id: string; name: string }
 
-  // Tab-title side effect — sets document.title to "<name> — Radar" while
+  // Tab-title side effect — sets document.title to "<name> · Radar" while
   // mounted, restores on unmount. Opt-in so hub-web fleet detail can pick
   // its own title format ("<name> — Fleet GitOps").
   manageDocumentTitle?: boolean
-  documentTitleSuffix?: string                // defaults to " — Radar"
+  documentTitleSuffix?: string                // defaults to " · Radar"
 
   // Children slot — for dialogs (SyncOptionsDialog, RollbackDialog, …)
   // that should portal to body. Caller owns dialog state. Children render
@@ -246,7 +246,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
   useEffect(() => {
     if (!manageDocumentTitle) return
     const previous = document.title
-    const suffix = documentTitleSuffix ?? ' — Radar'
+    const suffix = documentTitleSuffix ?? ' · Radar'
     document.title = `${identity.name}${suffix}`
     return () => { document.title = previous }
   }, [identity.name, manageDocumentTitle, documentTitleSuffix])

package/src/components/gitops/GitOpsStatusBadge.tsx

@@ -67,7 +67,10 @@ function getStatusIcon(status: GitOpsStatus) {
 }
 
 function getStatusColorClass(status: GitOpsStatus): string {
-  if (status.suspended) return SEVERITY_BADGE_BORDERED.warning
+  // Suspended sync (manual-sync mode) is an intentional operating mode many teams
+  // run by default — sky (info), not amber. Real drift surfaces separately as
+  // OutOfSync (still amber); the Pause icon + "Suspended" label signal it's manual.
+  if (status.suspended) return SEVERITY_BADGE_BORDERED.info
   if (status.sync === 'Synced' && status.health === 'Healthy') return SEVERITY_BADGE_BORDERED.success
   if (status.health === 'Degraded') return SEVERITY_BADGE_BORDERED.error
   if (status.sync === 'OutOfSync') return SEVERITY_BADGE_BORDERED.warning
@@ -112,7 +115,9 @@ function getHealthInfo(health: GitOpsHealthStatus) {
     case 'Degraded':
       return { icon: XCircle, color: SEVERITY_BADGE.error, label: 'Degraded' }
     case 'Suspended':
-      return { icon: Pause, color: SEVERITY_BADGE.warning, label: 'Suspended' }
+      // Intentional pause, not a degradation — sky (info), matching the resource
+      // table + app rollup. The Pause icon already signals it's deliberate.
+      return { icon: Pause, color: SEVERITY_BADGE.info, label: 'Suspended' }
     case 'Missing':
       return { icon: AlertCircle, color: SEVERITY_BADGE.warning, label: 'Missing' }
     default:
@@ -125,8 +130,9 @@ function getHealthInfo(health: GitOpsHealthStatus) {
  */
 export function SyncStatusBadge({ sync, suspended }: { sync: SyncStatus; suspended?: boolean }) {
   if (suspended) {
+    // Manual-sync mode is intentional — sky (info), not amber. See getStatusColorClass.
     return (
-      <span className={clsx('badge', SEVERITY_BADGE_BORDERED.warning)}>
+      <span className={clsx('badge', SEVERITY_BADGE_BORDERED.info)}>
         <Pause className="w-3 h-3" />
         Suspended
       </span>

package/src/components/gitops/GitOpsTableView.tsx

@@ -33,7 +33,6 @@ import { SortableTh, TH_CLASS, type SortDir } from '../ui/SortableTh'
 import { DistributionBar } from '../ui/DistributionBar'
 import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
 import { PaneLoader } from '../ui/PaneLoader'
-import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { getGitOpsResourceStatus } from './detail-helpers'
 import { isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
 import { toggleSet } from './GitOpsGraphFilterRail'
@@ -192,8 +191,13 @@ export interface GitOpsTableViewProps {
   // the Scope-section mode tabs and the empty-state check.
   counts: Record<string, number>
   countsUnavailable?: string[]
-  // Caller refresh — typically invalidates its useQuery + refetches.
+  // @deprecated Superseded by `freshnessSlot` — kept for source compatibility
+  // with existing consumers; no longer drives any affordance here.
   onRefresh?: () => void
+  // Host-injected freshness/liveness control (e.g. a <FreshnessControl>),
+  // rendered leading the header actions. The host owns the mode + data, so this
+  // shared table makes no assumption about whether the view auto-updates.
+  freshnessSlot?: ReactNode
   // Row click — caller routes to its own detail page. When the host also
   // passes `rowHrefFor`, the callback receives the MouseEvent so it can
   // `preventDefault()` for same-tree nav (e.g. react-router) or skip the
@@ -275,7 +279,7 @@ export function GitOpsTableView({
   error,
   counts,
   countsUnavailable,
-  onRefresh,
+  freshnessSlot,
   onRowClick,
   rowHrefFor,
   onDestinationClick,
@@ -317,15 +321,19 @@ export function GitOpsTableView({
     })
   }, [])
   const [lifecycleFilter, setLifecycleFilter] = useState<'all' | 'terminating' | 'active'>('all')
-  const [sort, setSort] = useState<{ key: SortKey; dir: SortDir }>({ key: 'urgency', dir: 'asc' })
-  // Shared refresh feedback (spin ≥400ms → checkmark) so clicking Refresh gives
-  // the same visual confirmation as every other view, even when the refetch is
-  // instant (the cache is already warm).
-  const [triggerRefresh, , refreshPhase] = useRefreshAnimation(onRefresh ?? (() => {}))
-  // Clicking a column sorts by it (starting at the column's natural direction —
-  // e.g. last-sync newest-first); clicking the active column reverses.
+  const [sort, setSort] = useState<{ key: SortKey; dir: SortDir } | null>({ key: 'urgency', dir: 'asc' })
+  // 3-state cycle: natural direction → reversed → off. The first click uses each
+  // column's natural direction (SORT_DEFAULT_DIR — e.g. Last Sync is newest-first)
+  // so the header cycle agrees with the tile-mode sort menu, which seeds the same
+  // default. "Off" (null) falls back to the urgency/health-worst-first ordering.
   const onSort = useCallback(
-    (key: SortKey) => setSort((prev) => (prev.key === key ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: SORT_DEFAULT_DIR[key] })),
+    (key: SortKey) =>
+      setSort((prev) => {
+        const natural = SORT_DEFAULT_DIR[key]
+        if (!prev || prev.key !== key) return { key, dir: natural }
+        if (prev.dir === natural) return { key, dir: natural === 'asc' ? 'desc' : 'asc' }
+        return null
+      }),
     [],
   )
 
@@ -453,7 +461,8 @@ export function GitOpsTableView({
       }
       return true
     })
-    return [...rows].sort((a, b) => compareRows(a, b, sort.key) * (sort.dir === 'asc' ? 1 : -1))
+    const eff = sort ?? { key: 'urgency' as SortKey, dir: 'asc' as SortDir }
+    return [...rows].sort((a, b) => compareRows(a, b, eff.key) * (eff.dir === 'asc' ? 1 : -1))
   }, [allRows, automationFilters, healthFilters, labelFilters, lifecycleFilter, mode, namespaceFilters, projectFilters, search, sort, syncFilters, destinationFilter])
 
   const terminatingCount = useMemo(() => allRows.filter((row) => row.terminating).length, [allRows])
@@ -596,19 +605,24 @@ export function GitOpsTableView({
           icon={GitBranch}
           title="GitOps"
           description="Applications and reconciliations with source, destination, sync, and health state."
-          actions={summaryTiles.map((tile) => (
-            <SummaryTile
-              key={tile.key}
-              label={tile.label}
-              value={tile.value}
-              tone={tile.tone}
-              active={tile.active}
-              onClick={() => {
-                if (tile.active) tile.clear?.()
-                else tile.apply?.()
-              }}
-            />
-          ))}
+          actions={
+            <>
+              {freshnessSlot}
+              {summaryTiles.map((tile) => (
+                <SummaryTile
+                  key={tile.key}
+                  label={tile.label}
+                  value={tile.value}
+                  tone={tile.tone}
+                  active={tile.active}
+                  onClick={() => {
+                    if (tile.active) tile.clear?.()
+                    else tile.apply?.()
+                  }}
+                />
+              ))}
+            </>
+          }
         />
       </div>
       <div
@@ -678,7 +692,7 @@ export function GitOpsTableView({
                 pattern); tile mode has no headers, so it keeps a compact sort
                 control wired to the same sort state. */}
             {viewMode === 'tiles' && (
-              <GitOpsSortMenu sortKey={sort.key} onChange={(k) => setSort({ key: k, dir: SORT_DEFAULT_DIR[k] })} />
+              <GitOpsSortMenu sortKey={sort?.key ?? 'urgency'} onChange={(k) => setSort({ key: k, dir: SORT_DEFAULT_DIR[k] })} />
             )}
             {labels.length > 0 && (
               <LabelsDropdown
@@ -727,19 +741,6 @@ export function GitOpsTableView({
               <GitOpsIconToggle active={viewMode === 'table'} label="Table view" icon={List} onClick={() => setViewMode('table')} />
               <GitOpsIconToggle active={viewMode === 'tiles'} label="Tiles view" icon={LayoutGrid} onClick={() => setViewMode('tiles')} />
             </div>
-            {onRefresh && (
-              <Tooltip content="Refresh GitOps resources">
-                <button
-                  type="button"
-                  onClick={triggerRefresh}
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-theme-border bg-theme-base text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
-                >
-                  {refreshPhase === 'success'
-                    ? <Check className="h-3.5 w-3.5 text-emerald-500" />
-                    : <RefreshCw className={clsx('h-3.5 w-3.5', (refreshPhase === 'spinning' || loading) && 'animate-spin')} />}
-                </button>
-              </Tooltip>
-            )}
           </div>
         </div>
 
@@ -1187,7 +1188,7 @@ function GitOpsTable({
   pendingRowActions,
 }: {
   rows: GitOpsRow[]
-  sort: { key: SortKey; dir: SortDir }
+  sort: { key: SortKey; dir: SortDir } | null
   onSort: (key: SortKey) => void
   onOpen: (row: GitOpsRow, event?: ReactMouseEvent) => void
   hrefFor?: (row: GitOpsRow) => string
@@ -1202,13 +1203,13 @@ function GitOpsTable({
     <table className="w-full min-w-[1040px] table-fixed border-separate border-spacing-0 text-sm">
       <thead className="sticky top-0 z-10 bg-theme-base">
         <tr>
-          <SortableTh label="Application" sortKey="name" activeKey={sort.key} direction={sort.dir} onSort={onSort} className={showActions ? 'w-[16%]' : 'w-[22%]'} />
-          <SortableTh label="Project" sortKey="project" activeKey={sort.key} direction={sort.dir} onSort={onSort} className="w-[9%]" />
-          <SortableTh label="Sync" sortKey="sync" activeKey={sort.key} direction={sort.dir} onSort={onSort} className="w-[9%]" />
-          <SortableTh label="Health" sortKey="health" activeKey={sort.key} direction={sort.dir} onSort={onSort} className="w-[9%]" />
+          <SortableTh label="Application" sortKey="name" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className={showActions ? 'w-[16%]' : 'w-[22%]'} />
+          <SortableTh label="Project" sortKey="project" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[9%]" />
+          <SortableTh label="Sync" sortKey="sync" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[9%]" />
+          <SortableTh label="Health" sortKey="health" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[9%]" />
           <th className={clsx(TH_CLASS, showDestination ? 'w-[20%]' : 'w-[28%]')}>Source</th>
           {showDestination && <th className={clsx(TH_CLASS, 'w-[14%]')}>Destination</th>}
-          <SortableTh label="Last Sync" sortKey="lastSync" activeKey={sort.key} direction={sort.dir} onSort={onSort} className="w-[10%]" />
+          <SortableTh label="Last Sync" sortKey="lastSync" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[10%]" />
           {showActions && (
             <th className={clsx(TH_CLASS, 'w-[6%] text-right')}>
               <span className="sr-only">Actions</span>
@@ -1704,7 +1705,9 @@ function compareRows(a: GitOpsRow, b: GitOpsRow, sortKey: SortKey) {
 // row sorting above a Synced-Progressing one. A sync-aware triage ordering is a
 // reasonable separate default, but not what "sort by Health" should mean.)
 const HEALTH_RANK: Record<string, number> = {
-  Degraded: 0, Missing: 0, Suspended: 1, Unknown: 2, Progressing: 3, Healthy: 4,
+  // Suspended is intentional/benign (neutral), so it sorts at the healthy end —
+  // not near Degraded/Missing — matching its sky tone across the other surfaces.
+  Degraded: 0, Missing: 0, Unknown: 2, Progressing: 3, Healthy: 4, Suspended: 4,
 }
 function healthRank(row: GitOpsRow): number {
   return HEALTH_RANK[row.health] ?? 2

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -56,6 +56,7 @@ export function GitOpsStatusStrip({ insight, loading }: GitOpsStatusStripProps)
   const operationFailure = (insight.issues ?? []).find(
     (i) => i.severity === 'critical' && i.scope === 'operation' && i.stuck,
   )
+  const operationTooltipMessage = summary.rawOperationMessage || summary.operationMessage
   return (
     <div className="border-b border-theme-border bg-theme-base px-4 py-2">
       <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
@@ -87,7 +88,7 @@ export function GitOpsStatusStrip({ insight, loading }: GitOpsStatusStripProps)
             (parsed cause, retry count, raw message) so the strip stays a
             calm orientation row instead of duplicating the error three times. */}
         {operation && summary.operationMessage && isInFlightPhase(operation) && (
-          <Tooltip content={summary.operationMessage} delay={400} wrapperClassName="min-w-0 max-w-[60ch]">
+          <Tooltip content={operationTooltipMessage} delay={400} wrapperClassName="min-w-0 max-w-[60ch]">
             <span className="block truncate text-[11px] text-theme-text-secondary">
               {summary.operationMessage}
             </span>
@@ -424,6 +425,8 @@ function GitOpsFailureCard({
   const [showRaw, setShowRaw] = useState(false)
   const stuck = !!issue.stuck
   const ref = issue.refs?.[0]
+  const rawControllerMessage = issue.rawMessage || issue.message
+  const rawControllerLabel = issue.rawMessage ? 'raw controller error' : 'controller message'
   // Title prioritizes the parsed cause's first sentence. Without parsing we
   // get the bare phase ("Failed") which alone tells the user nothing — fall
   // back to the first sentence of the raw message in that case so something
@@ -486,12 +489,12 @@ function GitOpsFailureCard({
               className="inline-flex items-center gap-1 text-[11px] text-theme-text-tertiary transition-colors hover:text-theme-text-secondary"
             >
               {showRaw ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
-              {showRaw ? 'Hide raw controller error' : 'Show raw controller error'}
+              {showRaw ? `Hide ${rawControllerLabel}` : `Show ${rawControllerLabel}`}
             </button>
           </div>
           {showRaw && (
             <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap break-all rounded border border-theme-border bg-theme-base px-3 py-2 font-mono text-[11px] text-theme-text-secondary">
-              {issue.message}
+              {rawControllerMessage}
             </pre>
           )}
         </div>
@@ -609,6 +612,7 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
             const t = severityTone(issue.severity)
             const ref = issue.refs?.[0]
             const actionable = !!(onSelectIssue && ref)
+            const rawMessage = issue.rawMessage && issue.rawMessage !== issue.message ? issue.rawMessage : ''
             return (
               <button
                 key={`${issue.reason}-${index}`}
@@ -628,6 +632,7 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
                   </div>
                   <p className="mt-0.5 text-theme-text-secondary">{issue.message}</p>
                   {issue.cause && <p className="mt-0.5 text-[11px] text-theme-text-tertiary">{issue.cause}</p>}
+                  {rawMessage && <p className="mt-0.5 break-words font-mono text-[11px] text-theme-text-tertiary">{rawMessage}</p>}
                   {issue.action && <p className="mt-0.5 text-[11px] text-theme-text-tertiary">{issue.action}</p>}
                 </div>
                 {actionable && ref && (
@@ -1112,7 +1117,7 @@ function ChangeRow({
               live health message — operators chasing a broken sync want
               the failure reason on the same row, not in a drawer. */}
           {change.syncError && (
-            <Tooltip content={change.syncError} delay={400} wrapperClassName="ml-[18px] mt-1 block max-w-full">
+            <Tooltip content={change.rawSyncError || change.syncError} delay={400} wrapperClassName="ml-[18px] mt-1 block max-w-full">
               <span className="line-clamp-3 text-xs text-red-600 dark:text-red-400">{change.syncError}</span>
             </Tooltip>
           )}
@@ -1386,7 +1391,9 @@ function HistoryRows({
                 </Tooltip>
               )}
               {item.message && (
-                <div className={clsx('mt-0.5 line-clamp-2 text-[11px]', sourceDisplay ? 'text-theme-text-tertiary' : 'text-theme-text-secondary')}>{item.message}</div>
+                <Tooltip content={item.rawMessage || item.message} delay={400} wrapperClassName="mt-0.5 block max-w-full">
+                  <div className={clsx('line-clamp-2 text-[11px]', sourceDisplay ? 'text-theme-text-tertiary' : 'text-theme-text-secondary')}>{item.message}</div>
+                </Tooltip>
               )}
             </div>
           </li>