@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/audit/AuditSettingsDialog.tsx

@@ -1,7 +1,11 @@
-import { useState, useEffect } from 'react'
-import { X, Plus, Trash2 } from 'lucide-react'
-import { useAuditSettings, useUpdateAuditSettings, useAudit } from '../../api/client'
+import { useState, useEffect, useMemo } from 'react'
+import { X, Plus, Trash2, Lock } from 'lucide-react'
+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'
+import { Input } from '@skyhook-io/k8s-ui'
 
 interface AuditSettingsDialogProps {
   namespaces: string[]
@@ -12,6 +16,11 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
   const { data: settings } = useAuditSettings()
   const { data: auditData } = useAudit(namespaces)
   const updateSettings = useUpdateAuditSettings()
+  // Audit policy is cluster-shared, so writes are owner-gated (enforced
+  // server-side too). Non-owners get a read-only view. Non-Cloud callers
+  // have no role and pass.
+  const { canAtLeast } = useCloudRole()
+  const canEdit = canAtLeast('owner')
   const [ignoredNs, setIgnoredNs] = useState<string[]>([])
   const [disabledChecks, setDisabledChecks] = useState<string[]>([])
   const [newNs, setNewNs] = useState('')
@@ -28,12 +37,23 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
     ? Object.values(auditData.checks).sort((a, b) => a.title.localeCompare(b.title))
     : []
 
+  // Validate the staged namespace input against RFC 1123. Saving a bogus
+  // entry would silently never match anything in the audit pipeline,
+  // leaving the user thinking the ignore filter doesn't work.
+  const newNsTrimmed = newNs.trim()
+  const newNsValidation = useMemo<ValidationResult>(
+    () => (newNsTrimmed === '' ? { valid: true } : validateRFC1123Label(newNsTrimmed)),
+    [newNsTrimmed],
+  )
+  const newNsError = newNsValidation.valid ? null : newNsValidation.error
+  const newNsDuplicate = newNsTrimmed !== '' && ignoredNs.includes(newNsTrimmed)
+  const canAddNamespace =
+    newNsTrimmed !== '' && newNsValidation.valid && !newNsDuplicate
+
   const addNamespace = () => {
-    const ns = newNs.trim()
-    if (ns && !ignoredNs.includes(ns)) {
-      setIgnoredNs([...ignoredNs, ns])
-      setNewNs('')
-    }
+    if (!canAddNamespace) return
+    setIgnoredNs([...ignoredNs, newNsTrimmed])
+    setNewNs('')
   }
 
   const toggleCheck = (checkID: string) => {
@@ -55,13 +75,22 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
       <div className="bg-theme-surface rounded-xl shadow-xl w-full max-w-lg mx-4 max-h-[80vh] flex flex-col" onClick={e => e.stopPropagation()}>
         <div className="flex items-center justify-between px-5 py-4 border-b border-theme-border shrink-0">
-          <h2 className="text-sm font-semibold text-theme-text-primary">Audit Settings</h2>
+          <h2 className="text-sm font-semibold text-theme-text-primary">Checks Settings</h2>
           <button onClick={onClose} className="p-1 rounded-lg hover:bg-theme-hover transition-colors">
             <X className="w-4 h-4 text-theme-text-tertiary" />
           </button>
         </div>
 
         <div className="px-5 py-4 overflow-y-auto flex-1">
+          {!canEdit && (
+            <div className="mb-4 rounded-lg border border-theme-border bg-theme-elevated/50 p-3 flex items-start gap-2.5">
+              <Lock className="w-3.5 h-3.5 mt-0.5 shrink-0 text-theme-text-tertiary" />
+              <p className="text-xs text-theme-text-tertiary">
+                Audit policy is shared across everyone using this Radar instance, so editing
+                is limited to owners. You can review the current settings here.
+              </p>
+            </div>
+          )}
           {/* Ignored Namespaces */}
           <div className="mb-6">
             <label className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider">
@@ -77,7 +106,8 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                   <span className="text-sm text-theme-text-primary">{ns}</span>
                   <button
                     onClick={() => setIgnoredNs(ignoredNs.filter(n => n !== ns))}
-                    className="p-1 rounded hover:bg-theme-hover text-theme-text-tertiary hover:text-red-400 transition-colors"
+                    disabled={!canEdit}
+                    className="p-1 rounded hover:bg-theme-hover text-theme-text-tertiary hover:text-red-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-theme-text-tertiary"
                   >
                     <Trash2 className="w-3.5 h-3.5" />
                   </button>
@@ -89,22 +119,36 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
             </div>
 
             <div className="flex gap-2">
-              <input
-                type="text"
+              <Input
                 value={newNs}
                 onChange={e => setNewNs(e.target.value)}
                 onKeyDown={e => { if (e.key === 'Enter') addNamespace() }}
                 placeholder="Add namespace..."
-                className="flex-1 px-3 py-1.5 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-skyhook-500"
+                disabled={!canEdit}
+                aria-invalid={newNsError ? true : undefined}
+                aria-describedby="new-ns-help"
+                className={clsx(
+                  'flex-1 px-3 py-1.5 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                  newNsError || newNsDuplicate
+                    ? 'border-red-500/60 focus:ring-red-500'
+                    : 'border-theme-border-light focus:ring-skyhook-500',
+                )}
               />
               <button
                 onClick={addNamespace}
-                disabled={!newNs.trim()}
+                disabled={!canEdit || !canAddNamespace}
                 className="px-3 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <Plus className="w-4 h-4" />
               </button>
             </div>
+            {(newNsError || newNsDuplicate) && (
+              <p id="new-ns-help" className="mt-1.5 text-xs text-red-400">
+                {newNsDuplicate
+                  ? `"${newNsTrimmed}" is already in the list.`
+                  : `Namespace ${newNsError}.`}
+              </p>
+            )}
           </div>
 
           {/* Disabled Checks */}
@@ -128,7 +172,8 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                       type="checkbox"
                       checked={!disabled}
                       onChange={() => toggleCheck(check.id)}
-                      className="w-4 h-4 rounded border-theme-border text-skyhook-500 focus:ring-skyhook-500"
+                      disabled={!canEdit}
+                      className="w-4 h-4 rounded border-theme-border text-skyhook-500 focus:ring-skyhook-500 disabled:opacity-40 disabled:cursor-not-allowed"
                     />
                     <div className="flex-1 min-w-0">
                       <span className="text-sm text-theme-text-primary">{check.title}</span>
@@ -148,13 +193,30 @@ 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}
-            disabled={updateSettings.isPending}
-            className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50"
+            // Block save while the namespace input has unfixed pending
+            // text — otherwise the user clicks Save expecting their
+            // entry to be included and it's silently dropped.
+            disabled={
+              !canEdit || updateSettings.isPending || newNsError !== null || newNsDuplicate
+            }
+            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

@@ -1,25 +1,39 @@
 import { useState, useCallback } from 'react'
-import { useAudit, useAuditSettings, useUpdateAuditSettings } from '../../api/client'
+import { useAudit, useAuditSettings, useUpdateAuditSettings, useCloudRole } from '../../api/client'
 import type { SelectedResource } from '../../types'
-import { AuditFindingsTable, PaneLoader } from '@skyhook-io/k8s-ui'
-import { ArrowLeft, ClipboardCheck, Settings } from 'lucide-react'
+import { ChecksView, PaneLoader, PageHeader, FreshnessControl, type CheckResourceRef } from '@skyhook-io/k8s-ui'
+import { ShieldCheck, Settings } from 'lucide-react'
 import { AuditSettingsDialog } from './AuditSettingsDialog'
+import { Tooltip } from '../ui/Tooltip'
+import { useConnection } from '../../context/ConnectionContext'
 
 interface AuditViewProps {
   namespaces: string[]
-  onBack: () => void
   onNavigateToResource: (resource: SelectedResource) => void
 }
 
-export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditViewProps) {
-  const { data, isLoading, error } = useAudit(namespaces)
+// The per-cluster Checks surface. Renders the same shared remediation queue
+// (ChecksView) the Hub fleet view uses — single cluster here, so no cluster
+// label and in-app (client-side) resource navigation. The rollup + priority
+// come pre-computed from radar's /api/audit (pkg/audit.BuildChecks); local
+// ~/.radar settings are this cluster's "policy" and the row hide-menu writes to
+// them.
+export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps) {
+  const { data, isLoading, error, dataUpdatedAt, refetch } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
   const updateSettings = useUpdateAuditSettings()
+  // Audit policy is owner-gated (enforced server-side). Withhold the inline
+  // hide affordances from non-owners so they don't click into a 403 — the
+  // hide menus render only when these callbacks are passed.
+  const { canAtLeast } = useCloudRole()
+  const canEdit = canAtLeast('owner')
   const [showSettings, setShowSettings] = useState(false)
 
   const ignoredCount = auditSettings?.ignoredNamespaces?.length ?? 0
 
-  // Inline hide actions — persist to settings immediately
+  const { connection } = useConnection()
+
+  // Inline hide actions — persist to local settings immediately.
   const hideCheck = useCallback((checkID: string) => {
     if (!auditSettings) return
     const current = auditSettings.disabledChecks || []
@@ -29,31 +43,23 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
 
   const hideCategory = useCallback((category: string) => {
     if (!auditSettings || !data?.checks) return
-    const checksInCategory = Object.values(data.checks).filter(c => {
-      // Match checks whose findings are in this category
-      return data.findings.some(f => f.checkID === c.id && f.category === category)
-    }).map(c => c.id)
+    const checksInCategory = Object.values(data.checks)
+      .filter((c) => data.findings.some((f) => f.checkID === c.id && f.category === category))
+      .map((c) => c.id)
     const current = auditSettings.disabledChecks || []
-    const toAdd = checksInCategory.filter(id => !current.includes(id))
+    const toAdd = checksInCategory.filter((id) => !current.includes(id))
     if (toAdd.length === 0) return
     updateSettings.mutate({ ...auditSettings, disabledChecks: [...current, ...toAdd] })
   }, [auditSettings, data, updateSettings])
 
-  const hideNamespace = useCallback((ns: string) => {
-    if (!auditSettings) return
-    const current = auditSettings.ignoredNamespaces || []
-    if (current.includes(ns)) return
-    updateSettings.mutate({ ...auditSettings, ignoredNamespaces: [...current, ns] })
-  }, [auditSettings, updateSettings])
-
   if (isLoading) {
-    return <PaneLoader label="Loading audit data…" className="flex-1" />
+    return <PaneLoader label="Loading checks…" className="flex-1" />
   }
 
   if (error) {
     return (
       <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
-        <p>Failed to load audit data</p>
+        <p>Failed to load checks</p>
       </div>
     )
   }
@@ -61,53 +67,50 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
   if (!data) {
     return (
       <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
-        <p>No audit data available</p>
+        <p>No check data available</p>
       </div>
     )
   }
 
-  return (
-    <div className="flex-1 flex flex-col min-h-0 p-6 gap-6 overflow-auto">
-      {/* Header */}
-      <div className="flex items-center gap-4">
-        <button
-          onClick={onBack}
-          className="p-1.5 rounded-lg hover:bg-theme-hover transition-colors"
-        >
-          <ArrowLeft className="w-5 h-5 text-theme-text-secondary" />
-        </button>
-        <div className="flex-1">
-          <div className="flex items-center gap-2">
-            <ClipboardCheck className="w-5 h-5 text-theme-text-secondary" />
-            <h1 className="text-lg font-semibold text-theme-text-primary">Cluster Audit</h1>
-          </div>
-          <p className="text-sm text-theme-text-tertiary mt-1 ml-7">
-            Security, reliability, and efficiency checks based on Kubernetes best practices from NSA/CISA guidelines, CIS benchmarks, and industry tools like Polaris and Kubescape.
-          </p>
-        </div>
-        <div className="flex items-center gap-2 shrink-0">
-          {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>
-          )}
-          <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="Audit settings"
-          >
-            <Settings className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
+  const onResourceClick = (ref: CheckResourceRef) =>
+    onNavigateToResource({ kind: ref.kind, namespace: ref.namespace, name: ref.name, group: ref.group })
 
-      <AuditFindingsTable
-        groups={data.groups}
-        checks={data.checks}
-        onResourceClick={(kind, namespace, name) =>
-          onNavigateToResource({ kind, namespace, name })
+  return (
+    <div className="flex-1 flex flex-col min-h-0 p-4 gap-4 overflow-auto">
+      <PageHeader
+        icon={ShieldCheck}
+        title="Checks"
+        description="Security, reliability, and efficiency best practices (NSA/CISA, CIS, Polaris, Kubescape), grouped into a remediation queue."
+        actions={
+          <>
+            <FreshnessControl
+              mode="auto"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+            />
+            {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"
+            >
+              <Settings className="w-4 h-4" />
+            </button>
+            </Tooltip>
+          </>
         }
-        onHideCheck={hideCheck}
-        onHideCategory={hideCategory}
-        onHideNamespace={hideNamespace}
+      />
+
+      <ChecksView
+        checks={data.groupedChecks ?? []}
+        catalog={data.checks ?? {}}
+        anyData
+        onResourceClick={onResourceClick}
+        onHideCheck={canEdit ? hideCheck : undefined}
+        onHideCategory={canEdit ? hideCategory : undefined}
       />
 
       {showSettings && <AuditSettingsDialog namespaces={namespaces} onClose={() => setShowSettings(false)} />}

package/src/components/compare/CompareViewRoute.tsx

@@ -0,0 +1,124 @@
+import { useCallback, useMemo, useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import {
+  ResourceCompareView,
+  CompareResourcePicker,
+  parseRef,
+  refToParam,
+  type CompareResourceRef,
+  type CompareSide,
+  type CompareSideError,
+} from '@skyhook-io/k8s-ui'
+import { useResource } from '../../api/client'
+import { useTheme } from '../../context/ThemeContext'
+import { useCompareCandidates } from './useCompareCandidates'
+
+export function CompareViewRoute() {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { theme } = useTheme()
+
+  const kind = (searchParams.get('kind') ?? '').toLowerCase()
+  // Matches Radar's repo-wide URL convention. The bare `group` param is
+  // 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 aRaw = searchParams.get('a')
+  const bRaw = searchParams.get('b')
+
+  const [pickerOpen, setPickerOpen] = useState<CompareSide | null>(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)
+
+  const { candidates, isPending: candidatesPending, error: candidatesError } = useCompareCandidates(kind, group, !!pickerOpen)
+
+  const updateParam = useCallback(
+    (next: Record<string, string>) => {
+      const params = new URLSearchParams(searchParams)
+      for (const [k, v] of Object.entries(next)) params.set(k, v)
+      setSearchParams(params, { replace: true })
+    },
+    [searchParams, setSearchParams],
+  )
+
+  const handleSwap = useCallback(() => {
+    if (!a || !b) return
+    updateParam({ a: refToParam(b), b: refToParam(a) })
+  }, [a, b, updateParam])
+
+  const handleClose = useCallback(() => {
+    navigate(-1)
+  }, [navigate])
+
+  const handlePick = useCallback(
+    (picked: CompareResourceRef) => {
+      if (!pickerOpen) return
+      updateParam({ [pickerOpen]: refToParam({ namespace: picked.namespace, name: picked.name }) })
+      setPickerOpen(null)
+    },
+    [pickerOpen, updateParam],
+  )
+
+  if (!kind || !a || !b) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-theme-text-secondary gap-3 p-8">
+        <p className="text-sm">This compare link is missing required parameters.</p>
+        <button
+          onClick={() => navigate('/resources')}
+          className="px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
+        >
+          Back to resources
+        </button>
+      </div>
+    )
+  }
+
+  // A refetch failure with cached data is not worth shouting about — show the
+  // stale data instead of blanking the side with a misleading "failed" banner.
+  const errors: CompareSideError[] = []
+  if (aQuery.error && !aQuery.data) errors.push({ side: 'a', message: aQuery.error instanceof Error ? aQuery.error.message : String(aQuery.error) })
+  if (bQuery.error && !bQuery.data) errors.push({ side: 'b', message: bQuery.error instanceof Error ? bQuery.error.message : String(bQuery.error) })
+
+  const source = pickerOpen === 'a' ? a : pickerOpen === 'b' ? b : null
+
+  return (
+    <>
+      <ResourceCompareView
+        a={a}
+        b={b}
+        aData={aQuery.data}
+        bData={bQuery.data}
+        errors={errors}
+        editorTheme={theme === 'dark' ? 'vs-dark' : 'vs'}
+        onSwap={handleSwap}
+        onClose={handleClose}
+        onChangeA={() => setPickerOpen('a')}
+        onChangeB={() => setPickerOpen('b')}
+      />
+      {source && pickerOpen && (
+        <CompareResourcePicker
+          open={true}
+          onClose={() => setPickerOpen(null)}
+          source={source}
+          sourceSide={pickerOpen}
+          candidates={candidates}
+          loading={candidatesPending}
+          error={candidatesError}
+          onPick={handlePick}
+        />
+      )}
+    </>
+  )
+}

package/src/components/compare/useCompareCandidates.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import type { CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useResources } from '../../api/client'
+
+/**
+ * Fetch candidates for the compare picker — same kind as the source.
+ * Pass `enabled=false` when the picker is closed to avoid hitting the API.
+ */
+export function useCompareCandidates(kind: string, group: string | undefined, enabled: boolean) {
+  const query = useResources<{ metadata?: { name?: string; namespace?: string } }>(
+    enabled ? kind : '',
+    undefined,
+    group,
+  )
+  const candidates: CompareResourceRef[] = useMemo(() => {
+    if (!query.data) return []
+    return query.data
+      .filter(r => r?.metadata?.name)
+      .map(r => ({
+        kind,
+        namespace: r.metadata?.namespace ?? '',
+        name: r.metadata!.name!,
+        group,
+      }))
+  }, [query.data, kind, group])
+  return { candidates, isPending: query.isPending, error: query.error }
+}

package/src/components/compare/useCompareLauncher.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { CompareResourcePicker, refToParam, type CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useCompareCandidates } from './useCompareCandidates'
+import { useNavCustomization } from '../../context/NavCustomization'
+
+interface UseCompareLauncherArgs {
+  /** API plural kind (e.g. "deployments") — must match the route segment used by `/api/resources/{kind}`. */
+  kind: string
+  namespace: string
+  name: string
+  /** API group for the resource — required for CRDs that collide with core kinds. */
+  group?: string
+}
+
+interface CompareLauncher {
+  /** Wire this to ResourceActionsBar's `onCompareTo` prop. */
+  onCompareTo: () => void
+  /**
+   * Wire this to ResourceActionsBar's `onCompareAcrossClusters` prop. Undefined
+   * when the host (NavCustomization.crossClusterCompareHref) hasn't opted in
+   * — keeps the standalone Radar experience identical.
+   */
+  onCompareAcrossClusters?: () => void
+  /** Render this anywhere in the same tree to surface the picker dialog. */
+  picker: React.ReactNode
+}
+
+export function useCompareLauncher({ kind, namespace, name, group }: UseCompareLauncherArgs): CompareLauncher {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+  const kindLower = kind.toLowerCase()
+  const { candidates, isPending, error } = useCompareCandidates(kindLower, group, open)
+  const { crossClusterCompareHref, onHostNavigate } = useNavCustomization()
+
+  const onCompareTo = useCallback(() => setOpen(true), [])
+
+  const onCompareAcrossClusters = useCallback(() => {
+    if (!crossClusterCompareHref) return
+    const href = crossClusterCompareHref({ kind: kindLower, namespace, name, group })
+    // Smooth same-document hand-off when the host supports it (Radar Cloud's
+    // cross-tree swap), else a hard nav — same contract as App.tsx's goHost.
+    if (onHostNavigate) onHostNavigate(href)
+    else window.location.assign(href)
+  }, [crossClusterCompareHref, onHostNavigate, kindLower, namespace, name, group])
+
+  const handlePick = useCallback(
+    (picked: CompareResourceRef) => {
+      setOpen(false)
+      const params = new URLSearchParams()
+      params.set('kind', kindLower)
+      if (group) params.set('apiGroup', group)
+      params.set('a', refToParam({ namespace, name }))
+      params.set('b', refToParam({ namespace: picked.namespace, name: picked.name }))
+      navigate({ pathname: '/compare', search: params.toString() })
+    },
+    [navigate, kindLower, group, namespace, name],
+  )
+
+  const source: CompareResourceRef = { kind: kindLower, namespace, name, group }
+
+  const picker = (
+    <CompareResourcePicker
+      open={open}
+      onClose={() => setOpen(false)}
+      source={source}
+      candidates={candidates}
+      loading={open && isPending}
+      error={open ? error : null}
+      onPick={handlePick}
+    />
+  )
+
+  return {
+    onCompareTo,
+    onCompareAcrossClusters: crossClusterCompareHref ? onCompareAcrossClusters : undefined,
+    picker,
+  }
+}