@skyhook-io/k8s-ui 1.18.1 → 1.19.0

package/src/components/shared/EditableYamlView.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
 import {
   Copy,
   CopyPlus,
@@ -12,6 +12,8 @@ import {
 } from 'lucide-react'
 import { Download } from 'lucide-react'
 import { stringify as yamlStringify } from 'yaml'
+import { useDebouncedValue } from '../../hooks/useDebouncedValue'
+import { CrossplaneYamlApplyNotice } from '../ui/CrossplaneOperationNotice'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
 import type { YamlSchemaLoader } from '../ui/YamlEditor'
@@ -21,6 +23,7 @@ import type { SelectedResource } from '../../types'
 import { resourceToYaml } from '../../utils/yaml'
 import { triggerDownload } from '../../utils/download'
 import { isCoreBatchJob } from '../../utils/api-resources'
+import { usePhoneLayout } from '../../hooks/usePhoneLayout'
 
 // ============================================================================
 // SUCCESS ANIMATION
@@ -197,6 +200,10 @@ export function EditableYamlView({
   onDownload,
 }: EditableYamlViewProps) {
   const draftKey = `radar_yaml_draft:${resource.kind}/${resource.namespace}/${resource.name}`
+  // Phones read YAML but don't start an edit or a duplicate: authoring YAML by
+  // touch is error-prone. Not folded into readOnly, which would discard an edit
+  // already open when a phone rotates from landscape to portrait.
+  const isPhone = usePhoneLayout()
 
   // Restore draft from sessionStorage (e.g., after session-expiry redirect).
   // All sessionStorage calls are wrapped in try-catch — storage can throw
@@ -207,6 +214,8 @@ export function EditableYamlView({
   const reviewGeneration = useRef(0)
   const [isEditing, setIsEditing] = useState(savedDraft.current !== null)
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
+  const pauseContextYaml = useDebouncedValue(!onPreview && isEditing ? editedYaml : '', 200)
+  const pauseBaselineYaml = useMemo(() => !onPreview && isEditing ? resourceToYaml(data) : '', [data, onPreview, isEditing])
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
   const [showErrorDetails, setShowErrorDetails] = useState(false)
   // Default on: the editor resubmits the full live manifest, so an unforced
@@ -216,6 +225,7 @@ export function EditableYamlView({
     yaml: string
     force: boolean
     originalYaml: string
+    resourceData: unknown
     documents: YamlPreviewResult[]
     nonAtomic: boolean
     context?: string
@@ -293,6 +303,7 @@ export function EditableYamlView({
           yaml: editedYaml,
           force,
           originalYaml: resourceToYaml(data),
+          resourceData: data,
           documents: result.documents,
           nonAtomic: result.nonAtomic,
           context: result.context,
@@ -382,7 +393,9 @@ export function EditableYamlView({
       return (
         <YamlReview
           submittedYaml={preview.yaml}
+          mode="update"
           originalYaml={preview.originalYaml}
+          resourceData={preview.resourceData}
           documents={preview.documents}
           nonAtomic={preview.nonAtomic}
           force={preview.force}
@@ -465,6 +478,8 @@ export function EditableYamlView({
           </div>
         </div>
 
+        {!onPreview && <div className="px-4 pt-2"><CrossplaneYamlApplyNotice yaml={pauseContextYaml} baselineYaml={pauseBaselineYaml} resourceData={data} /></div>}
+
         {editWarning && (
           <div className="px-4 py-2.5 bg-amber-500/10 dark:bg-yellow-500/10 border-b border-amber-300 dark:border-yellow-500/30">
             <div className="flex items-start gap-2">
@@ -549,7 +564,7 @@ export function EditableYamlView({
       <div className="flex items-center justify-between mb-2">
         <span className="text-sm font-medium text-theme-text-secondary">YAML</span>
         <div className="flex items-center gap-2">
-          {!readOnly && (
+          {!readOnly && !isPhone && (
             <button
               onClick={handleStartEdit}
               className="flex items-center gap-1 px-2 py-1 text-xs text-accent-text hover:text-accent-light hover:bg-theme-elevated rounded"
@@ -578,7 +593,7 @@ export function EditableYamlView({
               Download
             </button>
           </Tooltip>
-          {onDuplicate && (
+          {onDuplicate && !isPhone && (
             <Tooltip content="Duplicate as new resource">
               <button
                 onClick={() =>

package/src/components/shared/FilterRailPanel.test.tsx

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { FilterRailPanel } from './FilterRailPanel'
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+afterEach(() => { vi.unstubAllGlobals() })
+
+function stubPhone(matches: boolean) {
+  vi.stubGlobal('matchMedia', (query: string) => ({ matches, media: query, addEventListener: () => {}, removeEventListener: () => {} }))
+}
+
+function render(activeCount: number) {
+  const host = document.createElement('div'); const root = createRoot(host)
+  act(() => root.render(<FilterRailPanel activeCount={activeCount} clear={<button type="button">Clear</button>}><div>Status facet</div></FilterRailPanel>))
+  return host
+}
+
+it('keeps the plain header and an open body off a phone', () => {
+  stubPhone(false)
+  const host = render(2)
+  expect(host.querySelector('[aria-expanded]')).toBeNull()
+  expect(host.textContent).toContain('Status facet')
+  expect(host.textContent).not.toContain('2')
+})
+
+it('collapses the facets behind a Filters button with the active count on a phone', () => {
+  stubPhone(true)
+  const host = render(2)
+  const button = host.querySelector<HTMLButtonElement>('button[aria-expanded]')!
+  expect(button.textContent).toContain('Filters')
+  expect(button.textContent).toContain('2')
+  expect(button.getAttribute('aria-expanded')).toBe('false')
+  const panel = host.querySelector(`#${button.getAttribute('aria-controls')}`)!
+  expect(panel.querySelector('[inert]')).not.toBeNull()
+  act(() => button.click())
+  expect(button.getAttribute('aria-expanded')).toBe('true')
+  expect(panel.querySelector('[inert]')).toBeNull()
+})

package/src/components/shared/FilterRailPanel.tsx

@@ -0,0 +1,62 @@
+import { useState, type ReactNode } from 'react'
+import { SlidersHorizontal } from 'lucide-react'
+import { usePhoneLayout } from '../../hooks/usePhoneLayout'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
+
+// The header and scrolling body of a facet rail (Applications, GitOps). Below
+// 900px the rail stacks above its list; on a phone that stack fills the first
+// screen, so there the header becomes a "Filters" button with the active count
+// and the facets open in place under it. Elsewhere it renders the plain
+// "Filters" header over the body, as before.
+export function FilterRailPanel({
+  activeCount,
+  clear,
+  children,
+}: {
+  activeCount: number
+  /** The Clear control for the header's right side; null hides it. */
+  clear: ReactNode
+  children: ReactNode
+}) {
+  const isPhone = usePhoneLayout()
+  const [open, setOpen] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(open)
+
+  if (!isPhone) {
+    return (
+      <>
+        <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
+          <span className="text-sm font-medium text-theme-text-secondary">Filters</span>
+          {clear}
+        </div>
+        <div className="flex-1 overflow-y-auto">{children}</div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-2 px-3 py-1.5">
+        <button
+          type="button"
+          {...buttonProps}
+          onClick={() => setOpen((v) => !v)}
+          className="-ml-1 flex min-h-9 items-center gap-2 rounded-md px-1 text-sm font-medium text-theme-text-primary"
+        >
+          <SlidersHorizontal className="h-4 w-4 text-theme-text-secondary" aria-hidden />
+          Filters
+          {activeCount > 0 && (
+            <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-skyhook-500 px-1 text-[10px] font-semibold leading-none text-white">
+              {activeCount}
+            </span>
+          )}
+          <CollapseChevron open={open} />
+        </button>
+        {clear}
+      </div>
+      <Collapse open={open} id={panelId}>
+        <div className="max-h-56 overflow-y-auto border-t border-theme-border">{children}</div>
+      </Collapse>
+    </>
+  )
+}

package/src/components/shared/GitOpsWriteWarning.managers.test.tsx

@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+
+import type { ManagerAnswer } from '../../types/core'
+import { evaluateGitOpsWriteGuard, type GitOpsWriteGuard } from '../../utils/gitops-write-guard'
+import type { GitOpsOwnerRef } from '../../utils/gitops-owner'
+import { GitOpsWriteWarning } from './GitOpsWriteWarning'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const a = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'a' }
+const b = { ...a, name: 'b' }
+const object = { kind: 'Deployment', group: 'apps', namespace: 'shop', name: 'web' }
+
+async function linksOf(manager: ManagerAnswer, onOpenManager?: (owner: GitOpsOwnerRef) => void, override?: (guard: GitOpsWriteGuard) => GitOpsWriteGuard) {
+  const evaluated = evaluateGitOpsWriteGuard({ target: object, owner: null, manager, writes: [{ scope: 'spec', paths: ['spec.replicas'] }] })
+  const guard = override ? override(evaluated) : evaluated
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  await act(async () => root.render(<GitOpsWriteWarning guard={guard} acknowledged={false} onAcknowledgedChange={() => {}} onOpenManager={onOpenManager} />))
+  const links = [...element.querySelectorAll<HTMLButtonElement>('button')]
+  return { links, text: element.textContent ?? '', done: async () => { await act(async () => root.unmount()); element.remove() } }
+}
+
+// The most ambiguous answer is the one a reader most needs to inspect: each
+// manager opens from where the reason names it, with no second mention.
+it.each<[string, ManagerAnswer]>([
+  ['a disagreement', { state: 'disagree', direct: { object, recorders: [b], claims: [{ manager: a, source: 'argo-tracking-id', check: 'omitted' }] } }],
+  ['a shared list with a lead', { state: 'shared', lead: a, direct: { object, recorders: [a, b], claims: [{ manager: a, source: 'argo-tracking-id', check: 'recorded' }] } }],
+])('%s links every manager it names', async (_, manager) => {
+  const opened: string[] = []
+  const { links, text, done } = await linksOf(manager, owner => opened.push(`${owner.kind}/${owner.namespace}/${owner.name}`))
+  expect(links.map(l => l.textContent)).toEqual(['Application argocd/a', 'Application argocd/b'])
+  expect(text).not.toContain('View')
+  expect(text.match(/argocd\/b/g)).toHaveLength(1)
+  await act(async () => { links[1].click() })
+  expect(opened).toEqual(['applications/argocd/b'])
+  await done()
+})
+
+it("doesn't link a manager Radar didn't find", async () => {
+  const manager: ManagerAnswer = { state: 'disagree', direct: { object, recorders: [b], claims: [{ manager: { ...a, namespace: '' }, source: 'argo-instance-label', check: 'unresolved' }] } }
+  const { links, done } = await linksOf(manager, () => {})
+  expect(links.map(l => l.textContent)).toEqual(['Application argocd/b'])
+  await done()
+})
+
+it('a host without manager navigation names them without links', async () => {
+  const manager: ManagerAnswer = { state: 'disagree', direct: { object, recorders: [b], claims: [{ manager: a, source: 'argo-tracking-id', check: 'omitted' }] } }
+  const { links, done } = await linksOf(manager)
+  expect(links).toHaveLength(0)
+  await done()
+})
+
+// Two Applications of one name in different namespaces both list the object,
+// and its label names that name without a namespace: the label's claim is
+// recorded, yet says neither which one, so only the two qualified ones link.
+it('a label naming two same-named Applications links only the qualified ones', async () => {
+  const teamA = { ...a, namespace: 'team-a', name: 'web' }
+  const teamB = { ...a, namespace: 'team-b', name: 'web' }
+  const manager: ManagerAnswer = { state: 'shared', direct: { object, recorders: [teamA, teamB], claims: [{ manager: { ...a, namespace: '', name: 'web' }, source: 'argo-instance-label', check: 'recorded' }] } }
+  const { links, done } = await linksOf(manager, () => {})
+  expect(links.map(l => l.textContent)).toEqual(['Application team-a/web', 'Application team-b/web'])
+  await done()
+})
+
+// A name that begins another (argocd/a in argocd/ab) links only where it is
+// the whole name.
+it('links a name only where it is the whole name', async () => {
+  const ab = { ...a, name: 'ab' }
+  const manager: ManagerAnswer = { state: 'shared', direct: { object, recorders: [ab, a] } }
+  const { links, done } = await linksOf(manager, () => {}, guard => ({ ...guard, perWrite: guard.perWrite.map(w => ({ ...w, reason: 'Application argocd/ab and Application argocd/a may overwrite these fields.' })) }))
+  expect(links.map(l => l.textContent)).toEqual(['Application argocd/ab', 'Application argocd/a'])
+  await done()
+})
+
+it('a manager the reason never names keeps a link of its own', async () => {
+  const manager: ManagerAnswer = { state: 'shared', direct: { object, recorders: [a, b] } }
+  const { links, done } = await linksOf(manager, () => {}, guard => ({ ...guard, perWrite: guard.perWrite.map(w => ({ ...w, reason: 'Application argocd/a may overwrite these fields.' })) }))
+  expect(links.map(l => l.textContent)).toEqual(['Application argocd/a', 'View Application argocd/b'])
+  await done()
+})

package/src/components/shared/GitOpsWriteWarning.tsx

@@ -1,3 +1,4 @@
+import { Fragment, type ReactNode } from 'react'
 import { ExternalLink, GitBranch, Info, Loader2 } from 'lucide-react'
 import { clsx } from 'clsx'
 
@@ -9,6 +10,8 @@ import {
   type GitOpsWriteAssessment,
   type GitOpsWriteGuard,
 } from '../../utils/gitops-write-guard'
+import { gitOpsOwnerFromRef, managerChoices, managerRefLabel, type GitOpsOwnerRef } from '../../utils/gitops-owner'
+import { escapeRegExp } from '../../utils/log-format'
 
 export { canConfirmGitOpsWrite }
 
@@ -18,6 +21,9 @@ export interface GitOpsWriteWarningProps {
   onAcknowledgedChange: (acknowledged: boolean) => void
   /** Opens the GitOps owner (or Helm release) the guard names. */
   onOpenOwner?: () => void
+  /** Opens one of several managers the guard names, so a reader can inspect
+   *  each before deciding. Without it, they are named but not linked. */
+  onOpenManager?: (owner: GitOpsOwnerRef) => void
   disabled?: boolean
   className?: string
 }
@@ -28,6 +34,58 @@ const OWNER_LINK_LABEL = {
   helmreleases: 'View Flux HelmRelease',
 } as const
 
+// managerLinks: the managers a guard naming more than one can open, the lead
+// among them, since a lead isn't a winner. One Radar didn't find (missing,
+// withheld) or a label naming no namespace isn't linked: the label may name
+// either of two Applications of that name.
+function managerLinks(guard: GitOpsWriteGuard, onOpenManager: GitOpsWriteWarningProps['onOpenManager']): { label: string; owner: GitOpsOwnerRef }[] {
+  if (!onOpenManager || !guard.manager) return []
+  const choices = managerChoices(guard.manager)
+  if (choices.length < 2) return []
+  return choices.flatMap((c) => {
+    const owner = c.found && c.ref.namespace ? gitOpsOwnerFromRef(c.ref) : null
+    return owner ? [{ label: managerRefLabel(c.ref), owner }] : []
+  })
+}
+
+type ManagerLink = ReturnType<typeof managerLinks>[number]
+
+// linkManagers turns the first mention of each linked manager, across all the
+// lines, into its link, so the reason the reader is already reading is where
+// they open it. A name followed by more of a name (argocd/a in argocd/ab) isn't
+// a mention.
+function linkManagers(lines: string[], links: ManagerLink[], onOpen: (owner: GitOpsOwnerRef) => void): { lines: ReactNode[]; unmentioned: ManagerLink[] } {
+  if (!links.length) return { lines, unmentioned: [] }
+  const byLabel = new Map(links.map((l) => [l.label, l]))
+  const pattern = new RegExp(`(${[...byLabel.keys()].map(escapeRegExp).join('|')})(?![\\w./-])`, 'g')
+  const linked = new Set<string>()
+  const out = lines.map((line, i) => {
+    const parts: ReactNode[] = []
+    let last = 0
+    for (const match of line.matchAll(pattern)) {
+      const link = byLabel.get(match[0])!
+      if (linked.has(link.label)) continue
+      linked.add(link.label)
+      parts.push(line.slice(last, match.index))
+      parts.push(
+        <button
+          key={`${i}:${link.label}`}
+          type="button"
+          onClick={() => onOpen(link.owner)}
+          className="font-medium text-accent underline decoration-dotted underline-offset-2 hover:decoration-solid"
+        >
+          {link.label}
+        </button>,
+      )
+      last = match.index! + match[0].length
+    }
+    if (!parts.length) return line
+    parts.push(line.slice(last))
+    return <Fragment key={i}>{parts}</Fragment>
+  })
+  return { lines: out, unmentioned: links.filter((l) => !linked.has(l.label)) }
+}
+
 function reasonLines(perWrite: GitOpsWriteAssessment[], levels: GitOpsWriteGuard['level'][]): string[] {
   const relevant = perWrite.filter((entry) => levels.includes(entry.level) && entry.reason)
   const distinct = new Set(relevant.map((entry) => entry.reason))
@@ -42,6 +100,7 @@ export function GitOpsWriteWarning({
   acknowledged,
   onAcknowledgedChange,
   onOpenOwner,
+  onOpenManager,
   disabled = false,
   // Not undefined: AlertBanner would add its own mb-4, and a margin utility
   // overrides the parent's space-y gap.
@@ -63,11 +122,35 @@ export function GitOpsWriteWarning({
   if (guard.level === 'none') return null
 
   const headline = gitOpsWriteHeadline(guard)
-  const ownerLink = onOpenOwner ? (
+  const links = managerLinks(guard, onOpenManager)
+  const { lines, unmentioned } = linkManagers(
+    reasonLines(guard.perWrite, guard.level === 'info' ? ['info'] : ['will-revert', 'may-revert']),
+    links,
+    (owner) => onOpenManager?.(owner),
+  )
+  // Several managers link where the reason names them; one it doesn't name
+  // still gets a link of its own.
+  const ownerLink = links.length ? (
+    unmentioned.length ? (
+      <div className="flex flex-wrap gap-x-3 gap-y-1">
+        {unmentioned.map(({ label, owner }) => (
+          <button
+            key={label}
+            type="button"
+            onClick={() => onOpenManager!(owner)}
+            className="inline-flex items-center gap-1 text-xs font-medium text-accent hover:underline"
+          >
+            View {label}
+            <ExternalLink className="h-3 w-3" />
+          </button>
+        ))}
+      </div>
+    ) : null
+  ) : onOpenOwner ? (
     <button
       type="button"
       onClick={onOpenOwner}
-      className="inline-flex items-center gap-1 text-xs font-medium text-skyhook-600 hover:underline dark:text-skyhook-400"
+      className="inline-flex items-center gap-1 text-xs font-medium text-accent hover:underline"
     >
       {guard.owner ? OWNER_LINK_LABEL[guard.owner.kind] : 'View Helm release'}
       <ExternalLink className="h-3 w-3" />
@@ -75,7 +158,6 @@ export function GitOpsWriteWarning({
   ) : null
 
   if (guard.level === 'info') {
-    const lines = reasonLines(guard.perWrite, ['info'])
     return (
       <div
         className={clsx(
@@ -86,7 +168,8 @@ export function GitOpsWriteWarning({
         <Info className="mt-0.5 h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
         <div className="min-w-0 space-y-1">
           <p>
-            <span className="font-medium text-theme-text-primary">{headline}</span> {lines.join(' ')}
+            <span className="font-medium text-theme-text-primary">{headline}</span>
+            {lines.map((line, i) => <Fragment key={i}> {line}</Fragment>)}
           </p>
           {ownerLink}
         </div>
@@ -95,7 +178,6 @@ export function GitOpsWriteWarning({
   }
 
   const tool = guardToolLabel(guard)
-  const lines = reasonLines(guard.perWrite, ['will-revert', 'may-revert'])
   const durableFix = guard.owner
     ? 'For a lasting change, change it in the GitOps source.'
     : guard.helmRelease

package/src/components/shared/ManagedByChip.manager.test.tsx

@@ -0,0 +1,115 @@
+import { describe, expect, it, vi } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { ManagerAnswer, ManagerClaim } from '../../types/core'
+import { ManagedByChip } from './ManagedByChip'
+
+vi.mock('../ui/Tooltip', () => ({ Tooltip: ({ children, content }: any) => <span>{children}<span>{content}</span></span> }))
+const a = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'a' }
+const b = { ...a, name: 'b' }
+const object = { kind: 'Pod', namespace: 'demo', name: 'web-1' }
+const claim: ManagerClaim = { manager: a, source: 'argo-instance-label', check: 'omitted' }
+const render = (manager: ManagerAnswer) => renderToStaticMarkup(<ManagedByChip manager={manager} />).replaceAll('&#x27;', "'")
+
+describe('manager answer chip', () => {
+  // Only a list and the metadata agreeing say a manager manages it; a list
+  // alone can name an object its manager doesn't sync.
+  it.each([['agree', 'Managed by'], ['listed', 'Listed by']] as const)('%s says %s even before the status fetch', (state, prefix) => {
+    const html = render({ state, lead: a, direct: { object, recorders: [a] } })
+    expect(html).toContain(prefix)
+    expect(html).toContain('Application argocd/a lists this resource in its status.')
+  })
+  it('agree says the tracking metadata names the listing manager, once', () => {
+    const html = render({ state: 'agree', lead: a, direct: { object, recorders: [a], claims: [{ ...claim, manager: { ...a, namespace: '' }, check: 'recorded' }] } })
+    expect(html).toContain("Application argocd/a lists this resource in its status, and this resource's tracking metadata names it.")
+    expect(html.match(/Application/g)?.length).toBe(1)
+  })
+  it.each([
+    ['omitted', "This resource's label names Application argocd/a, but its status doesn't list it."],
+    ['unreadable', "This resource's label names Application argocd/a, but Radar can't read its status."],
+    ['remote', "This resource's label names Application argocd/a, but Radar can't confirm it deploys to this cluster."],
+    ['missing', "This resource's label names Application argocd/a, but there's no such Application here."],
+    ['withheld', "This resource's label names Application argocd/a, but you can't view it."],
+    ['unresolved', "This resource's label names Application argocd/a, but Radar found no Application of that name listing it; it may be managed from another cluster."],
+    ['unchecked', "This resource's label names Application argocd/a, but Radar couldn't check its status."],
+  ] as const)('claimed explains %s', (check, reason) => {
+    const html = render({ state: 'claimed', lead: a, direct: { object, claims: [{ ...claim, check }] } })
+    expect(html).toContain('Tracked by')
+    expect(html).toContain(reason)
+  })
+  it('disagree names the claim and recorder with a warning', () => {
+    const html = render({ state: 'disagree', direct: { object, claims: [claim], recorders: [b] } })
+    expect(html).toContain('Tracked by')
+    expect(html).toContain("Application argocd/a: its status doesn't list this resource")
+    expect(html).toContain('Application argocd/b lists this resource in its status')
+    expect(html.indexOf('argocd/a: its status')).toBeLessThan(html.indexOf('argocd/b lists'))
+    expect(html).toMatch(/rounded-full[^\"]*bg-amber/)
+  })
+  it('shared lists multiple names with the lead first', () => {
+    const html = render({ state: 'shared', lead: b, direct: { object, recorders: [a, b] } })
+    expect(html).toContain('Listed by')
+    expect(html).toContain('argocd/b and argocd/a')
+  })
+  it('does not present the lead’s sync status as the status of several managers', () => {
+    const html = renderToStaticMarkup(<ManagedByChip manager={{ state: 'shared', lead: b, direct: { object, recorders: [a, b] } }} status={{ sync: 'Synced', health: 'Healthy', suspended: false }} />)
+    expect(html).toContain('Listed by')
+    expect(html).not.toContain('Synced')
+  })
+  it('several claims without a lead stay plural', () => {
+    const html = render({ state: 'claimed', direct: { object, claims: [claim, { ...claim, manager: b }] } })
+    expect(html).toContain('Tracked by')
+    expect(html).toContain('argocd/a and argocd/b')
+  })
+  it.each(['none', 'unknown'] as const)('%s has no chip', state => {
+    expect(render({ state, direct: { object } })).toBe('')
+  })
+  it('via composes the wording with the parent and keeps direct and between claims', () => {
+    const html = render({ state: 'listed', lead: b, direct: { object, claims: [claim] },
+      between: [{ object: { ...object, kind: 'ReplicaSet', name: 'web' }, claims: [{ ...claim, manager: { ...a, name: 'middle' }, copied: true }] }],
+      via: { object: { kind: 'Deployment', group: 'apps', namespace: 'demo', name: 'web' }, recorders: [b] } })
+    expect(html).toContain('Listed by')
+    expect(html).toContain('Through Deployment demo/web')
+    expect(html).toContain('its own label names Application argocd/a')
+    expect(html).not.toContain('argocd/middle')
+  })
+})
+
+
+it('Listed by names only recorders and explains an outside claim in the tooltip', () => {
+  const c = { ...a, name: 'outside' }
+  const manager: ManagerAnswer = { state: 'shared', lead: b, direct: { object, recorders: [a, b], claims: [{ ...claim, manager: c }] } }
+  const html = render(manager)
+  expect(html).toContain('argocd/b and argocd/a')
+  expect(html).not.toContain('argocd/b and argocd/a and argocd/outside')
+  expect(html).toContain("Application argocd/outside: its status doesn't list this resource")
+})
+
+it('says on the chip itself that the answer comes through an ancestor', () => {
+  const object = { kind: 'Pod', namespace: 'demo', name: 'web-1' }
+  const lead = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'a' }
+  const html = renderToStaticMarkup(<ManagedByChip manager={{ state: 'listed', lead, direct: { object }, via: { object: { kind: 'Deployment', group: 'apps', namespace: 'demo', name: 'web' }, recorders: [lead] } }} />)
+  expect(html).toMatch(/<span class="shrink-0 text-theme-text-tertiary">via Deployment<\/span>/)
+})
+
+describe('manager answer chip wording', () => {
+  it("says up front, in one sentence, why one claim isn't confirmed", () => {
+    const html = render({ state: 'claimed', lead: a, direct: { object, claims: [claim] } })
+    expect(html).toContain("This resource's label names Application argocd/a, but its status doesn't list it.")
+    expect(html.match(/argocd\/a/g)).toHaveLength(2)
+  })
+  it("says up front that several claims aren't confirmed, then why each", () => {
+    const html = render({ state: 'claimed', direct: { object, claims: [claim, { ...claim, manager: b, source: 'argo-tracking-id' }] } })
+    expect(html).toContain("labels or annotations name Application argocd/a and Application argocd/b; Radar hasn't confirmed they manage it")
+    expect(html).toContain("Application argocd/b: its status doesn't list this resource.")
+  })
+  // A claim the walk passed shows even when no ancestor answered.
+  it('names claims on the way without via', () => {
+    const html = render({ state: 'claimed', lead: a, direct: { object, claims: [claim] },
+      between: [{ object: { ...object, kind: 'ReplicaSet', name: 'web' }, claims: [{ ...claim, manager: { ...a, name: 'rs-app' } }] }] })
+    expect(html).toContain('ReplicaSet demo/web: its own label names Application argocd/rs-app')
+  })
+  // The manager's Synced reads as this resource's state beside a list alone.
+  it.each([['agree', true], ['listed', false]] as const)('%s shows the manager status: %s', (state, shown) => {
+    const html = renderToStaticMarkup(<ManagedByChip manager={{ state, lead: a, direct: { object, recorders: [a] } }} status={{ sync: 'Synced', health: 'Healthy' } as never} />)
+    expect(html.includes('Synced')).toBe(shown)
+  })
+})

package/src/components/shared/ManagedByChip.menu.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import type { ManagerAnswer } from '../../types/core'
+import { ManagedByChip } from './ManagedByChip'
+import { managerChipPresentation } from '../../utils/gitops-owner'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const a = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'a' }
+const b = { ...a, name: 'b' }
+const object = { kind: 'Deployment', group: 'apps', namespace: 'shop', name: 'web' }
+const disagree: ManagerAnswer = { state: 'disagree', direct: { object, recorders: [b], claims: [{ manager: a, source: 'argo-tracking-id', check: 'omitted' }] } }
+
+// A disagreement has no lead; its chip must still reach both managers.
+it('opens a menu naming every candidate and what names each', async () => {
+  const opened: string[] = []
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  await act(async () => root.render(<ManagedByChip manager={disagree} onOpen={ref => opened.push(ref.name)} />))
+  await act(async () => { element.querySelector<HTMLButtonElement>('button[aria-haspopup="menu"]')!.click() })
+  const items = [...element.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')]
+  expect(items.map(i => i.textContent)).toEqual(['Application argocd/aThis metadata names it', 'Application argocd/bIts status lists this'])
+  await act(async () => { items[1].click() })
+  expect(opened).toEqual(['b'])
+  await act(async () => root.unmount())
+  element.remove()
+})
+
+it('a chip without a link is still reachable by keyboard', () => {
+  expect(renderToStaticMarkup(<ManagedByChip manager={disagree} />)).toContain('tabindex="0"')
+})
+
+// A claim whose label names no namespace is still a candidate: named, unlinked.
+it('names an unresolved candidate without linking it', async () => {
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  const unresolved: ManagerAnswer = { state: 'disagree', direct: { object, recorders: [b], claims: [{ manager: { ...a, namespace: '' }, source: 'argo-instance-label', check: 'unresolved' }] } }
+  await act(async () => root.render(<ManagedByChip manager={unresolved} onOpen={() => {}} />))
+  await act(async () => { element.querySelector<HTMLButtonElement>('button[aria-haspopup="menu"]')!.click() })
+  const items = [...element.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')]
+  expect(items).toHaveLength(2)
+  const a0 = items.find(i => i.textContent!.startsWith('Application a'))!
+  expect(a0.disabled).toBe(true)
+  expect(a0.textContent).toContain('Radar found no Application of this name listing it; it may be managed from another cluster')
+  await act(async () => root.unmount())
+  element.remove()
+})
+
+// A claim of a manager Radar didn't find is named but not linked, so the chip
+// never opens a page for an Application that isn't there.
+it('links only managers Radar found', () => {
+  const missing: ManagerAnswer = { state: 'claimed', lead: a, direct: { object, claims: [{ manager: a, source: 'argo-tracking-id', check: 'missing' }] } }
+  expect(renderToStaticMarkup(<ManagedByChip manager={missing} onOpen={() => {}} />)).not.toContain('<button')
+  const found: ManagerAnswer = { state: 'claimed', lead: a, direct: { object, claims: [{ manager: a, source: 'argo-tracking-id', check: 'omitted' }] } }
+  expect(renderToStaticMarkup(<ManagedByChip manager={found} onOpen={() => {}} />)).toContain('<button')
+})
+
+// A newer Radar may send a check this UI doesn't know: render, don't link.
+it('renders an unfamiliar check without linking it', () => {
+  const future: ManagerAnswer = { state: 'claimed', lead: a, direct: { object, claims: [{ manager: a, source: 'argo-tracking-id', check: 'installation-mismatch' as never }] } }
+  expect(renderToStaticMarkup(<ManagedByChip manager={future} onOpen={() => {}} />)).not.toContain('<button')
+  expect(managerChipPresentation(future)?.tooltip).toContain("couldn't confirm")
+})
+
+// One claim that read the manager is enough to link it, whatever another says.
+it('links a manager one claim found though another left it unresolved', () => {
+  const both: ManagerAnswer = { state: 'claimed', lead: a, direct: { object, claims: [
+    { manager: a, source: 'argo-tracking-id', check: 'omitted' },
+    { manager: { ...a, namespace: '' }, source: 'argo-instance-label', check: 'unresolved' },
+  ] } }
+  expect(renderToStaticMarkup(<ManagedByChip manager={both} onOpen={() => {}} />)).toContain('<button')
+})
+
+// A label naming an Application of a name more than one has, without its
+// namespace, isn't unresolved unless its check says so: the menu says it
+// doesn't pick one, not that none exists.
+const teamA = { ...a, namespace: 'team-a', name: 'web' }
+const teamB = { ...a, namespace: 'team-b', name: 'web' }
+const label = { ...a, namespace: '', name: 'web' }
+it.each<[string, ManagerAnswer]>([
+  ['shared', { state: 'shared', direct: { object, recorders: [teamA, teamB], claims: [{ manager: label, source: 'argo-instance-label', check: 'recorded' }] } }],
+  ['disagree', { state: 'disagree', direct: { object, recorders: [teamA], claims: [
+    { manager: teamB, source: 'argo-tracking-id', check: 'omitted' },
+    { manager: label, source: 'argo-instance-label', check: 'recorded' },
+  ] } }],
+  ['an unfamiliar check', { state: 'shared', direct: { object, recorders: [teamA, teamB], claims: [{ manager: label, source: 'argo-instance-label', check: 'installation-mismatch' as never }] } }],
+])('a label naming no single Application of its name (%s) is not called unresolved', async (_, shared) => {
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  await act(async () => root.render(<ManagedByChip manager={shared} onOpen={() => {}} />))
+  await act(async () => { element.querySelector<HTMLButtonElement>('button[aria-haspopup="menu"]')!.click() })
+  const text = element.textContent!
+  expect(text).toContain("its label doesn't say which Application of this name")
+  expect(text).not.toContain('Radar found no Application')
+  await act(async () => root.unmount())
+  element.remove()
+})