@skyhook-io/k8s-ui 1.18.0 → 1.18.2

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

@@ -54,11 +54,12 @@ describe('FetchResult', () => {
     expect(html).toContain('Resource cache not available')
   })
 
-  it('does not blame the cluster for a kind_sync_failed 503', () => {
+  // kind_sync_failed is how Radar releases before kind_sync_timed_out spelled it.
+  it.each(['kind_sync_timed_out', 'kind_sync_failed'])('does not blame the cluster for a %s 503', (code) => {
     const html = renderToString(
       <FetchResult
         loading={false}
-        error={shaped('pods failed to load within the sync deadline', 503, { error_code: 'kind_sync_failed' })}
+        error={shaped('pods failed to load within the sync deadline', 503, { error_code: code })}
       />,
     )
     expect(html).not.toContain('Cluster unavailable')
@@ -66,6 +67,22 @@ describe('FetchResult', () => {
     expect(html).toContain('pods failed to load within the sync deadline')
   })
 
+  it('blames Radar\'s collector, not the cluster, for a collector failure', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('Radar is not allowed to list pods', 503, { error_code: 'radar_forbidden' })} />,
+    )
+    expect(html).toContain('Radar can')
+    expect(html).not.toContain('Cluster unavailable')
+  })
+
+  it('keeps a disconnected cluster reading as unavailable', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('Not connected to cluster', 503, { error_code: 'cluster_disconnected' })} />,
+    )
+    expect(html).toContain('Cluster unavailable')
+    expect(html).not.toContain('Radar can')
+  })
+
   it('renders a Retry button only when onRetry is given', () => {
     const err = shaped('internal server error', 500)
     expect(renderToString(<FetchResult loading={false} error={err} onRetry={() => {}} />)).toContain('Retry')

package/src/components/ui/FetchResult.tsx

@@ -3,6 +3,7 @@ import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, RefreshCw, t
 import { clsx } from 'clsx'
 import { PaneLoader } from './PaneLoader'
 import { isFetchError } from '../../types/fetch-error'
+import { readActionFor, canonicalReadCode } from '../../utils/read-actions'
 
 // FetchResult collapses (loading, error, no-data) into one rendered outcome:
 // loader while loading, a typed error surface when the fetch threw, or the
@@ -15,6 +16,7 @@ import { isFetchError } from '../../types/fetch-error'
 //   error (403)              → "Access denied"            + error.message
 //   error (404)              → notFoundMessage            + error.message
 //   error (503 sync failed)  → "Couldn't load this view"  + error.message
+//   error (503 collector)    → "Radar can't read this"    + error.message
 //   error (503)              → "Cluster unavailable"      + error.message
 //   error (401)              → "Sign-in required"         (apiFetch redirects; fallback)
 //   error (other / no shape) → "Couldn't load this view"  + error.message
@@ -118,9 +120,19 @@ function classify(error: unknown, notFoundMessage: string): Classified {
       case 503:
         // The cluster is connected; one kind's informer missed its sync
         // deadline, so "Cluster unavailable" would send the reader the wrong way.
-        if (errorCodeOf(error) === 'kind_sync_failed') {
+        if (canonicalReadCode(errorCodeOf(error)) === 'kind_sync_timed_out') {
           return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
         }
+        // Shares the collector's action, but it is the cluster connection
+        // that is down rather than one read.
+        if (errorCodeOf(error) === 'cluster_disconnected') {
+          return { headline: 'Cluster unavailable', detail: error.message, icon: ServerCrash }
+        }
+        // Radar's own identity or collection can't serve the read: neither
+        // the cluster being down nor the reader's access.
+        if (readActionFor(errorCodeOf(error)) === 'radar_config') {
+          return { headline: "Radar can't read this", detail: error.message, icon: ShieldOff }
+        }
         // The cluster is healthy and still loading — the retry policies keep
         // these surfaces polling, but a caller without one must not tell the
         // user a connecting cluster is down.

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

@@ -22,15 +22,15 @@ afterEach(async () => {
 describe('Deletion preview states', () => {
   it('states the namespace-wide deletion consequence without relying on topology', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} resourceKind="Namespace" resourceName="demo" namespaceName="" cascadeRootResolved={false} />))
-    expect(document.body.textContent).toContain('delete the namespace "demo" and the resources in it')
+    expect(document.body.textContent).toContain('delete the namespace "demo" and all resources in it')
     expect(document.body.textContent).not.toContain("not in Radar's topology")
   })
   it('shows one advisory statement for a resolved preview', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'web-pod' }]} />))
-    const toggle = [...document.querySelectorAll('button')].find(b => b.textContent?.includes('May affect'))!
+    const toggle = [...document.querySelectorAll('button')].find(b => b.textContent?.includes('May also delete'))!
     await act(async () => toggle.click())
     expect(document.body.textContent).toContain('web-pod')
-    expect(document.body.textContent?.match(/does not predict what will be deleted/g)).toHaveLength(1)
+    expect(document.body.textContent).toContain("Kubernetes deletes only those that name this one as their owner")
     expect(document.body.textContent).not.toContain('Other resources may be affected')
   })
   it.each([[], undefined])('omits the advisory statement for an empty resolved preview (%j)', async (dependents) => {
@@ -42,9 +42,10 @@ describe('Deletion preview states', () => {
   })
   it('distinguishes an observed unresolved root from a fetch failure', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} />))
-    expect(document.body.textContent).toContain("This resource is not in Radar's topology")
+    expect(document.body.textContent).toContain("Radar couldn't verify which dependent resources")
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} cascadePreviewFailed cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'stale' }]} />))
-    expect(document.body.textContent).toContain('Related-resource preview unavailable.')
+    expect(document.body.textContent).toContain('Deletion preview unavailable')
+    expect(document.body.textContent).toContain('Additional resources may be deleted.')
     expect(document.body.textContent).not.toContain('This resource is not in')
     expect(document.body.textContent).not.toContain('Other resources may be affected')
     expect(document.body.textContent).not.toContain('May affect')
@@ -55,8 +56,56 @@ describe('Deletion preview states', () => {
   })
   it('shows loading without presenting stale failure or success as a result', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeLoading cascadePreviewFailed cascadeRootResolved />))
-    expect(document.body.textContent).toContain('Checking related resources')
+    expect(document.body.textContent).toContain('Checking for dependent resources')
+    const confirm = Array.from(document.body.querySelectorAll('button')).find(button => button.textContent === 'Delete')!
+    expect(confirm.disabled).toBe(true)
     expect(document.body.textContent).not.toContain('unavailable')
     expect(document.body.textContent).not.toContain('does not predict')
   })
 })
+
+ it('separates observed collection, uncertainty and partial coverage', async () => {
+  await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{kind:'Pod', namespace:'demo', name:'certain'}]} cascadeDetail={{basis:'ownerReferences', possibleDependents:[{kind:'ConfigMap', namespace:'demo', name:'possible'}], coverage:{complete:false,narrowed:true}}} />))
+  expect(document.body.textContent).toContain('Garbage collection is expected to delete 1 dependent resource')
+  expect(document.body.textContent).toContain('May also delete 1 resource')
+  expect(document.body.textContent).toContain('This preview is partial')
+ })
+ it('does not promise force deletion can undo controller cleanup', async () => {
+  await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeDetail={{controllerTeardown:{controller:'Argo CD', action:'prune', destination:'remote'}}} />))
+  const force = document.querySelector('input[type="checkbox"]') as HTMLInputElement
+  await act(async () => force.click())
+  expect(document.body.textContent).toContain('remaining cleanup may be skipped')
+  expect(document.body.textContent).toContain('cannot undo it')
+  expect(document.body.textContent).not.toContain('Resources stay')
+ })
+
+ it('changes the pending-orphan warning when force is selected', async () => {
+  await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{kind:'Pod', namespace:'demo', name:'child'}]} cascadeDetail={{basis:'ownerReferences', propagation:'Orphan'}} />))
+  expect(document.body.textContent).toContain('dependents are orphaned')
+  expect(document.body.textContent).not.toContain('Garbage collection is expected')
+  await act(async () => (document.querySelector('input[type="checkbox"]') as HTMLInputElement).click())
+  expect(document.body.textContent).not.toContain('dependents are orphaned')
+  expect(document.body.textContent).toContain('Force delete removes the orphan finalizer')
+  expect(document.body.textContent).toContain('Garbage collection is expected')
+ })
+
+describe('paused Crossplane deletion confirmation', () => {
+  it('keeps context and permissions while changing only the explicit force selection', async () => {
+    const resourceData = { metadata: { name: 'bucket', annotations: { 'crossplane.io/paused': 'true' }, finalizers: ['finalizer.managedresource.crossplane.io'] }, spec: { providerConfigRef: { name: 'default' } } }
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} resourceData={resourceData} />))
+    expect(document.body.textContent).toContain('Pause can hold deletion in Terminating')
+    const confirm = [...document.querySelectorAll('button')].find(b => b.textContent === 'Delete')!
+    expect(confirm.disabled).toBe(false)
+    await act(async () => confirm.click())
+    expect(base.onConfirm).toHaveBeenLastCalledWith(false)
+    expect(document.body.textContent).toContain('Kubernetes can accept the deletion request')
+    const force = document.querySelector('input[type="checkbox"]') as HTMLInputElement
+    await act(async () => force.click())
+    expect(document.body.textContent).toContain('Force delete bypasses controller cleanup')
+    const forceConfirm = [...document.querySelectorAll('button')].find(b => b.textContent === 'Force Delete')!
+    await act(async () => forceConfirm.click())
+    expect(base.onConfirm).toHaveBeenLastCalledWith(true)
+    expect(resourceData.metadata.finalizers).toEqual(['finalizer.managedresource.crossplane.io'])
+    expect(resourceData.metadata.annotations['crossplane.io/paused']).toBe('true')
+  })
+})

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -2,6 +2,8 @@ import { useState, useMemo } from 'react'
 import { Loader2 } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 import { ConfirmDialog } from './ConfirmDialog'
+import { AlertBanner } from './drawer-components'
+import { CrossplaneDeleteNotice } from './CrossplaneOperationNotice'
 import { pluralize } from '../../utils/pluralize'
 
 export interface CascadeDependent {
@@ -11,6 +13,27 @@ export interface CascadeDependent {
   group?: string
 }
 
+/** Cached deletion evidence; all lists are observations, not completion guarantees. */
+export interface CascadeDetail {
+  propagation?: string
+  coverage?: { complete: boolean; narrowed?: boolean; truncated?: boolean; notChecked?: unknown[] }
+  unavailableReason?: string
+  notEnumerated?: string[]
+  /** "ownerReferences" when dependents are garbage-collection results; absent from older servers. */
+  basis?: string
+  /** Deleted unless another owner Radar can't see is still live. */
+  possibleDependents?: CascadeDependent[]
+  /** What Argo CD or Flux deletes through its finalizer. */
+  controllerTeardown?: {
+    controller: string
+    action: 'prune' | 'uninstall' | string
+    destination: 'local' | 'remote' | 'unknown'
+    resources?: CascadeDependent[]
+    /** Already being deleted: the teardown may be underway. */
+    terminating?: boolean
+  }
+}
+
 interface ForceDeleteConfirmDialogProps {
   open: boolean
   onClose: () => void
@@ -23,6 +46,8 @@ interface ForceDeleteConfirmDialogProps {
   cascadeLoading?: boolean
   cascadeRootResolved?: boolean
   cascadePreviewFailed?: boolean
+  cascadeDetail?: CascadeDetail
+  resourceData?: unknown
 }
 
 export function ForceDeleteConfirmDialog({
@@ -36,10 +61,14 @@ export function ForceDeleteConfirmDialog({
   cascadeDependents,
   cascadeLoading,
   cascadeRootResolved,
+  cascadeDetail,
   cascadePreviewFailed,
+  resourceData,
 }: ForceDeleteConfirmDialogProps) {
   const [forceDelete, setForceDelete] = useState(false)
+  const orphaning = cascadeDetail?.propagation === 'Orphan' && !forceDelete
   const isNamespace = resourceKind.toLowerCase() === 'namespace'
+  const isCRD = ['customresourcedefinition', 'customresourcedefinitions'].includes(resourceKind.toLowerCase())
 
   function handleClose() {
     onClose()
@@ -57,41 +86,69 @@ export function ForceDeleteConfirmDialog({
       onConfirm={handleConfirm}
       title="Delete Resource"
       message={`Are you sure you want to delete "${resourceName}"?`}
-      details={isNamespace ? `This will permanently delete the namespace "${resourceName}" and the resources in it.` : `This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`}
+      details={isNamespace ? `This will permanently delete the namespace "${resourceName}" and all resources in it.` : isCRD ? `This deletes the CRD and ALL its instances across the cluster, including those not shown here.` : namespaceName
+        ? `This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`
+        : `This will permanently delete the cluster-scoped ${resourceKind} "${resourceName}".`}
       confirmLabel={forceDelete ? 'Force Delete' : 'Delete'}
       variant="danger"
       isLoading={isLoading}
+      confirmDisabled={cascadeLoading}
     >
       <div className="flex flex-col gap-3 pb-1">
         {cascadeLoading && (
           <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
-            Checking related resources...
+            Checking for dependent resources...
           </div>
         )}
 
-        {!cascadeLoading && !cascadePreviewFailed && cascadeDependents && cascadeDependents.length > 0 && (
-          <CascadeDependentsList dependents={cascadeDependents} />
+        {!cascadeLoading && !cascadePreviewFailed && !orphaning && cascadeDependents && cascadeDependents.length > 0 && (
+          cascadeDetail?.basis === 'ownerReferences' ? (
+            <CascadeDependentsList
+              dependents={cascadeDependents}
+              title={`Garbage collection is expected to delete ${pluralize(cascadeDependents.length, 'dependent resource')}`}
+              note="Kubernetes deletes these through their owner references. Finalizers may delay deletion. This is an observation of the current cache, not a guarantee of completion."
+            />
+          ) : (
+            <CascadeDependentsList
+              dependents={cascadeDependents}
+              title={`May also delete ${pluralize(cascadeDependents.length, 'related resource')}`}
+              note="This Radar version can't tell owned resources from other links. Kubernetes deletes only those that name this one as their owner."
+            />
+          )
         )}
 
-        {!cascadeLoading && cascadePreviewFailed && (
-          <p className="text-xs text-theme-text-tertiary">
-            Related-resource preview unavailable.
-          </p>
+        {!cascadeLoading && !cascadePreviewFailed && !orphaning && cascadeDetail?.possibleDependents && cascadeDetail.possibleDependents.length > 0 && (
+          <CascadeDependentsList
+            dependents={cascadeDetail.possibleDependents}
+            title={`May also delete ${pluralize(cascadeDetail.possibleDependents.length, 'resource')}`}
+            note="Another owner or a chain of owners could not be resolved. Kubernetes deletes these only if no live owner remains."
+          />
         )}
 
-        {!isNamespace && !cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === false && (
-          <p className="text-xs text-theme-text-tertiary">
-            This resource is not in Radar&apos;s topology, so its related resources cannot be previewed.
-          </p>
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDetail?.coverage && !orphaning && !cascadeDetail.coverage.complete ? (
+          <p className="text-xs text-theme-text-secondary">This preview is partial: Radar may not collect or you may not be allowed to read all dependents. Additional resources may be deleted.</p>
+        ) : null}
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDetail?.controllerTeardown && (
+          <ControllerTeardownNotice teardown={cascadeDetail.controllerTeardown} force={forceDelete} />
         )}
 
-        {!cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === true && cascadeDependents && cascadeDependents.length > 0 && (
-          <p className="text-xs text-theme-text-secondary">
-            This list shows visible related resources; it does not predict what will be deleted.
-          </p>
+        {!cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === false && (
+          <AlertBanner
+            variant="warning"
+            title="Dependent resources unverified"
+            message="Radar couldn't verify which dependent resources Kubernetes will also delete. Additional resources may be deleted but aren't shown here."
+            className="mb-0"
+          />
         )}
 
+        {!cascadeLoading && !cascadePreviewFailed && orphaning && <p className="text-xs text-theme-text-secondary">Keeping the pending orphan policy: owner-reference dependents are orphaned. Controller cleanup may still delete resources.</p>}
+        {!cascadeLoading && !cascadePreviewFailed && forceDelete && cascadeDetail?.propagation === 'Orphan' && <p className="text-xs text-warning-text">Force delete removes the orphan finalizer and uses Background propagation. Owner-reference dependents may now be garbage collected.</p>}
+        {!cascadeLoading && !cascadePreviewFailed && !orphaning && cascadeDetail?.coverage?.complete && cascadeDetail.coverage.narrowed && <p className="text-xs text-theme-text-secondary">Only resources Radar observes and you can read are listed.</p>}
+        {!cascadeLoading && cascadePreviewFailed && <AlertBanner variant="warning" title="Deletion preview unavailable" message="Additional resources may be deleted." className="mb-0" />}
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDetail?.notEnumerated?.map(item => <p key={item} className="text-xs text-theme-text-secondary">Not enumerated: {item}.</p>)}
+        <CrossplaneDeleteNotice resources={[resourceData]} force={forceDelete} />
+
         <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
           <input
             type="checkbox"
@@ -108,16 +165,64 @@ export function ForceDeleteConfirmDialog({
 
 const MAX_NAMES_PER_KIND = 8
 
-function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[] }) {
+// How a managed resource opts out of its controller's teardown. A Helm
+// uninstall keeps resources by Helm's own annotation, not Flux's.
+function optOut(teardown: NonNullable<CascadeDetail['controllerTeardown']>): string | undefined {
+  if (teardown.action === 'uninstall') return 'helm.sh/resource-policy: keep'
+  if (teardown.controller === 'Argo CD') return 'argocd.argoproj.io/sync-options: Delete=false'
+  if (teardown.controller === 'Flux') return 'kustomize.toolkit.fluxcd.io/prune: disabled'
+  return undefined
+}
+
+function ControllerTeardownNotice({ teardown, force }: { teardown: NonNullable<CascadeDetail['controllerTeardown']>; force: boolean }) {
+  const resources = teardown.resources ?? []
+  const destinationNotice = teardown.destination === 'remote'
+    ? 'This controller targets a destination Radar cannot confirm is this cluster. Radar cannot list what it will delete there.'
+    : teardown.destination === 'unknown'
+      ? 'The destination cluster is unknown. Radar cannot show where controller cleanup will run.'
+      : ''
+  const what = teardown.action === 'uninstall' ? 'uninstall the Helm release' : 'delete the resources it manages'
+  if (force) {
+    return (
+      <AlertBanner
+        variant="warning"
+        title="Controller cleanup may be skipped"
+        message={<>
+          {destinationNotice && <>{destinationNotice} </>}
+          {teardown.terminating
+            ? `This is already being deleted, so ${teardown.controller} may already be working to ${what}. Force delete removes its finalizer but can't undo that.`
+            : `Force delete removes ${teardown.controller}'s finalizer, so ${teardown.controller}'s remaining cleanup may be skipped. Cleanup may already have started; removing the finalizer cannot undo it.`}
+        </>}
+        className="mb-0"
+      />
+    )
+  }
+  const title = teardown.destination === 'unknown'
+    ? `${teardown.controller} has a cleanup finalizer`
+    : teardown.action === 'uninstall'
+    ? `${teardown.controller} is configured to uninstall the Helm release`
+    : `${teardown.controller} is configured to prune managed resources`
+  return (
+    <CascadeDependentsList
+      dependents={resources}
+      title={resources.length > 0 ? `${title} (${resources.length} shown)` : title}
+      summary={`${destinationNotice ? destinationNotice + ' ' : ''}${teardown.action === 'uninstall' ? 'Helm uninstalls resources in its stored release manifest' : `${teardown.controller} deletes what its own inventory records`}, which can include resources Radar doesn't show.${optOut(teardown) ? ` Resources marked ${optOut(teardown)} stay.` : ''}`}
+    />
+  )
+}
+
+// `note` explains the expanded list; `summary` is a caveat that must read
+// without expanding it.
+function CascadeDependentsList({ dependents, title, note, summary }: { dependents: CascadeDependent[]; title: string; note?: string; summary?: string }) {
   const [expanded, setExpanded] = useState(false)
   const { panelId, buttonProps } = useDisclosure(expanded)
 
   const grouped = useMemo(() => {
     const map = new Map<string, string[]>()
     for (const dep of dependents) {
-      const kind = dep.kind
+      const kind = dep.group ? `${dep.kind} (${dep.group})` : dep.kind
       if (!map.has(kind)) map.set(kind, [])
-      map.get(kind)!.push(dep.name)
+      map.get(kind)!.push(dep.namespace ? `${dep.namespace}/${dep.name}` : dep.name)
     }
     return Array.from(map.entries()).sort((a, b) => a[0].localeCompare(b[0]))
   }, [dependents])
@@ -131,10 +236,9 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
         className="flex items-center gap-2 w-full px-3 py-2 text-left text-xs font-medium text-amber-400 hover:bg-amber-500/10 transition-colors"
       >
         <CollapseChevron open={expanded} inheritColor className="w-3.5 h-3.5" />
-        <span>
-          May affect {pluralize(dependents.length, 'related resource')}
-        </span>
+        <span>{title}</span>
       </button>
+      {summary && <p className="px-3 pb-2 text-xs text-theme-text-secondary">{summary}</p>}
 
       <Collapse open={expanded} id={panelId}>
         <div className="px-3 pb-2.5 space-y-1.5">
@@ -150,6 +254,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
               </div>
             </div>
           ))}
+          {note && <p className="text-xs text-theme-text-tertiary">{note}</p>}
         </div>
       </Collapse>
     </div>

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

@@ -36,6 +36,26 @@ describe('MultiSelectPicker', () => {
     expect(html).toContain('>Done</button>')
   })
 
+  it('adds an Only button to each row only when a select-only handler is given', () => {
+    expect(render()).not.toContain('>Only</button>')
+
+    const html = render({ onSelectOnly: () => {} })
+    expect(html.match(/>Only<\/button>/g)).toHaveLength(KINDS.length)
+    expect(html).toContain('aria-label="Show only Pod"')
+    // The name stays inside the checkbox label, so clicking it still toggles.
+    expect(html).toMatch(/<label[^>]*><span[^>]*><input type="checkbox"[^>]*\/><span class="truncate">Pod<\/span><\/span><\/label><button/)
+  })
+
+  it('hides Only until hover or keyboard focus, and keeps it visible on touch', () => {
+    const html = render({ onSelectOnly: () => {} })
+    const only = html.match(/<button[^>]*aria-label="Show only Pod"[^>]*>/)?.[0] ?? ''
+    expect(only).toContain('opacity-0')
+    expect(only).toContain('group-hover/row:opacity-100')
+    expect(only).toContain('group-has-[:focus-visible]/row:opacity-100')
+    expect(only).toContain('focus-visible:opacity-100')
+    expect(only).toContain('any-pointer-coarse:opacity-100')
+  })
+
   it('shows the filter input above the threshold and hides it below', () => {
     const shown = render()
     expect(shown).toContain('placeholder="Filter kinds"')

package/src/components/ui/MultiSelectPicker.tsx

@@ -16,6 +16,12 @@ export interface MultiSelectPickerProps {
   onClearAll: () => void
   /** Footer "Done" button. */
   onDone: () => void
+  /**
+   * When set, each row gets an "Only" button that selects just that item. The
+   * name and checkbox still toggle. The host decides whether it also commits
+   * and closes.
+   */
+  onSelectOnly?: (item: string) => void
 
   /** Controlled search term (kept in the host so the body stays SSR-testable). */
   search: string
@@ -50,6 +56,7 @@ export function MultiSelectPicker({
   onSelectionChange,
   onClearAll,
   onDone,
+  onSelectOnly,
   search,
   onSearchChange,
   searchPlaceholder,
@@ -136,8 +143,8 @@ export function MultiSelectPicker({
         )}
 
         {filteredItems.map(item => (
-          <li key={item}>
-            <label className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer">
+          <li key={item} className="group/row flex items-center hover:bg-theme-hover">
+            <label className="flex-1 min-w-0 flex items-center px-3 py-1.5 text-sm text-left text-theme-text-primary cursor-pointer">
               <span className="flex items-center gap-2 min-w-0">
                 <input
                   type="checkbox"
@@ -149,6 +156,17 @@ export function MultiSelectPicker({
                 {renderItemMeta?.(item)}
               </span>
             </label>
+            {onSelectOnly && (
+              // Touchscreens can coexist with a hover-capable mouse.
+              <button
+                type="button"
+                onClick={() => onSelectOnly(item)}
+                aria-label={`Show only ${item}`}
+                className="shrink-0 mr-2 px-1.5 py-0.5 rounded border border-theme-border bg-theme-surface text-[11px] text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary opacity-0 transition-opacity group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 focus-visible:opacity-100 any-pointer-coarse:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+              >
+                Only
+              </button>
+            )}
           </li>
         ))}
       </ul>

package/src/components/ui/PageHeader.tsx

@@ -18,7 +18,10 @@ interface PageHeaderProps {
 
 export function PageHeader({ icon: Icon, title, description, onBack, actions }: PageHeaderProps) {
   return (
-    <div className="flex items-center gap-4">
+    // Phones: actions (freshness, summary tiles) wrap under the title
+    // instead of squeezing it to nothing, and take the full row so summary
+    // tiles can grow into it.
+    <div className="flex items-center gap-4 phone:flex-wrap phone:gap-y-3">
       {onBack && (
         <button
           onClick={onBack}
@@ -28,16 +31,16 @@ export function PageHeader({ icon: Icon, title, description, onBack, actions }:
           <ArrowLeft className="w-5 h-5 text-theme-text-secondary" />
         </button>
       )}
-      <div className="flex-1 min-w-0">
+      <div className="flex-1 min-w-0 phone:basis-full">
         <div className="flex items-center gap-2">
           <Icon className="w-5 h-5 text-theme-text-secondary shrink-0" />
           <h1 className="text-lg font-semibold text-theme-text-primary truncate">{title}</h1>
         </div>
         {description && (
-          <p className="text-sm text-theme-text-tertiary mt-1 ml-7 truncate">{description}</p>
+          <p className="text-sm text-theme-text-tertiary mt-1 ml-7 truncate phone:whitespace-normal phone:line-clamp-2">{description}</p>
         )}
       </div>
-      {actions && <div className="flex flex-wrap items-center justify-end gap-2 shrink-0">{actions}</div>}
+      {actions && <div className="flex flex-wrap items-center justify-end gap-2 shrink-0 phone:shrink phone:basis-full phone:justify-start">{actions}</div>}
     </div>
   )
 }

package/src/components/ui/SummaryTile.tsx

@@ -8,6 +8,7 @@ export type SummaryTone = 'neutral' | 'success' | 'warning' | 'error' | 'info'
 // Applications both surface their status rollup as a row of these in the header.
 export function SummaryTile({
   label,
+  phoneLabel,
   value,
   tone = 'neutral',
   onClick,
@@ -15,6 +16,8 @@ export function SummaryTile({
   loading = false,
 }: {
   label: string
+  /** Shorter label for phones, where a row of tiles has to fit 360px. */
+  phoneLabel?: string
   value: number
   tone?: SummaryTone
   onClick?: () => void
@@ -42,10 +45,17 @@ export function SummaryTile({
   ) : (
     <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
   )
-  const label$ = <div className="text-xs text-theme-text-tertiary">{label}</div>
+  const label$ = phoneLabel ? (
+    <div className="text-xs text-theme-text-tertiary">
+      <span className="phone:hidden">{label}</span>
+      <span className="hidden phone:inline">{phoneLabel}</span>
+    </div>
+  ) : (
+    <div className="text-xs text-theme-text-tertiary">{label}</div>
+  )
   if (!onClick) {
     return (
-      <div className="rounded-md border border-theme-border bg-theme-base px-3 py-2">
+      <div className="rounded-md border border-theme-border bg-theme-base px-3 py-2 phone:flex-1 phone:basis-0 phone:whitespace-nowrap phone:px-2 phone:py-1.5">
         {value$}
         {label$}
       </div>
@@ -57,7 +67,7 @@ export function SummaryTile({
       onClick={onClick}
       aria-pressed={active}
       className={clsx(
-        'cursor-pointer rounded-md border bg-theme-base px-3 py-2 text-left transition-colors hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-skyhook-500',
+        'cursor-pointer rounded-md border bg-theme-base px-3 py-2 phone:flex-1 phone:basis-0 phone:whitespace-nowrap phone:px-2 phone:py-1.5 text-left transition-colors hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-skyhook-500',
         active ? activeBorderClass : 'border-theme-border',
       )}
     >