@skyhook-io/radar-app 1.7.0 → 1.8.1

package/src/components/compare/useCompareLauncher.tsx

@@ -31,15 +31,18 @@ export function useCompareLauncher({ kind, namespace, name, group }: UseCompareL
   const [open, setOpen] = useState(false)
   const kindLower = kind.toLowerCase()
   const { candidates, isPending, error } = useCompareCandidates(kindLower, group, open)
-  const { crossClusterCompareHref } = useNavCustomization()
+  const { crossClusterCompareHref, onHostNavigate } = useNavCustomization()
 
   const onCompareTo = useCallback(() => setOpen(true), [])
 
   const onCompareAcrossClusters = useCallback(() => {
     if (!crossClusterCompareHref) return
     const href = crossClusterCompareHref({ kind: kindLower, namespace, name, group })
-    window.location.assign(href)
-  }, [crossClusterCompareHref, kindLower, namespace, name, group])
+    // Smooth same-document hand-off when the host supports it (Radar Cloud's
+    // cross-tree swap), else a hard nav — same contract as App.tsx's goHost.
+    if (onHostNavigate) onHostNavigate(href)
+    else window.location.assign(href)
+  }, [crossClusterCompareHref, onHostNavigate, kindLower, namespace, name, group])
 
   const handlePick = useCallback(
     (picked: CompareResourceRef) => {

package/src/components/cost/CostTrendChart.tsx

@@ -34,7 +34,7 @@ export function CostTrendChart() {
       <div className="rounded-lg border border-theme-border bg-theme-surface/50 p-4">
         <div className="flex items-center justify-center h-[200px] text-theme-text-tertiary">
           <Loader2 className="w-5 h-5 animate-spin mr-2" />
-          Loading cost trend...
+          Loading cost trend…
         </div>
       </div>
     )
@@ -164,7 +164,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
     })
 
     return { timestamps, stacked, minTs, maxTs, yMax, seriesLookups, toX, toY, yTicks, xTicks, paths }
-  }, [series])
+  }, [series, plotHeight, plotWidth])
 
   // Hover data — depends on hoverX + chartData, must be a separate hook (called unconditionally)
   const hoverData = useMemo(() => {
@@ -193,7 +193,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
     })
 
     return { ts: closestTs, x: toX(closestTs), total, points }
-  }, [hoverX, chartData, series])
+  }, [hoverX, chartData, series, plotWidth])
 
   const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
     const svg = svgRef.current

package/src/components/cost/CostView.tsx

@@ -4,6 +4,7 @@ import type { OpenCostNamespaceCost, OpenCostWorkloadCost, OpenCostNodeCost } fr
 import { ArrowLeft, ChevronDown, ChevronRight, DollarSign, HelpCircle, Loader2, Server, X } from 'lucide-react'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { CostTrendChart } from './CostTrendChart'
+import { Tooltip } from '../ui/Tooltip'
 
 interface CostViewProps {
   onBack: () => void
@@ -177,8 +178,12 @@ export function CostView({ onBack }: CostViewProps) {
           <div className="grid grid-cols-[minmax(180px,1fr)_90px_90px_80px_minmax(160px,1fr)_120px] gap-2 px-4 py-2 border-b border-theme-border text-[11px] font-medium text-theme-text-tertiary uppercase tracking-wider">
             <span>Namespace</span>
             <span className="text-right">Hourly</span>
-            <span className="text-right cursor-help" title="Projected from current hourly rate — not historical spend">Monthly*</span>
-            <span className="text-right cursor-help" title="% of reserved resources actually being used, weighted by cost">Efficiency</span>
+            <Tooltip content="Projected from current hourly rate — not historical spend" wrapperClassName="!block text-right">
+            <span className="cursor-help">Monthly*</span>
+            </Tooltip>
+            <Tooltip content="% of reserved resources actually being used, weighted by cost" wrapperClassName="!block text-right">
+            <span className="cursor-help">Efficiency</span>
+            </Tooltip>
             <span>CPU / Memory</span>
             <span className="text-right">Cost Split</span>
           </div>
@@ -277,7 +282,7 @@ function WorkloadRows({ namespace }: { namespace: string }) {
     return (
       <div className="px-4 py-3 flex items-center gap-2 text-xs text-theme-text-tertiary bg-theme-elevated/30">
         <Loader2 className="w-3.5 h-3.5 animate-spin" />
-        Loading workloads...
+        Loading workloads…
       </div>
     )
   }
@@ -368,7 +373,9 @@ function NodeCostTable({ nodes }: { nodes: OpenCostNodeCost[] }) {
         <span>Node</span>
         <span>Instance Type</span>
         <span className="text-right">Hourly</span>
-        <span className="text-right cursor-help" title="Projected from current hourly rate — not historical spend">Monthly*</span>
+        <Tooltip content="Projected from current hourly rate — not historical spend" wrapperClassName="!block text-right">
+        <span className="cursor-help">Monthly*</span>
+        </Tooltip>
         <span className="text-right">CPU / Memory</span>
       </div>
 
@@ -387,9 +394,11 @@ function NodeCostRow({ node }: { node: OpenCostNodeCost }) {
 
   return (
     <div className="grid grid-cols-[minmax(200px,1fr)_minmax(120px,1fr)_90px_100px_140px] gap-2 px-4 py-2.5">
-      <span className="text-sm text-theme-text-primary truncate font-medium" title={node.name}>
+      <Tooltip content={node.name} wrapperClassName="!block min-w-0">
+      <span className="text-sm text-theme-text-primary truncate font-medium block">
         {node.name}
       </span>
+      </Tooltip>
       <span className="text-xs text-theme-text-secondary truncate">
         {node.instanceType || '-'}
         {node.region && <span className="text-theme-text-quaternary ml-1.5">({node.region})</span>}

package/src/components/helm/ChartBrowser.tsx

@@ -190,7 +190,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 </button>
                 <div className="border-t border-theme-border my-1" />
                 {reposLoading ? (
-                  <div className="px-3 py-2 text-sm text-theme-text-tertiary">Loading...</div>
+                  <div className="px-3 py-2 text-sm text-theme-text-tertiary">Loading…</div>
                 ) : repositories?.length === 0 ? (
                   <div className="px-3 py-2 text-sm text-theme-text-tertiary">No repositories configured</div>
                 ) : (
@@ -316,15 +316,16 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 ) : (
                   <div className="text-sm mt-1 flex flex-col items-center gap-2">
                     <p>Your repositories may be out of date.</p>
+                    <Tooltip content={canHelmWrite ? 'Run helm repo update on every configured repository' : helmWriteReason}>
                     <button
                       onClick={handleUpdateAllRepos}
                       disabled={isBatchUpdating || !canHelmWrite}
-                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs btn-brand rounded disabled:opacity-50"
-                      title={canHelmWrite ? 'Run helm repo update on every configured repository' : helmWriteReason}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs btn-brand rounded disabled:opacity-50 disabled:pointer-events-none"
                     >
                       <RefreshCw className={`w-3.5 h-3.5 ${isBatchUpdating ? 'animate-spin' : ''}`} />
                       {isBatchUpdating ? 'Updating…' : 'Update all repositories'}
                     </button>
+                    </Tooltip>
                     <button
                       onClick={() => setChartSource('artifacthub')}
                       className="text-xs text-blue-400 hover:underline"
@@ -436,14 +437,15 @@ function RepoDropdownItem({ repo, isSelected, onSelect, onUpdate, isUpdating, ca
           </span>
         )}
       </button>
+      <Tooltip content={canUpdate ? "Update repository" : (cantUpdateReason ?? "Helm write permissions required")}>
       <button
         onClick={(e) => { e.stopPropagation(); onUpdate() }}
         disabled={isUpdating || !canUpdate}
-        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-50"
-        title={canUpdate ? "Update repository" : (cantUpdateReason ?? "Helm write permissions required")}
+        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-50 disabled:pointer-events-none"
       >
         <RefreshCw className={clsx('w-3.5 h-3.5', isUpdating && 'animate-spin')} />
       </button>
+      </Tooltip>
     </div>
   )
 }

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -10,6 +10,7 @@ import { clsx } from 'clsx'
 import { useHelmRelease, useHelmManifest, useHelmValues, useHelmManifestDiff, useHelmUpgradeInfo, useHelmUninstall, upgradeWithProgress, rollbackWithProgress } from '../../api/client'
 import { useQueryClient } from '@tanstack/react-query'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
+import { Tooltip } from '../ui/Tooltip'
 import { Markdown } from '../ui/Markdown'
 import type { SelectedHelmRelease, HelmHook, ChartDependency } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
@@ -334,63 +335,72 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                 checking...
               </span>
             ) : upgradeError ? (
+              <Tooltip content={upgradeErrorMessage ?? ''}>
               <span
                 className="badge bg-theme-hover/50 text-theme-text-secondary"
-                title={upgradeErrorMessage}
               >
                 upgrade check failed
               </span>
+              </Tooltip>
             ) : upgradeInfo?.updateAvailable ? (
+              <Tooltip content={canHelmWrite ? `Click to upgrade: ${upgradeInfo.currentVersion} → ${upgradeInfo.latestVersion}${upgradeInfo.repositoryName ? ` (${upgradeInfo.repositoryName})` : ''}` : helmActReason}>
               <button
                 onClick={() => setShowUpgradeConfirm(true)}
                 disabled={!canHelmWrite}
                 className={clsx(
-                  'badge transition-colors', SEVERITY_BADGE.warning,
+                  'badge transition-colors disabled:pointer-events-none', SEVERITY_BADGE.warning,
                   canHelmWrite ? 'hover:bg-amber-500/30 cursor-pointer' : 'opacity-50 cursor-not-allowed'
                 )}
-                title={canHelmWrite ? `Click to upgrade: ${upgradeInfo.currentVersion} → ${upgradeInfo.latestVersion}${upgradeInfo.repositoryName ? ` (${upgradeInfo.repositoryName})` : ''}` : helmActReason}
               >
                 <ArrowUpCircle className="w-3 h-3" />
                 {upgradeInfo.latestVersion}
               </button>
+              </Tooltip>
             ) : upgradeInfo && !upgradeInfo.error ? (
-              <span className={clsx('badge', SEVERITY_BADGE.success)} title="Chart is up to date">
+              <Tooltip content="Chart is up to date">
+              <span className={clsx('badge', SEVERITY_BADGE.success)}>
                 latest
               </span>
+              </Tooltip>
             ) : upgradeInfo?.error ? (
+              <Tooltip content={upgradeInfo.error}>
               <span
                 className="badge bg-theme-hover/50 text-theme-text-secondary"
-                title={upgradeInfo.error}
               >
                 upstream unknown
               </span>
+              </Tooltip>
             ) : null}
           </div>
           <div className="flex items-center gap-1">
+            <Tooltip content="Refresh">
             <button
               onClick={refetch}
               disabled={isRefreshAnimating}
-              className="p-1.5 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
-              title="Refresh"
+              className="p-1.5 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50 disabled:pointer-events-none"
             >
               <RefreshCw className={clsx('w-4 h-4', isRefreshAnimating && 'animate-spin')} />
             </button>
+            </Tooltip>
+            <Tooltip content={canHelmWrite ? 'Uninstall release' : helmActReason}>
             <button
               onClick={() => setShowUninstallConfirm(true)}
               disabled={!canHelmWrite}
               className={clsx(
-                'p-1.5 rounded',
+                'p-1.5 rounded disabled:pointer-events-none',
                 canHelmWrite
                   ? 'text-theme-text-secondary hover:text-red-400 hover:bg-red-500/10'
                   : 'text-theme-text-disabled cursor-not-allowed'
               )}
-              title={canHelmWrite ? 'Uninstall release' : helmActReason}
             >
               <Trash2 className="w-4 h-4" />
             </button>
-            <button onClick={onClose} className="p-1.5 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded" title="Close (Esc)">
+            </Tooltip>
+            <Tooltip content="Close (Esc)">
+            <button onClick={onClose} className="p-1.5 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded">
               <X className="w-4 h-4" />
             </button>
+            </Tooltip>
           </div>
         </div>
 
@@ -399,28 +409,30 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
           <div className="flex items-center gap-2">
             <Package className="w-5 h-5 text-purple-400" />
             <h2 className="text-lg font-semibold text-theme-text-primary truncate">{release.name}</h2>
+            <Tooltip content="Copy name" wrapperClassName="shrink-0">
             <button
               onClick={() => copyToClipboard(release.name, 'name')}
               className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
-              title="Copy name"
             >
               {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
             </button>
+            </Tooltip>
           </div>
           <p className="text-sm text-theme-text-tertiary">{release.namespace}</p>
           {releaseDetail?.managedByFluxHelmRelease && (
+            <Tooltip content={`Installed by Flux helm-controller via HelmRelease ${releaseDetail.managedByFluxHelmRelease}. Changes here would be reverted at the next reconcile.`} wrapperClassName="mt-1">
             <button
               type="button"
               onClick={() => {
                 const [ns, name] = releaseDetail.managedByFluxHelmRelease!.split('/')
                 navigate(`/gitops/detail/helmreleases/${encodeURIComponent(ns || '_')}/${encodeURIComponent(name)}`)
               }}
-              className="mt-1 inline-flex items-center gap-1 rounded border border-amber-500/40 bg-amber-500/10 px-1.5 py-0.5 text-[11px] text-amber-700 dark:text-amber-400 hover:bg-amber-500/20 transition-colors"
-              title={`Installed by Flux helm-controller via HelmRelease ${releaseDetail.managedByFluxHelmRelease}. Changes here would be reverted at the next reconcile.`}
+              className="inline-flex items-center gap-1 rounded border border-amber-500/40 bg-amber-500/10 px-1.5 py-0.5 text-[11px] text-amber-700 dark:text-amber-400 hover:bg-amber-500/20 transition-colors"
             >
               <GitBranch className="w-3 h-3" />
               Managed by Flux · {releaseDetail.managedByFluxHelmRelease}
             </button>
+            </Tooltip>
           )}
         </div>
 

package/src/components/helm/HelmView.tsx

@@ -226,14 +226,15 @@ 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"
-                title="Refresh"
+                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 */}

package/src/components/helm/InstallWizard.tsx

@@ -191,7 +191,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
     } finally {
       setIsInstalling(false)
     }
-  }, [releaseName, namespace, chartName, version, repo, valuesYaml, createNamespace, onSuccess, isLocal, artifactHubDetail, queryClient])
+  }, [releaseName, namespace, chartName, version, repo, repoUrl, valuesYaml, createNamespace, onSuccess, isLocal, artifactHubDetail, queryClient])
 
   // Validate release name + namespace before letting the user
   // advance. Without this, a name like "Invalid Name With Spaces!"
@@ -411,11 +411,11 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   Cancel
                 </button>
                 {step === 'review' ? (
+                  <Tooltip content={!canHelmWrite ? helmActReason : ''}>
                   <button
                     onClick={handleInstall}
                     disabled={!canInstall || isInstalling || !canHelmWrite}
-                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium btn-brand rounded-lg disabled:cursor-not-allowed"
-                    title={!canHelmWrite ? helmActReason : undefined}
+                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium btn-brand rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none"
                   >
                     {isInstalling ? (
                       <Loader2 className="w-4 h-4 animate-spin" />
@@ -424,6 +424,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                     )}
                     Install
                   </button>
+                  </Tooltip>
                 ) : (
                   <button
                     onClick={() => setStep(step === 'info' ? 'values' : 'review')}

package/src/components/helm/OwnedResources.tsx

@@ -13,6 +13,7 @@ import { useAvailablePorts } from '../../api/client'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { useNamespacedCapabilities } from '../../contexts/CapabilitiesContext'
 import { pluralize } from '@skyhook-io/k8s-ui'
+import { Tooltip } from '../ui/Tooltip'
 
 interface OwnedResourcesProps {
   resources: HelmOwnedResource[]
@@ -103,13 +104,14 @@ export function OwnedResources({ resources, onNavigate }: OwnedResourcesProps) {
           ) : (
             <span className="flex items-center gap-2">
               Showing {filteredResources.length} of {resources.length} resources
+              <Tooltip content="Clear filter">
               <button
                 onClick={() => setHealthFilter('all')}
                 className="p-0.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-                title="Clear filter"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
+              </Tooltip>
             </span>
           )}
         </div>
@@ -255,39 +257,44 @@ function ResourceItem({ resource, onNavigate }: ResourceItemProps) {
 
         {/* Status badge */}
         {resource.status && (
+          <Tooltip content={resource.message || resource.status}>
           <span
             className={clsx('badge-sm', getResourceStatusColor(resource.status || ''))}
-            title={resource.message || resource.status}
           >
             {resource.status}
           </span>
+          </Tooltip>
         )}
 
         {/* Issue summary (e.g., "OOMKilled", "CrashLoopBackOff") */}
         {resource.issue && (
+          <Tooltip content={resource.summary || resource.issue}>
           <span
             className="text-xs text-red-400"
-            title={resource.summary || resource.issue}
           >
             {resource.issue}
           </span>
+          </Tooltip>
         )}
 
         {/* Error icon with message tooltip */}
         {isError && resource.message && !resource.issue && (
-          <span title={resource.message}>
+          <Tooltip content={resource.message}>
+          <span>
             <AlertCircle className="w-3.5 h-3.5 text-red-400" />
           </span>
+          </Tooltip>
         )}
 
         {canNavigate && (
+          <Tooltip content="View details">
           <button
             onClick={handleClick}
             className="p-1 text-theme-text-tertiary opacity-0 group-hover:opacity-100 hover:text-theme-text-primary hover:bg-theme-elevated rounded transition-all"
-            title="View details"
           >
             <ExternalLink className="w-3.5 h-3.5" />
           </button>
+          </Tooltip>
         )}
       </div>
     </div>
@@ -383,35 +390,37 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
 
       {/* Terminal */}
       {isRunning && canExec && (
+        <Tooltip content="Open terminal">
         <button
           onClick={(e) => { e.stopPropagation(); handleOpenTerminal() }}
           disabled={isLoadingAction}
-          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50"
-          title="Open terminal"
+          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"
         >
           <Terminal className="w-3.5 h-3.5" />
         </button>
+        </Tooltip>
       )}
 
       {/* Logs */}
       {canViewLogs && (
+        <Tooltip content="View logs">
         <button
           onClick={(e) => { e.stopPropagation(); handleOpenLogs() }}
           disabled={isLoadingAction}
-          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50"
-          title="View logs"
+          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"
         >
           <FileText className="w-3.5 h-3.5" />
         </button>
+        </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"
-          title={`Port forward :${ports[0].port}`}
+          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" />
@@ -419,6 +428,7 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
             <Plug className="w-3.5 h-3.5" />
           )}
         </button>
+        </Tooltip>
       )}
     </div>
   )
@@ -449,11 +459,11 @@ function ServiceQuickActions({ namespace, serviceName }: ServiceQuickActionsProp
 
   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"
-        title={`Port forward :${ports[0].port}`}
+        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" />
@@ -461,6 +471,7 @@ function ServiceQuickActions({ namespace, serviceName }: ServiceQuickActionsProp
           <Plug className="w-3.5 h-3.5" />
         )}
       </button>
+      </Tooltip>
     </div>
   )
 }

package/src/components/helm/RevisionHistory.tsx

@@ -4,6 +4,7 @@ import { clsx } from 'clsx'
 import type { HelmRevision } from '../../types'
 import { getStatusColor, formatDate, formatAge } from './helm-utils'
 import { SEVERITY_BADGE } from '../../utils/badge-colors'
+import { Tooltip } from '../ui/Tooltip'
 
 interface RevisionHistoryProps {
   history: HelmRevision[]
@@ -108,7 +109,7 @@ export function RevisionHistory({ history, currentRevision, onViewRevision, onCo
                   </div>
 
                   <div className="flex items-center gap-4 mt-1 text-xs text-theme-text-tertiary">
-                    <span title={revision.updated}>{formatDate(revision.updated)}</span>
+                    <Tooltip content={revision.updated}><span>{formatDate(revision.updated)}</span></Tooltip>
                     <span>{formatAge(revision.updated)} ago</span>
                   </div>
 

package/src/components/helm/ValuesViewer.tsx

@@ -9,6 +9,7 @@ import { YamlEditor } from '../ui/YamlEditor'
 import { useHelmPreviewValues, useHelmApplyValues } from '../../api/client'
 import { useCanHelmAct } from '../../api/client'
 import { ValuesDiffPreview } from './ValuesDiffPreview'
+import { Tooltip } from '../ui/Tooltip'
 
 interface ValuesViewerProps {
   values?: HelmValues
@@ -227,11 +228,11 @@ export function ValuesViewer({
                 )}
                 Preview
               </button>
+              <Tooltip content={!canHelmWrite ? helmActReason : ''}>
               <button
                 onClick={handleApply}
                 disabled={!!yamlError || applyMutation.isPending || !canHelmWrite}
-                className="flex items-center gap-1 px-2.5 py-1 text-xs btn-brand rounded disabled:cursor-not-allowed"
-                title={!canHelmWrite ? helmActReason : undefined}
+                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 ? (
                   <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -240,6 +241,7 @@ export function ValuesViewer({
                 )}
                 Apply
               </button>
+              </Tooltip>
             </>
           )}
         </div>

package/src/components/home/ActivitySummary.tsx

@@ -82,6 +82,9 @@ export function ActivitySummary({ namespaces, topology, onNavigate }: ActivitySu
     limit: 1000,
   })
 
+  // Intentionally re-sample 'now' only when events refresh (not every render),
+  // so the timeline window stays stable between data updates.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const now = useMemo(() => Date.now(), [events])
   const spanMs = SPAN_MINUTES * 60 * 1000
   const startTime = now - spanMs
@@ -125,7 +128,7 @@ export function ActivitySummary({ namespaces, topology, onNavigate }: ActivitySu
       <div className="flex-1 min-h-0 overflow-hidden px-4 py-1.5">
         {isLoading ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">
-            Loading...
+            Loading…
           </div>
         ) : error ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">

package/src/components/home/ClusterHealthCard.tsx

@@ -219,24 +219,24 @@ export function ClusterHealthCard({
                 its top bar; rendering it again here is redundant and
                 makes the card feel like a label rather than content. */}
             {!isCloud && (
-              <h2
-                className="text-xl font-semibold text-theme-text-primary truncate mb-1.5 leading-tight"
-                // In-cluster mode's cluster.name is the literal "in-cluster"
-                // sentinel, which would leak via the browser hover tooltip
-                // even though the visible text falls back to the platform
-                // label. Drop the title attribute entirely in that case;
-                // local mode keeps it so users can hover to see the full
-                // kubeconfig context path.
-                title={isInCluster ? undefined : cluster.name}
-              >
+              // In-cluster mode's cluster.name is the literal "in-cluster"
+              // sentinel, which would leak via the hover tooltip even though
+              // the visible text falls back to the platform label. Render no
+              // tooltip in that case; local mode keeps it so users can hover
+              // to see the full kubeconfig context path.
+              <Tooltip content={isInCluster ? '' : cluster.name} wrapperClassName="!block min-w-0">
+              <h2 className="text-xl font-semibold text-theme-text-primary truncate leading-tight mb-1.5">
                 {headlineName}
               </h2>
+              </Tooltip>
             )}
             <div className="flex flex-col gap-0.5 text-xs text-theme-text-tertiary">
               {(parsedContext.account || parsedContext.region) && (
-                <span className="truncate font-mono" title={[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')}>
+                <Tooltip content={[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')} wrapperClassName="min-w-0">
+                <span className="truncate font-mono">
                   {[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')}
                 </span>
+                </Tooltip>
               )}
               {cluster.version && (
                 <span>Kubernetes {cluster.version}</span>
@@ -247,12 +247,11 @@ export function ClusterHealthCard({
                   (in-cluster has no meaningful context name, cloud
                   shell already renders the canonical name). */}
               {cluster.name && cluster.name !== headlineName && deployment.mode === 'local' && (
-                <span
-                  className="font-mono text-[10px] text-theme-text-disabled break-all leading-snug pt-0.5"
-                  title={cluster.name}
-                >
+                <Tooltip content={cluster.name}>
+                <span className="font-mono text-[10px] text-theme-text-disabled break-all leading-snug pt-0.5">
                   {cluster.name}
                 </span>
+                </Tooltip>
               )}
             </div>
             {nodeVersionSkew && (
@@ -290,9 +289,11 @@ export function ClusterHealthCard({
                 <Radio className="w-3.5 h-3.5 text-purple-400 animate-pulse shrink-0" />
                 <div className="flex flex-col gap-0.5 min-w-0 flex-1 text-left">
                   <span className="text-xs font-medium text-purple-400">MCP Server Live</span>
-                  <span className="text-[10px] text-theme-text-tertiary truncate font-mono" title={mcpUrl}>
+                  <Tooltip content={mcpUrl} wrapperClassName="min-w-0">
+                  <span className="text-[10px] text-theme-text-tertiary truncate font-mono">
                     HTTP · {mcpUrl}
                   </span>
+                  </Tooltip>
                 </div>
                 <Info className="w-3.5 h-3.5 text-purple-400/60 shrink-0" />
               </button>
@@ -443,24 +444,26 @@ export function ClusterHealthCard({
         {/* Left column: Warning indicators (aligned with cluster info) */}
         <div className="flex flex-col justify-center gap-1 w-1/4 shrink-0 pr-4 border-r border-theme-border/50">
           {health.warningEvents > 0 && (
+            <Tooltip content="Native Kubernetes Warning events (e.g., ImagePullBackOff, FailedScheduling)" wrapperClassName="w-fit">
             <button
               onClick={onWarningEventsClick}
-              title="Native Kubernetes Warning events (e.g., ImagePullBackOff, FailedScheduling)"
               className="badge status-degraded w-fit gap-1.5 hover:opacity-80 transition-opacity"
             >
               <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
               <span><span className="font-mono">{health.warningEvents}</span> Warning Events</span>
             </button>
+            </Tooltip>
           )}
           {issueCount > 0 && (
+            <Tooltip content="View grouped live operational issues" wrapperClassName="w-fit">
             <button
               onClick={onIssuesClick}
-              title="View grouped live operational issues"
               className={clsx('badge w-fit gap-1.5 hover:opacity-80 transition-opacity', hasCriticalIssues ? 'status-unhealthy' : 'status-degraded')}
             >
               <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
               <span>{pluralize(issueCount, 'Active Issue')}</span>
             </button>
+            </Tooltip>
           )}
         </div>