@skyhook-io/k8s-ui 1.8.10 → 1.8.11

package/src/components/resources/ResourcesView.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useEffect, useCallback, useRef, useContext, u
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { PaneLoader } from '../ui/PaneLoader'
 import { RestrictedState } from '../ui/RestrictedState'
+import { Input } from '../ui/Input'
 import type { TopPodMetrics, TopNodeMetrics } from '../../types'
 import {
   Search,
@@ -84,6 +85,10 @@ import {
   getWorkflowDuration,
   getWorkflowProgress,
   getWorkflowTemplate,
+  getCronWorkflowStatus,
+  getCronWorkflowSchedule,
+  getCronWorkflowLastRun,
+  getCronWorkflowTemplate,
   getPVStatus,
   getPVAccessModes,
   getPVClaim,
@@ -460,6 +465,15 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'template', label: 'Template', width: 'w-40', hideOnMobile: true },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  cronworkflows: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-48' },
+    { key: 'schedule', label: 'Schedule', width: 'w-40' },
+    { key: 'status', label: 'Status', width: 'w-28' },
+    { key: 'lastRun', label: 'Last Run', width: 'w-28', hideOnMobile: true },
+    { key: 'template', label: 'Template', width: 'w-40', hideOnMobile: true },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   certificates: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
@@ -762,6 +776,12 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'templates', label: 'Templates', width: 'w-24' },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  clusterworkflowtemplates: [
+    { key: 'name', label: 'Name' },
+    { key: 'entrypoint', label: 'Entrypoint', width: 'w-36' },
+    { key: 'templates', label: 'Templates', width: 'w-24' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   networkpolicies: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
@@ -1818,6 +1838,8 @@ interface ResourcesViewData {
 export const ResourcesViewDataContext = React.createContext<ResourcesViewData>({})
 
 export interface ResourceQueryResult {
+  resourceName?: string
+  group?: string
   data?: any[]
   isLoading: boolean
   error?: any
@@ -1850,7 +1872,7 @@ interface ResourcesViewProps {
   /** @deprecated Use resourceCounts + resourceForbidden + selectedKindQuery instead */
   resourceQueries?: ResourceQueryResult[]
   // Lightweight counts for sidebar badges (from /api/resource-counts)
-  resourceCounts?: Record<string, number>
+  resourceCounts?: Record<string, number | null>
   resourceForbidden?: string[]
   /** Per-kind reason a forbidden kind is hidden ("rbac_denied" | "unavailable"),
    *  keyed by the same count key as resourceForbidden. Drives RestrictedState copy. */
@@ -1958,6 +1980,26 @@ interface ResourcesViewProps {
 
 // Default selected kind
 const DEFAULT_KIND_INFO: SelectedKindInfo = { name: 'pods', kind: 'Pod', group: '' }
+export const LOADED_RESOURCE_COUNT_TTL_MS = 5 * 60 * 1000
+
+interface LoadedResourceCount {
+  count: number
+  expiresAt: number
+}
+
+type LoadedResourceCountCache = Record<string, LoadedResourceCount>
+
+function resourceCountKey(resource: Pick<APIResource, 'group' | 'kind'>): string {
+  return resource.group ? `${resource.group}/${resource.kind}` : resource.kind
+}
+
+export function resourceQueryMatchesSelectedKind(
+  query: Pick<ResourceQueryResult, 'resourceName' | 'group'> | undefined,
+  selectedKind: SelectedKindInfo,
+): boolean {
+  if (!query?.resourceName) return true
+  return query.resourceName === selectedKind.name && (query.group ?? '') === selectedKind.group
+}
 
 // Read initial state from URL — kind is in the path: {basePath}/{kind}
 //
@@ -2007,6 +2049,53 @@ function getInitialKindFromURL(
   return defaultKind
 }
 
+export function canonicalizeSelectedKind(
+  selectedKind: SelectedKindInfo,
+  resourcesToCount: Array<Pick<APIResource, 'name' | 'kind' | 'group'>>,
+  apiResources?: APIResource[],
+): SelectedKindInfo | null {
+  const nameMatch = resourcesToCount.find(r =>
+    r.name === selectedKind.name && r.group === selectedKind.group
+  )
+  if (nameMatch) {
+    return selectedKind.kind === nameMatch.kind
+      ? null
+      : { name: nameMatch.name, kind: nameMatch.kind, group: nameMatch.group }
+  }
+
+  const match = apiResources?.find(r =>
+    r.kind === selectedKind.kind && r.group === selectedKind.group
+  )
+  return match ? { name: match.name, kind: match.kind, group: match.group } : null
+}
+
+export function deriveSidebarResourceCounts(
+  resourcesToCount: Array<Pick<APIResource, 'kind' | 'group'>>,
+  resourceCounts: Record<string, number | null> | undefined,
+  resourceUnavailable: string[] | undefined,
+  loadedCountCache: LoadedResourceCountCache,
+  now: number = Date.now(),
+): Record<string, number | null> {
+  const unavailableKinds = new Set(resourceUnavailable ?? [])
+  const results: Record<string, number | null> = {}
+
+  for (const resource of resourcesToCount) {
+    const key = resourceCountKey(resource)
+    const cached = loadedCountCache[key]
+    if (resourceCounts && key in resourceCounts) {
+      results[key] = resourceCounts[key] ?? null
+    } else if (cached && cached.expiresAt > now) {
+      results[key] = cached.count
+    } else if (unavailableKinds.has(key)) {
+      results[key] = null
+    } else {
+      results[key] = null
+    }
+  }
+
+  return results
+}
+
 // Get initial filters from URL
 function getInitialFiltersFromURL() {
   const params = new URLSearchParams(window.location.search)
@@ -2014,6 +2103,7 @@ function getInitialFiltersFromURL() {
   const columnFilters = parseColumnFilters(params.get('filters'))
   const result = {
     search: params.get('search') || '',
+    regex: params.get('regex') === 'true',
     columnFilters,
     problemFilters: params.get('problems')?.split(',').filter(Boolean) || [],
     showInactive: params.get('showInactive') === 'true',
@@ -2093,7 +2183,7 @@ export function ResourcesView({
     setBulkForceDelete(false)
   }, [selectedKind.name, selectedKind.group]) // eslint-disable-line react-hooks/exhaustive-deps
   const [searchTerm, setSearchTerm] = useState(initialFilters.search)
-  const [regexMode, setRegexMode] = useState(false)
+  const [regexMode, setRegexMode] = useState(initialFilters.regex)
   const [sortColumn, setSortColumn] = useState<string | null>(null)
   const [sortDirection, setSortDirection] = useState<SortDirection>(null)
   // Filter state
@@ -2687,11 +2777,11 @@ export function ResourcesView({
           if (containers.length > 0) {
             openLogs?.({ namespace: ns, podName: name, containers })
           }
-        } else if (['deployments', 'statefulsets', 'daemonsets', 'replicasets', 'jobs'].includes(kindLower)) {
+        } else if (['deployments', 'statefulsets', 'daemonsets', 'replicasets', 'jobs', 'workflows', 'cronjobs', 'cronworkflows', 'workflowtemplates', 'clusterworkflowtemplates', 'scaledjobs'].includes(kindLower)) {
           openWorkloadLogs?.({ namespace: ns, workloadKind: selectedKind.kind, workloadName: name })
         }
       },
-      enabled: highlightedIndex >= 0 && !compareMode && ['pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets', 'jobs'].includes(selectedKind.name.toLowerCase()),
+      enabled: highlightedIndex >= 0 && !compareMode && ['pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets', 'jobs', 'workflows', 'cronjobs', 'cronworkflows', 'workflowtemplates', 'clusterworkflowtemplates', 'scaledjobs'].includes(selectedKind.name.toLowerCase()),
     },
     {
       id: 'resources-sort-name',
@@ -2842,6 +2932,11 @@ export function ResourcesView({
       setSearchTerm(newFilters.search)
     }
 
+    // Update regex mode if it changed
+    if (newFilters.regex !== regexMode) {
+      setRegexMode(newFilters.regex)
+    }
+
     // Update column filters if changed
     const newFiltersStr = serializeColumnFilters(newFilters.columnFilters)
     const currentFiltersStr = serializeColumnFilters(columnFilters)
@@ -2872,6 +2967,7 @@ export function ResourcesView({
   const updateURL = useCallback((
     kindInfo: SelectedKindInfo,
     search: string,
+    regex: boolean,
     colFilters: Record<string, string[]>,
     problems: string[],
     showInactive: boolean,
@@ -2894,6 +2990,11 @@ export function ResourcesView({
     } else {
       params.delete('search')
     }
+    if (regex) {
+      params.set('regex', 'true')
+    } else {
+      params.delete('regex')
+    }
     // Write column filters as `filters` param; remove legacy `status` param
     const filtersStr = serializeColumnFilters(colFilters)
     if (filtersStr) {
@@ -2955,6 +3056,7 @@ export function ResourcesView({
 
   const clearAllFilters = useCallback(() => {
     setSearchTerm('')
+    setRegexMode(false)
     setColumnFilters({})
     setProblemFilters([])
     setLabelSelector('')
@@ -2965,7 +3067,7 @@ export function ResourcesView({
     // params are out of scope here; the host's onClearNamespaces (and its
     // own state→URL sync) owns namespace cleanup.
     const params = new URLSearchParams(window.location.search)
-    for (const key of ['search', 'filters', 'problems', 'labels', 'ownerKind', 'ownerName', 'showInactive']) {
+    for (const key of ['search', 'regex', 'filters', 'problems', 'labels', 'ownerKind', 'ownerName', 'showInactive']) {
       params.delete(key)
     }
     navigate({ pathname: window.location.pathname, search: params.toString() }, { replace: true })
@@ -3022,8 +3124,8 @@ export function ResourcesView({
     shouldPushHistory.current = false
     prevSelectedResourceRef.current = current
 
-    updateURL(selectedKind, searchTerm, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
-  }, [selectedKind, searchTerm, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
+    updateURL(selectedKind, searchTerm, regexMode, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
+  }, [selectedKind, searchTerm, regexMode, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
 
   // Handle resource click from URL on mount
   useEffect(() => {
@@ -3144,24 +3246,15 @@ export function ResourcesView({
   // getInitialKindFromURL can't look up CRDs, so name may be wrong (e.g., 'HTTPRoute' instead of 'httproutes')
   useEffect(() => {
     if (!apiResources) return
-    // Check if current selectedKind already matches a discovered resource
-    const alreadyResolved = resourcesToCount.some(r =>
-      r.name === selectedKind.name && r.group === selectedKind.group
-    )
-    if (alreadyResolved) return
-
-    // Try to match by kind name (URL stores kind=HTTPRoute, API has name=httproutes)
-    const match = apiResources.find(r =>
-      r.kind === selectedKind.kind && r.group === selectedKind.group
-    )
-    if (match) {
-      setSelectedKind({ name: match.name, kind: match.kind, group: match.group })
+    const canonicalKind = canonicalizeSelectedKind(selectedKind, resourcesToCount, apiResources)
+    if (canonicalKind) {
+      setSelectedKind(canonicalKind)
     }
   }, [apiResources, resourcesToCount, selectedKind.name, selectedKind.kind, selectedKind.group])
 
   // Resource data — prefer new lightweight props over legacy resourceQueries array
   const resourceQueries = resourceQueriesProp ?? []
-  const useNewCountsMode = !!resourceCountsProp
+  const useNewCountsMode = resourceCountsProp !== undefined || selectedKindQueryProp !== undefined
 
   // Find the selected kind's query
   const selectedQueryIndex = useMemo(() => {
@@ -3171,7 +3264,8 @@ export function ResourcesView({
   }, [resourcesToCount, selectedKind.name, selectedKind.group])
 
   const selectedQuery = selectedKindQueryProp ?? resourceQueries[selectedQueryIndex]
-  const resources = selectedQuery?.data
+  const selectedQueryMatchesKind = resourceQueryMatchesSelectedKind(selectedQuery, selectedKind)
+  const resources = selectedQueryMatchesKind ? selectedQuery?.data : undefined
 
   // Auto-surface the GPU column the first time GPU-bearing rows load for a kind
   // the user has never customized — a static default can't know whether the
@@ -3212,24 +3306,63 @@ export function ResourcesView({
       annotation: Array.from(annotations).sort(),
     }
   }, [resources])
-  const isLoading = selectedQuery?.isLoading ?? true
-  const selectedQueryError = selectedQuery?.error
+  const isLoading = selectedQueryMatchesKind ? (selectedQuery?.isLoading ?? true) : true
+  const selectedQueryError = selectedQueryMatchesKind ? selectedQuery?.error : undefined
+  const selectedKindCountKey = selectedKind.group
+    ? `${selectedKind.group}/${selectedKind.kind}`
+    : selectedKind.kind
+  const selectedQueryHasLoadedCount = Array.isArray(resources) && !isLoading && !selectedQueryError && !largeListGuard
+  const selectedLoadedResourceCount = Array.isArray(resources) ? resources.length : undefined
+  const [loadedCountCache, setLoadedCountCache] = useState<LoadedResourceCountCache>({})
+  const namespaceScopeKey = useMemo(
+    () => namespaces.length === 0 ? '' : [...namespaces].sort().join('\0'),
+    [namespaces],
+  )
+  const loadedCountScopeRef = useRef(namespaceScopeKey)
+
+  useEffect(() => {
+    if (loadedCountScopeRef.current === namespaceScopeKey) return
+    loadedCountScopeRef.current = namespaceScopeKey
+    setLoadedCountCache({})
+  }, [namespaceScopeKey])
+
+  useEffect(() => {
+    if (!selectedQueryHasLoadedCount || selectedLoadedResourceCount == null) return
+    const now = Date.now()
+    const loadedAt = selectedQuery?.dataUpdatedAt && selectedQuery.dataUpdatedAt > 0
+      ? selectedQuery.dataUpdatedAt
+      : now
+    const expiresAt = loadedAt + LOADED_RESOURCE_COUNT_TTL_MS
+
+    setLoadedCountCache(prev => {
+      const next: LoadedResourceCountCache = {}
+      let changed = false
+      for (const [key, cached] of Object.entries(prev)) {
+        if (cached.expiresAt > now || key === selectedKindCountKey) {
+          next[key] = cached
+        } else {
+          changed = true
+        }
+      }
+
+      const existing = next[selectedKindCountKey]
+      if (existing?.count === selectedLoadedResourceCount && existing.expiresAt === expiresAt) {
+        return changed ? next : prev
+      }
+
+      return {
+        ...next,
+        [selectedKindCountKey]: { count: selectedLoadedResourceCount, expiresAt },
+      }
+    })
+  }, [selectedQueryHasLoadedCount, selectedLoadedResourceCount, selectedKindCountKey, selectedQuery?.dataUpdatedAt])
 
   // Derive counts — prefer lightweight resourceCounts prop over full query data
   const counts = useMemo(() => {
     if (useNewCountsMode) {
-      // resourceCountsProp uses "group/Kind" keys for CRDs, "Kind" for core — same format as sidebar
-      const unavailableKinds = new Set(resourceUnavailableProp ?? [])
-      const results: Record<string, number | null> = {}
-      for (const resource of resourcesToCount) {
-        const key = resource.group ? `${resource.group}/${resource.kind}` : resource.kind
-        if (unavailableKinds.has(key)) {
-          results[key] = null
-        } else if (key in resourceCountsProp!) {
-          results[key] = resourceCountsProp![key]
-        } else {
-          results[key] = 0
-        }
+      const results = deriveSidebarResourceCounts(resourcesToCount, resourceCountsProp, resourceUnavailableProp, loadedCountCache)
+      if (selectedQueryHasLoadedCount && selectedLoadedResourceCount != null) {
+        results[selectedKindCountKey] = selectedLoadedResourceCount
       }
       return results
     }
@@ -3241,7 +3374,14 @@ export function ResourcesView({
       results[key] = Array.isArray(data) ? data.length : 0
     })
     return results
-  }, [useNewCountsMode, resourcesToCount, resourceCountsProp, resourceUnavailableProp, resourceQueries])
+  }, [useNewCountsMode, resourcesToCount, resourceCountsProp, resourceUnavailableProp, loadedCountCache, selectedQueryHasLoadedCount, selectedLoadedResourceCount, selectedKindCountKey, resourceQueries])
+
+  const sidebarResourceUnavailable = useMemo(() => {
+    if (!resourceUnavailableProp?.length) {
+      return resourceUnavailableProp
+    }
+    return resourceUnavailableProp.filter(key => counts[key] == null)
+  }, [resourceUnavailableProp, counts])
 
   // Track which resource kinds returned 403 Forbidden
   const forbiddenKinds = useMemo(() => {
@@ -3262,9 +3402,6 @@ export function ResourcesView({
   // denials) OR the selected kind is in the counts `forbidden` set. Denied
   // cluster-scoped kinds return 200 with `[]` from the list endpoint, so the
   // 403 signal alone misses them — they'd fall through to "No <kind> found".
-  const selectedKindCountKey = selectedKind.group
-    ? `${selectedKind.group}/${selectedKind.kind}`
-    : selectedKind.kind
   // Actual rows win over a stale counts `forbidden` entry: a kind can be marked
   // 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
@@ -3926,6 +4063,7 @@ export function ResourcesView({
   // a no-op for that case.
   const hasAnyFilter =
     !!searchTerm ||
+    regexMode ||
     !!labelSelector ||
     hasOwnerFilter ||
     problemFilters.length > 0 ||
@@ -3994,7 +4132,7 @@ export function ResourcesView({
           apiResources={apiResourcesProp}
           resourceCounts={counts}
           resourceForbidden={Array.from(forbiddenKinds)}
-          resourceUnavailable={resourceUnavailableProp}
+          resourceUnavailable={sidebarResourceUnavailable}
           pinned={pinned}
           togglePin={togglePin}
           isPinned={isPinned}
@@ -4013,9 +4151,8 @@ export function ResourcesView({
           <div className="flex-1 min-w-0">
             <div className="relative max-w-md">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
+              <Input
                 ref={searchInputRef}
-                type="text"
                 placeholder={regexMode ? 'Search by regex... (press /)' : 'Search... (press /)'}
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
@@ -4042,7 +4179,8 @@ export function ResourcesView({
                   }
                 }}
                 className={clsx(
-                  'w-full pl-10 pr-10 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                  'w-full pl-10 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                  searchTerm ? 'pr-16' : 'pr-10',
                   searchRegex.error
                     ? 'border-red-500/60 focus:ring-red-500'
                     : 'border-theme-border-light focus:ring-skyhook-500'
@@ -4055,7 +4193,8 @@ export function ResourcesView({
                 aria-label={regexMode ? 'Disable regex search' : 'Enable regex search'}
                 title={regexMode ? 'Regex search enabled — click to disable' : 'Enable regex search'}
                 className={clsx(
-                  'absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center w-6 h-6 rounded transition-colors',
+                  'absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-6 h-6 rounded transition-colors',
+                  searchTerm ? 'right-9' : 'right-2',
                   regexMode
                     ? 'bg-skyhook-500/20 text-skyhook-400'
                     : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover'
@@ -4063,6 +4202,19 @@ export function ResourcesView({
               >
                 <Regex className="w-3.5 h-3.5" />
               </button>
+              {searchTerm && (
+                <button
+                  type="button"
+                  aria-label="Clear search"
+                  onClick={() => {
+                    setSearchTerm('')
+                    searchInputRef.current?.focus()
+                  }}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center w-6 h-6 rounded text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover transition-colors"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              )}
               {searchRegex.error && (
                 <div
                   title={searchRegex.error}
@@ -4154,8 +4306,7 @@ export function ResourcesView({
                     <div className="flex items-center gap-2 p-2 border-b border-theme-border">
                       <div className="relative flex-1">
                         <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-tertiary" />
-                        <input
-                          type="text"
+                        <Input
                           placeholder="Search labels..."
                           value={labelSearch}
                           onChange={(e) => setLabelSearch(e.target.value)}
@@ -4333,8 +4484,7 @@ export function ResourcesView({
                       setCustomColumnDraft(d => ({ ...d, path: '' }))
                     }}
                   >
-                    <input
-                      type="text"
+                    <Input
                       list={customColKeysListId}
                       value={customColumnDraft.path}
                       onChange={e => setCustomColumnDraft(d => ({ ...d, path: e.target.value }))}
@@ -4519,7 +4669,10 @@ export function ResourcesView({
               <p>No {selectedKind.kind} found</p>
               {searchTerm && (
                 <button
-                  onClick={() => setSearchTerm('')}
+                  onClick={() => {
+                    setSearchTerm('')
+                    setRegexMode(false)
+                  }}
                   className="flex items-center gap-1.5 text-sm mt-2 px-3 py-1.5 rounded-md bg-theme-elevated hover:bg-theme-border text-theme-text-secondary hover:text-theme-text-primary transition-colors"
                 >
                   No results for "{searchTerm}"
@@ -4716,8 +4869,7 @@ export function ResourcesView({
                                 <div className="flex items-center gap-2 p-2 border-b border-theme-border">
                                   <div className="relative flex-1">
                                     <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-tertiary" />
-                                    <input
-                                      type="text"
+                                    <Input
                                       placeholder="Search..."
                                       value={columnFilterSearch}
                                       onChange={(e) => setColumnFilterSearch(e.target.value)}
@@ -5218,6 +5370,8 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <RolloutCell resource={resource} column={column} />
     case 'workflows':
       return <WorkflowCell resource={resource} column={column} />
+    case 'cronworkflows':
+      return <CronWorkflowCell resource={resource} column={column} />
     case 'certificates':
       return <CertificateCell resource={resource} column={column} />
     case 'persistentvolumes':
@@ -5250,6 +5404,7 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
     case 'sealedsecrets':
       return <SealedSecretCell resource={resource} column={column} />
     case 'workflowtemplates':
+    case 'clusterworkflowtemplates':
       return <WorkflowTemplateCell resource={resource} column={column} />
     case 'networkpolicies':
       return <NetworkPolicyCell resource={resource} column={column} />
@@ -6584,6 +6739,33 @@ function WorkflowCell({ resource, column }: { resource: any; column: string }) {
   }
 }
 
+function CronWorkflowCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCronWorkflowStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'schedule':
+      return <span className="font-mono text-xs text-theme-text-secondary">{getCronWorkflowSchedule(resource)}</span>
+    case 'lastRun':
+      return <span className="text-sm text-theme-text-secondary">{getCronWorkflowLastRun(resource)}</span>
+    case 'template': {
+      const template = getCronWorkflowTemplate(resource)
+      return (
+        <Tooltip content={template}>
+          <span className="block truncate text-sm text-theme-text-secondary">{template}</span>
+        </Tooltip>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 
 function PersistentVolumeCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {

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

@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'
 import { ShieldCheck, ChevronDown, ChevronRight, CheckCircle2, XCircle, Search } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { Input } from '../../ui/Input'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
@@ -138,8 +139,7 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
             <div className="flex items-center gap-2 mb-2">
               <div className="relative flex-1">
                 <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-tertiary" />
-                <input
-                  type="text"
+                <Input
                   placeholder="Filter by control name or ID..."
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}

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

@@ -0,0 +1,99 @@
+import { Clock, Pause } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink, ConditionsSection } from '../../ui/drawer-components'
+import { formatAge, cronToHuman } from '../resource-utils'
+
+interface CronWorkflowRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CronWorkflowRenderer({ data, onNavigate }: CronWorkflowRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const workflowSpec = spec.workflowSpec || {}
+  const schedules = Array.isArray(spec.schedules) ? spec.schedules : spec.schedule ? [spec.schedule] : []
+  const isSuspended = spec.suspend === true
+  const active = Array.isArray(status.active) ? status.active : []
+  const workflowTemplateRef = workflowSpec.workflowTemplateRef || null
+  const templateName = workflowTemplateRef?.name || workflowTemplateRef?.template || ''
+  const templateClusterScope = workflowTemplateRef?.clusterScope === true
+  const hasNeverRun = !status.lastScheduledTime && active.length === 0
+
+  return (
+    <>
+      {isSuspended && (
+        <AlertBanner
+          variant="info"
+          icon={Pause}
+          title="CronWorkflow Suspended"
+          message="No new Workflows will be scheduled until this CronWorkflow is resumed."
+        />
+      )}
+
+      {hasNeverRun && !isSuspended && (
+        <AlertBanner
+          variant="info"
+          title="Never Scheduled"
+          message="This CronWorkflow has no retained active or historical Workflow runs in status."
+        />
+      )}
+
+      <Section title="Schedule" icon={Clock}>
+        <PropertyList>
+          <Property label={schedules.length === 1 ? 'Schedule' : 'Schedules'} value={schedules.join(', ')} />
+          {schedules.length === 1 && <Property label="Human" value={cronToHuman(schedules[0])} />}
+          <Property label="Timezone" value={spec.timezone || 'Cluster default'} />
+          <Property label="Suspend" value={isSuspended ? 'Yes' : 'No'} />
+          <Property label="Concurrency" value={spec.concurrencyPolicy || 'Allow'} />
+          <Property label="Last Scheduled" value={status.lastScheduledTime ? formatAge(status.lastScheduledTime) : 'Never'} />
+          <Property label="Active Workflows" value={active.length} />
+        </PropertyList>
+      </Section>
+
+      <Section title="Workflow Template">
+        <PropertyList>
+          {templateName && (
+            <Property
+              label="Template Ref"
+              value={
+                <ResourceLink
+                  name={templateName}
+                  kind={templateClusterScope ? 'clusterworkflowtemplates' : 'workflowtemplates'}
+                  namespace={templateClusterScope ? '' : data.metadata?.namespace || ''}
+                  group="argoproj.io"
+                  label={templateClusterScope ? `${templateName} (cluster)` : templateName}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+          <Property label="Entrypoint" value={workflowSpec.entrypoint || '-'} />
+          <Property label="Arguments" value={(workflowSpec.arguments?.parameters || []).length} />
+          <Property label="Templates" value={(workflowSpec.templates || []).length} />
+        </PropertyList>
+      </Section>
+
+      <Section title="History">
+        <PropertyList>
+          <Property label="Success History" value={spec.successfulJobsHistoryLimit ?? 3} />
+          <Property label="Failed History" value={spec.failedJobsHistoryLimit ?? 1} />
+          <Property label="Starting Deadline" value={spec.startingDeadlineSeconds ? `${spec.startingDeadlineSeconds}s` : 'None'} />
+        </PropertyList>
+      </Section>
+
+      {active.length > 0 && (
+        <Section title="Active Workflows">
+          <div className="space-y-1">
+            {active.map((wf: any) => (
+              <div key={`${wf.namespace || data.metadata?.namespace || ''}/${wf.name}`} className="text-sm">
+                <ResourceLink name={wf.name} kind="workflows" namespace={wf.namespace || data.metadata?.namespace || ''} group="argoproj.io" onNavigate={onNavigate} />
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

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

@@ -48,7 +48,9 @@ export function JobRenderer({ data }: JobRendererProps) {
   const conditions = status.conditions || []
 
   const startTime = status.startTime ? new Date(status.startTime) : null
-  const completionTime = status.completionTime ? new Date(status.completionTime) : null
+  const terminalCondition = conditions.find((c: any) => (c.type === 'Complete' || c.type === 'Failed') && c.status === 'True')
+  const finishedAt = status.completionTime || terminalCondition?.lastTransitionTime
+  const completionTime = finishedAt ? new Date(finishedAt) : null
   const duration = startTime && completionTime
     ? formatDuration(completionTime.getTime() - startTime.getTime(), true)
     : startTime