@skyhook-io/radar-app 1.8.6 → 1.8.8

package/src/components/resource/RightsizingStrip.tsx

@@ -1,170 +1,363 @@
-import { ArrowRight, Check, Info, AlertTriangle } from 'lucide-react'
-import { SEVERITY_TEXT, SEVERITY_BADGE, type Severity } from '@skyhook-io/k8s-ui/utils/badge-colors'
-import { usePrometheusRightsizing, usePrometheusStatus, type RightsizingTone, type RightsizingRow } from '../../api/client'
+import { ArrowRight, ExternalLink, Gauge, HelpCircle, Loader2 } from 'lucide-react'
+import { Link, useLocation } from 'react-router-dom'
+import { Badge } from '@skyhook-io/k8s-ui/components/ui/Badge'
+import {
+  usePrometheusRightsizing,
+  usePrometheusStatus,
+  useAutoPromConnect,
+  type PrometheusRightsizing,
+  type RightsizingFit,
+  type RightsizingRow,
+} from '../../api/client'
 import { Tooltip } from '../ui/Tooltip'
 
 const RIGHTSIZING_KINDS = new Set(['Deployment', 'StatefulSet', 'DaemonSet'])
+export const RIGHTSIZING_DOCS_URL = 'https://radarhq.io/docs/features/rightsizing'
+export const RIGHTSIZING_SUMMARY =
+  'Evidence-based guidance for this workload, not a savings estimate or automatic change.'
+export const RIGHTSIZING_METHODOLOGY =
+  'Uses seven days of 5-minute samples: CPU P95 and memory maximum, plus 15% headroom. Reductions are staged and rounded to practical values; memory reductions also require verifiable restart history. Radar does not change requests.'
 
-/**
- * RightsizingStrip — compact "current → recommended" table per container.
- *
- * Tone policy is deliberately mild:
- *  - "Well-sized" or "Nx headroom" → neutral, no badge
- *  - 5×+ over-provisioning → info ("could reduce"), not a problem
- *  - P95 exceeds request but within limit → warning
- *  - P95 exceeds CPU limit → alert (throttling)
- *  - Memory P95 near limit → critical (active OOM risk)
- *
- * Anything below severe over-provisioning displays without flagging it as
- * an issue. 2-3× headroom is the common, sensible default and should not nag.
- */
-export function RightsizingStrip({ kind, namespace, name }: {
+interface RightsizingProps {
   kind: string
   namespace: string
   name: string
-}) {
-  const { data: status } = usePrometheusStatus()
-  const isConnected = status?.connected === true
+}
+
+function useRightsizingEvidence({ kind, namespace, name }: RightsizingProps) {
+  useAutoPromConnect()
+  const { data: status, isLoading: statusLoading } = usePrometheusStatus()
+  const connected = status?.connected === true
   const supported = RIGHTSIZING_KINDS.has(kind)
-  const { data, error, isLoading } = usePrometheusRightsizing(kind, namespace, name, isConnected && supported)
-
-  if (!supported || !isConnected || isLoading) return null
-  // Stay consistent with WorkloadHealthBadge — when the rightsizing query
-  // fails, surface a small inline note so the absence of recommendations
-  // doesn't read as "everything is fine."
-  if (error && !data) {
-    const msg = error instanceof Error ? error.message : String(error)
-    return (
-      <section className="rounded-lg border border-theme-border bg-theme-surface/40 p-3 mb-3">
-        <header className="flex items-center justify-between mb-1">
-          <h3 className="text-sm font-medium text-theme-text-primary">Right-sizing</h3>
-        </header>
-        <Tooltip content={msg}>
-        <p className="text-xs text-theme-text-tertiary">Right-sizing unavailable — Prometheus query failed.</p>
-        </Tooltip>
-      </section>
-    )
+  const query = usePrometheusRightsizing(kind, namespace, name, connected && supported)
+  return { connected, supported, statusLoading, ...query }
+}
+
+export function RightsizingPanel(props: RightsizingProps) {
+  const state = useRightsizingEvidence(props)
+  const { search } = useLocation()
+  if (!state.supported) return null
+
+  return (
+    <section className="mx-auto w-full max-w-[1600px] rounded-lg border border-theme-border bg-theme-surface/50">
+      <header className="flex flex-wrap items-start justify-between gap-3 border-b border-theme-border px-4 py-3">
+        <div className="flex items-start gap-2">
+          <Gauge className="mt-0.5 h-4 w-4 text-theme-text-tertiary" />
+          <div>
+            <div className="flex items-center gap-1.5">
+              <h3 className="text-sm font-semibold text-theme-text-primary">Rightsizing</h3>
+              <Tooltip content={RIGHTSIZING_METHODOLOGY}>
+                <HelpCircle className="h-3.5 w-3.5 text-theme-text-tertiary" />
+              </Tooltip>
+            </div>
+            <p className="text-xs text-theme-text-tertiary">
+              {RIGHTSIZING_SUMMARY}{' '}
+              <a
+                href={RIGHTSIZING_DOCS_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-accent-text hover:underline"
+              >
+                How it works
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {state.data && <RightsizingContext data={state.data} />}
+          <Link
+            to={{ pathname: '/cost/rightsizing', search }}
+            className="text-xs font-medium text-accent-text hover:underline"
+          >
+            Scan visible workloads
+          </Link>
+        </div>
+      </header>
+      <div className="p-4">
+        <RightsizingBody state={state} compact={false} />
+      </div>
+    </section>
+  )
+}
+
+export function RightsizingStrip(props: RightsizingProps) {
+  const state = useRightsizingEvidence(props)
+  if (!state.supported || !state.connected || (state.isLoading && !state.data)) return null
+  return (
+    <section className="mb-3 rounded-lg border border-theme-border bg-theme-surface/40 p-3">
+      <header className="mb-2 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-1.5">
+          <h3 className="text-sm font-medium text-theme-text-primary">Rightsizing</h3>
+          <Tooltip content={RIGHTSIZING_METHODOLOGY}>
+            <HelpCircle className="h-3.5 w-3.5 text-theme-text-tertiary" />
+          </Tooltip>
+        </div>
+        {state.data && <RightsizingContext data={state.data} compact />}
+      </header>
+      <RightsizingBody state={state} compact />
+    </section>
+  )
+}
+
+function RightsizingBody({
+  state,
+  compact,
+}: {
+  state: ReturnType<typeof useRightsizingEvidence>
+  compact: boolean
+}) {
+  if (state.statusLoading) {
+    return <EmptyState text="Checking Prometheus connection…" loading />
   }
-  if (!data) return null
-  if (!data.sampleAvailable || data.rows.length === 0) {
-    // Backend distinguishes "workload too new / retention short" from "Prometheus
-    // query failed" — show the reason inline so operators have an actionable signal
-    // instead of an empty section.
-    if (!data.reason) return null
-    return (
-      <section className="rounded-lg border border-theme-border bg-theme-surface/40 p-3 mb-3">
-        <header className="flex items-center justify-between mb-1">
-          <h3 className="text-sm font-medium text-theme-text-primary">Right-sizing</h3>
-        </header>
-        <p className="text-xs text-theme-text-tertiary">{data.reason}</p>
-      </section>
-    )
+  if (!state.connected) {
+    return <EmptyState text="Connect Prometheus to compare requests with observed demand." />
+  }
+  if (state.isLoading && !state.data) {
+    return <EmptyState text="Analyzing seven days of workload demand…" loading />
+  }
+  if (state.error && !state.data) {
+    const message = state.error instanceof Error ? state.error.message : String(state.error)
+    return <EmptyState text={`Rightsizing unavailable — ${message}`} />
+  }
+  if (!state.data) return null
+  if (!state.data.sampleAvailable || state.data.rows.length === 0) {
+    return <EmptyState text={state.data.reason ?? 'No rightsizing evidence is available.'} />
   }
 
-  // Group rows by container so each container is a compact two-row block (cpu+mem).
   const byContainer = new Map<string, RightsizingRow[]>()
-  for (const row of data.rows) {
-    if (!byContainer.has(row.container)) byContainer.set(row.container, [])
-    byContainer.get(row.container)!.push(row)
+  for (const row of state.data.rows) {
+    const rows = byContainer.get(row.container) ?? []
+    rows.push(row)
+    byContainer.set(row.container, rows)
   }
 
-  return (
-    <section className="rounded-lg border border-theme-border bg-theme-surface/40 p-3 mb-3">
-      <header className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-medium text-theme-text-primary">Right-sizing</h3>
-        <span className="text-[11px] text-theme-text-tertiary">
-          based on last {data.window} · P95
-        </span>
-      </header>
-      <div className="space-y-1.5">
+  if (compact) {
+    return (
+      <div className="space-y-2">
         {Array.from(byContainer.entries()).map(([container, rows]) => (
-          <div key={container} className="text-xs">
-            <div className="text-theme-text-secondary font-medium mb-0.5">{container}</div>
-            <div className="space-y-0.5 pl-2">
-              {rows.map(row => (
-                <RightsizingLine key={row.resource} row={row} />
+          <div key={container}>
+            <div className="mb-1 text-xs font-medium text-theme-text-secondary">{container}</div>
+            <div className="space-y-1 pl-2">
+              {rows.map((row) => (
+                <CompactFitRow key={row.resource} row={row} />
               ))}
             </div>
           </div>
         ))}
       </div>
-    </section>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {(state.data.scaledToZero || state.data.ownerCoverage === 'current_pods') && (
+        <div className="flex flex-wrap gap-2">
+          {state.data.scaledToZero && (
+            <Badge severity="neutral" size="sm">
+              No current replicas · showing retained evidence
+            </Badge>
+          )}
+          {state.data.ownerCoverage === 'current_pods' && (
+            <Badge severity="info" size="sm">
+              Current pods only · confidence capped
+            </Badge>
+          )}
+        </div>
+      )}
+      {Array.from(byContainer.entries()).map(([container, rows]) => (
+        <div key={container}>
+          <h4 className="mb-2 text-xs font-semibold text-theme-text-secondary">{container}</h4>
+          <div className="grid gap-3 md:grid-cols-2">
+            {rows.map((row) => (
+              <FitCard key={row.resource} row={row} window={state.data!.window} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
   )
 }
 
-function RightsizingLine({ row }: { row: RightsizingRow }) {
-  const showRec = row.recommendedRequest && row.recommendedRequest !== row.currentRequest
-  const toneClass = toneClasses(row.tone)
-  const Icon = toneIcon(row.tone)
+function FitCard({ row, window }: { row: RightsizingRow; window: string }) {
+  return (
+    <div className="rounded-md border border-theme-border bg-theme-base/60 p-3">
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <span className="text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+          {row.resource}
+        </span>
+        <div className="flex flex-wrap items-center justify-end gap-1.5">
+          <FitBadge fit={row.fit} queryError={row.queryError} />
+          {row.hpaManaged && (
+            <Badge severity="info" size="sm">
+              HPA-managed
+            </Badge>
+          )}
+          {row.bursty && (
+            <Badge severity="warning" size="sm">
+              Bursty CPU
+            </Badge>
+          )}
+          {row.throttleRatio != null && row.throttleRatio >= 0.1 && (
+            <Badge severity="alert" size="sm">
+              Throttling observed
+            </Badge>
+          )}
+          {(row.currentPodOOM || row.windowOomEvidence) && (
+            <Badge severity="error" size="sm">
+              OOM evidence
+            </Badge>
+          )}
+        </div>
+      </div>
+      <div className="flex items-baseline gap-2 tabular-nums">
+        <div>
+          <div className="text-[10px] uppercase tracking-wide text-theme-text-quaternary">
+            Current request
+          </div>
+          <div className="text-lg font-semibold text-theme-text-primary">
+            {row.currentRequest ?? 'Unset'}
+          </div>
+        </div>
+        <ArrowRight className="h-4 w-4 text-theme-text-quaternary" />
+        <div>
+          <div className="text-[10px] uppercase tracking-wide text-theme-text-quaternary">
+            Suggested next step
+          </div>
+          <div className="text-lg font-semibold text-theme-text-primary">
+            {row.recommendedRequest ?? '—'}
+          </div>
+        </div>
+      </div>
+      <div className="mt-3 grid grid-cols-2 gap-3 border-t border-theme-border pt-3 text-xs">
+        <Metric
+          label={`${row.observed?.name ?? (row.resource === 'cpu' ? 'P95' : 'Max')} observed`}
+          value={row.observed?.formatted ?? 'No samples'}
+        />
+        <Metric label={`Evidence · ${window}`} value={`${confidenceLabel(row)} · 5m samples`} />
+      </div>
+      <FitExplanation row={row} />
+    </div>
+  )
+}
 
+function CompactFitRow({ row }: { row: RightsizingRow }) {
   return (
-    <div className="flex items-center gap-2 text-theme-text-tertiary tabular-nums">
-      <span className="w-12 text-theme-text-quaternary uppercase tracking-wide text-[10px]">
+    <div className="flex flex-wrap items-center gap-2 text-xs tabular-nums text-theme-text-tertiary">
+      <span className="w-12 text-[10px] uppercase tracking-wide text-theme-text-quaternary">
         {row.resource}
       </span>
-
-      <span className="text-theme-text-secondary min-w-[3.5rem]">
-        {row.currentRequest ?? <span className="text-theme-text-quaternary italic">unset</span>}
-      </span>
-
-      {showRec && (
+      <span className="min-w-14 text-theme-text-secondary">{row.currentRequest ?? 'unset'}</span>
+      {row.recommendedRequest && (
         <>
-          <ArrowRight className="w-3 h-3 text-theme-text-quaternary shrink-0" />
-          <span className={`min-w-[3.5rem] ${toneClass.value}`}>
-            {row.recommendedRequest}
-          </span>
+          <ArrowRight className="h-3 w-3 text-theme-text-quaternary" />
+          <span className="min-w-14 text-theme-text-primary">{row.recommendedRequest}</span>
         </>
       )}
-
-      {row.p95 && (
-        <span className="text-theme-text-quaternary text-[10px]">
-          (P95 {row.p95})
-        </span>
-      )}
-
-      {row.tone !== 'ok' && Icon && (
-        <span className={`ml-auto inline-flex items-center gap-1 ${toneClass.badge} px-1.5 py-0.5 rounded text-[10px]`}>
-          <Icon className="w-3 h-3" />
-          <span>{row.message}</span>
+      {row.observed && (
+        <span className="text-[10px] text-theme-text-quaternary">
+          ({row.observed.name} {row.observed.formatted})
         </span>
       )}
-
-      {row.tone === 'ok' && row.message && (
-        <span className="ml-auto text-theme-text-quaternary text-[10px]">{row.message}</span>
-      )}
+      <span className="ml-auto">
+        <FitBadge fit={row.fit} queryError={row.queryError} />
+      </span>
     </div>
   )
 }
 
-const TONE_TO_SEVERITY: Record<RightsizingTone, Severity> = {
-  critical: 'error',
-  alert: 'alert',
-  warning: 'warning',
-  info: 'info',
-  ok: 'neutral',
+function RightsizingContext({
+  data,
+  compact = false,
+}: {
+  data: PrometheusRightsizing
+  compact?: boolean
+}) {
+  const evidence = data.ownerCoverage === 'ksm_history' ? 'retained ownership' : 'current pods only'
+  return (
+    <span className="text-[11px] text-theme-text-tertiary">
+      {compact ? data.window : `Last ${data.window} · ${evidence}`}
+    </span>
+  )
+}
+
+function FitBadge({ fit, queryError }: { fit: RightsizingFit; queryError?: string }) {
+  const presentation = getRightsizingPresentation(fit, queryError)
+  return (
+    <Badge severity={presentation.severity} size="sm">
+      {presentation.label}
+    </Badge>
+  )
 }
 
-function toneClasses(tone: RightsizingTone): { value: string; badge: string } {
-  if (tone === 'ok') return { value: 'text-theme-text-secondary', badge: '' }
-  if (tone === 'info') {
-    // "Could reduce" is a suggestion, not a problem — mute the badge.
-    return { value: SEVERITY_TEXT.info, badge: 'text-theme-text-tertiary bg-theme-elevated/60' }
+export function getRightsizingPresentation(fit: RightsizingFit, queryError?: string) {
+  if (queryError) return { label: 'Query failed', severity: 'error' as const }
+  const labels: Record<RightsizingFit, string> = {
+    balanced: 'Balanced',
+    oversized: 'Oversized',
+    under_requested: 'Under-requested',
+    missing_request: 'Missing request',
+    insufficient_history: 'Insufficient history',
+  }
+  const severities: Record<RightsizingFit, 'success' | 'info' | 'warning' | 'neutral'> = {
+    balanced: 'success',
+    oversized: 'info',
+    under_requested: 'warning',
+    missing_request: 'warning',
+    insufficient_history: 'neutral',
   }
-  const sev = TONE_TO_SEVERITY[tone]
-  return { value: SEVERITY_TEXT[sev], badge: SEVERITY_BADGE[sev] }
+  return { label: labels[fit], severity: severities[fit] }
 }
 
-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
+function FitExplanation({ row }: { row: RightsizingRow }) {
+  const message = getRightsizingExplanation(row)
+  if (!message) return null
+  return <p className="mt-3 text-xs text-theme-text-tertiary">{message}</p>
+}
+
+export function getRightsizingExplanation(row: RightsizingRow): string | undefined {
+  const messages: Record<string, string> = {
+    request_within_fit_range: 'The configured request is within 30% of the evidence-based target.',
+    insufficient_history: 'At least six hours of samples are required before suggesting a request.',
+    hpa_managed: `The HPA manages ${row.resource}; review its target before changing this request.`,
+    hpa_evidence_unavailable:
+      'Radar could not verify HPA ownership, so it withheld a suggested request.',
+    oom_evidence: 'A lower memory request is withheld because OOM evidence exists.',
+    oom_evidence_unavailable:
+      'Radar could not verify recent OOM history, so it withheld a lower memory request.',
+    recommended_request_exceeds_limit:
+      'The evidence-based request would exceed the current limit; review the limit first.',
+  }
+  if (row.reductionLimited && row.calculatedRequest && row.recommendedRequest) {
+    const burstNote = row.bursty && row.peak ? ` CPU P99 reached ${row.peak.formatted}.` : ''
+    return `Demand-based target: ${row.calculatedRequest}. Radar suggests ${row.recommendedRequest} as a conservative next step; observe another full window before reducing further.${burstNote}`
   }
+  const message = row.queryError
+    ? `Partial result: ${row.queryError}.`
+    : messages[row.recommendationReason ?? '']
+  const throttleUnavailable = row.resource === 'cpu' && !row.throttleAvailable
+  if (!message && !throttleUnavailable) return undefined
+  return message ?? 'CPU throttling metrics are unavailable; no throttling conclusion was drawn.'
+}
+
+function confidenceLabel(row: RightsizingRow) {
+  return `${row.confidence[0].toUpperCase()}${row.confidence.slice(1)} confidence`
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-theme-text-quaternary">{label}</div>
+      <div className="mt-0.5 text-theme-text-secondary">{value}</div>
+    </div>
+  )
+}
+
+function EmptyState({ text, loading = false }: { text: string; loading?: boolean }) {
+  return (
+    <div className="flex min-h-16 items-center justify-center text-sm text-theme-text-tertiary">
+      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {text}
+    </div>
+  )
 }

package/src/components/resources/ImageFilesystemModal.tsx

@@ -9,6 +9,7 @@ import { formatBytes } from '../../utils/format'
 import { downloadBlob, filterTree } from './file-browser-utils'
 import { Tooltip } from '../ui/Tooltip'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { Input } from '@skyhook-io/k8s-ui'
 
 // Manual fetch function for filesystem (not a hook - gives us full control)
 async function fetchImageFilesystem(
@@ -166,8 +167,7 @@ export function ImageFilesystemModal({
           <div className="p-3 border-b border-theme-border shrink-0">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
-                type="text"
+              <Input
                 placeholder="Search files..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}

package/src/components/resources/PodFilesystemModal.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { X, File, Link2, ChevronRight, AlertTriangle, Loader2, Search, Download, FolderOpen } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, Input } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import type { FileNode } from '../../types'
 import { formatBytes } from '../../utils/format'
@@ -192,8 +192,7 @@ export function PodFilesystemModal({
           {showFilesystem && (
             <div className="relative flex-1 min-w-[200px]">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
-                type="text"
+              <Input
                 placeholder="Filter files..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -23,6 +23,8 @@ interface ResourceDetailDrawerProps {
   /** Top offset for the drawer (px). Defaults to Radar's 49px header height;
    *  pass 0 in chromeless embeds where there's no Radar header above it. */
   headerHeight?: number
+  /** Right inset in px so the drawer sits beside a docked side panel (AI), not under it. */
+  rightInset?: number
 }
 
 export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {

package/src/components/resources/ResourcesView.tsx

@@ -41,6 +41,7 @@ interface ResourcesViewProps {
 
 type SelectedKindInfo = { name: string; kind: string; group: string } | null
 
+const EMPTY_RESOURCE_COUNTS: Record<string, number> = {}
 const LARGE_RESOURCE_LIST_LIMIT = 25000
 const LARGE_RESOURCE_LIST_GUARD_KEYS = new Set([
   'Pod',
@@ -60,6 +61,10 @@ function resourceCountKey(kind: NonNullable<SelectedKindInfo>): string {
   return kind.group ? `${kind.group}/${kind.kind}` : kind.kind
 }
 
+function hasResourceCount(counts: Record<string, number> | undefined, key: string): boolean {
+  return Object.prototype.hasOwnProperty.call(counts ?? {}, key)
+}
+
 export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
@@ -181,14 +186,16 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
 
   const selectedCountKey = selectedKind ? resourceCountKey(selectedKind) : ''
   const selectedCount = selectedCountKey ? countsData?.counts[selectedCountKey] : undefined
+  const selectedCountKnown = selectedCountKey ? hasResourceCount(countsData?.counts, selectedCountKey) : false
   const selectedCountUnavailable = selectedCountKey ? countsData?.unavailable?.includes(selectedCountKey) ?? false : false
   const isSelectedKindGuarded = selectedCountKey !== '' && LARGE_RESOURCE_LIST_GUARD_KEYS.has(selectedCountKey)
   const waitingForGuardCount = isSelectedKindGuarded && !countsData && !countsIsError
-  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCount ?? 0) > LARGE_RESOURCE_LIST_LIMIT)
+  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCountKnown && (selectedCount ?? 0) > LARGE_RESOURCE_LIST_LIMIT))
   const selectedKindQueryBlocked = waitingForGuardCount || largeListBlocked
   const podCount = countsData?.counts.Pod
+  const podCountKnown = hasResourceCount(countsData?.counts, 'Pod')
   const podCountUnavailable = countsData?.unavailable?.includes('Pod') ?? false
-  const podCountAllowsBulkMetrics = countsData != null && !podCountUnavailable && (podCount ?? 0) <= LARGE_RESOURCE_LIST_LIMIT
+  const podCountAllowsBulkMetrics = countsData != null && podCountKnown && !podCountUnavailable && (podCount ?? 0) <= LARGE_RESOURCE_LIST_LIMIT
   const selectedKindName = selectedKind?.name.toLowerCase() ?? ''
   const topPodMetricsEnabled = selectedKindName === 'pods' && podCountAllowsBulkMetrics
   const topNodeMetricsEnabled = selectedKindName === 'nodes' && namespaces.length === 0 && podCountAllowsBulkMetrics
@@ -248,6 +255,8 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   const selectedKindQueryResult: ResourceQueryResult | undefined = useMemo(() => {
     if (!selectedKind) return undefined
     return {
+      resourceName: selectedKind.name,
+      group: selectedKind.group,
       data: selectedKindQueryBlocked ? [] : selectedKindQuery.data as any[] | undefined,
       isLoading: waitingForGuardCount || selectedKindQuery.isLoading,
       error: selectedKindQueryBlocked ? undefined : selectedKindQuery.error,
@@ -315,7 +324,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   return (
     <>
     <BaseResourcesView
-      key={location.pathname}
+      key={connection.context || 'default'}
       namespaces={namespaces}
       selectedResource={selectedResource}
       onResourceClick={onResourceClick}
@@ -325,7 +334,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       // Injected data
       apiResources={apiResources}
       // Lightweight counts for sidebar (replaces 233 parallel queries)
-      resourceCounts={countsData?.counts}
+      resourceCounts={countsData?.counts ?? EMPTY_RESOURCE_COUNTS}
       resourceForbidden={countsData?.forbidden}
       resourceReasons={countsData?.reasons}
       resourceUnavailable={countsData?.unavailable}

package/src/components/resources/renderers/CronWorkflowRenderer.tsx

@@ -0,0 +1 @@
+export * from '@skyhook-io/k8s-ui/components/resources/renderers/CronWorkflowRenderer'

package/src/components/resources/renderers/index.ts

@@ -7,6 +7,7 @@ export { ConfigMapRenderer } from './ConfigMapRenderer'
 export { SecretRenderer } from './SecretRenderer'
 export { JobRenderer } from './JobRenderer'
 export { CronJobRenderer } from './CronJobRenderer'
+export { CronWorkflowRenderer } from './CronWorkflowRenderer'
 export { HPARenderer } from './HPARenderer'
 export { NodeRenderer } from './NodeRenderer'
 export { PVCRenderer } from './PVCRenderer'