@skyhook-io/radar-app 1.8.3 → 1.8.5

package/src/RadarApp.tsx

@@ -25,6 +25,7 @@ import { ThemeProvider } from './context/ThemeContext';
 import { ToastProvider, showApiError, showApiSuccess } from './components/ui/Toast';
 import { setApiBase, setBasename } from './api/config';
 import { NavCustomizationProvider } from './context/NavCustomization';
+import { FilterLocationBridge } from './filter/FilterLocationBridge';
 import type { NavCustomization } from './context/NavCustomization';
 
 // Declare the shape of mutation meta here — inlined rather than in a
@@ -153,7 +154,9 @@ export function RadarApp({
       <QueryClientProvider client={client}>
         <ToastProvider>
           <NavCustomizationProvider value={navSlots}>
-            <App manageDocumentTitle={manageDocumentTitle} documentTitleSuffix={documentTitleSuffix} />
+            <FilterLocationBridge>
+              <App manageDocumentTitle={manageDocumentTitle} documentTitleSuffix={documentTitleSuffix} />
+            </FilterLocationBridge>
           </NavCustomizationProvider>
         </ToastProvider>
       </QueryClientProvider>

package/src/api/client.ts

@@ -17,6 +17,7 @@ import type {
   HelmValues,
   ManifestDiff,
   NotesDiff,
+  HooksDiff,
   ResourceDiff,
   UpgradeInfo,
   BatchUpgradeInfo,
@@ -35,6 +36,15 @@ import type { GitOpsOperationResponse } from '../types/gitops'
 import { getApiBase, getAuthHeaders, getCredentialsMode, getBasename, routePath } from './config'
 import { pluralToKind } from '../utils/navigation'
 
+// Auto-refresh cadences (ms) — named constants for each polled hook's
+// refetchInterval below, so the poll rate reads clearly at each call site.
+const DASHBOARD_REFRESH_INTERVAL_MS = 30_000
+const AUDIT_REFRESH_INTERVAL_MS = 60_000
+const ISSUES_REFRESH_INTERVAL_MS = 30_000
+const COST_REFRESH_INTERVAL_MS = 60_000
+const CHANGES_REFRESH_INTERVAL_MS = 60_000
+const APPLICATIONS_REFRESH_INTERVAL_MS = 60_000
+
 // Wrapper around fetch that always includes credentials (for session cookies)
 // and handles 401 responses globally. Merges caller-provided headers with
 // auth headers from the config module so library consumers (Radar Hub) can
@@ -326,7 +336,7 @@ export function useDashboard(namespaces: string[] = []) {
     queryKey: ['dashboard', namespaces],
     queryFn: () => fetchJSON(`/dashboard${params}`),
     staleTime: 15000, // 15 seconds
-    refetchInterval: 30000, // Refresh every 30 seconds
+    refetchInterval: DASHBOARD_REFRESH_INTERVAL_MS,
   })
 }
 
@@ -337,7 +347,7 @@ export function useAudit(namespaces: string[] = []) {
     queryKey: ['audit', namespaces],
     queryFn: () => fetchJSON(`/audit${params}`),
     staleTime: 30000,
-    refetchInterval: 60000,
+    refetchInterval: AUDIT_REFRESH_INTERVAL_MS,
     placeholderData: (prev) => prev,
   })
 }
@@ -368,7 +378,7 @@ export function useIssues(namespaces: string[] = []) {
     queryKey: ['issues', namespaces],
     queryFn: () => fetchJSON(`/issues${params}`),
     staleTime: 30000,
-    refetchInterval: 30000,
+    refetchInterval: ISSUES_REFRESH_INTERVAL_MS,
   })
 }
 
@@ -516,7 +526,7 @@ export function useOpenCostSummary() {
   return useQuery<OpenCostSummary>({
     queryKey: ['opencost-summary'],
     queryFn: () => fetchJSON('/opencost/summary'),
-    refetchInterval: 60000, // Refresh every minute
+    refetchInterval: COST_REFRESH_INTERVAL_MS,
     staleTime: 30000,
     placeholderData: (prev) => prev, // Keep previous data visible during refetch
   })
@@ -954,7 +964,7 @@ export function useApplications(namespaces: string[]) {
     queryKey: ['applications', namespaces],
     queryFn: () => fetchJSON(`/applications${queryString ? `?${queryString}` : ''}`),
     staleTime: 30_000,
-    refetchInterval: 60_000,
+    refetchInterval: APPLICATIONS_REFRESH_INTERVAL_MS,
   })
 }
 
@@ -1113,7 +1123,7 @@ export function useChanges(options: UseChangesOptions = {}) {
     queryKey: ['changes', namespaces, kind, timeRange, filter, includeK8sEvents, includeManaged, includeDeleted, limit],
     queryFn: () => fetchJSON(`/changes${queryString ? `?${queryString}` : ''}`),
     staleTime: 5000, // Consider data stale after 5 seconds to ensure fresh data on navigation
-    refetchInterval: 60000, // SSE handles real-time updates; this is a fallback
+    refetchInterval: CHANGES_REFRESH_INTERVAL_MS, // SSE handles real-time updates; this is a fallback
     enabled,
   })
 }
@@ -2452,6 +2462,22 @@ export function useHelmNotesDiff(
   })
 }
 
+export function useHelmHooksDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  enabled = true,
+) {
+  return useQuery<HooksDiff>({
+    queryKey: ['helm-hooks-diff', namespace, name, revision1, revision2],
+    queryFn: () =>
+      fetchJSON(`/helm/releases/${namespace}/${name}/hooks/diff?revision1=${revision1}&revision2=${revision2}`),
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
 export function useHelmResourceDiff(
   namespace: string,
   name: string,

package/src/components/ConnectionErrorView.tsx

@@ -254,7 +254,7 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
 
           {connection.error && (
             <div className="w-full bg-theme-elevated border border-theme-border rounded-lg p-3 mb-6 overflow-auto max-h-32">
-              <code className="text-xs text-red-400 font-mono whitespace-pre-wrap break-all">
+              <code className="text-xs text-red-400 font-mono whitespace-pre-wrap break-words">
                 {connection.error}
               </code>
             </div>

package/src/components/ContextSwitcher.tsx

@@ -14,6 +14,8 @@ import { parseContextName, type ParsedContextName } from '../utils/context-name'
 
 interface ContextSwitcherProps {
   className?: string
+  variant?: 'chip' | 'segment'
+  label?: string
 }
 
 export interface ContextSwitcherHandle {
@@ -24,7 +26,7 @@ interface ParsedContext extends ParsedContextName {
   context: ContextInfo
 }
 
-export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '' }, ref) => {
+export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '', variant, label }, ref) => {
   const [showConfirm, setShowConfirm] = useState(false)
   const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
   const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
@@ -191,6 +193,8 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
       <ClusterSwitcher
         ref={ref}
         className={className}
+        variant={variant}
+        label={label}
         currentId={currentId}
         currentName={currentRaw}
         currentSourceLabel={currentSourceLabel}

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).
@@ -92,7 +104,7 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
 
   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">