@skyhook-io/radar-app 1.7.0 → 1.8.1

package/src/components/home/HelmSummary.tsx

@@ -88,11 +88,13 @@ export function HelmSummary({ data, onNavigate }: HelmSummaryProps) {
             <span className="text-xs font-medium text-theme-text-secondary">
               {data.errorCode === 'unconfigured' ? 'Helm not configured' : 'Helm unavailable'}
             </span>
-            <span className="text-[11px] mt-1 text-center px-2 truncate max-w-full" title={data.error}>
+            <Tooltip content={data.error} wrapperClassName="!block mt-1 min-w-0 text-center">
+            <span className="text-[11px] text-center px-2 truncate max-w-full">
               {data.errorCode === 'unconfigured'
                 ? 'Set rbac.helm=true in the Radar Helm chart values.'
                 : data.error}
             </span>
+            </Tooltip>
           </div>
         ) : !data.releases || data.releases.length === 0 ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">

package/src/components/home/MCPSetupDialog.tsx

@@ -2,6 +2,7 @@ import { useRef, useEffect, useState, useCallback } from 'react'
 import { X, Copy, Check, Radio, Terminal, MessageSquare, Code2, ChevronRight, Pin } from 'lucide-react'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { MCP_TOOL_CATALOG } from './mcpToolCatalog'
+import { Tooltip } from '../ui/Tooltip'
 
 interface MCPSetupDialogProps {
   open: boolean
@@ -19,13 +20,14 @@ function CopyButton({ text }: { text: string }) {
   }
 
   return (
+    <Tooltip content="Copy to clipboard" position="left" wrapperClassName="absolute top-2 right-2">
     <button
       onClick={handleCopy}
-      className="absolute top-2 right-2 p-1.5 rounded-md bg-theme-elevated/50 hover:bg-theme-elevated text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-      title="Copy to clipboard"
+      className="p-1.5 rounded-md bg-theme-elevated/50 hover:bg-theme-elevated text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
     >
       {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <Copy className="w-3.5 h-3.5" />}
     </button>
+    </Tooltip>
   )
 }
 
@@ -308,19 +310,23 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
                   <div className="flex items-center gap-2">
                     <code className="inline-code text-[11px]">{tool.name}</code>
                     {tool.write && (
-                      <span className="badge-sm bg-amber-500/10 text-amber-600 dark:text-amber-400" title="Write tool — annotated as destructive">
+                      <Tooltip content="Write tool — annotated as destructive">
+                      <span className="badge-sm bg-amber-500/10 text-amber-600 dark:text-amber-400">
                         write
                       </span>
+                      </Tooltip>
                     )}
                   </div>
                   <p className="text-[11px] text-theme-text-tertiary leading-relaxed">{tool.desc}</p>
                   {tool.params.length > 0 && (
                     <div className="flex flex-wrap gap-1.5 pt-0.5">
                       {tool.params.map((p) => (
-                        <span key={p.arg} className="inline-code text-[11px]" title={p.desc}>
+                        <Tooltip key={p.arg} content={p.desc}>
+                        <span className="inline-code text-[11px]">
                           <span>{p.arg}</span>
                           {p.required && <span className="text-red-400">*</span>}
                         </span>
+                        </Tooltip>
                       ))}
                     </div>
                   )}

package/src/components/issues/IssuesPane.tsx

@@ -33,7 +33,7 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
   const { data, isLoading, error } = useIssues(namespaces)
   const [severityFilter, setSeverityFilter] = useState<Set<IssueSeverity>>(new Set())
 
-  const allIssues = data?.issues ?? []
+  const allIssues = useMemo(() => data?.issues ?? [], [data])
   const totals = useMemo(() => {
     const t: Record<IssueSeverity, number> = { critical: 0, warning: 0 }
     for (const i of allIssues) t[i.severity] = (t[i.severity] ?? 0) + 1
@@ -44,7 +44,7 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
   const toggleSeverity = (s: IssueSeverity) =>
     setSeverityFilter((prev) => {
       const next = new Set(prev)
-      next.has(s) ? next.delete(s) : next.add(s)
+      if (next.has(s)) next.delete(s); else next.add(s)
       return next
     })
 

package/src/components/nav/PrimaryNavRail.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import { Home, Network, List, Clock, AlertTriangle, Package, GitBranch, Boxes, Activity, DollarSign, ShieldCheck, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { MainView } from '../../types'
+import { Tooltip } from '../ui/Tooltip'
 
 // The views the rail can navigate to. Broader than k8s-ui's ExtendedMainView
 // (which omits 'applications') — it mirrors the navigable subset of App.tsx's
@@ -131,11 +132,11 @@ export function PrimaryNavRail({ activeView, onNavigate, pinned, onTogglePinned,
           forced slim (showPinToggle=false) — expanding there isn't available. */}
       {showPinToggle && (
       <div className="px-2 pb-2 pt-1 border-t border-theme-border/50">
+        <Tooltip content={pinned ? 'Collapse navigation' : 'Expand navigation'} position="right" wrapperClassName="!block w-full shrink-0">
         <button
           type="button"
           onClick={onTogglePinned}
           aria-label={pinned ? 'Collapse navigation' : 'Expand navigation'}
-          title={pinned ? 'Collapse navigation' : 'Expand navigation'}
           className="group/pin relative flex h-9 w-full items-center rounded-md text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-secondary transition-colors"
         >
           <span className="flex w-10 shrink-0 items-center justify-center">
@@ -146,6 +147,7 @@ export function PrimaryNavRail({ activeView, onNavigate, pinned, onTogglePinned,
               would contradict the "Expand navigation" label. */}
           <span className={clsx('text-[13px] font-medium', !pinned && 'hidden')}>Collapse</span>
         </button>
+        </Tooltip>
       </div>
       )}
     </aside>
@@ -156,11 +158,11 @@ function BrandRow({ pinned, onNavigate }: { pinned: boolean; onNavigate: (view:
   // Clickable brand = secondary home affordance (logo→home convention). The
   // Home nav item below still carries the active state; the brand just navigates.
   return (
+    <Tooltip content="Home" position="right" wrapperClassName="!block w-full shrink-0">
     <button
       type="button"
       onClick={() => onNavigate('home')}
       aria-label="Radar — go to home"
-      title="Home"
       // Height matches the top bar header (App.tsx — items-center + py-2 = 51px)
       // so the rail's brand divider and the header's bottom border form one line.
       className="flex h-[51px] w-full items-center border-b border-theme-border/50 shrink-0 transition-opacity hover:opacity-80"
@@ -181,6 +183,7 @@ function BrandRow({ pinned, onNavigate }: { pinned: boolean; onNavigate: (view:
         <span className="text-[9px] mt-0.5 tracking-wide uppercase text-theme-text-tertiary">by Skyhook</span>
       </span>
     </button>
+    </Tooltip>
   )
 }
 

package/src/components/portforward/PortForwardButton.tsx

@@ -4,6 +4,7 @@ import { clsx } from 'clsx'
 import { useAvailablePorts, useClusterInfo, AvailablePort } from '../../api/client'
 import { useStartPortForward } from './PortForwardManager'
 import { validatePort } from '@skyhook-io/k8s-ui/utils/validators'
+import { Tooltip } from '../ui/Tooltip'
 
 interface PortForwardButtonProps {
   type: 'pod' | 'service'
@@ -206,31 +207,32 @@ export function PortForwardButton({
     // If no ports available, show disabled button
     if (!isLoading && ports.length === 0) {
       return (
+        <Tooltip content="No ports available">
         <button
           disabled
           className={clsx(
-            'flex items-center gap-2 px-3 py-2 bg-theme-elevated text-theme-text-primary text-sm rounded-lg opacity-50 cursor-not-allowed',
+            'flex items-center gap-2 px-3 py-2 bg-theme-elevated text-theme-text-primary text-sm rounded-lg opacity-50 cursor-not-allowed disabled:pointer-events-none',
             className
           )}
-          title="No ports available"
         >
           <Plug className="w-4 h-4" />
           No Ports
         </button>
+        </Tooltip>
       )
     }
 
     // If only one port, forward directly on click (most common case)
     if (ports.length === 1) {
       return (
+        <Tooltip content={`Port forward to ${ports[0].port}`}>
         <button
           onClick={() => handlePortSelect(ports[0])}
           disabled={isPending}
           className={clsx(
-            'flex items-center gap-2 px-3 py-2 bg-theme-elevated text-theme-text-primary text-sm rounded-lg hover:bg-theme-hover transition-colors disabled:opacity-50',
+            'flex items-center gap-2 px-3 py-2 bg-theme-elevated text-theme-text-primary text-sm rounded-lg hover:bg-theme-hover transition-colors disabled:opacity-50 disabled:pointer-events-none',
             className
           )}
-          title={`Port forward to ${ports[0].port}`}
         >
           {isPending ? (
             <Loader2 className="w-4 h-4 animate-spin" />
@@ -239,6 +241,7 @@ export function PortForwardButton({
           )}
           Forward :{ports[0].port}
         </button>
+        </Tooltip>
       )
     }
 
@@ -269,6 +272,7 @@ export function PortForwardButton({
               <div className="px-3 py-2 border-b border-theme-border">
                 <div className="text-xs text-theme-text-disabled mb-2">Listen on</div>
                 <div className="flex gap-1">
+                  <Tooltip content="Only accessible from this machine" wrapperClassName="flex-1">
                   <button
                     onClick={(e) => { e.stopPropagation(); setListenAddress('127.0.0.1') }}
                     className={clsx(
@@ -277,11 +281,12 @@ export function PortForwardButton({
                         ? 'btn-brand-toggle'
                         : 'bg-theme-elevated text-theme-text-tertiary hover:text-theme-text-primary'
                     )}
-                    title="Only accessible from this machine"
                   >
                     <Monitor className="w-3 h-3" />
                     localhost
                   </button>
+                  </Tooltip>
+                  <Tooltip content="Accessible from other machines on the network" wrapperClassName="flex-1">
                   <button
                     onClick={(e) => { e.stopPropagation(); setListenAddress('0.0.0.0') }}
                     className={clsx(
@@ -290,11 +295,11 @@ export function PortForwardButton({
                         ? 'bg-amber-600 text-white'
                         : 'bg-theme-elevated text-theme-text-tertiary hover:text-theme-text-primary'
                     )}
-                    title="Accessible from other machines on the network"
                   >
                     <Globe className="w-3 h-3" />
                     all interfaces
                   </button>
+                  </Tooltip>
                 </div>
               </div>
             )}
@@ -375,11 +380,11 @@ export function PortForwardInlineButton({
 
   return (
     <>
+      <Tooltip content={`Port forward ${port}`}>
       <button
         onClick={handleClick}
         disabled={disabled || isPending}
-        className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-theme-elevated hover:bg-accent-muted rounded text-xs transition-colors disabled:opacity-50 disabled:hover:bg-theme-elevated"
-        title={`Port forward ${port}`}
+        className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-theme-elevated hover:bg-accent-muted rounded text-xs transition-colors disabled:opacity-50 disabled:hover:bg-theme-elevated disabled:pointer-events-none"
       >
         {port}/{protocol}
         {isPending ? (
@@ -388,6 +393,7 @@ export function PortForwardInlineButton({
           <Plug className="w-3 h-3" />
         )}
       </button>
+      </Tooltip>
       {dialogInfo && (
         <KubectlCommandDialog info={dialogInfo} onClose={() => setDialogInfo(null)} />
       )}

package/src/components/portforward/PortForwardManager.tsx

@@ -20,6 +20,7 @@ import {
   Globe,
   Monitor,
   PenLine,
+  RotateCw,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 // CSS_EASE (the shared spring curve) is intentionally NOT used for this panel —
@@ -30,6 +31,7 @@ import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { openExternal } from '../../utils/navigation'
 import { apiUrl } from '../../api/config'
+import { apiFetch } from '../../api/client'
 import { pluralize } from '@skyhook-io/k8s-ui'
 
 // --- Types -------------------------------------------------------------------
@@ -86,7 +88,7 @@ function usePortForwardQuery() {
   return useQuery<PortForwardSession[]>({
     queryKey: ['portforwards'],
     queryFn: async () => {
-      const res = await fetch(apiUrl('/portforwards'))
+      const res = await apiFetch(apiUrl('/portforwards'))
       if (!res.ok) throw new Error('Failed to fetch port forwards')
       return res.json()
     },
@@ -390,6 +392,9 @@ export function PortForwardPanel() {
   // without disabling all stop buttons (the old shared-mutation approach blocked
   // every row when any single stop was in-flight).
   const [stoppingIds, setStoppingIds] = useState<Set<string>>(() => new Set())
+  // Per-session retry tracking — same rationale as stoppingIds: multiple failed
+  // forwards can be retried independently without disabling every retry button.
+  const [retryingIds, setRetryingIds] = useState<Set<string>>(() => new Set())
   const queryClient = useQueryClient()
   const { showSuccess, showError } = useToast()
 
@@ -424,7 +429,7 @@ export function PortForwardPanel() {
   const stopPortForward = useCallback(async (id: string) => {
     setStoppingIds(prev => new Set(prev).add(id))
     try {
-      const res = await fetch(apiUrl(`/portforwards/${id}`), { method: 'DELETE' })
+      const res = await apiFetch(apiUrl(`/portforwards/${id}`), { method: 'DELETE' })
       if (!res.ok) {
         const body = await res.json().catch(() => ({}))
         throw new Error(body.error || `Failed to stop port forward (HTTP ${res.status})`)
@@ -444,6 +449,48 @@ export function PortForwardPanel() {
     }
   }, [queryClient, showError])
 
+  // Recreate a failed forward. The errored session is already dead — there's no live
+  // forward to lose — so we drop the stale row FIRST, then recreate. Delete-first keeps
+  // the panel at exactly one row in every outcome (success → one running row; failure →
+  // one errored row), avoiding the orphaned-duplicate the reverse order would leave when
+  // the backend keeps a failed-start session in its map. A 404 means it was already
+  // cleared (e.g. context switch) — benign, proceed. Service-resolved sessions re-route
+  // through the service path via buildRecreateBody, so a retry after the backing pod was
+  // replaced re-resolves to a currently-running pod.
+  const retryPortForward = useCallback(async (session: PortForwardSession) => {
+    commitInteraction()
+    setRetryingIds(prev => new Set(prev).add(session.id))
+    try {
+      const delRes = await apiFetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
+      if (!delRes.ok && delRes.status !== 404) {
+        const body = await delRes.json().catch(() => ({}))
+        throw new Error(body.error || `Failed to clear failed port forward (HTTP ${delRes.status})`)
+      }
+      const res = await apiFetch(apiUrl('/portforwards'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(buildRecreateBody(session, { localPort: session.localPort, listenAddress: session.listenAddress })),
+      })
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        throw new Error(body.error || `Failed to retry port forward (HTTP ${res.status})`)
+      }
+      queryClient.invalidateQueries({ queryKey: ['portforwards'] })
+      showSuccess('Port forward restarted', `Now listening on localhost:${session.localPort}`)
+    } catch (err) {
+      queryClient.invalidateQueries({ queryKey: ['portforwards'] })
+      const msg = err instanceof Error ? err.message : 'Failed to retry port forward'
+      showError('Failed to retry port forward', msg)
+      console.error('Failed to retry port forward:', err)
+    } finally {
+      setRetryingIds(prev => {
+        const next = new Set(prev)
+        next.delete(session.id)
+        return next
+      })
+    }
+  }, [commitInteraction, queryClient, showSuccess, showError])
+
   const toggleListenAddress = async (session: PortForwardSession) => {
     commitInteraction()
     const newAddress = session.listenAddress === '0.0.0.0' ? '127.0.0.1' : '0.0.0.0'
@@ -454,13 +501,13 @@ export function PortForwardPanel() {
     // apart from "original gone and recreate failed = data loss."
     let deleted = false
     try {
-      const delRes = await fetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
+      const delRes = await apiFetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
       if (!delRes.ok) {
         const body = await delRes.json().catch(() => ({}))
         throw new Error(body.error || `Failed to stop existing port forward (HTTP ${delRes.status})`)
       }
       deleted = true
-      const res = await fetch(apiUrl('/portforwards'), {
+      const res = await apiFetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(buildRecreateBody(session, { localPort: session.localPort, listenAddress: newAddress })),
@@ -501,13 +548,13 @@ export function PortForwardPanel() {
     // apart from "original gone and recreate failed = data loss."
     let deleted = false
     try {
-      const delRes = await fetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
+      const delRes = await apiFetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
       if (!delRes.ok) {
         const body = await delRes.json().catch(() => ({}))
         throw new Error(body.error || `Failed to stop existing port forward (HTTP ${delRes.status})`)
       }
       deleted = true
-      const res = await fetch(apiUrl('/portforwards'), {
+      const res = await apiFetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(buildRecreateBody(session, { localPort: newPort, listenAddress: session.listenAddress })),
@@ -716,13 +763,28 @@ export function PortForwardPanel() {
                       </button>
                       </Tooltip>
                     )}
+                    {session.status === 'error' && (
+                      <Tooltip content="Retry" delay={300} position="bottom" disabled={!isPanelOpen}>
+                      <button
+                        onClick={() => retryPortForward(session)}
+                        disabled={retryingIds.has(session.id) || stoppingIds.has(session.id)}
+                        className="p-1.5 text-theme-text-tertiary hover:text-green-400 hover:bg-theme-hover rounded disabled:opacity-50"
+                      >
+                        {retryingIds.has(session.id) ? (
+                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                        ) : (
+                          <RotateCw className="w-3.5 h-3.5" />
+                        )}
+                      </button>
+                      </Tooltip>
+                    )}
                     <Tooltip content={session.status === 'error' ? 'Dismiss' : 'Stop'} delay={300} position="bottom" disabled={!isPanelOpen}>
                     <button
                       onClick={() => {
                         commitInteraction()
                         stopPortForward(session.id)
                       }}
-                      disabled={stoppingIds.has(session.id)}
+                      disabled={stoppingIds.has(session.id) || retryingIds.has(session.id)}
                       className="p-1.5 text-theme-text-tertiary hover:text-red-400 hover:bg-theme-hover rounded disabled:opacity-50"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
@@ -882,7 +944,7 @@ export function useStartPortForward() {
       localPort?: number
       listenAddress?: string // "127.0.0.1" (default) or "0.0.0.0"
     }) => {
-      const res = await fetch(apiUrl('/portforwards'), {
+      const res = await apiFetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(req),

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -26,6 +26,7 @@ import {
   type CategoryDef,
 } from './PrometheusCharts'
 import { RestartEventLane } from './RestartChart'
+import { Tooltip } from '../ui/Tooltip'
 
 // Used when MetricsTabContent is in expanded (full-screen) mode. Drawer mode
 // uses the single-chart tabbed `PrometheusCharts` instead — drawer width
@@ -288,7 +289,11 @@ function WorkloadHealthBadge({ kind, namespace, name }: { kind: string; namespac
   // silently render as fine while we have no signal to display.
   if (error && !data) {
     const msg = error instanceof Error ? error.message : String(error)
-    return <span className={`badge badge-sm ${SEVERITY_BADGE.neutral}`} title={`Health check failed: ${msg}`}>Health unknown</span>
+    return (
+      <Tooltip content={`Health check failed: ${msg}`}>
+      <span className={`badge badge-sm ${SEVERITY_BADGE.neutral}`}>Health unknown</span>
+      </Tooltip>
+    )
   }
   if (!data?.sampleAvailable || data.rows.length === 0) return null
 
@@ -311,7 +316,7 @@ function PanelLoading() {
   return (
     <div className="flex items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs">
       <Loader2 className="w-4 h-4 animate-spin mr-2" />
-      Loading...
+      Loading…
     </div>
   )
 }
@@ -320,7 +325,9 @@ function PanelError({ message }: { message: string }) {
   return (
     <div className={`flex flex-col items-center justify-center h-full min-h-[160px] ${SEVERITY_TEXT.warning} text-xs px-3 text-center`}>
       Query failed
-      <span className="text-theme-text-quaternary mt-0.5 line-clamp-2" title={message}>{message}</span>
+      <Tooltip content={message} wrapperClassName="!block w-full">
+      <span className="text-theme-text-quaternary mt-0.5 line-clamp-2">{message}</span>
+      </Tooltip>
     </div>
   )
 }

package/src/components/resource/RestartChart.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo } from 'react'
 import { AlertCircle } from 'lucide-react'
 import { usePrometheusResourceMetrics, usePrometheusStatus, type PrometheusSeries, type PrometheusTimeRange } from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
 
 /**
  * RestartEventLane — vertical markers at each restart event, on a dedicated
@@ -58,14 +59,14 @@ export function RestartEventLane({ kind, namespace, name, range = '1h' }: {
         {restarts.map((r, i) => {
           const left = `${Math.max(0, Math.min(100, ((r.timestamp - windowStart) / span) * 100))}%`
           return (
-            <div
+            <Tooltip
               key={i}
-              className="absolute top-0 h-full w-px bg-amber-500/80"
-              style={{ left }}
-              title={`${new Date(r.timestamp * 1000).toLocaleString()} · ${r.label}${r.value > 1 ? ` ×${r.value}` : ''}`}
+              content={`${new Date(r.timestamp * 1000).toLocaleString()} · ${r.label}${r.value > 1 ? ` ×${r.value}` : ''}`}
+              wrapperClassName="absolute top-0 h-full w-px bg-amber-500/80"
+              wrapperStyle={{ left }}
             >
               <div className="absolute -top-0.5 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-amber-500" />
-            </div>
+            </Tooltip>
           )
         })}
       </div>

package/src/components/resource/RightsizingStrip.tsx

@@ -1,6 +1,7 @@
 import { ArrowRight, Check, Info, AlertTriangle } from 'lucide-react'
 import { SEVERITY_TEXT, SEVERITY_BADGE, type Severity } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { usePrometheusRightsizing, usePrometheusStatus, type RightsizingTone, type RightsizingRow } from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
 
 const RIGHTSIZING_KINDS = new Set(['Deployment', 'StatefulSet', 'DaemonSet'])
 
@@ -38,7 +39,9 @@ export function RightsizingStrip({ kind, namespace, name }: {
         <header className="flex items-center justify-between mb-1">
           <h3 className="text-sm font-medium text-theme-text-primary">Right-sizing</h3>
         </header>
-        <p className="text-xs text-theme-text-tertiary" title={msg}>Right-sizing unavailable — Prometheus query failed.</p>
+        <Tooltip content={msg}>
+        <p className="text-xs text-theme-text-tertiary">Right-sizing unavailable — Prometheus query failed.</p>
+        </Tooltip>
       </section>
     )
   }

package/src/components/resource-drawer/ResourceDrawer.tsx

@@ -4,6 +4,7 @@ import { clsx } from 'clsx'
 import { useState, useCallback } from 'react'
 import type { TopologyNode, NodeKind, HealthStatus } from '../../types'
 import { getKindBadgeBordered, healthToSeverity, SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
+import { Tooltip } from '../ui/Tooltip'
 
 interface ResourceDrawerProps {
   node: TopologyNode
@@ -146,10 +147,10 @@ export const ResourceDrawer = memo(function ResourceDrawer({
               <h2 className="text-lg font-semibold text-theme-text-primary truncate">
                 {node.name}
               </h2>
+              <Tooltip content="Copy name">
               <button
                 onClick={copyName}
                 className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-                title="Copy name"
               >
                 {copied ? (
                   <Check className="w-4 h-4 text-green-400" />
@@ -157,6 +158,7 @@ export const ResourceDrawer = memo(function ResourceDrawer({
                   <Copy className="w-4 h-4" />
                 )}
               </button>
+              </Tooltip>
             </div>
           </div>
           <button

package/src/components/resources/ImageFilesystemModal.tsx

@@ -7,6 +7,7 @@ import { useImageMetadata, ApiError } from '../../api/client'
 import type { FileNode, ImageFilesystem } from '../../types'
 import { formatBytes } from '../../utils/format'
 import { downloadBlob, filterTree } from './file-browser-utils'
+import { Tooltip } from '../ui/Tooltip'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 
 // Manual fetch function for filesystem (not a hook - gives us full control)
@@ -141,9 +142,11 @@ export function ImageFilesystemModal({
         <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
           <div className="flex-1 min-w-0">
             <h3 className="text-lg font-semibold text-theme-text-primary">Image Filesystem</h3>
-            <p className="text-sm text-theme-text-secondary truncate mt-0.5" title={image}>
+            <Tooltip content={image} wrapperClassName="!block w-full">
+            <p className="text-sm text-theme-text-secondary truncate mt-0.5">
               {image}
             </p>
+            </Tooltip>
             {(displayFilesystem?.platform || metadata?.platform) && (
               <p className="text-xs text-theme-text-tertiary mt-1">
                 Platform: {displayFilesystem?.platform || metadata?.platform}
@@ -245,9 +248,11 @@ export function ImageFilesystemModal({
               <span>{formatBytes(displayFilesystem.totalSize)}</span>
               {displayFilesystem.layers && <span>{displayFilesystem.layers.length} layers</span>}
               {displayFilesystem.digest && (
-                <span className="truncate" title={displayFilesystem.digest}>
+                <Tooltip content={displayFilesystem.digest} wrapperClassName="min-w-0">
+                <span className="truncate">
                   Digest: {displayFilesystem.digest.substring(0, 20)}...
                 </span>
+                </Tooltip>
               )}
             </>
           )}
@@ -362,10 +367,10 @@ function DownloadConfirmation({ metadata, onConfirm, onCancel }: DownloadConfirm
             <pre className="bg-theme-elevated rounded p-3 text-xs text-theme-text-primary overflow-x-auto font-mono">
               {authCommand}
             </pre>
+            <Tooltip content="Copy to clipboard" position="left" wrapperClassName="absolute top-2 right-2">
             <button
               onClick={handleCopy}
-              className="absolute top-2 right-2 p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
-              title="Copy to clipboard"
+              className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
             >
               {copied ? (
                 <Check className="w-4 h-4 text-green-400" />
@@ -373,6 +378,7 @@ function DownloadConfirmation({ metadata, onConfirm, onCancel }: DownloadConfirm
                 <Copy className="w-4 h-4" />
               )}
             </button>
+            </Tooltip>
           </div>
         </div>
       )}
@@ -461,10 +467,10 @@ function AuthenticationHelp({ image, registryType, onRetry }: AuthenticationHelp
             <pre className="bg-theme-elevated rounded p-3 text-xs text-theme-text-primary overflow-x-auto font-mono">
               {authCommand}
             </pre>
+            <Tooltip content="Copy to clipboard" position="left" wrapperClassName="absolute top-2 right-2">
             <button
               onClick={handleCopy}
-              className="absolute top-2 right-2 p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
-              title="Copy to clipboard"
+              className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
             >
               {copied ? (
                 <Check className="w-4 h-4 text-green-400" />
@@ -472,6 +478,7 @@ function AuthenticationHelp({ image, registryType, onRetry }: AuthenticationHelp
                 <Copy className="w-4 h-4" />
               )}
             </button>
+            </Tooltip>
           </div>
         </div>
       )}
@@ -709,11 +716,11 @@ function FileTreeNode({ node, depth, defaultExpanded = true, image, namespace, p
         )}
 
         {isFile && (
+          <Tooltip content="Download file" wrapperClassName="ml-1">
           <button
             onClick={handleDownload}
             disabled={downloading}
-            className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-theme-elevated rounded ml-1 disabled:opacity-50"
-            title="Download file"
+            className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-theme-elevated rounded disabled:opacity-50 disabled:pointer-events-none"
           >
             {downloading ? (
               <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -721,6 +728,7 @@ function FileTreeNode({ node, depth, defaultExpanded = true, image, namespace, p
               <Download className="w-3.5 h-3.5" />
             )}
           </button>
+          </Tooltip>
         )}
       </div>
 

package/src/components/resources/PodFilesystemModal.tsx

@@ -7,6 +7,7 @@ import type { FileNode } from '../../types'
 import { formatBytes } from '../../utils/format'
 import { downloadBlob, filterTree } from './file-browser-utils'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { Tooltip } from '../ui/Tooltip'
 
 interface PodFilesystem {
   root: FileNode
@@ -384,11 +385,11 @@ function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: Po
       )}
 
       {isDownloadable && (
+        <Tooltip content="Download file" wrapperClassName="ml-1">
         <button
           onClick={handleDownload}
           disabled={downloading}
-          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-theme-elevated rounded ml-1 disabled:opacity-50"
-          title="Download file"
+          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-theme-elevated rounded disabled:opacity-50 disabled:pointer-events-none"
         >
           {downloading ? (
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -396,6 +397,7 @@ function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: Po
             <Download className="w-3.5 h-3.5" />
           )}
         </button>
+        </Tooltip>
       )}
     </div>
   )