@skyhook-io/radar-app 1.3.1 → 1.3.3

package/src/components/home/mcpToolCatalog.ts

@@ -0,0 +1,276 @@
+// Human-facing catalog for the MCP setup dialog (MCPSetupDialog.tsx).
+//
+// Source of truth for the *set* of tools is the backend registration in
+// internal/mcp/tools.go. This list must stay in sync with it — the Go test
+// TestSetupDialogCoversAllTools (internal/mcp/tools_catalog_test.go) parses
+// this file and fails CI if the tool names here don't exactly match the
+// registered tools. When you add or remove an MCP tool there, update this
+// catalog too.
+//
+// Descriptions here are intentionally shorter and more human-facing than the
+// LLM-oriented routing descriptions in tools.go — different audience, so they
+// are not shared verbatim.
+
+export interface MCPToolParam {
+  arg: string
+  required?: boolean
+  desc: string
+}
+
+export interface MCPToolInfo {
+  name: string
+  write?: boolean
+  desc: string
+  params: MCPToolParam[]
+}
+
+export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
+  {
+    name: 'get_dashboard',
+    desc: 'Cluster or namespace health overview: resource counts, failing pods, unhealthy workloads, recent warning events, and Helm status. Start here before drilling into specific resources.',
+    params: [{ arg: 'namespace', desc: 'filter to a specific namespace' }],
+  },
+  {
+    name: 'top_resources',
+    desc: 'Live CPU/memory ranking (like `kubectl top`) joined with Kubernetes context — pod status, restarts, owner workload, requests, and limits. Ranks pods, workloads, or nodes.',
+    params: [
+      { arg: 'kind', desc: 'pods (default), workloads, or nodes' },
+      { arg: 'namespace', desc: 'filter pods/workloads to a namespace' },
+      { arg: 'sort', desc: 'cpu (default) or memory' },
+      { arg: 'limit', desc: 'max rows (default 20, max 100)' },
+    ],
+  },
+  {
+    name: 'list_resources',
+    desc: 'List Kubernetes resources of a given kind with compact summaries plus per-row health, managedBy, and issue counts. Supports built-in kinds and CRDs.',
+    params: [
+      { arg: 'kind', required: true, desc: 'resource kind, e.g. pods, deployments, services' },
+      { arg: 'group', desc: 'API group when the kind is ambiguous (e.g. serving.knative.dev)' },
+      { arg: 'namespace', desc: 'filter to a specific namespace' },
+      { arg: 'context', desc: 'per-row context: default (summaryContext) or none' },
+    ],
+  },
+  {
+    name: 'get_resource',
+    desc: 'A single resource: minified spec/status/metadata plus resourceContext (relationships, refs, issue/audit/policy rollups). Optionally include heavier event/metrics sidecars.',
+    params: [
+      { arg: 'kind', required: true, desc: 'resource kind, e.g. pod, deployment, service' },
+      { arg: 'name', required: true, desc: 'resource name' },
+      { arg: 'namespace', desc: 'omit for cluster-scoped kinds (Node, ClusterRole, IngressClass, etc.)' },
+      { arg: 'group', desc: 'API group when the kind is ambiguous (e.g. serving.knative.dev for Knative Service vs core Service)' },
+      { arg: 'include', desc: 'events, metrics' },
+      { arg: 'context', desc: 'resourceContext tier: basic (default) or none' },
+    ],
+  },
+  {
+    name: 'get_topology',
+    desc: 'Topology graph of relationships between resources — Services, workloads, Pods, Ingresses, owners. Use traffic view for network flow or resources view for ownership hierarchy.',
+    params: [
+      { arg: 'namespace', desc: 'filter to a specific namespace' },
+      { arg: 'view', desc: 'traffic or resources' },
+      { arg: 'format', desc: 'graph (default) or summary (text)' },
+    ],
+  },
+  {
+    name: 'get_neighborhood',
+    desc: 'BFS-expanded topology around one resource — its upstream/downstream Services, workloads, Pods, refs, and owners. Cheaper and more focused than full topology once you have a suspect.',
+    params: [
+      { arg: 'kind', required: true, desc: 'resource kind, e.g. pod, deployment, service, application' },
+      { arg: 'name', required: true, desc: 'resource name' },
+      { arg: 'namespace', desc: 'resource namespace; omit for cluster-scoped kinds' },
+      { arg: 'group', desc: 'API group to disambiguate colliding kinds' },
+      { arg: 'profile', desc: 'auto (default) or all (every edge type, heavier)' },
+      { arg: 'hops', desc: 'BFS depth (default 1, max 2)' },
+      { arg: 'max_nodes', desc: 'node budget (default 25)' },
+    ],
+  },
+  {
+    name: 'get_events',
+    desc: 'Recent Kubernetes warning events, deduplicated and sorted by recency. Shows reason, message, and occurrence count. Filter to a specific resource by kind/name.',
+    params: [
+      { arg: 'namespace', desc: 'filter to a specific namespace' },
+      { arg: 'limit', desc: 'max events (default 20, max 100)' },
+      { arg: 'kind', desc: 'filter to events for this resource kind' },
+      { arg: 'name', desc: 'filter to events for this resource name' },
+    ],
+  },
+  {
+    name: 'get_pod_logs',
+    desc: 'Filtered log lines from a pod, prioritizing errors and warnings, falling back to recent tail lines. Optional grep, since, and previous-container logs.',
+    params: [
+      { arg: 'namespace', required: true, desc: 'pod namespace' },
+      { arg: 'name', required: true, desc: 'pod name' },
+      { arg: 'container', desc: 'container name (defaults to first)' },
+      { arg: 'tail_lines', desc: 'lines from end (default 200)' },
+      { arg: 'grep', desc: 'regex to filter lines, like kubectl logs | grep' },
+      { arg: 'since', desc: 'only logs newer than this duration (e.g. 30s, 10m, 1h)' },
+      { arg: 'previous', desc: 'logs from the previous terminated container (CrashLoopBackOff)' },
+    ],
+  },
+  {
+    name: 'diagnose',
+    desc: 'One-call workload root-cause bundle: spec + resourceContext + current AND previous logs across all pods + warning events + startup-blocker analysis. For Pod/Deployment/StatefulSet/DaemonSet.',
+    params: [
+      { arg: 'kind', required: true, desc: 'pod, deployment, statefulset, or daemonset' },
+      { arg: 'namespace', required: true, desc: 'workload namespace' },
+      { arg: 'name', required: true, desc: 'resource name' },
+      { arg: 'container', desc: 'specific container (defaults to all)' },
+      { arg: 'tail_lines', desc: 'lines per pod/stream (default 100)' },
+      { arg: 'since', desc: 'only logs newer than this duration' },
+    ],
+  },
+  {
+    name: 'list_namespaces',
+    desc: 'List all Kubernetes namespaces with their status. Use to discover available namespaces before filtering other queries.',
+    params: [],
+  },
+  {
+    name: 'get_changes',
+    desc: 'Recent resource creates, updates, and deletes from the cluster timeline. Use to investigate what changed before an incident.',
+    params: [
+      { arg: 'namespace', desc: 'filter to a specific namespace' },
+      { arg: 'kind', desc: 'filter to a resource kind (e.g. Deployment)' },
+      { arg: 'name', desc: 'filter to a specific resource name' },
+      { arg: 'since', desc: 'lookback duration, e.g. 1h, 30m (default 1h)' },
+      { arg: 'limit', desc: 'max changes (default 20, max 50)' },
+    ],
+  },
+  {
+    name: 'get_cluster_audit',
+    desc: 'Best-practice and security posture findings — Security, Reliability, Efficiency — each with remediation guidance. Static config posture, independent of live operational health.',
+    params: [
+      { arg: 'namespace', desc: 'filter to a specific namespace' },
+      { arg: 'category', desc: 'Security, Reliability, or Efficiency' },
+      { arg: 'severity', desc: 'danger or warning' },
+      { arg: 'limit', desc: 'max findings (default 30, max 100)' },
+    ],
+  },
+  {
+    name: 'list_helm_releases',
+    desc: 'All Helm releases in the cluster with status and resource health — name, namespace, chart, version.',
+    params: [{ arg: 'namespace', desc: 'filter to a specific namespace' }],
+  },
+  {
+    name: 'get_helm_release',
+    desc: 'Detailed Helm release info with owned resources and their status. Optionally include values, revision history, or a manifest diff between revisions.',
+    params: [
+      { arg: 'namespace', required: true, desc: 'release namespace' },
+      { arg: 'name', required: true, desc: 'release name' },
+      { arg: 'include', desc: 'values, history, diff' },
+      { arg: 'diff_revision_1', desc: 'first revision for diff' },
+      { arg: 'diff_revision_2', desc: 'second revision for diff (defaults to current)' },
+    ],
+  },
+  {
+    name: 'list_packages',
+    desc: 'Unified "what\'s installed" view across Helm releases, workload labels, CRD registrations, and GitOps declarations (Argo + Flux), with sources, versions, and health.',
+    params: [
+      { arg: 'namespace', desc: 'filter to a specific namespace' },
+      { arg: 'source', desc: 'H (Helm), L (labels), C (CRDs), A (Argo), F (Flux)' },
+      { arg: 'chart', desc: 'case-insensitive chart-name substring' },
+    ],
+  },
+  {
+    name: 'issues',
+    desc: 'Ranked list of what is broken right now — failing workloads, dangling references, scheduling blockers, and false CRD conditions. Live operational state (distinct from get_cluster_audit posture).',
+    params: [
+      { arg: 'namespace', desc: 'filter to one namespace' },
+      { arg: 'severity', desc: 'comma-separated: critical, warning' },
+      { arg: 'kind', desc: 'comma-separated kind filter' },
+      { arg: 'limit', desc: 'max issues (default 200, max 1000)' },
+      { arg: 'filter', desc: 'optional CEL boolean expression' },
+    ],
+  },
+  {
+    name: 'search',
+    desc: 'Find resources by content/term match — config keys, env refs, images, label values, ConfigMap data, CRD fields, status messages. Secret values are never indexed.',
+    params: [
+      { arg: 'query', required: true, desc: 'tokens AND\'d; modifiers kind:, ns:, label:, image:' },
+      { arg: 'limit', desc: 'max hits (default 50, max 500)' },
+      { arg: 'include', desc: 'summary (default), raw, or none' },
+      { arg: 'filter', desc: 'optional CEL boolean expression' },
+      { arg: 'context', desc: 'per-hit context: default (summaryContext) or none' },
+    ],
+  },
+  {
+    name: 'get_subject_permissions',
+    desc: 'Effective RBAC for a ServiceAccount, User, or Group: the bindings that grant access, a flattened rule list, and (for SAs) the Pods running as it. Answers "what\'s the blast radius if compromised?".',
+    params: [
+      { arg: 'kind', required: true, desc: 'ServiceAccount, User, or Group' },
+      { arg: 'name', required: true, desc: 'subject name' },
+      { arg: 'namespace', desc: 'required for ServiceAccount; omit for User/Group' },
+    ],
+  },
+  {
+    name: 'get_workload_logs',
+    desc: 'Aggregated, filtered logs across all pods of a workload (Deployment, StatefulSet, or DaemonSet) — collected concurrently, filtered for errors/warnings, and deduplicated.',
+    params: [
+      { arg: 'kind', desc: 'deployment (default), statefulset, or daemonset' },
+      { arg: 'namespace', required: true, desc: 'workload namespace' },
+      { arg: 'name', required: true, desc: 'workload name' },
+      { arg: 'container', desc: 'specific container (defaults to all)' },
+      { arg: 'tail_lines', desc: 'lines per pod (default 100)' },
+      { arg: 'grep', desc: 'regex to filter lines, like kubectl logs | grep' },
+      { arg: 'since', desc: 'only logs newer than this duration' },
+      { arg: 'previous', desc: 'logs from the previous terminated container' },
+    ],
+  },
+  {
+    name: 'manage_workload',
+    write: true,
+    desc: 'Operate on a workload: restart triggers a rolling restart, scale changes the replica count, rollback reverts to a previous revision.',
+    params: [
+      { arg: 'action', required: true, desc: 'restart, scale, or rollback' },
+      { arg: 'kind', required: true, desc: 'deployment, statefulset, or daemonset' },
+      { arg: 'namespace', required: true, desc: 'workload namespace' },
+      { arg: 'name', required: true, desc: 'workload name' },
+      { arg: 'replicas', desc: 'target replica count (for scale)' },
+      { arg: 'revision', desc: 'target revision (for rollback)' },
+    ],
+  },
+  {
+    name: 'manage_cronjob',
+    write: true,
+    desc: 'Operate on a CronJob: trigger creates a manual Job run, suspend pauses the schedule, resume re-enables it.',
+    params: [
+      { arg: 'action', required: true, desc: 'trigger, suspend, or resume' },
+      { arg: 'namespace', required: true, desc: 'cronjob namespace' },
+      { arg: 'name', required: true, desc: 'cronjob name' },
+    ],
+  },
+  {
+    name: 'manage_gitops',
+    write: true,
+    desc: 'Operate on GitOps resources. ArgoCD: sync, refresh, terminate, rollback, suspend, resume. FluxCD: reconcile, sync-with-source, suspend, resume.',
+    params: [
+      { arg: 'action', required: true, desc: 'sync/reconcile, refresh, terminate, rollback, suspend, or resume' },
+      { arg: 'tool', required: true, desc: 'argocd or fluxcd' },
+      { arg: 'namespace', required: true, desc: 'resource namespace' },
+      { arg: 'name', required: true, desc: 'resource name' },
+      { arg: 'kind', desc: 'FluxCD resource kind (e.g. kustomization, helmrelease)' },
+    ],
+  },
+  {
+    name: 'apply_resource',
+    write: true,
+    desc: 'Create or update a resource from YAML. apply mode is a server-side apply with Force=true (can take field ownership from Helm/Flux); create mode fails if it exists. Multi-document YAML supported.',
+    params: [
+      { arg: 'yaml', required: true, desc: 'YAML manifest (multi-document with --- supported)' },
+      { arg: 'mode', desc: 'apply (default) or create' },
+      { arg: 'dry_run', desc: 'validate without persisting' },
+      { arg: 'namespace', desc: 'override namespace for the resource' },
+    ],
+  },
+  {
+    name: 'manage_node',
+    write: true,
+    desc: 'Operate on a node: cordon marks it unschedulable, uncordon reverses that, drain cordons then evicts all non-DaemonSet pods.',
+    params: [
+      { arg: 'action', required: true, desc: 'cordon, uncordon, or drain' },
+      { arg: 'name', required: true, desc: 'node name' },
+      { arg: 'delete_empty_dir_data', desc: 'evict pods with emptyDir volumes (default true)' },
+      { arg: 'force', desc: 'evict pods not managed by a controller (default false)' },
+      { arg: 'timeout', desc: 'drain timeout in seconds (default 60)' },
+    ],
+  },
+]

package/src/components/issues/IssuesPane.tsx

@@ -0,0 +1,78 @@
+import { useIssues } from '../../api/client'
+import type { SelectedResource } from '../../types'
+import { IssuesView, PaneLoader, type IssueResourceRef } from '@skyhook-io/k8s-ui'
+import { AlertTriangle, ArrowLeft } from 'lucide-react'
+
+interface IssuesPaneProps {
+  namespaces: string[]
+  onBack: () => void
+  onNavigateToResource: (resource: SelectedResource) => void
+}
+
+// The per-cluster Issues surface. Renders the same shared triage queue
+// (IssuesView) the Hub fleet view uses — single cluster here, so no cluster
+// label and in-app (client-side) resource navigation. Classification +
+// owner-grouping come pre-computed from radar's /api/issues
+// (internal/issues.Compose → Classify → Group).
+export function IssuesPane({ namespaces, onBack, onNavigateToResource }: IssuesPaneProps) {
+  const { data, isLoading, error } = useIssues(namespaces)
+
+  const onResourceClick = (ref: IssueResourceRef) =>
+    onNavigateToResource({ kind: ref.kind, namespace: ref.namespace ?? '', name: ref.name, group: ref.group ?? '' })
+
+  if (isLoading) {
+    return <PaneLoader label="Loading issues…" className="flex-1" />
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+        <p>Failed to load issues</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 p-6 gap-6 overflow-auto">
+      <div className="flex items-center gap-4">
+        <button
+          onClick={onBack}
+          className="p-1.5 rounded-lg hover:bg-theme-hover transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 text-theme-text-secondary" />
+        </button>
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-theme-text-secondary" />
+            <h1 className="text-lg font-semibold text-theme-text-primary">Issues</h1>
+          </div>
+          <p className="text-sm text-theme-text-tertiary mt-1 ml-7">
+            Live cluster problems — crashes, scheduling failures, bad references — grouped by the resource they affect.
+          </p>
+        </div>
+      </div>
+
+      {/* Visibility honesty: when RBAC reads are incomplete, an empty queue may
+          mean "can't see" rather than "nothing broken" — say so up front so the
+          empty state isn't mistaken for a clean bill of health. */}
+      {data?.visibility?.impact && (
+        <div className="-mt-3 flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-xs text-theme-text-secondary">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+          <span>Limited visibility — {data.visibility.impact} Results may be incomplete.</span>
+        </div>
+      )}
+
+      {/* Truncation honesty: when more issues matched than were returned, say
+          so — don't present a capped list as the complete picture. */}
+      {data?.total_matched != null && data.total_matched > (data.issues?.length ?? 0) && (
+        <p className="-mt-3 text-xs text-theme-text-tertiary">
+          Showing {data.issues?.length ?? 0} of {data.total_matched} issues (capped) — narrow by namespace to see the rest.
+        </p>
+      )}
+
+      {/* anyData = the query resolved, i.e. the cluster is reachable; an empty
+          list then means "nothing broken" rather than "not connected". */}
+      <IssuesView issues={data?.issues ?? []} anyData={!!data} onResourceClick={onResourceClick} />
+    </div>
+  )
+}

package/src/components/portforward/PortForwardButton.tsx

@@ -308,7 +308,7 @@ export function PortForwardButton({
                 className="w-full px-3 py-2 text-left text-sm text-theme-text-primary hover:bg-theme-elevated flex items-center justify-between"
               >
                 <span className="flex items-center gap-2 shrink-0">
-                  <code className="text-accent-text">{port.port}</code>
+                  <code className="inline-code">{port.port}</code>
                   <span className="text-theme-text-disabled">/{port.protocol || 'TCP'}</span>
                 </span>
                 {port.name && (

package/src/components/portforward/PortForwardManager.tsx

@@ -794,7 +794,7 @@ export function PortForwardPanel() {
                           <Tooltip content="Click to change local port" delay={300} position="bottom" disabled={!isPanelOpen}>
                           <code
                             className={clsx(
-                              'group/port text-xs bg-theme-base px-2 py-1 rounded text-accent-text transition-all inline-flex items-center gap-1',
+                              'inline-code group/port text-xs transition-all inline-flex items-center gap-1',
                               changingPortId === session.id
                                 ? 'opacity-50'
                                 : 'cursor-pointer hover:ring-1 hover:ring-blue-500/50'

package/src/components/resource/PrometheusCharts.tsx

@@ -1,10 +1,7 @@
 import { useState, useMemo } from 'react'
-import { clsx } from 'clsx'
-import { BarChart3, Wifi, WifiOff, Loader2 } from 'lucide-react'
 import {
-  AreaChart,
+  PrometheusChartsView,
   MetricsSummary as BaseMetricsSummary,
-  SeriesLegend,
   type TimeSeries,
   type ReferenceLine,
 } from '@skyhook-io/k8s-ui/components/charts'
@@ -95,7 +92,6 @@ export function PrometheusCharts({ kind, namespace, name, showEmptyState = false
   const { data: status, isLoading: statusLoading } = usePrometheusStatus()
   const connectMutation = usePrometheusConnect()
 
-  const categories = kind === 'Node' ? NODE_CATEGORIES : WORKLOAD_CATEGORIES
   const [activeCategory, setActiveCategory] = useState<PrometheusMetricCategory>('cpu')
   const [timeRange, setTimeRange] = useState<PrometheusTimeRange>('1h')
 
@@ -116,161 +112,24 @@ export function PrometheusCharts({ kind, namespace, name, showEmptyState = false
     return computeRequestLimitLines(resource, kind, activeCategory)
   }, [resource, kind, activeCategory])
 
-  if (!isSupported) {
-    return null
-  }
-
-  // Loading state — checking Prometheus availability (only show when explicitly requested)
-  if (statusLoading) {
-    if (!showEmptyState) return null
-    return (
-      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
-        <Loader2 className="w-5 h-5 animate-spin mr-2" />
-        Checking Prometheus availability...
-      </div>
-    )
-  }
-
-  // When embedded in Overview (showEmptyState=false), hide when not connected or no data
-  if (!showEmptyState) {
-    if (!isConnected) return null
-    if (!metricsLoading && !metricsError && !metrics?.result?.series?.length) return null
-  }
-
-  if (!isConnected) {
-    return (
-      <div className="flex flex-col items-center justify-center py-12 gap-4">
-        <WifiOff className="w-10 h-10 text-theme-text-quaternary" />
-        <div className="text-center">
-          <p className="text-sm text-theme-text-secondary mb-1">Prometheus not connected</p>
-          <p className="text-xs text-theme-text-tertiary mb-4">
-            {status?.error || 'Connect to view historical CPU, memory, and network metrics'}
-          </p>
-          <button
-            onClick={() => connectMutation.mutate()}
-            disabled={connectMutation.isPending}
-            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg btn-brand"
-          >
-            {connectMutation.isPending ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <Wifi className="w-4 h-4" />
-            )}
-            Discover Prometheus
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  const activeCategoryDef = categories.find(c => c.key === activeCategory) || categories[0]
-
   return (
-    <div className="flex flex-col h-full">
-      {/* Toolbar */}
-      <div className="shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-theme-border bg-theme-surface/50">
-        {/* Category tabs */}
-        <div className="flex items-center gap-1">
-          <BarChart3 className="w-4 h-4 text-theme-text-tertiary mr-2" />
-          {categories.map(cat => (
-            <button
-              key={cat.key}
-              onClick={() => setActiveCategory(cat.key)}
-              className={clsx(
-                'px-2.5 py-1 text-xs font-medium rounded-md transition-colors',
-                activeCategory === cat.key
-                  ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
-                  : 'text-theme-text-tertiary hover:text-theme-text-secondary hover:bg-theme-elevated/50'
-              )}
-            >
-              {cat.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Time range selector */}
-        <select
-          value={timeRange}
-          onChange={e => {
-            const next = e.target.value as PrometheusTimeRange
-            setTimeRange(next)
-            onTimeRangeChange?.(next)
-          }}
-          className="px-2 py-1 text-xs rounded-md bg-theme-elevated border border-theme-border text-theme-text-secondary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
-        >
-          {TIME_RANGES.map(tr => (
-            <option key={tr.value} value={tr.value}>{tr.label}</option>
-          ))}
-        </select>
-      </div>
-
-      {/* Chart area — fixed min-height prevents layout shift while loading */}
-      <div className="min-h-[280px] p-4">
-        {metricsLoading ? (
-          <div className="flex items-center justify-center min-h-[240px] text-theme-text-tertiary">
-            <Loader2 className="w-5 h-5 animate-spin mr-2" />
-            Loading metrics...
-          </div>
-        ) : metricsError ? (
-          <div className="flex items-center justify-center h-full text-red-400 text-sm">
-            Failed to load metrics: {(metricsError as Error).message}
-          </div>
-        ) : metrics?.result?.series?.length ? (
-          <div className="h-full flex flex-col gap-4">
-            {/* Summary stats */}
-            <MetricsSummary
-              series={metrics.result.series}
-              category={activeCategoryDef}
-              unit={metrics.unit}
-            />
-
-            {/* Main chart */}
-            <div className="flex-1 min-h-0">
-              <AreaChart
-                series={metrics.result.series}
-                color={activeCategoryDef.chartColor}
-                fillColor={activeCategoryDef.fillColor}
-                unit={metrics.unit}
-                referenceLines={referenceLines}
-              />
-            </div>
-
-            {/* Per-pod legend for workload-level queries */}
-            {metrics.result.series.length > 1 && (
-              <SeriesLegend series={metrics.result.series} color={activeCategoryDef.chartColor} />
-            )}
-          </div>
-        ) : (
-          <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary">
-            <BarChart3 className="w-8 h-8 mb-2 opacity-40" />
-            <p className="text-sm">No data for this time range</p>
-            <p className="text-xs text-theme-text-quaternary mt-1">
-              Try a different time range or check that metrics are being collected
-            </p>
-            {metrics?.hint && (
-              <p className="mt-3 px-3 py-2 w-full max-w-lg text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-500/10 border border-yellow-500/30 rounded">
-                {metrics.hint}
-              </p>
-            )}
-            {metrics?.query && (
-              <details className="mt-3 w-full max-w-lg text-left">
-                <summary className="text-xs text-theme-text-quaternary cursor-pointer hover:text-theme-text-tertiary">
-                  Diagnostics: show PromQL query
-                </summary>
-                <div className="mt-2 p-2 bg-theme-base border border-theme-border rounded text-xs font-mono text-theme-text-secondary break-all">
-                  {metrics.query}
-                </div>
-                <p className="mt-1.5 text-xs text-theme-text-quaternary">
-                  This query returned no results. Verify in your Prometheus UI that the metric names and labels
-                  ({activeCategoryDef.key === 'cpu' ? 'pod, namespace, container' : 'pod, namespace'}) exist.
-                  Custom label relabeling in your Prometheus configuration may require adjustments.
-                </p>
-              </details>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
+    <PrometheusChartsView
+      kind={kind}
+      showEmptyState={showEmptyState}
+      statusLoading={statusLoading}
+      isConnected={isConnected}
+      statusError={status?.error}
+      onConnect={() => connectMutation.mutate()}
+      connecting={connectMutation.isPending}
+      category={activeCategory}
+      onCategoryChange={setActiveCategory}
+      range={timeRange}
+      onRangeChange={(r) => { setTimeRange(r); onTimeRangeChange?.(r) }}
+      metrics={metrics}
+      metricsLoading={metricsLoading}
+      metricsError={(metricsError as Error) ?? null}
+      referenceLines={referenceLines}
+    />
   )
 }
 

package/src/components/resources/ImageFilesystemModal.tsx

@@ -444,7 +444,7 @@ function AuthenticationHelp({ image, registryType, onRetry }: AuthenticationHelp
       </p>
 
       <p className="text-xs text-theme-text-tertiary text-center max-w-md mb-6">
-        Registry: <span className="font-mono text-theme-text-secondary">{registry}</span>
+        Registry: <span className="inline-code">{registry}</span>
         {registryType && registryType !== 'generic' && (
           <> ({formatAuthMethod(registryType)})</>
         )}
@@ -743,4 +743,3 @@ function FileTreeNode({ node, depth, defaultExpanded = true, image, namespace, p
     </div>
   )
 }
-

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

@@ -21,10 +21,11 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
   const namespace = isClusterRole ? '' : (data?.metadata?.namespace ?? '')
   const name = roleRef.name ?? ''
 
-  const { data: role, isLoading } = useResource<any>(kind, namespace, name)
+  const { data: role, isLoading, error } = useResource<any>(kind, namespace, name)
   // `role` is undefined while loading, then the resource, then potentially
-  // null on 404. Pass [] for "loaded but no rules" so the base renderer's
-  // `rules === null` branch fires only on outright fetch failure (orphan).
+  // 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
@@ -38,6 +39,7 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
       onNavigate={onNavigate}
       roleRules={rules ?? null}
       roleRulesLoading={isLoading}
+      roleRulesError={error}
     />
   )
 }

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

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useScaleWorkload } from '../../../api/client'
 import { useRBACSubject } from '../../../api/rbac'
 import { useQueryClient } from '@tanstack/react-query'
+import type { Relationships, ResourceRef } from '../../../types'
 
 // Map plural lowercase kind to singular PascalCase for ownerReferences matching
 function getOwnerKind(kind: string): string {
@@ -19,10 +20,12 @@ function getOwnerKind(kind: string): string {
 interface WorkloadRendererProps {
   kind: string
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: ResourceRef) => void
+  relationships?: Relationships
+  scaleBlockedBy?: ResourceRef[]
 }
 
-export function WorkloadRenderer({ kind, data, onNavigate }: WorkloadRendererProps) {
+export function WorkloadRenderer({ kind, data, onNavigate, scaleBlockedBy }: WorkloadRendererProps) {
   const navigate = useNavigate()
   const queryClient = useQueryClient()
   const scaleMutation = useScaleWorkload()
@@ -47,6 +50,7 @@ export function WorkloadRenderer({ kind, data, onNavigate }: WorkloadRendererPro
       rbacData={rbacData ?? null}
       rbacLoading={rbacLoading}
       rbacError={rbacError as Error | null}
+      scaleBlockedBy={scaleBlockedBy}
       onScale={async (replicas) => {
         await scaleMutation.mutateAsync({
           kind,

package/src/components/settings/MyPermissionsDialog.tsx

@@ -109,7 +109,7 @@ export function MyPermissionsDialog({ open, onClose }: MyPermissionsDialogProps)
 
           <p className="text-xs text-theme-text-tertiary">
             Computed by the Kubernetes API via{' '}
-            <code className="bg-theme-elevated px-1 rounded">SelfSubjectRulesReview</code>.
+            <code className="inline-code">SelfSubjectRulesReview</code>.
             Shows what you can do in <span className="text-theme-text-secondary">{namespace}</span>,
             plus any cluster-scoped rules that apply everywhere.
           </p>