@skyhook-io/k8s-ui 1.7.5 → 1.7.7

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 {
@@ -228,6 +229,13 @@ const TAILWIND_WIDTH_TO_PX: Record<string, number> = {
   'w-48': 192, 'w-56': 224, 'w-64': 256,
 }
 
+const COMPARE_COLUMN_WIDTH = 36
+const COMPARE_COLUMN_STYLE: React.CSSProperties = {
+  width: COMPARE_COLUMN_WIDTH,
+  minWidth: COMPARE_COLUMN_WIDTH,
+  maxWidth: COMPARE_COLUMN_WIDTH,
+}
+
 function getColumnMinWidth(col: Column): number {
   if (col.minWidth) return col.minWidth
   if (!col.width) return 200 // Name column (no width class) gets wider minimum
@@ -1681,11 +1689,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 +1759,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 +1939,7 @@ export function ResourcesView({
   defaultKind = DEFAULT_KIND_INFO,
   extraLeadingColumns,
   onRowSelect,
+  rowHrefFor,
   onCompareSubmit,
   resolveRowCluster,
   onClearNamespaces,
@@ -3361,6 +3374,18 @@ export function ResourcesView({
     return allColumns.filter(c => visibleColumns.has(c.key))
   }, [allColumns, visibleColumns])
 
+  // Fixed-width columns can consume the table's flexible space and collapse
+  // the required name column. Keep a real table minimum and let the container
+  // scroll horizontally when the viewport is too narrow.
+  const tableMinWidth = useMemo(() => {
+    const compareColumnWidth = compareMode ? COMPARE_COLUMN_WIDTH : 0
+    const baseMinWidth = columns.reduce((sum, col) => sum + (columnWidths[col.key] || getColumnMinWidth(col)), compareColumnWidth)
+    const flexibleNameColumn = columns.find(col => col.key === 'name' && !columnWidths[col.key])
+
+    if (!hasResizedColumns || !flexibleNameColumn) return baseMinWidth
+    return baseMinWidth + getColumnMinWidth(flexibleNameColumn)
+  }, [columns, columnWidths, compareMode, hasResizedColumns])
+
   // Stable virtuoso components — memoized to avoid remounting the table on every render
   const virtuosoComponents = useMemo(() => ({
     Table: React.forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement>>(function VirtuosoTable(props, ref) {
@@ -3369,7 +3394,7 @@ export function ResourcesView({
           {...props}
           ref={ref}
           className="w-full"
-          style={{ ...props.style, tableLayout: 'fixed' }}
+          style={{ ...props.style, tableLayout: 'fixed', minWidth: tableMinWidth }}
         >
           <colgroup>
             {/*
@@ -3379,7 +3404,7 @@ export function ResourcesView({
               the missing entry by stealing width from a sized neighbour
               — typically blowing this narrow column out to ~200px.
             */}
-            {compareMode && <col style={{ width: 36 }} />}
+            {compareMode && <col style={{ width: COMPARE_COLUMN_WIDTH }} />}
             {columns.map(col => (
               <col
                 key={col.key}
@@ -3397,7 +3422,7 @@ export function ResourcesView({
       )
     }),
     TableRow: VirtuosoTableRow,
-  }), [columns, columnWidths, hasResizedColumns, compareMode])
+  }), [columns, columnWidths, hasResizedColumns, compareMode, tableMinWidth])
 
   // Calculate filter options with counts based on current resources (before filtering)
   const filterOptions = useMemo(() => {
@@ -3943,7 +3968,7 @@ export function ResourcesView({
 
         {/* Table */}
         <div
-          className="flex-1 overflow-y-auto overflow-x-hidden relative"
+          className="flex-1 overflow-auto relative"
           ref={tableContainerRef}
           onClick={(e) => {
             if (e.target === e.currentTarget && selectedResource) {
@@ -4056,7 +4081,7 @@ export function ResourcesView({
                       // Inline px width — under `table-layout:fixed`,
                       // `w-9` is a hint the browser absorbs into leftover
                       // row width on an icon-only column.
-                      style={{ width: 36, minWidth: 36, maxWidth: 36 }}
+                      style={COMPARE_COLUMN_STYLE}
                       className="px-2 py-3 text-xs font-medium uppercase tracking-wide bg-theme-base border-b border-r-subtle border-theme-border text-center text-skyhook-400"
                       title="Compare mode"
                     >
@@ -4256,6 +4281,7 @@ export function ResourcesView({
                     onMouseEnter={() => setHighlightedIndex(-1)}
                     compareMode={compareMode}
                     comparePickIndex={pickIdx}
+                    rowHref={rowHrefFor?.(resource)}
                   />
                 )
               }}
@@ -4301,6 +4327,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,16 +4350,20 @@ 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 && (
         <td
           onClick={onClick}
           onMouseEnter={onMouseEnter}
-          style={{ width: 36, minWidth: 36, maxWidth: 36 }}
+          style={COMPARE_COLUMN_STYLE}
           className={clsx('px-2 py-3 border-b-subtle cursor-pointer text-center align-middle transition-colors', rowHighlight)}
         >
           {pickedSide ? (
@@ -4353,15 +4387,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 +4448,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 +4465,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/ArgoApplicationRenderer.tsx

@@ -1,4 +1,4 @@
-import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks } from 'lucide-react'
+import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
@@ -10,6 +10,9 @@ import {
   type ArgoResource,
 } from '../../../types/gitops'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { buildRepoBrowseUrl, buildPathBrowseUrl } from '../../../utils/git-provider-urls'
+
+const REPO_LINK_CLASS = 'text-blue-400 hover:text-blue-300 hover:underline break-all'
 
 interface ArgoApplicationRendererProps {
   data: any
@@ -19,10 +22,51 @@ interface ArgoApplicationRendererProps {
 
 function SourceProperties({ source }: { source: any }) {
   if (!source) return null
+  // Helm chart sources point repoURL at a chart registry, not a browseable git repo.
+  const isHelmSource = !!source.chart
+  const repoHref = isHelmSource ? null : buildRepoBrowseUrl(source.repoURL)
+  const pathHref = isHelmSource ? null : buildPathBrowseUrl(source.repoURL, source.path, source.targetRevision)
   return (
     <>
-      <Property label="Repository" value={source.repoURL} />
-      {source.path && <Property label="Path" value={source.path} />}
+      <Property
+        label="Repository"
+        value={
+          repoHref ? (
+            <a
+              href={repoHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={source.repoURL}
+              className={`${REPO_LINK_CLASS} inline-flex items-center gap-1`}
+            >
+              {source.repoURL}
+              <ExternalLink className="w-3 h-3 shrink-0" />
+            </a>
+          ) : (
+            source.repoURL
+          )
+        }
+      />
+      {source.path && (
+        <Property
+          label="Path"
+          value={
+            pathHref ? (
+              <a
+                href={pathHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={source.path}
+                className={REPO_LINK_CLASS}
+              >
+                {source.path}
+              </a>
+            ) : (
+              source.path
+            )
+          }
+        />
+      )}
       {source.targetRevision && (
         <Property
           label="Target Revision"

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/resources/resource-utils-argo.ts

@@ -57,6 +57,24 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   return { text: health || sync || 'Unknown', color: healthColors.unknown, level: 'unknown' }
 }
 
+// Radar suspends an Argo Application by clearing spec.syncPolicy.automated and
+// recording the prior prune/selfHeal flags in annotations so Resume can restore
+// them. The *presence* of any of these annotations marks the app as suspended —
+// independent of health.status, which stays whatever the app's resources report
+// (often Missing/OutOfSync, never literally "Suspended"). Both the current
+// radarhq.io keys and the legacy skyhook.io keys (still on apps suspended by
+// older builds) count. Shared so the fleet table and the detail page can't
+// disagree on whether an app is suspended.
+export function isArgoSuspendedByRadar(app: any): boolean {
+  const a = app?.metadata?.annotations
+  return Boolean(
+    a?.['radarhq.io/suspended-prune'] ||
+      a?.['radarhq.io/suspended-selfheal'] ||
+      a?.['skyhook.io/suspended-prune'] ||
+      a?.['skyhook.io/suspended-selfheal'],
+  )
+}
+
 // ============================================================================
 // ARGOCD TABLE CELL UTILITIES
 // ============================================================================

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