@skyhook-io/k8s-ui 1.18.1 → 1.19.0

package/src/components/issues/IssueGuidance.tsx

@@ -0,0 +1,48 @@
+import { AlertTriangle } from 'lucide-react'
+import { Disclosure } from '../ui/Disclosure'
+
+export function issueGuidanceSummary(action?: string, primary?: string, hazard?: string) {
+  const summary = primary || action
+  if (!hazard || !summary) return summary
+  if (summary === hazard) return undefined
+  return summary.endsWith(` ${hazard}`) ? summary.slice(0, -hazard.length - 1) : summary
+}
+
+export function IssueGuidance({ action, primary, secondaryTitle, secondary, ordered, hazard, className }: {
+  action?: string
+  /** Replaces a supplied action; primary alone renders no action text. */
+  primary?: string
+  /** Paired with secondary; no disclosure is shown without both. */
+  secondaryTitle?: string
+  /** Paired with secondaryTitle; no disclosure is shown without both. */
+  secondary?: string[]
+  ordered?: boolean
+  hazard?: string
+  className?: string
+}) {
+  if (!action && !hazard && !(secondaryTitle && secondary?.length)) return null
+  return (
+    <div className={className}>
+      {hazard && (
+        <div className="mb-2 flex items-start gap-2 text-warning-text">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <p>{hazard}</p>
+        </div>
+      )}
+      {action && <p>{primary || action}</p>}
+      {secondaryTitle && secondary && (
+        <Disclosure summary={secondaryTitle} className="mt-2" summaryClassName="font-medium">
+          {ordered ? (
+            <ol className="list-decimal space-y-2 pl-5 pt-2">
+              {secondary.map((step) => <li key={step}>{step}</li>)}
+            </ol>
+          ) : (
+            <div className="space-y-2 pt-2">
+              {secondary.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
+            </div>
+          )}
+        </Disclosure>
+      )}
+    </div>
+  )
+}

package/src/components/issues/IssuesView.tsx

@@ -1,7 +1,8 @@
+import { IssueGuidance, issueGuidanceSummary } from './IssueGuidance'
 import { summarizeSchedulerMessage } from '../resources/resource-utils'
 import { useMemo, useState, type ComponentType, type ReactNode } from 'react';
 import { AlertOctagon, AlertTriangle, ArrowRight, CircleCheck, Clock, Eraser, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
-import { CardBody, CardSection, ClusterName, Disclosure, EmptyState, KIND_CHIP_CLASS, TerminalBlock } from '../ui';
+import { CardSection, ClusterName, Disclosure, EmptyState, KIND_CHIP_CLASS, TerminalBlock } from '../ui';
 import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse';
 import { Tooltip } from '../ui/Tooltip';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
@@ -88,8 +89,8 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
         tone="healthy"
         variant="card"
         icon={CircleCheck}
-        headline="Nothing broken right now"
-        body="No active issues across the selected scope."
+        headline="No issues detected"
+        body="Radar's checks found nothing broken in the selected scope. They don't cover every failure, and Audit lists configuration that can still break things."
       />
     ) : (
       <EmptyState headline="No issue data yet" body="Connect a cluster to populate the issue queue." action={emptyAction} />
@@ -368,6 +369,15 @@ export function IssueRow({
         </div>
       </div>
 
+      {(issue.action_primary || issue.hazard) && (
+        <Collapse open={!open} unmountOnExit>
+          <div className="px-4 pb-3 pl-6 text-xs">
+            {issue.cause && <p className="mb-1 text-theme-text-primary">{issue.cause}</p>}
+            <IssueGuidance hazard={issue.hazard} action={issue.action_primary ? issueGuidanceSummary(issue.action, issue.action_primary, issue.hazard) : undefined} secondaryTitle={issue.action_secondary_title} secondary={issue.action_secondary} ordered={issue.reason === 'SharedResourceWarning'} className="text-theme-text-tertiary" />
+          </div>
+        </Collapse>
+      )}
+
       {/* Details unmount after the close transition: a list can hold hundreds
           of rows and the body is the expensive part, so closed rows stay light. */}
       <Collapse open={open} unmountOnExit id={panelId}>
@@ -509,11 +519,13 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
       </>
     ) : undefined;
 
+  const guidanceSummary = issueGuidanceSummary(issue.action, issue.action_primary, issue.hazard);
   const hasNextStep =
-    !!issue.action || !!sourceNextStep || (issue.remediation_kind === 'create-namespace' && !!issue.remediation_target);
+    !!guidanceSummary || !!issue.action_secondary?.length || !!sourceNextStep || (issue.remediation_kind === 'create-namespace' && !!issue.remediation_target);
 
   return (
     <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
+      <IssueGuidance hazard={issue.hazard} className="text-sm leading-relaxed" />
       {/* When a parsed cause replaces the detector text, the terse reason code
           (CrashLoopBackOff, FailedMount…) rides the eyebrow — it's the greppable
           identifier operators anchor on, and the collapsed header drops it while
@@ -547,7 +559,7 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
           tone="fix"
           labelExtra={nextStepAttribution ?? undefined}
         >
-          {sourceNextStep ?? (issue.action ? <CardBody>{issue.action}</CardBody> : null)}
+          {sourceNextStep ?? <IssueGuidance action={guidanceSummary} secondaryTitle={issue.action_secondary_title} secondary={issue.action_secondary} ordered={issue.reason === 'SharedResourceWarning'} className="text-sm leading-relaxed text-theme-text-secondary" />}
           {/* Survives an override: this is a structured one-click fix with an
               apply path, not advice competing with the host's. */}
           {issue.remediation_kind === 'create-namespace' && issue.remediation_target ? (

package/src/components/issues/diagnostic.ts

@@ -54,6 +54,8 @@ export function diagnosticFactLabel(type: string): string {
       return 'Admission dependency';
     case 'network_policy_isolates':
       return 'Affected resources';
+    case 'tls_certificate_consumers':
+      return 'Used for TLS by';
     default:
       return type.replace(/_/g, ' ');
   }

package/src/components/issues/index.ts

@@ -15,6 +15,7 @@ export {
   memberRef,
   issueSortAnchor,
   compareIssueSortAnchors,
+  compareIssues,
 } from './types';
 export type { Issue, IssueConditionalCleanup, IssueFinalizerRemoval, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField, IssueRunningPreviousValue, IssueWithheld } from './types';
 export {

package/src/components/issues/severity.ts

@@ -100,6 +100,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   crossplane_reconcile_failed: 'Crossplane reconcile failed',
   termination_stuck: 'Stuck terminating',
   operator_condition_failed: 'Controller reports a problem',
+  gitops_resource_warning: 'GitOps resource warning',
   gitops_sync_failed: 'GitOps sync failed',
   gitops_render_failed: 'GitOps render failed',
   gitops_spec_invalid: 'GitOps spec invalid',
@@ -140,6 +141,7 @@ export function categoryLabel(category: string): string {
 // Reasons filed under a category whose label names a different operation:
 // CNPG archiving and an unanswered scheduled run sit under backup_failed.
 const REASON_TITLE: Record<string, string> = {
+  FlaggerCanaryFailed: "Canary rollout failed",
   InvalidSchedule: 'Scheduling error reported',
   UnparseableSchedule: 'Scheduling error reported',
   UnParseableCronJobSchedule: 'Scheduling error reported',

package/src/components/issues/types.ts

@@ -231,6 +231,16 @@ export interface Issue {
    *  Server-emitted (omitempty); empty for issues without a parser. */
   cause?: string;
   action?: string;
+  /** What the suggested or most obvious action could destroy or take over,
+   *  such as a GitOps sync that would prune every managed resource. Show it
+   *  even when replacing cause or action with other guidance; action also
+   *  contains it. Absence means no warning was supplied, not that the action
+   *  is safe; older producers omit it. */
+  hazard?: string;
+  /** Optional presentation split; action always retains the complete guidance. */
+  action_primary?: string;
+  action_secondary_title?: string;
+  action_secondary?: string[];
   remediation_kind?: string;
   remediation_target?: string;
   /** A cleanup that is right only when its condition holds — never part of

package/src/components/logs/LogCore.tsx

@@ -707,7 +707,7 @@ export function LogCore({
           })}
         </div>
 
-        <div role="group" aria-label="Log display and utilities" className="ml-auto flex shrink-0 flex-nowrap items-center gap-2">
+        <div role="group" aria-label="Log display and utilities" className="ml-auto flex shrink-0 flex-nowrap items-center gap-2 phone:gap-1">
 
         {/* Structured-log display mode: icon cycles compact→expanded→raw, chevron picks explicitly. */}
         {hasStructuredEntries && (
@@ -715,7 +715,7 @@ export function LogCore({
             <Tooltip content={`Structured: ${STRUCTURED_MODE_LABELS[structuredMode]} — click to cycle`} delay={TIP_DELAY} position="bottom">
               <button
                 onClick={cycleStructuredMode}
-                className={`p-1.5 rounded-l transition-colors ${
+                className={`p-1.5 rounded-l phone:rounded transition-colors ${
                   structuredMode === 'compact' ? iconBtnInactive : palette.toolbarActive
                 }`}
                 aria-label={`Structured log display mode: ${STRUCTURED_MODE_LABELS[structuredMode]}`}
@@ -723,7 +723,8 @@ export function LogCore({
                 <Braces className="w-4 h-4" />
               </button>
             </Tooltip>
-            <div className="relative" ref={structuredMenuRef}>
+            {/* Phones keep the icon (it cycles the modes) and drop the picker to fit one row. */}
+            <div className="relative phone:hidden" ref={structuredMenuRef}>
               <Tooltip content="Pick structured display mode" delay={TIP_DELAY} position="bottom">
                 <button
                   onClick={() => setShowStructuredMenu(prev => !prev)}
@@ -874,7 +875,7 @@ export function LogCore({
         </Tooltip>
 
         {!themeLocked && (
-          <Tooltip content={isDark ? 'Switch to light mode' : 'Switch to dark mode'} delay={TIP_DELAY} position="bottom">
+          <Tooltip content={isDark ? 'Switch to light mode' : 'Switch to dark mode'} delay={TIP_DELAY} position="bottom" wrapperClassName="phone:hidden">
             <button
               onClick={toggleDark}
               className={iconBtnInactive}
@@ -987,8 +988,9 @@ export function LogCore({
       </div>
 
       {/* Search bar */}
+      {/* Phones: the query takes the first line and the search options wrap under it. */}
       {search.isOpen && (
-        <div className={`@container/logsearch flex items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
+        <div className={`@container/logsearch flex items-center gap-2 phone:flex-wrap phone:gap-y-1.5 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
           <Search className={`w-4 h-4 ${palette.textSecondary} shrink-0`} />
           <Input
             value={search.query}
@@ -1005,7 +1007,7 @@ export function LogCore({
               }
             }}
             placeholder="Search logs..."
-            className={`flex-1 bg-transparent ${palette.textPrimary} text-sm ${palette.placeholder} focus:outline-none min-w-0`}
+            className={`flex-1 phone:basis-[calc(100%-1.5rem)] bg-transparent ${palette.textPrimary} text-sm ${palette.placeholder} focus:outline-none min-w-0`}
             autoFocus
           />
 
@@ -1187,8 +1189,8 @@ export function LogCore({
         </div>
       )}
 
-      {/* Keyboard shortcut hints */}
-      <div className={`flex items-center gap-4 px-3 py-1 border-t ${palette.border} ${palette.toolbarBg} text-[10px] ${palette.textDisabled}`}>
+      {/* Keyboard shortcut hints (a phone has no keyboard to use them) */}
+      <div className={`flex items-center gap-4 px-3 py-1 border-t phone:hidden ${palette.border} ${palette.toolbarBg} text-[10px] ${palette.textDisabled}`}>
         {onStartStream && (!sourceUnavailable || isStreaming) && <Shortcut keys="S" label={isStreaming ? 'Stop stream' : 'Stream'} palette={palette} />}
         <Shortcut keys="Ctrl+F" label="Search" palette={palette} />
         {search.mode !== 'hide' && (
@@ -1353,7 +1355,7 @@ function LogLine({
   }
 
   return (
-    <div className={`flex ${palette.hoverSurface} group leading-5 px-2 ${isCurrentMatch ? palette.currentMatchBg : ''}`}>
+    <div className={`flex phone:flex-wrap ${palette.hoverSurface} group leading-5 px-2 ${isCurrentMatch ? palette.currentMatchBg : ''}`}>
       {leadSlot}
       {showTimestamp && entry.timestamp && (
         <span
@@ -1371,10 +1373,10 @@ function LogLine({
           [{entry.sourceLabel || entry.pod.split('-').slice(-2).join('-')}]
         </span>
       )}
-      <span className="flex-1 min-w-0">{contentElement}</span>
+      <span className="flex-1 min-w-0 phone:order-last phone:basis-full">{contentElement}</span>
       <button
         onClick={handleCopy}
-        className={`opacity-0 group-hover:opacity-100 focus-visible:opacity-100 ml-1 p-0.5 rounded ${palette.textTertiary} ${palette.hoverText} shrink-0 transition-opacity`}
+        className={`opacity-0 group-hover:opacity-100 focus-visible:opacity-100 ml-1 p-0.5 rounded ${palette.textTertiary} ${palette.hoverText} shrink-0 transition-opacity phone:ml-auto phone:opacity-100`}
         title="Copy line"
       >
         <Copy className="w-3 h-3" />

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -327,7 +327,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       {/* Pod filter */}
-      <fieldset disabled={sourceUnavailable} className="flex items-center gap-2 disabled:opacity-50">
+      <fieldset disabled={sourceUnavailable} className="flex items-center gap-2 disabled:opacity-50 phone:flex-wrap">
       <div className="relative">
         <button
           onClick={() => setShowPodFilter(v => !v)}

package/src/components/namespace-switcher/NamespacePicker.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import { ChevronDown, Globe, Search } from 'lucide-react'
 import { Badge } from '../ui/Badge'
 import { Tooltip } from '../ui/Tooltip'
+import { useKeepInViewport } from '../../hooks/useKeepInViewport'
 import { MultiSelectPicker } from '../ui/MultiSelectPicker'
 
 /**
@@ -96,6 +97,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
 
   const triggerRef = useRef<HTMLButtonElement>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  useKeepInViewport(dropdownRef, isOpen)
   const [restoreFocus, setRestoreFocus] = useState(false)
 
   const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])

package/src/components/resources/ResourcesSidebar.keyboard.test.tsx

@@ -40,3 +40,31 @@ it('opens a matching View with Enter when search finds no kind', () => {
   act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
   expect(view).toHaveBeenCalledTimes(1)
 })
+it('in a drawer, Escape in a non-empty kind filter clears it without reaching the dialog', () => {
+  const outside = vi.fn()
+  document.addEventListener('keydown', outside)
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} containEscape />))
+  const input = host.querySelector('input')!
+  const type = (v: string) => act(() => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, v)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  const escape = () => act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })))
+  type('pod'); escape()
+  expect(input.value).toBe('')
+  expect(outside).not.toHaveBeenCalled()
+  // An empty filter lets Escape through, so the drawer still closes on it.
+  escape()
+  expect(outside).toHaveBeenCalledTimes(1)
+  document.removeEventListener('keydown', outside)
+})
+it('reads and reports display settings through the parent when it holds them', () => {
+  const onChange = vi.fn()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} pinned={[{ name: 'pods', kind: 'Pod', group: '' }]} displayState={{ showEmptyKinds: false, favoritesExpanded: false }} onDisplayStateChange={onChange} />))
+  const favorites = [...host.querySelectorAll('button')].find((b) => b.textContent?.toLowerCase().includes('favorites'))!
+  expect(favorites.getAttribute('aria-expanded')).toBe('false')
+  act(() => favorites.click())
+  expect(onChange).toHaveBeenCalledWith({ showEmptyKinds: false, favoritesExpanded: true })
+})

package/src/components/resources/ResourcesSidebar.tsx

@@ -79,6 +79,18 @@ export interface ResourcesSidebarProps {
   /** Task destinations keyed by category name (e.g. "CloudNativePG"). A category
    *  with a workspace stays visible even when it has no resources. */
   categoryWorkspaces?: Record<string, SidebarCategoryWorkspace>
+  /** Display settings held by the parent, for a sidebar that unmounts between
+   *  uses (the phone drawer) and should not reset them each time it opens. */
+  displayState?: SidebarDisplayState
+  onDisplayStateChange?: (state: SidebarDisplayState) => void
+  /** Escape in a non-empty kind filter clears it without letting the key
+   *  reach an enclosing dialog, which would close. */
+  containEscape?: boolean
+}
+
+export interface SidebarDisplayState {
+  showEmptyKinds: boolean
+  favoritesExpanded: boolean
 }
 
 // Persisted across remounts so collapsed categories survive tab switches
@@ -250,6 +262,9 @@ export function ResourcesSidebar({
   basePath,
   onKindNavigated,
   categoryWorkspaces,
+  displayState,
+  onDisplayStateChange,
+  containEscape,
 }: ResourcesSidebarProps) {
   // Wraps kind selection to also navigate when basePath/onNavigate are provided
   const selectKind = (kind: SelectedKindInfo) => {
@@ -267,8 +282,13 @@ export function ResourcesSidebar({
     () => persistedExpandedCategories ?? new Set(['Workloads', 'Networking', 'Configuration'])
   )
   useEffect(() => { persistedExpandedCategories = expandedCategories }, [expandedCategories])
-  const [showEmptyKinds, setShowEmptyKinds] = useState(false)
-  const [favoritesExpanded, setFavoritesExpanded] = useState(() => pinned.length > 0)
+  const [ownDisplayState, setOwnDisplayState] = useState<SidebarDisplayState>(() => ({ showEmptyKinds: false, favoritesExpanded: pinned.length > 0 }))
+  const { showEmptyKinds, favoritesExpanded } = displayState ?? ownDisplayState
+  const setDisplayState = (patch: Partial<SidebarDisplayState>) => {
+    const next = { showEmptyKinds, favoritesExpanded, ...patch }
+    if (onDisplayStateChange) onDisplayStateChange(next)
+    else setOwnDisplayState(next)
+  }
   const favoritesDisclosure = useDisclosure(favoritesExpanded)
   // Category sections are mapped inline, so they can't each call useDisclosure;
   // one generated prefix plus the category name keeps aria-controls unique.
@@ -529,6 +549,7 @@ export function ResourcesSidebar({
 
   const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Escape') {
+      if (containEscape && kindFilter) e.stopPropagation()
       setKindFilter('')
       setHighlightedIndex(-1)
       ;(e.target as HTMLInputElement).blur()
@@ -546,7 +567,7 @@ export function ResourcesSidebar({
       setKindFilter('')
       onKindNavigated?.()
     }
-  }, [visibleResults.length, highlightedResult, selectKind, onKindNavigated]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [visibleResults.length, highlightedResult, selectKind, onKindNavigated, containEscape, kindFilter]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const isKindHighlighted = useCallback((name: string, group: string) => {
     return highlightedKind?.name === name && highlightedKind?.group === group
@@ -603,7 +624,7 @@ export function ResourcesSidebar({
         <div className="mb-2">
           <button
             {...favoritesDisclosure.buttonProps}
-            onClick={() => setFavoritesExpanded((v) => !v)}
+            onClick={() => setDisplayState({ favoritesExpanded: !favoritesExpanded })}
             className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
           >
             <CollapseChevron open={favoritesExpanded} className="w-3 h-3" />
@@ -778,7 +799,7 @@ export function ResourcesSidebar({
         {/* Toggle for showing/hiding empty kinds and groups */}
         {hiddenKindsCount > 0 || hiddenGroupsCount > 0 || showEmptyKinds ? (
           <button
-            onClick={() => setShowEmptyKinds(!showEmptyKinds)}
+            onClick={() => setDisplayState({ showEmptyKinds: !showEmptyKinds })}
             className="w-full flex items-center gap-2 px-3 py-2 mt-2 text-xs text-theme-text-tertiary hover:text-theme-text-secondary border-t border-theme-border"
           >
             {showEmptyKinds ? (

package/src/components/resources/ResourcesView.crossplane-pause.test.tsx

@@ -0,0 +1,133 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { VirtuosoMockContext } from 'react-virtuoso'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ResourcesView } from './ResourcesView'
+import { getCellFilterValue, serializeColumnFilters } from './resource-utils'
+import { getResourceStatus } from '../shared/ResourceRendererDispatch'
+import { KeyboardShortcutProvider } from '../../hooks/useKeyboardShortcuts'
+import type { APIResource } from '../../types'
+import type { PrinterTable } from './printer-columns'
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+window.matchMedia = vi.fn().mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+Element.prototype.scrollIntoView = vi.fn()
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+
+afterEach(() => { act(() => root?.unmount()); host?.remove(); localStorage.clear(); window.history.replaceState(null, '', '/') })
+
+const pause = { type: 'Synced', status: 'False', reason: 'ReconcilePaused' }
+const mr = { providerConfigRef: { name: 'default' } }
+const xr = { resourceRefs: [] }
+const claim = { resourceRef: { kind: 'Archive', name: 'xr' }, compositionRef: { name: 'archive' } }
+
+it.each([
+  ['managed', 'test.crossplane.io', mr, false],
+  ['foreign-group managed', 'example.com', mr, false],
+  ['composite default', 'example.com', xr, false],
+  ['composite printer', 'example.com', xr, true],
+  ['claim printer', 'example.com', claim, true],
+  ['ref-less early composite printer', 'example.com', {}, true],
+  ['ref-less early claim default', 'example.com', {}, false],
+] as const)('keeps pause context and primary evidence on the real %s table path', async (_name, group, spec, printer) => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const kind: APIResource = { group, version: 'v1', kind: 'Archive', name: 'archives', namespaced: true, isCrd: true, verbs: ['get', 'list'] }
+  const resource = {
+    apiVersion: `${group}/v1`, kind: 'Archive',
+    metadata: { name: 'acknowledged', namespace: 'test', uid: 'fixture', annotations: { 'crossplane.io/paused': 'true' } },
+    spec, status: { conditions: [pause, { type: 'Ready', status: 'False', reason: 'Unavailable' }] },
+  }
+  const printerTable: PrinterTable | undefined = printer ? {
+    kind: kind.name, group,
+    columns: [
+      { name: 'Synced', jsonPath: ".status.conditions[?(@.type=='Synced')].status", type: 'string' },
+      { name: 'Ready', jsonPath: ".status.conditions[?(@.type=='Ready')].status", type: 'string' },
+    ],
+    cells: { fixture: ['False', 'False'] },
+  } : undefined
+  await act(async () => root.render(<VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}><KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[kind]}
+    resourceCounts={{ Archive: 1 }}
+    selectedKindQuery={{ isLoading: false, data: [resource], resourceName: kind.name, group }}
+    locationPathname="/resources/archives"
+    locationSearch={`?apiGroup=${group}`}
+    onNavigate={() => {}}
+    printerTable={printerTable}
+  /></KeyboardShortcutProvider></VirtuosoMockContext.Provider>))
+  const row = host.querySelector('tbody tr')!
+  expect(row.textContent).toContain('acknowledged')
+  expect(row.textContent?.match(/Paused/g)).toHaveLength(1)
+  if (printer) {
+    const printed = [...row.querySelectorAll('td')].filter(cell => cell.textContent?.trim() === 'False')
+    expect(printed).toHaveLength(2)
+    expect(printed[0].querySelector('.status-neutral')).not.toBeNull()
+    expect(printed[1].querySelector('.status-unhealthy')).not.toBeNull()
+    expect(row.textContent).not.toContain('Unavailable')
+  } else {
+    expect(row.textContent).toContain('Unavailable')
+    expect(row.textContent).not.toContain('Out of sync')
+  }
+})
+
+
+it('preserves curated package install failure ahead of a recorded pause in the table and filter', async () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const group = 'pkg.crossplane.io'
+  const kind: APIResource = { group, version: 'v1', kind: 'Provider', name: 'providers', namespaced: false, isCrd: true, verbs: ['get', 'list'] }
+  const resource = {
+    apiVersion: `${group}/v1`, kind: 'Provider',
+    metadata: { name: 'install-failure', uid: 'package-fixture', annotations: { 'crossplane.io/paused': 'true' } },
+    spec: { package: 'example.invalid/provider:v1' },
+    status: { conditions: [pause, { type: 'Installed', status: 'False', reason: 'UnpackFailed' }, { type: 'Healthy', status: 'True' }] },
+  }
+  await act(async () => root.render(<VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}><KeyboardShortcutProvider><ResourcesView
+    namespaces={[]}
+    apiResources={[kind]}
+    resourceCounts={{ Provider: 1 }}
+    selectedKindQuery={{ isLoading: false, data: [resource], resourceName: kind.name, group }}
+    locationPathname="/resources/providers"
+    locationSearch={`?apiGroup=${group}`}
+    onNavigate={() => {}}
+  /></KeyboardShortcutProvider></VirtuosoMockContext.Provider>))
+  const row = host.querySelector('tbody tr')!
+  expect(row.textContent).toContain('UnpackFailed')
+  expect(row.querySelector('.status-unhealthy')).not.toBeNull()
+  expect(row.textContent).not.toContain('Readiness unknown')
+  expect(getCellFilterValue(resource, 'status', 'providers')).toBe('UnpackFailed')
+  expect(getCellFilterValue(resource, 'status', 'providers')).toBe(getResourceStatus('providers', resource)?.text)
+})
+
+
+it.each([
+  ['ref-less generic', 'example.com', 'Archive', 'archives', {}, 'Ready (reported)', 'Ready (reported)'],
+  ['managed-name collision', 'acm.aws.upbound.io', 'Certificate', 'certificates', mr, 'Ready (reported)', 'Ready (reported)'],
+  ['curated Knative', 'serving.knative.dev', 'Revision', 'revisions', {}, 'Ready', 'Scaled to Zero'],
+] as const)('routes the actual %s status filter through the existing column policy', async (_name, group, kindName, plural, spec, filterText, cellText) => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const kind: APIResource = { group, version: 'v1', kind: kindName, name: plural, namespaced: true, isCrd: true, verbs: ['get', 'list'] }
+  const resource = {
+    apiVersion: `${group}/v1`, kind: kindName,
+    metadata: { name: 'kept', namespace: 'test', uid: 'kept-fixture', annotations: { 'crossplane.io/paused': 'true' } },
+    spec, status: { conditions: [pause, { type: 'Ready', status: 'True' }, { type: 'Active', status: 'False', reason: 'NoTraffic' }] },
+  }
+  const excluded = { ...resource, metadata: { ...resource.metadata, name: 'excluded', uid: 'excluded-fixture' }, status: { conditions: [pause, { type: 'Ready', status: 'False', reason: 'Unavailable' }] } }
+  const search = `?${new URLSearchParams({ apiGroup: group, filters: serializeColumnFilters({ status: [filterText] }) })}`
+  window.history.replaceState(null, '', `/resources/${plural}${search}`)
+  await act(async () => root.render(<VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}><KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[kind]}
+    resourceCounts={{ [kindName]: 2 }}
+    selectedKindQuery={{ isLoading: false, data: [resource, excluded], resourceName: plural, group }}
+    locationPathname={`/resources/${plural}`}
+    locationSearch={search}
+    onNavigate={() => {}}
+  /></KeyboardShortcutProvider></VirtuosoMockContext.Provider>))
+  const rows = host.querySelectorAll('tbody tr')
+  expect(rows).toHaveLength(1)
+  expect(rows[0].textContent).toContain('kept')
+  expect(rows[0].textContent).toContain(cellText)
+  expect(rows[0].textContent).not.toContain('excluded')
+})

package/src/components/resources/ResourcesView.flagger.test.tsx

@@ -0,0 +1,31 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { VirtuosoMockContext } from 'react-virtuoso'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ResourcesView } from './ResourcesView'
+import { KeyboardShortcutProvider } from '../../hooks/useKeyboardShortcuts'
+import type { APIResource } from '../../types'
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+window.matchMedia = vi.fn().mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+Element.prototype.scrollIntoView = vi.fn()
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove(); localStorage.clear() })
+
+it('shows failed rollout and suspension together in the actual Canary table', async () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const kind: APIResource = { group: 'flagger.app', version: 'v1beta1', kind: 'Canary', name: 'canaries', namespaced: true, isCrd: true, verbs: ['get', 'list'] }
+  const data = { apiVersion: 'flagger.app/v1beta1', kind: 'Canary', metadata: { name: 'storefront', namespace: 'test' }, spec: { suspend: true, targetRef: { kind: 'Deployment', name: 'storefront' }, analysis: { iterations: 2 } }, status: { phase: 'Failed' } }
+  await act(async () => root.render(<VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}><KeyboardShortcutProvider><ResourcesView namespaces={['test']} apiResources={[kind]} resourceCounts={{ Canary: 1 }} selectedKindQuery={{ isLoading: false, data: [data], resourceName: kind.name, group: kind.group }} locationPathname="/resources/canaries" locationSearch="?apiGroup=flagger.app" onNavigate={() => {}} /></KeyboardShortcutProvider></VirtuosoMockContext.Provider>))
+  const table = host.querySelector('table')!
+  expect(table).not.toBeNull()
+  expect(table.textContent).toContain('Rollout State')
+  expect(table.textContent).toContain('Failed')
+  expect(table.querySelector('.status-unhealthy')).not.toBeNull()
+  expect(table.textContent).toContain('Blue/green')
+  expect(table.textContent).toContain('Not weighted')
+  expect(table.textContent).toContain('Suspend Requested')
+  expect(table.textContent).toContain('Yes')
+})