@skyhook-io/radar-app 1.8.2 → 1.8.5

package/src/components/resources/renderers/ServiceRenderer.tsx

@@ -1,7 +1,9 @@
-import { useMemo } from 'react'
+import { useMemo, useState, useCallback } from 'react'
 import { ServiceRenderer as BaseServiceRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/ServiceRenderer'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
+import { CurlButton, CurlPanel, isHttpishPort, defaultScheme, defaultPathForPort } from '../../curl/ServiceCurlButton'
 import { useResources } from '../../../api/client'
+import { useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
 import type { ResourceRef } from '../../../types'
 
 interface ServiceRendererProps {
@@ -14,6 +16,24 @@ interface ServiceRendererProps {
 export function ServiceRenderer({ data, onCopy, copied, onNavigate }: ServiceRendererProps) {
   const namespace = data.metadata?.namespace
   const serviceName = data.metadata?.name
+  const { canPortForward } = useNamespacedCapabilities(namespace)
+  const isLocal = useIsLocalDeployment()
+  // Offer the port-forward affordance when a live forward is possible (local +
+  // RBAC) OR when we're not local — in-cluster/Cloud can't bind a local listener,
+  // but we still surface a copy-paste `kubectl port-forward` command.
+  const showPortForward = canPortForward || !isLocal
+  // Curl dials the Service directly from in-cluster, so it's only available when
+  // Radar runs in-cluster/Cloud — locally you'd port-forward instead.
+  const showCurl = !isLocal
+  // Which port's inline curl panel is open (one at a time). `closing` keeps the
+  // panel mounted through its collapse animation before we drop it.
+  const [curl, setCurl] = useState<{ port: number; closing: boolean } | null>(null)
+  const closeCurl = useCallback(() => {
+    setCurl((p) => (p ? { ...p, closing: true } : null))
+    // Only drop the panel if it's still the one closing. Opening another port
+    // (which sets closing:false) before this fires must not clear the new panel.
+    window.setTimeout(() => setCurl((p) => (p?.closing ? null : p)), 220)
+  }, [])
   const spec = data.spec || {}
   const shouldLoadEndpointSlices = Boolean(
     namespace &&
@@ -40,14 +60,40 @@ export function ServiceRenderer({ data, onCopy, copied, onNavigate }: ServiceRen
       endpointSlices={matchingEndpointSlices}
       endpointSlicesLoading={endpointSlicesLoading}
       onNavigate={onNavigate}
-      renderPortAction={({ namespace, serviceName, port, protocol }) => (
-        <PortForwardInlineButton
-          namespace={namespace}
-          serviceName={serviceName}
-          port={port}
-          protocol={protocol}
-        />
+      renderPortAction={({ port, name, appProtocol, protocol }) => (
+        <>
+          {showCurl && isHttpishPort(port, name, appProtocol, protocol) && (
+            <CurlButton
+              active={curl?.port === port && !curl.closing}
+              onClick={() => {
+                if (curl?.port === port && !curl.closing) closeCurl()
+                else setCurl({ port, closing: false })
+              }}
+            />
+          )}
+          {showPortForward && (
+            <PortForwardInlineButton
+              namespace={namespace}
+              serviceName={serviceName}
+              port={port}
+              protocol={protocol}
+            />
+          )}
+        </>
       )}
+      renderPortPanel={({ port, name, appProtocol }) =>
+        curl?.port === port ? (
+          <CurlPanel
+            namespace={namespace}
+            serviceName={serviceName}
+            port={port}
+            initialScheme={defaultScheme(port, name, appProtocol)}
+            initialPath={defaultPathForPort(port, name, appProtocol)}
+            open={!curl.closing}
+            onClose={closeCurl}
+          />
+        ) : null
+      }
     />
   )
 }

package/src/components/timeline/TimelineView.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef } from 'react'
-import { Network } from 'lucide-react'
+import { Network, AlertTriangle, RefreshCw } from 'lucide-react'
 import { TimelineList } from './TimelineList'
 import { TimelineSwimlanes } from './TimelineSwimlanes'
 import { useChanges, useTopology } from '../../api/client'
@@ -52,7 +52,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
 
   // Fetch all activity - zoom controls what's visible in the UI
   // Only fetch heavy 10k dataset for swimlanes; list view fetches its own 500
-  const { data: activity, isLoading } = useChanges({
+  const { data: activity, isLoading, isError, refetch } = useChanges({
     namespaces,
     timeRange: 'all',
     includeK8sEvents: true,
@@ -115,6 +115,30 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       )
     }
 
+    // A failed fetch must not render as the swimlane "No events yet" empty state —
+    // that reads as a quiet cluster rather than a load failure.
+    if (isError) {
+      return (
+        <div className="flex-1 flex flex-col">
+          <div className="flex items-center justify-between px-4 py-2 border-b border-theme-border">
+            <div />
+            <ViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
+          </div>
+          <div className="flex-1 flex flex-col items-center justify-center text-theme-text-tertiary gap-3">
+            <AlertTriangle className="w-10 h-10 text-amber-400/70" />
+            <p className="text-base">Failed to load timeline data</p>
+            <button
+              onClick={() => refetch()}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg hover:bg-theme-hover transition-colors"
+            >
+              <RefreshCw className="w-3.5 h-3.5" />
+              Try again
+            </button>
+          </div>
+        </div>
+      )
+    }
+
     return (
       <TimelineSwimlanes
         events={events}

package/src/components/traffic/TrafficView.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useTrafficSources, useTrafficFlows, useTrafficConnect, useSetTrafficSource } from '../../api/traffic'
 import { useClusterInfo } from '../../api/client'
 import type { TrafficWizardState, AggregatedFlow } from '../../types'
@@ -7,11 +6,12 @@ import { TrafficWizard } from './TrafficWizard'
 import { TrafficGraph, type TrafficGraphSelection } from './TrafficGraph'
 import { TrafficFilterSidebar } from './TrafficFilterSidebar'
 import { TrafficFlowListProvider } from './TrafficFlowListContext'
-import { Loader2, RefreshCw, Filter, Plug, ChevronDown, List, Activity, AlertTriangle } from 'lucide-react'
+import { Loader2, Filter, Plug, ChevronDown, List, Activity, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDock } from '../dock'
-import { EmptyState, PaneLoader } from '@skyhook-io/k8s-ui'
+import { EmptyState, PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
+import { useConnection } from '../../context/ConnectionContext'
 import { Tooltip } from '../ui/Tooltip'
 
 // Addon types for filtering
@@ -339,6 +339,7 @@ interface TrafficViewProps {
 }
 
 export function TrafficView({ namespaces }: TrafficViewProps) {
+  const { connection } = useConnection()
   const [wizardState, setWizardState] = useState<TrafficWizardState>('detecting')
   const [timeRange, setTimeRange] = useState<string>('5m')
   const [hideSystem, setHideSystem] = useState(true)
@@ -421,8 +422,8 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
   const {
     data: flowsData,
-    isLoading: flowsLoading,
     isFetching: flowsFetching,
+    dataUpdatedAt: flowsUpdatedAt,
     refetch: refetchFlowsRaw,
   } = useTrafficFlows({
     namespaces,
@@ -430,7 +431,6 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
     // Only fetch flows when connected (not connecting and no connection error)
     enabled: wizardState === 'ready' && !isConnecting && !connectionError,
   })
-  const [refetchFlows, isRefreshAnimating] = useRefreshAnimation(refetchFlowsRaw)
 
   // Auto-retry when flows return with warning but no data (e.g., port-forward not ready yet)
   useEffect(() => {
@@ -1125,12 +1125,19 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                     </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">
+                  <div className="flex items-center px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[10px] text-theme-text-tertiary tabular-nums">
                     {flowStats.shown}/{flowStats.total}
-                    <button onClick={refetchFlows} disabled={flowsLoading || isRefreshAnimating}
-                      className={clsx('p-0.5 rounded hover:text-theme-text-primary transition-colors', (flowsLoading || isRefreshAnimating) && 'opacity-50')}>
-                      {flowsLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className={clsx('h-3 w-3', isRefreshAnimating && 'animate-spin')} />}
-                    </button>
+                  </div>
+                  {/* Flows are a REST snapshot (no poll, no stream), so this is
+                      an honest "Updated N ago" + manual refresh — not "live". */}
+                  <div className="flex items-center rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border px-1.5 py-0.5">
+                    <FreshnessControl
+                      mode="snapshot"
+                      dataUpdatedAt={flowsUpdatedAt}
+                      isFetching={flowsFetching}
+                      onRefresh={() => refetchFlowsRaw()}
+                      connectionState={connection.state}
+                    />
                   </div>
                 </div>
               </>

package/src/components/ui/Markdown.tsx

@@ -39,10 +39,10 @@ export function Markdown({ children, className }: MarkdownProps) {
           </a>
         ),
         ul: ({ children }) => (
-          <ul className="list-disc list-inside my-2 space-y-1 text-theme-text-secondary">{children}</ul>
+          <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
         ),
         ol: ({ children }) => (
-          <ol className="list-decimal list-inside my-2 space-y-1 text-theme-text-secondary">{children}</ol>
+          <ol className="list-decimal list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ol>
         ),
         li: ({ children }) => (
           <li className="leading-relaxed">{children}</li>

package/src/components/ui/Omnibar.tsx

@@ -414,7 +414,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
   return (
     <div
       ref={containerRef}
-      className={clsx('relative w-full', hero ? 'max-w-3xl' : 'max-w-xl', open && hero && 'z-[16]')}
+      className={clsx('relative w-full', hero ? 'max-w-3xl' : 'max-w-lg', open && hero && 'z-[16]')}
       // Open on click even when the field is already focused — onFocus alone
       // never fires again, so an autofocused hero (Home) wouldn't reveal the
       // launcher on a click.

package/src/components/ui/UpdateNotification.tsx

@@ -27,21 +27,16 @@ export function UpdateNotification() {
 
   const isDesktop = versionInfo?.installMethod === 'desktop'
 
-  // Listen for "Check for Updates" menu item in desktop app (Wails runtime event).
-  // Un-dismisses the notification and invalidates the version check cache.
+  // Listen for "Check for Updates" menu item in desktop app.
   useEffect(() => {
-    const wailsRuntime = (window as unknown as Record<string, unknown>).runtime as
-      | { EventsOn?: (event: string, callback: () => void) => () => void }
-      | undefined
-    if (!wailsRuntime?.EventsOn) return
-
-    const cleanup = wailsRuntime.EventsOn('check-for-updates', () => {
+    const handler = () => {
       setDismissed(false)
       try { localStorage.removeItem(DISMISSED_KEY) } catch { /* ignore */ }
       queryClient.invalidateQueries({ queryKey: ['version-check'] })
-    })
+    }
 
-    return cleanup
+    window.addEventListener('radar:check-for-updates', handler)
+    return () => window.removeEventListener('radar:check-for-updates', handler)
   }, [queryClient])
 
   // Log version check errors for debugging

package/src/components/workload/WorkloadView.tsx

@@ -35,11 +35,11 @@ import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusC
 import { PrometheusChartsGrid } from '../resource/PrometheusChartsGrid'
 import { RestartEventLane } from '../resource/RestartChart'
 import { RightsizingStrip } from '../resource/RightsizingStrip'
-import { useResourceAudit, useResources } from '../../api/client'
-import { AuditAlerts } from '@skyhook-io/k8s-ui'
+import { useResourceAudit, useResourceIssues, useResources } from '../../api/client'
+import { AuditAlerts, ResourceIssuesSection } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
 import { LogsViewer } from '../logs/LogsViewer'
-import { useCanUpdateSecrets, useCanNodeWrite, useNamespacedCapabilities } from '../../contexts/CapabilitiesContext'
+import { useCanUpdateSecrets, useCanNodeWrite, useNamespacedCapabilities, useIsLocalDeployment } from '../../contexts/CapabilitiesContext'
 import { useOpenTerminal, useOpenLogs, useOpenWorkloadLogs, useOpenNodeTerminal } from '../dock'
 import { PortForwardButton } from '../portforward/PortForwardButton'
 import { useToast } from '../ui/Toast'
@@ -90,13 +90,27 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
   // Parse /workload/:kind/:ns/:name from pathname. Segments are URL-encoded by
   // buildWorkloadPath; names can also contain literal slashes (e.g. some CRD names),
   // which survive encoding as %2F and reassemble correctly here.
+  //
+  // Cluster-scoped resources (Node, PersistentVolume, Namespace, …) have no
+  // namespace: buildWorkloadPath encodes the namespace segment as '_'. Decode
+  // that back to '' here, and tolerate a legacy empty segment ('//') and the
+  // collapsed three-segment form (/workload/:kind/:name) for older links.
   const parts = location.pathname.replace(/^\//, '').split('/')
   const decode = (s: string): string => {
     try { return decodeURIComponent(s) } catch { return s }
   }
   const kind = decode(parts[1] ?? '')
-  const namespace = decode(parts[2] ?? '')
-  const name = parts.slice(3).map(decode).join('/')
+  let namespace: string
+  let name: string
+  if (parts.length <= 3) {
+    // /workload/:kind/:name — cluster-scoped link with no namespace segment.
+    namespace = ''
+    name = decode(parts[2] ?? '')
+  } else {
+    const nsSegment = parts[2] ?? ''
+    namespace = nsSegment === '_' || nsSegment === '' ? '' : decode(nsSegment)
+    name = parts.slice(3).map(decode).join('/')
+  }
   const group = searchParams.get('apiGroup') || ''
 
   const handleBack = useCallback(() => {
@@ -112,7 +126,8 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
   }, [navigate])
 
   // Hooks must run unconditionally — the invalid-URL guard comes after them.
-  if (!kind || !namespace || !name) {
+  // Namespace is empty for cluster-scoped resources, so only kind + name are required.
+  if (!kind || !name) {
     return (
       <div className="flex items-center justify-center h-full text-theme-text-tertiary">
         Invalid workload URL
@@ -146,8 +161,12 @@ interface WorkloadViewProps {
   onNavigateToResource?: NavigateToResource
   onCollapseToDrawer?: () => void
   expanded?: boolean
+  /** false on the outgoing layer during an expand/collapse crossfade (default true) */
+  active?: boolean
   onClose?: () => void
-  onExpand?: () => void
+  onExpand?: (opts?: { yaml?: boolean }) => void
+  onExpandIntent?: () => void
+  onCancelExpandIntent?: () => void
   initialTab?: 'detail' | 'yaml'
   group?: string
 }
@@ -159,6 +178,10 @@ function useActionsBarProps(kind: string, namespace: string, name: string) {
   const openWorkloadLogs = useOpenWorkloadLogs()
   const openNodeTerminal = useOpenNodeTerminal()
   const { canExec, canViewLogs, canPortForward } = useNamespacedCapabilities(namespace)
+  // Live forward when local+RBAC; otherwise (in-cluster/Cloud) still surface the
+  // copy-paste kubectl command. The button picks live vs. copy by deployment mode.
+  const isLocal = useIsLocalDeployment()
+  const showPortForward = canPortForward || !isLocal
 
   const deleteMutation = useDeleteResource()
   const restartWorkloadMutation = useRestartWorkload()
@@ -190,7 +213,7 @@ function useActionsBarProps(kind: string, namespace: string, name: string) {
   return {
     canExec,
     canViewLogs,
-    canPortForward,
+    canPortForward: showPortForward,
     onOpenTerminal: openTerminal,
     onOpenLogs: openLogs,
     onOpenWorkloadLogs: openWorkloadLogs,
@@ -417,6 +440,15 @@ export function WorkloadView({
     () => (resource?.apiVersion ? apiVersionToGroup(resource.apiVersion) : undefined),
     [resource?.apiVersion],
   )
+  // Live Operational Issues for this resource. Fetched here (not inside the lead
+  // render-prop) so the count also gates `hasOperationalIssues` — which tells the
+  // renderers to suppress their own status-derived problems and avoid duplicates.
+  // Keyed on the STABLE prop kind+group (same inputs as the resource fetch above),
+  // NOT the manifest-derived ones: deriving kind/group from the loaded resource
+  // would flip the query key when the manifest arrives, drop liveIssues, and flash
+  // the renderer banners. The backend canonicalizes a plural kind via discovery,
+  // so passing the route's plural kindProp resolves correctly.
+  const { data: liveIssues } = useResourceIssues(kindProp, rest.group, namespace, name)
   const { onCompareTo, onCompareAcrossClusters, picker: comparePicker } = useCompareLauncher({
     kind: kindProp,
     namespace,
@@ -523,6 +555,23 @@ export function WorkloadView({
           <FluxSourceConsumersSection kind={k} namespace={ns} name={n} />
         </>
       )}
+      renderOverviewLead={() => (
+        <ResourceIssuesSection
+          issues={liveIssues}
+          onResourceClick={
+            rest.onNavigateToResource
+              ? (ref) =>
+                  rest.onNavigateToResource?.({
+                    kind: kindToPlural(ref.kind),
+                    namespace: ref.namespace ?? '',
+                    name: ref.name,
+                    group: ref.group ?? '',
+                  })
+              : undefined
+          }
+        />
+      )}
+      hasOperationalIssues={!!liveIssues?.length}
       onOpenGitOpsResource={gitopsOwnerQuery.data ? handleOpenGitOpsResource : undefined}
       resolvedGitOpsOwner={gitopsOwner}
       gitOpsOwnerVerified={gitOpsOwnerVerified}

package/src/contexts/CapabilitiesContext.tsx

@@ -91,6 +91,14 @@ export function useCanPortForward(): boolean {
   return useContext(CapabilitiesContext).portForward
 }
 
+// True when Radar runs as a local binary (live port-forward is possible). When
+// false (in-cluster / Radar Cloud) a live forward can't bind a usable local
+// listener, so the UI offers a copy-paste `kubectl port-forward` command instead.
+// Defaults to local during the capabilities-loading window (see defaultCapabilities).
+export function useIsLocalDeployment(): boolean {
+  return useContext(CapabilitiesContext).deployment?.mode === 'local'
+}
+
 export function useCanViewSecrets(): boolean {
   return useContext(CapabilitiesContext).secrets
 }

package/src/filter/FilterLocationBridge.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useMemo, useRef, type ReactNode } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { FilterLocationProvider, type FilterLocation } from '@skyhook-io/k8s-ui';
+
+// Adapts OSS Radar's react-router search params to the app-agnostic
+// FilterLocation seam that @skyhook-io/k8s-ui's useFilterState reads. Mounted
+// once inside the router; every list view's shared filter state flows through
+// it, keeping the URL the single source of truth. (Radar Hub provides its own
+// bridge over its router — k8s-ui itself never depends on react-router.)
+export function FilterLocationBridge({ children }: { children: ReactNode }) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // React Router's functional updater is NOT state-queued: two updates in one
+  // tick can both read the same params and clobber. Advance a ref synchronously
+  // so successive filter changes (e.g. toggling two facets fast) compose.
+  const latest = useRef(searchParams);
+  latest.current = searchParams;
+
+  const update = useCallback<FilterLocation['update']>(
+    (updater, opts) => {
+      const next = updater(new URLSearchParams(latest.current));
+      latest.current = next;
+      setSearchParams(next, opts);
+    },
+    [setSearchParams],
+  );
+
+  const value = useMemo<FilterLocation>(() => ({ searchParams, update }), [searchParams, update]);
+  return <FilterLocationProvider value={value}>{children}</FilterLocationProvider>;
+}

package/src/hooks/useDocumentTitle.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+// Restore-on-unmount matters for overlay/detail views: closing a resource drawer
+// that opened over a list returns the list's title rather than stranding the
+// resource's. document.title is global to the page, so embedders that don't own
+// the whole tab pass a falsy `label` to opt out and keep their own title
+// (AppInner only feeds a label when the host passed `manageDocumentTitle`).
+//
+// `suffix` is the full trailing string after the label, so a host can rebrand
+// (' — My Cloud') or drop it entirely ('').
+const DEFAULT_SUFFIX = ' · Radar';
+
+export function useDocumentTitle(
+  label: string | null | undefined,
+  suffix: string = DEFAULT_SUFFIX,
+): void {
+  useEffect(() => {
+    if (!label) return;
+    const previous = document.title;
+    document.title = `${label}${suffix}`;
+    return () => {
+      document.title = previous;
+    };
+  }, [label, suffix]);
+}

package/src/hooks/useKeyboardShortcuts.tsx

@@ -3,5 +3,6 @@ export {
   useRegisterShortcut,
   useRegisterShortcuts,
   useActiveShortcuts,
+  useSuppressBaseShortcuts,
 } from '@skyhook-io/k8s-ui'
 export type { KeyboardShortcut, ShortcutCategory } from '@skyhook-io/k8s-ui'

package/src/index.ts

@@ -23,6 +23,21 @@ export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
 export { ClusterSwitcher } from '@skyhook-io/k8s-ui';
 export type { ClusterSwitcherProps, ClusterSwitcherItem } from '@skyhook-io/k8s-ui';
 
+// Shared namespace-scope picker primitive — re-exported so embedders (Radar
+// Hub) can render a namespace filter visually identical to OSS Radar's, driving
+// their own per-cluster scope (Hub via ?namespaces= on the embedded RadarApp).
+export { NamespacePicker } from '@skyhook-io/k8s-ui';
+export type {
+  NamespacePickerProps,
+  NamespacePickerHandle,
+  NamespaceScopeView,
+} from '@skyhook-io/k8s-ui';
+
+// Shared bordered shell that groups the cluster + namespace segments into one
+// pill — so Radar Hub's cluster top bar matches OSS Radar's header exactly.
+export { ScopePill } from '@skyhook-io/k8s-ui';
+export type { ScopePillProps } from '@skyhook-io/k8s-ui';
+
 // Deep-link builders — so consumers (Radar Hub) construct deep links into a
 // cluster view without hand-rolling Radar's internal URL format, which drifts
 // silently when Radar re-routes. `resourcePath` opens the detail drawer for any

package/src/main.tsx

@@ -155,10 +155,12 @@ window.addEventListener('mouseup', (e: MouseEvent) => {
 }, true)
 
 
-// Standalone Radar binary: same-origin API, router at root. Library consumers
-// (e.g. radar-hub-web) render <RadarApp apiBase="..." basename="..." /> instead.
+// Standalone Radar binary: same-origin API, router at root. It owns the whole
+// tab, so it opts into per-view document.title. Library consumers (e.g.
+// radar-hub-web) render <RadarApp apiBase="..." basename="..." /> WITHOUT this
+// flag, keeping their own tab title.
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RadarApp />
+    <RadarApp manageDocumentTitle />
   </React.StrictMode>
 )

package/src/utils/auditBadges.ts

@@ -0,0 +1,53 @@
+import { resourceKey, type AuditFinding, type CheckMeta } from '@skyhook-io/k8s-ui'
+
+export interface AuditBadgeMessage {
+  severity: string
+  message: string
+}
+
+export interface AuditSeverityCounts {
+  danger: number
+  warning: number
+  /** The finding messages behind the counts, danger-first, for inline tooltips.
+   *  Lets a badge say WHAT is wrong on hover instead of just a count. */
+  messages: AuditBadgeMessage[]
+}
+
+/**
+ * isBadgeWorthy keeps per-resource badges high-signal: only findings whose check
+ * is flagged `badgeWorthy` in the registry (reference-integrity / lifecycle —
+ * "this resource is actually broken") count. Security-posture and best-practice
+ * checks fire on nearly every resource and would turn the badges into noise;
+ * they live in the Checks/Audit views. Unknown checks default to NOT badged.
+ */
+export function isBadgeWorthy(
+  finding: AuditFinding,
+  checks: Record<string, CheckMeta> | undefined,
+): boolean {
+  return !!checks?.[finding.checkID]?.badgeWorthy
+}
+
+/**
+ * buildAuditSeverityMap keys badge-worthy findings by the same resource key the
+ * backend stamps onto topology nodes (`node.data.auditKey`): `group|Kind|ns|name`,
+ * group following the audit convention (built-ins → their group, CRDs → "").
+ */
+export function buildAuditSeverityMap(
+  findings: AuditFinding[] | undefined,
+  checks: Record<string, CheckMeta> | undefined,
+): Map<string, AuditSeverityCounts> {
+  const map = new Map<string, AuditSeverityCounts>()
+  for (const f of findings ?? []) {
+    if (!isBadgeWorthy(f, checks)) continue
+    const key = resourceKey(f.group ?? '', f.kind, f.namespace ?? '', f.name)
+    const cur = map.get(key) ?? { danger: 0, warning: 0, messages: [] }
+    if (f.severity === 'danger') cur.danger++
+    else if (f.severity === 'warning') cur.warning++
+    cur.messages.push({ severity: f.severity, message: f.message })
+    map.set(key, cur)
+  }
+  for (const cur of map.values()) {
+    cur.messages.sort((a, b) => (a.severity === 'danger' ? 0 : 1) - (b.severity === 'danger' ? 0 : 1))
+  }
+  return map
+}

package/src/utils/navigation.ts

@@ -20,12 +20,14 @@ export type { NavigateToResource } from '@skyhook-io/k8s-ui/utils/navigation'
 /**
  * Build a /workload/:kind/:namespace/:name URL, preserving the API group as a
  * query param so the WorkloadView can resolve CRDs with colliding kind names.
- * Namespaced workloads only — WorkloadView requires a namespace. For arbitrary
- * kinds (including cluster-scoped) use resourcePath.
+ * Cluster-scoped resources (Node, PersistentVolume, Namespace, …) have no
+ * namespace; they're encoded with a '_' sentinel segment so the path stays
+ * positional and WorkloadViewRoute can parse it back. '_' is safe — it's not a
+ * valid DNS-1123 namespace label, so it can never collide with a real one.
  */
 export function buildWorkloadPath(resource: SelectedResource): string {
   const kind = encodeURIComponent(resource.kind)
-  const namespace = encodeURIComponent(resource.namespace)
+  const namespace = encodeURIComponent(resource.namespace || '_')
   const name = encodeURIComponent(resource.name)
   const base = `/workload/${kind}/${namespace}/${name}`
   return resource.group ? `${base}?apiGroup=${encodeURIComponent(resource.group)}` : base