@skyhook-io/k8s-ui 1.18.0 → 1.18.1

package/src/components/shared/ResourceActionsBar.tsx

@@ -32,6 +32,9 @@ import { getDefaultContainerName, getExecContainerNames } from '../resources/res
 import { SetImageDialog, type SetImageOwnership } from './SetImageDialog'
 import { DrainPlanDialog, DEFAULT_DRAIN_DIALOG_OPTIONS, type DrainDialogOptions, type DrainPlan } from './DrainPlanDialog'
 import type { WorkloadImageInventory, WorkloadImageUpdate } from '../../types/core'
+import { getGitOpsTool } from '../gitops/detail-helpers'
+import { apiVersionToGroup } from '../../utils/navigation'
+import { isApiGroup } from '../resources/resource-utils-cnpg'
 import { isArgoRolloutResource } from '../../utils/workload-rollout'
 import { isCoreBatchJob } from '../../utils/api-resources'
 import { formatRelativeAgeTime } from '../../utils/format'
@@ -40,6 +43,8 @@ import { formatRelativeAgeTime } from '../../utils/format'
 // ACTIONS BAR - Interactive buttons that change based on resource kind
 // ============================================================================
 
+const FLUX_ACTION_KINDS = new Set(['gitrepositories', 'ocirepositories', 'helmrepositories', 'kustomizations', 'helmreleases', 'alerts'])
+
 interface ResourceActionsBarProps {
   resource: SelectedResource
   leadingActions?: React.ReactNode
@@ -187,6 +192,7 @@ export function ResourceActionsBar({
   onPlanDrain, onPlanDrainReset, drainPlan, isPlanningDrain, drainPlanError, drainPlanUpgrade,
 }: ResourceActionsBarProps) {
   const kind = resource.kind.toLowerCase()
+  const isFluxAction = FLUX_ACTION_KINDS.has(kind) && getGitOpsTool(kind, apiVersionToGroup(data?.apiVersion)) === 'flux'
   const coreBatchJob = isCoreBatchJob(kind, resource.group)
   const supportsWorkloadActions = ['deployments', 'statefulsets', 'daemonsets'].includes(kind) ||
     (kind === 'rollouts' && isArgoRolloutResource(data))
@@ -406,7 +412,7 @@ export function ResourceActionsBar({
       )}
 
       {/* Service actions */}
-      {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && canPortForward && resource.namespace && resource.name && renderPortForward && (
+      {kind === 'services' && data?.apiVersion === 'v1' && canPortForward && resource.namespace && resource.name && renderPortForward && (
         renderPortForward({
           type: 'service',
           namespace: resource.namespace,
@@ -516,7 +522,7 @@ export function ResourceActionsBar({
       )}
 
       {/* FluxCD actions */}
-      {['gitrepositories', 'ocirepositories', 'helmrepositories', 'kustomizations', 'helmreleases', 'alerts'].includes(kind) && (
+      {isFluxAction && (
         <FluxActions
           resource={resource}
           data={data}
@@ -532,7 +538,7 @@ export function ResourceActionsBar({
       )}
 
       {/* ArgoCD actions */}
-      {kind === 'applications' && (
+      {kind === 'applications' && isApiGroup(data?.apiVersion, 'argoproj.io') && (
         <ArgoActions
           resource={resource}
           data={data}

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

@@ -1087,3 +1087,52 @@ it('uses RayJob native detail only for the supported exact API', () => {
     if (apiVersion !== 'ray.io/v1') { expect(html).toContain('native-fallback'); expect(getResourceStatus('rayjobs', data)).toBeNull() }
   }
 })
+
+describe('API group identity', () => {
+  it.each([
+    ['applications', 'app.k8s.io/v1beta1', 'Application'],
+    ['applications', 'notargoproj.io/v1alpha1', 'Application'],
+    ['services', 'vendor.serving.knative.dev/v1', 'Service'],
+    ['ingresses', 'vendor.networking.internal.knative.dev/v1alpha1', 'Ingress'],
+    ['certificates', 'vendor.networking.internal.knative.dev/v1alpha1', 'Certificate'],
+    ['gateways', 'vendor.networking.istio.io/v1', 'Gateway'],
+  ])('keeps %s in %s generic', (plural, apiVersion, kind) => {
+    const data = { apiVersion, kind, metadata: { name: 'foreign', namespace: 'test' }, spec: { vendorSetting: 'custom-value' }, status: { phase: 'VendorReady' } }
+    expect(renderKind(plural, data, 'test')).toContain('custom-value')
+    expect(getResourceStatus(plural, data)?.text).toBe('VendorReady')
+  })
+
+  it('retains Argo CD status for its exact Application group', () => {
+    const data = { apiVersion: 'argoproj.io/v1alpha1', kind: 'Application', metadata: { name: 'real' }, status: { sync: { status: 'Synced' }, health: { status: 'Healthy' } } }
+    expect(renderKind('applications', data)).toContain('Synced')
+    expect(getResourceStatus('applications', data)?.text).toBe('Healthy')
+  })
+
+  it('retains Knative Service status and core Service presentation', () => {
+    expect(getResourceStatus('services', { apiVersion: 'serving.knative.dev/v1', status: { conditions: [{ type: 'Ready', status: 'True' }] } })?.text).toBe('Ready')
+    expect(renderKind('services', { apiVersion: 'v1', metadata: { name: 'core' }, spec: { type: 'ClusterIP', clusterIP: '10.0.0.1' } })).toContain('10.0.0.1')
+  })
+})
+
+describe('Flux kind collisions', () => {
+  it.each([
+    ['gitrepositories', 'source.toolkit.fluxcd.io'],
+    ['ocirepositories', 'source.toolkit.fluxcd.io'],
+    ['helmrepositories', 'source.toolkit.fluxcd.io'],
+    ['kustomizations', 'kustomize.toolkit.fluxcd.io'],
+    ['helmreleases', 'helm.toolkit.fluxcd.io'],
+    ['alerts', 'notification.toolkit.fluxcd.io'],
+  ])('keeps foreign %s generic and preserves its real Flux renderer', (kind, group) => {
+    const resource = {
+      apiVersion: `${group}/v1`, metadata: { name: 'example', namespace: 'test' },
+      spec: { vendorSetting: 'custom-value' }, status: { phase: 'VendorReady' },
+    }
+    expect(renderKind(kind, resource, 'test')).not.toContain('custom-value')
+    expect(getResourceStatus(kind, resource)?.text).not.toBe('VendorReady')
+    for (const apiVersion of ['vendor.io/v1', `foreign.${group}/v1`, 'argoproj.io/v1alpha1']) {
+      const foreign = { ...resource, apiVersion }
+      expect(renderKind(kind, foreign, 'test')).toContain('custom-value')
+      expect(getResourceStatus(kind, foreign)?.text).toBe('VendorReady')
+    }
+  })
+})

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -1,3 +1,5 @@
+import { getGitOpsTool } from '../gitops/detail-helpers'
+import { apiVersionToGroup } from '../../utils/navigation'
 import { hasReflectorDetails } from '../resources/renderers/ReflectorSection'
 import { clsx } from 'clsx'
 import { SEVERITY_BADGE, HEALTH_BADGE_COLORS } from '../../utils/badge-colors'
@@ -552,6 +554,8 @@ interface ResourceRendererDispatchProps {
   resource: SelectedResource
   data: any
   relationships?: Relationships
+  /** See RelatedResourcesSection. */
+  trackedBy?: string
   certificateInfo?: SecretCertificateInfo
   hpaDiagnosis?: HPADiagnosis
   scalerDiagnostics?: ScalerDiagnosis[]
@@ -598,6 +602,7 @@ export function ResourceRendererDispatch({
   resource,
   data,
   relationships,
+  trackedBy,
   certificateInfo,
   hpaDiagnosis,
   scalerDiagnostics,
@@ -701,8 +706,11 @@ export function ResourceRendererDispatch({
   // foreign CRD render a BLANK drawer rather than the generic one.
   // CAPI's `machines` and `machinesets` need the same protection because another
   // API group can publish either plural without inheriting CAPI presentation.
+  const isFluxKind = ['gitrepositories', 'ocirepositories', 'helmrepositories', 'kustomizations', 'helmreleases', 'alerts'].includes(kind)
+  const isFluxResource = getGitOpsTool(kind, apiVersionToGroup(data?.apiVersion)) === 'flux'
   const isGroupGatedKind =
-    kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
+    isFluxKind || kind === 'applications' || kind === 'services' || kind === 'ingresses' || kind === 'certificates' || kind === 'gateways'
+    || kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
     || kind === 'objectstores' || kind === 'databases' || kind === 'publications'
     || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs' || kind === 'databaseroles' || kind === 'jobsets'
     || kind === 'policies' || kind === 'rollouts' || kind === 'experiments'
@@ -710,7 +718,13 @@ export function ResourceRendererDispatch({
     || kind === 'machines' || kind === 'machinesets' || kind === 'workloads' || kind === 'localqueues' || kind === 'clusterqueues'
   const isCNPGApiVersion = isApiGroup(data?.apiVersion, CNPG_GROUP)
   const groupGatedMatched =
-    (kind === 'clusters' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'cluster.x-k8s.io')))
+    (isFluxKind && isFluxResource)
+    || (kind === 'applications' && isApiGroup(data?.apiVersion, 'argoproj.io'))
+    || (kind === 'services' && (data?.apiVersion === 'v1' || isApiGroup(data?.apiVersion, 'serving.knative.dev')))
+    || (kind === 'ingresses' && ['networking.k8s.io', 'extensions', 'networking.internal.knative.dev'].some(group => isApiGroup(data?.apiVersion, group)))
+    || (kind === 'certificates' && ['cert-manager.io', 'networking.internal.knative.dev'].some(group => isApiGroup(data?.apiVersion, group)))
+    || (kind === 'gateways' && ['gateway.networking.k8s.io', 'networking.istio.io'].some(group => isApiGroup(data?.apiVersion, group)))
+    || (kind === 'clusters' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'cluster.x-k8s.io')))
     || (kind === 'backups' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'velero.io')))
     || ((kind === 'scheduledbackups' || kind === 'poolers') && isCNPGApiVersion)
     || (kind === 'objectstores' && isApiGroup(data?.apiVersion, 'barmancloud.cnpg.io'))
@@ -799,7 +813,7 @@ export function ResourceRendererDispatch({
 
   const sidebarContent = showCommonSections && (
     <>
-      <RelatedResourcesSection relationships={sidebarRelationships} onNavigate={onNavigate} />
+      <RelatedResourcesSection relationships={sidebarRelationships} onNavigate={onNavigate} kind={kind} trackedBy={trackedBy} />
       {kind !== 'events' && <EventsSection fullscreen={!!renderSidebar} events={events || []} updates={updates || []} isLoading={eventsLoading ?? false} eventsError={eventsError ?? null} updatesError={updatesError ?? null} hint={eventsHint} />}
       <LabelsSection data={data} />
       <AnnotationsSection data={data} />
@@ -824,9 +838,9 @@ export function ResourceRendererDispatch({
           />
         )}
         {kind === 'replicasets' && <ReplicaSetRenderer data={data} />}
-        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} />}
+        {kind === 'services' && data?.apiVersion === 'v1' && <ServiceComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} />}
         {kind === 'endpointslices' && <EndpointSliceRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'ingresses' && (isApiGroup(data?.apiVersion, 'networking.k8s.io') || isApiGroup(data?.apiVersion, 'extensions')) && <IngressRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'configmaps' && <ConfigMapRenderer data={data} relationships={relationships} onNavigate={onNavigate} />}
         {kind === 'secrets' && <SecretRenderer data={data} relationships={relationships} onNavigate={onNavigate} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
         {kind === 'jobs' && !nonCoreJobFallthrough && <JobComp data={data} onNavigate={onNavigate} />}
@@ -848,7 +862,7 @@ export function ResourceRendererDispatch({
         {kind === 'analysisruns' && <AnalysisRunRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'analysistemplates' || kind === 'clusteranalysistemplates') && <AnalysisTemplateRenderer data={data} />}
         {kind === 'experiments' && isApiGroup(data?.apiVersion, 'argoproj.io') && <ExperimentRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'certificates' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <CertificateRenderer data={data} />}
+        {kind === 'certificates' && isApiGroup(data?.apiVersion, 'cert-manager.io') && <CertificateRenderer data={data} />}
         {kind === 'workflows' && <WorkflowRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'persistentvolumes' && <PersistentVolumeRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'storageclasses' && <StorageClassRenderer data={data} />}
@@ -857,7 +871,7 @@ export function ResourceRendererDispatch({
         {kind === 'issuers' && <IssuerRenderer data={data} />}
         {kind === 'orders' && <OrderRenderer data={data} />}
         {kind === 'challenges' && <ChallengeRenderer data={data} />}
-        {kind === 'gateways' && (data.apiVersion?.includes('networking.istio.io') ? <IstioGatewayRenderer data={data} /> : <GatewayRenderer data={data} onNavigate={onNavigate} />)}
+        {kind === 'gateways' && groupGatedMatched && (isApiGroup(data.apiVersion, 'networking.istio.io') ? <IstioGatewayRenderer data={data} /> : <GatewayRenderer data={data} onNavigate={onNavigate} />)}
         {kind === 'gatewayclasses' && <GatewayClassRenderer data={data} />}
         {kind === 'httproutes' && <HTTPRouteRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'grpcroutes' && <GRPCRouteRenderer data={data} onNavigate={onNavigate} />}
@@ -877,13 +891,13 @@ export function ResourceRendererDispatch({
         {(kind === 'roles' || kind === 'clusterroles') && <RoleComp data={data} onNavigate={onNavigate} />}
         {(kind === 'rolebindings' || kind === 'clusterrolebindings') && <RoleBindingComp data={data} onNavigate={onNavigate} />}
         {kind === 'events' && <EventRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'gitrepositories' && <GitRepositoryRenderer data={data} />}
-        {kind === 'ocirepositories' && <OCIRepositoryRenderer data={data} />}
-        {kind === 'helmrepositories' && <HelmRepositoryRenderer data={data} />}
-        {kind === 'kustomizations' && <KustomizationRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'helmreleases' && <FluxHelmReleaseComp data={data} onNavigate={onNavigate} />}
-        {kind === 'alerts' && <AlertRenderer data={data} />}
-        {kind === 'applications' && <ArgoApplicationRenderer data={data} />}
+        {kind === 'gitrepositories' && isFluxResource && <GitRepositoryRenderer data={data} />}
+        {kind === 'ocirepositories' && isFluxResource && <OCIRepositoryRenderer data={data} />}
+        {kind === 'helmrepositories' && isFluxResource && <HelmRepositoryRenderer data={data} />}
+        {kind === 'kustomizations' && isFluxResource && <KustomizationRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'helmreleases' && isFluxResource && <FluxHelmReleaseComp data={data} onNavigate={onNavigate} />}
+        {kind === 'alerts' && isFluxResource && <AlertRenderer data={data} />}
+        {kind === 'applications' && isApiGroup(data?.apiVersion, 'argoproj.io') && <ArgoApplicationRenderer data={data} />}
         {kind === 'nodepools' && <KarpenterNodePoolComp data={data} onNavigate={onNavigate} />}
         {kind === 'nodeclaims' && <KarpenterNodeClaimRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'ec2nodeclasses' && <KarpenterEC2NodeClassRenderer data={data} />}
@@ -989,14 +1003,14 @@ export function ResourceRendererDispatch({
         {kind === 'leases' && <LeaseRenderer data={data} />}
         {kind === 'limitranges' && <LimitRangeRenderer data={data} />}
         {/* Knative Serving */}
-        {(kind === 'services' && data?.apiVersion?.includes('serving.knative.dev')) && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
+        {(kind === 'services' && isApiGroup(data?.apiVersion, 'serving.knative.dev')) && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativeservices' && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativeconfigurations' && <KnativeConfigurationRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativerevisions' && <KnativeRevisionRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativeroutes' && <KnativeRouteRenderer data={data} onNavigate={onNavigate} />}
-        {(kind === 'ingresses' && data?.apiVersion?.includes('networking.internal.knative.dev')) && <KnativeIngressRenderer data={data} />}
+        {(kind === 'ingresses' && isApiGroup(data?.apiVersion, 'networking.internal.knative.dev')) && <KnativeIngressRenderer data={data} />}
         {kind === 'knativeingresses' && <KnativeIngressRenderer data={data} />}
-        {(kind === 'certificates' && data?.apiVersion?.includes('networking.internal.knative.dev')) && <KnativeCertificateRenderer data={data} />}
+        {(kind === 'certificates' && isApiGroup(data?.apiVersion, 'networking.internal.knative.dev')) && <KnativeCertificateRenderer data={data} />}
         {kind === 'knativecertificates' && <KnativeCertificateRenderer data={data} />}
         {kind === 'serverlessservices' && <ServerlessServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'domainmappings' && <DomainMappingRenderer data={data} onNavigate={onNavigate} />}
@@ -1101,11 +1115,11 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   }
   if (k === 'replicasets') return getWorkloadStatus(data, k)
   if (k === 'services') {
-    if (data.apiVersion?.includes('serving.knative.dev')) {
+    if (isApiGroup(data.apiVersion, 'serving.knative.dev')) {
       const status = getKnativeConditionStatus(data)
       return { text: status.text, color: status.color }
     }
-    return getServiceStatus(data)
+    if (data.apiVersion === 'v1') return getServiceStatus(data)
   }
   if (k === 'endpointslices') {
     const endpoints = data.endpoints || []
@@ -1178,11 +1192,11 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'workflows') return getWorkflowStatus(data)
   if (k === 'cronworkflows') return getCronWorkflowStatus(data)
   if (k === 'certificates') {
-    if (data.apiVersion?.includes('networking.internal.knative.dev')) {
+    if (isApiGroup(data.apiVersion, 'networking.internal.knative.dev')) {
       const status = getKnativeConditionStatus(data)
       return { text: status.text, color: status.color }
     }
-    return getCertificateStatus(data)
+    if (isApiGroup(data.apiVersion, 'cert-manager.io')) return getCertificateStatus(data)
   }
   if (k === 'persistentvolumes') return getPVStatus(data)
   if (k === 'certificaterequests') return getCertificateRequestStatus(data)
@@ -1191,20 +1205,21 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'orders') return getOrderState(data)
   if (k === 'challenges') return getChallengeState(data)
   if (k === 'gateways') {
-    if (data.apiVersion?.includes('networking.istio.io')) return getIstioGatewayStatus(data)
-    return getGatewayStatus(data)
+    if (isApiGroup(data.apiVersion, 'networking.istio.io')) return getIstioGatewayStatus(data)
+    if (isApiGroup(data.apiVersion, 'gateway.networking.k8s.io')) return getGatewayStatus(data)
   }
   if (k === 'gatewayclasses') return getGatewayClassStatus(data)
   if (k === 'httproutes' || k === 'grpcroutes' || k === 'tcproutes' || k === 'tlsroutes' || k === 'udproutes') return getRouteStatus(data)
   if (k === 'sealedsecrets') return getSealedSecretStatus(data)
   if (k === 'poddisruptionbudgets') return getPDBStatus(data)
-  if (k === 'gitrepositories') return getGitRepositoryStatus(data)
-  if (k === 'ocirepositories') return getOCIRepositoryStatus(data)
-  if (k === 'helmrepositories') return getHelmRepositoryStatus(data)
-  if (k === 'kustomizations') return getKustomizationStatus(data)
-  if (k === 'helmreleases') return getFluxHelmReleaseStatus(data)
-  if (k === 'alerts') return getFluxAlertStatus(data)
-  if (k === 'applications') return getArgoApplicationStatus(data)
+  const isFluxResource = getGitOpsTool(k, apiVersionToGroup(data.apiVersion)) === 'flux'
+  if (k === 'gitrepositories' && isFluxResource) return getGitRepositoryStatus(data)
+  if (k === 'ocirepositories' && isFluxResource) return getOCIRepositoryStatus(data)
+  if (k === 'helmrepositories' && isFluxResource) return getHelmRepositoryStatus(data)
+  if (k === 'kustomizations' && isFluxResource) return getKustomizationStatus(data)
+  if (k === 'helmreleases' && isFluxResource) return getFluxHelmReleaseStatus(data)
+  if (k === 'alerts' && isFluxResource) return getFluxAlertStatus(data)
+  if (k === 'applications' && isApiGroup(data.apiVersion, 'argoproj.io')) return getArgoApplicationStatus(data)
   if (k === 'nodepools') return getNodePoolStatus(data)
   if (k === 'nodeclaims') return getNodeClaimStatus(data)
   if (k === 'ec2nodeclasses') return getEC2NodeClassStatus(data)
@@ -1349,7 +1364,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (
     knativeConditionKinds.includes(k)
     || isKnativeSubscription
-    || (k === 'ingresses' && data.apiVersion?.includes('networking.internal.knative.dev'))
+    || (k === 'ingresses' && isApiGroup(data.apiVersion, 'networking.internal.knative.dev'))
   ) {
     const status = getKnativeConditionStatus(data)
     return { text: status.text, color: status.color }

package/src/components/timeline/TimelineList.tsx

@@ -216,6 +216,10 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     const singleEvents: TimelineEvent[] = []
 
     for (const item of items) {
+      if (item.id === selectedEventId) {
+        singleEvents.push(item)
+        continue
+      }
       if (foldPerResource?.(item)) {
         const key = `fold:${item.kind}:${item.namespace}:${item.name}`
         const existing = groups.get(key) || []
@@ -344,7 +348,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     if (older.length > 0) groups.push({ label: 'Older', items: aggregateEvents(older) })
 
     return groups
-  }, [filteredActivity, compact, foldPerResource])
+  }, [filteredActivity, compact, foldPerResource, selectedEventId])
 
   // Visible-window reporting: rows carry their time span in data attributes;
   // on scroll (rAF-throttled) and whenever the row set changes, the span of

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/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,9 @@ 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.
+    <div className="flex items-center gap-4 phone:flex-wrap phone:gap-y-3">
       {onBack && (
         <button
           onClick={onBack}
@@ -28,16 +30,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:justify-start">{actions}</div>}
     </div>
   )
 }

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)]',