@skyhook-io/k8s-ui 1.18.0 → 1.18.2

package/src/components/ui/drawer-components.tsx

@@ -1,4 +1,5 @@
-import { dedupeResourceRefs, omitResourceRefs } from '../../utils/resource-refs'
+import { dedupeResourceRefs, omitResourceRefs, resourceRefKey } from '../../utils/resource-refs'
+import { gapReasonText } from '../../utils/read-actions'
 import { customResourceDefinitionRef, getCRDDefinitionsSnapshot, subscribeCRDDefinitions } from '../../utils/navigation'
 import { Disclosure } from './Disclosure'
 import { createContext, useContext, useState, useSyncExternalStore } from 'react'
@@ -295,9 +296,9 @@ function isConditionHealthy(cond: { type?: string; status?: string }): boolean {
   return inverted ? cond.status === 'False' : cond.status === 'True'
 }
 
-export type ConditionTone = 'ok' | 'warning' | 'fail' | 'unknown'
+export type ConditionTone = 'ok' | 'warning' | 'fail' | 'unknown' | 'neutral'
 
-export function defaultConditionTone(cond: { type?: string; status?: string }): ConditionTone {
+export function defaultConditionTone(cond: { type?: string; status?: string }): Exclude<ConditionTone, 'neutral'> {
   if (cond.status !== 'True' && cond.status !== 'False') return 'unknown'
   return isConditionHealthy(cond) ? 'ok' : 'fail'
 }
@@ -342,6 +343,7 @@ export function ConditionsSection({
             const isOk = tone === 'ok'
             const isWarning = tone === 'warning'
             const isFail = tone === 'fail'
+            const isNeutral = tone === 'neutral'
             return (
               <div key={cond.type} className={clsx(
                 'flex items-start py-1.5 pr-1 text-sm relative',
@@ -355,12 +357,14 @@ export function ConditionsSection({
                 {/* Timeline dot */}
                 <span className={clsx(
                   'w-3 h-3 rounded-full flex items-center justify-center shrink-0 mt-1 z-10 ring-2 ring-theme-surface',
-                  isOk ? 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
+                  isNeutral ? 'bg-theme-elevated text-theme-text-tertiary'
+                    : isOk ? 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
                     : tone === 'unknown' ? 'bg-gray-400/20 text-gray-400 dark:bg-gray-400/30'
                     : isWarning ? 'bg-amber-500/25 text-amber-600 dark:text-amber-400 dark:bg-amber-500/35'
                     : 'bg-red-500/25 text-red-500 dark:bg-red-500/35'
                 )}>
-                  {isOk ? <Check className="w-2 h-2" strokeWidth={4} />
+                  {isNeutral ? <Minus className="w-2 h-2" strokeWidth={4} />
+                    : isOk ? <Check className="w-2 h-2" strokeWidth={4} />
                     : tone === 'unknown' ? <Minus className="w-2 h-2" strokeWidth={4} />
                     : isWarning ? <AlertTriangle className="w-2 h-2" strokeWidth={4} />
                     : <X className="w-2 h-2" strokeWidth={4} />}
@@ -369,7 +373,8 @@ export function ConditionsSection({
                 <div className="min-w-0 flex-1 pl-2">
                   <span className={clsx(
                     'font-medium text-[13px]',
-                    isOk ? 'text-theme-text-primary'
+                    isNeutral ? 'text-theme-text-secondary'
+                      : isOk ? 'text-theme-text-primary'
                       : tone === 'unknown' ? 'text-theme-text-secondary'
                         : isWarning ? 'text-amber-600 dark:text-amber-400'
                           : 'text-red-600 dark:text-red-400'
@@ -415,7 +420,7 @@ interface AlertBannerProps {
   icon?: React.ComponentType<{ className?: string }>
   title: string
   message?: React.ReactNode
-  items?: string[]
+  items?: React.ReactNode[]
   children?: React.ReactNode
   /** A control at the end of the title line, e.g. a link to where the problem is handled. */
   action?: React.ReactNode
@@ -815,24 +820,57 @@ export type CopyHandler = (text: string, key: string) => void
 // RELATED RESOURCES SECTION
 // ============================================================================
 
-import type { TimelineEvent, Relationships, ResourceRef } from '../../types'
+import type { TimelineEvent, Relationships, ResourceRef, OwnershipCoverage, ManagerAnswer } from '../../types'
 import { isChangeEvent, isK8sEvent } from '../../types'
-import { Link } from 'lucide-react'
+import { Info, Link } from 'lucide-react'
 import { formatRelativeAgeTime } from '../../utils/format'
 
 interface RelatedResourcesSectionProps {
   relationships: Relationships | undefined
   onNavigate?: (ref: ResourceRef) => void
+  /** The URL plural of the object shown (e.g. `deployments`). */
+  kind?: string
+  /** The manager the resource's tracking metadata names, when every manager's
+   * list was read, that one's doesn't list the resource and another's does. */
+  trackedBy?: string
 }
 
-export function RelatedResourcesSection({ relationships, onNavigate }: RelatedResourcesSectionProps) {
+// Kinds whose objects usually own others. An empty Children list for one of
+// these is surprising, so it says it covered only the kinds Radar checked;
+// for any other kind an empty list stays hidden, or nearly every leaf object
+// would carry the note.
+const KINDS_WITH_CHILDREN = new Set(['deployments', 'replicasets', 'statefulsets', 'daemonsets', 'jobs', 'cronjobs', 'services', 'rollouts'])
+
+export function RelatedResourcesSection({ relationships, onNavigate, kind, trackedBy }: RelatedResourcesSectionProps) {
   if (!relationships) return null
 
   const configRefs = omitResourceRefs(relationships.configRefs ?? [], relationships.dependencies ?? [])
   const consumers = omitResourceRefs(relationships.consumers ?? [], relationships.dependents ?? [])
+  const alsoOwnedBy = omitResourceRefs(relationships.owners ?? [], relationships.owner ? [relationships.owner] : [])
+  const managesNote = membersNote(relationships.ownership?.manages, (relationships.manages?.length ?? 0) > 0)
+  const managers = dedupeResourceRefs(relationships.managers ?? [])
+  const managedByNote = managersNote(relationships.ownership, managers.length, trackedBy)
+  const unanswered = ownershipUnanswered(relationships.ownership)
+  const several = !relationships.owner && relationships.ownership?.primaryOwnerState === 'several'
+  const ownerMissing = relationships.owner || several ? undefined : ownerNote(relationships.ownership)
+  let childrenCoverage = childrenNote(relationships.ownership)
+  const noChildren = !relationships.children?.length && !relationships.olderRevisions?.length
+  if (noChildren && childrenCoverage?.hint && !childrenCoverage.text && kind && KINDS_WITH_CHILDREN.has(kind)) {
+    childrenCoverage = { ...childrenCoverage, text: 'No children among the kinds Radar checked.' }
+  }
 
   const hasRelationships =
     relationships.owner ||
+    unanswered ||
+    ownerMissing ||
+    several ||
+    childrenCoverage?.text ||
+    (relationships.olderRevisions && relationships.olderRevisions.length > 0) ||
+    alsoOwnedBy.length > 0 ||
+    managers.length > 0 ||
+    managedByNote.text ||
+    (relationships.manages && relationships.manages.length > 0) ||
+    managesNote ||
     relationships.deployment ||
     relationships.node ||
     (relationships.children && relationships.children.length > 0) ||
@@ -864,8 +902,20 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
   return (
     <Section title="Related Resources" icon={Link} defaultExpanded>
       <div className="space-y-3">
-        {relationships.owner && (
-          <RelationshipGroup label="Owner" refs={[relationships.owner]} onNavigate={onNavigate} />
+        {unanswered && <div className="text-xs text-theme-text-tertiary">{unanswered}</div>}
+        {(relationships.owner || ownerMissing) && (
+          <RelationshipGroup label="Owner" refs={relationships.owner ? [relationships.owner] : []} onNavigate={onNavigate} note={ownerMissing} />
+        )}
+        {(alsoOwnedBy.length > 0 || several) && (
+          <RelationshipGroup
+            label={relationships.owner || ownerMissing ? 'Also Owned By' : 'Owners'}
+            refs={dedupeResourceRefs(alsoOwnedBy)}
+            onNavigate={onNavigate}
+            note={several ? { text: alsoOwnedBy.length > 0 ? 'None of them is its controller.' : 'None of the owners it names can be shown.' } : undefined}
+          />
+        )}
+        {(managers.length > 0 || managedByNote.text) && (
+          <RelationshipGroup label={managersListOnly(relationships.ownership?.manager, managers) ? 'Listed By' : 'Managed By'} refs={managers} onNavigate={onNavigate} note={managedByNote} />
         )}
         {relationships.deployment && (
           <RelationshipGroup label="Deployment" refs={[relationships.deployment]} onNavigate={onNavigate} />
@@ -873,8 +923,18 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
         {relationships.node && (
           <RelationshipGroup label="Node" refs={[relationships.node]} onNavigate={onNavigate} />
         )}
-        {relationships.children && relationships.children.length > 0 && (
-          <RelationshipGroup label="Children" refs={dedupeResourceRefs(relationships.children)} onNavigate={onNavigate} />
+        {((relationships.children && relationships.children.length > 0) || childrenCoverage?.text || (relationships.olderRevisions && relationships.olderRevisions.length > 0)) && (
+          <RelationshipGroup
+            label="Children"
+            refs={dedupeResourceRefs(relationships.children ?? [])}
+            onNavigate={onNavigate}
+            note={childrenCoverage}
+            more={olderRevisions(relationships.olderRevisions)}
+            capped={relationships.ownership?.children?.truncated}
+          />
+        )}
+        {((relationships.manages && relationships.manages.length > 0) || managesNote) && (
+          <RelationshipGroup label="Manages" refs={dedupeResourceRefs(relationships.manages ?? [])} onNavigate={onNavigate} note={managesNote} capped={relationships.ownership?.manages?.truncated} />
         )}
         {relationships.services && relationships.services.length > 0 && (
           <RelationshipGroup label="Services" refs={dedupeResourceRefs(relationships.services)} onNavigate={onNavigate} />
@@ -947,23 +1007,220 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
   )
 }
 
+// ownershipUnanswered says why Owner and Children couldn't be answered at all.
+function ownershipUnanswered(coverage: OwnershipCoverage | undefined): string | undefined {
+  const reason = coverage?.unavailableReason
+  if (!reason) return undefined
+  if (reason === 'user_forbidden') return "Owner and children aren't shown: your access lets you open this object, but not list its kind here."
+  return `Owner and children couldn't be read: ${gapReasonText(reason)}.`
+}
+
+// ownerNote says why no owner is named, when there is an owner reference.
+function ownerNote(coverage: OwnershipCoverage | undefined): RelationshipNote | undefined {
+  const ref = coverage?.ownerRef
+  const named = ref?.kind && ref.name ? `${ref.kind} ${ref.name}` : 'the owner it names'
+  switch (coverage?.primaryOwnerState) {
+    case 'gone':
+      return { text: `${capitalize(named)} no longer exists.` }
+    case 'replaced':
+      return { text: `${capitalize(named)} was deleted and recreated; this object names the earlier one.` }
+    case 'unknown':
+      return { text: coverage?.ownerReason ? `Couldn't check ${named} (${gapReasonText(coverage.ownerReason)}).` : `Couldn't check ${named}.` }
+    case 'withheld':
+      return { text: 'Not visible to you.' }
+    case 'unresolvable':
+      return { text: "Its owner reference can't be resolved in this cluster." }
+    case 'excluded':
+      return { text: "Its owner reference names an Event, which Radar doesn't follow as an owner." }
+  }
+  return undefined
+}
+
+// childrenNote says what a Children list may be missing. Kinds Radar doesn't
+// collect are a hint, since most lists miss a few; kinds it couldn't check
+// for any other reason, a list cut short, and places the viewer may not read
+// are said outright.
+function childrenNote(coverage: OwnershipCoverage | undefined): RelationshipNote | undefined {
+  const children = coverage?.children
+  if (!children) return undefined
+  const uncollected = new Set<string>()
+  let someNamespaces = false
+  let undiscovered = false
+  const pressing = new Map<string, string>()
+  for (const g of children.notChecked ?? []) {
+    if (!g.kind) undiscovered = true
+    else if (g.reason === 'radar_kind_not_collected') uncollected.add(g.kind)
+    else if (g.reason === 'radar_namespace_not_collected') someNamespaces = true
+    else if (!pressing.has(g.kind)) pressing.set(g.kind, gapReasonText(g.reason))
+  }
+  const note: RelationshipNote = {}
+  const hint: string[] = []
+  if (uncollected.size > 0) hint.push(`Radar doesn't collect ${joinOr(Array.from(uncollected))} objects, so none of those are listed.`)
+  if (someNamespaces) hint.push("Radar doesn't collect every namespace, so children in the others aren't listed.")
+  // An API group whose discovery fails, often a metrics API with no server
+  // behind it, leaves every answer with this gap; most such groups hold no
+  // children, so it is a hint, not a warning.
+  if (undiscovered) hint.push("Radar's API discovery missed some API groups, so children of their kinds aren't listed.")
+  if (children.narrowed) hint.push('Only children you can view are listed.')
+  if (hint.length > 0) note.hint = hint
+  const text: string[] = []
+  if (pressing.size > 0) text.push(`Couldn't check ${Array.from(pressing, ([kind, why]) => `${kind} (${why})`).join(', ')}.`)
+  if (children.truncated) text.push('More children than shown.')
+  if (text.length > 0) note.text = text.join(' ')
+  return note.hint || note.text ? note : undefined
+}
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+function joinOr(items: string[]): string {
+  return items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} or ${items[items.length - 1]}`
+}
+
+// membersNote says what a GitOps manager's status records beyond the members
+// Manages lists; listed says whether it lists any.
+function membersNote(manages: OwnershipCoverage['manages'] | undefined, listed: boolean): RelationshipNote | undefined {
+  if (!manages) return undefined
+  if (manages.membership === 'remote') return { text: "Its destination isn't this cluster as far as Radar can tell, so its members aren't listed." }
+  if (manages.membership === 'unreadable') {
+    const note: RelationshipNote = {}
+    const text: string[] = []
+    if (manages.unavailableReason) text.push(`Couldn't read the members its status records (${gapReasonText(manages.unavailableReason)}).`)
+    if (manages.truncated) text.push('More members than shown.')
+    if (text.length > 0) note.text = text.join(' ')
+    if (listed) note.hint = ["Its status has no member list Radar can read now, so these are the resources the topology links to it."]
+    else if (!manages.unavailableReason) note.hint = ["Its status has no member list Radar can read now."]
+    return note
+  }
+  const extra: string[] = []
+  if (manages.missing) extra.push(`${manages.missing} not in the cluster`)
+  if (manages.withheld) extra.push(`${manages.withheld} you can't view`)
+  if (manages.unknown) extra.push(`${manages.unknown} Radar can't check`)
+  const parts: string[] = []
+  if (extra.length > 0) parts.push(`Its status also lists ${extra.join(', ')}.`)
+  if (manages.truncated) parts.push('More members than shown.')
+  if (parts.length === 0 && !listed) parts.push('Its status records no members to show.')
+  return parts.length > 0 ? { text: parts.join(' ') } : undefined
+}
+
+export interface RelationshipNote {
+  /** Shown under the group. */
+  text?: string
+  /** Lines shown on hovering an info mark beside the label. */
+  hint?: string[]
+}
+
 interface RelationshipGroupProps {
   label: string
   refs: ResourceRef[]
   onNavigate?: (ref: ResourceRef) => void
+  note?: RelationshipNote
+  /** Refs shown only on request, such as a Deployment's old ReplicaSets. */
+  more?: MoreRefs
+  /** The server cut the list short, so refs is not every one. */
+  capped?: boolean
+}
+
+interface MoreRefs {
+  refs: ResourceRef[]
+  /** What the refs are, as "older ReplicaSets" reads after a count. */
+  label: string
+  /** Why they're kept apart, shown on hovering the toggle. */
+  hint: string
+}
+
+// olderRevisions are the ReplicaSets the server keeps out of Children because
+// they only hold rollback history: listed there, ten of them would bury the
+// ones running Pods.
+function olderRevisions(refs: ResourceRef[] | undefined): MoreRefs | undefined {
+  if (!refs || refs.length === 0) return undefined
+  const unique = dedupeResourceRefs(refs)
+  return {
+    refs: unique,
+    label: unique.length === 1 ? 'older ReplicaSet' : 'older ReplicaSets',
+    hint: 'Earlier revisions kept for rollback. They run no Pods.',
+  }
 }
 
 const RELATIONSHIP_TRUNCATE_LIMIT = 10
 
-export function RelationshipGroup({ label, refs, onNavigate }: RelationshipGroupProps) {
+// Managed By sits next to Owner and reads like it, so it says how they differ
+// and which direction its answer comes from.
+const MANAGED_BY_HINT = [
+  'Argo CD Applications or Flux objects whose status lists this resource, and other controllers that manage it without an owner reference.',
+  "Kubernetes' garbage collector follows owner references, not these links.",
+]
+
+// managersListOnly: every manager shown is one whose list names the resource
+// while its metadata doesn't confirm it, which the chip calls Listed by.
+function managersListOnly(answer: ManagerAnswer | undefined, managers: ResourceRef[]): boolean {
+  if (!answer || answer.via || !['listed', 'shared', 'disagree'].includes(answer.state) || !managers.length) return false
+  const recorders = new Set((answer.direct.recorders ?? []).map(resourceRefKey))
+  return managers.every(m => recorders.has(resourceRefKey(m)))
+}
+
+// managersNote explains Managed By: where it comes from, more than one
+// manager, and the managers the search couldn't settle. With none listed, a
+// remote list naming the resource or a manager kind Radar couldn't search is
+// said outright, so an empty group doesn't read as "no GitOps manager". An
+// unreadable list stays in the hint: it may name any resource, so it would
+// otherwise show beside every one, and the controllers stamp tracking
+// metadata on what they apply, through which the topology names such a
+// manager anyway.
+function managersNote(coverage: OwnershipCoverage | undefined, listed: number, trackedBy?: string): RelationshipNote {
+  const hint = [...MANAGED_BY_HINT]
+  const open: string[] = []
+  const coverageOf = coverage?.managers
+  if (coverageOf?.unreadable) {
+    const n = coverageOf.unreadable
+    hint.push(n === 1 ? "1 manager's member list can't be read, so it may also list this resource." : `${n} managers' member lists can't be read, so they may also list this resource.`)
+  }
+  if (coverageOf?.remote) {
+    const n = coverageOf.remote
+    open.push(`${n} ${n === 1 ? 'manager lists' : 'managers list'} it for a cluster Radar can't confirm is this one`)
+  }
+  const pressing = new Map<string, string>()
+  for (const g of coverageOf?.notChecked ?? []) {
+    // An unserved manager kind under incomplete discovery reads as read_error
+    // on every resource, like discovery's own gap.
+    if (!g.kind) hint.push("Radar's API discovery missed some API groups, so managers of their kinds aren't checked.")
+    else if (g.reason === 'read_error') hint.push(`Radar couldn't search ${g.kind} objects, so those managers aren't checked.`)
+    else if (g.reason === 'radar_kind_not_collected') hint.push(`Radar doesn't collect ${g.kind} objects, so those managers aren't checked.`)
+    else if (!pressing.has(g.kind)) pressing.set(g.kind, gapReasonText(g.reason))
+  }
+  if (pressing.size > 0) open.push(`couldn't check ${Array.from(pressing, ([kind, why]) => `${kind} (${why})`).join(', ')}`)
+  const text: string[] = []
+  if (trackedBy) text.push(`Its tracking label names ${trackedBy}, whose status doesn't list it.`)
+  if (open.length > 0) {
+    const sentence = `${capitalize(open.join('; '))}.`
+    if (listed === 0) text.push(sentence)
+    else hint.push(sentence)
+  }
+  if (listed > 1) text.push('More than one manager lists or links to it.')
+  const note: RelationshipNote = { hint: [...new Set(hint)] }
+  if (text.length > 0) note.text = text.join(' ')
+  return note
+}
+
+export function RelationshipGroup({ label, refs, onNavigate, note, more, capped }: RelationshipGroupProps) {
   const [showAll, setShowAll] = useState(false)
-  if (!refs || refs.length === 0) return null
+  if ((!refs || refs.length === 0) && !note && !more) return null
   const truncated = !showAll && refs.length > RELATIONSHIP_TRUNCATE_LIMIT
   const visibleRefs = truncated ? refs.slice(0, RELATIONSHIP_TRUNCATE_LIMIT) : refs
 
   return (
     <div>
-      <div className="text-xs text-theme-text-tertiary mb-1">{label}{refs.length > 1 ? ` (${refs.length})` : ''}</div>
+      <div className="text-xs text-theme-text-tertiary mb-1 flex items-center gap-1">
+        <span>{label}{refs.length > 1 ? ` (${refs.length}${capped ? '+' : ''})` : ''}</span>
+        {note?.hint && (
+          <Tooltip content={<div className="space-y-0.5">{note.hint.map((line) => <div key={line}>{line}</div>)}</div>} delay={150} className="max-h-64 overflow-y-auto">
+            <button type="button" className="inline-flex rounded text-theme-text-tertiary hover:text-theme-text-secondary" aria-label={note.hint.join(' ')}>
+              <Info className="w-3 h-3" aria-hidden="true" />
+            </button>
+          </Tooltip>
+        )}
+      </div>
       <div className="flex flex-wrap gap-1">
         {visibleRefs.map((resourceRef, i) => (
           <ResourceRefBadge key={`${resourceRef.kind}-${resourceRef.namespace}-${resourceRef.name}-${i}`} resourceRef={resourceRef} onClick={onNavigate} />
@@ -973,10 +1230,37 @@ export function RelationshipGroup({ label, refs, onNavigate }: RelationshipGroup
             onClick={() => setShowAll(true)}
             className="px-2 py-0.5 text-xs rounded border border-theme-border text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated transition-colors"
           >
-            Show all {refs.length}
+            {capped ? `Show the ${refs.length} listed` : `Show all ${refs.length}`}
           </button>
         )}
       </div>
+      {more && <MoreRefsToggle more={more} onNavigate={onNavigate} />}
+      {note?.text && <div className="mt-1 text-xs text-theme-text-tertiary">{note.text}</div>}
+    </div>
+  )
+}
+
+function MoreRefsToggle({ more, onNavigate }: { more: MoreRefs; onNavigate?: (ref: ResourceRef) => void }) {
+  const [open, setOpen] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(open)
+  return (
+    <div className="mt-1">
+      <button
+        {...buttonProps}
+        onClick={() => setOpen(!open)}
+        title={more.hint}
+        className="flex items-center gap-1 text-xs text-theme-text-tertiary hover:text-theme-text-primary transition-colors"
+      >
+        <CollapseChevron open={open} className="w-3 h-3" />
+        {open ? `Hide ${more.label}` : `Show ${more.refs.length} ${more.label}`}
+      </button>
+      <Collapse open={open} id={panelId} mountLazily>
+        <div className="flex flex-wrap gap-1 mt-1">
+          {more.refs.map((resourceRef, i) => (
+            <ResourceRefBadge key={`${resourceRef.kind}-${resourceRef.namespace}-${resourceRef.name}-${i}`} resourceRef={resourceRef} onClick={onNavigate} />
+          ))}
+        </div>
+      </Collapse>
     </div>
   )
 }

package/src/components/ui/drawer-older-replicasets.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
+import { afterEach, describe, expect, it } from 'vitest'
+import { RelatedResourcesSection } from './drawer-components'
+import type { Relationships } from '../../types'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+const rs = (name: string) => ({ group: 'apps', kind: 'ReplicaSet', namespace: 'shop', name })
+let container: HTMLDivElement | undefined
+afterEach(() => {
+  container?.remove()
+  container = undefined
+})
+
+function mount(relationships: Relationships) {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => root.render(<RelatedResourcesSection relationships={relationships} />))
+  return container
+}
+
+describe('older ReplicaSets', () => {
+  it('lists the ReplicaSets running Pods, and the old revisions only on request', () => {
+    const el = mount({ children: [rs('web-7d4f')], olderRevisions: [rs('web-5c9a'), rs('web-6b1e')] })
+    const toggle = Array.from(el.querySelectorAll('button')).find((b) => b.textContent?.includes('older ReplicaSets'))
+    expect(toggle?.textContent).toBe('Show 2 older ReplicaSets')
+    expect(toggle?.getAttribute('aria-expanded')).toBe('false')
+    expect(el.textContent).toContain('web-7d4f')
+    expect(el.textContent).not.toContain('web-5c9a')
+    act(() => toggle?.click())
+    expect(toggle?.getAttribute('aria-expanded')).toBe('true')
+    expect(toggle?.textContent).toBe('Hide older ReplicaSets')
+    expect(el.textContent).toContain('web-5c9a')
+    expect(el.textContent).toContain('web-6b1e')
+  })
+
+  it('shows Children for old revisions alone, and nothing extra without them', () => {
+    expect(renderToString(<RelatedResourcesSection relationships={{ olderRevisions: [rs('web-5c9a')] }} />)).toContain('Show 1 older ReplicaSet')
+    expect(renderToString(<RelatedResourcesSection relationships={{ children: [rs('web-7d4f')] }} />)).not.toContain('older ReplicaSet')
+  })
+})

package/src/components/workload/WorkloadView.relationships.test.tsx

@@ -35,3 +35,76 @@ describe('workload staged-policy projection', () => {
     expect(html).not.toContain('Network policies')
   })
 })
+
+
+describe('workload GitOps manager', () => {
+  const app = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'shop' }
+  const render = (relationships: Parameters<typeof WorkloadView>[0]['relationships']) =>
+    renderToStaticMarkup(<WorkloadView kind="deployments" namespace="demo" name="web" onBack={() => {}} resource={workload} relationships={relationships} expanded={false} />)
+
+  it('shows the header chip alone when its manager is the only one whose status lists the workload', () => {
+    const html = render({ managedBy: [app], managers: [app], ownership: { children: { complete: true } } })
+    expect(html).toContain('Managed by')
+    expect(html).not.toContain('Managed By')
+  })
+
+  it('keeps Managed By when the search left managers it could not settle', () => {
+    const html = render({ managedBy: [app], managers: [app], ownership: { children: { complete: true }, managers: { remote: 1 } } })
+    expect(html).toContain('Managed By')
+    expect(html).toContain('Managed by')
+  })
+
+  it('keeps Managed By beside a chip whose manager its status does not list', () => {
+    const hub = { ...app, name: 'hub' }
+    const html = render({ managedBy: [app], managers: [hub], ownership: { children: { complete: true } } })
+    expect(html).toContain('Managed By')
+    expect(html).toContain('Tracked by')
+    expect(html).toContain("Its tracking label names Application argocd/shop, whose status doesn&#x27;t list it.")
+  })
+
+  it('names a manager known only by its instance label without a namespace', () => {
+    const hub = { ...app, name: 'hub' }
+    const html = render({ managedBy: [{ kind: 'Application', group: 'argoproj.io', namespace: '', name: 'shop' }], managers: [hub], ownership: { children: { complete: true } } })
+    expect(html).toContain("Its tracking label names Application shop, whose status doesn&#x27;t list it.")
+  })
+})
+
+describe('manager answer group projection', () => {
+  const app = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'shop' }
+  const object = { kind: 'Deployment', group: 'apps', namespace: 'demo', name: 'web' }
+  const answer: import('../../types/core').ManagerAnswer = { state: 'listed', lead: app, direct: { object, recorders: [app] } }
+  const render = (manager: typeof answer, extra: Partial<import('../../types/core').Relationships> = {}) =>
+    renderToStaticMarkup(<WorkloadView kind="deployments" namespace="demo" name="web" onBack={() => {}} resource={workload} expanded={false}
+      relationships={{ managers: [app], ownership: { children: { complete: true }, manager }, ...extra }} />)
+  // The group is titled the way the chip words the answer.
+  const group = (html: string) => html.includes('Listed By') ? 'Listed By' : html.includes('Managed By') ? 'Managed By' : null
+
+  it.each(['agree', 'listed'] as const)('hides only the exact single %s recorder', state => {
+    const html = render({ ...answer, state })
+    expect(html).toContain(state === 'agree' ? 'Managed by' : 'Listed by')
+    expect(group(html)).toBeNull()
+  })
+  it.each(['claimed', 'unknown', 'none'] as const)('keeps Managed By for %s', state => {
+    expect(group(render({ ...answer, state }))).toBe('Managed By')
+  })
+  it.each(['disagree', 'shared'] as const)('keeps the group for %s, titled Listed By', state => {
+    expect(group(render({ ...answer, state }))).toBe('Listed By')
+  })
+  it('keeps Managed By with via', () => {
+    expect(render({ ...answer, via: { object, recorders: [app] } })).toContain('Managed By')
+  })
+  it('keeps extra non-recorded managers', () => {
+    expect(render(answer, { managers: [app, { kind: 'Certificate', group: 'cert-manager.io', namespace: 'demo', name: 'tls' }] })).toContain('Managed By')
+  })
+  it('keeps a different single manager', () => {
+    expect(render(answer, { managers: [{ ...app, name: 'other' }] })).toContain('Managed By')
+  })
+  it('keeps the coverage note', () => {
+    expect(group(render(answer, { ownership: { children: { complete: true }, manager: answer, managers: { unreadable: 1 } } }))).toBe('Listed By')
+  })
+  it('uses native Helm’s existing chip', () => {
+    const helm = { kind: 'HelmRelease', group: '', namespace: 'demo', name: 'chart' }
+    const html = render({ state: 'claimed', lead: helm, direct: { object, claims: [{ manager: helm, source: 'helm-release', check: 'not-recording' }] } })
+    expect(html).toContain('Managed by Helm')
+  })
+})

package/src/components/workload/WorkloadView.timelineFocus.test.tsx

@@ -0,0 +1,96 @@
+// @vitest-environment jsdom
+import { StrictMode, act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import type { TimelineEvent } from '../../types'
+import { WorkloadView } from './WorkloadView'
+
+vi.mock('../timeline/TimelineSwimlanes', () => ({ TimelineSwimlanes: () => null }))
+
+const resource = { apiVersion: 'batch/v1', kind: 'CronJob', metadata: { name: 'nightly', namespace: 'demo', uid: 'cronjob-1' }, spec: { schedule: '0 * * * *' } }
+const row = (id: string, minutesAgo: number): TimelineEvent => ({
+  id, uid: 'cronjob-1', kind: 'CronJob', apiVersion: 'batch/v1', namespace: 'demo', name: 'nightly',
+  source: 'k8s_event', eventType: 'Warning', reason: 'InvalidSchedule', message: `report ${id}`,
+  timestamp: new Date(Date.now() - minutesAgo * 60_000).toISOString(),
+})
+const focus = { id: 'target' }
+let root: Root
+let container: HTMLDivElement
+const scroll = vi.fn()
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} })
+  vi.stubGlobal('CSS', { escape: (id: string) => id })
+  HTMLElement.prototype.scrollIntoView = scroll
+  scroll.mockClear()
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+
+async function render(events: TimelineEvent[], options: { truncated?: boolean; loadOlder?: () => void; loadingOlder?: boolean; error?: Error; target?: { id: string } } = {}) {
+  await act(async () => root.render(<StrictMode><WorkloadView
+    kind="cronjobs" namespace="demo" name="nightly" resource={resource} onBack={() => {}}
+    expanded activeTab="timeline" allEvents={events} historyScoped timelineFocusEvent={options.target ?? focus}
+    historyTruncated={options.truncated} onLoadOlderHistory={options.loadOlder}
+    loadingOlderHistory={options.loadingOlder} olderHistoryError={options.error}
+  /></StrictMode>))
+}
+
+it('scrolls to the exact report even among warnings with the same reason', async () => {
+  await render([row('newest', 1), row('target', 5), row('oldest', 10)])
+  const target = container.querySelector('[data-event-id="target"]')
+  expect(target).not.toBeNull()
+  expect(target?.textContent).toContain('report target')
+  expect(target?.querySelector('.ring-2')).not.toBeNull()
+  expect(scroll).toHaveBeenCalled()
+  expect(container.textContent).not.toContain('not available')
+})
+
+it('loads older pages until the report appears, without duplicate requests in Strict Mode', async () => {
+  const loadOlder = vi.fn()
+  await render([row('newest', 1)], { truncated: true, loadOlder })
+  expect(loadOlder).toHaveBeenCalledTimes(1)
+  expect(container.textContent).toContain('Finding the reported error')
+  await render([row('newest', 1), row('middle', 2)], { truncated: true, loadOlder })
+  expect(loadOlder).toHaveBeenCalledTimes(2)
+  await render([row('newest', 1), row('target', 5)], { truncated: true, loadOlder })
+  expect(loadOlder).toHaveBeenCalledTimes(2)
+  expect(container.querySelector('[data-event-id="target"] .ring-2')).not.toBeNull()
+})
+
+it('explains an absent report and stops when history is exhausted', async () => {
+  const loadOlder = vi.fn()
+  await render([row('newest', 1)], { loadOlder })
+  expect(loadOlder).not.toHaveBeenCalled()
+  expect(container.textContent).toContain('not available in the retained timeline history')
+})
+
+it('does not retry failed paging automatically', async () => {
+  const loadOlder = vi.fn()
+  await render([row('newest', 1)], { truncated: true, loadOlder, error: new Error('unavailable') })
+  expect(loadOlder).not.toHaveBeenCalled()
+  expect(container.textContent).toContain("some history couldn't be loaded")
+})
+
+it('lets the user select another event without a refresh forcing the original selection back', async () => {
+  const events = [row('newest', 1), row('target', 5)]
+  await render(events)
+  await act(async () => container.querySelector<HTMLElement>('[data-event-id="newest"] .cursor-pointer')!.click())
+  await render([...events, row('older', 10)])
+  expect(container.querySelector('[data-event-id="newest"] .ring-2')).not.toBeNull()
+  expect(container.querySelector('[data-event-id="target"] .ring-2')).toBeNull()
+})
+
+it('honors a new click on the same report', async () => {
+  const events = [row('newest', 1), row('target', 5)]
+  await render(events)
+  await act(async () => container.querySelector<HTMLElement>('[data-event-id="newest"] .cursor-pointer')!.click())
+  await render(events, { target: { id: 'target' } })
+  expect(container.querySelector('[data-event-id="target"] .ring-2')).not.toBeNull()
+})