@skyhook-io/k8s-ui 1.7.4 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/GitOpsTableView.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'
 import { clsx } from 'clsx'
 import {
   AlertTriangle,
@@ -141,14 +141,27 @@ export interface GitOpsTableViewProps {
   counts: Record<string, number>
   // Caller refresh — typically invalidates its useQuery + refetches.
   onRefresh?: () => void
-  // Row click — caller routes to its own detail page.
-  onRowClick: (row: GitOpsRow) => void
+  // Row click — caller routes to its own detail page. When the host also
+  // passes `rowHrefFor`, the callback receives the MouseEvent so it can
+  // `preventDefault()` for SPA-local nav (e.g. react-router) or skip the
+  // preventDefault to let the anchor's default full-page navigation run
+  // (required for cross-router-boundary links).
+  onRowClick: (row: GitOpsRow, event?: ReactMouseEvent) => void
+  /** When provided, the Application-name cell renders as a real `<a href>`
+   *  and the `<tr>` drops its row-level click handler. Restores ⌘-click /
+   *  middle-click / "Copy link" / hover URL preview / screen-reader link
+   *  semantics. `onRowClick` still fires on unmodified clicks (event arg
+   *  supplied) for analytics or to take over navigation. */
+  rowHrefFor?: (row: GitOpsRow) => string
 
   // Called when the user clicks the destination cluster chip in the
   // Destination cell. Fleet-only; OSS leaves undefined. Caller routes to
   // the destination cluster's workloads view (filtered by the Argo
   // instance label) — the chip itself stops row-click propagation.
   onDestinationClick?: (row: GitOpsRow, destination: FleetDestinationStamp) => void
+  /** Anchor equivalent of `onDestinationClick`. Same rationale as
+   *  `rowHrefFor` — real `<a href>` for the destination chip. */
+  destinationHrefFor?: (row: GitOpsRow, destination: FleetDestinationStamp) => string
   // Cross-cluster surfaces (Hub-only); OSS leaves these undefined.
   crossClusterCount?: number
   destinationFilter?: DestinationFilter
@@ -188,7 +201,9 @@ export function GitOpsTableView({
   counts,
   onRefresh,
   onRowClick,
+  rowHrefFor,
   onDestinationClick,
+  destinationHrefFor,
   crossClusterCount,
   destinationFilter,
   onDestinationFilterChange,
@@ -227,22 +242,6 @@ export function GitOpsTableView({
   const hasGlobalNamespaceFilter = !!onClearNamespaces && (globalNamespaces?.length ?? 0) > 0
   const hasAnyFilter = hasLocalFilters || hasGlobalNamespaceFilter
 
-  const clearLocalFilters = () => {
-    setSearch('')
-    setSyncFilters(new Set())
-    setHealthFilters(new Set())
-    setProjectFilters(new Set())
-    setNamespaceFilters(new Set())
-    setLabelFilters(new Set())
-    setAutomationFilter('all')
-    setLifecycleFilter('all')
-  }
-
-  const clearAllFilters = () => {
-    clearLocalFilters()
-    onClearNamespaces?.()
-  }
-
   // Optional '/' keyboard shortcut to focus search. Avoided as a default to
   // not collide with other surfaces' keyboard maps; OSS opts in via prop.
   useEffect(() => {
@@ -343,8 +342,9 @@ export function GitOpsTableView({
     setAutomationFilter('all')
     setLifecycleFilter('all')
     setReconcilingOnly(false)
+    onClearNamespaces?.()
     onDestinationFilterChange?.('all')
-  }, [onDestinationFilterChange])
+  }, [onClearNamespaces, onDestinationFilterChange])
 
   const noOtherFiltersActive = useCallback(
     (
@@ -642,9 +642,9 @@ export function GitOpsTableView({
               )}
             </div>
           ) : viewMode === 'tiles' ? (
-            <GitOpsTiles rows={filteredRows} onOpen={onRowClick} />
+            <GitOpsTiles rows={filteredRows} onOpen={onRowClick} hrefFor={rowHrefFor} />
           ) : (
-            <GitOpsTable rows={filteredRows} onOpen={onRowClick} onDestinationClick={onDestinationClick} />
+            <GitOpsTable rows={filteredRows} onOpen={onRowClick} hrefFor={rowHrefFor} onDestinationClick={onDestinationClick} destinationHrefFor={destinationHrefFor} />
           )}
         </div>
       </div>
@@ -1032,11 +1032,15 @@ function StatusDistribution({ rows }: { rows: GitOpsRow[] }) {
 function GitOpsTable({
   rows,
   onOpen,
+  hrefFor,
   onDestinationClick,
+  destinationHrefFor,
 }: {
   rows: GitOpsRow[]
-  onOpen: (row: GitOpsRow) => void
+  onOpen: (row: GitOpsRow, event?: ReactMouseEvent) => void
+  hrefFor?: (row: GitOpsRow) => string
   onDestinationClick?: (row: GitOpsRow, destination: FleetDestinationStamp) => void
+  destinationHrefFor?: (row: GitOpsRow, destination: FleetDestinationStamp) => string
 }) {
   return (
     <table className="w-full min-w-[1040px] table-fixed border-separate border-spacing-0 text-sm">
@@ -1052,65 +1056,82 @@ function GitOpsTable({
         </tr>
       </thead>
       <tbody>
-        {rows.map((row) => (
-          <tr
-            key={row.id}
-            onClick={() => onOpen(row)}
-            className={clsx(
-              'cursor-pointer border-b border-theme-border bg-theme-base hover:bg-theme-hover',
-              row.terminating && 'opacity-70',
-            )}
-          >
-            <TableCell>
-              <div className="flex min-w-0 items-center gap-2">
-                <span className={`h-8 w-1 shrink-0 rounded-full ${statusStripe(row)}`} />
-                {row.terminating && (
-                  <Tooltip content="Pending deletion — finalizers still running">
-                    <span className="inline-flex shrink-0 items-center gap-1 rounded border border-orange-500/40 bg-orange-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-orange-400">
-                      <Trash2 className="h-3 w-3" />
-                      Terminating
-                    </span>
-                  </Tooltip>
-                )}
-                <div className="min-w-0">
-                  <div className="truncate font-medium text-theme-text-primary">{row.name}</div>
-                  <div className="truncate text-xs text-theme-text-tertiary">
-                    {row.tool === 'argo' ? 'ArgoCD' : 'FluxCD'} {row.kind}
-                    {row._cluster && (
-                      <span title={row._cluster.name !== shortClusterName(row._cluster.name) ? row._cluster.name : undefined}>
-                        {' · '}{shortClusterName(row._cluster.name)}
+        {rows.map((row) => {
+          const href = hrefFor?.(row)
+          return (
+            <tr
+              key={row.id}
+              onClick={href ? undefined : () => onOpen(row)}
+              className={clsx(
+                'border-b border-theme-border bg-theme-base hover:bg-theme-hover',
+                !href && 'cursor-pointer',
+                row.terminating && 'opacity-70',
+              )}
+            >
+              <TableCell>
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className={`h-8 w-1 shrink-0 rounded-full ${statusStripe(row)}`} />
+                  {row.terminating && (
+                    <Tooltip content="Pending deletion — finalizers still running">
+                      <span className="inline-flex shrink-0 items-center gap-1 rounded border border-orange-500/40 bg-orange-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-orange-400">
+                        <Trash2 className="h-3 w-3" />
+                        Terminating
                       </span>
+                    </Tooltip>
+                  )}
+                  <div className="min-w-0">
+                    {href ? (
+                      <a
+                        href={href}
+                        onClick={(e) => {
+                          if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return
+                          onOpen(row, e)
+                        }}
+                        className="block truncate font-medium text-theme-text-primary hover:underline focus-visible:underline focus-visible:outline-none rounded-sm"
+                      >
+                        {row.name}
+                      </a>
+                    ) : (
+                      <div className="truncate font-medium text-theme-text-primary">{row.name}</div>
                     )}
+                    <div className="truncate text-xs text-theme-text-tertiary">
+                      {row.tool === 'argo' ? 'ArgoCD' : 'FluxCD'} {row.kind}
+                      {row._cluster && (
+                        <span title={row._cluster.name !== shortClusterName(row._cluster.name) ? row._cluster.name : undefined}>
+                          {' · '}{shortClusterName(row._cluster.name)}
+                        </span>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            </TableCell>
-            <TableCell>{row.project || '-'}</TableCell>
-            <TableCell>
-              {row.terminating
-                ? <span className="text-[11px] text-theme-text-tertiary">—</span>
-                : <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />}
-            </TableCell>
-            <TableCell>
-              {row.terminating
-                ? <span className="text-[11px] text-theme-text-tertiary">—</span>
-                : <HealthStatusBadge health={row.health as any} />}
-            </TableCell>
-            <TableCell>
-              <div className="truncate text-theme-text-primary">{row.repository || row.chart || '-'}</div>
-              <div className="truncate text-xs text-theme-text-tertiary">{[row.targetRevision, row.path || row.chart].filter(Boolean).join(' · ') || '-'}</div>
-            </TableCell>
-            <TableCell>
-              <DestinationCell row={row} onDestinationClick={onDestinationClick} />
-              <div className="truncate text-xs text-theme-text-tertiary">{row.destinationNamespace || row.namespace || '-'}</div>
-            </TableCell>
-            <TableCell>
-              {row.terminating
-                ? <span className="text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</span>
-                : formatRelativeAge(row.lastSync || row.createdAt)}
-            </TableCell>
-          </tr>
-        ))}
+              </TableCell>
+              <TableCell>{row.project || '-'}</TableCell>
+              <TableCell>
+                {row.terminating
+                  ? <span className="text-[11px] text-theme-text-tertiary">—</span>
+                  : <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />}
+              </TableCell>
+              <TableCell>
+                {row.terminating
+                  ? <span className="text-[11px] text-theme-text-tertiary">—</span>
+                  : <HealthStatusBadge health={row.health as any} />}
+              </TableCell>
+              <TableCell>
+                <div className="truncate text-theme-text-primary">{row.repository || row.chart || '-'}</div>
+                <div className="truncate text-xs text-theme-text-tertiary">{[row.targetRevision, row.path || row.chart].filter(Boolean).join(' · ') || '-'}</div>
+              </TableCell>
+              <TableCell>
+                <DestinationCell row={row} onDestinationClick={onDestinationClick} destinationHrefFor={destinationHrefFor} />
+                <div className="truncate text-xs text-theme-text-tertiary">{row.destinationNamespace || row.namespace || '-'}</div>
+              </TableCell>
+              <TableCell>
+                {row.terminating
+                  ? <span className="text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</span>
+                  : formatRelativeAge(row.lastSync || row.createdAt)}
+              </TableCell>
+            </tr>
+          )
+        })}
       </tbody>
     </table>
   )
@@ -1119,14 +1140,16 @@ function GitOpsTable({
 function GitOpsTiles({
   rows,
   onOpen,
+  hrefFor,
 }: {
   rows: GitOpsRow[]
-  onOpen: (row: GitOpsRow) => void
+  onOpen: (row: GitOpsRow, event?: ReactMouseEvent) => void
+  hrefFor?: (row: GitOpsRow) => string
 }) {
   return (
     <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-3 p-4">
       {rows.map((row) => (
-        <GitOpsTile key={row.id} row={row} onOpen={onOpen} />
+        <GitOpsTile key={row.id} row={row} onOpen={onOpen} href={hrefFor?.(row)} />
       ))}
     </div>
   )
@@ -1135,9 +1158,11 @@ function GitOpsTiles({
 function GitOpsTile({
   row,
   onOpen,
+  href,
 }: {
   row: GitOpsRow
-  onOpen: (row: GitOpsRow) => void
+  onOpen: (row: GitOpsRow, event?: ReactMouseEvent) => void
+  href?: string
 }) {
   const source = compactRepoSource(row.repository || row.chart, row.path || row.chart)
   const revision = row.targetRevision || ''
@@ -1145,15 +1170,12 @@ function GitOpsTile({
   const recencyClass = recencyTone(lastSyncRaw)
   const dest = row.destination ? compactClusterURL(row.destination) : ''
   const ns = row.destinationNamespace || row.namespace
-  return (
-    <button
-      type="button"
-      onClick={() => onOpen(row)}
-      className={clsx(
-        'group relative flex min-w-0 flex-col overflow-hidden rounded-md border border-theme-border bg-theme-surface text-left shadow-theme-sm transition-all hover:border-theme-text-tertiary/40 hover:shadow-theme-md',
-        row.terminating && 'opacity-80',
-      )}
-    >
+  const tileClass = clsx(
+    'group relative flex min-w-0 flex-col overflow-hidden rounded-md border border-theme-border bg-theme-surface text-left shadow-theme-sm transition-all hover:border-theme-text-tertiary/40 hover:shadow-theme-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-theme-text-primary/20',
+    row.terminating && 'opacity-80',
+  )
+  const body = (
+    <>
       <div className={clsx('h-1 w-full', statusStripe(row))} />
       <div className="flex flex-1 flex-col gap-3 px-4 pb-4 pt-3">
         <div className="line-clamp-2 break-all text-[15px] font-semibold leading-tight text-theme-text-primary">
@@ -1199,6 +1221,25 @@ function GitOpsTile({
           </div>
         )}
       </div>
+    </>
+  )
+  if (href) {
+    return (
+      <a
+        href={href}
+        onClick={(e) => {
+          if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return
+          onOpen(row, e)
+        }}
+        className={tileClass}
+      >
+        {body}
+      </a>
+    )
+  }
+  return (
+    <button type="button" onClick={() => onOpen(row)} className={tileClass}>
+      {body}
     </button>
   )
 }
@@ -1275,9 +1316,11 @@ function TableHead({ children, className = '' }: { children: ReactNode; classNam
 function DestinationCell({
   row,
   onDestinationClick,
+  destinationHrefFor,
 }: {
   row: GitOpsRow
   onDestinationClick?: (row: GitOpsRow, destination: FleetDestinationStamp) => void
+  destinationHrefFor?: (row: GitOpsRow, destination: FleetDestinationStamp) => string
 }) {
   const dest = row._destination
   // Non-fleet (OSS) path — show the raw destination string.
@@ -1288,10 +1331,6 @@ function DestinationCell({
     return <span className="block truncate text-theme-text-tertiary">same cluster</span>
   }
   if ((dest.match === 'exact' || dest.match === 'inferred') && dest.cluster_id && dest.cluster_name) {
-    const handleClick = (e: React.MouseEvent) => {
-      e.stopPropagation()
-      onDestinationClick?.(row, dest)
-    }
     const short = shortClusterName(dest.cluster_name)
     // High-confidence (URL match): solid sky chip with a small ✓ marker.
     // Medium-confidence (name match): same chip styling but no marker, and
@@ -1300,19 +1339,41 @@ function DestinationCell({
     // the human-readable reason from the hub.
     const highConfidence = dest.confidence === 'high'
     const tooltipReason = dest.reason ? ` (${dest.reason})` : ''
+    const chipClass =
+      'block max-w-full truncate rounded px-1.5 py-0.5 text-xs font-medium hover:bg-sky-500/20 dark:text-sky-300 ' +
+      (highConfidence
+        ? 'border border-sky-500/50 bg-sky-500/15 text-sky-700'
+        : 'border border-sky-500/25 bg-sky-500/5 text-sky-600')
+    const title = `Open workloads in ${dest.cluster_name}${tooltipReason}`
+    const chipBody = `${highConfidence ? '✓ ' : ''}${short}`
+    const destHref = destinationHrefFor?.(row, dest)
+    if (destHref) {
+      return (
+        <a
+          href={destHref}
+          // The chip sits inside the row's `<td>`; when a host wires
+          // `destinationHrefFor` without `rowHrefFor`, the `<tr>` retains
+          // its own onClick. Stop the bubble so a click on the chip
+          // doesn't also trigger row navigation.
+          onClick={(e) => e.stopPropagation()}
+          className={chipClass + ' focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/40'}
+          title={title}
+        >
+          {chipBody}
+        </a>
+      )
+    }
     return (
       <button
         type="button"
-        onClick={handleClick}
-        className={
-          'block max-w-full truncate rounded px-1.5 py-0.5 text-xs font-medium hover:bg-sky-500/20 dark:text-sky-300 ' +
-          (highConfidence
-            ? 'border border-sky-500/50 bg-sky-500/15 text-sky-700'
-            : 'border border-sky-500/25 bg-sky-500/5 text-sky-600')
-        }
-        title={`Open workloads in ${dest.cluster_name}${tooltipReason}`}
+        onClick={(e) => {
+          e.stopPropagation()
+          onDestinationClick?.(row, dest)
+        }}
+        className={chipClass}
+        title={title}
       >
-        {highConfidence ? '✓ ' : ''}{short}
+        {chipBody}
       </button>
     )
   }

package/src/components/resources/ResourcesView.tsx

@@ -28,6 +28,7 @@ import {
 import { clsx } from 'clsx'
 import { ResourceBar } from '../ui/ResourceBar'
 import type { SelectedResource, APIResource } from '../../types'
+import { isForbiddenError } from '../../types/fetch-error'
 import type { NavigateToResource } from '../../utils/navigation'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import {
@@ -1681,11 +1682,6 @@ interface ResourcesViewData {
 
 export const ResourcesViewDataContext = React.createContext<ResourcesViewData>({})
 
-// Inline helper replacing ApiError/isForbiddenError from the removed api/client import
-function isForbiddenError(error: any): boolean {
-  return error?.status === 403
-}
-
 export interface ResourceQueryResult {
   data?: any[]
   isLoading: boolean
@@ -1756,6 +1752,15 @@ interface ResourcesViewProps {
    *  should also wire onResourceClick to handle the deep-link-on-load
    *  case. */
   onRowSelect?: (resource: any) => void
+  /**
+   * When provided, the name cell renders as a real `<a href>` instead of
+   * relying on per-cell click handlers for navigation. Restores ⌘-click /
+   * middle-click / "Copy link" / hover URL preview / screen-reader link
+   * semantics. Hosts using full-page navigation should prefer this over
+   * `onRowSelect`; the anchor will own navigation and the rest of the row
+   * remains clickable for selection (drawer open).
+   */
+  rowHrefFor?: (resource: any) => string
   /**
    * Overrides the default compare-mode submit (which navigates to
    * `/compare?kind=...&a=...&b=...`). Hosts use this to route to a
@@ -1927,6 +1932,7 @@ export function ResourcesView({
   defaultKind = DEFAULT_KIND_INFO,
   extraLeadingColumns,
   onRowSelect,
+  rowHrefFor,
   onCompareSubmit,
   resolveRowCluster,
   onClearNamespaces,
@@ -4256,6 +4262,7 @@ export function ResourcesView({
                     onMouseEnter={() => setHighlightedIndex(-1)}
                     compareMode={compareMode}
                     comparePickIndex={pickIdx}
+                    rowHref={rowHrefFor?.(resource)}
                   />
                 )
               }}
@@ -4301,6 +4308,10 @@ interface ResourceRowCellsProps {
   compareMode?: boolean
   /** -1 when not picked; 0 = pick A; 1 = pick B. */
   comparePickIndex?: number
+  /** When provided, the name cell renders as `<a href>` and the other
+   *  data cells drop their click handlers. The compare-mode chip column
+   *  is unaffected (still toggles picks). */
+  rowHref?: string
 }
 
 function rowHighlightClass(
@@ -4320,9 +4331,13 @@ function rowHighlightClass(
   return 'group-hover/row:bg-theme-surface/50'
 }
 
-function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, majorityNodeMinorVersion, onClick, onMouseEnter, compareMode, comparePickIndex = -1 }: ResourceRowCellsProps) {
+function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, majorityNodeMinorVersion, onClick, onMouseEnter, compareMode, comparePickIndex = -1, rowHref }: ResourceRowCellsProps) {
   const rowHighlight = rowHighlightClass(compareMode, comparePickIndex, isSelected, isHighlighted)
   const pickedSide = comparePickIndex === 0 ? 'a' : comparePickIndex === 1 ? 'b' : null
+  // When the host supplies an anchor, drop per-cell onClick for the data
+  // columns: the anchor is the only navigation surface. The compare-mode
+  // chip column keeps its onClick so pick toggling still works.
+  const cellsAreClickable = !rowHref
   return (
     <>
       {compareMode && (
@@ -4353,15 +4368,24 @@ function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, h
       {columns.map((col) => (
         <td
           key={col.key}
-          onClick={onClick}
+          onClick={cellsAreClickable ? onClick : undefined}
           onMouseEnter={onMouseEnter}
           className={clsx(
-            'px-4 py-3 border-b-subtle cursor-pointer transition-colors',
+            'px-4 py-3 border-b-subtle transition-colors',
+            cellsAreClickable && 'cursor-pointer',
             col.key !== 'status' && 'overflow-hidden truncate',
             rowHighlight,
           )}
         >
-          <CellContent resource={resource} kind={kind} group={group} column={col.key} majorityNodeMinorVersion={majorityNodeMinorVersion} extraColumn={extraColumnsByKey?.get(col.key)} />
+          <CellContent
+            resource={resource}
+            kind={kind}
+            group={group}
+            column={col.key}
+            majorityNodeMinorVersion={majorityNodeMinorVersion}
+            extraColumn={extraColumnsByKey?.get(col.key)}
+            nameHref={col.key === 'name' ? rowHref : undefined}
+          />
         </td>
       ))}
       {hasSpacerColumn && <td className="border-b-subtle p-0" />}
@@ -4405,9 +4429,12 @@ interface CellContentProps {
    *  column key. Render via the extra's render() and short-circuit
    *  the built-in cell logic. */
   extraColumn?: ExtraColumn
+  /** When set on the name column, the resource name renders as `<a href>`
+   *  so ⌘-click / copy-link / hover-URL all work. */
+  nameHref?: string
 }
 
-function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, extraColumn }: CellContentProps) {
+function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, extraColumn, nameHref }: CellContentProps) {
   // Parent-injected extra columns short-circuit the built-in switch.
   // Used by hosts that inject leading columns (e.g. a multi-cluster Cluster column).
   if (extraColumn) {
@@ -4419,12 +4446,22 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
   // Common columns
   if (column === 'name') {
     const isTerminating = !!meta.deletionTimestamp
+    const nameClass = clsx('text-sm font-medium truncate block', isTerminating ? 'text-theme-text-tertiary line-through' : 'text-theme-text-primary')
     return (
       <div className="flex items-center gap-1.5 min-w-0">
         <Tooltip content={meta.name}>
-          <span className={clsx('text-sm font-medium truncate block', isTerminating ? 'text-theme-text-tertiary line-through' : 'text-theme-text-primary')}>
-            {meta.name}
-          </span>
+          {nameHref ? (
+            <a
+              href={nameHref}
+              className={clsx(nameClass, 'hover:underline focus-visible:underline focus-visible:outline-none rounded-sm')}
+            >
+              {meta.name}
+            </a>
+          ) : (
+            <span className={nameClass}>
+              {meta.name}
+            </span>
+          )}
         </Tooltip>
         <CopyNameButton name={meta.name} />
         {isTerminating && (

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

@@ -1,6 +1,7 @@
 import { Shield } from 'lucide-react'
 import type { ComponentType } from 'react'
 import { Section } from '../../ui/drawer-components'
+import { isFetchError, isForbiddenError } from '../../../types/fetch-error'
 
 interface RBACErrorSectionProps {
   title: string
@@ -13,24 +14,20 @@ interface RBACErrorSectionProps {
   errorPrefix?: string
 }
 
-const errorStatus = (error: Error): number | undefined => (error as { status?: number }).status
-
 // 503 because Radar's SA can't read RBAC, so the informers never synced — a
 // cluster-static config state (same on every resource), not a failure. The message
 // check distinguishes it from a generic connectivity 503 ("Not connected to
 // cluster"), which is a real fault and must stay loud (red).
 const isRBACCacheUnavailable = (error: Error): boolean =>
-  errorStatus(error) === 503 && error.message.includes('RBAC cache')
-
-// 403 because the requesting user lacks list permission on bindings.
-const isRBACForbidden = (error: Error): boolean => errorStatus(error) === 403
+  isFetchError(error) && error.status === 503 && error.message.includes('RBAC cache')
 
-// True for the two expected, non-actionable RBAC states above. Surfaces that treat
+// True for the two expected, non-actionable RBAC states. isForbiddenError (403)
+// means the requesting user lacks list permission on bindings. Surfaces that treat
 // the RBAC section as a bonus (Pod/Workload Permissions) hide it entirely for these.
 // Genuine faults — connectivity 503, 500, network errors — are deliberately NOT
 // included, so they still surface rather than being silently dropped.
 export function isRBACUnavailable(error: Error): boolean {
-  return isRBACForbidden(error) || isRBACCacheUnavailable(error)
+  return isForbiddenError(error) || isRBACCacheUnavailable(error)
 }
 
 // RBACErrorSection renders each expected state as a calm note (distinct copy per
@@ -53,7 +50,7 @@ export function RBACErrorSection({
       </Section>
     )
   }
-  if (isRBACForbidden(error)) {
+  if (isForbiddenError(error)) {
     return (
       <Section title={title} icon={icon}>
         <div className="text-sm text-theme-text-tertiary">

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

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { RoleBindingRenderer } from './RoleBindingRenderer'
+
+function shaped(message: string, status: number) {
+  return Object.assign(new Error(message), { status })
+}
+
+const binding = {
+  metadata: { name: 'rb-1', namespace: 'dev' },
+  roleRef: { kind: 'ClusterRole', name: 'view', apiGroup: 'rbac.authorization.k8s.io' },
+  subjects: [
+    { kind: 'ServiceAccount', name: 'alice', namespace: 'dev' },
+  ],
+}
+
+describe('RoleBindingRenderer rules section', () => {
+  it('renders rule rows when rules are present', () => {
+    const html = renderToString(
+      <RoleBindingRenderer
+        data={binding}
+        roleRules={[{ verbs: ['get', 'list'], resources: ['pods'], apiGroups: [''] }]}
+      />,
+    )
+    expect(html).toContain('Rules Granted')
+    expect(html).toContain('pods')
+  })
+
+  it('renders "no rules" when rules array is empty (loaded but role has none)', () => {
+    const html = renderToString(<RoleBindingRenderer data={binding} roleRules={[]} />)
+    expect(html).toContain('no rules')
+  })
+
+  it('renders the orphan-or-unavailable fallback when rules is null and no error', () => {
+    const html = renderToString(<RoleBindingRenderer data={binding} roleRules={null} />)
+    expect(html).toContain('Could not resolve referenced role')
+    expect(html).toContain('orphan binding')
+  })
+
+  it('renders the Access denied message when rules is null and the fetch was 403', () => {
+    const html = renderToString(
+      <RoleBindingRenderer
+        data={binding}
+        roleRules={null}
+        roleRulesError={shaped('forbidden', 403)}
+      />,
+    )
+    expect(html).toContain('Access denied reading referenced role')
+    expect(html).toContain('view')
+    expect(html).not.toContain('orphan binding')
+  })
+
+  it('falls back to the orphan-or-unavailable message for non-403 errors (404, 500, network)', () => {
+    const html = renderToString(
+      <RoleBindingRenderer
+        data={binding}
+        roleRules={null}
+        roleRulesError={shaped('not found', 404)}
+      />,
+    )
+    expect(html).toContain('Could not resolve referenced role')
+    expect(html).not.toContain('Access denied')
+  })
+
+  it('keeps showing cached rules when a refetch fails with 403 (stale data preserved)', () => {
+    const html = renderToString(
+      <RoleBindingRenderer
+        data={binding}
+        roleRules={[{ verbs: ['get'], resources: ['secrets'], apiGroups: [''] }]}
+        roleRulesError={shaped('forbidden', 403)}
+      />,
+    )
+    expect(html).toContain('secrets')
+    expect(html).not.toContain('Access denied')
+  })
+})

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

@@ -2,6 +2,7 @@ import { Shield, Users, Eye } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink, AlertBanner } from '../../ui/drawer-components'
 import type { ResourceRef, RBACPolicyRule } from '../../../types'
+import { isForbiddenError } from '../../../types/fetch-error'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
@@ -15,9 +16,14 @@ interface RoleBindingRendererProps {
   onNavigate?: (ref: ResourceRef) => void
   /** Rules from the referenced Role/ClusterRole. Undefined means the host
    *  hasn't wired the fetch (inline rules preview is omitted). Null means
-   *  the fetch failed; the section shows a tactful note instead of silence. */
+   *  the fetch finished without a resource (orphan binding); the section
+   *  says so. */
   roleRules?: RBACPolicyRule[] | null
   roleRulesLoading?: boolean
+  /** Error from the role/clusterrole fetch. When present and shaped like
+   *  a FetchErrorShape (status + message), the rules section distinguishes
+   *  a 403 ("Access denied") from the orphan-or-unavailable fallback. */
+  roleRulesError?: unknown
 }
 
 // Wide groups whose membership effectively widens a binding beyond a named
@@ -57,7 +63,7 @@ function getSubjectKindBadgeClass(kind: string): string {
   }
 }
 
-export function RoleBindingRenderer({ data, onNavigate, roleRules, roleRulesLoading }: RoleBindingRendererProps) {
+export function RoleBindingRenderer({ data, onNavigate, roleRules, roleRulesLoading, roleRulesError }: RoleBindingRendererProps) {
   const roleRef = data.roleRef || {}
   const subjects: any[] = data.subjects || []
   const isClusterRoleBinding = data.kind === 'ClusterRoleBinding'
@@ -117,6 +123,7 @@ export function RoleBindingRenderer({ data, onNavigate, roleRules, roleRulesLoad
         <RulesPreviewSection
           rules={roleRules}
           loading={!!roleRulesLoading}
+          error={roleRulesError}
           roleName={roleRef.name}
         />
       )}
@@ -152,10 +159,12 @@ export function RoleBindingRenderer({ data, onNavigate, roleRules, roleRulesLoad
 function RulesPreviewSection({
   rules,
   loading,
+  error,
   roleName,
 }: {
   rules: RBACPolicyRule[] | null
   loading: boolean
+  error?: unknown
   roleName?: string
 }) {
   return (
@@ -163,11 +172,18 @@ function RulesPreviewSection({
       {loading ? (
         <div className="text-sm text-theme-text-tertiary">Loading rules…</div>
       ) : !rules ? (
-        <div className="text-sm text-theme-text-tertiary">
-          Could not resolve referenced role
-          {roleName ? ` "${roleName}"` : ''} — it may not exist (orphan binding)
-          or be unavailable.
-        </div>
+        isForbiddenError(error) ? (
+          <div className="text-sm text-theme-text-tertiary">
+            Access denied reading referenced role
+            {roleName ? ` "${roleName}"` : ''}.
+          </div>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">
+            Could not resolve referenced role
+            {roleName ? ` "${roleName}"` : ''} — it may not exist (orphan binding)
+            or be unavailable.
+          </div>
+        )
       ) : rules.length === 0 ? (
         <div className="text-sm text-theme-text-tertiary">
           The referenced role has no rules.

package/src/components/ui/FetchResult.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { FetchResult } from './FetchResult'
+
+function shaped(message: string, status: number) {
+  return Object.assign(new Error(message), { status })
+}
+
+describe('FetchResult', () => {
+  it('renders the loader when loading, ignoring error', () => {
+    const html = renderToString(<FetchResult loading={true} error={shaped('forbidden', 403)} />)
+    expect(html).toContain('Loading')
+    expect(html).not.toContain('Access denied')
+  })
+
+  it('renders notFoundMessage when neither loading nor error (disabled-query fallback)', () => {
+    const html = renderToString(<FetchResult loading={false} notFoundMessage="Pod not found" />)
+    expect(html).toContain('Pod not found')
+  })
+
+  it('default notFoundMessage is "Resource not found"', () => {
+    const html = renderToString(<FetchResult loading={false} />)
+    expect(html).toContain('Resource not found')
+  })
+
+  it('shows "Access denied" headline and the server message on 403', () => {
+    const html = renderToString(
+      <FetchResult
+        loading={false}
+        error={shaped('no access to clusterroles (cluster-scoped resource requires explicit RBAC)', 403)}
+      />,
+    )
+    expect(html).toContain('Access denied')
+    expect(html).toContain('no access to clusterroles')
+  })
+
+  it('uses notFoundMessage and renders the server message on 404', () => {
+    const html = renderToString(
+      <FetchResult
+        loading={false}
+        error={shaped('pods web-1 not found', 404)}
+        notFoundMessage="Pod not found"
+      />,
+    )
+    expect(html).toContain('Pod not found')
+    expect(html).toContain('pods web-1 not found')
+  })
+
+  it('renders "Cluster unavailable" on 503', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('Resource cache not available', 503)} />,
+    )
+    expect(html).toContain('Cluster unavailable')
+    expect(html).toContain('Resource cache not available')
+  })
+
+  it('renders "Sign-in required" on 401', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('Unauthorized', 401)} />,
+    )
+    expect(html).toContain('Sign-in required')
+  })
+
+  it("renders a generic 'Couldn't load' for other 5xx", () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('internal server error', 500)} />,
+    )
+    expect(html).toContain('Couldn')
+    expect(html).toContain('internal server error')
+  })
+
+  it('handles a network failure (Error without .status) via the generic branch', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={new Error('Failed to fetch')} />,
+    )
+    expect(html).toContain('Couldn')
+    expect(html).toContain('Failed to fetch')
+  })
+
+  it('handles an AbortError-style throw without a status field', () => {
+    const aborted = new Error('The user aborted a request.')
+    aborted.name = 'AbortError'
+    const html = renderToString(<FetchResult loading={false} error={aborted} />)
+    expect(html).toContain('Couldn')
+  })
+
+  it('renders the Copy-error button when an error message is present', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('forbidden', 403)} />,
+    )
+    expect(html).toContain('Copy error')
+  })
+})

package/src/components/ui/FetchResult.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, type LucideIcon } from 'lucide-react'
+import { clsx } from 'clsx'
+import { PaneLoader } from './PaneLoader'
+import { isFetchError } from '../../types/fetch-error'
+
+// FetchResult collapses (loading, error, no-data) into one rendered outcome:
+// loader while loading, a typed error surface when the fetch threw, or the
+// notFoundMessage when neither — matching the prior plain-text "Resource not
+// found" so a disabled React Query (loading=false, data=undefined, error=null
+// under v5) still renders a sane fallback rather than going blank.
+//
+// Decision tree:
+//   loading                  → <PaneLoader/>
+//   error (403)              → "Access denied"            + error.message
+//   error (404)              → notFoundMessage            + error.message
+//   error (503)              → "Cluster unavailable"      + error.message
+//   error (401)              → "Sign-in required"         (apiFetch redirects; fallback)
+//   error (other / no shape) → "Couldn't load this view"  + error.message
+//   no loading, no error     → notFoundMessage            (headline only, no detail)
+//
+// Separate from EmptyState (which conveys "no data here" with
+// healthy/filtered/neutral tones) because HTTP-level fetch failures need
+// distinct visual and informational semantics — error vs absence.
+//
+// The error contract is duck-typed via FetchErrorShape so this stays in
+// @skyhook-io/k8s-ui without importing ApiError from either web/ (OSS)
+// or radar-hub-web.
+
+interface FetchResultProps {
+  loading: boolean
+  error?: unknown
+  /** Body line for 404 (resource fetched, server says missing). Default "Resource not found". */
+  notFoundMessage?: string
+  /** Pin to parent height. Existing call sites use "h-32" or "h-full". */
+  className?: string
+}
+
+export function FetchResult({
+  loading,
+  error,
+  notFoundMessage = 'Resource not found',
+  className = 'h-32',
+}: FetchResultProps) {
+  if (loading) {
+    return <PaneLoader className={className} />
+  }
+  if (error === undefined || error === null) {
+    // No loading + no error = the query is disabled or returned no data.
+    // Render the headline-only "not found" state so callers gated on `!data`
+    // don't end up with a blank body when React Query v5 leaves isLoading=false.
+    return (
+      <div className={clsx('flex items-center justify-center text-theme-text-tertiary', className)}>
+        {notFoundMessage}
+      </div>
+    )
+  }
+  return <ErrorSurface error={error} notFoundMessage={notFoundMessage} className={className} />
+}
+
+interface ErrorSurfaceProps {
+  error: unknown
+  notFoundMessage: string
+  className: string
+}
+
+function ErrorSurface({ error, notFoundMessage, className }: ErrorSurfaceProps) {
+  const classified = classify(error, notFoundMessage)
+  const Icon = classified.icon
+
+  return (
+    <div
+      role="status"
+      className={clsx('flex flex-col items-center justify-center gap-2 px-6 text-center', className)}
+    >
+      <Icon className="h-5 w-5 text-theme-text-tertiary" aria-hidden />
+      <div className="text-sm font-medium text-theme-text-secondary">{classified.headline}</div>
+      {classified.detail && (
+        <div className="flex items-center gap-2 max-w-md">
+          <span className="text-xs text-theme-text-tertiary break-words">{classified.detail}</span>
+          <CopyErrorButton text={classified.detail} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface Classified {
+  headline: string
+  detail: string | null
+  icon: LucideIcon
+}
+
+function classify(error: unknown, notFoundMessage: string): Classified {
+  if (isFetchError(error)) {
+    switch (error.status) {
+      case 403:
+        return { headline: 'Access denied', detail: error.message, icon: ShieldOff }
+      case 404:
+        return { headline: notFoundMessage, detail: error.message, icon: AlertTriangle }
+      case 401:
+        return { headline: 'Sign-in required', detail: error.message, icon: LogIn }
+      case 503:
+        return { headline: 'Cluster unavailable', detail: error.message, icon: ServerCrash }
+      default:
+        return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
+    }
+  }
+  // Network failures (no .status), DOMException for AbortError, anything thrown without our shape.
+  return { headline: "Couldn't load this view", detail: errorMessageOf(error), icon: AlertTriangle }
+}
+
+function errorMessageOf(error: unknown): string | null {
+  if (error instanceof Error && error.message) return error.message
+  if (typeof error === 'string') return error
+  return null
+}
+
+function CopyErrorButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  const onCopy = () => {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        setCopied(true)
+        window.setTimeout(() => setCopied(false), 1500)
+      },
+      () => { /* best-effort */ },
+    )
+  }
+  return (
+    <button
+      type="button"
+      onClick={onCopy}
+      className="flex-shrink-0 p-1 rounded text-theme-text-tertiary hover:text-theme-text-secondary hover:bg-theme-hover"
+      title={copied ? 'Copied' : 'Copy error'}
+      aria-label={copied ? 'Copied' : 'Copy error'}
+    >
+      {copied ? <Check className="h-3 w-3" aria-hidden /> : <Copy className="h-3 w-3" aria-hidden />}
+    </button>
+  )
+}

package/src/components/ui/index.ts

@@ -5,6 +5,7 @@ export { MiddleEllipsis } from './MiddleEllipsis'
 export type { MiddleEllipsisProps } from './MiddleEllipsis'
 export { EmptyState } from './EmptyState'
 export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
+export { FetchResult } from './FetchResult'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'
 export { StatusDot, mapHealthToTone } from './status-tone'

package/src/components/workload/WorkloadView.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } fro
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { startViewTransitionSafe } from '../../utils/view-transition'
-import { PaneLoader } from '../ui/PaneLoader'
+import { FetchResult } from '../ui/FetchResult'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
 import {
@@ -80,6 +80,9 @@ interface WorkloadViewProps {
   certificateInfo?: any
   /** Whether the resource is loading */
   isLoading?: boolean
+  /** Fetch error for the resource (preserves status + message so the
+   *  drawer body can distinguish 403/404/503 from "no data"). */
+  resourceError?: unknown
   /** Function to refetch the resource data */
   refetch?: () => void
 
@@ -187,6 +190,7 @@ export function WorkloadView({
   relationships,
   certificateInfo,
   isLoading: resourceLoading = false,
+  resourceError,
   refetch: refetchProp,
   // Timeline
   allEvents,
@@ -480,10 +484,8 @@ export function WorkloadView({
 
         {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element */}
         <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
-          {resourceLoading ? (
-            <PaneLoader className="h-32" />
-          ) : !resource ? (
-            <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
+          {!resource ? (
+            <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
           ) : showYaml ? (
             <EditableYamlView
               resource={selectedResource}
@@ -660,6 +662,7 @@ export function WorkloadView({
               selectedResource={selectedResource}
               relationships={relationships}
               isLoading={resourceLoading}
+              error={resourceError}
               onNavigate={onNavigateToResource}
               onCopy={copyToClipboard}
               copied={copied}
@@ -711,10 +714,8 @@ export function WorkloadView({
         )}
         {activeTab === 'yaml' && (
           <div className="h-full overflow-auto">
-            {resourceLoading ? (
-              <PaneLoader className="h-32" />
-            ) : !resource ? (
-              <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
+            {!resource ? (
+              <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
             ) : (
               <EditableYamlView
                 resource={selectedResource}
@@ -1165,6 +1166,7 @@ function InfoTab({
   selectedResource,
   relationships,
   isLoading,
+  error,
   onNavigate,
   onCopy,
   copied,
@@ -1185,6 +1187,7 @@ function InfoTab({
   selectedResource: SelectedResource
   relationships?: Relationships
   isLoading: boolean
+  error?: unknown
   onNavigate?: NavigateToResource
   onCopy: (text: string, key: string) => void
   copied: string | null
@@ -1201,16 +1204,8 @@ function InfoTab({
   updatesError?: Error | null
   extraContent?: ReactNode
 }) {
-  if (isLoading) {
-    return <PaneLoader className="h-full" />
-  }
-
   if (!resource) {
-    return (
-      <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-        Resource not found
-      </div>
-    )
+    return <FetchResult loading={isLoading} error={error} className="h-full" />
   }
 
   return (

package/src/types/fetch-error.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { isFetchError, isForbiddenError } from './fetch-error'
+
+function shaped(message: string, status: number) {
+  return Object.assign(new Error(message), { status })
+}
+
+describe('isFetchError', () => {
+  it('accepts an Error decorated with a numeric status', () => {
+    expect(isFetchError(shaped('forbidden', 403))).toBe(true)
+  })
+
+  it('accepts a plain object with status and message', () => {
+    expect(isFetchError({ status: 500, message: 'boom' })).toBe(true)
+  })
+
+  it('rejects a network failure without a status field', () => {
+    expect(isFetchError(new Error('Failed to fetch'))).toBe(false)
+  })
+
+  it('rejects abort/cancel DOMException-style throws (no status)', () => {
+    const aborted = new Error('The user aborted a request.')
+    aborted.name = 'AbortError'
+    expect(isFetchError(aborted)).toBe(false)
+  })
+
+  it('rejects undefined, null, primitives', () => {
+    expect(isFetchError(undefined)).toBe(false)
+    expect(isFetchError(null)).toBe(false)
+    expect(isFetchError('forbidden')).toBe(false)
+    expect(isFetchError(403)).toBe(false)
+  })
+
+  it('rejects an object with a non-numeric status', () => {
+    expect(isFetchError({ status: '403', message: 'forbidden' })).toBe(false)
+  })
+})
+
+describe('isForbiddenError', () => {
+  it('is true only for 403 on a fetch-error shape', () => {
+    expect(isForbiddenError(shaped('nope', 403))).toBe(true)
+    expect(isForbiddenError(shaped('nope', 404))).toBe(false)
+    expect(isForbiddenError(new Error('Failed to fetch'))).toBe(false)
+    expect(isForbiddenError(null)).toBe(false)
+  })
+})

package/src/types/fetch-error.ts

@@ -0,0 +1,20 @@
+// FetchErrorShape is the duck-typed contract every fetch error in the
+// app already satisfies — both web/'s ApiError and radar-hub-web's
+// ApiError expose .status and .message. Living in @skyhook-io/k8s-ui
+// without importing either lets presentational components (FetchResult,
+// ResourcesView's forbidden-kind sidebar) classify errors uniformly
+// across the OSS binary and Radar Hub.
+export interface FetchErrorShape {
+  status: number
+  message: string
+}
+
+export function isFetchError(error: unknown): error is FetchErrorShape {
+  if (typeof error !== 'object' || error === null) return false
+  const e = error as Record<string, unknown>
+  return typeof e.status === 'number' && typeof e.message === 'string'
+}
+
+export function isForbiddenError(error: unknown): boolean {
+  return isFetchError(error) && error.status === 403
+}

package/src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './core'
+export * from './fetch-error'
 export * from './gitops'
 export * from './gitops-tree'
 export * from './gitops-insights'