+
+ {row.resource}
+
+
+
+ {row.currentRequest ?? unset}
+
+
+ {showRec && (
+ <>
+
+
+ {row.recommendedRequest}
+
+ >
+ )}
+
+ {row.p95 && (
+
+ (P95 {row.p95})
+
+ )}
+
+ {row.tone !== 'ok' && Icon && (
+
+
+ {row.message}
+
+ )}
+
+ {row.tone === 'ok' && row.message && (
+
{row.message}
+ )}
+
+ )
+}
+
+function toneClasses(tone: RightsizingTone): { value: string; badge: string } {
+ switch (tone) {
+ case 'critical':
+ return { value: 'text-red-400', badge: 'text-red-400 bg-red-500/10' }
+ case 'alert':
+ return { value: 'text-orange-400', badge: 'text-orange-400 bg-orange-500/10' }
+ case 'warning':
+ return { value: 'text-amber-400', badge: 'text-amber-400 bg-amber-500/10' }
+ case 'info':
+ // Muted on purpose — "could reduce" is a suggestion, not a problem.
+ return { value: 'text-blue-300', badge: 'text-theme-text-tertiary bg-theme-elevated/60' }
+ case 'ok':
+ default:
+ return { value: 'text-theme-text-secondary', badge: '' }
+ }
+}
+
+function toneIcon(tone: RightsizingTone) {
+ switch (tone) {
+ case 'critical':
+ case 'alert':
+ case 'warning':
+ return AlertTriangle
+ case 'info':
+ return Info
+ case 'ok':
+ return Check
+ default:
+ return null
+ }
+}
diff --git a/web/src/components/resources/renderers/HPARenderer.tsx b/web/src/components/resources/renderers/HPARenderer.tsx
index ac6e58db4..8952efbdd 100644
--- a/web/src/components/resources/renderers/HPARenderer.tsx
+++ b/web/src/components/resources/renderers/HPARenderer.tsx
@@ -1 +1,17 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/HPARenderer'
+import { HPARenderer as BaseHPARenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/HPARenderer'
+import { HPACharts } from '../../resource/HPACharts'
+
+interface HPARendererProps {
+ data: any
+ onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function HPARenderer({ data, onNavigate }: HPARendererProps) {
+ return (
+