@skyhook-io/radar-app 1.4.2 → 1.6.0

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>
   )
 }

package/src/components/nav/PrimaryNavRail.tsx

@@ -0,0 +1,282 @@
+import type { ComponentType } from 'react'
+import type { ReactNode } from 'react'
+import { Home, Network, List, Clock, AlertTriangle, Package, GitBranch, Boxes, Activity, DollarSign, ShieldCheck, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import { clsx } from 'clsx'
+import type { MainView } from '../../types'
+
+// The views the rail can navigate to. Broader than k8s-ui's ExtendedMainView
+// (which omits 'applications') — it mirrors the navigable subset of App.tsx's
+// own view union, so onNavigate accepts App's setMainView directly.
+type NavRailView = MainView | 'issues' | 'traffic' | 'gitops' | 'applications' | 'cost' | 'checks'
+
+// Primary left nav rail for standalone (non-embedded) Radar.
+//
+// Ported from radar-hub-web's src/shell/LeftRail.tsx, simplified for OSS:
+// Radar's window is desktop-only (App.tsx outer `min-w-[800px]`), so there's
+// no mobile slide-in sheet — just two committed states driven by a persisted
+// pin (see useNavRailPinned):
+//   - pinned   → labeled w-48 sidebar.
+//   - unpinned → slim w-14 icon rail; labels surface as `left-full` fly-outs
+//                on hover (NOT a whole-rail hover-expand, which would reflow
+//                content under the cursor).
+//
+// In embedded mode (Radar Hub) this rail is not rendered at all — the host
+// owns the left chrome via its own fleet LeftRail, and Radar falls back to
+// its top-bar pill nav. That keeps the @skyhook-io/radar-app surface
+// non-breaking and avoids triple-stacked left chrome.
+
+interface NavItemDef {
+  view: NavRailView
+  icon: ComponentType<{ className?: string }>
+  label: string
+}
+
+// The full standalone view set, flat (no group dividers). Order descends by
+// day-to-day frequency: Home, then the Resources/Issues/Topology core ("what's
+// running / what's wrong / how's it wired"), then app + temporal views,
+// delivery, and finally the periodic posture/spend pair. The rail's vertical
+// room lets us surface the views the 8-slot pill bar dropped (Issues,
+// Applications, Cost).
+const NAV_ITEMS: NavItemDef[] = [
+  { view: 'home', icon: Home, label: 'Home' },
+  { view: 'resources', icon: List, label: 'Resources' },
+  { view: 'issues', icon: AlertTriangle, label: 'Issues' },
+  { view: 'topology', icon: Network, label: 'Topology' },
+  { view: 'applications', icon: Boxes, label: 'Applications' },
+  { view: 'timeline', icon: Clock, label: 'Timeline' },
+  { view: 'traffic', icon: Activity, label: 'Traffic' },
+  { view: 'helm', icon: Package, label: 'Helm' },
+  { view: 'gitops', icon: GitBranch, label: 'GitOps' },
+  { view: 'checks', icon: ShieldCheck, label: 'Checks' },
+  { view: 'cost', icon: DollarSign, label: 'Cost' },
+]
+
+interface PrimaryNavRailProps {
+  // `string`, not ExtendedMainView: App.tsx's mainView is a superset
+  // (adds 'applications'/'workload'/'compare') that isn't in k8s-ui's
+  // ExtendedMainView. Active state only needs equality, so accept any
+  // view id and compare against our NAV_ITEMS views.
+  activeView: string
+  onNavigate: (view: NavRailView) => void
+  pinned: boolean
+  onTogglePinned: () => void
+  // Hidden on narrow windows where the rail is responsively forced slim — an
+  // expand control there would just re-breach the content floor.
+  showPinToggle?: boolean
+  // Rail-bottom "me & my tools" cluster. onOpenSettings opens the Settings
+  // dialog; accountSlot is the account control (App passes <UserMenu variant=…>,
+  // which self-nulls without auth so the row vanishes in no-auth OSS).
+  onOpenSettings?: () => void
+  accountSlot?: ReactNode
+}
+
+export function PrimaryNavRail({ activeView, onNavigate, pinned, onTogglePinned, showPinToggle = true, onOpenSettings, accountSlot }: PrimaryNavRailProps) {
+  return (
+    <aside
+      aria-label="Primary navigation"
+      className={clsx(
+        // Dedicated sidebar token = the DEEPEST layer of the elevation scale, so
+        // the rail reads as chrome on EVERY view — not just ones where a `surface`
+        // facet pane happens to sit next to it (the content floor is `base`, which
+        // a `base` rail blends into). Neutral by design: the brand accent lives on
+        // the active item, not the nav background.
+        'shrink-0 flex flex-col bg-theme-sidebar border-r border-theme-border h-full transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]',
+        // w-44 (176px): OSS labels are short (longest is "Applications"), so the
+        // rail is trimmer than Radar Cloud's w-60 (which carries long cluster
+        // names). Keep in sync with the minWidth content-floor calc in App.tsx.
+        pinned ? 'w-44' : 'w-14',
+      )}
+    >
+      <BrandRow pinned={pinned} onNavigate={onNavigate} />
+
+      {/* Pinned: the nav owns the flex space and scrolls internally on short
+          windows, so the rail-bottom account/settings/pin row stays reachable.
+          Slim: keep the nav at natural height with a spacer below — an
+          overflow-y container would clip the `left-full` fly-out labels
+          (overflow-y:auto forces overflow-x to clip), and those ARE the labels
+          in slim mode. The slim short-window case is doubly-rare (slim is
+          width-triggered) and yields to keeping fly-outs intact. */}
+      <nav
+        className={clsx(
+          'flex flex-col gap-0.5 pt-3 px-2',
+          pinned && 'flex-1 min-h-0 overflow-y-auto',
+        )}
+      >
+        {NAV_ITEMS.map((item) => (
+          <NavRailItem
+            key={item.view}
+            item={item}
+            active={activeView === item.view}
+            pinned={pinned}
+            onNavigate={onNavigate}
+          />
+        ))}
+      </nav>
+
+      {!pinned && <div className="flex-1" />}
+
+      {/* "Me & my tools" — account + settings, the conventional rail-bottom
+          cluster (VS Code / Discord / ArgoCD / Radar Cloud's own UserOrgMenu).
+          accountSlot self-nulls without auth, so no-auth OSS shows only Settings. */}
+      <nav className="flex flex-col gap-0.5 px-2 pt-1 border-t border-theme-border/50">
+        {accountSlot}
+        {onOpenSettings && (
+          <RailActionRow icon={Settings} label="Settings" pinned={pinned} onClick={onOpenSettings} />
+        )}
+      </nav>
+
+      {/* Pin / unpin toggle — anchored at the bottom (VS Code / Linear pattern).
+          The icon points the direction the rail will move: close-panel when
+          expanded, open-panel when slim. Hidden when the rail is responsively
+          forced slim (showPinToggle=false) — expanding there isn't available. */}
+      {showPinToggle && (
+      <div className="px-2 pb-2 pt-1 border-t border-theme-border/50">
+        <button
+          type="button"
+          onClick={onTogglePinned}
+          aria-label={pinned ? 'Collapse navigation' : 'Expand navigation'}
+          title={pinned ? 'Collapse navigation' : 'Expand navigation'}
+          className="group/pin relative flex h-9 w-full items-center rounded-md text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-secondary transition-colors"
+        >
+          <span className="flex w-10 shrink-0 items-center justify-center">
+            {pinned ? <PanelLeftClose className="w-[18px] h-[18px]" /> : <PanelLeftOpen className="w-[18px] h-[18px]" />}
+          </span>
+          {/* `hidden` (not sr-only) when collapsed: the button's aria-label is
+              the accessible name; leaving an "Collapse" label in the a11y tree
+              would contradict the "Expand navigation" label. */}
+          <span className={clsx('text-[13px] font-medium', !pinned && 'hidden')}>Collapse</span>
+        </button>
+      </div>
+      )}
+    </aside>
+  )
+}
+
+function BrandRow({ pinned, onNavigate }: { pinned: boolean; onNavigate: (view: NavRailView) => void }) {
+  // Clickable brand = secondary home affordance (logo→home convention). The
+  // Home nav item below still carries the active state; the brand just navigates.
+  return (
+    <button
+      type="button"
+      onClick={() => onNavigate('home')}
+      aria-label="Radar — go to home"
+      title="Home"
+      // Height matches the top bar header (App.tsx — items-center + py-2 = 51px)
+      // so the rail's brand divider and the header's bottom border form one line.
+      className="flex h-[51px] w-full items-center border-b border-theme-border/50 shrink-0 transition-opacity hover:opacity-80"
+    >
+      <span className="flex w-14 shrink-0 items-center justify-center">
+        <span className="relative w-7 h-7 rounded-lg overflow-hidden bg-emerald-500/10 border border-emerald-500/20">
+          <img
+            src="/images/radar/radar-icon.svg"
+            alt=""
+            aria-hidden
+            className="w-full h-full p-0.5"
+            onError={(e) => console.error('Radar logo asset failed to load:', (e.currentTarget as HTMLImageElement).src)}
+          />
+        </span>
+      </span>
+      <span className={clsx('flex flex-col leading-none text-left', !pinned && 'opacity-0 pointer-events-none')}>
+        <span className="font-semibold text-[15px] tracking-tight text-theme-text-primary">Radar</span>
+        <span className="text-[9px] mt-0.5 tracking-wide uppercase text-theme-text-tertiary">by Skyhook</span>
+      </span>
+    </button>
+  )
+}
+
+function NavRailItem({
+  item,
+  active,
+  pinned,
+  onNavigate,
+}: {
+  item: NavItemDef
+  active: boolean
+  pinned: boolean
+  onNavigate: (view: NavRailView) => void
+}) {
+  const { icon: Icon, label, view } = item
+  return (
+    <div className={clsx('group/item relative', !pinned && 'w-10')}>
+      <button
+        type="button"
+        onClick={() => onNavigate(view)}
+        aria-current={active ? 'page' : undefined}
+        className={clsx(
+          'relative flex h-9 w-full items-center rounded-md text-sm font-medium transition-colors',
+          // Slim mode: clip the hit area to the icon column so the (opacity-0)
+          // label can't capture clicks meant for content to the right.
+          !pinned && 'max-w-10 overflow-hidden',
+          active
+            ? 'bg-skyhook-600/10 dark:bg-skyhook-500/15 text-skyhook-700 dark:text-skyhook-300'
+            : 'text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary',
+        )}
+      >
+        {/* Left-edge accent bar on active — reads even when the row tint is soft. */}
+        <span
+          aria-hidden
+          className={clsx(
+            'absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-skyhook-600 dark:bg-skyhook-400 transition-opacity',
+            active ? 'opacity-100' : 'opacity-0',
+          )}
+        />
+        <span className="flex w-10 shrink-0 items-center justify-center">
+          <Icon className={clsx('w-[18px] h-[18px]', active ? 'text-skyhook-700 dark:text-skyhook-300' : 'text-theme-text-tertiary group-hover/item:text-theme-text-secondary')} />
+        </span>
+        <span className={clsx('pr-3 truncate', !pinned && 'opacity-0')}>{label}</span>
+      </button>
+
+      {/* Slim-mode fly-out label — sibling of the button so it escapes the
+          button's overflow clip; pointer-events-none so it never eats clicks. */}
+      {!pinned && (
+        <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"
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// A rail-bottom action row — same icon-column + fly-out treatment as NavRailItem
+// but it's an action (onClick), not navigation, so no active-state/accent bar.
+// Exported so the account control (UserMenu rail variant) can match the look.
+export function RailActionRow({
+  icon: Icon,
+  label,
+  pinned,
+  onClick,
+}: {
+  icon: ComponentType<{ className?: string }>
+  label: string
+  pinned: boolean
+  onClick: () => void
+}) {
+  return (
+    <div className={clsx('group/item relative', !pinned && 'w-10')}>
+      <button
+        type="button"
+        onClick={onClick}
+        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">
+          <Icon className="w-[18px] h-[18px] text-theme-text-tertiary group-hover/item:text-theme-text-secondary" />
+        </span>
+        <span className={clsx('pr-3 truncate', !pinned && 'opacity-0')}>{label}</span>
+      </button>
+      {!pinned && (
+        <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"
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/components/resource/HPACharts.tsx

@@ -86,8 +86,13 @@ interface FlatPoint { timestamp: number; value: number }
 
 function extractFirstSeries(series: PrometheusSeries[]): FlatPoint[] | null {
   for (const s of series) {
-    if (s.dataPoints.length > 0) {
-      return s.dataPoints.map(dp => ({ timestamp: dp.timestamp, value: dp.value }))
+    // Drop gap points (null/undefined value) so the line never plots NaN or a
+    // false 0. Replica-count series realistically never gap, so the survivors
+    // are joined into one continuous line (this bridges a gap, if one occurred —
+    // unlike AreaChart, which breaks the path)
+    const finite = s.dataPoints.filter((dp): dp is FlatPoint => dp.value != null)
+    if (finite.length > 0) {
+      return finite.map(dp => ({ timestamp: dp.timestamp, value: dp.value }))
     }
   }
   return null

package/src/components/resource/RestartChart.tsx

@@ -94,6 +94,14 @@ function collectRestartEvents(series: PrometheusSeries[] | undefined): RestartEv
     // window — and use the increase as the marker's restart count.
     let prev: number | null = null
     for (const dp of s.dataPoints) {
+      // Skip gap samples and drop the previous reference, so the next finite
+      // sample isn't diffed across the gap — a delta across a gap is
+      // meaningless and could fabricate a restart count. We compare only
+      // consecutive finite samples.
+      if (dp.value == null) {
+        prev = null
+        continue
+      }
       if (prev !== null) {
         // Only count positive deltas — restarts that entered the rolling 1h
         // window during the chart range. The first sample's value covers

package/src/components/resources/ResourcesView.tsx

@@ -1,17 +1,20 @@
 import { useState, useMemo, useCallback, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
-import { ApiError, debugNamespaceLog, fetchJSON, isForbiddenError, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics, useBulkDeleteResources } from '../../api/client'
+import { ApiError, debugNamespaceLog, fetchJSON, isForbiddenError, useCapabilities, useNamespaceCapabilities, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics, useBulkDeleteResources, useBulkRestartWorkloads, useBulkScaleWorkloads } from '../../api/client'
 import { apiUrl, getAuthHeaders, getCredentialsMode, getBasename } from '../../api/config'
 import { useAPIResources } from '../../api/apiResources'
 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 { kindToPlural, type NavigateToResource } from '../../utils/navigation'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
@@ -31,10 +34,45 @@ interface ResourcesViewProps {
   onClearNamespaces?: () => void
 }
 
+type SelectedKindInfo = { name: string; kind: string; group: string } | null
+
+const deniedWorkloadWrites: WorkloadWritePermissions = {
+  deployments: false,
+  daemonSets: false,
+  statefulSets: false,
+  rollouts: false,
+}
+
 export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
 
+  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()
 
@@ -44,7 +82,14 @@ 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(',')
@@ -148,6 +193,8 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
 
   // 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
@@ -230,6 +277,10 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       // 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}

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

@@ -1,16 +1,19 @@
 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 }: HPARendererProps) {
+export function HPARenderer({ data, onNavigate, hpaDiagnosis }: HPARendererProps) {
   return (
     <BaseHPARenderer
       data={data}
       onNavigate={onNavigate}
+      hpaDiagnosis={hpaDiagnosis}
       extraSections={<HPACharts data={data} />}
     />
   )

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

@@ -1,9 +1,11 @@
 import { WorkloadRenderer as BaseWorkloadRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/WorkloadRenderer'
 import { useNavigate } from 'react-router-dom'
-import { useScaleWorkload } from '../../../api/client'
+import { useScaleWorkload, fetchJSON } from '../../../api/client'
 import { useRBACSubject } from '../../../api/rbac'
-import { useQueryClient } from '@tanstack/react-query'
-import type { Relationships, ResourceRef } from '../../../types'
+import { useQueries, useQueryClient } from '@tanstack/react-query'
+import { kindToPlural } from '@skyhook-io/k8s-ui/utils/navigation'
+import type { Relationships, ResourceRef, ResourceWithRelationships } from '../../../types'
+import type { ScalerDiagnosis } from '@skyhook-io/k8s-ui/components/resources/renderers/WorkloadRenderer'
 
 // Map plural lowercase kind to singular PascalCase for ownerReferences matching
 function getOwnerKind(kind: string): string {
@@ -40,6 +42,34 @@ export function WorkloadRenderer({ kind, data, onNavigate, scaleBlockedBy }: Wor
   const { data: rbacData, isLoading: rbacLoading, error: rbacError } = useRBACSubject(
     'ServiceAccount', namespace, saName, !!namespace,
   )
+  const hpaRefs = (scaleBlockedBy ?? []).filter(ref => {
+    const refKind = ref.kind.toLowerCase()
+    return refKind === 'horizontalpodautoscaler' || refKind === 'hpa'
+  })
+  const hpaQueries = useQueries({
+    queries: hpaRefs.map(ref => ({
+      queryKey: ['resource', kindToPlural(ref.kind), ref.namespace, ref.name, ref.group],
+      queryFn: () => {
+        const ns = ref.namespace || '_'
+        const params = new URLSearchParams()
+        if (ref.group) params.set('group', ref.group)
+        const query = params.toString()
+        return fetchJSON<ResourceWithRelationships<any>>(`/resources/${kindToPlural(ref.kind)}/${ns}/${ref.name}${query ? `?${query}` : ''}`)
+      },
+      enabled: Boolean(ref.kind && ref.name),
+      staleTime: 10000,
+      retry: false,
+    })),
+  })
+  const scalerDiagnostics: ScalerDiagnosis[] = hpaRefs.map((ref, index) => {
+    const query = hpaQueries[index]
+    return {
+      ref,
+      diagnosis: query.data?.hpaDiagnosis,
+      loading: query.isLoading,
+      error: query.isError ? (query.error instanceof Error ? query.error.message : 'Failed to fetch HPA') : undefined,
+    }
+  })
 
   return (
     <BaseWorkloadRenderer
@@ -51,6 +81,7 @@ export function WorkloadRenderer({ kind, data, onNavigate, scaleBlockedBy }: Wor
       rbacLoading={rbacLoading}
       rbacError={rbacError as Error | null}
       scaleBlockedBy={scaleBlockedBy}
+      scalerDiagnostics={scalerDiagnostics}
       onScale={async (replicas) => {
         await scaleMutation.mutateAsync({
           kind,