@skyhook-io/k8s-ui 1.14.5 → 1.14.7

package/src/components/issues/IssuesView.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
-import { AlertOctagon, AlertTriangle, ArrowRight, ChevronRight, CircleCheck, Clock, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
+import { useMemo, useState, type ComponentType, type ReactNode } from 'react';
+import { AlertOctagon, AlertTriangle, ArrowRight, CircleCheck, Clock, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
 import { CardBody, CardSection, ClusterName, 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';
 import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic';
@@ -207,7 +208,7 @@ export function IssueRow({
   const cluster = clusterLabel?.(issue);
   const affected = affectedSummary(issue.affected);
   const { headline } = issueMessageParts(issue);
-  const [renderDetails, setRenderDetails] = useState(open);
+  const { panelId, buttonProps } = useDisclosure(open);
   const Container = as;
   const severity = normalizeIssueSeverity(issue.severity);
   const SeverityIcon = ISSUE_SEVERITY_ICON[severity];
@@ -244,17 +245,6 @@ export function IssueRow({
     </div>
   );
 
-  useEffect(() => {
-    if (open) {
-      setRenderDetails(true);
-      return;
-    }
-    if (!renderDetails) return;
-
-    const timeout = window.setTimeout(() => setRenderDetails(false), 200);
-    return () => window.clearTimeout(timeout);
-  }, [open, renderDetails]);
-
   return (
     <Container
       className={[
@@ -276,9 +266,9 @@ export function IssueRow({
           be invalid). Collapsed: neutral row + rail. Expanded: severity-tinted
           band + solid pill — the tint is a focus signal, not per-row alarm. */}
       <div
+        {...buttonProps}
         role="button"
         tabIndex={0}
-        aria-expanded={open}
         onClick={onToggle}
         onKeyDown={(e) => {
           if (e.target !== e.currentTarget) return;
@@ -357,50 +347,41 @@ export function IssueRow({
         <div className="flex shrink-0 items-center gap-3">
           {metaChips('hidden @2xl/issue:flex')}
           {renderActions?.(slotCtx)}
-          <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+          <CollapseChevron open={open} className="h-4 w-4" />
         </div>
       </div>
 
-      {renderDetails ? (
-        <div
-          className={`issue-details-motion ${open ? 'issue-details-motion-open' : ''}`}
-          onTransitionEnd={(event) => {
-            if (event.target !== event.currentTarget) return;
-            if (event.propertyName !== 'grid-template-rows') return;
-            if (!open) setRenderDetails(false);
-          }}
-        >
-          <div className="overflow-hidden">
-            {/* Body sits on the card surface (not a recessed grey panel) so its
-                text keeps enough contrast. */}
-            <div className="border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4">
-              <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
-                <Diagnosis issue={issue} source={diagnosisSource} />
-                {issue.incident_parent ? (
-                  <section className="flex flex-col gap-1">
-                    <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
-                      {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}
-                      {issue.incident_parent.confidence ? (
-                        <Tooltip content={confidenceTitle(issue.incident_parent.confidence)} delay={200}>
-                          <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary">
-                            {issue.incident_parent.confidence} confidence
-                          </span>
-                        </Tooltip>
-                      ) : null}
-                    </h4>
-                    <ul className="flex flex-col gap-px">
-                      <ResourceLine refForLink={memberRef(issue, issue.incident_parent.ref)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                    </ul>
-                  </section>
-                ) : null}
-                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                <AffectedResources issue={issue} hideSubject={hideSubject} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                {renderDetailSection?.(slotCtx)}
-              </div>
-            </div>
+      {/* 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}>
+        {/* Body sits on the card surface (not a recessed grey panel) so its
+            text keeps enough contrast. */}
+        <div className="border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4">
+          <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
+            <Diagnosis issue={issue} source={diagnosisSource} />
+            {issue.incident_parent ? (
+              <section className="flex flex-col gap-1">
+                <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
+                  {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}
+                  {issue.incident_parent.confidence ? (
+                    <Tooltip content={confidenceTitle(issue.incident_parent.confidence)} delay={200}>
+                      <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary">
+                        {issue.incident_parent.confidence} confidence
+                      </span>
+                    </Tooltip>
+                  ) : null}
+                </h4>
+                <ul className="flex flex-col gap-px">
+                  <ResourceLine refForLink={memberRef(issue, issue.incident_parent.ref)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+                </ul>
+              </section>
+            ) : null}
+            <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+            <AffectedResources issue={issue} hideSubject={hideSubject} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+            {renderDetailSection?.(slotCtx)}
           </div>
         </div>
-      ) : null}
+      </Collapse>
     </Container>
   );
 }

package/src/components/logs/LogCore.tsx

@@ -17,6 +17,8 @@ import {
 } from '../../utils/log-format'
 import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
 import { copyText } from '../../utils/clipboard'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import {
   LOG_EXPORT_FORMAT_LABELS,
   LOG_EXPORT_FORMATS,
@@ -202,6 +204,7 @@ export function LogCore({
     new Set(['error', 'warn', 'info', 'debug'])
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
+  const downloadMenu = useAnimatedUnmount(showDownloadMenu, overlayExitMs('menu'))
   const [exportScope, setExportScope] = useState<'visible' | 'all'>('visible')
   const [exportFormat, setExportFormat] = useState<LogExportFormat>(() => {
     try {
@@ -210,7 +213,9 @@ export function LogCore({
     } catch { return 'txt' }
   })
   const [showTsMenu, setShowTsMenu] = useState(false)
+  const tsMenu = useAnimatedUnmount(showTsMenu, overlayExitMs('menu'))
   const [showStructuredMenu, setShowStructuredMenu] = useState(false)
+  const structuredMenu = useAnimatedUnmount(showStructuredMenu, overlayExitMs('menu'))
   const [structuredMode, setStructuredMode] = useState<StructuredMode>(() => {
     try {
       const v = localStorage.getItem('radar-logs-structured-mode') as StructuredMode | null
@@ -297,9 +302,11 @@ export function LogCore({
     () => ({ format: exportFormat, showTimestamps, showPodName }),
     [exportFormat, showTimestamps, showPodName],
   )
+  // Keyed on presence, not logical open, so the preview doesn't flip to
+  // "nothing to export" while the popover is still fading out.
   const exportPreview = useMemo(
-    () => showDownloadMenu ? previewLogExport(exportEntries, exportOptions) : [],
-    [showDownloadMenu, exportEntries, exportOptions],
+    () => downloadMenu.shouldRender ? previewLogExport(exportEntries, exportOptions) : [],
+    [downloadMenu.shouldRender, exportEntries, exportOptions],
   )
   // Offering a scope that resolves to the same lines is a choice about nothing.
   const scopeIsMeaningful = displayEntries.length !== bufferEntries.length
@@ -309,8 +316,12 @@ export function LogCore({
   // silently exporting the whole buffer on a later visit.
   const toggleExportMenu = useCallback(() => {
     setShowDownloadMenu(prev => !prev)
-    setExportScope('visible')
   }, [])
+  // The reset lands once the popover has left the DOM, not at logical close,
+  // so the preview doesn't re-scope while the popover is still fading out.
+  useEffect(() => {
+    if (!downloadMenu.shouldRender) setExportScope('visible')
+  }, [downloadMenu.shouldRender])
 
   const handleExportCopy = useCallback(() => {
     closeExportMenu()
@@ -620,8 +631,14 @@ export function LogCore({
                   </span>
                 </button>
               </Tooltip>
-              {showStructuredMenu && (
-                <div className={`absolute top-full right-0 mt-1 w-56 ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50`}>
+              {structuredMenu.shouldRender && (
+                <div
+                  inert={!showStructuredMenu}
+                  className={`absolute top-full right-0 mt-1 w-56 origin-top-right ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 ${TRANSITION_MENU} ${
+                    structuredMenu.isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]'
+                  } ${showStructuredMenu ? '' : 'pointer-events-none'}`}
+                  style={overlayTransitionStyle(structuredMenu.isOpen, 'menu')}
+                >
                   <div className={`px-3 py-1.5 text-[10px] uppercase tracking-wide ${palette.textTertiary} border-b ${palette.border}`}>
                     Structured display
                   </div>
@@ -673,8 +690,14 @@ export function LogCore({
                 </span>
               </button>
             </Tooltip>
-            {showTsMenu && (
-              <div className={`absolute top-full right-0 mt-1 w-44 ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50`}>
+            {tsMenu.shouldRender && (
+              <div
+                inert={!showTsMenu}
+                className={`absolute top-full right-0 mt-1 w-44 origin-top-right ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 ${TRANSITION_MENU} ${
+                  tsMenu.isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]'
+                } ${showTsMenu ? '' : 'pointer-events-none'}`}
+                style={overlayTransitionStyle(tsMenu.isOpen, 'menu')}
+              >
                 <div className={`px-3 py-1.5 text-[10px] uppercase tracking-wide ${palette.textTertiary} border-b ${palette.border}`}>
                   Timestamp format
                 </div>
@@ -769,8 +792,16 @@ export function LogCore({
               <Download className="w-4 h-4" />
             </button>
           </Tooltip>
-          {showDownloadMenu && (
-            <div role="dialog" aria-label="Export logs" className={`absolute top-full right-0 mt-1 w-[23rem] ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 p-3 space-y-2.5`}>
+          {downloadMenu.shouldRender && (
+            <div
+              role="dialog"
+              aria-label="Export logs"
+              inert={!showDownloadMenu}
+              className={`absolute top-full right-0 mt-1 w-[23rem] origin-top-right ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 p-3 space-y-2.5 ${TRANSITION_MENU} ${
+                downloadMenu.isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]'
+              } ${showDownloadMenu ? '' : 'pointer-events-none'}`}
+              style={overlayTransitionStyle(downloadMenu.isOpen, 'menu')}
+            >
               <div className="flex items-center gap-3">
                 <span id="log-export-scope-label" className={exportLabelCls}>Lines</span>
                 {scopeIsMeaningful ? (

package/src/components/resources/ResourcesSidebar.tsx

@@ -1,8 +1,6 @@
-import { useState, useMemo, useEffect, useRef, useCallback, forwardRef } from 'react'
+import { useState, useMemo, useEffect, useRef, useCallback, useId, forwardRef } from 'react'
 import {
   Search,
-  ChevronDown,
-  ChevronRight,
   Eye,
   EyeOff,
   Pin,
@@ -10,6 +8,7 @@ import {
   X,
 } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../ui/Collapse'
 import type { APIResource } from '../../types'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import { getResourceIcon } from '../../utils/resource-icons'
@@ -213,6 +212,10 @@ export function ResourcesSidebar({
   useEffect(() => { persistedExpandedCategories = expandedCategories }, [expandedCategories])
   const [showEmptyKinds, setShowEmptyKinds] = useState(false)
   const [favoritesExpanded, setFavoritesExpanded] = useState(() => pinned.length > 0)
+  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.
+  const categoryPanelBase = useId()
 
   // Ref to selected sidebar item for scrolling into view on deeplink
   const selectedSidebarRef = useRef<HTMLButtonElement>(null)
@@ -499,14 +502,11 @@ export function ResourcesSidebar({
         {/* Favorites (pinned kinds) section — always visible */}
         <div className="mb-2">
           <button
+            {...favoritesDisclosure.buttonProps}
             onClick={() => setFavoritesExpanded((v) => !v)}
             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"
           >
-            {favoritesExpanded ? (
-              <ChevronDown className="w-3 h-3" />
-            ) : (
-              <ChevronRight className="w-3 h-3" />
-            )}
+            <CollapseChevron open={favoritesExpanded} className="w-3 h-3" />
             <span className="flex-1 text-left">Favorites</span>
             {!favoritesExpanded && pinned.length > 0 && (
               <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', pinned.length < 1000 ? 'w-8' : 'w-9')}>
@@ -514,41 +514,36 @@ export function ResourcesSidebar({
               </span>
             )}
           </button>
-          <div className={clsx(
-            'grid transition-[grid-template-rows] duration-200',
-            favoritesExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-          )} style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}>
-            <div className="overflow-hidden">
-              <div className="space-y-0.5">
-                {pinned.length === 0 ? (
-                  <div className="px-3 py-2 text-xs text-theme-text-disabled">
-                    No pinned resources. Click <Pin className="w-3 h-3 inline" /> on any resource type to pin it here.
-                  </div>
-                ) : (
-                  pinned.map((p) => {
-                    const isResourceSelected =
-                      (effectiveSelectedKind.name === p.name && effectiveSelectedKind.group === p.group) ||
-                      (effectiveSelectedKind.kind.toLowerCase() === p.kind.toLowerCase() && effectiveSelectedKind.group === p.group)
-                    const highlighted = isKindHighlighted(p.name, p.group)
-                    return (
-                      <ResourceTypeButton
-                        key={`${p.name}-${p.group}`}
-                        ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
-                        resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
-                        count={counts[p.group ? `${p.group}/${p.kind}` : p.kind] ?? null}
-                        isSelected={isResourceSelected}
-                        isHighlighted={highlighted}
-                        isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
-                        isPinned={true}
-                        onTogglePin={() => togglePin(p)}
-                        onClick={() => selectKind({ name: p.name, kind: p.kind, group: p.group })}
-                      />
-                    )
-                  })
-                )}
-              </div>
+          <Collapse open={favoritesExpanded} id={favoritesDisclosure.panelId}>
+            <div className="space-y-0.5">
+              {pinned.length === 0 ? (
+                <div className="px-3 py-2 text-xs text-theme-text-disabled">
+                  No pinned resources. Click <Pin className="w-3 h-3 inline" /> on any resource type to pin it here.
+                </div>
+              ) : (
+                pinned.map((p) => {
+                  const isResourceSelected =
+                    (effectiveSelectedKind.name === p.name && effectiveSelectedKind.group === p.group) ||
+                    (effectiveSelectedKind.kind.toLowerCase() === p.kind.toLowerCase() && effectiveSelectedKind.group === p.group)
+                  const highlighted = isKindHighlighted(p.name, p.group)
+                  return (
+                    <ResourceTypeButton
+                      key={`${p.name}-${p.group}`}
+                      ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
+                      resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
+                      count={counts[p.group ? `${p.group}/${p.kind}` : p.kind] ?? null}
+                      isSelected={isResourceSelected}
+                      isHighlighted={highlighted}
+                      isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
+                      isPinned={true}
+                      onTogglePin={() => togglePin(p)}
+                      onClick={() => selectKind({ name: p.name, kind: p.kind, group: p.group })}
+                    />
+                  )
+                })
+              )}
             </div>
-          </div>
+          </Collapse>
         </div>
         {filteredCategories ? (
           // Dynamic categories from API
@@ -558,14 +553,12 @@ export function ResourcesSidebar({
             return (
               <div key={category.name} className="mb-2">
                 <button
+                  aria-expanded={isExpanded}
+                  aria-controls={disclosurePanelId(categoryPanelBase, category.name)}
                   onClick={() => toggleCategory(category.name)}
                   className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
                 >
-                  {isExpanded ? (
-                    <ChevronDown className="w-3 h-3" />
-                  ) : (
-                    <ChevronRight className="w-3 h-3" />
-                  )}
+                  <CollapseChevron open={isExpanded} className="w-3 h-3" />
                   <span className="flex-1 text-left truncate" title={rawGroupTitle}>{category.name}</span>
                   {!isExpanded && (
                     <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', category.total < 1000 ? 'w-8' : 'w-9')}>
@@ -573,38 +566,33 @@ export function ResourcesSidebar({
                     </span>
                   )}
                 </button>
-                <div className={clsx(
-                  'grid transition-[grid-template-rows] duration-200',
-                  isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-                )} style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}>
-                  <div className="overflow-hidden">
-                    <div className="space-y-0.5">
-                      {category.visibleResources.map((resource) => {
-                        const resourceIsPinned = isPinned(resource.name, resource.group)
-                        const isResourceSelected =
-                          (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
-                          (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
-                        // If the resource is pinned, let the Favorites section own the highlight
-                        const showSelected = isResourceSelected && !resourceIsPinned
-                        const highlighted = isKindHighlighted(resource.name, resource.group)
-                        return (
-                        <ResourceTypeButton
-                          key={resource.name}
-                          ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
-                          resource={resource}
-                          count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
-                          isSelected={showSelected}
-                          isHighlighted={highlighted}
-                          isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
-                          isPinned={resourceIsPinned}
-                          onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
-                          onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
-                        />
-                        )
-                      })}
-                    </div>
+                <Collapse open={isExpanded} id={disclosurePanelId(categoryPanelBase, category.name)}>
+                  <div className="space-y-0.5">
+                    {category.visibleResources.map((resource) => {
+                      const resourceIsPinned = isPinned(resource.name, resource.group)
+                      const isResourceSelected =
+                        (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
+                        (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
+                      // If the resource is pinned, let the Favorites section own the highlight
+                      const showSelected = isResourceSelected && !resourceIsPinned
+                      const highlighted = isKindHighlighted(resource.name, resource.group)
+                      return (
+                      <ResourceTypeButton
+                        key={resource.name}
+                        ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
+                        resource={resource}
+                        count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
+                        isSelected={showSelected}
+                        isHighlighted={highlighted}
+                        isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
+                        isPinned={resourceIsPinned}
+                        onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
+                        onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
+                      />
+                      )
+                    })}
                   </div>
-                </div>
+                </Collapse>
               </div>
             )
           })

package/src/components/resources/ResourcesView.tsx

@@ -3,6 +3,7 @@ import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useDebouncedValue } from '../../hooks/useDebouncedValue'
 import { PaneLoader } from '../ui/PaneLoader'
 import { RestrictedState } from '../ui/RestrictedState'
+import { FetchResult } from '../ui/FetchResult'
 import { Input } from '../ui/Input'
 import type { TopPodMetrics, TopNodeMetrics, ContainerResourceMetrics } from '../../types'
 import {
@@ -711,6 +712,23 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'metrics', label: 'Metrics', width: 'w-40', tooltip: 'Per-metric verdicts' },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  analysistemplates: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-48' },
+    { key: 'metricCount', label: 'Metrics', width: 'w-24' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  clusteranalysistemplates: [
+    { key: 'name', label: 'Name' },
+    { key: 'metricCount', label: 'Metrics', width: 'w-24' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  experiments: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-48' },
+    { key: 'status', label: 'Phase', width: 'w-28' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   workflows: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
@@ -2826,6 +2844,9 @@ const CURATED_COLUMN_GROUPS: Record<string, readonly string[]> = {
   sbomreports: ['aquasecurity.github.io'],
   vulnerabilityreports: ['aquasecurity.github.io'],
   analysisruns: ['argoproj.io'],
+  analysistemplates: ['argoproj.io'],
+  clusteranalysistemplates: ['argoproj.io'],
+  experiments: ['argoproj.io'],
   applications: ['argoproj.io'],
   applicationsets: ['argoproj.io'],
   appprojects: ['argoproj.io'],
@@ -4987,11 +5008,13 @@ export function ResourcesView({
   // forbidden/unavailable in counts (e.g. an informer not yet synced at counts
   // time) while the list query has since returned data — show the table, not
   // RestrictedState. A 403 on the list itself never carries rows, so it still
-  // forces the restricted state.
+  // forces the restricted state. A non-403 list error also beats the counts
+  // entry: a kind whose sync deadline fired is reported unavailable by counts,
+  // but the list knows it failed to load — that is not an RBAC answer.
   const selectedHasRows = Array.isArray(resources) && resources.length > 0
   const isSelectedForbidden =
     isForbiddenError(selectedQueryError) ||
-    (!selectedHasRows && forbiddenKinds.has(selectedKindCountKey))
+    (!selectedHasRows && !selectedQueryError && forbiddenKinds.has(selectedKindCountKey))
 
   // Reset sort and filters when kind changes (but not when syncing from URL navigation)
   // Track previous kind to skip on mount (where the effect fires but kind hasn't actually changed)
@@ -6277,6 +6300,15 @@ export function ResourcesView({
                 />
               </div>
             </div>
+          ) : selectedQueryError && !Array.isArray(resources) ? (
+            // A failed fetch with no rows to fall back on must not reach the
+            // empty state below — it would tell the user the cluster has none.
+            <FetchResult
+              loading={false}
+              error={selectedQueryError}
+              onRetry={selectedQuery?.refetch}
+              className="absolute inset-0"
+            />
           ) : largeListGuard ? (
             <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary px-6 text-center">
               <AlertTriangle className="w-8 h-8 text-amber-400 mb-2" />
@@ -7081,6 +7113,11 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <RolloutCell resource={resource} column={column} />
     case 'analysisruns':
       return <AnalysisRunCell resource={resource} column={column} />
+    case 'analysistemplates':
+    case 'clusteranalysistemplates':
+      return <AnalysisTemplateCell resource={resource} column={column} />
+    case 'experiments':
+      return <ExperimentCell resource={resource} column={column} />
     case 'workflows':
       return <WorkflowCell resource={resource} column={column} />
     case 'cronworkflows':
@@ -8746,6 +8783,23 @@ function RolloutCell({ resource, column }: { resource: any; column: string }) {
   }
 }
 
+// An Experiment reports status.phase from the same AnalysisPhase vocabulary
+// as AnalysisRun (Successful/Running/Pending/Inconclusive/Failed/Error), so
+// getAnalysisRunStatus's mapping applies directly — routing here instead of
+// GenericCell avoids the generic phase heuristic's HEALTHY_PHASES set, which
+// doesn't recognize 'Successful' and treats 'Running' as healthy (neither
+// true for this vocabulary).
+function ExperimentCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getAnalysisRunStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 function AnalysisRunCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {
@@ -8784,6 +8838,17 @@ function AnalysisRunCell({ resource, column }: { resource: any; column: string }
   }
 }
 
+function AnalysisTemplateCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'metricCount': {
+      const count = (resource.spec?.metrics || []).length
+      return <span className="text-sm text-theme-text-secondary">{count}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 function WorkflowCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {

package/src/components/resources/curated-column-ownership.test.ts

@@ -63,8 +63,8 @@ describe('curated column ownership', () => {
   // Brace-counting, not parsing: assert the extraction actually saw the whole
   // table, or a silently-missed key would let the guard above pass vacuously.
   it('extracted every curated key', () => {
-    expect(CURATED.length).toBe(236)
-    expect(OWNED.size).toBe(198)
+    expect(CURATED.length).toBe(239)
+    expect(OWNED.size).toBe(201)
     expect(CURATED).toContain('pods')
     expect(CURATED).toContain('crossplanemanagedresources')
     expect([...OWNED]).toContain('awsmanagedcontrolplanes')
@@ -121,7 +121,7 @@ describe('every declaration resolves', () => {
     .map(m => [m[1], m[2].split(',').map(g => g.trim().replace(/'/g, ''))] as const)
 
   it('covers the whole ownership table', () => {
-    expect(DECLARED.length).toBe(198)
+    expect(DECLARED.length).toBe(201)
   })
 
   it.each(DECLARED)('%s is curated under each group it claims', (key, groups) => {