@skyhook-io/radar-app 1.8.7 → 1.8.8

package/src/components/gitops/GitOpsView.tsx

@@ -19,6 +19,7 @@ import {
   formatGitOpsSourceUrl,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  isArgoOperationInProgress,
   isArgoSuspendedByRadar,
   gitOpsInsightChangeKey,
   initNavigationMap,
@@ -46,8 +47,10 @@ import { useToast } from '../ui/Toast'
 
 import {
   fetchJSON,
+  buildArgoResourceSyncVars,
   useApplyResource,
   useArgoRefresh,
+  useArgoResourceValidation,
   useArgoResume,
   useArgoRollback,
   useArgoSuspend,
@@ -66,6 +69,8 @@ import { useConnection } from '../../context/ConnectionContext'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 import { CodeViewer } from '../ui/CodeViewer'
+import { ArgoResourceDiffLoader } from './ArgoResourceDiffLoader'
+import { RevisionMetaChip } from './RevisionMetaChip'
 import type { GitOpsHistoryItem } from '@skyhook-io/k8s-ui'
 
 const GITOPS_KINDS: APIResource[] = [
@@ -80,6 +85,10 @@ const GITOPS_KINDS: APIResource[] = [
   { name: 'alerts', kind: 'Alert', group: 'notification.toolkit.fluxcd.io', version: 'v1beta3', namespaced: true, verbs: ['list', 'get'], isCrd: true },
 ]
 
+type ArgoSyncDialogTarget =
+  | { scope: 'application' }
+  | { scope: 'resource'; resource: GitOpsInsightRef }
+
 const KIND_BY_NAME = new Map(GITOPS_KINDS.map((k) => [k.name, k]))
 
 // Rows are the table's primary content; their poll cadence is what the toolbar
@@ -97,12 +106,15 @@ interface GitOpsViewProps {
   namespaces: string[]
   onOpenResource: (resource: SelectedResource) => void
   onClearNamespaces?: () => void
+  // Opens the global Settings dialog — backs the "Connect Argo CD" hint on the
+  // Changes tab of an Argo Application detail page.
+  onOpenSettings?: () => void
 }
 
-export function GitOpsView({ namespaces, onOpenResource, onClearNamespaces }: GitOpsViewProps) {
+export function GitOpsView({ namespaces, onOpenResource, onClearNamespaces, onOpenSettings }: GitOpsViewProps) {
   const location = useLocation()
   if (location.pathname.startsWith('/gitops/detail/')) {
-    return <GitOpsDetailView namespaces={namespaces} onOpenResource={onOpenResource} />
+    return <GitOpsDetailView namespaces={namespaces} onOpenResource={onOpenResource} onOpenSettings={onOpenSettings} />
   }
   return <GitOpsTableView namespaces={namespaces} onClearNamespaces={onClearNamespaces} />
 }
@@ -329,7 +341,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
   )
 }
 
-function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
+function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOpsViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
   const { showError, showSuccess } = useToast()
@@ -403,6 +415,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   const [helmValuesOpen, setHelmValuesOpen] = useState(false)
 
   const argoSync = useArgoSync()
+  const argoResourceValidation = useArgoResourceValidation()
   const argoRefresh = useArgoRefresh()
   const argoTerminate = useArgoTerminate()
   const argoSuspend = useArgoSuspend()
@@ -414,13 +427,23 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   const fluxSuspend = useFluxSuspend()
   const fluxResume = useFluxResume()
 
-  const [syncDialogOpen, setSyncDialogOpen] = useState(false)
+  const [syncDialogTarget, setSyncDialogTarget] = useState<ArgoSyncDialogTarget | null>(null)
   // Doubles as the "open" flag (truthy = dialog open) and the data carrier
   // for which history entry to roll back to.
   const [rollbackTarget, setRollbackTarget] = useState<GitOpsHistoryItem | null>(null)
   // Disambiguates which refresh button is in flight (both share argoRefresh).
   const [refreshKind, setRefreshKind] = useState<'normal' | 'hard'>('normal')
 
+  function openArgoSyncDialog(target: ArgoSyncDialogTarget) {
+    argoResourceValidation.reset()
+    setSyncDialogTarget(target)
+  }
+
+  function closeArgoSyncDialog() {
+    argoResourceValidation.reset()
+    setSyncDialogTarget(null)
+  }
+
   const detailRow = resourceQ.data ? normalizeDetailResource(kind, group, resourceQ.data) : null
   const tree = treeQ.data ?? null
   const helmValues = useMemo(() => extractHelmValues(kind, resourceQ.data), [kind, resourceQ.data])
@@ -436,6 +459,13 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   function openResourceFromTree(ref: GitOpsTreeRef | GitOpsInsightRef) {
     if (isGitOpsDetailRef(ref) && isValidKubernetesName(ref.name)) {
       const detailKind = kindToPlural(ref.kind)
+      // The tree's root node is this page's own subject — clicking it must not
+      // open a nested copy of the same detail page (which stacks an identical
+      // "GitOps / X / X" breadcrumb, and again, ad infinitum). A self-reference
+      // is a no-op; the header already represents this resource.
+      if (detailKind === kind && (ref.namespace || '') === (namespace || '') && ref.name === name) {
+        return
+      }
       const params = new URLSearchParams()
       if (ref.group) params.set('apiGroup', ref.group)
       // Lineage breadcrumb support: when the user opens a child GitOps CR
@@ -457,13 +487,14 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   }
 
   const isRunning = resourceQ.data?.status?.operationState?.phase === 'Running'
+  const operationInProgress = isArgoOperationInProgress(resourceQ.data)
   const isFluxWorkload = kind === 'kustomizations' || kind === 'helmreleases'
   const isFlux = tool === 'flux'
   const isArgoApp = kind === 'applications'
 
   // Detail-page shortcuts. Skip when a modal is already open so a stray "s"
   // in an input field doesn't pop another sync dialog.
-  const shortcutsEnabled = !syncDialogOpen && !rollbackTarget
+  const shortcutsEnabled = !syncDialogTarget && !rollbackTarget
   useRegisterShortcut({
     id: 'gitops-detail-sync',
     keys: 's',
@@ -471,11 +502,11 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
     category: 'GitOps',
     scope: 'gitops',
     handler: () => {
-      if (effectiveSuspended || terminating) return
-      if (isArgoApp) setSyncDialogOpen(true)
+      if (effectiveSuspended || terminating || operationInProgress) return
+      if (isArgoApp) openArgoSyncDialog({ scope: 'application' })
       else if (isFlux) fluxReconcile.mutate({ kind, namespace, name })
     },
-    enabled: shortcutsEnabled && (isArgoApp || isFlux) && !effectiveSuspended && !terminating,
+    enabled: shortcutsEnabled && (isArgoApp || isFlux) && !effectiveSuspended && !terminating && !(isArgoApp && operationInProgress),
   })
   useRegisterShortcut({
     id: 'gitops-detail-refresh',
@@ -529,7 +560,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   }
 
   const argoHandlers: ArgoActionHandlers | undefined = isArgoApp ? {
-    onSyncRequested: () => setSyncDialogOpen(true),
+    onSyncRequested: () => openArgoSyncDialog({ scope: 'application' }),
     onRefresh: (refreshType) => {
       setRefreshKind(refreshType)
       argoRefresh.mutate({ namespace, name, hard: refreshType === 'hard' })
@@ -545,6 +576,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
     resuming: argoResume.isPending,
     autoSyncEnabled: argoAutoSyncEnabled,
     isRunning,
+    operationInProgress,
   } : undefined
 
   const fluxHandlers: FluxActionHandlers | undefined = isFlux ? {
@@ -576,6 +608,13 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
       detail={detail}
       insight={insightsQ.data ?? null}
       insightLoading={insightsQ.isLoading}
+      renderRevisionMeta={
+        isArgoApp && insightsQ.data?.capabilities?.revisionMetadataAvailable
+          ? (revision) => (
+              <RevisionMetaChip appNamespace={namespace} appName={name} revision={revision} />
+            )
+          : undefined
+      }
       onSelectIssue={(issue) => {
         const ref = issue.refs?.[0]
         if (!ref) return
@@ -679,7 +718,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
             <GitOpsActivityInsightView
               insight={insightsQ.data}
               error={insightsQ.error as Error | null}
-              onRollback={isArgoApp ? (item) => {
+              onRollback={isArgoApp && !operationInProgress ? (item) => {
                 if (parseArgoRollbackID(item.id) == null) return
                 setRollbackTarget(item)
               } : undefined}
@@ -692,8 +731,22 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
               insight={insightsQ.data}
               error={insightsQ.error as Error | null}
               onOpenResource={openResourceFromTree}
+              onSyncResource={isArgoApp ? (resource) => openArgoSyncDialog({ scope: 'resource', resource }) : undefined}
+              syncResourceDisabledReason={isArgoApp ? (
+                terminating
+                  ? terminatingActionTooltip
+                  : effectiveSuspended
+                    ? 'Resume the Application before syncing a resource.'
+                    : operationInProgress || argoSync.isPending
+                      ? 'Wait for the current sync operation to finish.'
+                      : undefined
+              ) : undefined}
               focusKey={changesFocusKey}
               tree={tree}
+              renderResourceDiff={isArgoApp ? (ref) => (
+                <ArgoResourceDiffLoader appNamespace={namespace} appName={name} resourceRef={ref} />
+              ) : undefined}
+              onOpenSettings={onOpenSettings}
             />
           )
         }
@@ -739,13 +792,27 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
       {isArgoApp && (
         <>
           <SyncOptionsDialog
-            open={syncDialogOpen}
+            open={!!syncDialogTarget}
             appLabel={`${namespace}/${name}`}
+            resource={syncDialogTarget?.scope === 'resource' ? syncDialogTarget.resource : undefined}
             pending={argoSync.isPending}
-            onCancel={() => setSyncDialogOpen(false)}
+            autoSyncEnabled={argoAutoSyncEnabled}
+            validationPending={argoResourceValidation.isPending}
+            operationInProgress={operationInProgress}
+            validationResult={argoResourceValidation.data}
+            validationError={argoResourceValidation.error?.message}
+            onCancel={closeArgoSyncDialog}
+            onValidationReset={() => argoResourceValidation.reset()}
+            onValidate={syncDialogTarget?.scope === 'resource' ? (opts) => {
+              argoResourceValidation.mutate(buildArgoResourceSyncVars(namespace, name, syncDialogTarget.resource, opts))
+            } : undefined}
             onConfirm={(opts) => {
-              argoSync.mutate({ namespace, name, ...opts }, {
-                onSettled: () => setSyncDialogOpen(false),
+              if (!syncDialogTarget) return
+              const variables = syncDialogTarget.scope === 'resource'
+                ? buildArgoResourceSyncVars(namespace, name, syncDialogTarget.resource, opts)
+                : { namespace, name, ...opts }
+              argoSync.mutate(variables, {
+                onSettled: closeArgoSyncDialog,
               })
             }}
           />

package/src/components/gitops/RevisionMetaChip.tsx

@@ -0,0 +1,63 @@
+import { ShieldCheck, ShieldAlert } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { useArgoRevisionMetadata } from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
+
+// Argo returns the author as "Name <email>"; show just the name.
+function authorName(author?: string): string {
+  if (!author) return ''
+  const lt = author.indexOf('<')
+  return (lt >= 0 ? author.slice(0, lt) : author).trim()
+}
+
+// signatureInfo is a raw GPG verification line. "Good signature" → verified;
+// any other non-empty value → a check ran but didn't verify; empty → unsigned.
+function signatureState(sig?: string): 'good' | 'bad' | null {
+  if (!sig) return null
+  return /good signature/i.test(sig) ? 'good' : 'bad'
+}
+
+// RevisionMetaChip hydrates the Argo status-strip revision with Git commit
+// detail (author, subject, signature) fetched from the Argo CD API. Renders
+// nothing until data arrives, so the bare SHA is never blocked; the whole thing
+// is gated by the host on capabilities.revisionMetadataAvailable.
+export function RevisionMetaChip({
+  appNamespace,
+  appName,
+  revision,
+}: {
+  appNamespace: string
+  appName: string
+  revision: string
+}): ReactNode {
+  // The host only renders this chip when revision metadata is available, so no
+  // extra enabled gate is needed — the hook's own appName/revision guard suffices.
+  const { data } = useArgoRevisionMetadata(appNamespace, appName, revision)
+  if (!data) return null
+
+  const author = authorName(data.author)
+  const sig = signatureState(data.signatureInfo)
+  const subject = data.message?.split('\n')[0]?.trim()
+  if (!author && !sig && !subject) return null
+
+  return (
+    <>
+      {author && <span className="shrink-0 text-theme-text-secondary">· {author}</span>}
+      {subject && (
+        <Tooltip content={data.message ?? subject} delay={300} wrapperClassName="min-w-0">
+          <span className="max-w-[32ch] truncate text-theme-text-tertiary">“{subject}”</span>
+        </Tooltip>
+      )}
+      {sig === 'good' && (
+        <Tooltip content={data.signatureInfo ?? 'Signed commit'} delay={300} wrapperClassName="inline-flex shrink-0">
+          <ShieldCheck className="h-3 w-3 text-green-600 dark:text-green-400/80" />
+        </Tooltip>
+      )}
+      {sig === 'bad' && (
+        <Tooltip content={data.signatureInfo ?? 'Signature not verified'} delay={300} wrapperClassName="inline-flex shrink-0">
+          <ShieldAlert className="h-3 w-3 text-amber-600 dark:text-amber-400/80" />
+        </Tooltip>
+      )}
+    </>
+  )
+}

package/src/components/helm/HelmCompareRoute.tsx

@@ -17,7 +17,7 @@ import {
   Package,
   Settings,
 } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, DiffLine, hasDiffBodyChange } from '@skyhook-io/k8s-ui'
 import {
   useCloudRole,
   useHelmHooksDiff,
@@ -30,7 +30,6 @@ import {
 import type { HelmHook, HelmRevision, HooksDiff, ResourceDiff } from '../../types'
 import { getHelmStatusColor, getKindBadgeColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { formatDate } from './helm-utils'
-import { DiffLine, hasDiffBodyChange } from './ManifestDiffViewer'
 import { RoleGatedPanel } from './RoleGatedPanel'
 import { Tooltip } from '../ui/Tooltip'
 

package/src/components/helm/ManifestDiffViewer.tsx

@@ -1,6 +1,5 @@
 import { X, GitCompare } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
-import { clsx } from 'clsx'
+import { PaneLoader, DiffLine, hasDiffBodyChange } from '@skyhook-io/k8s-ui'
 
 interface ManifestDiffViewerProps {
   diff: string
@@ -68,32 +67,3 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
     </div>
   )
 }
-
-export function hasDiffBodyChange(diff: string): boolean {
-  return diff.split('\n').some((line) => {
-    if (!line || line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')) {
-      return false
-    }
-    return line.startsWith('+') || line.startsWith('-')
-  })
-}
-
-export function DiffLine({ line }: { line: string }) {
-  const isAddition = line.startsWith('+') && !line.startsWith('+++')
-  const isRemoval = line.startsWith('-') && !line.startsWith('---')
-  const isHeader = line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')
-
-  return (
-    <div
-      className={clsx(
-        'whitespace-pre',
-        isAddition && 'bg-green-500/10 text-green-700 dark:text-green-400',
-        isRemoval && 'bg-red-500/10 text-red-700 dark:text-red-400',
-        isHeader && 'text-theme-text-tertiary font-bold',
-        !isAddition && !isRemoval && !isHeader && 'text-theme-text-secondary'
-      )}
-    >
-      {line || ' '}
-    </div>
-  )
-}

package/src/components/helm/ValuesDiffPreview.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { X, Play, Loader2, FileText, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
+import { classifyDiffLine } from '@skyhook-io/k8s-ui'
 import type { ValuesPreviewResponse } from '../../types'
 
 interface ValuesDiffPreviewProps {
@@ -169,9 +170,7 @@ interface DiffLineProps {
 }
 
 function DiffLine({ line, lineNumber }: DiffLineProps) {
-  const isAddition = line.startsWith('+') && !line.startsWith('+++')
-  const isDeletion = line.startsWith('-') && !line.startsWith('---')
-  const isHeader = line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++')
+  const { isAddition, isRemoval: isDeletion, isHeader } = classifyDiffLine(line)
 
   return (
     <div

package/src/components/home/CostCard.tsx

@@ -1,6 +1,12 @@
 import type { OpenCostSummary } from '../../api/client'
 import { useOpenCostSummary } from '../../api/client'
 import { DollarSign } from 'lucide-react'
+import {
+  formatCostPerHour,
+  formatProjectedDailyRate,
+  formatProjectedMonthlyCost,
+  formatProjectedMonthlyRate,
+} from '../cost/format'
 
 export function CostCard({ onNavigate }: { onNavigate?: () => void }) {
   const { data } = useOpenCostSummary()
@@ -15,7 +21,6 @@ export function CostCard({ onNavigate }: { onNavigate?: () => void }) {
 
 function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNavigate?: () => void }) {
   const hourlyCost = data.totalHourlyCost ?? 0
-  const monthlyCost = hourlyCost * 730
   const namespaces = data.namespaces ?? []
   const topNamespaces = namespaces.slice(0, 5)
 
@@ -30,10 +35,10 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
       <div className="flex flex-col h-full w-full">
         <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
           <div className="flex items-center gap-2">
-            <DollarSign className="w-4 h-4 text-indigo-500" />
-            <span className="text-xs font-semibold uppercase tracking-wider text-indigo-500">Cost Insights</span>
+            <DollarSign className="w-4 h-4 text-accent-text" />
+            <span className="text-xs font-semibold uppercase tracking-wider text-accent-text">Cost Insights</span>
             {namespaces.length > 0 && (
-              <span className="badge-sm bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40">
+              <span className="badge-sm border border-theme-border bg-accent-muted text-accent-text">
                 {namespaces.length} ns
               </span>
             )}
@@ -45,13 +50,14 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
           <div className="flex items-baseline gap-3 mb-3">
             <div className="flex items-baseline gap-1">
               <span className="text-2xl font-bold text-theme-text-primary tabular-nums">
-                {formatCost(hourlyCost)}
+                {formatProjectedMonthlyCost(hourlyCost)}
               </span>
-              <span className="text-xs text-theme-text-tertiary">/hr</span>
+              <span className="text-xs text-theme-text-tertiary">/mo</span>
             </div>
-            <div className="flex items-baseline gap-1 text-theme-text-secondary">
-              <span className="text-sm font-medium tabular-nums">~{formatCost(monthlyCost)}</span>
-              <span className="text-[10px] text-theme-text-tertiary">/mo</span>
+            <div className="flex items-baseline gap-1.5 text-theme-text-secondary">
+              <span className="text-xs font-medium tabular-nums">{formatProjectedDailyRate(hourlyCost)}</span>
+              <span className="text-[10px] text-theme-text-quaternary">·</span>
+              <span className="text-xs font-medium tabular-nums">{formatCostPerHour(hourlyCost)}</span>
             </div>
           </div>
 
@@ -63,30 +69,25 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
                 <div key={ns.name} className="flex items-center gap-2">
                   <span className="text-[11px] text-theme-text-secondary truncate w-24 shrink-0">{ns.name}</span>
                   <div className="flex-1 h-2 rounded-full overflow-hidden bg-theme-hover">
-                    <div
-                      className="h-full rounded-full bg-indigo-500/60"
-                      style={{ width: `${Math.max(pct, 2)}%` }}
-                    />
+                    <div className="h-full rounded-full bg-indigo-500/60" style={{ width: `${Math.max(pct, 2)}%` }} />
                   </div>
-                  <span className="text-[10px] text-theme-text-tertiary tabular-nums w-14 text-right shrink-0">
-                    {formatCost(ns.hourlyCost)}/h
+                  <span className="text-[10px] text-theme-text-tertiary tabular-nums w-20 text-right shrink-0">
+                    {formatProjectedMonthlyRate(ns.hourlyCost)}
                   </span>
                 </div>
               )
             })}
             {namespaces.length > 5 && (
-              <span className="text-[10px] text-theme-text-tertiary">
-                +{namespaces.length - 5} more namespaces
-              </span>
+              <span className="text-[10px] text-theme-text-tertiary">+{namespaces.length - 5} more namespaces</span>
             )}
           </div>
         </div>
 
         <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-between">
           <span className="text-[10px] text-theme-text-tertiary">
-            {data.currency ?? 'USD'} &middot; {data.window ?? '1h'} window
+            {data.currency ?? 'USD'} &middot; projected monthly from {data.window ?? '1h'} window
           </span>
-          <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-indigo-500">
+          <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-accent-text">
             OpenCost
           </span>
         </div>
@@ -94,19 +95,3 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
     </div>
   )
 }
-
-function formatCost(value: number): string {
-  if (value >= 1000) {
-    return `$${(value / 1000).toFixed(1)}k`
-  }
-  if (value >= 1) {
-    return `$${value.toFixed(2)}`
-  }
-  if (value >= 0.01) {
-    return `$${value.toFixed(3)}`
-  }
-  if (value > 0) {
-    return `$${value.toFixed(4)}`
-  }
-  return '$0.00'
-}

package/src/components/resource/RightsizingStrip.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest'
+import type { RightsizingRow } from '../../api/client'
+import {
+  getRightsizingExplanation,
+  getRightsizingPresentation,
+  RIGHTSIZING_METHODOLOGY,
+  RIGHTSIZING_DOCS_URL,
+  RIGHTSIZING_SUMMARY,
+} from './RightsizingStrip'
+
+const row = (overrides: Partial<RightsizingRow> = {}): RightsizingRow => ({
+  container: 'server',
+  resource: 'cpu',
+  fit: 'balanced',
+  confidence: 'high',
+  sampleCount: 2016,
+  expectedSamples: 2016,
+  coverage: 1,
+  hpaManaged: false,
+  hpaEvidenceAvailable: true,
+  oomEvidenceAvailable: true,
+  throttleAvailable: true,
+  ...overrides,
+})
+
+describe('rightsizing presentation', () => {
+  it('keeps fit, confidence, and runtime risk as separate concepts', () => {
+    expect(getRightsizingPresentation('oversized')).toEqual({
+      label: 'Oversized',
+      severity: 'info',
+    })
+    expect(getRightsizingPresentation('under_requested')).toEqual({
+      label: 'Under-requested',
+      severity: 'warning',
+    })
+    expect(getRightsizingPresentation('insufficient_history')).toEqual({
+      label: 'Insufficient history',
+      severity: 'neutral',
+    })
+  })
+
+  it('labels query failures independently from insufficient history', () => {
+    expect(getRightsizingPresentation('insufficient_history', 'usage query failed')).toEqual({
+      label: 'Query failed',
+      severity: 'error',
+    })
+  })
+
+  it('explains why recommendations are withheld without inventing a zero-risk result', () => {
+    expect(getRightsizingExplanation(row({ recommendationReason: 'hpa_managed' }))).toContain(
+      'HPA manages cpu',
+    )
+    expect(
+      getRightsizingExplanation(row({ resource: 'memory', recommendationReason: 'oom_evidence' })),
+    ).toContain('OOM evidence')
+    expect(
+      getRightsizingExplanation(row({ recommendationReason: 'hpa_evidence_unavailable' })),
+    ).toContain('could not verify HPA')
+    expect(
+      getRightsizingExplanation(
+        row({
+          resource: 'memory',
+          recommendationReason: 'oom_evidence_unavailable',
+        }),
+      ),
+    ).toContain('could not verify recent OOM')
+    expect(getRightsizingExplanation(row({ throttleAvailable: false }))).toContain(
+      'throttling metrics are unavailable',
+    )
+  })
+
+  it('separates the demand target from a conservative reduction step', () => {
+    const explanation = getRightsizingExplanation(
+      row({
+        fit: 'oversized',
+        currentRequest: '1',
+        recommendedRequest: '500m',
+        calculatedRequest: '10m',
+        reductionLimited: true,
+        bursty: true,
+        peak: { name: 'P99', value: 0.2, formatted: '200m' },
+      }),
+    )
+    expect(explanation).toContain('Demand-based target: 10m')
+    expect(explanation).toContain('conservative next step')
+    expect(explanation).toContain('CPU P99 reached 200m')
+  })
+
+  it('does not revive the misleading efficiency vocabulary', () => {
+    const copy = [
+      getRightsizingPresentation('balanced').label,
+      getRightsizingPresentation('oversized').label,
+      getRightsizingExplanation(row({ recommendationReason: 'request_within_fit_range' })),
+    ]
+      .join(' ')
+      .toLowerCase()
+    expect(copy).not.toContain('efficien')
+    expect(copy).not.toContain('waste')
+  })
+
+  it('sets the workload-level scope and methodology without promising savings or changes', () => {
+    expect(RIGHTSIZING_SUMMARY).toContain('this workload')
+    expect(RIGHTSIZING_SUMMARY).toContain('not a savings estimate or automatic change')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('CPU P95 and memory maximum')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('Reductions are staged')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('Radar does not change requests')
+    expect(RIGHTSIZING_DOCS_URL).toContain('/features/rightsizing')
+  })
+})