@skyhook-io/k8s-ui 1.18.0 → 1.18.2

package/src/components/ui/Toast.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react'
+import { createContext, useContext, useState, useCallback, ReactNode, useEffect, useRef } from 'react'
 import { DURATION_TOAST_EXIT } from '../../utils/animation'
 import { Check, Terminal, X, AlertTriangle, Info } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -15,15 +15,13 @@ interface Toast {
   onDetailClick?: () => void
 }
 
+type ToastOptions = Omit<Toast, 'id' | 'message' | 'dismissing'> & {
+  id?: string
+  duration?: number
+}
+
 interface ToastContextType {
-  showToast: (message: string, options?: {
-    detail?: string
-    command?: string
-    type?: Toast['type']
-    position?: { x: number; y: number }
-    action?: Toast['action']
-    onDetailClick?: () => void
-  }) => void
+  showToast: (message: string, options?: ToastOptions) => void
   showCopied: (command: string, label?: string, event?: React.MouseEvent) => void
   showError: (message: string, detail?: string) => void
   showSuccess: (message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void
@@ -94,34 +92,42 @@ export function useToast() {
 
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<Toast[]>([])
+  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>())
 
   const animateDismiss = useCallback((id: string) => {
+    clearTimeout(timers.current.get(id))
     setToasts(prev => prev.map(t => t.id === id ? { ...t, dismissing: true } : t))
-    setTimeout(() => {
+    timers.current.set(id, setTimeout(() => {
       setToasts(prev => prev.filter(t => t.id !== id))
-    }, DURATION_TOAST_EXIT)
+      timers.current.delete(id)
+    }, DURATION_TOAST_EXIT))
   }, [])
 
-  const showToast = useCallback((message: string, options?: {
-    detail?: string
-    command?: string
-    type?: Toast['type']
-    position?: { x: number; y: number }
-    action?: Toast['action']
-    onDetailClick?: () => void
-  }) => {
-    const id = Math.random().toString(36).slice(2)
-    const toast: Toast = { id, message, ...options }
+  const showToast = useCallback((message: string, options?: ToastOptions) => {
+    const { id = Math.random().toString(36).slice(2), duration, ...toastOptions } = options ?? {}
+    const toast: Toast = { id, message, ...toastOptions }
 
-    setToasts(prev => [...prev, toast])
+    clearTimeout(timers.current.get(id))
+    timers.current.delete(id)
+    setToasts(prev => prev.some(t => t.id === id)
+      ? prev.map(t => t.id === id ? toast : t)
+      : [...prev, toast])
 
     // Auto-dismiss: errors stay longer (10s), others 7s
-    const dismissTime = options?.type === 'error' ? 10000 : 7000
-    setTimeout(() => {
-      animateDismiss(id)
-    }, dismissTime)
+    const dismissTime = duration ?? (toast.type === 'error' ? 10000 : 7000)
+    if (dismissTime > 0) {
+      timers.current.set(id, setTimeout(() => animateDismiss(id), dismissTime))
+    }
   }, [animateDismiss])
 
+  useEffect(() => {
+    const activeTimers = timers.current
+    return () => {
+      activeTimers.forEach(clearTimeout)
+      activeTimers.clear()
+    }
+  }, [])
+
   const showCopied = useCallback((command: string, label?: string, event?: React.MouseEvent) => {
     navigator.clipboard.writeText(command)
 
@@ -187,6 +193,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
 
   return (
     <div
+      role="status"
       className={clsx(
         'flex items-start gap-3 p-4 rounded-lg shadow-2xl border backdrop-blur-sm',
         'w-[480px] max-w-[calc(100vw-32px)]',

package/src/components/ui/Tooltip.touch.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+//
+// A tap fires mouseenter and focus. On an enabled control the tooltip must not
+// pop over what the tap opens; on a disabled control the tap is how a touch
+// user reads why it's disabled.
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { Tooltip } from './Tooltip'
+
+let root: Root | undefined
+let host: HTMLDivElement | undefined
+afterEach(() => {
+  act(() => root?.unmount())
+  host?.remove()
+  vi.useRealTimers()
+  // The last touch time is module state; a key press clears it for the next file.
+  document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+})
+
+function render(child: React.ReactNode) {
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+  act(() => root!.render(<Tooltip content="Why" delay={0}>{child}</Tooltip>))
+  return host.querySelector('span')!
+}
+
+function touchPress() {
+  const e = new Event('pointerdown', { bubbles: true }) as Event & { pointerType: string }
+  Object.defineProperty(e, 'pointerType', { value: 'touch' })
+  document.body.dispatchEvent(e)
+}
+
+function hover(trigger: Element) {
+  vi.useFakeTimers()
+  act(() => { trigger.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, relatedTarget: document.body })) })
+  act(() => { vi.advanceTimersByTime(10) })
+}
+
+const tooltipShown = () => document.body.textContent?.includes('Why') ?? false
+
+it('stays closed when a tap activates an enabled control', () => {
+  const trigger = render(<button type="button">Open</button>)
+  touchPress()
+  hover(trigger)
+  expect(tooltipShown()).toBe(false)
+})
+
+it('still explains a disabled control on tap', () => {
+  const trigger = render(<button type="button" disabled>Restart</button>)
+  touchPress()
+  hover(trigger)
+  expect(tooltipShown()).toBe(true)
+})

package/src/components/ui/Tooltip.tsx

@@ -2,6 +2,9 @@ import { ReactNode, useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { computeTooltipPosition } from './tooltip-position'
+import { isTouchIntent } from '../../utils/touch-intent'
+
+const ENABLED_CONTROL = 'button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [role="button"]:not([aria-disabled="true"])'
 
 // Module-level singleton coordinator: only one Tooltip can be visible
 // at a time across the whole app. Without this, two Tooltip instances
@@ -221,6 +224,8 @@ export function Tooltip({
     }
   }, [isVisible])
 
+  const tapActivatesControl = () => isTouchIntent() && !!triggerRef.current?.querySelector(ENABLED_CONTROL)
+
   if ((disabled && !preserveWrapperWhenDisabled) || !content) {
     return <>{children}</>
   }
@@ -231,9 +236,13 @@ export function Tooltip({
         ref={triggerRef}
         className={clsx('inline-flex max-w-full', wrapperClassName)}
         style={wrapperStyle}
-        onMouseEnter={showTooltip}
+        // A tap fires mouseenter and focus too. On an enabled control the
+        // tap has its own action (often opening a menu), and the tooltip
+        // would pop over it; on disabled or plain content the tap is the
+        // only way a touch user can read the explanation, so it still shows.
+        onMouseEnter={() => { if (!tapActivatesControl()) showTooltip() }}
         onMouseLeave={scheduleHideTooltip}
-        onFocus={showTooltip}
+        onFocus={() => { if (!tapActivatesControl()) showTooltip() }}
         onBlur={hideTooltip}
         // pointerdown fires before click, so the tooltip is gone before
         // the trigger's action runs. Required when the child handles

package/src/components/ui/YamlReview.test.tsx

@@ -38,3 +38,55 @@ describe('YamlReview after a failed apply', () => {
     expect(review()).not.toContain('changed after your review')
   })
 })
+
+
+it('retains pause context when the prediction removes the annotation without claiming confirmed resumption', () => {
+  const baselineYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: archive\n  annotations:\n    crossplane.io/paused: "true"\nspec:\n  providerConfigRef:\n    name: default\n'
+  const predictedYaml = baselineYaml.replace('    crossplane.io/paused: "true"', '    crossplane.io/paused: "false"')
+  const result = renderToString(<YamlReview submittedYaml={predictedYaml} documents={[{ index: 0, status: 'accepted', action: 'update', baselineYaml, predictedYaml }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result).toContain('Pause affects reconciliation')
+  expect(result).toContain('requests resumption')
+  expect(result).not.toContain('will resume')
+  expect(result.replaceAll('<!-- -->', '')).toContain('Server preview clears the pause request on Bucket archive')
+})
+
+
+it('shows pause context for an unselected later document because Apply submits the whole batch', () => {
+  const first = 'apiVersion: v1\nkind: ConfigMap\nmetadata:\n  name: ordinary\n'
+  const second = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: later-paused\n  annotations:\n    crossplane.io/paused: "true"\nspec:\n  providerConfigRef:\n    name: default\n'
+  const result = renderToString(<YamlReview submittedYaml={first + '\n---\n' + second} documents={[{ index: 0, status: 'accepted', predictedYaml: first }, { index: 1, status: 'accepted', predictedYaml: second }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result).toContain('Pause affects reconciliation')
+  expect(result).toContain('Bucket later-paused')
+})
+
+
+it('states the actual retained pause in the prediction without inferring who preserved it', () => {
+  const baselineYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: archive\n  annotations:\n    crossplane.io/paused: "true"\nspec:\n  providerConfigRef:\n    name: default\n'
+  const submittedYaml = baselineYaml.replace('    crossplane.io/paused: "true"', '')
+  const result = renderToString(<YamlReview submittedYaml={submittedYaml} documents={[{ index: 0, status: 'accepted', action: 'update', baselineYaml, predictedYaml: baselineYaml }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result.replaceAll('<!-- -->', '')).toContain('Server preview keeps the pause request on Bucket archive')
+  expect(result).not.toContain('another field manager owns')
+  expect(result).not.toContain('Server preview clears')
+})
+
+it.each(['apply', 'create'] as const)('handles a not-previewable Crossplane document in %s mode without pretending submitted YAML is live', mode => {
+  const submittedYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: archive\nspec:\n  providerConfigRef:\n    name: default\n'
+  const result = renderToString(<YamlReview submittedYaml={submittedYaml} mode={mode} documents={[{ index: 0, status: 'unavailable', submittedYaml }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result.includes('Existing pause state is unknown')).toBe(mode === 'apply')
+  expect(result.includes('Omitting the annotation from server-side apply YAML does not guarantee its removal')).toBe(mode === 'apply')
+  expect(result).not.toContain('Server preview clears')
+})
+
+
+it.each(['create', 'unavailable'] as const)('keeps per-document pause evidence paired when the first document has no baseline (%s)', firstState => {
+  const firstYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: fresh\nspec:\n  providerConfigRef:\n    name: default\n'
+  const pausedYaml = firstYaml.replace('name: fresh', 'name: archive\n  annotations:\n    crossplane.io/paused: "true"')
+  const first = firstState === 'create'
+    ? { index: 0, status: 'accepted' as const, action: 'create' as const, name: 'fresh', predictedYaml: firstYaml }
+    : { index: 0, status: 'unavailable' as const, action: 'unknown' as const, name: 'fresh', submittedYaml: firstYaml }
+  const result = renderToString(<YamlReview submittedYaml={firstYaml + '\n---\n' + pausedYaml} documents={[first, { index: 1, status: 'accepted', action: 'update', name: 'archive', baselineYaml: pausedYaml, predictedYaml: pausedYaml }]} onBack={() => {}} onApply={() => {}} />).replaceAll('<!-- -->', '')
+  expect(result).toContain('Server preview keeps the pause request on Bucket archive')
+  expect(result).not.toContain('Server preview clears the pause request')
+  expect(result).not.toContain('Server preview requests a pause on Bucket archive')
+  expect(result.includes('Live pause state is unverified for Bucket fresh')).toBe(firstState === 'unavailable')
+})

package/src/components/ui/YamlReview.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { AlertTriangle, ArrowLeft, Check, Loader2, ShieldAlert, ShieldCheck, X } from 'lucide-react'
 import { normalizeYamlForReview, splitYamlDocuments } from '../../utils/yaml'
+import { CrossplaneYamlApplyNotice } from './CrossplaneOperationNotice'
 import { Badge } from './Badge'
 import { StatusDot } from './status-tone'
 import { YamlDiffEditor } from './YamlEditor'
@@ -25,6 +26,9 @@ export interface YamlPreviewResult {
 
 export interface YamlReviewProps {
   submittedYaml: string
+  mode?: 'apply' | 'create' | 'update'
+  /** Review YAML omits status; raw evidence is bound to one editor target. */
+  resourceData?: unknown
   originalYaml?: string
   documents: YamlPreviewResult[]
   nonAtomic?: boolean
@@ -85,6 +89,8 @@ export function reviewedResourceVersionsForPreview(documents: YamlPreviewResult[
 
 export function YamlReview({
   submittedYaml,
+  mode = 'apply',
+  resourceData,
   originalYaml,
   documents,
   nonAtomic = false,
@@ -363,6 +369,7 @@ export function YamlReview({
       </div>
 
       <div className="shrink-0 border-t border-theme-border bg-theme-elevated/80 px-4 py-3">
+        <CrossplaneYamlApplyNotice yaml={submittedYaml} baselineYaml={originalYaml} previewDocuments={documents} mode={mode} resourceData={resourceData} />
         {changedSinceReview && (
           <AlertBanner
             variant="warning"

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

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import { AlertBanner, EventsSection, ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection, defaultConditionTone } from './drawer-components'
+import type { Relationships } from '../../types'
 
 const problems = [
   { color: 'red' as const, message: 'Application is Degraded' },
@@ -42,6 +43,271 @@ describe('ProblemAlerts', () => {
   })
 })
 
+function RelationshipsWithTruncatedChildren() {
+  return <RelatedResourcesSection relationships={{ children: [{ kind: 'Pod', namespace: 'shop', name: 'web-0' }], ownership: { children: { complete: false, truncated: true } } }} />
+}
+
+describe('RelatedResourcesSection ownership', () => {
+  const rs = { kind: 'ReplicaSet', group: 'apps', namespace: 'shop', name: 'web-7d9f8' }
+  const cm = { kind: 'ConfigMap', namespace: 'shop', name: 'web-config' }
+  const app = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'shop' }
+
+  it('names further owners apart from the owner', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ owner: rs, owners: [rs, cm] }} onNavigate={() => {}} />)
+    expect(html).toContain('Also Owned By')
+    expect(html).toContain('web-config')
+    expect(html.match(/web-7d9f8/g)).toHaveLength(1)
+  })
+
+  it('says how Managed By differs from Owner', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ managers: [app] }} onNavigate={() => {}} />)
+    expect(html).toContain("Kubernetes&#x27; garbage collector follows owner references, not these links.")
+  })
+
+  it('puts a coverage hint on a button a keyboard can reach', () => {
+    const html = renderToString(
+      <RelatedResourcesSection relationships={{ children: [rs], ownership: { children: { complete: false, notChecked: [{ reason: 'read_error' }] } } }} />,
+    )
+    expect(html).toMatch(/<button type="button"[^>]*aria-label="Radar&#x27;s API discovery missed some API groups/)
+  })
+
+  it('shows management apart from ownership', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ managers: [app], manages: [rs] }} onNavigate={() => {}} />)
+    expect(html).toContain('Managed By')
+    expect(html).toContain('Manages')
+    expect(html).not.toContain('Owner')
+    expect(html).not.toContain('Children')
+  })
+
+  it('says which kinds a children list did not check', () => {
+    const html = renderToString(
+      <RelatedResourcesSection
+        relationships={{
+          children: [rs],
+          ownership: { children: { complete: false, notChecked: [{ group: 'apps', kind: 'ControllerRevision', namespace: 'shop', reason: 'radar_kind_not_collected' }, { group: 'discovery.k8s.io', kind: 'EndpointSlice', namespace: 'shop', reason: 'radar_kind_not_collected' }] } },
+        }}
+      />,
+    )
+    expect(html).toContain('Radar doesn&#x27;t collect ControllerRevision or EndpointSlice objects, so none of those are listed.')
+    expect(html).not.toContain('More children than shown')
+  })
+
+  it('says when a children list was cut short', () => {
+    const html = renderToString(<RelationshipsWithTruncatedChildren />)
+    expect(html).toContain('More children than shown.')
+  })
+
+  it('adds nothing to a complete children list, or one from an older Radar', () => {
+    for (const relationships of [{ children: [rs], ownership: { children: { complete: true } } }, { children: [rs] }]) {
+      const html = renderToString(<RelatedResourcesSection relationships={relationships} />)
+      expect(html).toContain('Children')
+      expect(html).not.toContain('Not checked')
+    }
+  })
+
+  it('says why no owner is named', () => {
+    const cases: Array<[Relationships['ownership'], string]> = [
+      [{ primaryOwnerState: 'gone', ownerRef: rs, children: { complete: true } }, 'ReplicaSet web-7d9f8 no longer exists.'],
+      [{ primaryOwnerState: 'replaced', ownerRef: rs, children: { complete: true } }, 'ReplicaSet web-7d9f8 was deleted and recreated; this object names the earlier one.'],
+      [{ primaryOwnerState: 'unknown', ownerRef: rs, children: { complete: true } }, 'Couldn&#x27;t check ReplicaSet web-7d9f8.'],
+      [
+        { primaryOwnerState: 'unknown', ownerRef: { kind: 'Endpoints', namespace: 'shop', name: 'web' }, ownerReason: 'radar_kind_not_collected', children: { complete: true } },
+        'Couldn&#x27;t check Endpoints web (Radar doesn&#x27;t collect it).',
+      ],
+      [{ primaryOwnerState: 'withheld', children: { complete: true } }, 'Not visible to you.'],
+      [{ primaryOwnerState: 'unknown', children: { complete: true } }, 'Couldn&#x27;t check the owner it names.'],
+      [{ primaryOwnerState: 'gone', ownerRef: { kind: '', namespace: '', name: '' }, children: { complete: true } }, 'The owner it names no longer exists.'],
+      [{ primaryOwnerState: 'unresolvable', children: { complete: true } }, 'Its owner reference can&#x27;t be resolved in this cluster.'],
+      [{ primaryOwnerState: 'excluded', children: { complete: true } }, 'Its owner reference names an Event'],
+    ]
+    for (const [ownership, text] of cases) {
+      const html = renderToString(<RelatedResourcesSection relationships={{ ownership }} />)
+      expect(html).toContain('Owner')
+      expect(html).toContain(text)
+    }
+  })
+
+  it('lists several owners without a controller as owners', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ owners: [rs, cm], ownership: { primaryOwnerState: 'several', children: { complete: true } } }} />)
+    expect(html).toContain('<span>Owners<!-- --> (2)</span>')
+    expect(html).toContain('None of them is its controller.')
+    expect(html).not.toContain('<span>Owner</span>')
+    expect(html).not.toContain('Also Owned By')
+  })
+
+  it('lists other owners beside a missing controller as also owned by', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ owners: [cm], ownership: { primaryOwnerState: 'gone', ownerRef: rs, children: { complete: true } } }} />)
+    expect(html).toContain('<span>Owner</span>')
+    expect(html).toContain('ReplicaSet web-7d9f8 no longer exists.')
+    expect(html).toContain('Also Owned By')
+  })
+
+  it('says why owner and children could not be read at all', () => {
+    expect(renderToString(<RelatedResourcesSection relationships={{ ownership: { unavailableReason: 'connection_changed', children: { complete: false } } }} />)).toContain(
+      'Owner and children couldn&#x27;t be read: Radar&#x27;s connection changed meanwhile.',
+    )
+    expect(renderToString(<RelatedResourcesSection relationships={{ ownership: { unavailableReason: 'user_forbidden', children: { complete: false } } }} />)).toContain(
+      'your access lets you open this object, but not list its kind here.',
+    )
+    for (const reason of ['object_not_found', 'read_error', 'cluster_disconnected']) {
+      const html = renderToString(<RelatedResourcesSection relationships={{ ownership: { unavailableReason: reason, children: { complete: false } } }} />)
+      expect(html).toContain('Owner and children couldn&#x27;t be read: ')
+      expect(html).not.toContain('read: couldn')
+    }
+  })
+
+  it('says outright when children could not be checked for an unusual reason, even with none found', () => {
+    const loading = renderToString(
+      <RelatedResourcesSection relationships={{ ownership: { children: { complete: false, notChecked: [{ kind: 'Pod', namespace: 'shop', reason: 'kind_sync_pending' }] } } }} />,
+    )
+    expect(loading).toContain('Children')
+    expect(loading).toContain('Couldn&#x27;t check Pod (still loading).')
+    const routine = renderToString(
+      <RelatedResourcesSection relationships={{ ownership: { children: { complete: false, notChecked: [{ kind: 'Lease', namespace: 'shop', reason: 'radar_kind_not_collected' }] } } }} />,
+    )
+    expect(routine).toBe('')
+    const leaf = renderToString(
+      <RelatedResourcesSection kind="configmaps" relationships={{ ownership: { children: { complete: false, notChecked: [{ kind: 'Lease', namespace: 'shop', reason: 'radar_kind_not_collected' }] } } }} />,
+    )
+    expect(leaf).toBe('')
+    const owner = renderToString(
+      <RelatedResourcesSection kind="services" relationships={{ ownership: { children: { complete: false, notChecked: [{ kind: 'EndpointSlice', namespace: 'shop', reason: 'radar_kind_not_collected' }] } } }} />,
+    )
+    expect(owner).toContain('Children')
+    expect(owner).toContain('No children among the kinds Radar checked.')
+    const ownerComplete = renderToString(<RelatedResourcesSection kind="services" relationships={{ ownership: { children: { complete: true } } }} />)
+    expect(ownerComplete).toBe('')
+    const elsewhere = renderToString(
+      <RelatedResourcesSection
+        relationships={{ children: [rs], ownership: { children: { complete: false, notChecked: [{ kind: 'Pod', namespace: 'other', reason: 'radar_namespace_not_collected' }] } } }}
+      />,
+    )
+    expect(elsewhere).toContain('Radar doesn&#x27;t collect every namespace, so children in the others aren&#x27;t listed.')
+    expect(elsewhere).not.toContain('Couldn&#x27;t check')
+  })
+
+  it('says why a GitOps manager\'s member list could not be read', () => {
+    const unread = renderToString(
+      <RelatedResourcesSection relationships={{ ownership: { children: { complete: true }, manages: { membership: 'unreadable', unavailableReason: 'kind_sync_pending' } } }} />,
+    )
+    expect(unread).toContain('Manages')
+    expect(unread).toContain('Couldn&#x27;t read the members its status records (still loading).')
+    const noList = renderToString(<RelatedResourcesSection relationships={{ manages: [rs], ownership: { children: { complete: true }, manages: { membership: 'unreadable' } } }} />)
+    expect(noList).not.toContain('Couldn&#x27;t read')
+    expect(noList).toContain('Its status has no member list Radar can read now, so these are the resources the topology links to it.')
+    const cut = renderToString(
+      <RelatedResourcesSection relationships={{ manages: [rs], ownership: { children: { complete: true }, manages: { membership: 'unreadable', truncated: true } } }} />,
+    )
+    expect(cut).toContain('More members than shown.')
+    const none = renderToString(<RelatedResourcesSection relationships={{ ownership: { children: { complete: true }, manages: { membership: 'unreadable' } } }} />)
+    expect(none).toContain('Its status has no member list Radar can read now.')
+    expect(none).not.toContain('these are the resources')
+  })
+
+  it('hints, without warning, at kinds API discovery missed', () => {
+    const html = renderToString(
+      <RelatedResourcesSection relationships={{ children: [rs], ownership: { children: { complete: false, notChecked: [{ reason: 'read_error' }] } } }} />,
+    )
+    expect(html).toContain('Radar&#x27;s API discovery missed some API groups, so children of their kinds aren&#x27;t listed.')
+    expect(html).not.toContain('Couldn&#x27;t check')
+  })
+
+  it("says a remote manager's members aren't listed", () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ ownership: { children: { complete: true }, manages: { membership: 'remote' } } }} />)
+    expect(html).toContain('Manages')
+    expect(html).toContain("Its destination isn&#x27;t this cluster as far as Radar can tell, so its members aren&#x27;t listed.")
+  })
+
+  describe('titles managers the way the chip does', () => {
+    const other = { ...app, name: 'other' }
+    const title = (relationships: Relationships) => {
+      const html = renderToString(<RelatedResourcesSection relationships={relationships} onNavigate={() => {}} />)
+      return html.includes('Listed By') ? 'Listed By' : html.includes('Managed By') ? 'Managed By' : 'none'
+    }
+    const answer = (state: 'listed' | 'shared' | 'disagree' | 'agree', recorders = [app]) => ({ state, direct: { object: rs, recorders } })
+    it.each(['listed', 'shared', 'disagree'] as const)('a %s answer lists its recorders', state => {
+      expect(title({ managers: [app], ownership: { children: { complete: true }, manager: answer(state) } })).toBe('Listed By')
+    })
+    it('an agree answer manages', () => {
+      expect(title({ managers: [app], ownership: { children: { complete: true }, manager: answer('agree') } })).toBe('Managed By')
+    })
+    it('a manager that is not a direct recorder keeps Managed By', () => {
+      expect(title({ managers: [app, other], ownership: { children: { complete: true }, manager: answer('listed') } })).toBe('Managed By')
+    })
+    it('an inherited answer keeps Managed By', () => {
+      expect(title({ managers: [app], ownership: { children: { complete: true }, manager: { ...answer('listed'), via: { object: cm, recorders: [app] } } } })).toBe('Managed By')
+    })
+    it('a note without managers keeps Managed By', () => {
+      expect(title({ ownership: { children: { complete: true }, manager: answer('listed', []), managers: { remote: 1 } } })).toBe('Managed By')
+    })
+    it('an older Radar without an answer keeps Managed By', () => {
+      expect(title({ managers: [app] })).toBe('Managed By')
+    })
+  })
+
+  it('says which direction Managed By comes from', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ managers: [app] }} onNavigate={() => {}} />)
+    expect(html).toContain('Argo CD Applications or Flux objects whose status lists this resource, and other controllers that manage it without an owner reference.')
+  })
+
+  it("says outright what it couldn't check about this resource when it lists none", () => {
+    const html = renderToString(
+      <RelatedResourcesSection relationships={{ ownership: { children: { complete: true }, managers: { remote: 1, notChecked: [{ group: 'argoproj.io', kind: 'Application', reason: 'kind_sync_pending' }] } } }} />,
+    )
+    expect(html).toContain('Managed By')
+    expect(html).toContain('1 manager lists it for a cluster Radar can&#x27;t confirm is this one; couldn&#x27;t check Application (still loading).')
+  })
+
+  it("keeps it to the hint beside a listed manager", () => {
+    const html = renderToString(
+      <RelatedResourcesSection relationships={{ managers: [app], ownership: { children: { complete: true }, managers: { remote: 1 } } }} onNavigate={() => {}} />,
+    )
+    expect(html).toMatch(/aria-label="[^"]*1 manager lists it for a cluster Radar can&#x27;t confirm is this one/)
+    expect(html).not.toMatch(/>1 Manager lists it/)
+  })
+
+  it("keeps a manager kind discovery couldn't read to the hint, as it would show on every resource", () => {
+    const gaps = [{ group: 'argoproj.io', kind: 'Application', reason: 'read_error' }, { group: 'kustomize.toolkit.fluxcd.io', kind: 'Kustomization', reason: 'read_error' }]
+    const html = renderToString(<RelatedResourcesSection relationships={{ children: [rs], ownership: { children: { complete: true }, managers: { notChecked: gaps } } }} onNavigate={() => {}} />)
+    expect(html).not.toContain('Managed By')
+    const listed = renderToString(<RelatedResourcesSection relationships={{ managers: [app], ownership: { children: { complete: true }, managers: { notChecked: gaps } } }} onNavigate={() => {}} />)
+    expect(listed).toContain('Radar couldn&#x27;t search Application objects, so those managers aren&#x27;t checked.')
+    expect(listed).toContain('Radar couldn&#x27;t search Kustomization objects, so those managers aren&#x27;t checked.')
+    expect(listed).not.toContain('Radar couldn&#x27;t search Application objects, so those managers aren&#x27;t checked.</div><div>Radar couldn&#x27;t search Application')
+  })
+
+  it('keeps an unreadable list to the hint, since it may name any resource', () => {
+    const none = renderToString(<RelatedResourcesSection relationships={{ children: [rs], ownership: { children: { complete: true }, managers: { unreadable: 1 } } }} onNavigate={() => {}} />)
+    expect(none).not.toContain('Managed By')
+    const listed = renderToString(<RelatedResourcesSection relationships={{ managers: [app], ownership: { children: { complete: true }, managers: { unreadable: 2 } } }} onNavigate={() => {}} />)
+    expect(listed).toMatch(/aria-label="[^"]*2 managers&#x27; member lists can&#x27;t be read/)
+  })
+
+  it('says when more than one manager lists a resource', () => {
+    const other = { ...app, name: 'other' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ managers: [app, other] }} onNavigate={() => {}} />)
+    expect(html).toContain('More than one manager lists or links to it.')
+  })
+
+  it('shows no Managed By when nothing lists the resource and the search was settled', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ children: [rs], ownership: { children: { complete: true } } }} onNavigate={() => {}} />)
+    expect(html).not.toContain('Managed By')
+  })
+
+  it('says a recorded member list with nothing to show records none', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ ownership: { children: { complete: true }, manages: { membership: 'recorded' } } }} />)
+    expect(html).toContain('Manages')
+    expect(html).toContain('Its status records no members to show.')
+  })
+
+  it('counts recorded members it does not list', () => {
+    const html = renderToString(
+      <RelatedResourcesSection relationships={{ manages: [rs], ownership: { children: { complete: true }, manages: { membership: 'recorded', missing: 1, withheld: 2 } } }} />,
+    )
+    expect(html).toContain('Its status also lists 1 not in the cluster, 2 you can&#x27;t view.')
+  })
+})
+
 describe('RelatedResourcesSection', () => {
   it('renders an associated Node', () => {
     const html = renderToString(
@@ -236,3 +502,17 @@ describe('AlertBanner optional actions', () => {
     expect(html).toContain('flex-wrap'); if (message) expect(html).toContain(message)
   })
 })
+
+
+describe('RelatedResourcesSection capped lists', () => {
+  it('marks a list the server cut short as a lower bound', () => {
+    const pods = Array.from({ length: 12 }, (_, i) => ({ kind: 'Pod', namespace: 'shop', name: `web-${i}` }))
+    const text = (relationships: Relationships) => renderToString(<RelatedResourcesSection relationships={relationships} onNavigate={() => {}} />).replace(/<!-- -->/g, '')
+    const capped = text({ children: pods, ownership: { children: { complete: false, truncated: true } } })
+    expect(capped).toContain('Children (12+)')
+    expect(capped).toContain('Show the 12 listed')
+    const whole = text({ children: pods, ownership: { children: { complete: true } } })
+    expect(whole).toContain('Children (12)')
+    expect(whole).toContain('Show all 12')
+  })
+})