@skyhook-io/k8s-ui 1.8.7 → 1.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.7",
+  "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

@@ -97,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())
@@ -294,6 +296,7 @@ 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')}

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/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>

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 (

package/src/components/issues/diagnostic.ts

@@ -42,11 +42,33 @@ export function diagnosticFactLabel(type: string): string {
       return 'Affected workloads';
     case 'pvc_blast_radius':
       return 'Blocked pods';
+    case 'apiservice_hpa':
+      return 'Stalled autoscalers';
+    case 'secret_not_ready':
+      return 'Dependent pods';
     default:
       return type.replace(/_/g, ' ');
   }
 }
 
+// Operator-facing lead-in for the symptom→root pointer chip. Honest per fact
+// type: a declared PVC/Secret edge is a cause; a co-located node is only
+// "related" (node pressure can be a shared victim, not the root), so it must not
+// claim "caused by".
+export function incidentParentLabel(factType?: string, confidence?: string): string {
+  switch (factType) {
+    case 'pvc_blast_radius':
+    case 'secret_not_ready':
+      return 'Caused by';
+    case 'apiservice_hpa':
+      return 'Likely cause';
+    case 'node_blast_radius':
+      return 'Related';
+    default:
+      return confidence === 'high' ? 'Caused by' : 'Possible cause';
+  }
+}
+
 // Plain-language gloss for the confidence chip's tooltip — the operator should
 // know a medium link is "these are co-located, the node may be the cause", not a
 // proven fact.

package/src/components/issues/index.ts

@@ -12,7 +12,7 @@ export {
   subjectRef,
   memberRef,
 } from './types';
-export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
+export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,

package/src/components/issues/issues.test.ts

@@ -1,6 +1,9 @@
 import { describe, it, expect } from 'vitest'
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
 import { compareIssues, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
 import { categoryLabel, groupLabel, groupBadgeClass } from './severity'
+import { IssueRow } from './IssuesView'
 
 const base: Issue = {
   id: 'id-0',
@@ -105,3 +108,21 @@ describe('image-pull message normalization', () => {
     expect(parts.detail).toBe('')
   })
 })
+
+describe('IssueRow diagnosis raw messages', () => {
+  it('shows raw_message when cleaned issue copy has no parsed cause', () => {
+    const issue = mk({
+      category: 'gitops_operation_failed',
+      category_group: 'configuration',
+      severity: 'critical',
+      reason: 'OperationFailed',
+      message: 'app path does not exist',
+      raw_message: 'rpc error: code = Unknown desc = app path does not exist',
+    })
+
+    const html = renderToString(createElement(IssueRow, { issue, open: true, onToggle: () => undefined, as: 'div' }))
+
+    expect(html).toContain('app path does not exist')
+    expect(html).toContain('rpc error: code = Unknown desc = app path does not exist')
+  })
+})

package/src/components/issues/types.ts

@@ -71,10 +71,26 @@ export interface IssueDiagnosticIssueRef {
   reason?: string;
   category?: string;
   severity?: IssueSeverity;
+  /** How many affected resources fold into this linked issue from the root's
+   *  perspective (e.g. 5 of a PVC's mounting pods under one Deployment issue).
+   *  Absent when the link covers a single resource. */
+  count?: number;
 }
 
 export type IssueDiagnosticConfidence = 'high' | 'medium' | 'low';
 
+/** Reverse pointer from a symptom issue to the root issue that explains it
+ *  (the inverse of diagnostic_context's root→symptom facts). Set only when a
+ *  single root is unambiguous. `ref` is the parent subject for display + deep
+ *  navigation (thread the issue's cluster_id onto it via memberRef). */
+export interface IssueIncidentParent {
+  id: string;
+  ref: IssueResourceRef;
+  category?: string;
+  confidence?: IssueDiagnosticConfidence;
+  fact_type?: string;
+}
+
 export interface IssueDiagnosticFact {
   type: string;
   message?: string;
@@ -158,6 +174,7 @@ export interface Issue {
 
   reason: string;
   message?: string;
+  raw_message?: string;
   /** Parsed domain diagnosis: plain-English cause, suggested next step, and
    *  an optional structured one-click fix.
    *  Server-emitted (omitempty); empty for issues without a parser. */
@@ -182,6 +199,7 @@ export interface Issue {
   members?: IssueResourceRef[];
   members_truncated?: boolean;
   diagnostic_context?: IssueDiagnosticContext;
+  incident_parent?: IssueIncidentParent;
   change_context?: IssueChangeContext;
 
   // Pod crash context carried from the representative member.