@skyhook-io/radar-app 1.8.2 → 1.8.5

package/src/components/helm/HelmView.tsx

@@ -1,13 +1,13 @@
 import { useState, useMemo, useRef, useEffect, useCallback, forwardRef } from 'react'
-import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
-import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch, ChevronRight, RotateCcw, Clock } from 'lucide-react'
-import { PaneLoader, PageHeader } from '@skyhook-io/k8s-ui'
+import { Package, Search, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch, ChevronRight, RotateCcw, Clock } from 'lucide-react'
+import { PaneLoader, PageHeader, SortableTh, FreshnessControl, type SortDir } from '@skyhook-io/k8s-ui'
+import { useConnection } from '../../context/ConnectionContext'
 import { clsx } from 'clsx'
 import { useHelmReleases, useHelmBatchUpgradeInfo, isForbiddenError } from '../../api/client'
 import type { HelmOperation, HelmRelease, SelectedHelmRelease, UpgradeInfo, ChartSource } from '../../types'
 import { getStatusColor, formatAge, isHelmReleaseActionable } from './helm-utils'
-import { SEVERITY_BADGE } from '../../utils/badge-colors'
+import { SEVERITY_BADGE, SEVERITY_DOT, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
 import { ChartBrowser } from './ChartBrowser'
 import { InstallWizard } from './InstallWizard'
@@ -25,7 +25,7 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedChart, setSelectedChart] = useState<{ repo: string; chart: string; version: string; source: ChartSource } | null>(null)
 
-  const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespaces)
+  const { data: releases, isLoading, error: releasesError, dataUpdatedAt: releasesUpdatedAt, isFetching: releasesFetching, refetch: refetchReleases } = useHelmReleases(namespaces)
   const isForbidden = isForbiddenError(releasesError)
   const releasesErrorMessage = releasesError instanceof Error ? releasesError.message : 'Failed to load Helm releases'
 
@@ -36,24 +36,38 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
   )
   const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade checks failed'
 
-  const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(async () => {
-    await Promise.all([refetchReleases(), refetchUpgradeInfo()])
-  })
-
-  const isFullyLoaded = !isLoading && !upgradeLoading
+  const { connection } = useConnection()
+  const refetchAll = () => Promise.all([refetchReleases(), refetchUpgradeInfo()])
 
   // Filter releases by search term
+  // Resources-table cycle: asc → desc → off (null restores the server's order).
+  const [sort, setSort] = useState<{ key: HelmSortKey; dir: SortDir } | null>(null)
+  const onSort = useCallback(
+    (key: HelmSortKey) =>
+      setSort((prev) => {
+        if (!prev || prev.key !== key) return { key, dir: 'asc' }
+        if (prev.dir === 'asc') return { key, dir: 'desc' }
+        return null
+      }),
+    [],
+  )
+
   const filteredReleases = useMemo(() => {
     if (!releases) return []
-    if (!searchTerm) return releases
-    const term = searchTerm.toLowerCase()
-    return releases.filter(
-      (r) =>
-        r.name.toLowerCase().includes(term) ||
-        r.namespace.toLowerCase().includes(term) ||
-        r.chart.toLowerCase().includes(term)
-    )
-  }, [releases, searchTerm])
+    const term = searchTerm.trim().toLowerCase()
+    const filtered = term
+      ? releases.filter(
+          (r) =>
+            r.name.toLowerCase().includes(term) ||
+            r.namespace.toLowerCase().includes(term) ||
+            r.chart.toLowerCase().includes(term)
+        )
+      : releases
+
+    if (!sort) return filtered
+    const factor = sort.dir === 'asc' ? 1 : -1
+    return [...filtered].sort((a, b) => compareReleases(a, b, sort.key) * factor)
+  }, [releases, searchTerm, sort])
 
   // Keyboard navigation state
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -62,8 +76,9 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
   const filteredReleasesCountRef = useRef(0)
   filteredReleasesCountRef.current = filteredReleases.length
 
-  // Reset highlight when search changes
-  useEffect(() => { setHighlightedIndex(-1) }, [searchTerm])
+  // Reset highlight when the visible order changes (search or sort) — otherwise
+  // the index would point at whatever release shifted into that row.
+  useEffect(() => { setHighlightedIndex(-1) }, [searchTerm, sort])
 
   // Scroll highlighted row into view
   useEffect(() => {
@@ -173,6 +188,17 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
             icon={Package}
             title="Helm"
             description="Installed Helm releases and the chart catalog for this cluster."
+            actions={
+              activeTab === 'releases' ? (
+                <FreshnessControl
+                  mode="snapshot"
+                  dataUpdatedAt={releasesUpdatedAt}
+                  isFetching={releasesFetching || upgradeLoading}
+                  onRefresh={refetchAll}
+                  connectionState={connection.state}
+                />
+              ) : undefined
+            }
           />
         </div>
         {/* Tab bar */}
@@ -212,9 +238,6 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
           <>
             {/* Releases Toolbar */}
             <div className="flex items-center gap-4 px-4 py-3 border-b border-theme-border bg-theme-surface/50 shrink-0">
-              {!isFullyLoaded && (
-                <RefreshCw className="w-3.5 h-3.5 animate-spin text-theme-text-tertiary shrink-0" />
-              )}
               <div className="flex-1 relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
                 <input
@@ -226,15 +249,6 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
                   className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
               </div>
-              <Tooltip content="Refresh">
-              <button
-                onClick={handleRefresh}
-                disabled={isRefreshAnimating}
-                className="p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg disabled:opacity-50 disabled:pointer-events-none"
-              >
-                <RefreshCw className={clsx('w-4 h-4', isRefreshAnimating && 'animate-spin')} />
-              </button>
-              </Tooltip>
             </div>
 
             {/* Releases Table */}
@@ -289,29 +303,15 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
                 </div>
               ) : (
                 <table className="w-full table-fixed">
-                  <thead className="bg-theme-surface sticky top-0 z-10">
+                  <thead className="bg-theme-base sticky top-0 z-10">
                     <tr>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-[28%]">
-                        Name
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-[18%]">
-                        Namespace
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-[22%]">
-                        Chart
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-24 hidden xl:table-cell">
-                        App Version
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-40">
-                        Status
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-16">
-                        Rev
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-24">
-                        Updated
-                      </th>
+                      <SortableTh label="Name" sortKey="name" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[28%]" />
+                      <SortableTh label="Namespace" sortKey="namespace" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[18%]" />
+                      <SortableTh label="Chart" sortKey="chart" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[22%]" />
+                      <SortableTh label="App Version" sortKey="appVersion" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-24 hidden xl:table-cell" />
+                      <SortableTh label="Status" sortKey="status" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-40" />
+                      <SortableTh label="Rev" sortKey="revision" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-16" />
+                      <SortableTh label="Updated" sortKey="updated" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-24" />
                     </tr>
                   </thead>
                   <tbody className="table-divide-subtle">
@@ -360,6 +360,23 @@ function releaseIdentityKey(release: Pick<HelmRelease, 'namespace' | 'name' | 's
   return `${release.storageNamespace || release.namespace}/${release.name}`
 }
 
+type HelmSortKey = 'name' | 'namespace' | 'chart' | 'appVersion' | 'status' | 'revision' | 'updated'
+
+function compareReleases(a: HelmRelease, b: HelmRelease, key: HelmSortKey): number {
+  let cmp: number
+  switch (key) {
+    case 'revision':
+      cmp = a.revision - b.revision
+      break
+    case 'updated':
+      cmp = (Date.parse(a.updated) || 0) - (Date.parse(b.updated) || 0)
+      break
+    default:
+      cmp = String(a[key] ?? '').localeCompare(String(b[key] ?? ''))
+  }
+  return cmp || a.name.localeCompare(b.name)
+}
+
 interface ReleaseRowProps {
   release: HelmRelease
   upgradeInfo?: UpgradeInfo
@@ -392,7 +409,7 @@ function getActionableTooltip(issue: string | undefined, summary: string | undef
     <div className="max-w-xs">
       <div className={clsx(
         'font-medium',
-        health === 'unhealthy' ? 'text-red-400' : 'text-yellow-400'
+        health === 'unhealthy' ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning
       )}>
         {summary || issue || health}
       </div>
@@ -483,10 +500,10 @@ const ReleaseRow = forwardRef<HTMLTableRowElement, ReleaseRowProps>(
   const getHealthBadge = () => {
     if (!release.resourceHealth || release.resourceHealth === 'unknown') return null
 
-    const healthStyles: Record<string, { bg: string; text: string; dot: string }> = {
-      healthy: { bg: 'bg-green-500/10', text: 'text-green-400', dot: 'bg-green-500' },
-      degraded: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', dot: 'bg-yellow-500' },
-      unhealthy: { bg: 'bg-red-500/10', text: 'text-red-400', dot: 'bg-red-500' },
+    const healthStyles: Record<string, { badge: string; dot: string }> = {
+      healthy: { badge: SEVERITY_BADGE.success, dot: SEVERITY_DOT.success },
+      degraded: { badge: SEVERITY_BADGE.warning, dot: SEVERITY_DOT.warning },
+      unhealthy: { badge: SEVERITY_BADGE.error, dot: SEVERITY_DOT.error },
     }
 
     const style = healthStyles[release.resourceHealth] || healthStyles.healthy
@@ -495,8 +512,8 @@ const ReleaseRow = forwardRef<HTMLTableRowElement, ReleaseRowProps>(
     return (
       <Tooltip content={tooltipContent}>
         <span className={clsx(
-          'flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium rounded shrink-0',
-          style.bg, style.text
+          'badge-sm shrink-0',
+          style.badge
         )}>
           <span className={clsx('w-1.5 h-1.5 rounded-full', style.dot)} />
           {release.healthIssue || (release.resourceHealth !== 'healthy' ? release.healthSummary : null)}

package/src/components/helm/ManifestDiffViewer.tsx

@@ -8,19 +8,21 @@ interface ManifestDiffViewerProps {
   revision1: number
   revision2: number
   onClose: () => void
+  title?: string
+  emptyLabel?: string
 }
 
-export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onClose }: ManifestDiffViewerProps) {
+export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onClose, title, emptyLabel }: ManifestDiffViewerProps) {
   if (isLoading) {
     return <PaneLoader label="Computing diff…" className="h-32" />
   }
 
-  if (!diff) {
+  if (!hasDiffBodyChange(diff)) {
     return (
       <div className="p-4">
         <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
           <GitCompare className="w-8 h-8 text-theme-text-disabled" />
-          <span>No differences found</span>
+          <span>{emptyLabel || 'No differences found'}</span>
         </div>
       </div>
     )
@@ -32,7 +34,7 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
         <div className="flex items-center gap-2">
           <GitCompare className="w-4 h-4 text-theme-text-secondary" />
           <span className="text-sm font-medium text-theme-text-secondary">
-            Comparing Revision {revision1} → {revision2}
+            {title || `Comparing Revision ${revision1} → ${revision2}`}
           </span>
         </div>
         <button
@@ -67,7 +69,16 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
   )
 }
 
-function DiffLine({ line }: { line: string }) {
+export function hasDiffBodyChange(diff: string): boolean {
+  return diff.split('\n').some((line) => {
+    if (!line || line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')) {
+      return false
+    }
+    return line.startsWith('+') || line.startsWith('-')
+  })
+}
+
+export function DiffLine({ line }: { line: string }) {
   const isAddition = line.startsWith('+') && !line.startsWith('+++')
   const isRemoval = line.startsWith('-') && !line.startsWith('---')
   const isHeader = line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')
@@ -76,8 +87,8 @@ function DiffLine({ line }: { line: string }) {
     <div
       className={clsx(
         'whitespace-pre',
-        isAddition && 'bg-green-500/10 text-green-400',
-        isRemoval && 'bg-red-500/10 text-red-400',
+        isAddition && 'bg-green-500/10 text-green-700 dark:text-green-400',
+        isRemoval && 'bg-red-500/10 text-red-700 dark:text-red-400',
         isHeader && 'text-theme-text-tertiary font-bold',
         !isAddition && !isRemoval && !isHeader && 'text-theme-text-secondary'
       )}

package/src/components/helm/OwnedResources.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import { Link2, ExternalLink, AlertCircle, Terminal, FileText, Plug, X, Loader2 } from 'lucide-react'
+import { Link2, ExternalLink, AlertCircle, Terminal, FileText, X, Loader2 } from 'lucide-react'
 import { getResourceIcon } from '../../utils/resource-icons'
 import { clsx } from 'clsx'
 import type { HelmOwnedResource } from '../../types'
@@ -8,10 +8,10 @@ import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
 import { getResourceStatusColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { useQueryClient } from '@tanstack/react-query'
 import { useOpenTerminal, useOpenLogs } from '../dock'
-import { useStartPortForward } from '../portforward/PortForwardManager'
+import { PortForwardInlineButton } from '../portforward/PortForwardButton'
 import { useAvailablePorts } from '../../api/client'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
-import { useNamespacedCapabilities } from '../../contexts/CapabilitiesContext'
+import { useNamespacedCapabilities, useIsLocalDeployment } from '../../contexts/CapabilitiesContext'
 import { pluralize } from '@skyhook-io/k8s-ui'
 import { Tooltip } from '../ui/Tooltip'
 
@@ -312,11 +312,14 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
   const queryClient = useQueryClient()
   const openTerminal = useOpenTerminal()
   const openLogs = useOpenLogs()
-  const startPortForward = useStartPortForward()
   const { data: portsData, isLoading: portsLoading } = useAvailablePorts('pod', namespace, podName)
 
   // Capabilities (namespace-scoped: re-checks RBAC if globally denied)
   const { canExec, canViewLogs, canPortForward } = useNamespacedCapabilities(namespace)
+  // Live forward (local + RBAC) or the kubectl copy-command (in-cluster/Cloud);
+  // PortForwardInlineButton picks which by deployment mode.
+  const isLocal = useIsLocalDeployment()
+  const showPortForward = canPortForward || !isLocal
 
   const [isLoadingAction, setIsLoadingAction] = useState(false)
 
@@ -374,14 +377,6 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
     }
   }, [namespace, podName, openLogs, fetchPodData])
 
-  const handlePortForward = useCallback((port: number) => {
-    startPortForward.mutate({
-      namespace,
-      podName,
-      podPort: port,
-    })
-  }, [namespace, podName, startPortForward])
-
   const ports = portsData?.ports || []
 
   return (
@@ -414,21 +409,9 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
         </Tooltip>
       )}
 
-      {/* Port Forward */}
-      {canPortForward && !portsLoading && ports.length > 0 && (
-        <Tooltip content={`Port forward :${ports[0].port}`}>
-        <button
-          onClick={(e) => { e.stopPropagation(); handlePortForward(ports[0].port) }}
-          disabled={startPortForward.isPending}
-          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50 disabled:pointer-events-none"
-        >
-          {startPortForward.isPending ? (
-            <Loader2 className="w-3.5 h-3.5 animate-spin" />
-          ) : (
-            <Plug className="w-3.5 h-3.5" />
-          )}
-        </button>
-        </Tooltip>
+      {/* Port Forward (live locally; kubectl copy-command in-cluster/Cloud) */}
+      {showPortForward && !portsLoading && ports.length > 0 && (
+        <PortForwardInlineButton namespace={namespace} podName={podName} port={ports[0].port} />
       )}
     </div>
   )
@@ -441,37 +424,18 @@ interface ServiceQuickActionsProps {
 }
 
 function ServiceQuickActions({ namespace, serviceName }: ServiceQuickActionsProps) {
-  const startPortForward = useStartPortForward()
   const { data: portsData, isLoading: portsLoading } = useAvailablePorts('service', namespace, serviceName)
   const { canPortForward } = useNamespacedCapabilities(namespace)
-
-  const handlePortForward = useCallback((port: number) => {
-    startPortForward.mutate({
-      namespace,
-      serviceName,
-      podPort: port,
-    })
-  }, [namespace, serviceName, startPortForward])
+  const isLocal = useIsLocalDeployment()
+  const showPortForward = canPortForward || !isLocal
 
   const ports = portsData?.ports || []
 
-  if (!canPortForward || portsLoading || ports.length === 0) return null
+  if (!showPortForward || portsLoading || ports.length === 0) return null
 
   return (
     <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-      <Tooltip content={`Port forward :${ports[0].port}`}>
-      <button
-        onClick={(e) => { e.stopPropagation(); handlePortForward(ports[0].port) }}
-        disabled={startPortForward.isPending}
-        className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50 disabled:pointer-events-none"
-      >
-        {startPortForward.isPending ? (
-          <Loader2 className="w-3.5 h-3.5 animate-spin" />
-        ) : (
-          <Plug className="w-3.5 h-3.5" />
-        )}
-      </button>
-      </Tooltip>
+      <PortForwardInlineButton namespace={namespace} serviceName={serviceName} port={ports[0].port} />
     </div>
   )
 }

package/src/components/helm/RevisionHistory.tsx

@@ -64,7 +64,7 @@ export function RevisionHistory({ history, currentRevision, operations = [], onV
         {history.map((revision, index) => {
           const isCurrent = revision.revision === currentRevision
           const isSelectedForCompare = selectedForCompare === revision.revision
-          const annotations = operationAnnotationsForRevision(operations, revision.revision)
+          const annotations = operationAnnotationsForRevision(operations, revision.revision, revision.status)
 
           return (
             <div
@@ -174,7 +174,7 @@ export function RevisionHistory({ history, currentRevision, operations = [], onV
   )
 }
 
-function operationAnnotationsForRevision(operations: HelmOperation[], revision: number): Array<{ label: string; className: string }> {
+function operationAnnotationsForRevision(operations: HelmOperation[], revision: number, revisionStatus: string): Array<{ label: string; className: string }> {
   const annotations: Array<{ label: string; className: string }> = []
   const seen = new Set<string>()
   const add = (label: string, className: string) => {
@@ -182,10 +182,14 @@ function operationAnnotationsForRevision(operations: HelmOperation[], revision:
     seen.add(label)
     annotations.push({ label, className })
   }
+  const addFailure = (label: string) => {
+    if (revisionStatus.toLowerCase() === 'failed') return
+    add(label, SEVERITY_BADGE.error)
+  }
 
   for (const op of operations) {
     if (op.failedRevision === revision) {
-      add('Failed upgrade', SEVERITY_BADGE.error)
+      addFailure('Failed upgrade')
     }
     if (op.rollbackRevision === revision) {
       add('Rollback revision', SEVERITY_BADGE.warning)
@@ -193,10 +197,10 @@ function operationAnnotationsForRevision(operations: HelmOperation[], revision:
     if (op.revision === revision) {
       switch (op.kind) {
         case 'upgrade_failed':
-          add('Failed upgrade', SEVERITY_BADGE.error)
+          addFailure('Failed upgrade')
           break
         case 'release_failed':
-          add('Failed', SEVERITY_BADGE.error)
+          addFailure('Failed')
           break
         case 'rollback':
           add('Rollback', SEVERITY_BADGE.warning)

package/src/components/helm/ValuesViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { Copy, Check, Settings, Pencil, X, Eye, Play, Loader2 } from 'lucide-react'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
@@ -21,6 +21,8 @@ interface ValuesViewerProps {
   // Required for editing
   namespace?: string
   name?: string
+  revision?: number
+  currentRevision?: number
   onApplySuccess?: () => void
 }
 
@@ -33,6 +35,8 @@ export function ValuesViewer({
   copied,
   namespace,
   name,
+  revision,
+  currentRevision,
   onApplySuccess,
 }: ValuesViewerProps) {
   const [isEditing, setIsEditing] = useState(false)
@@ -44,8 +48,9 @@ export function ValuesViewer({
   const previewMutation = useHelmPreviewValues()
   const applyMutation = useHelmApplyValues()
   const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
+  const isHistoricalRevision = typeof revision === 'number' && typeof currentRevision === 'number' && revision !== currentRevision
 
-  const canEdit = Boolean(namespace && name) && canHelmWrite
+  const canEdit = Boolean(namespace && name) && canHelmWrite && !isHistoricalRevision
 
   const displayValues = showAllValues && values?.computed ? values.computed : values?.userSupplied
   const isEmpty = !displayValues || Object.keys(displayValues).length === 0
@@ -72,6 +77,12 @@ export function ValuesViewer({
     setShowPreview(false)
   }, [])
 
+  useEffect(() => {
+    if (isHistoricalRevision && isEditing) {
+      handleCancelEdit()
+    }
+  }, [isHistoricalRevision, isEditing, handleCancelEdit])
+
   // Parse YAML and validate
   const parseYaml = useCallback((yamlStr: string): Record<string, unknown> | null => {
     try {
@@ -86,7 +97,7 @@ export function ValuesViewer({
 
   // Preview changes
   const handlePreview = useCallback(async () => {
-    if (!namespace || !name) return
+    if (!namespace || !name || isHistoricalRevision) return
     const parsed = parseYaml(editedYaml)
     if (!parsed) return
 
@@ -101,11 +112,11 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [namespace, name, editedYaml, parseYaml, previewMutation])
+  }, [namespace, name, isHistoricalRevision, editedYaml, parseYaml, previewMutation])
 
   // Apply changes
   const handleApply = useCallback(async () => {
-    if (!namespace || !name) return
+    if (!namespace || !name || isHistoricalRevision) return
     const parsed = parseYaml(editedYaml)
     if (!parsed) return
 
@@ -120,11 +131,11 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [namespace, name, editedYaml, parseYaml, applyMutation, handleCancelEdit, onApplySuccess])
+  }, [namespace, name, isHistoricalRevision, editedYaml, parseYaml, applyMutation, handleCancelEdit, onApplySuccess])
 
   // Apply from preview modal
   const handleApplyFromPreview = useCallback(async () => {
-    if (!previewData || !namespace || !name) return
+    if (!previewData || !namespace || !name || isHistoricalRevision) return
     try {
       await applyMutation.mutateAsync({
         namespace,
@@ -137,7 +148,7 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [previewData, namespace, name, applyMutation, handleCancelEdit, onApplySuccess])
+  }, [previewData, namespace, name, isHistoricalRevision, applyMutation, handleCancelEdit, onApplySuccess])
 
   if (isLoading) {
     return <PaneLoader label="Loading values…" className="h-32" />
@@ -147,7 +158,12 @@ export function ValuesViewer({
     return (
       <div className="p-4">
         <div className="flex items-center justify-between mb-3">
-          <span className="text-sm font-medium text-theme-text-secondary">Values</span>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-theme-text-secondary">Values</span>
+            {isHistoricalRevision && (
+              <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">revision {revision}</span>
+            )}
+          </div>
           <div className="flex items-center gap-2">
             <ToggleButton showAll={showAllValues} onToggle={onToggleAllValues} disabled={isEditing} />
             {canEdit && (
@@ -161,6 +177,11 @@ export function ValuesViewer({
             )}
           </div>
         </div>
+        {isHistoricalRevision && (
+          <div className="mb-3 rounded border border-theme-border bg-theme-elevated/40 px-3 py-2 text-xs text-theme-text-secondary">
+            Viewing historical values. Switch back to the latest revision before editing or applying changes.
+          </div>
+        )}
         <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
           <Settings className="w-8 h-8 text-theme-text-disabled" />
           <span>{showAllValues ? 'No computed values' : 'No user-supplied values'}</span>
@@ -179,6 +200,9 @@ export function ValuesViewer({
           <span className="text-sm font-medium text-theme-text-secondary">
             {isEditing ? 'Editing Values' : showAllValues ? 'All Values (Computed)' : 'User-Supplied Values'}
           </span>
+          {isHistoricalRevision && !isEditing && (
+            <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">revision {revision}</span>
+          )}
           {isEditing && (
             <span className="badge-sm bg-amber-500/20 text-amber-400 border-amber-500/30">
               unsaved
@@ -218,7 +242,7 @@ export function ValuesViewer({
               </button>
               <button
                 onClick={handlePreview}
-                disabled={!!yamlError || previewMutation.isPending}
+                disabled={!!yamlError || previewMutation.isPending || isHistoricalRevision}
                 className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded border border-theme-border disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {previewMutation.isPending ? (
@@ -231,7 +255,7 @@ export function ValuesViewer({
               <Tooltip content={!canHelmWrite ? helmActReason : ''}>
               <button
                 onClick={handleApply}
-                disabled={!!yamlError || applyMutation.isPending || !canHelmWrite}
+                disabled={!!yamlError || applyMutation.isPending || !canHelmWrite || isHistoricalRevision}
                 className="flex items-center gap-1 px-2.5 py-1 text-xs btn-brand rounded disabled:cursor-not-allowed disabled:pointer-events-none"
               >
                 {applyMutation.isPending ? (
@@ -247,6 +271,12 @@ export function ValuesViewer({
         </div>
       </div>
 
+      {isHistoricalRevision && (
+        <div className="mb-3 rounded border border-theme-border bg-theme-elevated/40 px-3 py-2 text-xs text-theme-text-secondary">
+          Viewing historical values. Switch back to the latest revision before editing or applying changes.
+        </div>
+      )}
+
       {/* Error message */}
       {yamlError && (
         <div className="mb-3 px-3 py-2 text-xs text-red-400 bg-red-500/10 border border-red-500/30 rounded">

package/src/components/home/ClusterHealthCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import type { DashboardResponse, DashboardMetrics, DashboardCRDCount } from '../../api/client'
 import { HealthRing } from './HealthRing'
 import {
@@ -30,6 +30,9 @@ interface ClusterHealthCardProps {
   onNavigateToView: () => void
   onWarningEventsClick?: () => void
   onIssuesClick?: () => void
+  // Freshness/refresh control for the dashboard poll — rendered under the
+  // cluster metadata so the overview carries a freshness signal without a band.
+  freshness?: ReactNode
 }
 
 function getMetricsInstallHint(platform: string): string {
@@ -121,6 +124,7 @@ export function ClusterHealthCard({
   onNavigateToView,
   onWarningEventsClick,
   onIssuesClick,
+  freshness,
 }: ClusterHealthCardProps) {
   void _topCRDs // Reserved for future CRD display
 
@@ -254,6 +258,7 @@ export function ClusterHealthCard({
                 </Tooltip>
               )}
             </div>
+            {freshness && <div className="mt-2">{freshness}</div>}
             {nodeVersionSkew && (
               <Tooltip
                 content={