@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -14,25 +14,35 @@ interface ResourceDetailDrawerProps {
   expanded?: boolean
   /** Called when user clicks collapse in expanded mode */
   onCollapse?: () => void
-  /** Called when user clicks expand button */
-  onExpand?: (resource: SelectedResource) => void
+  /** Called when user clicks expand button (opts.yaml = expanding from YAML view) */
+  onExpand?: (resource: SelectedResource, opts?: { yaml?: boolean }) => void
+  /** Hide the collapse-to-drawer control (mobile: no drawer to collapse to). Default true. */
+  canCollapseToDrawer?: boolean
   /** Navigate to another resource within expanded WorkloadView */
   onNavigateToResource?: (resource: SelectedResource) => void
+  /** 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) {
   return (
     <BaseResourceDetailDrawer {...props}>
-      {({ resource, expanded, initialTab, onClose, onExpand, onBack, onNavigateToResource, onCollapseToDrawer }) => (
+      {({ resource, expanded, active, initialTab, onClose, onExpand, onExpandIntent, onCancelExpandIntent, onBack, onNavigateToResource, onCollapseToDrawer }) => (
         <WorkloadView
           kind={resource.kind}
           namespace={resource.namespace}
           name={resource.name}
           group={resource.group}
           expanded={expanded}
+          active={active}
           initialTab={initialTab}
           onClose={onClose}
           onExpand={onExpand}
+          onExpandIntent={onExpandIntent}
+          onCancelExpandIntent={onCancelExpandIntent}
           onBack={onBack ?? (() => {})}
           onNavigateToResource={onNavigateToResource}
           onCollapseToDrawer={onCollapseToDrawer}

package/src/components/resources/ResourcesView.tsx

@@ -1,25 +1,33 @@
 import { useState, useMemo, useCallback, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
-import { ApiError, fetchJSON, isForbiddenError, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics } from '../../api/client'
+import { ApiError, debugNamespaceLog, fetchJSON, isForbiddenError, useCapabilities, useNamespaceCapabilities, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics, useBulkDeleteResources, useBulkRestartWorkloads, useBulkScaleWorkloads, useAudit } from '../../api/client'
+import { isBadgeWorthy } from '../../utils/auditBadges'
+import type { AuditBadgeMessage } from '@skyhook-io/k8s-ui'
 import { apiUrl, getAuthHeaders, getCredentialsMode, getBasename } from '../../api/config'
 import { useAPIResources } from '../../api/apiResources'
+import { useConnection } from '../../context/ConnectionContext'
 import { initNavigationMap } from '@skyhook-io/k8s-ui'
 import { usePinnedKinds } from '../../hooks/useFavorites'
 import { useOpenLogs, useOpenWorkloadLogs } from '../dock'
 import {
+  canBulkRestartKind,
+  canBulkScaleKind,
   ResourcesView as BaseResourcesView,
   CORE_RESOURCES,
+  intersectWorkloadWrites,
 } from '@skyhook-io/k8s-ui'
-import type { ResourceQueryResult } from '@skyhook-io/k8s-ui'
+import type { Capabilities, ResourceQueryResult, WorkloadWritePermissions } from '@skyhook-io/k8s-ui'
 import type { SelectedResource } from '../../types'
-import type { NavigateToResource } from '../../utils/navigation'
+import { kindToPlural, type NavigateToResource } from '../../utils/navigation'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { getSkeletonYaml } from '../../utils/skeleton-yaml'
 
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
+  reasons?: Record<string, string>
+  unavailable?: string[]
 }
 
 interface ResourcesViewProps {
@@ -28,11 +36,65 @@ interface ResourcesViewProps {
   onResourceClick?: (resource: SelectedResource | null) => void
   onResourceClickYaml?: NavigateToResource
   onKindChange?: () => void
+  onClearNamespaces?: () => void
 }
 
-export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange }: 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',
+  'Event',
+  'apps/ReplicaSet',
+  'discovery.k8s.io/EndpointSlice',
+])
+
+const deniedWorkloadWrites: WorkloadWritePermissions = {
+  deployments: false,
+  daemonSets: false,
+  statefulSets: false,
+  rollouts: false,
+}
+
+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()
+  const { connection } = useConnection()
+
+  const { data: capabilities } = useCapabilities()
+  const namespaceForCapabilities = namespaces.length === 1 ? namespaces[0] : undefined
+  const { data: namespaceCapabilities } = useNamespaceCapabilities(namespaceForCapabilities, capabilities)
+  const namespaceCapabilityNames = useMemo(() => namespaces.length > 1 ? [...namespaces].sort() : [], [namespaces])
+  const { data: namespaceCapabilitiesList } = useQuery<Array<Pick<Capabilities, 'workloadWrites'>>>({
+    queryKey: ['capabilities', 'namespaces', namespaceCapabilityNames],
+    queryFn: async () => {
+      const results = await Promise.allSettled(
+        namespaceCapabilityNames.map(async ns => ({
+          namespace: ns,
+          capabilities: await fetchJSON<Capabilities>(`/capabilities?namespace=${encodeURIComponent(ns)}`),
+        }))
+      )
+      return results.map((result, index) => {
+        if (result.status === 'fulfilled') {
+          return { workloadWrites: result.value.capabilities.workloadWrites }
+        }
+        console.warn(`Failed to fetch namespace capabilities for ${namespaceCapabilityNames[index]}, withholding workload writes:`, result.reason)
+        return { workloadWrites: deniedWorkloadWrites }
+      })
+    },
+    enabled: namespaceCapabilityNames.length > 1 && capabilities != null,
+    staleTime: 60000,
+  })
+  const multiNamespaceWorkloadWrites = useMemo(() => intersectWorkloadWrites(namespaceCapabilitiesList), [namespaceCapabilitiesList])
 
   // API resources discovery
   const { data: apiResources } = useAPIResources()
@@ -43,16 +105,33 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   }, [apiResources])
 
   // Track the selected kind from the k8s-ui component
-  const [selectedKind, setSelectedKind] = useState<{ name: string; kind: string; group: string } | null>(null)
+  const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(null)
+  const workloadWrites = namespaces.length === 0
+    ? capabilities?.workloadWrites
+    : namespaces.length === 1
+      ? namespaceCapabilities?.workloadWrites
+      : multiNamespaceWorkloadWrites
+  const canBulkRestartSelectedKind = useMemo(() => canBulkRestartKind(selectedKind, workloadWrites), [selectedKind, workloadWrites])
+  const canBulkScaleSelectedKind = useMemo(() => canBulkScaleKind(selectedKind, workloadWrites), [selectedKind, workloadWrites])
 
   // Lightweight resource counts for sidebar badges (~2KB instead of ~608MB)
   const namespacesParam = namespaces.join(',')
-  const { data: countsData } = useQuery({
+  const { data: countsData, isError: countsIsError } = useQuery({
     queryKey: ['resource-counts', namespacesParam],
     queryFn: async () => {
       const params = new URLSearchParams()
       if (namespaces.length > 0) params.set('namespaces', namespacesParam)
-      return fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
+      const startedAt = performance.now()
+      debugNamespaceLog('resources:counts-fetch-start', { namespaces, params: params.toString() })
+      try {
+        return await fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
+      } finally {
+        debugNamespaceLog('resources:counts-fetch-end', {
+          namespaces,
+          params: params.toString(),
+          durationMs: Math.round(performance.now() - startedAt),
+        })
+      }
     },
     staleTime: 10000,
     refetchInterval: 60000, // Safety net — SSE k8s_event drives near-real-time invalidation
@@ -67,6 +146,69 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     return match?.isCrd ?? (!!selectedKind.group) // default: has group = likely CRD
   }, [selectedKind, apiResources])
 
+  // The canonical Kind for the selected resource. selectedKind.kind is the plural
+  // URL segment for CRDs/grouped kinds (e.g. "ingressroutes", "ingresses") — only
+  // core no-group kinds resolve to the real Kind there — so resolve it via
+  // discovery to match audit findings, which key by the real Kind ("IngressRoute").
+  const selectedKindCanonical = useMemo(() => {
+    if (!selectedKind) return undefined
+    const match = apiResources?.find(r => r.name === selectedKind.name && r.group === selectedKind.group)
+      ?? CORE_RESOURCES.find(r => r.name === selectedKind.name && r.group === selectedKind.group)
+    return match?.kind ?? selectedKind.kind
+  }, [selectedKind, apiResources])
+
+  // Cluster Audit findings for the selected kind, keyed by "namespace/name" for
+  // the resource list. The list shows ONE kind at a time, so ns/name is enough;
+  // we still match the finding's group (built-ins → real group, CRDs → "") so a
+  // kind shared across groups doesn't bleed findings across the two lists. Only
+  // "badge-worthy" findings count (reference-integrity / lifecycle) — posture
+  // and best-practice nags fire near-universally and would just be noise.
+  const audit = useAudit(namespaces)
+  const auditBadges = useMemo(() => {
+    if (!selectedKind || !audit.data?.findings) return undefined
+    const wantGroup = isSelectedCrd ? '' : selectedKind.group
+    const map: Record<string, { danger: number; warning: number; messages: AuditBadgeMessage[] }> = {}
+    for (const f of audit.data.findings) {
+      if (f.kind !== selectedKindCanonical || (f.group ?? '') !== wantGroup) continue
+      if (!isBadgeWorthy(f, audit.data.checks)) continue
+      const k = `${f.namespace || ''}/${f.name}`
+      const cur = map[k] ?? { danger: 0, warning: 0, messages: [] }
+      if (f.severity === 'danger') cur.danger++
+      else if (f.severity === 'warning') cur.warning++
+      cur.messages.push({ severity: f.severity, message: f.message })
+      map[k] = cur
+    }
+    for (const cur of Object.values(map)) {
+      cur.messages.sort((a, b) => (a.severity === 'danger' ? 0 : 1) - (b.severity === 'danger' ? 0 : 1))
+    }
+    return map
+  }, [audit.data?.findings, audit.data?.checks, selectedKind, selectedKindCanonical, isSelectedCrd])
+
+  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 || (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 && 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
+  const largeListGuard = selectedKind && largeListBlocked
+    ? {
+        kind: selectedKind.name,
+        count: selectedCountUnavailable ? undefined : selectedCount,
+        reason: selectedCountUnavailable ? 'count-unavailable' as const : 'too-many' as const,
+        limit: LARGE_RESOURCE_LIST_LIMIT,
+        namespaces,
+      }
+    : null
+
   // Fetch full data only for the selected kind
   const selectedKindQuery = useQuery({
     queryKey: ['resources', selectedKind?.name, isSelectedCrd ? selectedKind?.group : '', namespaces],
@@ -75,17 +217,32 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       const params = new URLSearchParams()
       if (namespaces.length > 0) params.set('namespaces', namespacesParam)
       if (isSelectedCrd && selectedKind.group) params.set('group', selectedKind.group)
+      const startedAt = performance.now()
+      debugNamespaceLog('resources:selected-kind-fetch-start', {
+        kind: selectedKind.name,
+        group: isSelectedCrd ? selectedKind.group : '',
+        namespaces,
+        params: params.toString(),
+      })
       const res = await fetch(apiUrl(`/resources/${selectedKind.name}?${params}`), {
         credentials: getCredentialsMode(),
         headers: getAuthHeaders(),
       })
+      debugNamespaceLog('resources:selected-kind-fetch-response', {
+        kind: selectedKind.name,
+        group: isSelectedCrd ? selectedKind.group : '',
+        namespaces,
+        params: params.toString(),
+        status: res.status,
+        durationMs: Math.round(performance.now() - startedAt),
+      })
       if (!res.ok) {
         const errorData = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
         throw new ApiError(errorData.error || `Failed to fetch ${selectedKind.name}`, res.status, errorData)
       }
       return res.json()
     },
-    enabled: !!selectedKind,
+    enabled: !!selectedKind && !selectedKindQueryBlocked,
     staleTime: 30000,
     refetchInterval: 120000, // Safety net — SSE k8s_event drives near-real-time invalidation
     retry: (failureCount: number, error: Error) => {
@@ -98,17 +255,19 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   const selectedKindQueryResult: ResourceQueryResult | undefined = useMemo(() => {
     if (!selectedKind) return undefined
     return {
-      data: selectedKindQuery.data as any[] | undefined,
-      isLoading: selectedKindQuery.isLoading,
-      error: selectedKindQuery.error,
+      resourceName: selectedKind.name,
+      group: selectedKind.group,
+      data: selectedKindQueryBlocked ? [] : selectedKindQuery.data as any[] | undefined,
+      isLoading: waitingForGuardCount || selectedKindQuery.isLoading,
+      error: selectedKindQueryBlocked ? undefined : selectedKindQuery.error,
       refetch: selectedKindQuery.refetch,
       dataUpdatedAt: selectedKindQuery.dataUpdatedAt,
     }
-  }, [selectedKind, selectedKindQuery.data, selectedKindQuery.isLoading, selectedKindQuery.error, selectedKindQuery.refetch, selectedKindQuery.dataUpdatedAt])
+  }, [selectedKind, selectedKindQueryBlocked, waitingForGuardCount, selectedKindQuery.data, selectedKindQuery.isLoading, selectedKindQuery.error, selectedKindQuery.refetch, selectedKindQuery.dataUpdatedAt])
 
   // Metrics
-  const { data: topPodMetrics } = useTopPodMetrics()
-  const { data: topNodeMetrics } = useTopNodeMetrics()
+  const { data: topPodMetrics } = useTopPodMetrics({ enabled: topPodMetricsEnabled, namespaces })
+  const { data: topNodeMetrics } = useTopNodeMetrics({ enabled: topNodeMetricsEnabled })
 
   // Certificate expiry
   const { data: certExpiry, isError: certExpiryError } = useSecretCertExpiry()
@@ -120,6 +279,11 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   const openLogs = useOpenLogs()
   const openWorkloadLogs = useOpenWorkloadLogs()
 
+  // Bulk delete
+  const bulkDeleteMutation = useBulkDeleteResources()
+  const bulkRestartMutation = useBulkRestartWorkloads()
+  const bulkScaleMutation = useBulkScaleWorkloads()
+
   // Navigation adapter. k8s-ui constructs paths from `basePath` (which
   // includes the router basename so they line up with window.location.pathname
   // for path-equality checks) and from `window.location.pathname` directly.
@@ -160,23 +324,29 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   return (
     <>
     <BaseResourcesView
-      key={location.pathname}
+      key={connection.context || 'default'}
       namespaces={namespaces}
       selectedResource={selectedResource}
       onResourceClick={onResourceClick}
       onResourceClickYaml={onResourceClickYaml}
       onKindChange={onKindChange}
+      onClearNamespaces={onClearNamespaces}
       // 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}
       selectedKindQuery={selectedKindQueryResult}
+      connectionState={connection.state}
+      largeListGuard={largeListGuard}
       onSelectedKindChange={setSelectedKind}
       topPodMetrics={topPodMetrics}
       topNodeMetrics={topNodeMetrics}
       certExpiry={certExpiry}
       certExpiryError={certExpiryError}
+      auditBadges={auditBadges}
       // Pinned kinds
       pinned={pinned}
       togglePin={togglePin}
@@ -197,6 +367,13 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       onOpenWorkloadLogs={openWorkloadLogs}
       // Create resource
       onCreateResource={handleCreateResource}
+      // Bulk operations
+      onBulkDelete={(items, options) => bulkDeleteMutation.mutate({ items, force: options?.force }, { onSuccess: options?.onSuccess })}
+      isBulkDeleting={bulkDeleteMutation.isPending}
+      onBulkRestart={canBulkRestartSelectedKind ? (items, options) => bulkRestartMutation.mutate({ items }, { onSuccess: options?.onSuccess }) : undefined}
+      isBulkRestarting={canBulkRestartSelectedKind && bulkRestartMutation.isPending}
+      onBulkScale={canBulkScaleSelectedKind ? (items, replicas, options) => bulkScaleMutation.mutate({ items, replicas }, { onSuccess: options?.onSuccess }) : undefined}
+      isBulkScaling={canBulkScaleSelectedKind && bulkScaleMutation.isPending}
     />
     <CreateResourceDialog
       open={createDialogOpen}
@@ -204,7 +381,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       initialYaml={createDialogYaml}
       title={createDialogTitle}
       onCreated={(result) => {
-        onResourceClick?.({ kind: result.kind, namespace: result.namespace, name: result.name, group: '' })
+        onResourceClick?.({ kind: kindToPlural(result.kind), namespace: result.namespace, name: result.name, group: '' })
       }}
     />
     </>

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/HPARenderer.tsx

@@ -1 +1,20 @@
-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'
+import type { HPADiagnosis } from '@skyhook-io/k8s-ui'
+
+interface HPARendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  hpaDiagnosis?: HPADiagnosis
+}
+
+export function HPARenderer({ data, onNavigate, hpaDiagnosis }: HPARendererProps) {
+  return (
+    <BaseHPARenderer
+      data={data}
+      onNavigate={onNavigate}
+      hpaDiagnosis={hpaDiagnosis}
+      extraSections={<HPACharts data={data} />}
+    />
+  )
+}

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

@@ -0,0 +1,31 @@
+import { NamespaceRenderer as BaseNamespaceRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/NamespaceRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useRBACNamespace } from '../../../api/rbac'
+import { useNamespaceQuotas } from '../../../api/quotas'
+import { isForbiddenError } from '../../../api/client'
+
+interface NamespaceRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function NamespaceRenderer({ data, onNavigate }: NamespaceRendererProps) {
+  const name = data?.metadata?.name ?? ''
+  const { data: rbacData, isLoading, error } = useRBACNamespace(name, !!name)
+  const { data: quotaData, error: quotaError } = useNamespaceQuotas(name, !!name)
+  // 403 → the user can't see quotas; hide the section (same posture as the
+  // RBAC sections). Surface other errors (500/503) so a quota-constrained
+  // namespace doesn't silently render as quota-free.
+  const quotaErr = quotaError && !isForbiddenError(quotaError) ? (quotaError as Error) : null
+  return (
+    <BaseNamespaceRenderer
+      data={data}
+      rbacData={rbacData ?? null}
+      rbacLoading={isLoading}
+      rbacError={error as Error | null}
+      quotaData={quotaData}
+      quotaError={quotaErr}
+      onNavigate={onNavigate}
+    />
+  )
+}

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

@@ -1,6 +1,6 @@
 import { NodeRenderer as BaseNodeRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/NodeRenderer'
 import { useNavigate } from 'react-router-dom'
-import { useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
 import { serializeColumnFilters } from '../resource-utils'
 
 interface NodeRendererProps {
@@ -13,8 +13,13 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
   const nodeName = data.metadata?.name
 
   // Fetch node metrics
-  const { data: metrics } = useNodeMetrics(nodeName)
-  const { data: metricsHistory } = useNodeMetricsHistory(nodeName)
+  const metricsHistoryQuery = useNodeMetricsHistory(nodeName)
+  const { data: metricsHistory } = metricsHistoryQuery
+  const historyMetricsUnavailable = metricsHistory?.metricsUnavailable === true
+  const liveMetricsEnabled = shouldFetchLiveMetrics(metricsHistoryQuery.isFetched || metricsHistoryQuery.isError, historyMetricsUnavailable)
+  const { data: metrics } = useNodeMetrics(nodeName, { enabled: liveMetricsEnabled })
+  const metricsUnavailable = historyMetricsUnavailable || isLiveMetricsUnavailable(liveMetricsEnabled, metrics)
+  const visibleMetrics = getVisibleLiveMetrics(liveMetricsEnabled, metricsUnavailable, metrics)
 
   // Determine whether to hide metrics-server section (Prometheus has data)
   const { data: prometheusStatus } = usePrometheusStatus()
@@ -36,8 +41,9 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
         params.set('filters', serializeColumnFilters({ node: [nodeName] }))
         navigate(`/resources/pods?${params.toString()}`)
       } : undefined}
-      metrics={metrics}
+      metrics={visibleMetrics}
       metricsHistory={metricsHistory}
+      metricsUnavailable={metricsUnavailable}
       hideMetricsServer={hideMetricsServer}
     />
   )

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

@@ -1 +1,19 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/PVCRenderer'
+import { PVCRenderer as BasePVCRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/PVCRenderer'
+import { PVCUsageBar } from '../../resource/PVCUsageBar'
+
+interface PVCRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function PVCRenderer({ data, onNavigate }: PVCRendererProps) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  return (
+    <BasePVCRenderer
+      data={data}
+      onNavigate={onNavigate}
+      extraSections={namespace && name ? <PVCUsageBar namespace={namespace} name={name} /> : undefined}
+    />
+  )
+}

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

@@ -2,8 +2,9 @@ import { PodRenderer as BasePodRenderer } from '@skyhook-io/k8s-ui/components/re
 import type { CopyHandler } from '@skyhook-io/k8s-ui/components/ui/drawer-components'
 import type { ResolvedEnvFrom } from '@skyhook-io/k8s-ui'
 import { useOpenTerminal, useOpenLogs } from '../../dock'
-import { useNamespacedCapabilities } from '../../../contexts/CapabilitiesContext'
-import { usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { useRBACSubject } from '../../../api/rbac'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
 import { ImageFilesystemModal } from '../ImageFilesystemModal'
 import { PodFilesystemModal } from '../PodFilesystemModal'
@@ -26,10 +27,20 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
 
   // Capabilities (namespace-scoped: re-checks RBAC if globally denied)
   const { canExec, canViewLogs, canPortForward } = useNamespacedCapabilities(namespace)
+  // Show the port-forward affordance for a live forward (local + RBAC) OR when
+  // not local — in-cluster/Cloud surfaces a copy-paste kubectl command instead.
+  // The button itself picks live vs. copy-command based on deployment mode.
+  const isLocal = useIsLocalDeployment()
+  const showPortForward = canPortForward || !isLocal
 
   // Metrics
-  const { data: metrics } = usePodMetrics(namespace, podName)
-  const { data: metricsHistory } = usePodMetricsHistory(namespace, podName)
+  const metricsHistoryQuery = usePodMetricsHistory(namespace, podName)
+  const { data: metricsHistory } = metricsHistoryQuery
+  const historyMetricsUnavailable = metricsHistory?.metricsUnavailable === true
+  const liveMetricsEnabled = shouldFetchLiveMetrics(metricsHistoryQuery.isFetched || metricsHistoryQuery.isError, historyMetricsUnavailable)
+  const { data: metrics } = usePodMetrics(namespace, podName, { enabled: liveMetricsEnabled })
+  const metricsUnavailable = historyMetricsUnavailable || isLiveMetricsUnavailable(liveMetricsEnabled, metrics)
+  const visibleMetrics = getVisibleLiveMetrics(liveMetricsEnabled, metricsUnavailable, metrics)
 
   // Hide metrics-server section when Prometheus has CPU data
   const { data: prometheusStatus } = usePrometheusStatus()
@@ -42,6 +53,15 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
   ) ?? false)
   const hideMetricsServer = prometheusHasCPU || (prometheusConnected && prometheusCPULoading)
 
+  // RBAC reverse-lookup for the Pod's ServiceAccount. Defaults to "default" —
+  // that's the SA every Pod uses when spec.serviceAccountName is unset, which
+  // is itself a useful signal (operators often don't realize "default" still
+  // has whatever permissions the namespace's defaults grant).
+  const saName = data.spec?.serviceAccountName || 'default'
+  const { data: rbacData, isLoading: rbacLoading, error: rbacError } = useRBACSubject(
+    'ServiceAccount', namespace ?? '', saName, !!namespace,
+  )
+
   return (
     <BasePodRenderer
       data={data}
@@ -50,9 +70,12 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
       onNavigate={onNavigate}
       onOpenLogs={onOpenLogs}
       resolvedEnvFrom={resolvedEnvFrom}
+      rbacData={rbacData ?? null}
+      rbacLoading={rbacLoading}
+      rbacError={rbacError as Error | null}
       canExec={canExec}
       canViewLogs={canViewLogs}
-      canPortForward={canPortForward}
+      canPortForward={showPortForward}
       onOpenTerminal={(params) => openTerminal(params)}
       onOpenLogsPanel={(params) => openLogsPanel(params)}
       renderPortAction={({ namespace: ns, podName: pod, port, protocol, disabled }) => (
@@ -64,8 +87,9 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
           disabled={disabled}
         />
       )}
-      metrics={metrics}
+      metrics={visibleMetrics}
       metricsHistory={metricsHistory}
+      metricsUnavailable={metricsUnavailable}
       hideMetricsServer={hideMetricsServer}
       renderImageBrowser={({ image, namespace: ns, podName: pod, pullSecrets, onClose, onSwitchToPodFiles }) => (
         <ImageFilesystemModal

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

@@ -1 +1,45 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/RoleBindingRenderer'
+import { RoleBindingRenderer as BaseRoleBindingRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/RoleBindingRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useResource } from '../../../api/client'
+
+interface RoleBindingRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+// Reuses the generic resource endpoint to fetch the referenced Role/ClusterRole
+// so the base renderer can show an inline rules preview. A dedicated /api/rbac
+// "rules-only" endpoint would be tighter, but the generic one is already
+// cached and respects per-user RBAC the same way.
+export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererProps) {
+  const roleRef = data?.roleRef ?? {}
+  const isClusterRole = roleRef.kind === 'ClusterRole'
+  const kind = isClusterRole ? 'clusterroles' : 'roles'
+  // For ClusterRole the namespace is cluster-scoped (empty); for Role the
+  // binding's namespace is the role's namespace (Roles are namespaced and
+  // RoleBindings can only reference Roles in their own namespace).
+  const namespace = isClusterRole ? '' : (data?.metadata?.namespace ?? '')
+  const name = roleRef.name ?? ''
+
+  const { data: role, isLoading, error } = useResource<any>(kind, namespace, name)
+  // `role` is undefined while loading, then the resource, then potentially
+  // null on 404 / 403. Pass [] for "loaded but no rules" so the base
+  // renderer's `rules === null` branch fires only on outright fetch failure
+  // (orphan or forbidden); `roleRulesError` then disambiguates the two.
+  const rules =
+    isLoading
+      ? undefined
+      : role
+        ? (role.rules ?? [])
+        : null
+
+  return (
+    <BaseRoleBindingRenderer
+      data={data}
+      onNavigate={onNavigate}
+      roleRules={rules ?? null}
+      roleRulesLoading={isLoading}
+      roleRulesError={error}
+    />
+  )
+}

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

@@ -1 +1,27 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/RoleRenderer'
+import { RoleRenderer as BaseRoleRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/RoleRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useRBACRole } from '../../../api/rbac'
+
+interface RoleRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function RoleRenderer({ data, onNavigate }: RoleRendererProps) {
+  // ClusterRole has no namespace; Role does. The kind in the manifest is
+  // authoritative — RoleRenderer is shared between both kinds via the
+  // dispatch, so checking it here is the only way to know which we are.
+  const kind: 'Role' | 'ClusterRole' = data?.kind === 'ClusterRole' ? 'ClusterRole' : 'Role'
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const { data: rbacRoleData, isLoading, error } = useRBACRole(kind, namespace, name, !!name)
+  return (
+    <BaseRoleRenderer
+      data={data}
+      rbacRoleData={rbacRoleData ?? null}
+      rbacRoleLoading={isLoading}
+      rbacRoleError={error as Error | null}
+      onNavigate={onNavigate}
+    />
+  )
+}