@skyhook-io/radar-app 1.5.0 → 1.6.1

package/src/components/UserMenu.tsx

@@ -1,9 +1,19 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { User, LogOut } from 'lucide-react'
+import { clsx } from 'clsx'
 import { useAuthMe } from '../api/client'
 import { useQueryClient } from '@tanstack/react-query'
 
-export function UserMenu() {
+interface UserMenuProps {
+  // 'topbar' (default): 27px avatar, dropdown opens downward.
+  // 'rail': a rail-bottom row (avatar + username, fly-out when slim), dropdown
+  // opens UPWARD + escapes the narrow column to the right.
+  variant?: 'topbar' | 'rail'
+  /** Rail variant only: expanded (labels) vs slim (icon + fly-out). */
+  pinned?: boolean
+}
+
+export function UserMenu({ variant = 'topbar', pinned = true }: UserMenuProps = {}) {
   const { data: authMe } = useAuthMe()
   const [isOpen, setIsOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -47,18 +57,54 @@ export function UserMenu() {
     .map(s => s[0]?.toUpperCase() || '')
     .join('')
 
+  const isRail = variant === 'rail'
+  const avatar = (
+    <span className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium shrink-0">
+      {initials || <User className="w-3.5 h-3.5" />}
+    </span>
+  )
+
   return (
-    <div ref={menuRef} className="relative">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium hover:bg-blue-500/25 transition-colors"
-        title={authMe.username}
-      >
-        {initials || <User className="w-3.5 h-3.5" />}
-      </button>
+    <div ref={menuRef} className={clsx('relative', isRail && 'group/item', isRail && !pinned && 'w-10')}>
+      {isRail ? (
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          title={authMe.username}
+          className={clsx(
+            'relative flex h-9 w-full items-center rounded-md text-sm font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary transition-colors',
+            !pinned && 'max-w-10 overflow-hidden',
+          )}
+        >
+          <span className="flex w-10 shrink-0 items-center justify-center">{avatar}</span>
+          <span className={clsx('pr-3 truncate', !pinned && 'opacity-0')}>{authMe.username.split('@')[0]}</span>
+        </button>
+      ) : (
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium hover:bg-blue-500/25 transition-colors"
+          title={authMe.username}
+        >
+          {initials || <User className="w-3.5 h-3.5" />}
+        </button>
+      )}
+
+      {/* Slim-rail fly-out label (account row, collapsed) */}
+      {isRail && !pinned && !isOpen && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute left-full top-1/2 z-50 ml-1 hidden -translate-y-1/2 whitespace-nowrap rounded-md border border-theme-border bg-theme-hover px-2.5 py-1 text-[13px] font-medium text-theme-text-primary opacity-0 shadow-lg shadow-black/30 transition-opacity duration-75 group-hover/item:block group-hover/item:opacity-100"
+        >
+          Account
+        </span>
+      )}
 
       {isOpen && (
-        <div className="absolute right-0 top-full mt-1.5 w-56 bg-theme-surface border border-theme-border rounded-lg shadow-lg z-50 py-1">
+        <div className={clsx(
+          'absolute w-56 bg-theme-surface border border-theme-border rounded-lg shadow-lg z-50 py-1',
+          // Rail: open UP (it sits at the viewport bottom) and align to the rail's
+          // left edge so a 56px slim column doesn't clip it (it extends right).
+          isRail ? 'bottom-full left-2 mb-1.5' : 'right-0 top-full mt-1.5',
+        )}>
           <div className="px-3 py-2 border-b border-theme-border">
             <p className="text-sm font-medium text-theme-text-primary truncate">{authMe.username}</p>
             {authMe.groups && authMe.groups.length > 0 && (

package/src/components/applications/ApplicationsView.tsx

@@ -4,6 +4,7 @@ import {
   ApplicationsList,
   ApplicationDetail,
   CenteredEmpty,
+  PageHeader,
   useToast,
   orderEnvs,
   matchWorkloadAcrossInstances,
@@ -65,26 +66,33 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
     return <AppDetailRoute app={selected} apps={apps} onBack={() => selectApp(null)} onOpenResource={onOpenResource} />
   }
 
-  return (
-    <div className="flex-1 overflow-auto px-4 py-4 sm:px-6">
-      <header className="mb-4 flex flex-col gap-1">
-        <h1 className="text-xl font-semibold text-theme-text-primary">Applications</h1>
-        <p className="max-w-3xl text-sm text-theme-text-secondary">Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence.</p>
-      </header>
+  // The header + status + filters + table chassis lives inside ApplicationsList
+  // (mirroring GitOpsTableView), which renders only on the data path. To keep
+  // the page header from vanishing while loading / on error, the wrapper shows
+  // the same header bar above those states. (Keep title + description in sync
+  // with ApplicationsList's PageHeader.)
+  if (query.isLoading || query.error) {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <div className="shrink-0 border-b border-theme-border px-4 py-4">
+          <PageHeader
+            icon={Boxes}
+            title="Applications"
+            description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
+          />
+        </div>
+        {query.isLoading ? (
+          <CenteredEmpty icon={Boxes} headline="Loading applications…" />
+        ) : (
+          <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
+        )}
+      </div>
+    )
+  }
 
-      {query.isLoading ? (
-        <CenteredEmpty icon={Boxes} headline="Loading applications…" />
-      ) : query.error ? (
-        <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
-      ) : apps.length === 0 ? (
-        <CenteredEmpty
-          icon={Boxes}
-          headline="No applications detected yet"
-          body="Deploy services, workers, or jobs to this cluster to see them grouped by app."
-        />
-      ) : (
-        <ApplicationsList apps={apps} onSelect={selectApp} />
-      )}
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <ApplicationsList apps={apps} onSelect={selectApp} />
     </div>
   )
 }

package/src/components/audit/AuditSettingsDialog.tsx

@@ -73,7 +73,7 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
       <div className="bg-theme-surface rounded-xl shadow-xl w-full max-w-lg mx-4 max-h-[80vh] flex flex-col" onClick={e => e.stopPropagation()}>
         <div className="flex items-center justify-between px-5 py-4 border-b border-theme-border shrink-0">
-          <h2 className="text-sm font-semibold text-theme-text-primary">Audit Settings</h2>
+          <h2 className="text-sm font-semibold text-theme-text-primary">Checks Settings</h2>
           <button onClick={onClose} className="p-1 rounded-lg hover:bg-theme-hover transition-colors">
             <X className="w-4 h-4 text-theme-text-tertiary" />
           </button>

package/src/components/audit/AuditView.tsx

@@ -1,13 +1,12 @@
 import { useState, useCallback } from 'react'
 import { useAudit, useAuditSettings, useUpdateAuditSettings, useCloudRole } from '../../api/client'
 import type { SelectedResource } from '../../types'
-import { ChecksView, PaneLoader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
-import { ArrowLeft, ClipboardCheck, Settings } from 'lucide-react'
+import { ChecksView, PaneLoader, PageHeader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
+import { ShieldCheck, Settings } from 'lucide-react'
 import { AuditSettingsDialog } from './AuditSettingsDialog'
 
 interface AuditViewProps {
   namespaces: string[]
-  onBack: () => void
   onNavigateToResource: (resource: SelectedResource) => void
 }
 
@@ -17,7 +16,7 @@ interface AuditViewProps {
 // come pre-computed from radar's /api/audit (pkg/audit.BuildChecks); local
 // ~/.radar settings are this cluster's "policy" and the row hide-menu writes to
 // them.
-export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditViewProps) {
+export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps) {
   const { data, isLoading, error } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
   const updateSettings = useUpdateAuditSettings()
@@ -73,37 +72,26 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
     onNavigateToResource({ kind: ref.kind, namespace: ref.namespace, name: ref.name, group: ref.group })
 
   return (
-    <div className="flex-1 flex flex-col min-h-0 p-6 gap-6 overflow-auto">
-      {/* Header */}
-      <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">
-            <ClipboardCheck className="w-5 h-5 text-theme-text-secondary" />
-            <h1 className="text-lg font-semibold text-theme-text-primary">Checks</h1>
-          </div>
-          <p className="text-sm text-theme-text-tertiary mt-1 ml-7">
-            Security, reliability, and efficiency best practices (NSA/CISA, CIS, Polaris, Kubescape), grouped into a remediation queue.
-          </p>
-        </div>
-        <div className="flex items-center gap-2 shrink-0">
-          {ignoredCount > 0 && (
-            <button onClick={() => setShowSettings(true)} className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors">{ignoredCount} {ignoredCount === 1 ? 'namespace' : 'namespaces'} hidden</button>
-          )}
-          <button
-            onClick={() => setShowSettings(true)}
-            className="p-2 rounded-lg hover:bg-theme-hover text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-            title="Checks settings"
-          >
-            <Settings className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
+    <div className="flex-1 flex flex-col min-h-0 p-4 gap-4 overflow-auto">
+      <PageHeader
+        icon={ShieldCheck}
+        title="Checks"
+        description="Security, reliability, and efficiency best practices (NSA/CISA, CIS, Polaris, Kubescape), grouped into a remediation queue."
+        actions={
+          <>
+            {ignoredCount > 0 && (
+              <button onClick={() => setShowSettings(true)} className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors">{ignoredCount} {ignoredCount === 1 ? 'namespace' : 'namespaces'} hidden</button>
+            )}
+            <button
+              onClick={() => setShowSettings(true)}
+              className="p-2 rounded-lg hover:bg-theme-hover text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+              title="Checks settings"
+            >
+              <Settings className="w-4 h-4" />
+            </button>
+          </>
+        }
+      />
 
       <ChecksView
         checks={data.groupedChecks ?? []}

package/src/components/gitops/GitOpsView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import yaml from 'yaml'
@@ -204,6 +204,28 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     window.setTimeout(refetchTable, 1200)
   }
 
+  // Cold-cache catch-up: right after a cluster/namespace switch (or first open)
+  // the GitOps CRD informers can still be warming, so the first list resolves
+  // EMPTY even though apps exist — stranding the user on "No applications found"
+  // until the 120s poll (which is why a manual Refresh "fixes" it). When the
+  // fetch settles empty, briefly retry (bounded) to catch the cache as it syncs.
+  // Reset the budget whenever the cluster (apiResources identity) or namespace
+  // scope changes so each switch gets a fresh set of retries.
+  const coldRetriesRef = useRef(0)
+  // While we're still retrying a cold cache, the view shows a spinner (not the
+  // false "No applications found") — so the user sees "loading", not "empty".
+  const [coldRetrying, setColdRetrying] = useState(false)
+  useEffect(() => { coldRetriesRef.current = 0; setColdRetrying(false) }, [apiResources, namespacesParam])
+  useEffect(() => {
+    if (apiResourcesLoading || rowsQuery.isFetching) return
+    if ((rowsQuery.data?.length ?? 0) > 0) { setColdRetrying(false); return }
+    if (coldRetriesRef.current >= 4) { setColdRetrying(false); return }
+    setColdRetrying(true)
+    const t = window.setTimeout(() => { coldRetriesRef.current += 1; refetchTable() }, 2000)
+    return () => window.clearTimeout(t)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowsQuery.data, rowsQuery.isFetching, apiResourcesLoading])
+
   const handleRowAction = (row: GitOpsRow, action: GitOpsRowAction) => {
     const { kindName: kind, namespace, name, id } = row
     const settle = { onSuccess: refetchTableAfterMutation, onSettled: () => markAction(id, action, false) }
@@ -246,7 +268,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     <>
       <SharedGitOpsTableView
         rows={rowsQuery.data ?? []}
-        loading={apiResourcesLoading || countsQuery.isLoading || rowsQuery.isLoading}
+        loading={apiResourcesLoading || countsQuery.isLoading || rowsQuery.isLoading || coldRetrying}
         error={(rowsQuery.error as Error | null) ?? null}
         counts={countsQuery.data?.counts ?? {}}
         onRefresh={() => rowsQuery.refetch()}

package/src/components/helm/ChartBrowser.tsx

@@ -27,7 +27,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
 
   // Repo refresh is gated only by `requireHelmWrite` on the backend
   // (handleUpdateRepository deliberately skips requireCloudRole — it
-  // mutates pod-local chart cache, not cluster state). So the SPA gate
+  // mutates pod-local chart cache, not cluster state). So the frontend gate
   // here must NOT include the Cloud role check, or Cloud viewers with
   // rbac.helm=true would be blocked from a refresh the backend allows.
   const canHelmWrite = useCanHelmWrite()

package/src/components/helm/HelmView.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useRef, useEffect, useCallback, forwardRef } from 'r
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch, ChevronRight } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, PageHeader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import { useHelmReleases, useHelmBatchUpgradeInfo, isForbiddenError } from '../../api/client'
 import type { HelmRelease, SelectedHelmRelease, UpgradeInfo, ChartSource } from '../../types'
@@ -167,6 +167,14 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
     <div className="flex h-full w-full">
       {/* Main Content */}
       <div className="flex-1 flex flex-col overflow-hidden min-w-0 w-full">
+        {/* Page header — consistent across views; the tabs + search sit below. */}
+        <div className="px-4 pt-4 pb-1">
+          <PageHeader
+            icon={Package}
+            title="Helm"
+            description="Installed Helm releases and the chart catalog for this cluster."
+          />
+        </div>
         {/* Tab bar */}
         <div className="flex items-center gap-1 px-4 pt-3 border-b border-theme-border bg-theme-surface/50">
           <button
@@ -204,13 +212,9 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
           <>
             {/* Releases Toolbar */}
             <div className="flex items-center gap-4 px-4 py-3 border-b border-theme-border bg-theme-surface/50 shrink-0">
-              <div className="flex items-center gap-2 text-theme-text-secondary">
-                <Package className="w-5 h-5" />
-                <span className="font-medium">Helm Releases</span>
-                {!isFullyLoaded && (
-                  <RefreshCw className="w-3.5 h-3.5 animate-spin text-theme-text-tertiary" />
-                )}
-              </div>
+              {!isFullyLoaded && (
+                <RefreshCw className="w-3.5 h-3.5 animate-spin text-theme-text-tertiary shrink-0" />
+              )}
               <div className="flex-1 relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
                 <input

package/src/components/helm/RoleGatedPanel.tsx

@@ -22,7 +22,7 @@ interface RoleGatedPanelProps {
  *
  * Bypasses for non-Cloud users (OSS, OIDC, etc.) — `canAtLeast` returns
  * true when no Cloud role is present. The backend gate has the same
- * shape, so the SPA stays in lockstep.
+ * shape, so the frontend stays in lockstep.
  */
 export function RoleGatedPanel({ min, feature, children }: RoleGatedPanelProps) {
   const { role, canAtLeast } = useCloudRole()

package/src/components/home/HomeView.tsx

@@ -182,7 +182,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
                   <BandItem>
                     <AuditCard
                       data={data.audit}
-                      onNavigate={() => onNavigateToView('audit')}
+                      onNavigate={() => onNavigateToView('checks')}
                     />
                   </BandItem>
                 )}

package/src/components/home/mcpToolCatalog.ts

@@ -201,6 +201,40 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
       { arg: 'namespace', desc: 'required for ServiceAccount; omit for User/Group' },
     ],
   },
+  {
+    name: 'query_prometheus',
+    desc: "Run PromQL against the cluster's Prometheus (auto-discovered or configured; works with Thanos, VictoriaMetrics, Mimir). Instant queries return current values; range queries return time-series history with automatic step adjustment. Oversized results return a cardinality summary with a suggested topk rewrite instead of raw data.",
+    params: [
+      { arg: 'query', required: true, desc: 'PromQL query to execute' },
+      { arg: 'type', desc: 'instant (default) or range' },
+      { arg: 'since', desc: 'range lookback, e.g. 30m, 1h, 24h, 7d (default 1h)' },
+      { arg: 'start', desc: 'range RFC3339 start time; overrides since' },
+      { arg: 'end', desc: 'range RFC3339 end time (default now)' },
+      { arg: 'step', desc: 'range resolution, e.g. 30s, 5m (auto-calculated when omitted)' },
+      { arg: 'max_points', desc: 'max data points per series (default 300, max 600)' },
+      { arg: 'timeout', desc: 'query timeout in seconds (default 30, max 180)' },
+    ],
+  },
+  {
+    name: 'discover_metrics',
+    desc: 'Discover exact Prometheus metric names (with type and help text) or values of one label before writing PromQL. Lists active series from the last hour; flags truncation so the selector can be narrowed.',
+    params: [
+      { arg: 'match', desc: 'PromQL series selector filter, e.g. {__name__=~"node_cpu.*"}; required when label is empty' },
+      { arg: 'label', desc: 'discover values of this label instead of metric names, e.g. namespace, pod' },
+      { arg: 'limit', desc: 'max values returned (default 100, max 500)' },
+    ],
+  },
+  {
+    name: 'get_prometheus_rules',
+    desc: 'List Prometheus alerting and recording rules with their PromQL definitions, state (firing/pending/inactive), and active alert instances. The starting point for alert investigation: fetch the rule, then query its expression.',
+    params: [
+      { arg: 'type', desc: 'alert or record (omit for both)' },
+      { arg: 'name', desc: 'substring filter on rule name' },
+      { arg: 'group', desc: 'substring filter on rule group name' },
+      { arg: 'state', desc: 'alerting rules only: firing, pending, or inactive' },
+      { arg: 'limit', desc: 'max rules returned (default 50, max 200)' },
+    ],
+  },
   {
     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.',

package/src/components/issues/IssuesPane.tsx

@@ -1,11 +1,23 @@
+import { useMemo, useState } from 'react'
 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'
+import {
+  IssuesView,
+  PaneLoader,
+  PageHeader,
+  SummaryTile,
+  ISSUE_SEVERITIES,
+  ISSUE_SEVERITY_LABEL,
+  type IssueResourceRef,
+  type IssueSeverity,
+  type SummaryTone,
+} from '@skyhook-io/k8s-ui'
+import { AlertTriangle } from 'lucide-react'
+
+const SEVERITY_TONE: Record<IssueSeverity, SummaryTone> = { critical: 'error', warning: 'warning' }
 
 interface IssuesPaneProps {
   namespaces: string[]
-  onBack: () => void
   onNavigateToResource: (resource: SelectedResource) => void
 }
 
@@ -13,9 +25,28 @@ interface IssuesPaneProps {
 // (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) {
+// (internal/issues.Compose → Classify → Group). Filtering is the host's job
+// (IssuesView is a pure list); single-cluster gets a light severity filter via
+// the header status tiles (clickable → filter), matching the Applications /
+// GitOps header-tile pattern rather than Hub's fleet facet sidebar.
+export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps) {
   const { data, isLoading, error } = useIssues(namespaces)
+  const [severityFilter, setSeverityFilter] = useState<Set<IssueSeverity>>(new Set())
+
+  const allIssues = data?.issues ?? []
+  const totals = useMemo(() => {
+    const t: Record<IssueSeverity, number> = { critical: 0, warning: 0 }
+    for (const i of allIssues) t[i.severity] = (t[i.severity] ?? 0) + 1
+    return t
+  }, [allIssues])
+  const shown = severityFilter.size ? allIssues.filter((i) => severityFilter.has(i.severity)) : allIssues
+
+  const toggleSeverity = (s: IssueSeverity) =>
+    setSeverityFilter((prev) => {
+      const next = new Set(prev)
+      next.has(s) ? next.delete(s) : next.add(s)
+      return next
+    })
 
   const onResourceClick = (ref: IssueResourceRef) =>
     onNavigateToResource({ kind: ref.kind, namespace: ref.namespace ?? '', name: ref.name, group: ref.group ?? '' })
@@ -33,30 +64,37 @@ export function IssuesPane({ namespaces, onBack, onNavigateToResource }: IssuesP
   }
 
   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>
+    <div className="flex-1 flex flex-col min-h-0 p-4 gap-4 overflow-auto">
+      <PageHeader
+        icon={AlertTriangle}
+        title="Issues"
+        description="Live cluster problems — crashes, scheduling failures, bad references — grouped by the resource they affect."
+        actions={
+          allIssues.length > 0 ? (
+            <>
+              <SummaryTile label={allIssues.length === 1 ? 'issue' : 'issues'} value={allIssues.length} />
+              {ISSUE_SEVERITIES.map((s) =>
+                totals[s] > 0 || severityFilter.has(s) ? (
+                  <SummaryTile
+                    key={s}
+                    label={ISSUE_SEVERITY_LABEL[s]}
+                    value={totals[s]}
+                    tone={SEVERITY_TONE[s]}
+                    active={severityFilter.has(s)}
+                    onClick={() => toggleSeverity(s)}
+                  />
+                ) : null,
+              )}
+            </>
+          ) : undefined
+        }
+      />
 
       {/* 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">
+        <div className="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>
@@ -65,14 +103,30 @@ export function IssuesPane({ namespaces, onBack, onNavigateToResource }: IssuesP
       {/* 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">
+        <p className="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} />
+      {/* Filtered-empty is NOT the healthy empty state: when a severity filter
+          hides every row but issues still exist, say "no matches" rather than
+          letting IssuesView render its "nothing broken" terminal state. */}
+      {severityFilter.size > 0 && allIssues.length > 0 && shown.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 py-12 text-center text-sm text-theme-text-secondary">
+          <p>No issues match the selected severity.</p>
+          <button
+            type="button"
+            onClick={() => setSeverityFilter(new Set())}
+            className="text-xs text-skyhook-600 hover:text-skyhook-500 dark:text-skyhook-400"
+          >
+            Clear filter
+          </button>
+        </div>
+      ) : (
+        /* anyData = the query resolved, i.e. the cluster is reachable; an empty
+           list then means "nothing broken" rather than "not connected". */
+        <IssuesView issues={shown} anyData={!!data} onResourceClick={onResourceClick} />
+      )}
     </div>
   )
 }