@skyhook-io/radar-app 1.8.3 → 1.8.6

package/src/components/NamespaceSwitcher.tsx

@@ -1,320 +1,41 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { ChevronDown, Globe, Search, AlertTriangle, X } from 'lucide-react'
+import { forwardRef } from 'react'
+import { NamespacePicker, type NamespacePickerHandle } from '@skyhook-io/k8s-ui'
 import { useNamespaceScope, useSetActiveNamespace } from '../api/client'
-import { Tooltip } from './ui/Tooltip'
 
-export interface NamespaceSwitcherHandle {
-  open: () => void
-}
+export type NamespaceSwitcherHandle = NamespacePickerHandle
 
 interface NamespaceSwitcherProps {
   className?: string
   disabled?: boolean
   disabledTooltip?: string
+  variant?: 'chip' | 'segment'
+  label?: string
 }
 
 /**
- * NamespaceSwitcher is normally a per-user multi-select view filter. When the
- * backend reports cacheScoped=true, it becomes a single-namespace cache scope
- * control; local sessions may rebuild the cache for a different namespace.
- *
- * Three states reflect what the backend reports:
- *   - cluster-wide: empty trigger label "All namespaces", picker lets the
- *     user narrow the view; otherwise informational.
- *   - namespace:    label shows the namespace count (or single name); picker
- *     offers other accessible namespaces and a clear-all reset.
- *   - restricted:   user can't list namespaces and isn't pinned; picker
- *     surfaces only the kubeconfig context's namespace + any saved picks.
- *
- * Selection model: the dropdown keeps a draft Set<string>; toggling rows
- * mutates the draft locally; closing the dropdown applies the draft in a
- * single mutation. "Clear all" applies immediately and closes; "Select all
- * visible" / "Clear visible" mutate the draft only and wait for close.
+ * OSS Radar's namespace scope control — a thin data container over the shared
+ * presentational NamespacePicker (@skyhook-io/k8s-ui). Wires Radar's own API
+ * hooks; Radar Hub supplies its own container over the per-cluster apiBase.
  */
 export const NamespaceSwitcher = forwardRef<NamespaceSwitcherHandle, NamespaceSwitcherProps>(function NamespaceSwitcher(
-  { className = '', disabled = false, disabledTooltip },
+  { className, disabled, disabledTooltip, variant, label },
   ref,
 ) {
   const { data: scope, isLoading } = useNamespaceScope()
   const setActive = useSetActiveNamespace()
 
-  const [isOpen, setIsOpen] = useState(false)
-  const [search, setSearch] = useState('')
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
-  const [draft, setDraft] = useState<Set<string>>(() => new Set())
-
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
-  const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
-
-  // Sync the draft with the server's view whenever it changes (initial load,
-  // post-mutation refetch, eviction after RBAC drift).
-  useEffect(() => {
-    setDraft(new Set(scopeActives))
-  }, [activesKey, scopeActives])
-
-  const items = useMemo(() => {
-    if (!scope) return [] as string[]
-    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
-  }, [scope])
-
-  const filteredItems = useMemo(() => {
-    const q = search.trim().toLowerCase()
-    if (!q) return items
-    return items.filter(n => n.toLowerCase().includes(q))
-  }, [items, search])
-
-  const applySelection = useCallback((next: Set<string>) => {
-    if (!scope) return
-    const nextArr = Array.from(next).sort()
-    if (scope.cacheScoped && nextArr.length !== 1) return
-    if (nextArr.join(',') === activesKey) return
-    setActive.mutate({ namespaces: nextArr })
-  }, [activesKey, scope, setActive])
-
-  const closeAndApply = useCallback(() => {
-    setIsOpen(false)
-    setSearch('')
-    applySelection(draft)
-  }, [applySelection, draft])
-
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      if (disabled || isLoading || setActive.isPending) return
-      setIsOpen(true)
-    },
-  }), [disabled, isLoading, setActive.isPending])
-
-  useEffect(() => {
-    if (!isOpen) return
-    const trigger = triggerRef.current
-    if (!trigger) return
-    const r = trigger.getBoundingClientRect()
-    setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 240) })
-  }, [isOpen])
-
-  useEffect(() => {
-    if (!isOpen) return
-    function onClick(e: MouseEvent) {
-      if (
-        !dropdownRef.current?.contains(e.target as Node) &&
-        !triggerRef.current?.contains(e.target as Node)
-      ) {
-        closeAndApply()
-      }
-    }
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') closeAndApply()
-    }
-    document.addEventListener('mousedown', onClick)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onClick)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [isOpen, closeAndApply])
-
-  if (!scope) return null
-
-  const toggle = (ns: string) => {
-    if (scope.cacheScoped) {
-      setDraft(new Set([ns]))
-      return
-    }
-    const next = new Set(draft)
-    if (next.has(ns)) next.delete(ns)
-    else next.add(ns)
-    setDraft(next)
-  }
-
-  const clearAll = () => {
-    if (scope.cacheScoped) return
-    setDraft(new Set())
-    setIsOpen(false)
-    setSearch('')
-    applySelection(new Set())
-  }
-
-  const selectAllVisible = () => {
-    const next = new Set(draft)
-    for (const ns of filteredItems) next.add(ns)
-    setDraft(next)
-  }
-
-  const clearVisible = () => {
-    const next = new Set(draft)
-    for (const ns of filteredItems) next.delete(ns)
-    setDraft(next)
-  }
-
-  const activeCount = scopeActives.length
-  const triggerLabel =
-    activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
-  const isClusterWide = activeCount === 0
-  const restrictedHint = scope.mode === 'restricted'
-  const cacheScopeLocked = scope.cacheScoped && !scope.namespaceRescope
-  const isDisabled = disabled || isLoading || setActive.isPending || cacheScopeLocked
-  const canClearAll = scope.canClearNamespace || activeCount === 0
-  const tooltipContent = disabled && disabledTooltip
-    ? disabledTooltip
-    : scope.cacheScoped
-      ? scope.namespaceRescope
-        ? `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} to stay fast on large clusters. Pick another namespace to re-point it (takes a moment; closes open terminals).`
-        : `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} on this cluster.`
-      : restrictedHint
-      ? 'Limited namespace visibility — only namespaces granted by your RBAC are shown.'
-      : isClusterWide
-        ? 'Currently viewing all namespaces. Click to narrow the view.'
-        : activeCount === 1
-          ? `View is filtered to namespace ${scopeActives[0]}. Click to switch or reset.`
-          : `View is filtered to ${activeCount} namespaces. Click to adjust or reset.`
-
-  // Counts used to label the bulk-action buttons; computed against the visible
-  // (filtered) set so the labels match what the action will affect.
-  const visibleSelectedCount = filteredItems.reduce((n, ns) => n + (draft.has(ns) ? 1 : 0), 0)
-  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
-
   return (
-    <>
-      <Tooltip
-        content={tooltipContent}
-        delay={300}
-        position="bottom"
-      >
-        <button
-          ref={triggerRef}
-          onClick={() => !isDisabled && (isOpen ? closeAndApply() : setIsOpen(true))}
-          disabled={isDisabled}
-          className={`flex items-center gap-1.5 px-2 py-1 rounded text-sm bg-theme-elevated hover:bg-theme-hover text-theme-text-primary disabled:opacity-60 transition-colors ${className}`}
-          aria-label="Switch active namespaces"
-        >
-          {isClusterWide ? (
-            <Globe className="w-3.5 h-3.5 text-theme-text-tertiary" />
-          ) : restrictedHint ? (
-            <AlertTriangle className="w-3.5 h-3.5 text-theme-text-tertiary" />
-          ) : null}
-          <span className="font-medium max-w-[180px] truncate">
-            {setActive.isPending ? 'Switching…' : triggerLabel}
-          </span>
-          <ChevronDown className="w-3 h-3 opacity-60" />
-        </button>
-      </Tooltip>
-
-      {isOpen &&
-        createPortal(
-          <div
-            ref={dropdownRef}
-            style={{ position: 'fixed', top: pos.top, left: pos.left, minWidth: pos.width, zIndex: 100 }}
-            className="bg-theme-surface border border-theme-border rounded-md shadow-theme-lg overflow-hidden"
-          >
-            {items.length > 6 && (
-              <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
-                <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
-                <input
-                  autoFocus
-                  value={search}
-                  onChange={e => setSearch(e.target.value)}
-                  placeholder="Filter namespaces"
-                  className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
-                />
-              </div>
-            )}
-
-            {scope.cacheScoped ? (
-              <div className="px-3 py-1.5 border-b border-theme-border text-[11px] leading-snug text-theme-text-secondary">
-                Radar is watching one namespace to stay fast on large clusters.
-                {scope.namespaceRescope
-                  ? ' Pick another to re-point it — takes a moment and closes open terminals.'
-                  : ' This instance is locked to its startup namespace.'}
-              </div>
-            ) : (
-              <div className="flex items-center justify-between px-2 py-1.5 border-b border-theme-border text-xs text-theme-text-secondary">
-                <button
-                  onClick={canClearAll ? clearAll : undefined}
-                  disabled={!canClearAll || activeCount === 0}
-                  className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
-                  aria-label="Clear namespace selection"
-                >
-                  <X className="w-3 h-3" />
-                  Clear all
-                </button>
-                <button
-                  onClick={allVisibleSelected ? clearVisible : selectAllVisible}
-                  disabled={filteredItems.length === 0}
-                  className="px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
-                >
-                  {allVisibleSelected
-                    ? `Clear ${filteredItems.length} visible`
-                    : search.trim()
-                      ? `Select ${filteredItems.length} visible`
-                      : 'Select all'}
-                </button>
-              </div>
-            )}
-
-            <ul className="max-h-80 overflow-y-auto py-1">
-              {filteredItems.length === 0 && (
-                <li className="px-3 py-2 text-xs text-theme-text-tertiary">
-                  {search ? 'No matches.' : 'No namespaces available.'}
-                </li>
-              )}
-
-              {filteredItems.map(ns => {
-                const isChecked = draft.has(ns)
-                const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
-                return (
-                  <li key={ns}>
-                    <label
-                      className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer"
-                    >
-                      <span className="flex items-center gap-2 min-w-0">
-                        <input
-                          type={scope.cacheScoped ? 'radio' : 'checkbox'}
-                          name={scope.cacheScoped ? 'namespace-cache-scope' : undefined}
-                          checked={isChecked}
-                          onChange={() => toggle(ns)}
-                          className="shrink-0 accent-current"
-                        />
-                        <span className="truncate">{ns}</span>
-                        {isContextDefault && (
-                          <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
-                            kubeconfig
-                          </span>
-                        )}
-                      </span>
-                    </label>
-                  </li>
-                )
-              })}
-            </ul>
-
-            <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
-              <span>
-                {scope.cacheScoped
-                  ? (draft.size === 1 ? Array.from(draft)[0] : 'Select a namespace')
-                  : draft.size === 0 ? 'All namespaces' : `${draft.size} selected`}
-              </span>
-              <button
-                onClick={closeAndApply}
-                className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
-              >
-                Done
-              </button>
-            </div>
-
-            {!scope.authoritative && (
-              <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">
-                Limited list — your RBAC doesn&rsquo;t allow listing all
-                namespaces. Other namespaces may be accessible but won&rsquo;t
-                appear here until you switch context.
-              </div>
-            )}
-          </div>,
-          document.body,
-        )}
-    </>
+    <NamespacePicker
+      ref={ref}
+      scope={scope}
+      loading={isLoading}
+      pending={setActive.isPending}
+      onApply={namespaces => setActive.mutate({ namespaces })}
+      disabled={disabled}
+      disabledTooltip={disabledTooltip}
+      className={className}
+      variant={variant}
+      label={label}
+    />
   )
 })

package/src/components/applications/ApplicationsView.tsx

@@ -5,6 +5,7 @@ import {
   ApplicationDetail,
   CenteredEmpty,
   PageHeader,
+  FreshnessControl,
   useToast,
   orderEnvs,
   matchWorkloadAcrossInstances,
@@ -18,6 +19,7 @@ import {
 } from '@skyhook-io/k8s-ui'
 import { Boxes } from 'lucide-react'
 import { useApplications, useTopology } from '../../api/client'
+import { useConnection } from '../../context/ConnectionContext'
 import { kindToPlural } from '../../utils/navigation'
 import { WorkloadView } from '../workload/WorkloadView'
 
@@ -28,8 +30,18 @@ interface ApplicationsViewProps {
 
 export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsViewProps) {
   const query = useApplications(namespaces)
+  const { connection } = useConnection()
   const apps = useMemo(() => query.data?.applications ?? [], [query.data])
 
+  const freshness = (
+    <FreshnessControl
+      mode="auto"
+      dataUpdatedAt={query.dataUpdatedAt}
+      onRefresh={() => query.refetch()}
+      connectionState={connection.state}
+    />
+  )
+
   // Which app is open lives in the URL (?app=<key>) so the detail view is
   // deep-linkable and the browser back button returns to the list. Opening or
   // closing an app also clears the per-app params (workload, tab).
@@ -71,7 +83,14 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
   // the page header from vanishing while loading / on error, the wrapper shows
   // the same header bar above those states. (Keep title + description in sync
   // with ApplicationsList's PageHeader.)
-  if (query.isLoading || query.error) {
+  if (query.isLoading) {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <ApplicationsList apps={[]} onSelect={selectApp} headerActions={freshness} loading />
+      </div>
+    )
+  }
+  if (query.error) {
     return (
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <div className="shrink-0 border-b border-theme-border px-4 py-4">
@@ -81,18 +100,14 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
             description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
           />
         </div>
-        {query.isLoading ? (
-          <CenteredEmpty icon={Boxes} headline="Loading applications…" />
-        ) : (
-          <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
-        )}
+        <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
       </div>
     )
   }
 
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-      <ApplicationsList apps={apps} onSelect={selectApp} />
+      <ApplicationsList apps={apps} onSelect={selectApp} headerActions={freshness} />
     </div>
   )
 }

package/src/components/audit/AuditView.tsx

@@ -1,10 +1,11 @@
 import { useState, useCallback } from 'react'
 import { useAudit, useAuditSettings, useUpdateAuditSettings, useCloudRole } from '../../api/client'
 import type { SelectedResource } from '../../types'
-import { ChecksView, PaneLoader, PageHeader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
+import { ChecksView, PaneLoader, PageHeader, FreshnessControl, type CheckResourceRef } from '@skyhook-io/k8s-ui'
 import { ShieldCheck, Settings } from 'lucide-react'
 import { AuditSettingsDialog } from './AuditSettingsDialog'
 import { Tooltip } from '../ui/Tooltip'
+import { useConnection } from '../../context/ConnectionContext'
 
 interface AuditViewProps {
   namespaces: string[]
@@ -18,7 +19,7 @@ interface AuditViewProps {
 // ~/.radar settings are this cluster's "policy" and the row hide-menu writes to
 // them.
 export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps) {
-  const { data, isLoading, error } = useAudit(namespaces)
+  const { data, isLoading, error, dataUpdatedAt, refetch } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
   const updateSettings = useUpdateAuditSettings()
   // Audit policy is owner-gated (enforced server-side). Withhold the inline
@@ -30,6 +31,8 @@ export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps)
 
   const ignoredCount = auditSettings?.ignoredNamespaces?.length ?? 0
 
+  const { connection } = useConnection()
+
   // Inline hide actions — persist to local settings immediately.
   const hideCheck = useCallback((checkID: string) => {
     if (!auditSettings) return
@@ -80,6 +83,12 @@ export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps)
         description="Security, reliability, and efficiency best practices (NSA/CISA, CIS, Polaris, Kubescape), grouped into a remediation queue."
         actions={
           <>
+            <FreshnessControl
+              mode="auto"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+            />
             {ignoredCount > 0 && (
               <button onClick={() => setShowSettings(true)} className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors">{ignoredCount} {ignoredCount === 1 ? 'namespace' : 'namespaces'} hidden</button>
             )}

package/src/components/cost/CostView.tsx

@@ -2,17 +2,19 @@ import { useState, useEffect } from 'react'
 import { useOpenCostSummary, useOpenCostWorkloads, useOpenCostNodes } from '../../api/client'
 import type { OpenCostNamespaceCost, OpenCostWorkloadCost, OpenCostNodeCost } from '../../api/client'
 import { ArrowLeft, ChevronDown, ChevronRight, DollarSign, HelpCircle, Loader2, Server, X } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
 import { CostTrendChart } from './CostTrendChart'
 import { Tooltip } from '../ui/Tooltip'
+import { useConnection } from '../../context/ConnectionContext'
 
 interface CostViewProps {
   onBack: () => void
 }
 
 export function CostView({ onBack }: CostViewProps) {
-  const { data, isLoading } = useOpenCostSummary()
+  const { data, isLoading, dataUpdatedAt, refetch } = useOpenCostSummary()
   const { data: nodeData } = useOpenCostNodes()
+  const { connection } = useConnection()
   const [showHelp, setShowHelp] = useState(false)
 
   if (isLoading) {
@@ -90,6 +92,14 @@ export function CostView({ onBack }: CostViewProps) {
             </button>
           </div>
           <div className="flex items-center gap-4">
+            {/* Tracks the headline $/hr summary (the primary query); its load
+                time is the representative freshness signal for the view. */}
+            <FreshnessControl
+              mode="auto"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+            />
             {hasEfficiency && (
               <div className="flex flex-col items-end gap-0.5">
                 <div className="flex items-center gap-2 text-sm">

package/src/components/gitops/GitOpsView.tsx

@@ -8,6 +8,7 @@ import {
   GitOpsDetailLayout,
   GitOpsGraphFilterRail,
   GitOpsTableView as SharedGitOpsTableView,
+  FreshnessControl,
   GitOpsTreeGraph,
   RollbackDialog,
   SyncOptionsDialog,
@@ -61,6 +62,7 @@ import {
   useResource,
 } from '../../api/client'
 import { useAPIResources } from '../../api/apiResources'
+import { useConnection } from '../../context/ConnectionContext'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 import { CodeViewer } from '../ui/CodeViewer'
@@ -80,6 +82,11 @@ const GITOPS_KINDS: APIResource[] = [
 
 const KIND_BY_NAME = new Map(GITOPS_KINDS.map((k) => [k.name, k]))
 
+// Rows are the table's primary content; their poll cadence is what the toolbar
+// freshness signal advertises ("Auto-refreshes every 2m"). Single source of
+// truth so the signal can't drift from the actual refetchInterval below.
+const GITOPS_ROWS_REFRESH_INTERVAL_MS = 120_000
+
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
@@ -102,6 +109,7 @@ export function GitOpsView({ namespaces, onOpenResource, onClearNamespaces }: Gi
 
 function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string[]; onClearNamespaces?: () => void }) {
   const navigate = useNavigate()
+  const { connection } = useConnection()
   const namespacesParam = namespaces.join(',')
   const { data: apiResources, isLoading: apiResourcesLoading } = useAPIResources()
 
@@ -191,7 +199,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     },
     enabled: !apiResourcesLoading,
     staleTime: 30_000,
-    refetchInterval: 120_000,
+    refetchInterval: GITOPS_ROWS_REFRESH_INTERVAL_MS,
   })
 
   // Row mutations invalidate granular keys (['resource', …], ['gitops-tree', …])
@@ -201,11 +209,11 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
   // inviting a duplicate request. Radar serves reads from an informer cache that
   // lags the write by the watch-propagation delay, so refetch once now (covers
   // an already-current cache) and once shortly after to catch the propagated
-  // update; refetch() forces a fetch regardless of staleTime.
-  const refetchTable = () => {
-    rowsQuery.refetch()
-    countsQuery.refetch()
-  }
+  // update; refetch() forces a fetch regardless of staleTime. The toolbar's
+  // manual refresh reuses refetchTable so rows + counts stay in sync.
+  // Return the combined promise so the toolbar's refresh animation waits for the
+  // real fetches to settle before showing its success checkmark.
+  const refetchTable = () => Promise.all([rowsQuery.refetch(), countsQuery.refetch()])
   const refetchTableAfterMutation = () => {
     refetchTable()
     window.setTimeout(refetchTable, 1200)
@@ -280,7 +288,14 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
         error={(rowsQuery.error as Error | null) ?? null}
         counts={countsQuery.data?.counts ?? {}}
         countsUnavailable={countsQuery.data?.unavailable}
-        onRefresh={() => rowsQuery.refetch()}
+        freshnessSlot={
+          <FreshnessControl
+            mode="auto"
+            dataUpdatedAt={rowsQuery.dataUpdatedAt}
+            onRefresh={refetchTable}
+            connectionState={connection.state}
+          />
+        }
         onRowClick={(row) => {
           const ns = row.namespace || '_'
           const params = new URLSearchParams()