@skyhook-io/radar-app 1.7.0 → 1.8.0

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

@@ -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}
@@ -1343,7 +1348,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) {

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'
@@ -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/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}
@@ -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