@skyhook-io/radar-app 1.8.7 → 1.8.9

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')
+  })
+})