@skyhook-io/k8s-ui 1.14.3 → 1.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.3",
+  "version": "1.14.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -70,7 +70,7 @@
     "@monaco-editor/react": "^4.7.0",
     "html-to-image": "^1.11.0",
     "monaco-yaml": "5.5.1",
-    "react-virtuoso": "^4.18.12",
+    "react-virtuoso": "^4.18.13",
     "shiki": "^4.4.2"
   },
   "peerDependencies": {

package/src/components/logs/LogCore.tsx

@@ -1,11 +1,12 @@
 import { useRef, useCallback, useState, useMemo, useEffect, type ReactNode } from 'react'
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
-import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, ChevronRight, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces, Palette, ListCollapse, Sun, Moon } from 'lucide-react'
+import { Play, Square, Download, FileDown, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, ChevronRight, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces, Palette, ListCollapse, Sun, Moon } from 'lucide-react'
 import type { LogEntry, LogLevel } from './useLogBuffer'
 import { useLogSearch } from './useLogSearch'
 import { StructuredLogLine } from './StructuredLogLine'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '../ui/Input'
+import { showApiError, showApiSuccess } from '../ui/Toast'
 import {
   formatLogTimestamp,
   highlightSearchMatches,
@@ -15,8 +16,18 @@ import {
   TIMESTAMP_FORMAT_LABELS,
 } from '../../utils/log-format'
 import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
+import { copyText } from '../../utils/clipboard'
+import {
+  LOG_EXPORT_FORMAT_LABELS,
+  LOG_EXPORT_FORMATS,
+  previewLogExport,
+  serializeLogEntries,
+  type LogExportFormat,
+  type LogExportPayload,
+} from '../../utils/log-export'
 
-export type DownloadFormat = 'txt' | 'json' | 'csv'
+/** Retained for consumers that already import it; the export module owns the definition. */
+export type DownloadFormat = LogExportFormat
 
 /**
  * `toolbarExtra` may be a plain ReactNode, or a function that receives the
@@ -28,12 +39,19 @@ export type ToolbarExtraRenderer =
 
 interface LogCoreProps {
   entries: LogEntry[]
+  /**
+   * The unfiltered buffer, when the host filters `entries` before passing them
+   * (the workload viewer's pod picker), so that export's "All" describes the
+   * real buffer rather than the slice currently on screen.
+   */
+  allEntries?: LogEntry[]
   isLoading: boolean
   isStreaming: boolean
   onStartStream?: () => void
   onStopStream: () => void
   onRefresh: () => void
-  onDownload: (format: DownloadFormat) => void
+  /** Receives a finished payload — the viewer owns serialization so copy and download cannot diverge. */
+  onDownload: (payload: LogExportPayload) => void
   onClear?: () => void
   toolbarExtra?: ToolbarExtraRenderer
   showPodName?: boolean
@@ -118,6 +136,7 @@ const TIP_DELAY = 150
 
 export function LogCore({
   entries,
+  allEntries,
   isLoading,
   isStreaming,
   onStartStream,
@@ -183,6 +202,13 @@ export function LogCore({
     new Set(['error', 'warn', 'info', 'debug'])
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
+  const [exportScope, setExportScope] = useState<'visible' | 'all'>('visible')
+  const [exportFormat, setExportFormat] = useState<LogExportFormat>(() => {
+    try {
+      const v = localStorage.getItem('radar-logs-export-format') as LogExportFormat | null
+      return v === 'txt' || v === 'json' || v === 'csv' ? v : 'txt'
+    } catch { return 'txt' }
+  })
   const [showTsMenu, setShowTsMenu] = useState(false)
   const [showStructuredMenu, setShowStructuredMenu] = useState(false)
   const [structuredMode, setStructuredMode] = useState<StructuredMode>(() => {
@@ -228,6 +254,12 @@ export function LogCore({
     ? search.filteredEntries
     : levelFilteredEntries
 
+  const exportTriggerRef = useRef<HTMLButtonElement>(null)
+  const closeExportMenu = useCallback(() => {
+    setShowDownloadMenu(false)
+    exportTriggerRef.current?.focus()
+  }, [])
+
   // Close download menu on next click anywhere (deferred so current click doesn't trigger it)
   const downloadMenuRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
@@ -240,6 +272,61 @@ export function LogCore({
     return () => window.removeEventListener('click', handleClick)
   }, [showDownloadMenu])
 
+  useEffect(() => {
+    if (!showDownloadMenu) return
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      // Capture phase + stopImmediatePropagation: the host's drawer listens for
+      // Escape on window too, and a bubble-phase stopPropagation would not stop
+      // a sibling listener on the same target — dismissing the popover would
+      // close the drawer behind it in the same keystroke.
+      e.stopImmediatePropagation()
+      e.preventDefault()
+      closeExportMenu()
+    }
+    window.addEventListener('keydown', handleKey, true)
+    return () => window.removeEventListener('keydown', handleKey, true)
+  }, [showDownloadMenu, closeExportMenu])
+
+  // Scope and format are the only export decisions the viewer cannot already
+  // express on screen: everything else (timestamps, ANSI, level, search) has a
+  // toolbar control, and the popover's preview shows where those land.
+  const bufferEntries = allEntries ?? entries
+  const exportEntries = exportScope === 'all' ? bufferEntries : displayEntries
+  const exportOptions = useMemo(
+    () => ({ format: exportFormat, showTimestamps, showPodName }),
+    [exportFormat, showTimestamps, showPodName],
+  )
+  const exportPreview = useMemo(
+    () => showDownloadMenu ? previewLogExport(exportEntries, exportOptions) : [],
+    [showDownloadMenu, exportEntries, exportOptions],
+  )
+  // Offering a scope that resolves to the same lines is a choice about nothing.
+  const scopeIsMeaningful = displayEntries.length !== bufferEntries.length
+
+  // Scope describes the filters in play at the moment of asking, not a lasting
+  // intent, so it starts over at the narrower option every time rather than
+  // silently exporting the whole buffer on a later visit.
+  const toggleExportMenu = useCallback(() => {
+    setShowDownloadMenu(prev => !prev)
+    setExportScope('visible')
+  }, [])
+
+  const handleExportCopy = useCallback(() => {
+    closeExportMenu()
+    const count = exportEntries.length
+    const failed = () => showApiError('Failed to copy logs', 'The browser blocked clipboard access.')
+    copyText(serializeLogEntries(exportEntries, exportOptions).content).then(
+      ok => ok ? showApiSuccess('Copied to clipboard', `${count} log line${count === 1 ? '' : 's'} copied.`) : failed(),
+      failed,
+    )
+  }, [closeExportMenu, exportEntries, exportOptions])
+
+  const handleExportDownload = useCallback(() => {
+    closeExportMenu()
+    onDownload(serializeLogEntries(exportEntries, exportOptions))
+  }, [closeExportMenu, onDownload, exportEntries, exportOptions])
+
   // Same close-on-outside-click for the timestamp format menu.
   const tsMenuRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
@@ -263,6 +350,11 @@ export function LogCore({
     return () => window.removeEventListener('click', handleClick)
   }, [showStructuredMenu])
 
+  const pickExportFormat = useCallback((fmt: LogExportFormat) => {
+    setExportFormat(fmt)
+    try { localStorage.setItem('radar-logs-export-format', fmt) } catch {}
+  }, [])
+
   const pickStructuredMode = useCallback((mode: StructuredMode) => {
     setStructuredMode(mode)
     try { localStorage.setItem('radar-logs-structured-mode', mode) } catch {}
@@ -427,6 +519,12 @@ export function LogCore({
   const iconBtnInactiveTertiary = isDark
     ? 'p-1.5 rounded transition-colors text-slate-500 hover:text-slate-100 hover:bg-slate-800'
     : 'p-1.5 rounded transition-colors text-slate-400 hover:text-slate-900 hover:bg-slate-200'
+  // Export popover: house style for a group label, plus the two equal-weight
+  // actions the scope and format rows above them both apply to.
+  const exportLabelCls = `w-12 shrink-0 text-[10px] font-semibold uppercase tracking-wide ${palette.textTertiary}`
+  const exportActionCls = isDark
+    ? 'flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors border border-slate-700 text-slate-200 hover:bg-slate-800 disabled:opacity-40 disabled:pointer-events-none'
+    : 'flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors border border-slate-300 text-slate-700 hover:bg-slate-200 disabled:opacity-40 disabled:pointer-events-none'
   // "disabled → tertiary on hover" for inactive level filter chips.
   const levelChipInactive = isDark
     ? 'border-transparent text-slate-600 hover:text-slate-500'
@@ -657,27 +755,77 @@ export function LogCore({
           </Tooltip>
         )}
 
-        {/* Download */}
+        {/* Export */}
         <div className="relative flex items-center" ref={downloadMenuRef}>
-          <Tooltip content="Download logs" delay={TIP_DELAY} position="bottom">
+          <Tooltip content="Export logs" delay={TIP_DELAY} position="bottom" disabled={showDownloadMenu} preserveWrapperWhenDisabled>
             <button
-              onClick={() => setShowDownloadMenu(prev => !prev)}
+              ref={exportTriggerRef}
+              onClick={toggleExportMenu}
+              aria-label="Export logs"
+              aria-haspopup="dialog"
+              aria-expanded={showDownloadMenu}
               className={iconBtnInactive}
             >
               <Download className="w-4 h-4" />
             </button>
           </Tooltip>
           {showDownloadMenu && (
-            <div className={`absolute top-full right-0 mt-1 w-32 ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50`}>
-              {(['txt', 'json', 'csv'] as DownloadFormat[]).map(fmt => (
+            <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`}>
+              <div className="flex items-center gap-3">
+                <span id="log-export-scope-label" className={exportLabelCls}>Lines</span>
+                {scopeIsMeaningful ? (
+                  <div role="radiogroup" aria-labelledby="log-export-scope-label" className="flex items-center gap-1">
+                    <ExportChoice active={exportScope === 'visible'} onClick={() => setExportScope('visible')} palette={palette}>
+                      Filtered {displayEntries.length.toLocaleString()}
+                    </ExportChoice>
+                    <ExportChoice active={exportScope === 'all'} onClick={() => setExportScope('all')} palette={palette}>
+                      All {bufferEntries.length.toLocaleString()}
+                    </ExportChoice>
+                  </div>
+                ) : (
+                  <span className={`text-[11px] ${palette.textSecondary}`}>
+                    {bufferEntries.length.toLocaleString()} line{bufferEntries.length === 1 ? '' : 's'}
+                  </span>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <span id="log-export-format-label" className={exportLabelCls}>Format</span>
+                <div role="radiogroup" aria-labelledby="log-export-format-label" className="flex items-center gap-1">
+                  {LOG_EXPORT_FORMATS.map(fmt => (
+                    <ExportChoice key={fmt} active={exportFormat === fmt} onClick={() => pickExportFormat(fmt)} palette={palette}>
+                      {LOG_EXPORT_FORMAT_LABELS[fmt]}
+                    </ExportChoice>
+                  ))}
+                </div>
+              </div>
+
+              {/* Shows the shape of the real output, so no caption has to claim
+                  which fields ride along or that the toolbar toggles reach it. */}
+              <div className={`rounded border ${palette.border} ${palette.toolbarBg} px-2 py-1.5 font-mono text-[10px] leading-relaxed min-h-[44px] ${palette.textSecondary}`}>
+                {exportPreview.length > 0
+                  ? exportPreview.map((line, i) => <div key={i} className="truncate">{line}</div>)
+                  : <div className={palette.textTertiary}>Nothing to export.</div>}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleExportCopy}
+                  disabled={exportEntries.length === 0}
+                  className={exportActionCls}
+                >
+                  <Copy className="w-3.5 h-3.5" />
+                  Copy
+                </button>
                 <button
-                  key={fmt}
-                  onClick={() => { onDownload(fmt); setShowDownloadMenu(false) }}
-                  className={`w-full text-left px-3 py-2 text-xs ${palette.textPrimary} ${palette.hoverBg} first:rounded-t-lg last:rounded-b-lg`}
+                  onClick={handleExportDownload}
+                  disabled={exportEntries.length === 0}
+                  className={exportActionCls}
                 >
-                  {fmt.toUpperCase()}
+                  <FileDown className="w-3.5 h-3.5" />
+                  Download
                 </button>
-              ))}
+              </div>
             </div>
           )}
         </div>
@@ -813,7 +961,7 @@ export function LogCore({
           <Terminal className="w-8 h-8" />
           <span>{emptyMessage}</span>
           {emptyCommand && (
-            <button type="button" onClick={() => navigator.clipboard.writeText(emptyCommand).catch(() => {})} className={`mt-2 inline-flex max-w-[80%] items-center gap-2 rounded border px-3 py-2 font-mono text-xs ${palette.border} ${palette.toolbarBg}`} title="Copy recovery command">
+            <button type="button" onClick={() => { void copyText(emptyCommand) }} className={`mt-2 inline-flex max-w-[80%] items-center gap-2 rounded border px-3 py-2 font-mono text-xs ${palette.border} ${palette.toolbarBg}`} title="Copy recovery command">
               <code className="truncate">{emptyCommand}</code>
               <Copy className="h-3.5 w-3.5 shrink-0" />
             </button>
@@ -876,6 +1024,25 @@ export function LogCore({
   )
 }
 
+/** One pill in the export popover's scope and format rows. */
+function ExportChoice({ active, onClick, palette, children }: {
+  active: boolean
+  onClick: () => void
+  palette: LogPalette
+  children: ReactNode
+}) {
+  return (
+    <button
+      onClick={onClick}
+      role="radio"
+      aria-checked={active}
+      className={`px-2 py-1 rounded text-[11px] transition-colors ${active ? palette.toolbarActive : `${palette.textSecondary} ${palette.hoverBg}`}`}
+    >
+      {children}
+    </button>
+  )
+}
+
 function Shortcut({ keys, label, palette }: { keys: string; label: string; palette: LogPalette }) {
   return (
     <span className="flex items-center gap-1">
@@ -969,8 +1136,7 @@ function LogLine({
   }
 
   const handleCopy = () => {
-    const raw = stripAnsi(entry.content)
-    navigator.clipboard.writeText(raw).catch(() => {})
+    void copyText(stripAnsi(entry.content))
   }
 
   return (

package/src/components/logs/LogsViewer.tsx

@@ -5,7 +5,7 @@ import { useLogBuffer } from './useLogBuffer'
 import { useLogStream } from './useLogStream'
 import { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
 import { LogCore } from './LogCore'
-import type { DownloadFormat } from './LogCore'
+import type { LogExportPayload } from '../../utils/log-export'
 import type { LogPalette } from './log-palette'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
@@ -140,25 +140,8 @@ export function LogsViewer({
     return () => { autoStartedForRef.current = null }
   }, [willAutoStream, selectedContainer, handleStartStreaming])
 
-  const downloadLogs = useCallback((format: DownloadFormat) => {
-    let content: string
-    let mime: string
-    const filename = `${podName}-${selectedContainer}-logs.${format}`
-    switch (format) {
-      case 'json':
-        content = JSON.stringify(entries.map(l => ({ timestamp: l.timestamp, content: l.content, container: l.container })), null, 2)
-        mime = 'application/json'
-        break
-      case 'csv':
-        content = 'timestamp,container,content\n' + entries.map(l =>
-          `${l.timestamp},${l.container},"${l.content.replace(/"/g, '""')}"`)
-          .join('\n')
-        mime = 'text/csv'
-        break
-      default:
-        content = entries.map(l => `${l.timestamp} ${l.content}`).join('\n')
-        mime = 'text/plain'
-    }
+  const downloadLogs = useCallback(({ content, mime, extension }: LogExportPayload) => {
+    const filename = `${podName}-${selectedContainer}-logs.${extension}`
     try {
       triggerDownload(content, mime, filename, overrideDownload)
       if (!overrideDownload) {
@@ -167,7 +150,7 @@ export function LogsViewer({
     } catch (err) {
       showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
     }
-  }, [entries, podName, selectedContainer, overrideDownload, showError, showSuccess])
+  }, [podName, selectedContainer, overrideDownload, showError, showSuccess])
 
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -6,7 +6,7 @@ import { useLogBuffer } from './useLogBuffer'
 import { useLogStream } from './useLogStream'
 import { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
 import { LogCore } from './LogCore'
-import type { DownloadFormat } from './LogCore'
+import type { LogExportPayload } from '../../utils/log-export'
 import type { LogPalette } from './log-palette'
 import type { WorkloadPodInfo } from '../../types'
 import { useToast } from '../ui/Toast'
@@ -260,27 +260,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     [entries, selectedPods],
   )
 
-  const downloadLogs = useCallback((format: DownloadFormat) => {
-    let content: string
-    let mime: string
-    const filename = `${name}-logs.${format}`
-    switch (format) {
-      case 'json':
-        content = JSON.stringify(filteredEntries.map(l => ({
-          timestamp: l.timestamp, pod: l.pod, container: l.container, content: l.content,
-        })), null, 2)
-        mime = 'application/json'
-        break
-      case 'csv':
-        content = 'timestamp,pod,container,content\n' + filteredEntries.map(l =>
-          `${l.timestamp},${l.pod || ''},${l.container},"${l.content.replace(/"/g, '""')}"`)
-          .join('\n')
-        mime = 'text/csv'
-        break
-      default:
-        content = filteredEntries.map(l => `${l.timestamp} [${l.pod}/${l.container}] ${l.content}`).join('\n')
-        mime = 'text/plain'
-    }
+  const downloadLogs = useCallback(({ content, mime, extension }: LogExportPayload) => {
+    const filename = `${name}-logs.${extension}`
     try {
       triggerDownload(content, mime, filename, overrideDownload)
       if (!overrideDownload) {
@@ -289,7 +270,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     } catch (err) {
       showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
     }
-  }, [filteredEntries, name, overrideDownload, showError, showSuccess])
+  }, [name, overrideDownload, showError, showSuccess])
 
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
@@ -375,6 +356,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   return (
     <LogCore
       entries={filteredEntries}
+      allEntries={entries}
       isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}

package/src/components/resources/ResourcesView.tsx

@@ -1839,6 +1839,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'namespace', label: 'Namespace', width: 'w-36' },
     { key: 'status', label: 'Status', width: 'w-24' },
     { key: 'store', label: 'Store', width: 'w-36' },
+    { key: 'provider', label: 'Provider', width: 'w-48', tooltip: 'Backend the referenced store reads from. A dash means the store could not be read — it may not exist, or may be outside your access; an ellipsis means the stores are still loading.' },
     { key: 'refreshInterval', label: 'Refresh', width: 'w-24', tooltip: 'How often the value is re-pulled from the provider. A zero interval means it is fetched once and not updated afterward.' },
     { key: 'lastSync', label: 'Last Sync', width: 'w-28' },
     { key: 'age', label: 'Age', width: 'w-24' },
@@ -3270,6 +3271,10 @@ interface ResourcesViewData {
   onNavigate?: (path: string, options?: { replace?: boolean }) => void
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Provider type per SecretStore, keyed 'ns/name' and 'name' for the
+  // cluster-scoped kind. An ExternalSecret names a store; only the store
+  // knows which backend it reads from.
+  storeProviders?: Record<string, string>
   /** Cluster Audit findings keyed by "namespace/name". Raw compatibility
    *  counts render danger as High and warning as Medium. */
   auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
@@ -3330,6 +3335,10 @@ interface ResourcesViewProps {
   topNodeMetrics?: TopNodeMetrics[]
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Provider type per SecretStore, keyed 'ns/name' and 'name' for the
+  // cluster-scoped kind. An ExternalSecret names a store; only the store
+  // knows which backend it reads from.
+  storeProviders?: Record<string, string>
   /** Cluster Audit findings keyed by "namespace/name". Raw compatibility
    *  counts render danger as High and warning as Medium. */
   auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
@@ -3579,6 +3588,7 @@ export function ResourcesView({
   topNodeMetrics,
   certExpiry,
   certExpiryError,
+  storeProviders,
   auditBadges,
   pinned = [],
   togglePin = () => {},
@@ -6621,6 +6631,7 @@ export function ResourcesView({
                     isChecked={checkedResources.has(resourceKey)}
                     showCheckbox={isCheckboxMode}
                     majorityNodeMinorVersion={majorityNodeMinorVersion}
+                    storeProviders={storeProviders}
                     onRowClick={handleRowClick}
                     onRowMouseEnter={handleRowMouseEnter}
                     compareMode={compareMode}
@@ -6776,6 +6787,7 @@ interface ResourceRowCellsProps {
   isChecked?: boolean
   showCheckbox?: boolean
   majorityNodeMinorVersion?: string
+  storeProviders?: Record<string, string>
   // Row callbacks receive the resource so the parent can pass referentially
   // stable handlers — per-row closures would defeat React.memo and re-render
   // every visible row on each SSE-driven refetch.
@@ -6810,7 +6822,7 @@ function rowHighlightClass(
   return 'group-hover/row:bg-theme-surface/50'
 }
 
-const ResourceRowCells = React.memo(function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, isChecked, showCheckbox, majorityNodeMinorVersion, onRowClick, onRowMouseEnter, compareMode, comparePickIndex = -1, rowHref, onRowCheckToggle }: ResourceRowCellsProps) {
+const ResourceRowCells = React.memo(function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, isChecked, showCheckbox, majorityNodeMinorVersion, storeProviders, onRowClick, onRowMouseEnter, compareMode, comparePickIndex = -1, rowHref, onRowCheckToggle }: ResourceRowCellsProps) {
   const rowHighlight = rowHighlightClass(compareMode, comparePickIndex, isSelected, isHighlighted, isChecked)
   const pickedSide = comparePickIndex === 0 ? 'a' : comparePickIndex === 1 ? 'b' : null
   const onClick = onRowClick ? () => onRowClick(resource, !!isSelected) : undefined
@@ -6877,6 +6889,7 @@ const ResourceRowCells = React.memo(function ResourceRowCells({ resource, kind,
             group={group}
             column={col.key}
             majorityNodeMinorVersion={majorityNodeMinorVersion}
+            storeProviders={storeProviders}
             extraColumn={extraColumnsByKey?.get(col.key)}
             nameHref={col.key === 'name' ? rowHref : undefined}
           />
@@ -6920,6 +6933,7 @@ interface CellContentProps {
   column: string
   group?: string
   majorityNodeMinorVersion?: string
+  storeProviders?: Record<string, string>
   /** When provided, the parent has injected an ExtraColumn for this
    *  column key. Render via the extra's render() and short-circuit
    *  the built-in cell logic. */
@@ -6929,7 +6943,7 @@ interface CellContentProps {
   nameHref?: string
 }
 
-function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, extraColumn, nameHref }: CellContentProps) {
+function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, storeProviders, extraColumn, nameHref }: CellContentProps) {
   const { auditBadges } = useContext(ResourcesViewDataContext)
   // Parent-injected extra columns short-circuit the built-in switch.
   // Used by hosts that inject leading columns (e.g. a multi-cluster Cluster column).
@@ -7317,7 +7331,7 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <SbomReportCell resource={resource} column={column} />
     // External Secrets Operator
     case 'externalsecrets':
-      return <ExternalSecretCell resource={resource} column={column} />
+      return <ExternalSecretCell resource={resource} column={column} storeProviders={storeProviders} />
     case 'clusterexternalsecrets':
       return <ClusterExternalSecretCell resource={resource} column={column} />
     case 'secretstores':

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

@@ -145,9 +145,9 @@ export function AWSManagedControlPlaneRenderer({ data }: Props) {
                   <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{a.statusVersion !== '-' ? a.statusVersion : a.specVersion}</td>
                   <td className="py-1">
                     <span className={`badge badge-sm ${a.status === 'ACTIVE'
-                      ? 'status-healthy'
+                      ? 'status-green'
                       : a.status === 'DEGRADED'
-                      ? 'status-unhealthy'
+                      ? 'status-red'
                       : 'status-neutral'
                     }`}>{a.status}</span>
                   </td>

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

@@ -92,9 +92,9 @@ export function AlertRenderer({ data }: AlertRendererProps) {
             value={
               <span className={clsx(
                 'badge',
-                eventSeverity === 'error' ? 'bg-red-500/20 text-red-400' :
-                eventSeverity === 'warning' ? 'bg-yellow-500/20 text-yellow-400' :
-                'bg-blue-500/20 text-blue-400'
+                eventSeverity === 'error' ? 'status-red' :
+                eventSeverity === 'warning' ? 'status-amber' :
+                'status-blue'
               )}>
                 {eventSeverity}
               </span>

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

@@ -178,7 +178,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <button
                 onClick={() => onTerminate({ namespace, name })}
                 disabled={isTerminating}
-                className="flex items-center gap-1.5 px-2 py-1 rounded text-xs bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors disabled:opacity-50"
+                className="flex items-center gap-1.5 px-2 py-1 rounded text-xs status-red hover:opacity-80 transition-colors disabled:opacity-50"
                 title="Terminate sync"
               >
                 <XCircle className="w-3.5 h-3.5" />
@@ -237,7 +237,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <span
                 className={clsx(
                   'badge',
-                  syncPolicy.automated ? 'bg-green-500/20 text-green-400' : BADGE_INACTIVE
+                  syncPolicy.automated ? 'status-green' : BADGE_INACTIVE
                 )}
               >
                 {syncPolicy.automated ? 'Enabled' : 'Disabled'}
@@ -281,11 +281,11 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
                   className={clsx(
                     'badge',
                     operationState.phase === 'Succeeded'
-                      ? 'bg-green-500/20 text-green-400'
+                      ? 'status-green'
                       : operationState.phase === 'Running'
-                      ? 'bg-blue-500/20 text-blue-400'
+                      ? 'status-blue'
                       : operationState.phase === 'Failed' || operationState.phase === 'Error'
-                      ? 'bg-red-500/20 text-red-400'
+                      ? 'status-red'
                       : BADGE_INACTIVE
                   )}
                 >

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

@@ -287,7 +287,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
           )}
           {data.spec?.enableSuperuserAccess !== undefined && (
             <Property label="Superuser Access" value={
-              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'}`}>
+              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'status-green' : 'bg-theme-hover text-theme-text-secondary'}`}>
                 {data.spec.enableSuperuserAccess ? 'Enabled' : 'Disabled'}
               </span>
             } />

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

@@ -120,13 +120,13 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
                 <span className={clsx(
                   'badge',
                   isReady
-                    ? 'bg-green-500/20 text-green-400'
-                    : 'bg-red-500/20 text-red-400'
+                    ? 'status-green'
+                    : 'status-red'
                 )}>
                   {isReady ? 'Ready' : 'Not Ready'}
                 </span>
                 {spec.isCA && (
-                  <span className="badge bg-purple-500/20 text-purple-400">
+                  <span className="badge status-purple">
                     CA Certificate
                   </span>
                 )}

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

@@ -54,8 +54,8 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
               <span className={clsx(
                 'badge',
                 isReady
-                  ? 'bg-green-500/20 text-green-400'
-                  : 'bg-red-500/20 text-red-400'
+                  ? 'status-green'
+                  : 'status-red'
               )}>
                 {isReady ? 'Ready' : 'Not Ready'}
               </span>
@@ -67,10 +67,10 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
               <span className={clsx(
                 'badge',
                 isApproved
-                  ? 'bg-green-500/20 text-green-400'
+                  ? 'status-green'
                   : isDenied
-                    ? 'bg-red-500/20 text-red-400'
-                    : 'bg-yellow-500/20 text-yellow-400'
+                    ? 'status-red'
+                    : 'status-amber'
               )}>
                 {isApproved ? 'Yes' : isDenied ? 'No' : 'Pending'}
               </span>