@skyhook-io/radar-app 1.1.0 → 1.1.2

package/src/components/helm/ChartBrowser.tsx

@@ -2,12 +2,13 @@ import { useState, useMemo } from 'react'
 import { Search, RefreshCw, Package, Database, AlertCircle, ExternalLink, ChevronDown, Star, Shield, BadgeCheck, Building2, Globe, ArrowUpDown, FileJson, PenTool } from 'lucide-react'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
-import { useHelmRepositories, useSearchCharts, useUpdateRepository, useArtifactHubSearch, type ArtifactHubSortOption } from '../../api/client'
+import { useHelmRepositories, useSearchCharts, useUpdateRepository, useUpdateRepositorySilent, useArtifactHubSearch, type ArtifactHubSortOption } from '../../api/client'
 import { useCanHelmWrite } from '../../contexts/CapabilitiesContext'
 import type { ChartInfo, HelmRepository, ArtifactHubChart, ChartSource } from '../../types'
 import { formatAge } from './helm-utils'
 import { SEVERITY_BADGE } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
+import { useToast } from '../ui/Toast'
 
 interface ChartBrowserProps {
   onChartSelect: (repo: string, chart: string, version: string, source: ChartSource) => void
@@ -66,21 +67,54 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
     return groups
   }, [filteredLocalCharts])
 
+  // Silent variant for the bulk path so the global MutationCache
+  // doesn't fire a per-call "Failed to update repository" toast
+  // — handleUpdateAllRepos surfaces a single aggregate toast
+  // that names the failed repos.
+  const updateRepoSilentMutation = useUpdateRepositorySilent()
+  const { showError, showSuccess } = useToast()
+  // updateRepoSilentMutation.isPending flips to false BETWEEN
+  // sequential mutateAsync calls, briefly re-enabling the bulk
+  // button mid-loop. Track the whole-batch state explicitly so
+  // the user can't kick off a second concurrent batch.
+  const [isBatchUpdating, setIsBatchUpdating] = useState(false)
+
   const handleUpdateRepo = async (repoName: string) => {
     await updateRepoMutation.mutateAsync(repoName)
     refetchCharts()
   }
 
   const handleUpdateAllRepos = async () => {
-    if (!repositories) return
-    for (const repo of repositories) {
-      try {
-        await updateRepoMutation.mutateAsync(repo.name)
-      } catch {
-        // Continue with other repos
+    if (!repositories || repositories.length === 0 || isBatchUpdating) return
+    setIsBatchUpdating(true)
+    const failed: string[] = []
+    try {
+      for (const repo of repositories) {
+        try {
+          await updateRepoSilentMutation.mutateAsync(repo.name)
+        } catch (err) {
+          failed.push(repo.name)
+          console.warn(`helm repo update failed for "${repo.name}":`, err)
+        }
       }
+    } finally {
+      setIsBatchUpdating(false)
     }
     refetchCharts()
+    const ok = repositories.length - failed.length
+    if (failed.length === 0) {
+      showSuccess(`Updated ${ok} ${ok === 1 ? 'repository' : 'repositories'}`)
+    } else if (ok === 0) {
+      showError(
+        `Failed to update ${failed.length} ${failed.length === 1 ? 'repository' : 'repositories'}`,
+        `Failed: ${failed.join(', ')}`,
+      )
+    } else {
+      showError(
+        `Updated ${ok}/${repositories.length} repositories`,
+        `Failed: ${failed.join(', ')}`,
+      )
+    }
   }
 
   const isLoading = chartSource === 'local' ? chartsLoading : artifactHubLoading
@@ -246,10 +280,10 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
             <Tooltip content={canHelmWrite ? "Update all repositories" : helmWriteReason}>
               <button
                 onClick={handleUpdateAllRepos}
-                disabled={updateRepoMutation.isPending || !canHelmWrite}
+                disabled={isBatchUpdating || !canHelmWrite}
                 className="p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg disabled:opacity-50"
               >
-                <RefreshCw className={clsx('w-4 h-4', updateRepoMutation.isPending && 'animate-spin')} />
+                <RefreshCw className={clsx('w-4 h-4', isBatchUpdating && 'animate-spin')} />
               </button>
             </Tooltip>
           </>
@@ -280,7 +314,24 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                     </p>
                   </div>
                 ) : (
-                  <p className="text-sm mt-1">Try updating your repositories</p>
+                  <div className="text-sm mt-1 flex flex-col items-center gap-2">
+                    <p>Your repositories may be out of date.</p>
+                    <button
+                      onClick={handleUpdateAllRepos}
+                      disabled={isBatchUpdating || !canHelmWrite}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs btn-brand rounded disabled:opacity-50"
+                      title={canHelmWrite ? 'Run helm repo update on every configured repository' : helmWriteReason}
+                    >
+                      <RefreshCw className={`w-3.5 h-3.5 ${isBatchUpdating ? 'animate-spin' : ''}`} />
+                      {isBatchUpdating ? 'Updating…' : 'Update all repositories'}
+                    </button>
+                    <button
+                      onClick={() => setChartSource('artifacthub')}
+                      className="text-xs text-blue-400 hover:underline"
+                    >
+                      Or browse ArtifactHub instead
+                    </button>
+                  </div>
                 )}
               </div>
             </div>

package/src/components/helm/HelmView.tsx

@@ -1,12 +1,12 @@
 import { useState, useMemo, useRef, useEffect, useCallback, forwardRef } from 'react'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
-import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch } from 'lucide-react'
+import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch, ChevronRight } from 'lucide-react'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import { useHelmReleases, useHelmBatchUpgradeInfo, isForbiddenError } from '../../api/client'
 import type { HelmRelease, SelectedHelmRelease, UpgradeInfo, ChartSource } from '../../types'
-import { getStatusColor, formatAge, truncate } from './helm-utils'
+import { getStatusColor, formatAge, truncate, isHelmReleaseActionable } from './helm-utils'
 import { SEVERITY_BADGE } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
 import { ChartBrowser } from './ChartBrowser'
@@ -481,17 +481,34 @@ const ReleaseRow = forwardRef<HTMLTableRowElement, ReleaseRowProps>(
         </Tooltip>
       </td>
       <td className="px-4 py-3 w-24 hidden xl:table-cell">
-        <span className="text-sm text-theme-text-secondary">{release.appVersion || '-'}</span>
+        {release.appVersion ? (
+          <span className="text-sm text-theme-text-secondary">{release.appVersion}</span>
+        ) : (
+          <Tooltip content="This chart did not declare an appVersion in Chart.yaml.">
+            <span className="text-sm text-theme-text-disabled cursor-help">—</span>
+          </Tooltip>
+        )}
       </td>
       <td className="px-4 py-3 w-28">
-        <span
-          className={clsx(
-            'badge',
-            getStatusColor(release.status)
-          )}
-        >
-          {release.status}
-        </span>
+        {isHelmReleaseActionable(release.status) ? (
+          <Tooltip content="Click row to view rollback / history / logs and recover">
+            <span
+              className={clsx('badge inline-flex items-center gap-1', getStatusColor(release.status))}
+            >
+              {release.status}
+              <ChevronRight className="w-3 h-3 opacity-70" />
+            </span>
+          </Tooltip>
+        ) : (
+          <span
+            className={clsx(
+              'badge',
+              getStatusColor(release.status)
+            )}
+          >
+            {release.status}
+          </span>
+        )}
       </td>
       <td className="px-4 py-3 w-20">
         <span className="text-sm text-theme-text-secondary">{release.revision}</span>

package/src/components/helm/InstallWizard.tsx

@@ -106,11 +106,11 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
       }
     }
     if (baseValues && defaultValues) {
-      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues)))
+      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues), { lineWidth: 0 }))
     } else if (defaultValues && !baseValues) {
-      setValuesYaml(yaml.stringify(defaultValues))
+      setValuesYaml(yaml.stringify(defaultValues, { lineWidth: 0 }))
     } else if (baseValues) {
-      setValuesYaml(yaml.stringify(baseValues))
+      setValuesYaml(yaml.stringify(baseValues, { lineWidth: 0 }))
     }
   }, [localChartDetail?.values, artifactHubDetail?.values, isLocal, defaultValues])
 
@@ -349,7 +349,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   valuesYaml={valuesYaml}
                   defaultValuesYaml={
                     isLocal
-                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values) : '')
+                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values, { lineWidth: 0 }) : '')
                       : (artifactHubDetail?.values || '')
                   }
                 />
@@ -664,7 +664,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
   const ahDetail = chartDetail as ArtifactHubChartDetail | undefined
 
   const defaultValues = isLocal
-    ? (localDetail?.values ? yaml.stringify(localDetail.values) : '')
+    ? (localDetail?.values ? yaml.stringify(localDetail.values, { lineWidth: 0 }) : '')
     : (ahDetail?.values || '')
 
   const hasDefaults = Boolean(defaultValues)

package/src/components/helm/ManifestDiffViewer.tsx

@@ -44,7 +44,7 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
         </button>
       </div>
 
-      <div className="rounded-lg overflow-hidden max-h-[calc(100vh-300px)] overflow-auto bg-theme-base/50 font-mono text-xs">
+      <div className="rounded-lg max-h-[calc(100vh-300px)] overflow-auto bg-theme-base/50 font-mono text-xs">
         <div className="p-3">
           {diff.split('\n').map((line, index) => (
             <DiffLine key={index} line={line} />

package/src/components/helm/ValuesViewer.tsx

@@ -320,43 +320,7 @@ function ToggleButton({ showAll, onToggle, disabled }: { showAll: boolean; onTog
   )
 }
 
-// Simple JSON to YAML converter for display
-function jsonToYaml(obj: Record<string, unknown>, indent = 0): string {
-  const spaces = '  '.repeat(indent)
-  let result = ''
-
-  for (const [key, value] of Object.entries(obj)) {
-    if (value === null || value === undefined) {
-      result += `${spaces}${key}: null\n`
-    } else if (typeof value === 'object' && !Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      result += jsonToYaml(value as Record<string, unknown>, indent + 1)
-    } else if (Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      for (const item of value) {
-        if (typeof item === 'object' && item !== null) {
-          result += `${spaces}- \n`
-          const itemYaml = jsonToYaml(item as Record<string, unknown>, indent + 2)
-          result += itemYaml
-        } else {
-          result += `${spaces}- ${formatValue(item)}\n`
-        }
-      }
-    } else {
-      result += `${spaces}${key}: ${formatValue(value)}\n`
-    }
-  }
-
-  return result
-}
-
-function formatValue(value: unknown): string {
-  if (typeof value === 'string') {
-    // Quote strings that contain special characters
-    if (value.includes(':') || value.includes('#') || value.includes('\n') || value.startsWith(' ') || value.endsWith(' ')) {
-      return `"${value.replace(/"/g, '\\"')}"`
-    }
-    return value
-  }
-  return String(value)
+function jsonToYaml(obj: Record<string, unknown>): string {
+  if (!obj || Object.keys(obj).length === 0) return ''
+  return yaml.stringify(obj, { lineWidth: 0 })
 }

package/src/components/helm/helm-utils.ts

@@ -35,3 +35,7 @@ export function getChartDisplay(chart: string, version: string): string {
 
 // Re-export kindToPlural from centralized navigation utils
 export { kindToPlural } from '../../utils/navigation'
+
+// Re-export from k8s-ui where the predicate lives next to the
+// Helm status color palette and is unit-tested.
+export { isHelmReleaseActionable } from '../../utils/badge-colors'

package/src/components/home/HomeView.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useDashboard, useDashboardCRDs, useDashboardHelm } from '../../api/client'
 import type { DashboardResponse } from '../../api/client'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
@@ -25,6 +26,21 @@ interface HomeViewProps {
 
 export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: HomeViewProps) {
   const { data, isLoading, error } = useDashboard(namespaces)
+
+  // SSE is cluster-wide on small/medium clusters; the picker only narrows the
+  // dashboard summary, so re-apply the filter here or the legend disagrees.
+  const scopedTopology = useMemo<Topology | null>(() => {
+    if (!topology) return null
+    if (namespaces.length === 0) return topology
+    const nsSet = new Set(namespaces)
+    const nodes = topology.nodes.filter(n => {
+      const ns = n.data.namespace as string | undefined
+      return !ns || nsSet.has(ns)
+    })
+    const nodeIds = new Set(nodes.map(n => n.id))
+    const edges = topology.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
+    return { nodes, edges }
+  }, [topology, namespaces])
   // CRDs and Helm load lazily after main dashboard to keep initial load fast
   const { data: crdsData } = useDashboardCRDs(namespaces)
   const { data: helmData } = useDashboardHelm(namespaces)
@@ -100,7 +116,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
             {/* Primary cards — 2-col grid */}
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               <TopologyPreview
-                topology={topology}
+                topology={scopedTopology}
                 summary={data.topologySummary}
                 onNavigate={() => onNavigateToView('topology')}
               />
@@ -110,7 +126,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
               />
               <ActivitySummary
                 namespaces={namespaces}
-                topology={topology}
+                topology={scopedTopology}
                 onNavigate={() => onNavigateToView('timeline')}
               />
               <TrafficSummary

package/src/components/resource/HPACharts.tsx

@@ -0,0 +1,232 @@
+import { useEffect, useMemo } from 'react'
+import { LineChart } from 'lucide-react'
+import { usePromQLRange, usePrometheusStatus, useAutoPromConnect, type PrometheusSeries } from '../../api/client'
+
+/**
+ * HPACharts — replicas-over-time chart for an HPA.
+ *
+ * Sources from KSM `kube_horizontalpodautoscaler_status_{current,desired}_replicas`.
+ * Hidden silently when Prom isn't connected or KSM isn't reporting the series.
+ *
+ * Only the replicas series is plotted — KSM doesn't expose the observed metric
+ * the HPA target compares against, so an "observed vs target" chart would need
+ * cAdvisor derivation.
+ */
+export function HPACharts({ data }: { data: any }) {
+  // HPA detail can be the first Prometheus-backed surface a user opens; without
+  // this, the chart silently stays empty until they open a workload metrics tab.
+  useAutoPromConnect()
+  const { data: status } = usePrometheusStatus()
+  const isConnected = status?.connected === true
+
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const spec = data?.spec ?? {}
+  const min = spec.minReplicas ?? 1
+  const max = spec.maxReplicas
+
+  const currentQuery = useMemo(
+    () => `kube_horizontalpodautoscaler_status_current_replicas{namespace="${escapeLabel(namespace)}",horizontalpodautoscaler="${escapeLabel(name)}"}`,
+    [namespace, name],
+  )
+  const desiredQuery = useMemo(
+    () => `kube_horizontalpodautoscaler_status_desired_replicas{namespace="${escapeLabel(namespace)}",horizontalpodautoscaler="${escapeLabel(name)}"}`,
+    [namespace, name],
+  )
+
+  const enabled = isConnected && Boolean(namespace && name)
+  const { data: currentRes, error: currentErr } = usePromQLRange(currentQuery, '1h', enabled)
+  const { data: desiredRes, error: desiredErr } = usePromQLRange(desiredQuery, '1h', enabled)
+
+  const replicasPoints = useMemo(() => combineSeries({
+    current: currentRes?.series,
+    desired: desiredRes?.series,
+  }), [currentRes, desiredRes])
+
+  // Surface Prom-side failures in the console so an operator debugging a
+  // missing HPA chart has a breadcrumb; the chart still hides silently when
+  // KSM isn't reporting (the common no-data case). Effect-gated so we log
+  // once per error change, not on every re-render.
+  useEffect(() => {
+    if (currentErr || desiredErr) {
+      console.warn('[HPACharts] PromQL query failed', { currentErr, desiredErr })
+    }
+  }, [currentErr, desiredErr])
+
+  if (!isConnected) return null
+  if (!replicasPoints) return null
+
+  return (
+    <section className="mt-4 rounded-lg border border-theme-border bg-theme-surface/30 p-3">
+      <div className="flex items-center gap-2 mb-3 text-sm font-medium text-theme-text-secondary">
+        <LineChart className="w-4 h-4 text-theme-text-tertiary" />
+        Activity (last 1h)
+      </div>
+
+      <DualLineChart
+        title="Replicas"
+        height={120}
+        primary={{ label: 'current', points: replicasPoints.current, color: '#3b82f6' }}
+        secondary={{ label: 'desired', points: replicasPoints.desired, color: '#a855f7', dashed: true }}
+        referenceLines={[
+          { value: min, label: `min ${min}`, color: '#94a3b8' },
+          ...(max != null ? [{ value: max, label: `max ${max}`, color: '#94a3b8' }] : []),
+        ]}
+        formatY={(v) => v.toFixed(0)}
+      />
+    </section>
+  )
+}
+
+// ============================================================================
+// Internals
+// ============================================================================
+
+interface FlatPoint { timestamp: number; value: number }
+
+function extractFirstSeries(series: PrometheusSeries[]): FlatPoint[] | null {
+  for (const s of series) {
+    if (s.dataPoints.length > 0) {
+      return s.dataPoints.map(dp => ({ timestamp: dp.timestamp, value: dp.value }))
+    }
+  }
+  return null
+}
+
+function combineSeries(args: { current?: PrometheusSeries[]; desired?: PrometheusSeries[] }): {
+  current: FlatPoint[]
+  desired: FlatPoint[]
+} | null {
+  const current = args.current ? extractFirstSeries(args.current) : null
+  const desired = args.desired ? extractFirstSeries(args.desired) : null
+  if (!current && !desired) return null
+  return {
+    current: current ?? [],
+    desired: desired ?? [],
+  }
+}
+
+function escapeLabel(s: string): string {
+  return s.replace(/[\\"]/g, '\\$&')
+}
+
+// ============================================================================
+// DualLineChart — minimal two-line chart for HPA-style time series.
+// Deliberately separate from PrometheusCharts.AreaChart: the chart shapes are
+// different (line not area, discrete integer Y axis for replicas), and
+// reusing the area chart would require adding more knobs to it.
+// ============================================================================
+
+interface LineSpec {
+  label: string
+  points: FlatPoint[]
+  color: string
+  dashed?: boolean
+}
+
+interface RefLine { value: number; label: string; color: string }
+
+function DualLineChart({ title, height, primary, secondary, referenceLines, formatY }: {
+  title: string
+  height: number
+  primary: LineSpec
+  secondary?: LineSpec
+  referenceLines?: RefLine[]
+  formatY: (v: number) => string
+}) {
+  const allPoints = [...primary.points, ...(secondary?.points ?? [])]
+  if (allPoints.length === 0) {
+    return (
+      <div className="text-xs text-theme-text-tertiary">{title} — no data</div>
+    )
+  }
+
+  const minTs = Math.min(...allPoints.map(p => p.timestamp))
+  const maxTs = Math.max(...allPoints.map(p => p.timestamp))
+  const tsSpan = Math.max(maxTs - minTs, 60)
+
+  let maxV = Math.max(...allPoints.map(p => p.value), 1)
+  if (referenceLines) {
+    for (const rl of referenceLines) maxV = Math.max(maxV, rl.value)
+  }
+  // Add 10% headroom so the top line isn't flush with the top edge.
+  maxV = maxV * 1.1
+
+  const width = 600
+  const marginL = 36
+  const marginR = 16
+  const marginT = 4
+  const marginB = 18
+  const plotW = width - marginL - marginR
+  const plotH = height - marginT - marginB
+
+  const toX = (ts: number) => marginL + ((ts - minTs) / tsSpan) * plotW
+  const toY = (v: number) => marginT + plotH - (v / maxV) * plotH
+
+  const drawLine = (spec: LineSpec) => {
+    if (spec.points.length === 0) return null
+    const d = spec.points.map((p, i) => `${i === 0 ? 'M' : 'L'}${toX(p.timestamp).toFixed(1)},${toY(p.value).toFixed(1)}`).join(' ')
+    return (
+      <path
+        d={d}
+        fill="none"
+        stroke={spec.color}
+        strokeWidth="1.75"
+        strokeLinejoin="round"
+        strokeDasharray={spec.dashed ? '4 3' : undefined}
+      />
+    )
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-xs text-theme-text-secondary">{title}</span>
+        <div className="flex items-center gap-3">
+          <Legend color={primary.color} label={primary.label} />
+          {secondary && <Legend color={secondary.color} label={secondary.label} dashed />}
+        </div>
+      </div>
+      <svg viewBox={`0 0 ${width} ${height}`} className="w-full" preserveAspectRatio="none">
+        {/* Y ticks */}
+        {[0, 0.5, 1].map(frac => {
+          const v = maxV * frac
+          const y = toY(v)
+          return (
+            <g key={frac}>
+              <line x1={marginL} y1={y} x2={width - marginR} y2={y} stroke="currentColor" className="text-theme-border/30" strokeWidth="1" />
+              <text x={marginL - 4} y={y + 3} textAnchor="end" fontSize="9" fontFamily="ui-monospace, monospace" className="fill-theme-text-tertiary">
+                {formatY(v)}
+              </text>
+            </g>
+          )
+        })}
+        {/* Reference lines */}
+        {referenceLines?.map((rl, i) => {
+          const y = toY(rl.value)
+          return (
+            <g key={`rl-${i}`}>
+              <line x1={marginL} y1={y} x2={width - marginR} y2={y} stroke={rl.color} strokeWidth="1" strokeDasharray="3 3" opacity="0.6" />
+              <text x={width - marginR - 4} y={y - 2} textAnchor="end" fontSize="9" fontFamily="ui-monospace, monospace" fill={rl.color} opacity="0.85">
+                {rl.label}
+              </text>
+            </g>
+          )
+        })}
+        {drawLine(primary)}
+        {secondary && drawLine(secondary)}
+      </svg>
+    </div>
+  )
+}
+
+function Legend({ color, label, dashed }: { color: string; label: string; dashed?: boolean }) {
+  return (
+    <span className="flex items-center gap-1 text-[11px] text-theme-text-tertiary">
+      <svg width="14" height="6" aria-hidden>
+        <line x1="0" y1="3" x2="14" y2="3" stroke={color} strokeWidth="1.75" strokeDasharray={dashed ? '3 2' : undefined} />
+      </svg>
+      {label}
+    </span>
+  )
+}

package/src/components/resource/PVCUsageBar.tsx

@@ -0,0 +1,59 @@
+import { formatMemoryBytes } from '@skyhook-io/k8s-ui/utils/format'
+import { useAutoPromConnect, usePrometheusPVCUsage, usePrometheusStatus } from '../../api/client'
+
+/**
+ * PVCUsageBar — single-line capacity gauge derived from kubelet_volume_stats_*.
+ *
+ * Hidden silently when:
+ *  - Prometheus isn't connected
+ *  - The CSI driver doesn't implement NodeGetVolumeStats
+ *  - Prometheus isn't scraping kubelet endpoints (notably GMP default config)
+ *
+ * Operators get nothing rather than a "no data" message that'd look like Radar
+ * is broken — the absence is information enough.
+ */
+export function PVCUsageBar({ namespace, name }: { namespace: string; name: string }) {
+  // PVC detail can be the first Prometheus-backed surface a user opens; without
+  // this, the gauge silently stays hidden until they open a workload metrics tab.
+  useAutoPromConnect()
+  const { data: status } = usePrometheusStatus()
+  const isConnected = status?.connected === true
+  const { data: usage } = usePrometheusPVCUsage(namespace, name, isConnected)
+
+  if (!usage || !usage.hasData) return null
+
+  const pct = Math.max(0, Math.min(1, usage.ratio))
+  const usedLabel = formatMemoryBytes(usage.used)
+  const capLabel = formatMemoryBytes(usage.capacity)
+  const pctLabel = `${(pct * 100).toFixed(0)}%`
+
+  // Tone: green well under, amber > 75%, red > 90%. PVCs fill silently — the
+  // top tone is justified because the consequence (write failures) is severe.
+  const tone = pct >= 0.9 ? 'critical' : pct >= 0.75 ? 'warning' : 'ok'
+  const barColor =
+    tone === 'critical' ? 'bg-red-500' :
+    tone === 'warning' ? 'bg-amber-500' :
+    'bg-emerald-500'
+  // Light/dark-paired text tones — `text-red-400` alone washes out in light
+  // mode (Tailwind's 400 stop is calibrated for dark backgrounds).
+  const textColor =
+    tone === 'critical' ? 'text-red-700 dark:text-red-400' :
+    tone === 'warning' ? 'text-amber-700 dark:text-amber-400' :
+    'text-theme-text-secondary'
+
+  return (
+    <section className="rounded-lg border border-theme-border bg-theme-surface/30 p-3">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs font-medium text-theme-text-secondary uppercase tracking-wide">Usage</span>
+        <span className={`text-sm font-semibold tabular-nums ${textColor}`}>
+          {usedLabel} <span className="text-theme-text-quaternary font-normal">/</span> {capLabel}
+          <span className="ml-2 text-theme-text-tertiary text-xs font-normal">({pctLabel})</span>
+        </span>
+      </div>
+      <div className="h-2 rounded-full bg-theme-elevated overflow-hidden">
+        <div className={`h-full ${barColor} transition-all`} style={{ width: `${pct * 100}%` }} />
+      </div>
+    </section>
+  )
+}
+