@skyhook-io/k8s-ui 1.8.7 → 1.8.9

package/src/components/gitops/GitOpsTableView.tsx

@@ -32,11 +32,10 @@ import { FacetSection, FacetButton } from '../ui/Facet'
 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'
+import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
 
 // =============================================================================
@@ -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
@@ -269,13 +273,23 @@ export interface GitOpsTableViewProps {
 
 // ----- Main component --------------------------------------------------------
 
+const GITOPS_FILTER_SCHEMA = defineFilterSchema({
+  q: { param: 'q', type: 'text' },
+  sync: { param: 'sync', type: 'set' },
+  health: { param: 'health', type: 'set' },
+  project: { param: 'project', type: 'set' },
+  automation: { param: 'automation', type: 'set' },
+  labels: { param: 'labels', type: 'set' },
+  lifecycle: { param: 'lifecycle', type: 'single', default: 'all' },
+})
+
 export function GitOpsTableView({
   rows: allRowsInput,
   loading,
   error,
   counts,
   countsUnavailable,
-  onRefresh,
+  freshnessSlot,
   onRowClick,
   rowHrefFor,
   onDestinationClick,
@@ -296,36 +310,37 @@ export function GitOpsTableView({
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [mode, setMode] = useState<GitOpsMode>('applications')
   const [viewMode, setViewMode] = useState<GitOpsViewMode>('table')
-  const [search, setSearch] = useState('')
-  const [syncFilters, setSyncFilters] = useState<Set<string>>(new Set())
-  const [healthFilters, setHealthFilters] = useState<Set<string>>(new Set())
-  const [projectFilters, setProjectFilters] = useState<Set<string>>(new Set())
+  // Sync / health / project / automation / labels / lifecycle + search live in
+  // the URL (shareable, bookmarkable) via the shared filter-state contract.
+  // Deliberate divergences kept on their own state: `namespace` (entangled with
+  // the host globalNamespaces seam + the header scope pill — a separate product
+  // decision), `sort` (a compound view-preference, not a filter), and the
+  // destination filter (host-controlled, below).
+  const filters = useFilterState(GITOPS_FILTER_SCHEMA)
+  const search = filters.values.q
+  const syncFilters = filters.values.sync
+  const healthFilters = filters.values.health
+  const projectFilters = filters.values.project
+  const labelFilters = filters.values.labels
+  const automationFilters = filters.values.automation as Set<'auto' | 'manual' | 'suspended'>
+  const lifecycleFilter = filters.values.lifecycle as 'all' | 'terminating' | 'active'
+  const toggleAutomation = useCallback((value: 'auto' | 'manual' | 'suspended') => filters.toggle('automation', value), [filters.toggle])
   const [namespaceFilters, setNamespaceFilters] = useState<Set<string>>(new Set())
-  const [labelFilters, setLabelFilters] = useState<Set<string>>(new Set())
   const [showLabelsDropdown, setShowLabelsDropdown] = useState(false)
   const [labelSearch, setLabelSearch] = useState('')
-  // Auto-sync / Manual / Suspended are INDEPENDENT row attributes (a Flux app can
-  // be auto-reconciling AND suspended), so this is a multi-select facet like Sync
-  // and Health — not the old single-select that conflated the mode (auto vs
-  // manual) with the orthogonal suspended state.
-  const [automationFilters, setAutomationFilters] = useState<Set<'auto' | 'manual' | 'suspended'>>(new Set())
-  const toggleAutomation = useCallback((value: 'auto' | 'manual' | 'suspended') => {
-    setAutomationFilters((prev) => {
-      const next = new Set(prev)
-      next.has(value) ? next.delete(value) : next.add(value)
-      return next
-    })
-  }, [])
-  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,22 +468,19 @@ 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])
 
   const clearAllFilters = useCallback(() => {
-    setSearch('')
-    setSyncFilters(new Set())
-    setHealthFilters(new Set())
-    setProjectFilters(new Set())
+    filters.clearAll()
     setNamespaceFilters(new Set())
-    setLabelFilters(new Set())
-    setAutomationFilters(new Set())
-    setLifecycleFilter('all')
     onClearNamespaces?.()
     onDestinationFilterChange?.('all')
+    // filters.clearAll is a stable ref from the hook.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onClearNamespaces, onDestinationFilterChange])
 
   // True when nothing is filtered at all — backs the Total tile's active state.
@@ -522,6 +534,12 @@ export function GitOpsTableView({
 
   const showCrossClusterTile = typeof crossClusterCount === 'number' && mode === 'applications'
 
+  // First fetch, nothing to show yet. Drives the shape-stable loading
+  // treatment: tiles pulse instead of reading "0" (a false zero), the table
+  // area renders skeleton rows, and the filter rail holds its loaded height
+  // with section stubs — so the settled layout doesn't reflow into place.
+  const initialLoading = Boolean(loading) && allRowsInput.length === 0
+
   // Header tiles unify with the facet rail: each STATUS tile toggles its own
   // dimension and composes with the other facets + search (clicking "Out of
   // sync" adds sync=OutOfSync without wiping an active health filter or your
@@ -543,8 +561,8 @@ export function GitOpsTableView({
       value: statusSummary.outOfSync,
       tone: 'warning',
       active: syncFilters.size === 1 && syncFilters.has('OutOfSync'),
-      apply: () => setSyncFilters(new Set(['OutOfSync'])),
-      clear: () => setSyncFilters(new Set()),
+      apply: () => filters.setSet('sync', ['OutOfSync']),
+      clear: () => filters.setSet('sync', []),
     },
     {
       key: 'degraded',
@@ -552,8 +570,8 @@ export function GitOpsTableView({
       value: statusSummary.degraded,
       tone: 'error',
       active: healthFilters.size === 1 && healthFilters.has('Degraded'),
-      apply: () => setHealthFilters(new Set(['Degraded'])),
-      clear: () => setHealthFilters(new Set()),
+      apply: () => filters.setSet('health', ['Degraded']),
+      clear: () => filters.setSet('health', []),
     },
     {
       key: 'suspended',
@@ -561,8 +579,8 @@ export function GitOpsTableView({
       value: statusSummary.suspended,
       tone: 'warning',
       active: automationFilters.size === 1 && automationFilters.has('suspended'),
-      apply: () => setAutomationFilters(new Set(['suspended'])),
-      clear: () => setAutomationFilters(new Set()),
+      apply: () => filters.setSet('automation', ['suspended']),
+      clear: () => filters.setSet('automation', []),
     },
     {
       key: 'reconciling',
@@ -570,8 +588,8 @@ export function GitOpsTableView({
       value: syncCounts.get('Reconciling') ?? 0,
       tone: 'info',
       active: syncFilters.size === 1 && syncFilters.has('Reconciling'),
-      apply: () => setSyncFilters(new Set(['Reconciling'])),
-      clear: () => setSyncFilters(new Set()),
+      apply: () => filters.setSet('sync', ['Reconciling']),
+      clear: () => filters.setSet('sync', []),
     },
     ...(showCrossClusterTile
       ? [
@@ -596,19 +614,25 @@ 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}
+                  loading={initialLoading}
+                  onClick={() => {
+                    if (tile.active) tile.clear?.()
+                    else tile.apply?.()
+                  }}
+                />
+              ))}
+            </>
+          }
         />
       </div>
       <div
@@ -617,25 +641,26 @@ export function GitOpsTableView({
         }`}
       >
       <GitOpsFilterSidebar
+        loading={initialLoading}
         side={filtersSide}
         mode={mode}
         onModeChange={setMode}
         modeCounts={modeCounts}
         syncCounts={syncCounts}
         syncFilters={syncFilters}
-        onToggleSync={(value) => toggleSet(syncFilters, setSyncFilters, value)}
+        onToggleSync={(value) => filters.toggle('sync', value)}
         healthCounts={healthCounts}
         healthFilters={healthFilters}
-        onToggleHealth={(value) => toggleSet(healthFilters, setHealthFilters, value)}
+        onToggleHealth={(value) => filters.toggle('health', value)}
         automationFilters={automationFilters}
         automationCounts={automationCounts}
         onToggleAutomation={toggleAutomation}
         lifecycleFilter={lifecycleFilter}
-        onLifecycleFilterChange={setLifecycleFilter}
+        onLifecycleFilterChange={(v) => filters.setString('lifecycle', v)}
         terminatingCount={terminatingCount}
         projects={projects}
         projectFilters={projectFilters}
-        onToggleProject={(value) => toggleSet(projectFilters, setProjectFilters, value)}
+        onToggleProject={(value) => filters.toggle('project', value)}
         namespaces={rowNamespaces}
         namespaceFilters={namespaceFilters}
         onToggleNamespace={(value) => toggleSet(namespaceFilters, setNamespaceFilters, value)}
@@ -664,7 +689,7 @@ export function GitOpsTableView({
               <input
                 ref={searchInputRef}
                 value={search}
-                onChange={(e) => setSearch(e.target.value)}
+                onChange={(e) => filters.setString('q', e.target.value)}
                 placeholder="Search applications, repos, paths..."
                 className="h-8 w-full rounded-md border border-theme-border bg-theme-base pl-8 pr-3 text-sm text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
               />
@@ -678,14 +703,14 @@ 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
                 labels={labels}
                 activeLabels={labelFilters}
-                onToggle={(value) => toggleSet(labelFilters, setLabelFilters, value)}
-                onClear={() => setLabelFilters(new Set())}
+                onToggle={(value) => filters.toggle('labels', value)}
+                onClear={() => filters.setSet('labels', [])}
                 open={showLabelsDropdown}
                 onOpenChange={setShowLabelsDropdown}
                 search={labelSearch}
@@ -727,19 +752,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>
 
@@ -753,8 +765,8 @@ export function GitOpsTableView({
             <div className="flex h-full items-center justify-center text-sm text-theme-text-secondary">
               {modeLabel(mode)} view is queued behind the application list.
             </div>
-          ) : loading && filteredRows.length === 0 ? (
-            <PaneLoader label="Loading GitOps applications…" className="h-full" />
+          ) : initialLoading ? (
+            <GitOpsTableSkeleton />
           ) : error ? (
             <div className="p-4 text-sm text-red-500">Failed to load GitOps applications: {error.message}</div>
           ) : filteredRows.length === 0 ? (
@@ -804,7 +816,62 @@ export function GitOpsTableView({
 // GitOpsTableView's visual language and not generally useful elsewhere.
 // =============================================================================
 
+// Shape-stable loading stand-ins. Both mirror the loaded anatomy so data
+// resolves in place: rows appear inside the table frame, facets inside the
+// rail — no half-height rail dangling next to a centered spinner, no layout
+// jump when the response lands.
+function GitOpsTableSkeleton() {
+  return (
+    <div aria-live="polite" aria-label="Loading GitOps applications…" className="divide-y divide-theme-border-light">
+      {Array.from({ length: 10 }, (_, i) => (
+        <div key={i} className="flex items-center gap-6 px-4 py-3" style={{ opacity: 1 - i * 0.09 }}>
+          <div className="min-w-0 flex-[2] space-y-2">
+            <div className="h-4 w-2/3 animate-pulse rounded bg-theme-hover" />
+            <div className="h-3 w-1/2 animate-pulse rounded bg-theme-hover" />
+          </div>
+          <div className="hidden h-4 flex-1 animate-pulse rounded bg-theme-hover md:block" />
+          <div className="h-5 w-20 animate-pulse rounded-full bg-theme-hover" />
+          <div className="h-5 w-20 animate-pulse rounded-full bg-theme-hover" />
+          <div className="hidden h-4 flex-[1.5] animate-pulse rounded bg-theme-hover lg:block" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function GitOpsSidebarSkeleton() {
+  // Section stubs sized like the loaded rail (Sync ~4 rows, Health ~5,
+  // Automation ~3, Projects/Namespaces a few each) so the rail keeps its
+  // height while counts are unknown — showing real facet buttons with "0"
+  // counts would be false zeros.
+  const sections: Array<[string, number]> = [
+    ['Sync', 4],
+    ['Health', 5],
+    ['Automation', 3],
+    ['Projects', 4],
+    ['Namespaces', 4],
+  ]
+  return (
+    <div aria-hidden>
+      {sections.map(([title, rows]) => (
+        <div key={title} className="border-b border-theme-border-light px-3 py-3">
+          <div className="mb-2 h-3 w-24 animate-pulse rounded bg-theme-hover" />
+          <div className="space-y-1.5">
+            {Array.from({ length: rows }, (_, i) => (
+              <div key={i} className="flex items-center justify-between px-1.5 py-1">
+                <div className="h-3.5 animate-pulse rounded bg-theme-hover" style={{ width: `${52 - i * 6}%` }} />
+                <div className="h-3.5 w-6 animate-pulse rounded bg-theme-hover" />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 function GitOpsFilterSidebar({
+  loading,
   side,
   mode,
   onModeChange,
@@ -852,6 +919,8 @@ function GitOpsFilterSidebar({
   namespaceFilters: Set<string>
   onToggleNamespace: (value: string) => void
   onClear: () => void
+  /** Initial fetch in flight — hold the rail's shape with section stubs. */
+  loading?: boolean
 }) {
   return (
     <aside
@@ -866,6 +935,10 @@ function GitOpsFilterSidebar({
         </button>
       </div>
       <div className="flex-1 overflow-y-auto">
+        {loading ? (
+          <GitOpsSidebarSkeleton />
+        ) : (
+          <>
         {AVAILABLE_MODES.length > 1 && (
         <GitOpsFilterSection icon={GitBranch} title="Scope">
           <div className="grid grid-cols-2 gap-1">
@@ -959,6 +1032,8 @@ function GitOpsFilterSidebar({
             />
           ))}
         </GitOpsFilterSection>
+          </>
+        )}
       </div>
     </aside>
   )
@@ -1187,7 +1262,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 +1277,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>

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>

package/src/components/issues/IssuesView.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from
 import { ChevronRight, CircleCheck, Clock, ExternalLink } from 'lucide-react';
 import { ClusterName, EmptyState } from '../ui';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
-import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle } from './diagnostic';
+import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic';
 import {
   ISSUE_SEVERITY_BADGE_CLASS,
   ISSUE_SEVERITY_LABEL,
@@ -209,6 +209,17 @@ export function IssueRow({
                 <span className="shrink-0 tabular-nums">{affected}</span>
               </>
             ) : null}
+            {issue.incident_parent ? (
+              <>
+                <span aria-hidden>·</span>
+                {/* Non-interactive signal (the header is the toggle — a nested
+                    button would be invalid); the clickable link lives in the body. */}
+                <span className="min-w-0 truncate text-theme-text-tertiary" title={confidenceTitle(issue.incident_parent.confidence ?? '')}>
+                  ↳ {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}{' '}
+                  <span className="font-medium text-theme-text-secondary">{issue.incident_parent.ref.kind} / {issue.incident_parent.ref.name}</span>
+                </span>
+              </>
+            ) : null}
             {renderMeta?.(slotCtx)}
           </div>
         </div>
@@ -249,6 +260,21 @@ export function IssueRow({
             <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
               <div className="flex flex-col gap-4">
                 <Diagnosis issue={issue} />
+                {issue.incident_parent ? (
+                  <section className="flex flex-col gap-1">
+                    <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
+                      {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}
+                      {issue.incident_parent.confidence ? (
+                        <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary" title={confidenceTitle(issue.incident_parent.confidence)}>
+                          {issue.incident_parent.confidence} confidence
+                        </span>
+                      ) : null}
+                    </h4>
+                    <ul className="flex flex-col gap-px">
+                      <ResourceLine refForLink={memberRef(issue, issue.incident_parent.ref)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+                    </ul>
+                  </section>
+                ) : null}
                 <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 <div className="border-t border-theme-border/70 pt-3">
                   <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
@@ -274,7 +300,11 @@ function Diagnosis({ issue }: { issue: Issue }) {
   const { headline, detail } = issueMessageParts(issue);
   // When the issue carries a parsed plain-English cause, lead with it. The raw
   // detector message is kept below as de-emphasized detail.
-  const rawMessage = issue.cause ? issue.message ?? '' : [headline, detail].filter(Boolean).join(' ');
+  const visibleMessage = [headline, detail].filter(Boolean).join(' ');
+  const rawMessage = issue.raw_message ?? (issue.cause ? issue.message ?? '' : '');
+  const shouldShowRawMessage = issue.cause
+    ? Boolean(rawMessage)
+    : Boolean(issue.raw_message && issue.raw_message !== visibleMessage);
   return (
     <section className="flex flex-col gap-1">
       <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">What's wrong</h4>
@@ -309,9 +339,9 @@ function Diagnosis({ issue }: { issue: Issue }) {
           {issue.operation_retry_count ? ` · retried ${issue.operation_retry_count}×` : ''}
         </p>
       ) : null}
-      {/* Raw detector message, de-emphasized — shown below the parsed cause so
-          the precise error (URLs, resource names) is available without leading. */}
-      {issue.cause && rawMessage ? (
+      {/* Raw detector message, de-emphasized so precise controller/kubelet text
+          remains available without leading the diagnosis. */}
+      {shouldShowRawMessage ? (
         <p className="break-words font-mono text-[11px] leading-relaxed text-theme-text-tertiary">{rawMessage}</p>
       ) : null}
       {crash ? <p className="text-xs text-theme-text-tertiary tabular-nums">{crash}</p> : null}
@@ -384,6 +414,7 @@ function DiagnosticContext({
                     key={`${related.ref.group ?? ''}/${related.ref.kind}/${related.ref.namespace ?? ''}/${related.ref.name}#${relIdx}`}
                     label="Related"
                     refForLink={memberRef(issue, related.ref)}
+                    count={related.count}
                     resourceHref={resourceHref}
                     onResourceClick={onResourceClick}
                     ResourceLinkIcon={ResourceLinkIcon}
@@ -478,12 +509,14 @@ function AffectedResources({
 function ResourceLine({
   label,
   refForLink,
+  count,
   resourceHref,
   onResourceClick,
   ResourceLinkIcon,
 }: {
   label?: string;
   refForLink: IssueResourceRef;
+  count?: number;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
   ResourceLinkIcon: ComponentType<{ className?: string }>;
@@ -498,6 +531,9 @@ function ResourceLine({
         {r.namespace ? `${r.namespace} / ` : ''}
         {r.name}
       </span>
+      {count && count > 1 ? (
+        <span className="shrink-0 text-[10px] text-theme-text-tertiary tabular-nums" title={`${count} affected resources grouped under this issue`}>{count} affected</span>
+      ) : null}
       {linkable && <ResourceLinkIcon className="h-3 w-3 shrink-0 text-theme-text-tertiary opacity-0 transition-opacity group-hover/r:opacity-100" />}
     </>
   );

package/src/components/issues/ResourceIssuesSection.tsx

@@ -113,6 +113,9 @@ function CausalContext({ issue, onResourceClick }: { issue: Issue; onResourceCli
                         {rel.ref.namespace ? `${rel.ref.namespace} / ` : ''}
                         {rel.ref.name}
                       </span>
+                      {rel.count && rel.count > 1 ? (
+                        <span className="ml-1 tabular-nums" title={`${rel.count} affected resources grouped under this issue`}>· {rel.count} affected</span>
+                      ) : null}
                     </>
                   )
                   return (