@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/whats-new/releaseNotes.ts

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react'
-import { Bot, GitCompareArrows, Layers, Network, RefreshCcw, Scale, ScrollText, SlidersHorizontal } from 'lucide-react'
+import { Bot, Database, GitCompareArrows, HardDrive, Hourglass, Layers, Network, RefreshCcw, Scale, ScrollText, SlidersHorizontal, Undo2 } from 'lucide-react'
 import { compareVersions } from '../../utils/version'
 
 export interface ReleaseHighlight {
@@ -47,6 +47,68 @@ export const CHANGELOG_URL = 'https://radarhq.io/changelog'
 // major release must have its own entry: scripts/check-whats-new.sh refuses to
 // release one without it.
 export const RELEASE_NOTES: ReleaseNotes[] = [
+  {
+    version: 'v1.17.0',
+    highlights: [
+      {
+        id: 'cloudnative-pg',
+        icon: Database,
+        title: 'CloudNativePG, end to end',
+        description: 'See which Postgres cluster needs attention and why, whether its backups would restore, and switch over, fence or restore with a review first.',
+        leadDescription: 'New views for CloudNativePG show which Postgres cluster needs attention and why, what each instance is doing, and whether its backups would actually let you restore. Create, restore, back up, switch over, fence and hibernate from Radar: you review exactly what will be written, then Radar follows the operation until it sees the outcome.',
+        importance: 9,
+        path: '/cnpg',
+        cta: 'Open CloudNativePG',
+      },
+      {
+        id: 'live-traffic-large-clusters',
+        icon: Network,
+        title: 'Live Traffic on large Cilium clusters',
+        description: 'Traffic is drawn per workload and stays fast on big clusters. Focus on one workload, or get a connection list when the map is too big.',
+        importance: 7,
+        path: '/traffic',
+        cta: 'Open Live Traffic',
+      },
+      {
+        id: 'gitops-revert-warnings',
+        icon: Undo2,
+        title: 'Know before an edit gets reverted',
+        description: 'Before Radar edits an object owned by Argo CD, Flux or Helm, it tells you whether the owner will undo the change.',
+        importance: 6,
+      },
+      {
+        id: 'stuck-deletion-issues',
+        icon: Hourglass,
+        title: 'Issues for stuck deletions',
+        description: "Helm uninstalls and custom resources stuck deleting raise issues, and so do volumes that can't attach to their node's machine type.",
+        importance: 6,
+        path: '/issues',
+        cta: 'Open Issues',
+      },
+      {
+        id: 'audit-unused-storage',
+        icon: HardDrive,
+        title: 'Cluster Audit finds unused storage',
+        description: 'Claims nothing uses, claims Pending for over a day, and Released PersistentVolumes, with their size and storage class.',
+        // Below v1.16's headline at its 0.75 weight, so an upgrade from v1.15
+        // still shows that card.
+        importance: 4,
+        path: '/checks',
+        cta: 'Open Checks',
+      },
+    ],
+    improvements: [
+      // The grid fills row by row: pair lines of similar length.
+      "Capacity explains why a node pool isn't scaling down",
+      'Nodes being removed show as removed, not failed',
+      'Helm actions on Flux releases change the right objects',
+      'Flux Sync with source matches flux reconcile --with-source',
+      'Topology links Services only to the Pods they select',
+      'Namespaces stuck Terminating show what holds them',
+      'Filters stay put when you switch kinds or sections',
+      'Skip an audit check per resource with an annotation',
+    ],
+  },
   {
     version: 'v1.16.0',
     highlights: [

package/src/components/workload/WorkloadView.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import { gitOpsOwnerFromRelationships } from '@skyhook-io/k8s-ui'
 import type { Relationships } from '../../types'
-import { supportsBatchExecution } from './WorkloadView'
+import { collectServingRefs, supportsBatchExecution } from './WorkloadView'
 import { findInheritedGitOpsLookupRef } from '../../hooks/useResolvedGitOpsOwner'
 
 describe('findInheritedGitOpsLookupRef', () => {
@@ -75,3 +75,12 @@ describe('supportsBatchExecution', () => {
     expect(supportsBatchExecution('CronJob', 'cronjobs', 'batch')).toBe(true)
   })
 })
+
+
+describe('collectServingRefs', () => {
+  it('loads moved upstream resources while retaining exact API groups', () => {
+    const broker = { kind: 'Broker', group: 'eventing.knative.dev', namespace: 'demo', name: 'messages' }
+    const other = { ...broker, group: 'other.example' }
+    expect(collectServingRefs({ routedFrom: [broker, broker, other] })).toEqual([broker, other])
+  })
+})

package/src/components/workload/WorkloadView.tsx

@@ -1,8 +1,4 @@
-import { RayJobRenderer } from '../resources/renderers/RayJobRenderer'
-import { JobRenderer, JobSetRenderer } from '../resources/renderers/JobAdmissionRenderers'
-import { RayClusterRenderer } from '../resources/renderers/RayClusterRenderer'
-import { RayServiceRenderer } from '../resources/renderers/RayServiceRenderer'
-import { KueueWorkloadRenderer } from '../resources/renderers/KueueWorkloadRenderer'
+import { decorateResourceDiagnose, resourceDetailRedirect, resourceDetailSlots, resourceLogs, resourceRendererOverrides } from '../../integrations/resourceHosts'
 import { useMemo, useEffect, useCallback, useRef, useState, type ReactNode } from 'react'
 import { useQueries, useQueryClient } from '@tanstack/react-query'
 import { Navigate, useNavigate, useLocation, useSearchParams } from 'react-router-dom'
@@ -11,13 +7,11 @@ import { clsx } from 'clsx'
 import { Terminal, Stethoscope } from 'lucide-react'
 import {
   WorkloadView as BaseWorkloadView,
-  isApiGroup,
   EditableYamlView,
   FetchResult,
   Section,
   type WorkloadTabType,
   type WorkloadExtraTab,
-  type RendererOverrides,
   type GitOpsOwnerRef,
   type HelmOwnerRef,
   type AppRow,
@@ -104,7 +98,7 @@ import { WorkloadCostTab } from '../cost/WorkloadCostTab'
 import { isOpenCostWorkloadKind } from '../cost/kinds'
 import { isRadarFeatureUnsupported } from '../../api/radarFeatures'
 import { useTrafficAvailable } from '../../api/traffic'
-import { useResourceAudit, useResourceIssues, useResources, useTrace, fetchTraceWithProbes, fetchInClusterCapability, runInClusterMerged } from '../../api/client'
+import { useResourceAudit, useResourceIssues, useTrace, fetchTraceWithProbes, fetchInClusterCapability, runInClusterMerged } from '../../api/client'
 import { AuditAlerts, getRadarUpgradeRequirement, ResourceIssuesSection, ReachabilityView, TraceSummary, InClusterConsentDialog, traceFingerprint, staticPollUnreliable, summarizeInClusterTests, type Trace as NetworkTrace, type InClusterCapability, inClusterConsentGiven, consentRequestRows } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
 import { ScheduledWorkloadLogsViewer } from '../logs/ScheduledWorkloadLogsViewer'
@@ -128,38 +122,7 @@ import {
   defaultPathForPort,
 } from '../curl/ServiceCurlButton'
 import { useToast } from '../ui/Toast'
-import { Tooltip } from '../ui/Tooltip'
-import { PodRenderer } from '../resources/renderers/PodRenderer'
-import { KarpenterNodePoolRenderer } from '../resources/renderers/KarpenterNodePoolRenderer'
-import { NodeRenderer } from '../resources/renderers/NodeRenderer'
-import { ServiceRenderer } from '../resources/renderers/ServiceRenderer'
-import { WorkloadRenderer } from '../resources/renderers/WorkloadRenderer'
-import { CompositeRenderer } from '../resources/CompositeRenderer'
-import { ServiceAccountRenderer } from '../resources/renderers/ServiceAccountRenderer'
-import { RoleRenderer } from '../resources/renderers/RoleRenderer'
-import { RoleBindingRenderer } from '../resources/renderers/RoleBindingRenderer'
-import { NamespaceRenderer } from '../resources/renderers/NamespaceRenderer'
-import { CAPIClusterRenderer } from '../resources/renderers/CAPIClusterRenderer'
-import { HPARenderer } from '../resources/renderers/HPARenderer'
-import { PVCRenderer } from '../resources/renderers/PVCRenderer'
-import { RolloutRenderer } from '../resources/renderers/RolloutRenderer'
-import { KyvernoPolicyCoverage } from '../resources/renderers/KyvernoPolicyCoverage'
-import { KyvernoPolicyQueued } from '../resources/renderers/KyvernoPolicyQueued'
-import { CNPGObjectStoreRenderer } from '../resources/renderers/CNPGObjectStoreRenderer'
-import { VeleroBSLRenderer } from '../resources/renderers/VeleroBSLRenderer'
-import { VeleroBackupRenderer } from '../resources/renderers/VeleroBackupRenderer'
-import { VeleroRestoreRenderer } from '../resources/renderers/VeleroRestoreRenderer'
-import { CNPGClusterRenderer } from '../resources/renderers/CNPGClusterRenderer'
-import { CNPGImageCatalogRenderer } from '../resources/renderers/CNPGImageCatalogRenderer'
-import {
-  CNPGDatabaseRenderer,
-  CNPGPublicationRenderer,
-  CNPGSubscriptionRenderer,
-} from '../resources/renderers/CNPGDeclarativeRenderer'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
-import { renderCNPGSummary } from '../cnpg/CNPGSummaryHost'
-import { CNPGClusterLogs } from '../cnpg/CNPGClusterLogs'
-import { cnpgDetailKindFor, cnpgDetailPath } from '../cnpg/routes'
 import { cleanYamlForDuplicate } from '../../utils/skeleton-yaml'
 import { useDesktopDownload } from '../../hooks/useDesktopDownload'
 import { useCompareLauncher } from '../compare/useCompareLauncher'
@@ -186,41 +149,6 @@ export function supportsBatchExecution(kind: string, apiKind: string, group?: st
   return true
 }
 
-// Stable reference — web renderer wrappers inject platform hooks internally
-const rendererOverrides: RendererOverrides = {
-  RayJobRenderer,
-  JobRenderer,
-  JobSetRenderer,
-  RayServiceRenderer,
-  RayClusterRenderer,
-  KueueWorkloadRenderer,
-  CAPIClusterRenderer,
-  PodRenderer,
-  KarpenterNodePoolRenderer,
-  NodeRenderer,
-  ServiceRenderer,
-  WorkloadRenderer,
-  CompositeRenderer,
-  ServiceAccountRenderer,
-  RoleRenderer,
-  RoleBindingRenderer,
-  NamespaceRenderer,
-  HPARenderer,
-  PVCRenderer,
-  RolloutRenderer,
-  KyvernoPolicyCoverage,
-  KyvernoPolicyQueued,
-  CNPGObjectStoreRenderer,
-  VeleroBSLRenderer,
-  VeleroBackupRenderer,
-  VeleroRestoreRenderer,
-  CNPGClusterRenderer,
-  CNPGDatabaseRenderer,
-  CNPGPublicationRenderer,
-  CNPGSubscriptionRenderer,
-  CNPGImageCatalogRenderer,
-}
-
 // ============================================================================
 // ROUTE WRAPPER — parses kind/ns/name from URL
 // ============================================================================
@@ -289,16 +217,8 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
     )
   }
 
-  const cnpgPlural = cnpgDetailKindFor(kind, group)
-  if (cnpgPlural) {
-    const params = new URLSearchParams(searchParams)
-    params.delete('apiGroup')
-    const tab = params.get('tab')
-    if (cnpgPlural === 'clusters' && (tab === 'timeline' || tab === 'events')) params.set('tab', 'activity')
-    const base = cnpgDetailPath({ plural: cnpgPlural, namespace, name })
-    const qs = params.toString()
-    return <Navigate replace to={qs ? `${base}?${qs}` : base} state={location.state} />
-  }
+  const detailPath = resourceDetailRedirect({ kind, group, namespace, name }, searchParams)
+  if (detailPath) return <Navigate replace to={detailPath} state={location.state} />
 
   return (
     <WorkloadView
@@ -341,6 +261,16 @@ interface WorkloadViewProps {
   pushTabHistory?: boolean
   breadcrumb?: ReactNode
   extraTabs?: WorkloadExtraTab[]
+  tabOrder?: string[]
+  subheader?: ReactNode
+  specTab?: { label?: string; icon?: ReactNode; lead?: ReactNode; render?: () => ReactNode }
+  titlePrefix?: ReactNode
+  inlineBadges?: boolean
+  namespaceNote?: ReactNode
+  renderStatusBadge?: (resource: any) => ReactNode
+  statusNote?: ReactNode
+  onRefresh?: () => Promise<unknown>
+  hideKindBadge?: boolean
 }
 
 interface ImageTargetOwnershipContext {
@@ -463,7 +393,7 @@ function useActionsBarProps(
       name: string
       className?: string
     }) => <PortForwardButton type={type} namespace={ns} name={n} className={className} />,
-    renderDiagnose,
+    renderDiagnose: decorateResourceDiagnose(renderDiagnose),
     onDelete: (
       params: Parameters<typeof deleteMutation.mutate>[0],
       callbacks?: { onSuccess?: () => void },
@@ -471,7 +401,8 @@ function useActionsBarProps(
     isDeleting: deleteMutation.isPending,
     cascadeDependents: cascadePreview?.dependents,
     cascadeLoading,
-    cascadeRootResolved: cascadeError ? false : cascadePreview?.rootResolved,
+    cascadeRootResolved: cascadePreview?.rootResolved,
+    cascadePreviewFailed: Boolean(cascadeError),
     onRestart: rolloutAllows('restart')
       ? (params: Parameters<typeof restartWorkloadMutation.mutate>[0]) =>
           restartWorkloadMutation.mutate(params)
@@ -645,9 +576,11 @@ export function WorkloadView({
     () => (isDiagnoseKind(apiKind, effectiveGroup) ? [] : (relationships?.services ?? [])),
     [apiKind, effectiveGroup, relationships],
   )
+  const onRefresh = rest.onRefresh
   const refetchResourceAndRuns = useCallback(async () => {
     await Promise.all([
       refetchResource(),
+      onRefresh?.(),
       ...(apiKind === 'rayjobs' && effectiveGroup === 'ray.io' ? [
         queryClient.refetchQueries({ queryKey: ['resource', 'jobs', namespace, name, 'batch'], type: 'active' }),
         ...(resource?.spec?.clusterSelector?.['ray.io/cluster'] ? [queryClient.refetchQueries({ queryKey: ['resource', 'rayclusters', namespace, resource.spec.clusterSelector['ray.io/cluster'], 'ray.io'], type: 'active' })] : []),
@@ -661,7 +594,7 @@ export function WorkloadView({
         ...(apiKind === 'rayclusters' ? { type: 'active' as const } : {}),
       }),
     ])
-  }, [apiKind, effectiveGroup, name, namespace, queryClient, refetchResource, resource?.spec?.clusterSelector])
+  }, [apiKind, effectiveGroup, name, namespace, queryClient, refetchResource, resource?.spec?.clusterSelector, onRefresh])
   const podWorkloadOwner = useMemo(
     () => podWorkloadOwnerFromRelationships(apiKind, namespace, relationships, resource),
     [apiKind, namespace, relationships, resource],
@@ -1249,9 +1182,7 @@ export function WorkloadView({
             onSelectRun={handleSelectedRunChange}
           />
         )}
-        renderSummary={({ apiKind: ak, namespace: ns, name: n, resource: res, context, onNavigate }) =>
-          renderCNPGSummary({ apiKind: ak, namespace: ns, name: n, group: effectiveGroup, resource: res, context, onNavigate })
-        }
+        {...resourceDetailSlots({ kind: apiKind, group: resource?.apiVersion ? resourceGroup : effectiveGroup, namespace, name }, rest.extraTabs)}
         renderExpandedOverview={({ kind: k, apiKind, namespace: ns, name: n, resource: res }) =>
           supportsBatchExecution(k, apiKind, effectiveGroup, res?.apiVersion) &&
           res ? (
@@ -1316,7 +1247,7 @@ export function WorkloadView({
         onDuplicate={handleDuplicate}
         onDownload={desktopDownload}
         actionsBarProps={actionsBarProps}
-        rendererOverrides={rendererOverrides}
+        rendererOverrides={resourceRendererOverrides}
         renderOverviewExtra={({ kind: k, namespace: ns, name: n, group: g, context }) => {
           // Network entry kinds (Service/Ingress/Route/Gateway) ARE the diagnosis
           // target: DiagnoseInlineSection renders in the drawer, no hint. Workload
@@ -1334,7 +1265,6 @@ export function WorkloadView({
           <>
             {diagnoseInline}
             {diagnoseHint}
-            <FluxSourceConsumersSection kind={k} namespace={ns} name={n} />
             <AuditOverviewSection
               findings={auditFindings ?? []}
               onViewAll={() => navigateRouter('/checks')}
@@ -1345,6 +1275,7 @@ export function WorkloadView({
         renderOverviewLead={() => (
           <ResourceIssuesSection
             issues={liveIssues}
+            compact={!expanded}
             subjectResource={{ kind: apiKind, namespace, name, group: rest.group }}
             onResourceClick={
               rest.onNavigateToResource
@@ -1393,13 +1324,14 @@ export function WorkloadView({
   )
 }
 
-function collectServingRefs(relationships: Relationships | undefined): ResourceRef[] {
+export function collectServingRefs(relationships: Relationships | undefined): ResourceRef[] {
   if (!relationships) return []
   return dedupeResourceRefs([
     ...(relationships.services ?? []),
     ...(relationships.ingresses ?? []),
     ...(relationships.gateways ?? []),
     ...(relationships.routes ?? []),
+    ...(relationships.routedFrom ?? []),
   ])
 }
 
@@ -1539,9 +1471,8 @@ function LogsTabContent({
     )
   }
 
-  if (kind === 'Cluster' && isApiGroup(resource?.apiVersion, 'postgresql.cnpg.io')) {
-    return <CNPGClusterLogs namespace={namespace} name={name} />
-  }
+  const integrationLogs = resourceLogs({ kind, group, namespace, name }, resource)
+  if (integrationLogs) return integrationLogs
 
   // Workload kinds with stable pod selectors use the aggregated workload logs viewer
   if (WORKLOAD_LOG_KINDS.has(kind) && (kind !== 'Job' || isCoreBatchJob(apiKind, group))) {
@@ -2217,137 +2148,6 @@ function DiagnoseInlineSection({ kind, namespace, name, group, onOpenReachabilit
   )
 }
 
-// FluxSourceConsumersSection lists the reconcilers (Kustomization, HelmRelease)
-// that reference this Flux source CR — the inverse of `spec.sourceRef`. Renders
-// only when the focused resource is a Flux source kind; otherwise null. Sources
-// can have many consumers (one repo feeding multiple apps), so this answers
-// "if I edit this source, what gets affected on the next reconcile?".
-//
-// Filtering happens client-side off the namespaced reconciler lists — these
-// are typically small (tens, not thousands) and the dynamic informer cache
-// makes the request cheap. If a cluster ever has thousands of HelmReleases,
-// a dedicated /api/gitops/consumers endpoint would be the right move; today
-// it'd be premature.
-// Outer component is cheap — it does only the kind check and decides whether
-// to mount the data-fetching child. Without this split, useResources would
-// fire two API calls on EVERY workload drawer open (Pod, Deployment, Service,
-// …), since the hook has no `enabled` flag and can't be conditionally called
-// (Rules of Hooks). The hooks only need to run when the focused resource is
-// actually a Flux source CR.
-function FluxSourceConsumersSection({
-  kind,
-  namespace,
-  name,
-}: {
-  kind: string
-  namespace: string
-  name: string
-}) {
-  // The inner WorkloadView de-pluralizes the URL's plural form, which gives
-  // "Gitrepository" (single-uppercase) rather than the wire-correct
-  // "GitRepository" — so we match lowercase. spec.sourceRef.kind on consumers
-  // is always wire-correct, so we look that up separately.
-  const sourceKind = FLUX_SOURCE_KIND_BY_LOWER.get(kind.toLowerCase()) ?? null
-  if (!sourceKind) return null
-  return <FluxSourceConsumersInner sourceKind={sourceKind} namespace={namespace} name={name} />
-}
-
-function FluxSourceConsumersInner({
-  sourceKind,
-  namespace,
-  name,
-}: {
-  sourceKind: string
-  namespace: string
-  name: string
-}) {
-  const navigate = useNavigate()
-  const { data: kustomizations } = useResources<any>(
-    'kustomizations',
-    undefined,
-    'kustomize.toolkit.fluxcd.io',
-  )
-  const { data: helmReleases } = useResources<any>(
-    'helmreleases',
-    undefined,
-    'helm.toolkit.fluxcd.io',
-  )
-
-  const consumers: Array<{
-    kind: 'Kustomization' | 'HelmRelease'
-    namespace: string
-    name: string
-    plural: string
-  }> = []
-  for (const k of kustomizations ?? []) {
-    const ref = k?.spec?.sourceRef ?? {}
-    const refNs = ref.namespace || k?.metadata?.namespace
-    if (ref.kind === sourceKind && ref.name === name && refNs === namespace) {
-      consumers.push({
-        kind: 'Kustomization',
-        namespace: k.metadata.namespace,
-        name: k.metadata.name,
-        plural: 'kustomizations',
-      })
-    }
-  }
-  for (const h of helmReleases ?? []) {
-    const ref = h?.spec?.chart?.spec?.sourceRef ?? {}
-    const refNs = ref.namespace || h?.metadata?.namespace
-    if (ref.kind === sourceKind && ref.name === name && refNs === namespace) {
-      consumers.push({
-        kind: 'HelmRelease',
-        namespace: h.metadata.namespace,
-        name: h.metadata.name,
-        plural: 'helmreleases',
-      })
-    }
-  }
-
-  if (consumers.length === 0) {
-    return (
-      <section className="rounded-lg border border-theme-border bg-theme-surface p-4 shadow-theme-sm">
-        <h3 className="mb-2 text-sm font-semibold text-theme-text-primary">Consumed by</h3>
-        <p className="text-xs text-theme-text-tertiary">
-          No Kustomization or HelmRelease references this source.
-        </p>
-      </section>
-    )
-  }
-
-  return (
-    <section className="rounded-lg border border-theme-border bg-theme-surface p-4 shadow-theme-sm">
-      <h3 className="mb-3 text-sm font-semibold text-theme-text-primary">
-        Consumed by ({consumers.length})
-      </h3>
-      <div className="flex flex-wrap gap-1.5">
-        {consumers.map((c) => (
-          <Tooltip
-            key={`${c.kind}/${c.namespace}/${c.name}`}
-            content={`${c.kind} ${c.namespace}/${c.name}`}
-          >
-            <button
-              onClick={() =>
-                navigate(
-                  `/gitops/detail/${c.plural}/${encodeURIComponent(c.namespace)}/${encodeURIComponent(c.name)}`,
-                )
-              }
-              className="inline-flex items-center gap-1.5 rounded border border-theme-border bg-theme-surface px-1.5 py-0.5 text-[11px] text-theme-text-secondary hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors"
-            >
-              <span className="text-theme-text-tertiary">
-                {c.kind === 'HelmRelease' ? 'HR' : 'K'}
-              </span>
-              <span>
-                {c.namespace}/{c.name}
-              </span>
-            </button>
-          </Tooltip>
-        ))}
-      </div>
-    </section>
-  )
-}
-
 // Drawer mode: single chart + category tabs (compact for ~500px width).
 // Full-screen mode: multi-chart grid so CPU + Memory + Network can be
 // compared side-by-side without tab switching.
@@ -2422,18 +2222,6 @@ function DrawerMetricsContent({
   )
 }
 
-// FLUX_SOURCE_KIND_BY_LOWER maps lowercase kind (what the inner WorkloadView
-// produces via its plural-to-singular fallback) to the wire-correct
-// PascalCase form that consumers carry in spec.sourceRef.kind. HelmChart is
-// intentionally absent — it's an auto-generated internal CR, not something
-// users create or point reconcilers at directly.
-const FLUX_SOURCE_KIND_BY_LOWER = new Map<string, string>([
-  ['gitrepository', 'GitRepository'],
-  ['helmrepository', 'HelmRepository'],
-  ['ocirepository', 'OCIRepository'],
-  ['bucket', 'Bucket'],
-])
-
 // Read-only manifest view for an object in the workload's neighborhood (the
 // YAML tab's object rail). Read-only by design — editing an arbitrary related
 // object belongs on that resource's own page.

package/src/components/workspace/layout.test.tsx

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { Mono } from './layout'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+it('uses normal word boundaries with overflow wrapping and keeps the complete value in a hover tooltip', () => {
+  vi.useFakeTimers()
+  const host = document.createElement('div')
+  document.body.append(host)
+  const root = createRoot(host)
+  const image = 'ghcr.io/cloudnative-pg/postgresql:17.4-standard-bookworm'
+  act(() => root.render(<Mono>{image}</Mono>))
+  const mono = host.querySelector('.font-mono')!
+  expect(mono.classList.contains('break-all')).toBe(false)
+  expect(mono.classList.contains('break-normal')).toBe(true)
+  expect(mono.textContent).toBe(image)
+  expect(mono.classList.contains('[overflow-wrap:anywhere]')).toBe(true)
+  const trigger = mono.parentElement!
+  act(() => trigger.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true })))
+  act(() => trigger.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })))
+  act(() => vi.advanceTimersByTime(500))
+  expect(document.body.querySelector('.fixed')?.textContent).toBe(image)
+  act(() => root.unmount())
+  host.remove()
+  vi.useRealTimers()
+})