@skyhook-io/radar-app 1.7.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "preview": "vite preview",
     "tsc": "tsc --noEmit",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
-    "lint": "eslint src --ext ts,tsx"
+    "lint": "eslint src && node scripts/check-no-native-title.mjs"
   },
   "dependencies": {
     "@fontsource-variable/dm-sans": "^5.2.8",
@@ -51,18 +51,23 @@
     "tailwind-merge": ">=2"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.59.1",
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.1",
     "@tanstack/react-query": "^5.100.14",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
     "@xyflow/react": "^12.10.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
+    "eslint": "^10.5.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.7.0",
     "lucide-react": "^1.16.0",
     "postcss": "^8.5.14",
     "prettier": "^3.8.1",
@@ -72,6 +77,7 @@
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.1",
     "typescript": "^6.0.2",
+    "typescript-eslint": "^8.62.0",
     "vite": "^8.0.12"
   },
   "sideEffects": [

package/src/App.tsx

@@ -138,14 +138,19 @@ function AuthBarrier({ authMode }: { authMode: string }) {
             src={radarLoadingIcon}
             alt=""
             aria-hidden
-            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-11 h-11"
+            // Integer offset (vw/2 − 22) — matches the Connecting/Opening splashes;
+            // avoids sub-pixel jitter from translate(-50%) on odd-width viewports.
+            className="absolute w-11 h-11"
+            style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
           />
-          <p
-            className="absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary"
+          <div
+            className="absolute left-1/2 -translate-x-1/2 text-center"
             style={{ top: 'calc(50% + 34px)' }}
           >
-            Redirecting to login…
-          </p>
+            <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
+              Redirecting to login…
+            </p>
+          </div>
         </div>
       </div>
     )
@@ -171,6 +176,15 @@ function AuthBarrier({ authMode }: { authMode: string }) {
   )
 }
 
+// Identity of the "page" a non-URL-backed peek drawer belongs to. Pathname alone
+// is not enough: Applications keeps the list and an app's detail on the same
+// `/applications` pathname and distinguishes them with `?app=`, so a Back from
+// detail to list would otherwise leave the peek orphaned. Only `app` is included
+// (not the whole query) so filter/tab/namespace churn doesn't close the peek.
+function peekOwnerKey(pathname: string, search: string): string {
+  return `${pathname}${new URLSearchParams(search).get('app') ?? ''}`
+}
+
 function AppInner() {
   const navigate = useNavigate()
   const location = useLocation()
@@ -179,6 +193,32 @@ function AppInner() {
   const capabilities = useCapabilitiesContext()
   const openLocalTerminal = useOpenLocalTerminal()
   const navCustomization = useNavCustomization()
+  // Hand off to a host-owned URL. The host's `onHostNavigate` (Radar Cloud's
+  // cross-tree swap) navigates same-document so the chrome morphs instead of
+  // cold-booting; without it we fall back to a hard `window.location` nav.
+  const goHost = useCallback(
+    (url: string) => {
+      if (navCustomization.onHostNavigate) navCustomization.onHostNavigate(url)
+      else window.location.assign(url)
+    },
+    [navCustomization],
+  )
+  // Resolve every host-takeover URL ONCE (memoized on navCustomization) so the
+  // setMainView intercept, redirect effect, nav-pill filtering, inline-view
+  // gating, and the cert click handler all consume the SAME value — host
+  // callbacks aren't guaranteed idempotent (scope / flags / signed URLs can
+  // shift between calls). undefined = not taken over → Radar renders the view
+  // itself. `clusterChecksHref` is the deprecated pre-1.7 hook, folded into the
+  // 'checks' target for back-compat.
+  const takeover: Record<FleetTakeoverTarget, string | undefined> = useMemo(
+    () => ({
+      issues: navCustomization.fleetTakeoverHref?.('issues'),
+      gitops: navCustomization.fleetTakeoverHref?.('gitops'),
+      checks: navCustomization.fleetTakeoverHref?.('checks') ?? navCustomization.clusterChecksHref?.(),
+      certs: navCustomization.fleetTakeoverHref?.('certs'),
+    }),
+    [navCustomization],
+  )
   const { pinned: navRailPinned, togglePinned: toggleNavRailPinned } = useNavRailPinned()
   // Standalone Radar gets the left nav rail; embedded hosts (Radar Hub) own
   // the left chrome via their own fleet rail and keep Radar's top-bar pills.
@@ -258,6 +298,20 @@ function AppInner() {
 
   // Set mainView by navigating to the path
   const setMainView = useCallback((view: ExtendedMainView, params?: Record<string, string>) => {
+    // Host takeover: fleet-shaped views (issues/gitops/checks) are owned by the
+    // host's fleet pages. Hand straight to the host instead of navigating to
+    // our own /<view> first — that intermediate hop mounts the view machinery
+    // and flashes the "Opening…" splash before the redirect effect bounces out.
+    // Skipping it makes the hand-off a single smooth cross-tree swap. (Direct
+    // /<view> URL entry still funnels through the redirect effect below.)
+    if (view === 'issues' || view === 'gitops' || view === 'checks') {
+      const href = takeover[view]
+      if (href) {
+        goHost(href)
+        return
+      }
+    }
+
     const path = view === 'home' ? '/' : `/${view}`
 
     // Start fresh — keep only cross-view params (namespaces), discard all view-specific ones
@@ -275,32 +329,15 @@ function AppInner() {
     }
 
     navigate({ pathname: path, search: newParams.toString() })
-  }, [navigate, searchParams])
+  }, [navigate, searchParams, takeover, goHost])
 
   // Cloud (embedded) takes over the "fleet-shaped" per-cluster views with its
   // own fleet pages scoped to this cluster — owned by the host's left rail — so
-  // Radar drops the matching pills (see the nav below) and any route into one
-  // of these views redirects to the host. Entry points that still land on the
-  // view — Home cards, ⌘K, WorkloadView's "view all" findings, bookmarks/deep
-  // links — all funnel through here. The view name doubles as the takeover
-  // target ('issues' | 'gitops' | 'checks'; 'audit' normalizes to 'checks' via
-  // getViewFromPath). `replace` (not assign) keeps the transient /<view> URL
-  // out of history so Back doesn't bounce off the redirect. Standalone OSS (no
-  // fleetTakeoverHref) is unaffected and renders the in-app view as before.
-  // Resolve every takeover target's host URL ONCE per render so the redirect
-  // effect, nav-pill filtering, inline-view gating, and the cert click handler
-  // all close over the SAME value — host callbacks aren't guaranteed idempotent
-  // (scope / flags / signed URLs can shift between calls). undefined = not taken
-  // over → Radar renders the view itself. `clusterChecksHref` is the deprecated
-  // pre-1.7 hook, folded into the 'checks' target for back-compat.
-  const fleetTakeoverHref = navCustomization.fleetTakeoverHref
-  const clusterChecksHref = navCustomization.clusterChecksHref
-  const takeover: Record<FleetTakeoverTarget, string | undefined> = {
-    issues: fleetTakeoverHref?.('issues'),
-    gitops: fleetTakeoverHref?.('gitops'),
-    checks: fleetTakeoverHref?.('checks') ?? clusterChecksHref?.(),
-    certs: fleetTakeoverHref?.('certs'),
-  }
+  // Radar drops the matching pills (see the nav below). In-app nav hands off in
+  // setMainView (above); direct /<view> URL entry funnels through the redirect
+  // effect below. Both consume the memoized `takeover` resolved above. Standalone
+  // OSS (no fleetTakeoverHref) is unaffected and renders the in-app view.
+  //
   // Has the host claimed this view? View-shaped targets only ('certs' has no
   // Radar view — only its Home card consults `takeover`). Used to drop the nav
   // pill and gate the inline view render in favor of the "Opening…" splash.
@@ -387,6 +424,9 @@ function AppInner() {
   // selected drawer resource. This covers both in-view kind switches and
   // cross-kind navigations from expanded drawers (for example Node -> View Pods).
   const prevResourcesKindKeyRef = useRef<string | null>(null)
+  // Owner-key (pathname + ?app) a non-URL-backed peek was opened on; see
+  // navigateToResource and peekOwnerKey.
+  const peekOwnerKeyRef = useRef<string | null>(null)
   const currentResourceKindSlug = normalizedResourcesKindSlug.toLowerCase()
   const currentResourceGroup = searchParams.get('apiGroup') ?? ''
   const selectedResourceKindSlug = selectedResource ? kindToPlural(selectedResource.kind).toLowerCase() : ''
@@ -398,9 +438,28 @@ function AppInner() {
   const resourcesKindRouteChanged = mainView === 'resources' &&
     prevResourcesKindKeyRef.current !== null &&
     prevResourcesKindKeyRef.current !== `${currentResourceGroup}/${currentResourceKindSlug}`
-  const routeSelectedResource = resourcesKindRouteChanged && selectedResourceRouteMismatch
-    ? null
-    : selectedResource
+
+  // A peek opened outside /resources (topology, GitOps, Applications) carries no
+  // URL backing, so the only signal that the page beneath it has navigated is
+  // that its owner-key (pathname + ?app) no longer matches where it was opened.
+  // Hiding it here, at render time, closes the orphan on Back without adding
+  // another clearing effect that would race the `suppressViewClearRef` lifecycle.
+  // The /resources case is URL-backed and handled above; an expanded drawer
+  // (drawerExpanded) legitimately lives at /workload and must stay open there.
+  const peekRouteOrphaned = !!selectedResource && !drawerExpanded && mainView !== 'resources' &&
+    peekOwnerKeyRef.current !== null &&
+    peekOwnerKeyRef.current !== peekOwnerKey(location.pathname, location.search)
+
+  // In Applications the inline WorkloadView (?workload) and the peek drawer are
+  // mutually exclusive — never two detail surfaces at once. ?workload is the
+  // single source of truth: while it's set the peek yields to the inline view.
+  // (Opening a child peek from Applications clears ?workload, see onOpenResource.)
+  const appsInlineWorkloadActive = mainView === 'applications' && searchParams.has('workload')
+
+  const routeSelectedResource =
+    (resourcesKindRouteChanged && selectedResourceRouteMismatch) || peekRouteOrphaned || appsInlineWorkloadActive
+      ? null
+      : selectedResource
 
   useEffect(() => {
     if (mainView !== 'resources') {
@@ -435,6 +494,13 @@ function AppInner() {
 
   // Navigate to a resource — uses View Transitions cross-fade when drawer is already open
   const navigateToResource = useCallback((res: SelectedResource, tab: 'detail' | 'yaml' = 'detail') => {
+    // Record the page this peek was opened on. Outside /resources the drawer is
+    // not URL-backed, so this ref is what lets the render-time gate below close
+    // the peek when the page under it changes (e.g. browser Back off a GitOps
+    // detail page, or Applications detail → list via ?app). window.location is
+    // read (not the `location` closure) so the value is always current
+    // regardless of this callback's memoization.
+    peekOwnerKeyRef.current = peekOwnerKey(window.location.pathname, window.location.search)
     const update = () => { setDrawerInitialTab(tab); setSelectedResource(res) }
     // Skip the cross-fade animation entirely on first open (no
     // `selectedResource`); otherwise route through
@@ -897,7 +963,7 @@ function AppInner() {
       name: node.name,
       group: apiVersionToGroup(node.data.apiVersion as string | undefined),
     })
-  }, [navigate])
+  }, [navigate, navigateToResource])
 
   // Serialize namespaces for stable dependency tracking
   const namespacesKey = namespaces.join(',')
@@ -1113,6 +1179,11 @@ function AppInner() {
       // Switching to specific namespaces - disable namespace grouping
       setGroupingMode('none')
     }
+    // Intentionally runs ONLY when the namespace selection changes. It reads the
+    // current groupingMode but must not re-run when grouping changes, or it would
+    // immediately revert a manual/fleet grouping choice. namespacesKey is the
+    // manual dependency standing in for the namespaces array.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [namespacesKey])
 
   // Clear resource selection when changing views or namespaces
@@ -1307,14 +1378,15 @@ function AppInner() {
                 </span>
               )}
               {!connected && (
+                <Tooltip content="Reconnect">
                 <button
                   onClick={reconnect}
                   disabled={isReconnecting}
-                  className="p-1 text-theme-text-secondary hover:text-theme-text-primary disabled:opacity-50"
-                  title="Reconnect"
+                  className="p-1 text-theme-text-secondary hover:text-theme-text-primary disabled:opacity-50 disabled:pointer-events-none"
                 >
                   <RefreshCw className={`w-3 h-3 ${isReconnecting ? 'animate-spin' : ''}`} />
                 </button>
+                </Tooltip>
               )}
             </div>
             {/* Port forwards indicator — shown only when sessions exist */}
@@ -1433,13 +1505,14 @@ function AppInner() {
 
           {/* Local terminal */}
           {capabilities.localTerminal && (
+            <Tooltip content="Open local terminal">
             <button
               onClick={() => openLocalTerminal()}
               className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-              title="Open local terminal"
             >
               <SquareTerminal className="w-4 h-4" />
             </button>
+            </Tooltip>
           )}
 
           {/* Theme toggle — hidden in embedded mode. Host apps (e.g. Radar
@@ -1459,20 +1532,22 @@ function AppInner() {
               old floating bottom-right pair. Settings moved to the rail bottom. */}
           {showNavRail && (
             <>
+              <Tooltip content="Keyboard shortcuts (?)">
               <button
                 onClick={() => setShowHelp(true)}
                 className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-                title="Keyboard shortcuts (?)"
               >
                 <HelpCircle className="w-4 h-4" />
               </button>
+              </Tooltip>
+              <Tooltip content="Report a bug / Diagnostics">
               <button
                 onClick={() => setShowDiagnostics(true)}
                 className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-                title="Report a bug / Diagnostics"
               >
                 <Bug className="w-4 h-4" />
               </button>
+              </Tooltip>
             </>
           )}
 
@@ -1641,7 +1716,7 @@ function AppInner() {
             // belongs in history. Omitted → the card falls back to Radar's own
             // TLS-secrets resource list.
             onNavigateToCerts={
-              takeover.certs ? () => window.location.assign(takeover.certs!) : undefined
+              takeover.certs ? () => goHost(takeover.certs!) : undefined
             }
           />
         )}
@@ -1802,7 +1877,10 @@ function AppInner() {
           <GitOpsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
-              setSelectedResource(resource)
+              // Route through navigateToResource so the peek records the page it
+              // opened on — that's what lets Back off the GitOps detail page close
+              // the drawer instead of orphaning it on the list.
+              navigateToResource(resource)
             }}
             onClearNamespaces={clearAllNamespaces}
           />
@@ -1813,7 +1891,17 @@ function AppInner() {
           <ApplicationsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
-              setSelectedResource(resource)
+              // The peek and the inline WorkloadView are mutually exclusive: drop
+              // the inline workload selection so the app graph (not a second
+              // detail panel) sits behind the peek. Search-only change keeps the
+              // pathname — and thus the peek's owner-path — intact.
+              const params = new URLSearchParams(window.location.search)
+              if (params.has('workload') || params.has('tab')) {
+                params.delete('workload')
+                params.delete('tab')
+                navigate({ pathname: window.location.pathname, search: params.toString() }, { replace: true })
+              }
+              navigateToResource(resource)
             }}
           />
         )}
@@ -1834,9 +1922,26 @@ function AppInner() {
             own fetches) while the cross-document nav lands. Covers checks /
             issues / gitops with one block since only one view is active. */}
         {viewTakeoverHref && (
-          <div className="flex-1 flex flex-col items-center justify-center gap-3 bg-theme-base">
-            <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-            <p className="text-sm text-theme-text-secondary">Opening…</p>
+          <div className="flex-1 relative bg-theme-base">
+            {/* Viewport-anchored, 17px — identical to the "Connecting" splash so
+                the mark doesn't move or resize across the takeover hand-off. */}
+            <div className="fixed inset-0 pointer-events-none">
+              <img
+                src={radarLoadingIcon}
+                alt=""
+                aria-hidden
+                className="absolute w-11 h-11"
+                style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
+              />
+              <div
+                className="absolute left-1/2 -translate-x-1/2 text-center"
+                style={{ top: 'calc(50% + 34px)' }}
+              >
+                <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
+                  Opening…
+                </p>
+              </div>
+            </div>
           </div>
         )}
 
@@ -2243,10 +2348,10 @@ function ThemeToggle() {
   const { theme, toggleTheme } = useTheme()
 
   return (
+    <Tooltip content={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}>
     <button
       onClick={toggleTheme}
       className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-      title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
     >
       {theme === 'dark' ? (
         <Sun className="w-4 h-4" />
@@ -2254,6 +2359,7 @@ function ThemeToggle() {
         <Moon className="w-4 h-4" />
       )}
     </button>
+    </Tooltip>
   )
 }
 

package/src/api/client.ts

@@ -1509,7 +1509,7 @@ export function useAutoPromConnect(): void {
     if (attemptedRef.current === context) return
     let cached: string | null = null
     try { cached = window.localStorage.getItem(promAutoConnectKey(context)) } catch {
-      cached = null
+      // keep the null fallback
     }
 
     attemptedRef.current = context
@@ -3048,7 +3048,7 @@ export function useSwitchContext() {
       } catch (error) {
         clearTimeout(timeoutId)
         if (error instanceof Error && error.name === 'AbortError') {
-          throw new Error('Context switch timed out. The cluster may be unreachable.')
+          throw new Error('Context switch timed out. The cluster may be unreachable.', { cause: error })
         }
         throw error
       }
@@ -3151,7 +3151,7 @@ export function useSetActiveNamespace() {
           error: error instanceof Error ? error.message : String(error),
         })
         if (error instanceof Error && error.name === 'AbortError') {
-          throw new Error('Namespace switch timed out. The cluster may be unreachable.')
+          throw new Error('Namespace switch timed out. The cluster may be unreachable.', { cause: error })
         }
         throw error
       }

package/src/components/ConnectionErrorView.tsx

@@ -5,6 +5,7 @@ import { ContextSwitcher } from './ContextSwitcher'
 import { parseContextName } from '../utils/context-name'
 import { useOpenLocalTerminal, ClusterName } from '@skyhook-io/k8s-ui'
 import { useAuthMe } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
 
 interface ConnectionErrorViewProps {
   connection: ConnectionState
@@ -137,18 +138,19 @@ function CopyableCommand({ command, onRunInTerminal }: { command: string; onRunI
         {command}
       </code>
       {onRunInTerminal && (
+        <Tooltip content="Run in terminal" wrapperClassName="shrink-0">
         <button
           onClick={() => onRunInTerminal(command)}
           className="shrink-0 text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-          title="Run in terminal"
         >
           <TerminalSquare className="w-3.5 h-3.5" />
         </button>
+        </Tooltip>
       )}
+      <Tooltip content="Copy to clipboard" wrapperClassName="shrink-0">
       <button
         onClick={handleCopy}
         className="shrink-0 text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-        title="Copy to clipboard"
       >
         {copied ? (
           <Check className="w-3.5 h-3.5 text-green-400" />
@@ -156,6 +158,7 @@ function CopyableCommand({ command, onRunInTerminal }: { command: string; onRunI
           <Copy className="w-3.5 h-3.5" />
         )}
       </button>
+      </Tooltip>
     </div>
   )
 }

package/src/components/DebugOverlay.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Bug, X, ChevronDown, ChevronUp } from 'lucide-react'
 import { useRuntimeStats } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
 
 function formatUptime(seconds: number): string {
   if (seconds < 60) return `${seconds}s`
@@ -17,13 +18,14 @@ export function DebugOverlay() {
 
   if (!visible) {
     return (
+      <Tooltip content="Show debug stats" position="left" wrapperClassName="fixed bottom-3 right-3 z-50">
       <button
         onClick={() => setVisible(true)}
-        className="fixed bottom-3 right-3 z-50 p-2 bg-theme-surface/90 border border-theme-border rounded-lg text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-        title="Show debug stats"
+        className="p-2 bg-theme-surface/90 border border-theme-border rounded-lg text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
       >
         <Bug className="w-4 h-4" />
       </button>
+      </Tooltip>
     )
   }
 
@@ -86,7 +88,7 @@ export function DebugOverlay() {
             )}
           </>
         ) : (
-          <span className="text-theme-text-tertiary">Loading...</span>
+          <span className="text-theme-text-tertiary">Loading…</span>
         )}
       </div>
     </div>

package/src/components/UserMenu.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useCallback } from 'react'
 import { User, LogOut } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useAuthMe } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
 import { useQueryClient } from '@tanstack/react-query'
 
 interface UserMenuProps {
@@ -67,9 +68,9 @@ export function UserMenu({ variant = 'topbar', pinned = true }: UserMenuProps =
   return (
     <div ref={menuRef} className={clsx('relative', isRail && 'group/item', isRail && !pinned && 'w-10')}>
       {isRail ? (
+        <Tooltip content={authMe.username} position="right" wrapperClassName="!block w-full">
         <button
           onClick={() => setIsOpen(!isOpen)}
-          title={authMe.username}
           className={clsx(
             'relative flex h-9 w-full items-center rounded-md text-sm font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary transition-colors',
             !pinned && 'max-w-10 overflow-hidden',
@@ -78,14 +79,16 @@ export function UserMenu({ variant = 'topbar', pinned = true }: UserMenuProps =
           <span className="flex w-10 shrink-0 items-center justify-center">{avatar}</span>
           <span className={clsx('pr-3 truncate', !pinned && 'opacity-0')}>{authMe.username.split('@')[0]}</span>
         </button>
+        </Tooltip>
       ) : (
+        <Tooltip content={authMe.username}>
         <button
           onClick={() => setIsOpen(!isOpen)}
           className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium hover:bg-blue-500/25 transition-colors"
-          title={authMe.username}
         >
           {initials || <User className="w-3.5 h-3.5" />}
         </button>
+        </Tooltip>
       )}
 
       {/* Slim-rail fly-out label (account row, collapsed) */}

package/src/components/applications/ApplicationsView.tsx

@@ -28,7 +28,7 @@ interface ApplicationsViewProps {
 
 export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsViewProps) {
   const query = useApplications(namespaces)
-  const apps = query.data?.applications ?? []
+  const apps = useMemo(() => query.data?.applications ?? [], [query.data])
 
   // Which app is open lives in the URL (?app=<key>) so the detail view is
   // deep-linkable and the browser back button returns to the list. Opening or

package/src/components/audit/AuditSettingsDialog.tsx

@@ -4,6 +4,7 @@ import { clsx } from 'clsx'
 import { useAuditSettings, useUpdateAuditSettings, useAudit, useCloudRole } from '../../api/client'
 import type { CheckMeta } from '@skyhook-io/k8s-ui'
 import { validateRFC1123Label, type ValidationResult } from '@skyhook-io/k8s-ui/utils/validators'
+import { Tooltip } from '../ui/Tooltip'
 
 interface AuditSettingsDialogProps {
   namespaces: string[]
@@ -192,6 +193,17 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
           >
             Cancel
           </button>
+          <Tooltip
+            content={
+              !canEdit
+                ? 'Audit settings can only be changed by owners'
+                : newNsError
+                  ? 'Fix or clear the pending namespace input before saving'
+                  : newNsDuplicate
+                    ? 'Clear the duplicate pending input before saving'
+                    : ''
+            }
+          >
           <button
             onClick={handleSave}
             // Block save while the namespace input has unfixed pending
@@ -200,19 +212,11 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
             disabled={
               !canEdit || updateSettings.isPending || newNsError !== null || newNsDuplicate
             }
-            title={
-              !canEdit
-                ? 'Audit settings can only be changed by owners'
-                : newNsError
-                  ? 'Fix or clear the pending namespace input before saving'
-                  : newNsDuplicate
-                    ? 'Clear the duplicate pending input before saving'
-                    : undefined
-            }
-            className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
           >
             {updateSettings.isPending ? 'Saving...' : 'Save'}
           </button>
+          </Tooltip>
         </div>
       </div>
     </div>

package/src/components/audit/AuditView.tsx

@@ -4,6 +4,7 @@ import type { SelectedResource } from '../../types'
 import { ChecksView, PaneLoader, PageHeader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
 import { ShieldCheck, Settings } from 'lucide-react'
 import { AuditSettingsDialog } from './AuditSettingsDialog'
+import { Tooltip } from '../ui/Tooltip'
 
 interface AuditViewProps {
   namespaces: string[]
@@ -82,13 +83,14 @@ export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps)
             {ignoredCount > 0 && (
               <button onClick={() => setShowSettings(true)} className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors">{ignoredCount} {ignoredCount === 1 ? 'namespace' : 'namespaces'} hidden</button>
             )}
+            <Tooltip content="Checks settings">
             <button
               onClick={() => setShowSettings(true)}
               className="p-2 rounded-lg hover:bg-theme-hover text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-              title="Checks settings"
             >
               <Settings className="w-4 h-4" />
             </button>
+            </Tooltip>
           </>
         }
       />

package/src/components/compare/CompareViewRoute.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import {
   ResourceCompareView,
@@ -23,13 +23,21 @@ export function CompareViewRoute() {
   // reserved for topology grouping mode and gets stripped by App.tsx's URL
   // sync on every non-topology view.
   const group = searchParams.get('apiGroup') ?? undefined
-  const aParsed = parseRef(searchParams.get('a'))
-  const bParsed = parseRef(searchParams.get('b'))
+  const aRaw = searchParams.get('a')
+  const bRaw = searchParams.get('b')
 
   const [pickerOpen, setPickerOpen] = useState<CompareSide | null>(null)
 
-  const a: CompareResourceRef | null = aParsed ? { kind, namespace: aParsed.namespace, name: aParsed.name, group } : null
-  const b: CompareResourceRef | null = bParsed ? { kind, namespace: bParsed.namespace, name: bParsed.name, group } : null
+  // Memoized so the refs keep a stable identity across renders — otherwise the
+  // useCallbacks below (which depend on a/b) would be rebuilt every render.
+  const a: CompareResourceRef | null = useMemo(() => {
+    const p = parseRef(aRaw)
+    return p ? { kind, namespace: p.namespace, name: p.name, group } : null
+  }, [aRaw, kind, group])
+  const b: CompareResourceRef | null = useMemo(() => {
+    const p = parseRef(bRaw)
+    return p ? { kind, namespace: p.namespace, name: p.name, group } : null
+  }, [bRaw, kind, group])
 
   const aQuery = useResource<unknown>(a?.kind ?? '', a?.namespace ?? '', a?.name ?? '', a?.group)
   const bQuery = useResource<unknown>(b?.kind ?? '', b?.namespace ?? '', b?.name ?? '', b?.group)