@skyhook-io/radar-app 1.7.0 → 1.8.1

package/src/components/traffic/TrafficFilterSidebar.tsx

@@ -1,5 +1,4 @@
-import { memo, useState, useRef } from 'react'
-import { createPortal } from 'react-dom'
+import { memo, useState } from 'react'
 import {
   ChevronDown,
   Eye,
@@ -16,43 +15,7 @@ import { clsx } from 'clsx'
 import { SEVERITY_BADGE } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import type { AddonMode } from './TrafficView'
 import { getNamespaceColor } from '../../utils/traffic-colors'
-
-// Fast tooltip component using portal to escape overflow
-function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
-  const [show, setShow] = useState(false)
-  const [pos, setPos] = useState({ x: 0, y: 0 })
-  const ref = useRef<HTMLDivElement>(null)
-
-  const handleMouseEnter = () => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect()
-      setPos({ x: rect.right + 8, y: rect.top + rect.height / 2 })
-    }
-    setShow(true)
-  }
-
-  return (
-    <div
-      ref={ref}
-      className="inline-flex"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={() => setShow(false)}
-    >
-      {children}
-      {show && createPortal(
-        <div
-          className="fixed z-[9999] pointer-events-none"
-          style={{ left: pos.x, top: pos.y, transform: 'translateY(-50%)' }}
-        >
-          <div className="bg-gray-900 text-white text-[10px] px-2 py-1.5 rounded shadow-lg max-w-[180px] leading-tight whitespace-normal">
-            {content}
-          </div>
-        </div>,
-        document.body
-      )}
-    </div>
-  )
-}
+import { Tooltip } from '../ui/Tooltip'
 
 // Connection threshold options
 const CONNECTION_THRESHOLDS = [
@@ -152,7 +115,7 @@ function ToggleOption({
           {label}
         </span>
       </button>
-      <Tooltip content={description}>
+      <Tooltip content={description} position="right">
         <Info className="w-3 h-3 text-theme-text-tertiary hover:text-theme-text-secondary cursor-help" />
       </Tooltip>
       <button
@@ -225,29 +188,31 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
         <div className="px-3 py-2 border-b border-theme-border space-y-1.5">
           <div className="flex items-center gap-2">
             <Clock className="w-3.5 h-3.5 text-theme-text-tertiary" />
+            <Tooltip content="Show traffic from the selected time window" wrapperClassName="!flex flex-1">
             <select
               value={timeRange}
               onChange={(e) => setTimeRange(e.target.value)}
-              title="Show traffic from the selected time window"
               className="flex-1 bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border focus:outline-none focus:ring-1 focus:ring-blue-500"
             >
               {TIME_RANGES.map(({ value, label }) => (
                 <option key={value} value={value}>{label}</option>
               ))}
             </select>
+            </Tooltip>
           </div>
           <div className="flex items-center gap-2">
             <Filter className="w-3.5 h-3.5 text-theme-text-tertiary" />
+            <Tooltip content="Hide low-traffic flows to reduce noise" wrapperClassName="!flex flex-1">
             <select
               value={minConnections}
               onChange={(e) => setMinConnections(Number(e.target.value))}
-              title="Hide low-traffic flows to reduce noise"
               className="flex-1 bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border focus:outline-none focus:ring-1 focus:ring-blue-500"
             >
               {CONNECTION_THRESHOLDS.map(({ value, label }) => (
                 <option key={value} value={value}>{label}</option>
               ))}
             </select>
+            </Tooltip>
           </div>
         </div>
 
@@ -279,7 +244,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
             <div className="flex items-center gap-2 mb-1.5">
               <Puzzle className="w-3.5 h-3.5 text-theme-text-tertiary" />
               <span className="text-xs text-theme-text-primary">Cluster Addons</span>
-              <Tooltip content="Monitoring, logging, cert-manager, etc. Excludes ingress controllers and service mesh.">
+              <Tooltip content="Monitoring, logging, cert-manager, etc. Excludes ingress controllers and service mesh." position="right">
                 <Info className="w-3 h-3 text-theme-text-tertiary hover:text-theme-text-secondary cursor-help" />
               </Tooltip>
             </div>

package/src/components/traffic/TrafficFlowList.tsx

@@ -8,6 +8,7 @@ import { pluralize } from '@skyhook-io/k8s-ui'
 import { useFlowSearch } from './TrafficFlowListContext'
 import { useQuery } from '@tanstack/react-query'
 import { fetchJSON } from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
 
 // DNS response code names
 const DNS_RCODES: Record<number, string> = {
@@ -174,28 +175,36 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                   <span className="text-theme-text-tertiary tabular-nums whitespace-nowrap">{time}</span>
 
                   {/* Source */}
-                  <span className="truncate text-theme-text-primary" title={flow.source.namespace ? `${flow.source.namespace}/${flow.source.name}` : flow.source.name}>
+                  <Tooltip content={flow.source.namespace ? `${flow.source.namespace}/${flow.source.name}` : flow.source.name} wrapperClassName="min-w-0">
+                  <span className="truncate text-theme-text-primary">
                     {flow.source.name}
                   </span>
+                  </Tooltip>
 
                   {/* Destination */}
-                  <span className="truncate text-theme-text-primary" title={flow.destination.namespace ? `${flow.destination.namespace}/${flow.destination.name}` : flow.destination.name}>
+                  <Tooltip content={flow.destination.namespace ? `${flow.destination.namespace}/${flow.destination.name}` : flow.destination.name} wrapperClassName="min-w-0">
+                  <span className="truncate text-theme-text-primary">
                     {flow.destination.name}
                   </span>
+                  </Tooltip>
 
                   {/* Request info */}
                   <div className="flex items-center gap-1.5 min-w-0">
                     {isHTTP && (
                       <>
                         <span className={clsx('shrink-0 badge badge-sm text-[10px]', SEVERITY_BADGE.info)}>{flow.httpMethod}</span>
-                        <span className="truncate text-theme-text-secondary" title={flow.httpPath}>{flow.httpPath}</span>
+                        <Tooltip content={flow.httpPath ?? ''} wrapperClassName="min-w-0">
+                        <span className="truncate text-theme-text-secondary">{flow.httpPath}</span>
+                        </Tooltip>
                         {flow.l7Type === 'REQUEST' && <span className={clsx('shrink-0 text-[9px]', SEVERITY_TEXT.warning)}>no response</span>}
                       </>
                     )}
                     {isDNS && (
                       <>
                         <span className={clsx('shrink-0 badge badge-sm text-[10px]', SEVERITY_BADGE.neutral)}>DNS</span>
-                        <span className="truncate text-theme-text-secondary" title={flow.dnsQuery}>{flow.dnsQuery}</span>
+                        <Tooltip content={flow.dnsQuery ?? ''} wrapperClassName="min-w-0">
+                        <span className="truncate text-theme-text-secondary">{flow.dnsQuery}</span>
+                        </Tooltip>
                       </>
                     )}
                     {!isHTTP && !isDNS && (

package/src/components/traffic/TrafficGraph.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState, useCallback, useRef } from 'react'
+import { useMemo, useEffect, useState, useCallback, useRef, type MutableRefObject } from 'react'
 import {
   ReactFlow,
   Background,
@@ -22,6 +22,7 @@ import { X, ArrowRight, Globe, Server, Activity, Puzzle } from 'lucide-react'
 import { isClusterAddon, type AddonMode } from './TrafficView'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { getNamespaceColor } from '../../utils/traffic-colors'
+import { Tooltip } from '../ui/Tooltip'
 
 const elk = new ELK()
 
@@ -845,7 +846,9 @@ function DetailsPanel({
                     {edgeData.flow.topHTTPPaths.map((p, i) => (
                       <div key={i} className="flex items-center gap-1.5 text-[10px]">
                         <span className={clsx('shrink-0 px-1 py-0.5 rounded badge font-medium', SEVERITY_BADGE.info)}>{p.method}</span>
-                        <span className="text-theme-text-primary truncate flex-1" title={p.path}>{p.path || '/'}</span>
+                        <Tooltip content={p.path} wrapperClassName="min-w-0 flex-1">
+                        <span className="text-theme-text-primary truncate flex-1">{p.path || '/'}</span>
+                        </Tooltip>
                         <span className="shrink-0 text-theme-text-secondary">{p.count}</span>
                         {p.avgMs ? <span className="shrink-0 text-theme-text-tertiary">{formatLatency(p.avgMs)}</span> : null}
                         {p.errorPct ? <span className={clsx('shrink-0', p.errorPct > 10 ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)}>{p.errorPct.toFixed(0)}%err</span> : null}
@@ -862,7 +865,9 @@ function DetailsPanel({
                   <div className="space-y-1 max-h-40 overflow-y-auto">
                     {edgeData.flow.topDNSQueries.map((q, i) => (
                       <div key={i} className="flex items-center gap-1.5 text-[10px]">
-                        <span className="text-theme-text-primary truncate flex-1" title={q.query}>{q.query}</span>
+                        <Tooltip content={q.query} wrapperClassName="min-w-0 flex-1">
+                        <span className="text-theme-text-primary truncate flex-1">{q.query}</span>
+                        </Tooltip>
                         <span className="shrink-0 text-theme-text-secondary">{q.count}</span>
                         {q.nxCount ? <span className={clsx('shrink-0', SEVERITY_TEXT.warning)}>NX:{q.nxCount}</span> : null}
                         {q.avgTTL ? <span className="shrink-0 text-theme-text-tertiary">TTL:{q.avgTTL}s</span> : null}
@@ -966,6 +971,33 @@ const nodeTypes = {
   addonGroup: AddonGroupNode,
 }
 
+// Fits the view once nodes have been laid out. Module-scope (not defined inside
+// TrafficGraph's render) so it keeps a stable identity — otherwise it remounts
+// every render and its effect churns. Must render inside <ReactFlow> for the
+// useReactFlow() context; the trigger state is passed in as props.
+function FitViewOnChange({
+  shouldFitViewRef,
+  layoutedNodes,
+}: {
+  shouldFitViewRef: MutableRefObject<boolean>
+  layoutedNodes: Node<TrafficNodeData>[]
+}) {
+  const { fitView } = useReactFlow()
+
+  useEffect(() => {
+    if (shouldFitViewRef.current && layoutedNodes.length > 0) {
+      // Small delay to ensure nodes are rendered
+      const timer = setTimeout(() => {
+        fitView({ padding: 0.2, duration: 200 })
+        shouldFitViewRef.current = false
+      }, 50)
+      return () => clearTimeout(timer)
+    }
+  }, [fitView, layoutedNodes, shouldFitViewRef])
+
+  return null
+}
+
 export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups = false, serviceCategories, addonMode = 'show', trafficSource = '', onSelectionChange }: TrafficGraphProps) {
   const isIstio = trafficSource === 'istio'
   const connLabel = isIstio ? 'req/s' : 'conn'
@@ -1343,7 +1375,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       }
 
       // Build final edges list
-      let finalEdges = [...rawEdges]
+      const finalEdges = [...rawEdges]
 
       // Add edge from addon-internet to addon-group if we have one
       if (addonMode === 'group' && groupEdgeInfo) {
@@ -1487,24 +1519,6 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
     onSelectionChange?.(null)
   }, [onSelectionChange])
 
-  // FitView handler component - must be inside ReactFlow
-  const FitViewOnChange = () => {
-    const { fitView } = useReactFlow()
-
-    useEffect(() => {
-      if (shouldFitViewRef.current && layoutedNodes.length > 0) {
-        // Small delay to ensure nodes are rendered
-        const timer = setTimeout(() => {
-          fitView({ padding: 0.2, duration: 200 })
-          shouldFitViewRef.current = false
-        }, 50)
-        return () => clearTimeout(timer)
-      }
-    }, [fitView, layoutedNodes])
-
-    return null
-  }
-
   return (
     <div className="w-full h-full relative">
       <ReactFlow
@@ -1530,7 +1544,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       >
         <Background />
         <Controls />
-        <FitViewOnChange />
+        <FitViewOnChange shouldFitViewRef={shouldFitViewRef} layoutedNodes={layoutedNodes} />
       </ReactFlow>
 
       {/* Legend */}

package/src/components/traffic/TrafficView.tsx

@@ -12,6 +12,7 @@ import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDock } from '../dock'
 import { EmptyState, PaneLoader } from '@skyhook-io/k8s-ui'
+import { Tooltip } from '../ui/Tooltip'
 
 // Addon types for filtering
 export type AddonMode = 'show' | 'group' | 'hide'
@@ -619,13 +620,13 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
   // Toggle L7 filter helpers
   const toggleL7Method = useCallback((method: string) => {
-    setL7Methods(prev => { const next = new Set(prev); next.has(method) ? next.delete(method) : next.add(method); return next })
+    setL7Methods(prev => { const next = new Set(prev); if (next.has(method)) next.delete(method); else next.add(method); return next })
   }, [])
   const toggleL7StatusRange = useCallback((range: string) => {
-    setL7StatusRanges(prev => { const next = new Set(prev); next.has(range) ? next.delete(range) : next.add(range); return next })
+    setL7StatusRanges(prev => { const next = new Set(prev); if (next.has(range)) next.delete(range); else next.add(range); return next })
   }, [])
   const toggleL7Verdict = useCallback((verdict: string) => {
-    setL7Verdicts(prev => { const next = new Set(prev); next.has(verdict) ? next.delete(verdict) : next.add(verdict); return next })
+    setL7Verdicts(prev => { const next = new Set(prev); if (next.has(verdict)) next.delete(verdict); else next.add(verdict); return next })
   }, [])
 
   // Toggle namespace visibility
@@ -1117,11 +1118,12 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                 {/* Top-right: stats + actions */}
                 <div className="absolute top-3 right-3 z-10 flex items-center gap-2">
                   {flowsData?.flows && flowsData.flows.length > 0 && (
+                    <Tooltip content="Open flow list in dock">
                     <button onClick={openFlowListDock}
-                      className="flex items-center gap-1 px-2 py-1 text-[10px] rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-                      title="Open flow list in dock">
+                      className="flex items-center gap-1 px-2 py-1 text-[10px] rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-theme-text-secondary hover:text-theme-text-primary transition-colors">
                       <List className="w-3 h-3" /> Flows
                     </button>
+                    </Tooltip>
                   )}
                   <div className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[10px] text-theme-text-tertiary">
                     {flowStats.shown}/{flowStats.total}

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -99,7 +99,7 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
         {/* Content */}
         <div className="overflow-y-auto flex-1 px-5 py-4 space-y-4">
           {isLoading && (
-            <div className="text-sm text-theme-text-tertiary text-center py-8">Loading diagnostics...</div>
+            <div className="text-sm text-theme-text-tertiary text-center py-8">Loading diagnostics…</div>
           )}
           {error && (
             <div className="text-sm text-red-400 text-center py-8">Failed to load diagnostics: {(error as Error).message}</div>

package/src/components/ui/Omnibar.tsx

@@ -283,7 +283,6 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
       out.push({ id: 'view-all', kind: 'viewAll', query: queryString, count: searchData?.total_matched ?? resourceRows.length })
     }
     return out
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [recentRows, leadingKinds, resourceRows, commandGroups, freeText, pills.length, searchActive, onViewAllResults, queryString, searchData])
   const viewAllRow = rows.find((r): r is Extract<Row, { kind: 'viewAll' }> => r.kind === 'viewAll')
 

package/src/components/workload/WorkloadView.tsx

@@ -43,6 +43,7 @@ import { useCanUpdateSecrets, useCanNodeWrite, useNamespacedCapabilities } from
 import { useOpenTerminal, useOpenLogs, useOpenWorkloadLogs, useOpenNodeTerminal } from '../dock'
 import { PortForwardButton } from '../portforward/PortForwardButton'
 import { useToast } from '../ui/Toast'
+import { Tooltip } from '../ui/Tooltip'
 import { PodRenderer } from '../resources/renderers/PodRenderer'
 import { NodeRenderer } from '../resources/renderers/NodeRenderer'
 import { ServiceRenderer } from '../resources/renderers/ServiceRenderer'
@@ -98,14 +99,6 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
   const name = parts.slice(3).map(decode).join('/')
   const group = searchParams.get('apiGroup') || ''
 
-  if (!kind || !namespace || !name) {
-    return (
-      <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-        Invalid workload URL
-      </div>
-    )
-  }
-
   const handleBack = useCallback(() => {
     if (window.history.length > 1) {
       navigate(-1)
@@ -118,6 +111,15 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
     navigate(buildWorkloadPath(resource))
   }, [navigate])
 
+  // Hooks must run unconditionally — the invalid-URL guard comes after them.
+  if (!kind || !namespace || !name) {
+    return (
+      <div className="flex items-center justify-center h-full text-theme-text-tertiary">
+        Invalid workload URL
+      </div>
+    )
+  }
+
   return (
     <WorkloadView
       kind={kind}
@@ -197,45 +199,45 @@ function useActionsBarProps(kind: string, namespace: string, name: string) {
     renderPortForward: ({ type, namespace: ns, name: n, className }: { type: 'pod' | 'service'; namespace: string; name: string; className?: string }) => (
       <PortForwardButton type={type} namespace={ns} name={n} className={className} />
     ),
-    onDelete: (params: any, callbacks?: any) => deleteMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
+    onDelete: (params: Parameters<typeof deleteMutation.mutate>[0], callbacks?: { onSuccess?: () => void }) => deleteMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
     isDeleting: deleteMutation.isPending,
     cascadeDependents: cascadePreview?.dependents,
     cascadeLoading,
-    onRestart: (params: any) => restartWorkloadMutation.mutate(params),
+    onRestart: (params: Parameters<typeof restartWorkloadMutation.mutate>[0]) => restartWorkloadMutation.mutate(params),
     isRestarting: restartWorkloadMutation.isPending,
     revisions: revisionsList,
     revisionsLoading,
     revisionsError: revisionsError ?? null,
-    onRollback: (params: any, callbacks?: any) => rollbackMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
+    onRollback: (params: Parameters<typeof rollbackMutation.mutate>[0], callbacks?: { onSuccess?: () => void }) => rollbackMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
     isRollingBack: rollbackMutation.isPending,
-    onTriggerCronJob: (params: any) => triggerCronJobMutation.mutate(params),
+    onTriggerCronJob: (params: Parameters<typeof triggerCronJobMutation.mutate>[0]) => triggerCronJobMutation.mutate(params),
     isTriggeringCronJob: triggerCronJobMutation.isPending,
-    onSuspendCronJob: (params: any) => suspendCronJobMutation.mutate(params),
+    onSuspendCronJob: (params: Parameters<typeof suspendCronJobMutation.mutate>[0]) => suspendCronJobMutation.mutate(params),
     isSuspendingCronJob: suspendCronJobMutation.isPending,
-    onResumeCronJob: (params: any) => resumeCronJobMutation.mutate(params),
+    onResumeCronJob: (params: Parameters<typeof resumeCronJobMutation.mutate>[0]) => resumeCronJobMutation.mutate(params),
     isResumingCronJob: resumeCronJobMutation.isPending,
-    onFluxReconcile: (params: any) => fluxReconcileMutation.mutate(params),
+    onFluxReconcile: (params: Parameters<typeof fluxReconcileMutation.mutate>[0]) => fluxReconcileMutation.mutate(params),
     isFluxReconciling: fluxReconcileMutation.isPending,
-    onFluxSyncWithSource: (params: any) => fluxSyncWithSourceMutation.mutate(params),
+    onFluxSyncWithSource: (params: Parameters<typeof fluxSyncWithSourceMutation.mutate>[0]) => fluxSyncWithSourceMutation.mutate(params),
     isFluxSyncing: fluxSyncWithSourceMutation.isPending,
-    onFluxSuspend: (params: any) => fluxSuspendMutation.mutate(params),
+    onFluxSuspend: (params: Parameters<typeof fluxSuspendMutation.mutate>[0]) => fluxSuspendMutation.mutate(params),
     isFluxSuspending: fluxSuspendMutation.isPending,
-    onFluxResume: (params: any) => fluxResumeMutation.mutate(params),
+    onFluxResume: (params: Parameters<typeof fluxResumeMutation.mutate>[0]) => fluxResumeMutation.mutate(params),
     isFluxResuming: fluxResumeMutation.isPending,
-    onArgoSync: (params: any) => argoSyncMutation.mutate(params),
+    onArgoSync: (params: Parameters<typeof argoSyncMutation.mutate>[0]) => argoSyncMutation.mutate(params),
     isArgoSyncing: argoSyncMutation.isPending,
-    onArgoRefresh: (params: any) => argoRefreshMutation.mutate(params),
+    onArgoRefresh: (params: Parameters<typeof argoRefreshMutation.mutate>[0]) => argoRefreshMutation.mutate(params),
     isArgoRefreshing: argoRefreshMutation.isPending,
-    onArgoSuspend: (params: any) => argoSuspendMutation.mutate(params),
+    onArgoSuspend: (params: Parameters<typeof argoSuspendMutation.mutate>[0]) => argoSuspendMutation.mutate(params),
     isArgoSuspending: argoSuspendMutation.isPending,
-    onArgoResume: (params: any) => argoResumeMutation.mutate(params),
+    onArgoResume: (params: Parameters<typeof argoResumeMutation.mutate>[0]) => argoResumeMutation.mutate(params),
     isArgoResuming: argoResumeMutation.isPending,
     canNodeWrite,
-    onCordonNode: (params: any) => cordonMutation.mutate(params),
+    onCordonNode: (params: Parameters<typeof cordonMutation.mutate>[0]) => cordonMutation.mutate(params),
     isCordoningNode: cordonMutation.isPending,
-    onUncordonNode: (params: any) => uncordonMutation.mutate(params),
+    onUncordonNode: (params: Parameters<typeof uncordonMutation.mutate>[0]) => uncordonMutation.mutate(params),
     isUncordoningNode: uncordonMutation.isPending,
-    onDrainNode: (params: any) => drainMutation.mutate(params),
+    onDrainNode: (params: Parameters<typeof drainMutation.mutate>[0]) => drainMutation.mutate(params),
     isDrainingNode: drainMutation.isPending,
   }
 }
@@ -879,15 +881,18 @@ function FluxSourceConsumersInner({ sourceKind, namespace, name }: { sourceKind:
       </h3>
       <div className="flex flex-wrap gap-1.5">
         {consumers.map((c) => (
-          <button
+          <Tooltip
             key={`${c.kind}/${c.namespace}/${c.name}`}
+            content={`${c.kind} ${c.namespace}/${c.name}`}
+          >
+          <button
             onClick={() => navigate(`/gitops/detail/${c.plural}/${encodeURIComponent(c.namespace)}/${encodeURIComponent(c.name)}`)}
             className="inline-flex items-center gap-1.5 rounded border border-theme-border bg-theme-surface px-1.5 py-0.5 text-[11px] text-theme-text-secondary hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors"
-            title={`${c.kind} ${c.namespace}/${c.name}`}
           >
             <span className="text-theme-text-tertiary">{c.kind === 'HelmRelease' ? 'HR' : 'K'}</span>
             <span>{c.namespace}/{c.name}</span>
           </button>
+          </Tooltip>
         ))}
       </div>
     </div>

package/src/context/NavCustomization.tsx

@@ -54,11 +54,14 @@ interface NavCustomizationBase {
    *                 `clusterChecksHref` folded in here)
    *   - 'certs'   → the Certificate Health card
    *
-   * View-shaped targets (issues / gitops / checks) are also honored for any
-   * entry into that view — ⌘K, bookmarks, deep links — via a redirect effect
-   * in App.tsx, using window.location.replace so the transient /<view> URL
-   * stays out of history. 'certs' has no Radar view, so only the card consults
-   * it (window.location.assign — a real forward navigation the user initiated).
+   * View-shaped targets (issues / gitops / checks) are honored for every entry:
+   * in-app nav (Home cards, ⌘K, "view all") hands straight to the host from
+   * `setMainView` via `onHostNavigate` (smooth same-document hand-off, no
+   * intermediate /<view> mount); a direct /<view> URL (bookmark/deep link)
+   * funnels through a redirect effect that uses `window.location.replace` so
+   * the transient URL stays out of history. 'certs' has no Radar view, so only
+   * the card consults it. `onHostNavigate` is optional — without it everything
+   * falls back to `window.location` (a hard reload).
    */
   fleetTakeoverHref?: (target: FleetTakeoverTarget) => string | undefined;
   /**
@@ -68,6 +71,17 @@ interface NavCustomizationBase {
    * change. Remove in a major release once all consumers have migrated.
    */
   clusterChecksHref?: () => string;
+  /**
+   * Optional smooth navigator for host-owned URLs. When the host takes a
+   * destination over (`fleetTakeoverHref`, `crossClusterCompareHref`), Radar
+   * would otherwise hand off via `window.location` — a full document reload
+   * that cold-boots the host (white flash, re-auth, chrome teardown). A host
+   * that can navigate SAME-DOCUMENT (e.g. Radar Cloud's cross-tree swap with a
+   * View Transition) passes this so the hand-off morphs instead of reloading.
+   * Omitted → Radar falls back to `window.location` (hard nav), so standalone
+   * OSS / other hosts are unaffected.
+   */
+  onHostNavigate?: (url: string) => void;
   /**
    * Chrome level for embedded hosts. Default ('full', or omitted) renders
    * Radar's top bar + the view-switcher. 'none' suppresses BOTH — the host

package/src/main.tsx

@@ -130,7 +130,7 @@ document.execCommand = function (command: string, showUI?: boolean, value?: stri
         dt.setData('text/plain', text)
         const ev = new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })
         if (!el.dispatchEvent(ev)) return
-      } catch (_e) { /* ClipboardEvent dispatch failed, fall back to insertText */ }
+      } catch { /* ClipboardEvent dispatch failed, fall back to insertText */ }
       _origExecCommand('insertText', false, text)
     }).catch((err) => { console.warn('[Radar] Paste failed:', err) })
     return true