@skyhook-io/radar-app 1.14.5 → 1.14.6

package/src/components/helm/TrackChartSourceDialog.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react'
 import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
 import { X, Plus, Trash2, Link2, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
-import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo } from '../../api/client'
+import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo, useCapabilities } from '../../api/client'
+import { OperatorManagedNotice } from '../settings/OperatorManagedNotice'
 import { Input } from '@skyhook-io/k8s-ui'
 import type { UpgradeInfo } from '../../types'
 
@@ -15,12 +16,14 @@ interface TrackChartSourceDialogProps {
   sourceError?: string
 }
 
-function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError?: string) {
+function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError?: string, operatorManaged = false) {
   switch (sourceIssue) {
     case 'repo_index_error':
       return {
         title: 'A Helm repo index failed',
-        body: 'Fix, refresh, or remove the broken Helm repo index. If this release came from OCI, add its registry prefix and Radar will check OCI before reporting that repo error.',
+        body: operatorManaged
+          ? 'Ask the operator to fix the Helm repo index, or add the chart’s OCI registry prefix to helm.ociSources if it came from OCI.'
+          : 'Fix, refresh, or remove the broken Helm repo index. If this release came from OCI, add its registry prefix and Radar will check OCI before reporting that repo error.',
       }
     case 'ambiguous_repository':
       return {
@@ -30,7 +33,9 @@ function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError
     case 'untracked':
       return {
         title: 'Source not tracked',
-        body: 'Helm does not record the install source. Add the OCI prefix that contains this chart.',
+        body: operatorManaged
+          ? 'Helm does not record the install source. Ask the operator to add the OCI prefix that contains this chart to helm.ociSources.'
+          : 'Helm does not record the install source. Add the OCI prefix that contains this chart.',
       }
     default:
       return sourceError
@@ -50,6 +55,9 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
   const { data: clusterInfo } = useClusterInfo()
   const addSource = useAddOCISource()
   const removeSource = useRemoveOCISource()
+  const { data: capabilities } = useCapabilities()
+  const operatorManaged = capabilities?.configManagement === 'operator'
+  const canEdit = capabilities != null && !operatorManaged
 
   // In-cluster Radar has no `helm registry login` store (the pod's HELM_CONFIG_HOME
   // points at an empty /tmp), so private registries can't authenticate — only
@@ -62,7 +70,7 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
   const normalizedChartName = chartName?.trim().replace(/^\/+|\/+$/g, '') ?? ''
   const probedRef = normalizedInput && normalizedChartName ? `${normalizedInput}/${normalizedChartName}` : ''
   const looksLikeFullChartRef = Boolean(normalizedInput && normalizedChartName && normalizedInput.endsWith(`/${normalizedChartName}`))
-  const sourceIssueCopy = getSourceIssueCopy(sourceIssue, sourceError)
+  const sourceIssueCopy = getSourceIssueCopy(sourceIssue, sourceError, operatorManaged)
 
   const handleAdd = () => {
     if (!trimmed || invalid) return
@@ -78,8 +86,8 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
         <div className="flex-1 min-w-0">
           <h3 className="text-lg font-semibold text-theme-text-primary">Track chart source</h3>
           <p className="text-sm text-theme-text-secondary mt-1">
-            Helm doesn&apos;t record where a chart was installed from. Register your OCI
-            registry prefix and Radar will check it for newer versions of your charts.
+            Helm doesn&apos;t record where a chart was installed from. Radar checks registered OCI
+            prefixes for newer versions of your charts.
           </p>
         </div>
         <button
@@ -91,6 +99,7 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
       </div>
 
       <div className="p-4 space-y-4">
+        {operatorManaged && <OperatorManagedNotice helmValue="helm.ociSources" />}
         {sourceIssueCopy && (
           <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-sm">
             <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-theme-text-secondary" />
@@ -101,7 +110,7 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
           </div>
         )}
 
-        <div>
+        {canEdit && <div>
           <label className="block text-sm font-medium text-theme-text-secondary mb-2">
             OCI registry prefix
           </label>
@@ -135,7 +144,7 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
                 ? `Radar will probe "${probedRef || `<prefix>/${normalizedChartName}`}".`
                 : 'Radar probes <prefix>/<chartName> for each untracked release.'}
           </p>
-        </div>
+        </div>}
 
         {sources && sources.length > 0 && (
           <div>
@@ -149,14 +158,14 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
                   className="flex items-center justify-between gap-2 px-3 py-2 bg-theme-elevated rounded-lg"
                 >
                   <span className="text-sm text-theme-text-primary font-mono truncate">{src}</span>
-                  <button
+                  {canEdit && <button
                     onClick={() => removeSource.mutate(src)}
                     disabled={removeSource.isPending}
                     className="p-1 text-theme-text-secondary hover:text-red-400 hover:bg-red-500/10 rounded disabled:opacity-50"
                     aria-label={`Remove ${src}`}
                   >
                     <Trash2 className="w-4 h-4" />
-                  </button>
+                  </button>}
                 </li>
               ))}
             </ul>

package/src/components/home/MCPSetupDialog.tsx

@@ -176,6 +176,15 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
     }
   }, null, 2)
 
+  const opencodeConfig = JSON.stringify({
+    mcp: {
+      radar: {
+        type: "remote",
+        url: mcpUrl,
+      }
+    }
+  }, null, 2)
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
@@ -283,6 +292,7 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
               { icon: Code2, name: 'VS Code Copilot', path: '.vscode/mcp.json', config: vsCodeConfig },
               { icon: Code2, name: 'Cline', path: 'Cline MCP settings (via UI)', config: clineConfig },
               { icon: Code2, name: 'JetBrains AI', path: 'Settings → Tools → AI Assistant → MCP', config: jetbrainsConfig },
+              { icon: Terminal, name: 'OpenCode', path: '~/.config/opencode/opencode.json', config: opencodeConfig },
               { icon: Terminal, name: 'OpenAI Codex', path: '~/.codex/config.toml', config: codexConfig },
               { icon: Terminal, name: 'Gemini CLI', path: '~/.gemini/settings.json', config: geminiConfig },
             ].map((agent) => (

package/src/components/logs/ScheduledWorkloadLogsViewer.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Loader2, Terminal } from 'lucide-react'
 import { clsx } from 'clsx'
-import { useWorkloadRuns, type WorkloadRun } from '../../api/client'
+import { useWorkloadRuns, useResource, type WorkloadRun } from '../../api/client'
 import { WorkloadLogsViewer } from './WorkloadLogsViewer'
-import { pickDefaultRun, workloadRunKey } from '../execution/BatchExecutionView'
+import { pickDefaultRun, selectedRunMissing, workloadRunKey } from '../execution/BatchExecutionView'
 
 interface ScheduledWorkloadLogsViewerProps {
   kind: string
@@ -15,34 +15,61 @@ interface ScheduledWorkloadLogsViewerProps {
 
 const EMPTY_RUNS: WorkloadRun[] = []
 
-export function ScheduledWorkloadLogsViewer({ kind, namespace, name, selectedRunKey, onSelectRun }: ScheduledWorkloadLogsViewerProps) {
+export function ScheduledWorkloadLogsViewer(props: ScheduledWorkloadLogsViewerProps) {
+  return <ScheduledWorkloadLogsContent key={JSON.stringify([props.kind, props.namespace, props.name])} {...props} />
+}
+
+function ScheduledWorkloadLogsContent({ kind, namespace, name, selectedRunKey, onSelectRun }: ScheduledWorkloadLogsViewerProps) {
   const clusterScoped = kind === 'ClusterWorkflowTemplate' || kind === 'clusterworkflowtemplates'
-  const runsQuery = useWorkloadRuns(kind, namespace, name, true, { clusterScoped, refetchActive: true })
-  const runs = runsQuery.data?.runs ?? EMPTY_RUNS
-  const defaultRun = useMemo(() => pickDefaultRun(runs), [runs])
+  const jobSet = kind.toLowerCase() === 'jobset' || kind.toLowerCase() === 'jobsets'
   const [localRunKey, setLocalRunKey] = useState('')
   const effectiveRunKey = selectedRunKey ?? localRunKey
   const selectRun = onSelectRun ?? setLocalRunKey
+  const [scope, setScope] = useState('selected')
+  const [role, setRole] = useState('')
+  const rootQuery = useResource<any>('jobsets', namespace, name, 'jobset.x-k8s.io', { enabled: jobSet })
+  const runsQuery = useWorkloadRuns(kind, namespace, name, true, { clusterScoped, refetchActive: true, ...(jobSet ? { selected: effectiveRunKey } : {}) })
+  const memberCollection = runsQuery.data?.collection === 'members'
+  const runs = runsQuery.data?.runs ?? EMPTY_RUNS
+  const selectedRunFromResponse = runsQuery.data?.selected
+  const resolvedRuns = useMemo(
+    () => selectedRunFromResponse && !runs.some(run => workloadRunKey(run) === workloadRunKey(selectedRunFromResponse))
+      ? [...runs, selectedRunFromResponse]
+      : runs,
+    [runs, selectedRunFromResponse],
+  )
+  const defaultRun = useMemo(() => memberCollection ? runs[0] : pickDefaultRun(runs), [memberCollection, runs])
+  const roles: string[] = [...new Set<string>([...(rootQuery.data?.spec?.replicatedJobs?.map((r: { name: string }) => r.name) ?? []), ...(role ? [role] : [])])]
+  const effectiveRole = role || roles[0] || ''
+  const aggregate = memberCollection && scope !== 'selected'
+  const scopeControls = memberCollection && <div className="flex flex-wrap items-center gap-2 border-b border-theme-border bg-theme-surface px-3 py-2 text-xs">
+    <label htmlFor="jobset-log-scope" className="text-theme-text-secondary">Log scope</label>
+    <select id="jobset-log-scope" value={scope} onChange={event => { if (event.target.value === 'role') setRole(effectiveRole); setScope(event.target.value) }} className="rounded border border-theme-border bg-theme-elevated px-2 py-1 text-theme-text-primary"><option value="selected">Selected Job</option><option value="role" disabled={roles.length === 0}>Role</option><option value="all">All current members</option></select>
+    {scope === 'role' && <select aria-label="Log role" value={effectiveRole} onChange={event => setRole(event.target.value)} className="rounded border border-theme-border bg-theme-elevated px-2 py-1 text-theme-text-primary">{roles.map(r => <option key={r} value={r}>{r}</option>)}</select>}
+    {aggregate && <span className="text-theme-text-secondary">Snapshot · Refresh for new logs · up to 40 container sources, 1,000 lines and 64 KiB per source · retained Pods only</span>}
+  </div>
+
+  const selectionMissing = memberCollection && selectedRunMissing(resolvedRuns, effectiveRunKey)
 
   useEffect(() => {
-    if (!runsQuery.data) return
-    if (runs.length === 0) {
+    if (!runsQuery.data || runsQuery.isPlaceholderData || selectionMissing) return
+    if (resolvedRuns.length === 0) {
       if (effectiveRunKey) selectRun('')
       return
     }
-    if (!runs.some(run => workloadRunKey(run) === effectiveRunKey)) {
+    if (!resolvedRuns.some(run => workloadRunKey(run) === effectiveRunKey)) {
       selectRun(workloadRunKey(defaultRun ?? runs[0]))
     }
-  }, [runsQuery.data, runs, effectiveRunKey, defaultRun, selectRun])
+  }, [runsQuery.data, runsQuery.isPlaceholderData, runs, resolvedRuns, effectiveRunKey, defaultRun, selectRun, selectionMissing])
 
-  const selectedRun = runs.find(run => workloadRunKey(run) === effectiveRunKey) ?? defaultRun
+  const selectedRun = selectionMissing ? undefined : resolvedRuns.find(run => workloadRunKey(run) === effectiveRunKey) ?? defaultRun
 
   if (runsQuery.isLoading) {
     return (
       <div className="flex h-full items-center justify-center text-theme-text-tertiary">
         <div className="flex items-center gap-2">
           <Loader2 className="h-4 w-4 animate-spin" />
-          <span>Loading runs...</span>
+          <span>{kind === 'JobSet' || kind === 'jobsets' ? 'Loading member Jobs...' : 'Loading runs...'}</span>
         </div>
       </div>
     )
@@ -52,7 +79,21 @@ export function ScheduledWorkloadLogsViewer({ kind, namespace, name, selectedRun
     return (
       <div className="flex h-full flex-col items-center justify-center gap-2 text-theme-text-tertiary">
         <Terminal className="h-8 w-8" />
-        <span>{runsQuery.error instanceof Error ? runsQuery.error.message : 'Failed to load runs'}</span>
+        <span>{runsQuery.error instanceof Error ? runsQuery.error.message : kind === 'JobSet' || kind === 'jobsets' ? 'Failed to load member Jobs' : 'Failed to load runs'}</span>
+      </div>
+    )
+  }
+
+  if (aggregate) return <div className="flex h-full min-h-0 flex-col">{scopeControls}<div className="min-h-0 flex-1"><WorkloadLogsViewer key={JSON.stringify([rootQuery.data?.metadata?.uid, scope, effectiveRole])} kind="jobsets" namespace={namespace} name={name} snapshotOnly role={scope === 'role' ? effectiveRole : undefined} autoStream={false} /></div></div>
+
+  if (selectionMissing) {
+    return (
+      <div className="space-y-3 p-4">{scopeControls}
+        <p className="text-sm text-theme-text-secondary">Selected Job is currently unavailable. It may have been removed or be waiting for recreation. Your selection is preserved if it reappears; choose another shown Job to switch.</p>
+        {runs.length > 0 && <select aria-label="Select a shown member Job" value={effectiveRunKey} onChange={(event) => selectRun(event.target.value)} className="max-w-full rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-sm text-theme-text-primary">
+          <option value={effectiveRunKey} disabled>Choose a shown Job</option>
+          {runs.map((run) => <option key={workloadRunKey(run)} value={workloadRunKey(run)}>{formatRunOption(run, false, true)}</option>)}
+        </select>}
       </div>
     )
   }
@@ -61,38 +102,42 @@ export function ScheduledWorkloadLogsViewer({ kind, namespace, name, selectedRun
     return (
       <div className="flex h-full flex-col items-center justify-center gap-2 text-theme-text-tertiary">
         <Terminal className="h-8 w-8" />
-        <span>No retained runs found</span>
+        <span>{memberCollection ? 'No child Jobs found' : 'No retained runs found'}</span>
       </div>
     )
   }
 
   return (
     <div className="flex h-full min-h-0 flex-col">
+      {scopeControls}
       <div className="shrink-0 border-b border-theme-border bg-theme-surface px-3 py-2">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs font-medium text-theme-text-secondary">Run</span>
+          <span className="text-xs font-medium text-theme-text-secondary">{memberCollection ? 'Job' : 'Run'}</span>
           <select
             value={workloadRunKey(selectedRun)}
             onChange={(event) => selectRun(event.target.value)}
             className="min-w-0 max-w-full rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-sm text-theme-text-primary"
           >
-            {runs.map(run => (
+            {resolvedRuns.map(run => (
               <option key={workloadRunKey(run)} value={workloadRunKey(run)}>
-                {formatRunOption(run, clusterScoped)}
+                {formatRunOption(run, clusterScoped, memberCollection)}
               </option>
             ))}
           </select>
           <span className={clsx('badge-sm', phaseBadgeClass(selectedRun.phase))}>
-            {selectedRun.phase}
+            {selectedRun.phase}{selectedRun.deleting ? ' · deleting' : ''}
           </span>
           <span className="text-xs text-theme-text-tertiary">
             {formatRunTime(selectedRun)}
           </span>
+          {memberCollection && runsQuery.data?.truncated && (
+            <span className="text-xs text-theme-text-tertiary">Showing {runs.length} of {runsQuery.data.total} Jobs</span>
+          )}
         </div>
       </div>
       <div className="min-h-0 flex-1">
         <WorkloadLogsViewer
-          key={`${selectedRun.kind}/${selectedRun.namespace}/${selectedRun.name}`}
+          key={workloadRunLogsKey(selectedRun)}
           kind={selectedRun.kind}
           namespace={selectedRun.namespace}
           name={selectedRun.name}
@@ -125,11 +170,19 @@ function formatRunTime(run: WorkloadRun): string {
   return new Date(raw).toLocaleString()
 }
 
-function formatRunOption(run: WorkloadRun, showNamespace: boolean): string {
-  const bits = [showNamespace ? `${run.namespace}/${run.name}` : run.name, run.phase]
+function formatRunOption(run: WorkloadRun, showNamespace: boolean, memberCollection: boolean): string {
+  const bits = [showNamespace ? `${run.namespace}/${run.name}` : run.name, `${run.phase}${run.deleting ? ' · deleting' : ''}`]
+  if (memberCollection && run.jobset?.replicatedJob) {
+    bits.push(`${run.jobset?.replicatedJob}${run.jobset?.jobIndex ? ` #${run.jobset?.jobIndex}` : ''}`)
+  }
   if (run.progress) bits.push(run.progress)
   else if (run.desired) bits.push(`${run.succeeded ?? 0}/${run.desired}`)
-  const work = run.podTotal ? `${run.podSucceeded ?? 0}/${run.podTotal} pods` : ''
+  const work = run.podTotal ? `${run.podSucceeded ?? 0}/${run.podTotal} completed Pods` : ''
   if (work) bits.push(work)
   return bits.join(' · ')
 }
+
+// A JobSet retry can replace a child Job at the same resource address.
+export function workloadRunLogsKey(run: WorkloadRun): string {
+  return JSON.stringify([run.group, workloadRunKey(run), run.jobset?.restartAttempt, run.jobset?.jobRestartAttempt])
+}

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -10,24 +10,27 @@ interface WorkloadLogsViewerProps {
   namespace: string
   name: string
   /** Start streaming on mount. Default true — workload logs are aggregated from live pods. */
+  snapshotOnly?: boolean
+  role?: string
   autoStream?: boolean
 }
 
-export function WorkloadLogsViewer({ kind, namespace, name, autoStream = true }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ kind, namespace, name, autoStream = true, snapshotOnly = false, role }: WorkloadLogsViewerProps) {
   const desktopDownload = useDesktopDownload()
   const { theme } = useTheme()
 
   const fetchAll = useCallback(async (params: WorkloadLogsFetchParams): Promise<WorkloadLogsResult> => {
     const query = new URLSearchParams()
     if (params.container) query.set('container', params.container)
+    if (role) query.set('role', role)
     if (params.tailLines) query.set('tailLines', String(params.tailLines))
     if (params.sinceSeconds) query.set('sinceSeconds', String(params.sinceSeconds))
     const qs = query.toString()
     const data = await fetchJSON<WorkloadLogsResult>(
-      `/workloads/${kind}/${namespace}/${name}/logs${qs ? `?${qs}` : ''}`
+      `${snapshotOnly ? `/jobsets/${namespace}/${name}` : `/workloads/${kind}/${namespace}/${name}`}/logs${qs ? `?${qs}` : ''}`, { signal: params.signal }
     )
     return data
-  }, [kind, namespace, name])
+  }, [kind, namespace, name, snapshotOnly, role])
 
   const makeStream = useCallback((params: WorkloadLogsFetchParams) => {
     return createWorkloadLogStream(kind, namespace, name, params)
@@ -37,7 +40,7 @@ export function WorkloadLogsViewer({ kind, namespace, name, autoStream = true }:
     <SharedWorkloadLogsViewer
       name={name}
       fetchAll={fetchAll}
-      createStream={makeStream}
+      createStream={snapshotOnly ? undefined : makeStream}
       overrideDownload={desktopDownload}
       forceDark={theme === 'dark' ? true : undefined}
       autoStream={autoStream}

package/src/components/nav/PrimaryNavRail.tsx

@@ -49,9 +49,7 @@ type NavRailView =
 //                content under the cursor).
 //
 // In embedded mode (Radar Hub) this rail is not rendered at all — the host
-// owns the left chrome via its own fleet LeftRail, and Radar falls back to
-// its top-bar pill nav. That keeps the @skyhook-io/radar-app surface
-// non-breaking and avoids triple-stacked left chrome.
+// owns primary view navigation via its own fleet LeftRail.
 
 interface NavItemDef {
   view: NavRailView;
@@ -66,8 +64,7 @@ interface NavItemDef {
 // sits there — next to Cost, its spend-lever sibling. It renders on every
 // cluster (like Issues/Topology): the view itself reads the cluster's capacity
 // posture across all node managers, not just Karpenter. The rail's vertical
-// room lets us surface the views the 8-slot pill bar dropped (Issues,
-// Applications, Cost).
+// room lets us surface every supported standalone destination.
 const NAV_ITEMS: NavItemDef[] = [
   { view: "home", icon: Home, label: "Home" },
   { view: "resources", icon: List, label: "Resources" },

package/src/components/resource/PVCUsageBar.render.test.tsx

@@ -0,0 +1,168 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { NavCustomizationProvider } from '../../context/NavCustomization'
+import { ApiError, type PrometheusPVCUsage } from '../../api/client'
+
+let canConfigure = true
+let roleLoading = false
+let statusResult: { data?: { connected: boolean; discovering?: boolean }; error?: Error }
+let usageResult: { data?: PrometheusPVCUsage; error?: Error }
+vi.mock('../../api/client', async (importActual) => ({
+  ...(await importActual<typeof import('../../api/client')>()),
+  usePrometheusPVCUsage: () => usageResult,
+  usePrometheusStatus: () => statusResult,
+  useAutoPromConnect: () => undefined,
+  useCloudRole: () => ({ canAtLeast: () => canConfigure, isLoading: roleLoading }),
+}))
+const { PVCUsageBar } = await import('./PVCUsageBar')
+const measured: PrometheusPVCUsage = { namespace: 'demo', name: 'disk', used: 0, capacity: 1024, ratio: 0, hasData: true, status: 'available' }
+const render = () => renderToString(<PVCUsageBar namespace="demo" name="disk" />)
+
+describe('PVC usage availability', () => {
+  beforeEach(() => {
+    canConfigure = true
+    roleLoading = false
+    statusResult = { data: { connected: true } }
+    usageResult = {}
+  })
+  it.each([
+    ['no_series', 'No usage measurements reported for this volume'],
+    ['invalid_data', 'Volume usage measurements are invalid'],
+    ['query_failed', 'The usage query failed'],
+  ] as const)('explains %s without a gauge', (status, message) => {
+    usageResult = { data: { ...measured, hasData: false, status } }
+    expect(render()).toContain(message)
+    expect(render()).not.toContain('width:')
+  })
+  it('reports discovery as in progress', () => {
+    statusResult = { data: { connected: false, discovering: true } }
+    expect(render()).toContain('Discovering Prometheus')
+    expect(render()).not.toContain('not connected')
+  })
+  it('does not attribute status denial to this PVC', () => {
+    statusResult = { error: new ApiError('forbidden', 403) }
+    expect(render()).toContain('Metrics access denied')
+  })
+  it('keeps older agent unavailable responses from becoming zero gauges', () => {
+    usageResult = { data: { ...measured, status: undefined, hasData: false, capacity: 0 } }
+    expect(render()).toContain('Usage measurements are unavailable')
+    expect(render()).not.toContain('width:')
+  })
+  it('retains older agent valid measurements', () => {
+    usageResult = { data: { ...measured, status: undefined } }
+    expect(render()).toContain('width:0%')
+  })
+  it('renders valid zero usage as a measurement', () => {
+    usageResult = { data: measured }
+    expect(render().replaceAll('<!-- -->', '')).toContain('(0%)')
+    expect(render()).toContain('width:0%')
+  })
+  it('shows loading instead of an empty row', () => {
+    expect(render()).toContain('Loading usage measurements')
+  })
+  it('does not present stale usage after a refresh failure', () => {
+    usageResult = { data: measured, error: new ApiError('failed', 500) }
+    expect(render()).toContain('The usage query failed')
+    expect(render()).not.toContain('width:')
+  })
+  it('does not present stale usage when disconnected', () => {
+    statusResult = { data: { connected: false } }
+    usageResult = { data: measured }
+    expect(render()).toContain('Prometheus is not connected')
+    expect(render()).not.toContain('width:')
+  })
+  it('distinguishes denied access from unavailable measurements', () => {
+    usageResult = { data: measured, error: new ApiError('forbidden', 403) }
+    expect(render()).toContain('access to usage metrics for this PVC')
+    expect(render()).not.toContain('width:')
+  })
+  it('does not reuse metrics if connection status cannot be checked', () => {
+    statusResult = { data: { connected: true }, error: new Error('failed') }
+    usageResult = { data: measured }
+    expect(render()).toContain('Could not check the metrics connection')
+    expect(render()).not.toContain('width:')
+  })
+})
+
+
+describe('PVC metrics next step', () => {
+  beforeEach(() => {
+    canConfigure = true
+    roleLoading = false
+    statusResult = { data: { connected: true } }
+    usageResult = { data: { ...measured, hasData: false, status: 'no_series' } }
+  })
+  it.each(['no_series', 'invalid_data', 'query_failed'] as const)('offers the existing settings flow for %s', status => {
+    usageResult = { data: { ...measured, hasData: false, status } }
+    expect(render()).toContain('Configure metrics')
+    expect(render()).toContain('type="button"')
+  })
+  it('offers configuration when disconnected', () => {
+    statusResult = { data: { connected: false } }
+    expect(render()).toContain('Configure metrics')
+  })
+  it('offers configuration after a status query failure', () => {
+    statusResult = { error: new Error('status failed') }
+    expect(render()).toContain('Configure metrics')
+  })
+  it('offers configuration for older-agent unavailable measurements', () => {
+    usageResult = { data: { ...measured, status: undefined, hasData: false } }
+    expect(render()).toContain('Configure metrics')
+  })
+  it('gives a non-owner factual guidance without a locked-settings link', () => {
+    canConfigure = false
+    expect(render()).not.toContain('Configure metrics')
+    expect(render()).toContain('check metrics availability for this volume')
+    expect(render()).not.toContain('check the metrics connection')
+  })
+  it('gives a non-owner connection guidance only when disconnected', () => {
+    canConfigure = false
+    statusResult = { data: { connected: false } }
+    expect(render()).toContain('check the metrics connection for this cluster')
+    expect(render()).not.toContain('Configure metrics')
+  })
+  it('does not offer inaccessible standalone settings in an embedded host', () => {
+    const text = renderToString(<NavCustomizationProvider value={{ embedded: true }}><PVCUsageBar namespace="demo" name="disk" /></NavCustomizationProvider>)
+    expect(text).not.toContain('Configure metrics')
+    expect(text).toContain('check metrics availability')
+  })
+  it('does not flash an action while permissions load', () => {
+    roleLoading = true
+    expect(render()).not.toContain('Configure metrics')
+    expect(render()).not.toContain('Ask your operator')
+  })
+  it.each(['usage', 'status'])('guides %s denial toward access rather than connection settings', source => {
+    if (source === 'usage') usageResult = { error: new ApiError('forbidden', 403) }
+    else statusResult = { error: new ApiError('forbidden', 403) }
+    expect(render()).not.toContain('Configure metrics')
+    expect(render()).toContain('review your metrics access')
+  })
+  it.each([true, false])('keeps discovery quiet with a retained usage error (owner=%s)', owner => {
+    canConfigure = owner
+    statusResult = { data: { connected: false, discovering: true } }
+    usageResult = { error: new ApiError('retained query failure', 500) }
+    expect(render()).toContain('Discovering Prometheus')
+    expect(render()).not.toContain('Configure metrics')
+    expect(render()).not.toContain('Ask your operator')
+  })
+  it('keeps status loading quiet with a retained usage error', () => {
+    statusResult = {}
+    usageResult = { error: new ApiError('retained query failure', 500) }
+    expect(render()).toContain('Checking metrics availability')
+    expect(render()).not.toContain('Configure metrics')
+  })
+  it('retains access guidance when denied during discovery', () => {
+    statusResult = { data: { connected: false, discovering: true } }
+    usageResult = { error: new ApiError('forbidden', 403) }
+    expect(render()).toContain('review your metrics access')
+    expect(render()).not.toContain('Configure metrics')
+  })
+  it.each(['status', 'discovery', 'usage', 'available'])('does not add an action during %s', state => {
+    if (state === 'status') statusResult = {}
+    if (state === 'discovery') statusResult = { data: { connected: false, discovering: true } }
+    if (state === 'usage') usageResult = {}
+    if (state === 'available') usageResult = { data: measured }
+    expect(render()).not.toContain('Configure metrics')
+    expect(render()).not.toContain('Ask your operator')
+  })
+})

package/src/components/resource/PVCUsageBar.tsx

@@ -1,26 +1,72 @@
 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.
- */
+import { isForbiddenError, useAutoPromConnect, useCloudRole, usePrometheusPVCUsage, usePrometheusStatus } from '../../api/client'
+import { useNavCustomization } from '../../context/NavCustomization'
+
 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 { canAtLeast, isLoading: roleLoading } = useCloudRole()
+  const settingsAvailable = !useNavCustomization().embedded
+  const canConfigure = settingsAvailable && !roleLoading && canAtLeast('owner')
+  const { data: status, error: statusError } = usePrometheusStatus()
   const isConnected = status?.connected === true
-  const { data: usage } = usePrometheusPVCUsage(namespace, name, isConnected)
+  const { data: usage, error } = usePrometheusPVCUsage(namespace, name, isConnected)
+
+  let unavailable: string | undefined
+  if (isForbiddenError(error)) {
+    unavailable = "You don't have access to usage metrics for this PVC."
+  } else if (isForbiddenError(statusError)) {
+    unavailable = 'Metrics access denied.'
+  } else if (statusError) {
+    unavailable = 'Could not check the metrics connection.'
+  } else if (!status) {
+    unavailable = 'Checking metrics availability…'
+  } else if (status.discovering) {
+    unavailable = 'Discovering Prometheus…'
+  } else if (!isConnected) {
+    unavailable = 'Prometheus is not connected. Used space is unknown.'
+  } else if (error || usage?.status === 'query_failed') {
+    unavailable = 'The usage query failed. Used space is unknown.'
+  } else if (!usage) {
+    unavailable = 'Loading usage measurements…'
+  } else if (usage.status === 'no_series') {
+    unavailable = 'No usage measurements reported for this volume.'
+  } else if (usage.status === 'invalid_data') {
+    unavailable = 'Volume usage measurements are invalid. Used space is unknown.'
+  } else if (!usage.hasData) {
+    unavailable = 'Usage measurements are unavailable.'
+  }
+
+  const denied = isForbiddenError(error) || isForbiddenError(statusError)
+  const waiting = !denied && !statusError && (!status || status.discovering || (isConnected && !usage && !error))
+  const guidance = denied
+    ? 'Ask your operator to review your metrics access.'
+    : !canConfigure && !roleLoading
+      ? !isConnected || statusError
+        ? 'Ask your operator to check the metrics connection for this cluster.'
+        : 'Ask your operator to check metrics availability for this volume.'
+      : undefined
 
-  if (!usage || !usage.hasData) return null
+  if (unavailable || !usage) {
+    return (
+      <section aria-label="PVC usage" className="rounded-lg border border-theme-border bg-theme-surface/30 p-3">
+        <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wide mb-1">Usage</div>
+        <p className="text-sm text-theme-text-tertiary">{unavailable}</p>
+        {!waiting && (
+          canConfigure && !denied ? (
+            <button
+              type="button"
+              className="mt-2 text-xs text-accent hover:underline"
+              onClick={() => window.dispatchEvent(new CustomEvent('radar:open-settings', { detail: { section: 'prometheus' } }))}
+            >Configure metrics</button>
+          ) : guidance ? (
+            <p className="mt-2 text-xs text-theme-text-tertiary">{guidance}</p>
+          ) : null
+        )}
+      </section>
+    )
+  }
 
   const pct = Math.max(0, Math.min(1, usage.ratio))
   const usedLabel = formatMemoryBytes(usage.used)

package/src/components/resource/PrometheusChartsGrid.render.test.tsx

@@ -30,7 +30,7 @@ vi.mock('@skyhook-io/k8s-ui/components/charts', async (importActual) => ({
 const { PrometheusChartsGrid } = await import('./PrometheusChartsGrid')
 const resource = { spec: { template: { spec: { containers: [{ resources: { requests: { cpu: '100m' }, limits: { cpu: '200m' } } }] } } } }
 const render = (url = '/workloads/Deployment/demo/web?tab=metrics', embedded = false) => renderToString(
-  <MemoryRouter initialEntries={[url]}><NavCustomizationProvider value={embedded ? { embedded: true, rightExtras: null } : {}}>
+  <MemoryRouter initialEntries={[url]}><NavCustomizationProvider value={embedded ? { embedded: true } : {}}>
     <PrometheusChartsGrid kind="Deployment" namespace="demo" name="web" resource={resource} />
   </NavCustomizationProvider></MemoryRouter>,
 )