@skyhook-io/radar-app 0.2.2 → 0.3.1

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/useEventSource.ts

@@ -7,6 +7,7 @@ interface UseEventSourceReturn {
   topology: Topology | null
   events: K8sEvent[]
   connected: boolean
+  connecting: boolean
   reconnect: () => void
 }
 
@@ -43,6 +44,7 @@ export function useEventSource(
   const [topology, setTopology] = useState<Topology | null>(null)
   const [events, setEvents] = useState<K8sEvent[]>([])
   const [connected, setConnected] = useState(false)
+  const [connecting, setConnecting] = useState(true)
   const eventSourceRef = useRef<EventSource | null>(null)
   const reconnectTimeoutRef = useRef<number | null>(null)
   const waitingForTopologyAfterSwitch = useRef(false)
@@ -66,6 +68,7 @@ export function useEventSource(
   optionsRef.current = options
 
   const connect = useCallback(() => {
+    setConnecting(true)
     // Clean up existing connection
     if (eventSourceRef.current) {
       eventSourceRef.current.close()
@@ -99,6 +102,7 @@ export function useEventSource(
     es.onopen = () => {
       console.log('SSE connected')
       setConnected(true)
+      setConnecting(false)
       // Reset backoff on successful connection
       reconnectDelayRef.current = INITIAL_RECONNECT_DELAY_MS
     }
@@ -106,6 +110,7 @@ export function useEventSource(
     es.onerror = (error) => {
       console.error('SSE error:', error)
       setConnected(false)
+      setConnecting(false)
       es.close()
 
       // Reconnect with exponential backoff
@@ -257,6 +262,7 @@ export function useEventSource(
     topology,
     events,
     connected,
+    connecting,
     reconnect,
   }
 }

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/hooks/useMediaQuery.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react'
+
+// Subscribe to a CSS media query. SSR-safe (returns false before mount) and
+// updates on viewport changes.
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return false
+    return window.matchMedia(query).matches
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia(query)
+    const onChange = () => setMatches(mql.matches)
+    onChange()
+    mql.addEventListener('change', onChange)
+    return () => mql.removeEventListener('change', onChange)
+  }, [query])
+
+  return matches
+}

package/src/hooks/useNavRailPinned.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useState } from 'react'
+
+// Pin state for the primary left nav rail.
+//
+// "Pinned" = the labeled, full-width sidebar; "unpinned" = the slim 56px
+// icon rail with hover fly-out labels. This is a single committed choice
+// the user makes once (default pinned), persisted to localStorage — NOT a
+// per-route auto-collapse. A rail whose width changes as you navigate is
+// disorienting; the rail is the stable anchor. A user who lives in the
+// wide table views (Resources, GitOps) unpins once and keeps their width;
+// fly-out labels + the ⌘K palette + `g`-mnemonic shortcuts cover the collapsed
+// state's discoverability.
+
+const STORAGE_KEY = 'radar.navRail.pinned'
+
+function readInitial(): boolean {
+  if (typeof window === 'undefined') return true
+  // `localStorage` access can throw (SecurityError) when storage is denied —
+  // sandboxed embeds, some privacy modes. Default to pinned (expanded), the
+  // friendlier first-run state for a non-k8s-expert; power users unpin once.
+  try {
+    return window.localStorage.getItem(STORAGE_KEY) !== 'false'
+  } catch {
+    return true
+  }
+}
+
+export function useNavRailPinned(): {
+  pinned: boolean
+  togglePinned: () => void
+} {
+  const [pinned, setPinned] = useState(readInitial)
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, String(pinned))
+    } catch {
+      // Private-mode / quota failures shouldn't break nav — the in-memory
+      // state still drives this session; we just don't persist it.
+    }
+  }, [pinned])
+
+  const togglePinned = useCallback(() => setPinned((p) => !p), [])
+
+  return { pinned, togglePinned }
+}

package/src/hooks/useRecentResources.ts

@@ -0,0 +1,49 @@
+// Recently-opened resources, persisted to localStorage so the omnibar's empty
+// state can offer "jump back to what I was just looking at" across reloads.
+// Plain functions (not a stateful hook): the omnibar reads fresh each time it
+// opens and writes on open, so two component instances never need to sync.
+
+export interface RecentResource {
+  kind: string
+  group?: string
+  namespace?: string
+  name: string
+}
+
+const KEY = 'radar-recent-resources'
+const MAX = 7
+
+// Partition by the current cluster/context: a resource is identified by
+// (kind, ns, name) WITHIN a cluster, so a global store would surface the prior
+// cluster's names after a context switch and open ns/name in the wrong cluster.
+// An UNKNOWN context (key still loading) is a hard no-op — no shared fallback
+// bucket — so a recent is never read or written against an indeterminate cluster.
+function storageKey(contextKey: string): string {
+  return `${KEY}::${contextKey}`
+}
+
+function keyOf(r: RecentResource): string {
+  return `${r.kind}\x00${r.group || ''}\x00${r.namespace || ''}\x00${r.name}`
+}
+
+export function loadRecentResources(contextKey: string): RecentResource[] {
+  if (!contextKey) return []
+  try {
+    const raw = localStorage.getItem(storageKey(contextKey))
+    if (raw) return JSON.parse(raw)
+  } catch {
+    // ignore parse/storage errors — recents are best-effort
+  }
+  return []
+}
+
+export function recordRecentResource(r: RecentResource, contextKey: string): void {
+  if (!r.name || !r.kind || !contextKey) return
+  try {
+    const k = keyOf(r)
+    const next = [r, ...loadRecentResources(contextKey).filter((x) => keyOf(x) !== k)].slice(0, MAX)
+    localStorage.setItem(storageKey(contextKey), JSON.stringify(next))
+  } catch {
+    // ignore storage errors
+  }
+}

package/src/index.css

@@ -81,7 +81,11 @@ body {
   color: var(--text-primary);
 }
 
-#root {
+/* App-shell layout for standalone Radar (mounts into #radar — see index.html).
+   Keyed off #radar, NOT #root: this file ships as the published library
+   stylesheet, so a #root rule here would match a host app's own #root and
+   reshape its document. A unique id can't collide — host apps have no #radar. */
+#radar {
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -249,6 +253,163 @@ body {
   animation: fade-in-up 0.5s ease-out both;
 }
 
+/* Transcript entries (tool calls, reasoning) easing in as they stream — a small
+   rise from below + fade. Transform-only motion (no height change) so it never
+   perturbs the investigation's stick-to-bottom scroll geometry. */
+@keyframes transcript-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-transcript-enter {
+  animation: transcript-enter 180ms ease-out both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .animate-transcript-enter {
+    animation: none;
+  }
+}
+
+/* "Thinking" status text — an accent light-sweep across muted text, the now-standard
+   live-agent cue (Perplexity/Vercel). Honest: it only marks active work, never fakes
+   progress. background-clip paints the gradient INTO the glyphs. */
+@keyframes ai-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+.ai-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--text-tertiary) 0%,
+    var(--text-tertiary) 38%,
+    var(--accent) 50%,
+    var(--text-tertiary) 62%,
+    var(--text-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: ai-shimmer 2.4s linear infinite;
+}
+
+/* Synthesis "thinking" dot — a calm breathing pulse (not a spinner) for the staged
+   pre-verdict beats. */
+@keyframes synth-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.85);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+.animate-synth-pulse {
+  animation: synth-pulse 1.1s ease-in-out infinite;
+}
+
+/* Result-reveal choreography. The card eases in; the root-cause label gets an accent
+   underline that sweeps out; the whole card pulses its accent border once to mark
+   "diagnosis ready." Sequenced via animation-delay relative to one mount. */
+@keyframes result-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-result-in {
+  animation: result-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes underline-sweep {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+.animate-underline-sweep {
+  transform-origin: left;
+  animation: underline-sweep 460ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
+}
+/* Richer verdict reveal — a colored ring around the border plus an UNEVEN, breathing
+   outer glow (two soft peaks), held longer (~2.4s). Tinted per verdict via --glow
+   (amber root-cause, emerald healthy, accent remediation, slate inconclusive). */
+@keyframes verdict-reveal {
+  0% {
+    box-shadow:
+      0 0 0 0 color-mix(in oklab, var(--glow, var(--accent)) 0%, transparent),
+      0 0 0 0 transparent;
+  }
+  18% {
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--glow, var(--accent)) 60%, transparent),
+      0 0 20px 2px color-mix(in oklab, var(--glow, var(--accent)) 42%, transparent);
+  }
+  44% {
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--glow, var(--accent)) 32%, transparent),
+      0 0 10px 1px color-mix(in oklab, var(--glow, var(--accent)) 20%, transparent);
+  }
+  68% {
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--glow, var(--accent)) 50%, transparent),
+      0 0 24px 3px color-mix(in oklab, var(--glow, var(--accent)) 38%, transparent);
+  }
+  100% {
+    box-shadow:
+      0 0 0 0 transparent,
+      0 0 0 0 transparent;
+  }
+}
+.animate-verdict-reveal {
+  animation: verdict-reveal 2400ms cubic-bezier(0.32, 0.72, 0, 1) 120ms both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ai-shimmer {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+    color: var(--text-secondary);
+  }
+  .animate-synth-pulse,
+  .animate-result-in,
+  .animate-underline-sweep,
+  .animate-verdict-reveal {
+    animation: none;
+  }
+}
+
+/* Gentle colorize when syntax-highlighted code swaps in over plain text — opacity
+   only (no transform → no layout shift) and floored at 0.5 so it never blanks. */
+@keyframes code-colorize {
+  from {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.animate-code-colorize {
+  animation: code-colorize 150ms ease-out;
+}
+
 .slide-in-from-right-5 {
   --tw-enter-translate-x: 1.25rem;
 }

package/src/index.ts

@@ -4,6 +4,7 @@
 // bundler that transpiles TSX and resolves workspace-style peer deps. The
 // same source is consumed by Radar's binary via main.tsx.
 export { RadarApp, type RadarAppProps } from './RadarApp';
+export type { ClusterLoadState } from './types/clusterLoadState';
 export {
   setApiBase,
   setBasename,
@@ -14,7 +15,39 @@ export {
   getAuthHeaders,
   getCredentialsMode,
 } from './api/config';
-export type { NavCustomization } from './context/NavCustomization';
+export type { NavCustomization, FleetTakeoverTarget } from './context/NavCustomization';
+// Timeline data-source selection — lets an embedder back the timeline with a
+// retained-history endpoint instead of Radar's local event store. Additive;
+// absent = local (standalone behavior).
+export type {
+  TimelineSourceConfig,
+  TimelineSourceCapabilities,
+  TimelineOverviewBucket,
+  TimelineCoverageSpan,
+  TimelineOverviewResult,
+} from './api/timelineSource';
+export type {
+  RenderDiagnoseAction,
+  DiagnoseConsentCopy,
+} from './context/DiagnoseCustomization';
+
+// Standalone AI-diagnose surface — mount the investigation panel outside a
+// full <RadarApp>. No router dependency, no client-side cluster state: the
+// backend set via setApiBase() picks the cluster, so hosts remount
+// <DiagnoseProvider key={cluster}> to switch. Mount order: ThemeProvider >
+// DiagnoseCustomizationProvider > DiagnoseProvider > DiagnoseSurface, under a
+// @tanstack/react-query QueryClientProvider.
+export {
+  DiagnoseProvider,
+  useDiagnose,
+  useDiagnoseLayout,
+} from './components/diagnose/DiagnoseContext';
+export type { Target as DiagnoseTarget } from './components/diagnose/DiagnoseContext';
+export { DiagnoseSurface } from './components/diagnose/DiagnoseSurface';
+export { DiagnoseCustomizationProvider } from './context/DiagnoseCustomization';
+// The panel reads Radar's ThemeContext (throws unprovided). It follows
+// localStorage['radar-theme'], so host and panel flip together.
+export { ThemeProvider } from './context/ThemeContext';
 export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
 
 // Shared cluster-switcher primitive — re-exported from @skyhook-io/k8s-ui so
@@ -22,3 +55,42 @@ export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
 // kubeconfig ContextSwitcher without taking a direct dep on k8s-ui internals.
 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
+// kind incl. cluster-scoped; `buildWorkloadPath` is the namespaced-workload
+// full-page view. Both return basename-relative paths; embedders prepend their
+// cluster prefix (e.g. /c/:id).
+export { resourcePath, buildWorkloadPath } from './utils/navigation';
+export type { SelectedResource } from '@skyhook-io/k8s-ui/types/core';
+
+// Injectable omnibar — the standalone search/command surface, decoupled from
+// Radar's own data hooks so embedders (Radar Hub) can drive it with fleet
+// search + their own command items while sharing the exact UX (pills, modifier
+// autocomplete, kind-first ranking, match highlighting, keyboard nav, recents).
+export { Omnibar } from './components/ui/Omnibar';
+export type {
+  OmnibarProps,
+  OmnibarHandle,
+  OmnibarRecent,
+  OmnibarSearchResult,
+} from './components/ui/Omnibar';
+export { bestScore } from './components/ui/command-items';
+export type { CommandItem } from './components/ui/command-items';
+export type { SearchHit, SearchMatchedField } from './api/client';

package/src/main.tsx

@@ -124,7 +124,7 @@ document.execCommand = function (command: string, showUI?: boolean, value?: stri
         dt.setData('text/plain', text)
         const ev = new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })
         if (!el.dispatchEvent(ev)) return
-      } catch (_e) { /* ClipboardEvent dispatch failed, fall back to insertText */ }
+      } catch { /* ClipboardEvent dispatch failed, fall back to insertText */ }
       _origExecCommand('insertText', false, text)
     }).catch((err) => { console.warn('[Radar] Paste failed:', err) })
     return true
@@ -149,10 +149,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.
-ReactDOM.createRoot(document.getElementById('root')!).render(
+// 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('radar')!).render(
   <React.StrictMode>
-    <RadarApp />
+    <RadarApp manageDocumentTitle />
   </React.StrictMode>
 )

package/src/types/clusterLoadState.ts

@@ -0,0 +1,33 @@
+export interface ClusterLoadState {
+  loading: boolean
+  message: string | null
+  pendingKinds: string[]
+}
+
+export const idleClusterLoadState: ClusterLoadState = {
+  loading: false,
+  message: null,
+  pendingKinds: [],
+}
+
+export function dashboardClusterLoadState(data?: {
+  deferredLoading?: boolean
+  partialData?: string[]
+}): ClusterLoadState {
+  const pendingKinds = data?.partialData ?? []
+  if (pendingKinds.length > 0) {
+    return {
+      loading: true,
+      message: `Still loading: ${pendingKinds.join(', ')}`,
+      pendingKinds,
+    }
+  }
+  if (data?.deferredLoading) {
+    return {
+      loading: true,
+      message: 'Loading remaining resources…',
+      pendingKinds: [],
+    }
+  }
+  return idleClusterLoadState
+}

package/src/types.ts

@@ -1,3 +1,5 @@
 // Re-export all types from the shared @skyhook-io/k8s-ui package.
 // This file exists for backward compatibility — new code should import from '@skyhook-io/k8s-ui' directly.
 export * from '@skyhook-io/k8s-ui/types/core'
+export * from '@skyhook-io/k8s-ui/types/gitops-tree'
+export * from '@skyhook-io/k8s-ui/types/gitops-insights'

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

@@ -1,9 +1,72 @@
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+import { kindToPlural } from '@skyhook-io/k8s-ui/utils/navigation'
+import type { SelectedResource } from '@skyhook-io/k8s-ui/types/core'
+import type { SearchHit } from '../api/client'
+
+/**
+ * Map a resource-search Hit to a SelectedResource. Hit.kind is the singular
+ * Kind (e.g. "Deployment"); downstream openers pluralize. `group` is carried so
+ * CRD/core collisions disambiguate (Service vs Knative Service), and the
+ * namespace defaults to '' for cluster-scoped hits (Node/Namespace/PV).
+ */
+export function searchHitToSelectedResource(hit: SearchHit): SelectedResource {
+  return { kind: hit.kind, namespace: hit.namespace ?? '', name: hit.name, group: hit.group || undefined }
+}
 
 // Re-export shared navigation utilities from @skyhook-io/k8s-ui.
-export { kindToPlural, pluralToKind, refToSelectedResource } from '@skyhook-io/k8s-ui/utils/navigation'
+export { kindToPlural, pluralToKind, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'
 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.
+ * 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 name = encodeURIComponent(resource.name)
+  const base = `/workload/${kind}/${namespace}/${name}`
+  return resource.group ? `${base}?apiGroup=${encodeURIComponent(resource.group)}` : base
+}
+
+/**
+ * Build a /resources/:plural?resource=:namespace/:name URL — the deep link that
+ * opens a resource's detail drawer in the resources view. Cluster-scoped
+ * resources use ?resource=:name (no slash); the API group rides in ?apiGroup=
+ * to disambiguate CRD/core kind collisions. This is the exact form the
+ * ResourcesView mount effect parses (the `?resource=` reader in
+ * packages/k8s-ui/src/components/resources/ResourcesView.tsx) — keep the two in
+ * lockstep.
+ *
+ * Unlike buildWorkloadPath, this opens the detail drawer for ANY kind,
+ * including cluster-scoped resources. Returns a basename-relative path;
+ * embedders (Radar Hub) prepend their cluster prefix (e.g. /c/:id).
+ */
+export function resourcePath(resource: SelectedResource): string {
+  const params = new URLSearchParams()
+  // No name → nothing to open; the kind list is the sane fallback.
+  if (resource.name) {
+    params.set('resource', resource.namespace ? `${resource.namespace}/${resource.name}` : resource.name)
+  }
+  if (resource.group) params.set('apiGroup', resource.group)
+  const query = params.toString()
+  return `/resources/${kindToPlural(resource.kind)}${query ? `?${query}` : ''}`
+}
+
+const FULLSCREEN_RESOURCE_KINDS = new Set(['pods', 'deployments', 'statefulsets', 'daemonsets', 'jobs', 'cronjobs', 'nodes'])
+
+export function relatedResourcePath(resource: SelectedResource): string {
+  const apiKind = kindToPlural(resource.kind).toLowerCase()
+  if (FULLSCREEN_RESOURCE_KINDS.has(apiKind)) {
+    return buildWorkloadPath({ ...resource, kind: apiKind })
+  }
+  return resourcePath(resource)
+}
+
 // radar-specific: open URL in system browser (desktop app support)
 export function openExternal(url: string): void {
   fetch(apiUrl('/desktop/open-url'), {