@skyhook-io/k8s-ui 1.18.1 → 1.18.2

package/README.md

@@ -83,3 +83,11 @@ tooltip. `certaintyGlyph` and `certaintyValueLabel` expose the same vocabulary.
 `ActionConfirmDialog` adds context, reviewed writes and optional typed acknowledgement to the simpler `ConfirmDialog`. Hosts own loading, permission checks, stale-fact validation and result classification. Its `result` binds the state (`error`, `unknown` or `partial`), message and optional heading; unknown and partial results lock another submit. Retain that result outside the dialog across dismissal and remount, and clear it only after explicitly reviewing current state. The component does not infer outcomes from HTTP status. Remount it when changing the reviewed target or action, so acknowledgement and disclosure state start fresh. The default error heading makes no claim about whether a write occurred; use a stronger result title only when the producer proves it.
 
 Existing CNPG primitive exports remain available and delegate to these shared implementations.
+
+`PrinterColumnDef.jsonPath` optionally carries source provenance from newer Radar servers. The UI does not evaluate it: values still come from the server's table converter. Without it, printer-cell tones stay generic. Crossplane pause qualification only recognizes exact Ready/Synced condition paths and corroborated annotation/condition evidence; same-named unrelated columns retain their normal tones. `ConditionTone` also supports opt-in `neutral`; `defaultConditionTone` retains its original return vocabulary. `ComposedRefStatus.pauseState` optionally supplies recorded Crossplane pause context for a composed-resource row.
+
+`ForceDeleteConfirmDialog.resourceData` optionally supplies the current object for Crossplane pause context. Paused MR/XR/Claim shapes holding a known Crossplane finalizer receive a cleanup warning; the prop does not change confirmation or force-delete behavior. YAML operation context uses the existing baseline and predicted manifests; removing a pause annotation requests resumption rather than proving it.
+
+`YamlReview.mode` distinguishes Apply, strict Create and Update (default: `apply`). Hosts using strict creation should pass `create` so an unpreviewable new document does not imply unknown live pause state. Crossplane operation context reports what the server preview actually keeps or clears; unsupported dry-run documents retain conditional uncertainty rather than treating submitted YAML as a live baseline.
+
+For a single editor target, `YamlReview.resourceData` may retain its raw condition evidence when the review YAML intentionally omits status. `EditableYamlView` binds that snapshot to its preview. It is not used to classify unrelated documents in a batch. Generic Apply with neither a known Crossplane shape nor raw acknowledged pause does not infer a resource’s controller from the annotation alone.

package/package.json

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

package/src/components/applications/ApplicationsView.tsx

@@ -46,6 +46,7 @@ import {
 import { ReadyBar } from './ReadyBar'
 import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo, BatchSignalChip } from './AppChips'
 import { AppIdentityTooltip, EnvHint, RolloutSummaryTooltip } from './AppTooltips'
+import { FilterRailPanel } from '../shared/FilterRailPanel'
 
 function ApplicationRuntimeCell({ apps, workloadClass, ready, desired }: { apps: AppRow[]; workloadClass: AppWorkloadClass; ready: number; desired: number }) {
   if (workloadClass !== 'job') {
@@ -337,6 +338,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
   // showSystem lives in the Filters rail, so Clear resets it too (and its
   // non-default ON state counts as an active filter that surfaces the button).
   const anyFilterActive = filters.isActive
+  const activeFilterCount = fHealth.size + fClass.size + fType.size + fEnv.size + fSource.size + (systemCount > 0 && showSystem ? 1 : 0)
   const clearAllFilters = () => {
     filters.clearAll()
   }
@@ -355,7 +357,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           actions={
             <>
               {headerActions}
-              <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} loading={initialLoading} />
+              <SummaryTile label={total === 1 ? 'application' : 'applications'} phoneLabel={total === 1 ? 'app' : 'apps'} value={total} loading={initialLoading} />
               {healthTile('unhealthy', 'error')}
               {healthTile('degraded', 'warning')}
               {healthTile('healthy', 'success')}
@@ -381,13 +383,12 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             Arbitrary 900px breakpoint (not `sm`) so the collapse is independent of
             the consuming app's Tailwind breakpoint config (Hub uses defaults). */}
         <aside className="flex w-52 shrink-0 flex-col overflow-hidden border-r border-theme-border bg-theme-surface/90 max-[899px]:max-h-72 max-[899px]:w-full max-[899px]:border-b max-[899px]:border-r-0">
-          <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
-            <span className="text-sm font-medium text-theme-text-secondary">Filters</span>
-            {anyFilterActive && (
+          <FilterRailPanel
+            activeCount={activeFilterCount}
+            clear={anyFilterActive && (
               <button type="button" onClick={clearAllFilters} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">Clear</button>
             )}
-          </div>
-          <div className="flex-1 overflow-y-auto">
+          >
             {initialLoading ? (
               <BoardRailSkeleton
                 sections={[
@@ -414,7 +415,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             )}
               </>
             )}
-          </div>
+          </FilterRailPanel>
         </aside>
 
         {/* Content: toolbar (search + sort) over the scrollable table. */}

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -12,6 +12,7 @@ import { ClusterName } from '../ui/ClusterName'
 import { Input } from '../ui/Input'
 import { MiddleEllipsis } from '../ui/MiddleEllipsis'
 import { StatusDot, type StatusTone } from '../ui/status-tone'
+import { useKeepInViewport } from '../../hooks/useKeepInViewport'
 
 export interface ClusterSwitcherItem {
   id: string
@@ -107,6 +108,8 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
   const rootRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  useKeepInViewport(menuRef, isOpen)
 
   useImperativeHandle(ref, () => ({
     open: () => {
@@ -284,6 +287,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
 
       {isOpen && (
         <div
+          ref={menuRef}
           className={`absolute top-full ${positionClass} mt-1 z-50 min-w-[280px] max-w-[420px] bg-theme-surface border border-theme-border-light rounded-lg shadow-xl overflow-hidden`}
         >
           {searchable && (

package/src/components/compare/ResourceCompareView.tsx

@@ -5,6 +5,7 @@ import { YamlDiffEditor } from '../ui/YamlEditor'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { pluralToKind } from '../../utils/navigation'
+import { usePhoneLayout } from '../../hooks/usePhoneLayout'
 import { toComparableYaml } from './normalize'
 import { SIDE_TONES, type CompareSide } from './types'
 
@@ -120,7 +121,10 @@ export function ResourceCompareView({
   bleed = false,
 }: ResourceCompareViewProps) {
   const [specOnly, setSpecOnly] = useState(false)
-  const [unified, setUnified] = useState(false)
+  const [unifiedPicked, setUnified] = useState(false)
+  // Two side-by-side panes don't fit a phone, so phones always get one column.
+  const isPhone = usePhoneLayout()
+  const unified = unifiedPicked || isPhone
   const [hideUnchanged, setHideUnchanged] = useState(true)
   const [rawMetadata, setRawMetadata] = useState(false)
 
@@ -180,7 +184,7 @@ export function ResourceCompareView({
           <ToggleButton active={rawMetadata} onClick={() => setRawMetadata(v => !v)} icon={<Sparkles className="w-3.5 h-3.5" />} label="Raw metadata" tooltip="Keep server-assigned noise (uid, resourceVersion, managedFields, last-applied)" />
           <ToggleButton active={specOnly} onClick={() => setSpecOnly(v => !v)} icon={<FileCode2 className="w-3.5 h-3.5" />} label="Spec only" tooltip="Drop status fields from both sides" />
           <ToggleButton active={hideUnchanged} onClick={() => setHideUnchanged(v => !v)} icon={<FileText className="w-3.5 h-3.5" />} label="Diff only" tooltip="Collapse unchanged regions" />
-          <ToggleButton active={unified} onClick={() => setUnified(v => !v)} icon={<Rows className="w-3.5 h-3.5" />} label="Unified" tooltip="Switch between side-by-side and single-column" />
+          {!isPhone && <ToggleButton active={unified} onClick={() => setUnified(v => !v)} icon={<Rows className="w-3.5 h-3.5" />} label="Unified" tooltip="Switch between side-by-side and single-column" />}
         </div>
 
         <div className="w-px h-5 bg-theme-border shrink-0" aria-hidden />

package/src/components/gitops/GitOpsTableView.tsx

@@ -41,6 +41,7 @@ import { toggleSet } from './GitOpsGraphFilterRail'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format'
+import { FilterRailPanel } from '../shared/FilterRailPanel'
 
 // =============================================================================
 // GitOpsTableView — the canonical GitOps fleet list (Argo + Flux).
@@ -937,13 +938,17 @@ function GitOpsFilterSidebar({
         side === 'right' ? 'border-l max-[899px]:border-l-0' : 'border-r max-[899px]:border-r-0'
       }`}
     >
-      <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
-        <span className="text-sm font-medium text-theme-text-secondary">Filters</span>
-        <button type="button" onClick={onClear} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">
-          Clear
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto">
+      <FilterRailPanel
+        activeCount={
+          syncFilters.size + healthFilters.size + automationFilters.size + kindFilters.size +
+          projectFilters.size + namespaceFilters.size + (lifecycleFilter === 'all' ? 0 : 1)
+        }
+        clear={
+          <button type="button" onClick={onClear} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">
+            Clear
+          </button>
+        }
+      >
         {loading ? (
           <BoardRailSkeleton
             sections={[
@@ -1062,7 +1067,7 @@ function GitOpsFilterSidebar({
         </GitOpsFilterSection>
           </>
         )}
-      </div>
+      </FilterRailPanel>
     </aside>
   )
 }

package/src/components/issues/IssuesView.tsx

@@ -88,8 +88,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} />

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/severity.ts

@@ -140,6 +140,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/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')
+})