@skyhook-io/radar-app 1.8.6 → 1.8.8

package/src/context/ConnectionContext.tsx

@@ -11,7 +11,7 @@ export interface ConnectionState {
   context: string
   clusterName?: string
   error?: string
-  errorType?: string // auth, network, timeout, unknown
+  errorType?: string // config, auth, rbac, network, timeout, tls, unknown
   progressMessage?: string
 }
 
@@ -27,7 +27,23 @@ interface ConnectionContextValue {
   updateFromSSE: (status: ConnectionState) => void
 }
 
+class ConnectionRetryError extends Error {
+  errorType?: string
+
+  constructor(message: string, errorType?: string) {
+    super(message)
+    this.name = 'ConnectionRetryError'
+    this.errorType = errorType
+  }
+}
+
 const ConnectionContext = createContext<ConnectionContextValue | null>(null)
+const AUTO_RETRY_INITIAL_DELAY_MS = 10000
+const AUTO_RETRY_MAX_DELAY_MS = 60000
+
+export function shouldAutoRetryConnection(errorType?: string): boolean {
+  return errorType !== 'config' && errorType !== 'rbac'
+}
 
 async function fetchConnectionStatus(): Promise<ConnectionStatusResponse> {
   // apiFetch handles a 401 globally (re-auth redirect). These endpoints are
@@ -46,8 +62,8 @@ async function retryConnection(): Promise<ConnectionState> {
     method: 'POST',
   })
   if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Unknown error' }))
-    throw new Error(error.error || `HTTP ${response.status}`)
+    const error = await response.json().catch(() => ({ error: 'Unknown error' })) as { error?: string; errorType?: string }
+    throw new ConnectionRetryError(error.error || `HTTP ${response.status}`, error.errorType)
   }
   return response.json()
 }
@@ -59,6 +75,7 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
     context: '',
   })
   const [contexts, setContexts] = useState<ContextInfo[]>([])
+  const [isAutoRetrying, setIsAutoRetrying] = useState(false)
   // Track if SSE has started delivering connection_state events
   // Once SSE is active, it becomes the authoritative source for connection state
   const sseActiveRef = useRef(false)
@@ -66,6 +83,9 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
   // initial connect (bootstrap queries already fetched while 'connecting') from
   // a reconnect after a drop (cache may be stale across the gap).
   const hasConnectedRef = useRef(false)
+  const autoRetryInFlightRef = useRef(false)
+  const autoRetryDelayRef = useRef(AUTO_RETRY_INITIAL_DELAY_MS)
+  const manualRetryPendingRef = useRef(false)
   // Whether the QueryClient already held data when this provider mounted. A host
   // can share one client across cluster-scoped RadarApp mounts (see RadarApp's
   // `queryClient` prop); that client may carry another cluster's data under
@@ -113,6 +133,7 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
   const retryMutation = useMutation({
     mutationFn: retryConnection,
     onMutate: () => {
+      manualRetryPendingRef.current = true
       // Reset SSE active flag - polling can provide state until SSE reconnects
       sseActiveRef.current = false
       // Set connecting state while retrying
@@ -120,7 +141,6 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
         ...prev,
         state: 'connecting',
         error: undefined,
-        errorType: undefined,
         progressMessage: 'Connecting to cluster...',
       }))
     },
@@ -131,16 +151,94 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
       queryClient.invalidateQueries()
     },
     onError: (error: Error) => {
-      setConnection(prev => ({
-        ...prev,
-        state: 'disconnected',
-        error: error.message,
-        progressMessage: undefined,
-      }))
+      const retryError = error as ConnectionRetryError
+      setConnection(prev => {
+        if (sseActiveRef.current && prev.state === 'connected') return prev
+        return {
+          ...prev,
+          state: 'disconnected',
+          error: error.message,
+          errorType: retryError.errorType || prev.errorType,
+          progressMessage: undefined,
+        }
+      })
+    },
+    onSettled: () => {
+      manualRetryPendingRef.current = false
     },
   })
+  useEffect(() => {
+    manualRetryPendingRef.current = retryMutation.isPending
+  }, [retryMutation.isPending])
+
+  useEffect(() => {
+    if (connection.state !== 'disconnected' || !shouldAutoRetryConnection(connection.errorType)) {
+      autoRetryDelayRef.current = AUTO_RETRY_INITIAL_DELAY_MS
+      return
+    }
+    let stopped = false
+    let retryTimeout: number | undefined
+
+    const scheduleRetry = () => {
+      retryTimeout = window.setTimeout(() => {
+        if (stopped) return
+        if (manualRetryPendingRef.current || autoRetryInFlightRef.current) {
+          scheduleRetry()
+          return
+        }
+
+        autoRetryInFlightRef.current = true
+        setIsAutoRetrying(true)
+        let recovered = false
+        retryConnection()
+          .then((result) => {
+            if (stopped) return
+            recovered = true
+            autoRetryDelayRef.current = AUTO_RETRY_INITIAL_DELAY_MS
+            sseActiveRef.current = false
+            setConnection(result)
+            queryClient.removeQueries()
+            queryClient.invalidateQueries()
+          })
+          .catch((error: Error) => {
+            if (stopped) return
+            const retryError = error as ConnectionRetryError
+            setConnection(prev => {
+              if (sseActiveRef.current && prev.state === 'connected') return prev
+              return {
+                ...prev,
+                state: 'disconnected',
+                error: error.message || prev.error,
+                errorType: retryError.errorType || prev.errorType,
+                progressMessage: undefined,
+              }
+            })
+            autoRetryDelayRef.current = Math.min(autoRetryDelayRef.current * 2, AUTO_RETRY_MAX_DELAY_MS)
+            // Keep the visible disconnected state until a retry succeeds.
+          })
+          .finally(() => {
+            autoRetryInFlightRef.current = false
+            setIsAutoRetrying(false)
+            if (!stopped && !recovered) {
+              scheduleRetry()
+            }
+          })
+      }, autoRetryDelayRef.current)
+    }
+
+    scheduleRetry()
+
+    return () => {
+      stopped = true
+      if (retryTimeout !== undefined) {
+        window.clearTimeout(retryTimeout)
+      }
+    }
+  }, [connection.errorType, connection.state, queryClient])
 
   const retry = useCallback(() => {
+    if (retryMutation.isPending || autoRetryInFlightRef.current) return
+    manualRetryPendingRef.current = true
     retryMutation.mutate()
   }, [retryMutation])
 
@@ -180,7 +278,7 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
     connection,
     contexts,
     retry,
-    isRetrying: retryMutation.isPending,
+    isRetrying: retryMutation.isPending || isAutoRetrying,
     updateFromSSE,
   }
 

package/src/context/DiagnoseCustomization.tsx

@@ -0,0 +1,42 @@
+// Slot-based injection of a resource-level "Diagnose" action.
+//
+// Lets an embedding host (e.g. Radar Hub) inject a "Diagnose with AI" button
+// into every resource detail action bar — without forking WorkloadView or the
+// shared ResourceActionsBar. The host returns whatever node should render in
+// the action bar's right-aligned universal-actions area, given the resource
+// context.
+//
+// Default (no provider): Radar renders no Diagnose button — OSS stays
+// agent-free.
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+/** Render prop for the resource-level Diagnose action. */
+export type RenderDiagnoseAction = (ctx: {
+  kind: string;
+  namespace: string;
+  name: string;
+  /** Coarse health of the resource (from its status badge), so the entry point can
+   *  adapt: an urgent "Diagnose" on a problem vs. a quiet "ask AI" when fine/unknown. */
+  health?: "problem" | "healthy" | "unknown";
+}) => ReactNode;
+
+const DiagnoseCustomizationContext = createContext<RenderDiagnoseAction | undefined>(undefined);
+
+export function DiagnoseCustomizationProvider({
+  value,
+  children,
+}: {
+  value: RenderDiagnoseAction | undefined;
+  children: ReactNode;
+}) {
+  return (
+    <DiagnoseCustomizationContext.Provider value={value}>
+      {children}
+    </DiagnoseCustomizationContext.Provider>
+  );
+}
+
+export function useDiagnoseCustomization(): RenderDiagnoseAction | undefined {
+  return useContext(DiagnoseCustomizationContext);
+}

package/src/context/TimelineSource.tsx

@@ -0,0 +1,50 @@
+// Provides the active timeline data source to the timeline wrappers.
+//
+// Radar's binary never sets a source, so the default is the local event store
+// (GET {apiBase}/changes) — unchanged OSS behavior. A host embedding RadarApp
+// behind a proxy that serves retained history passes `timelineSource` on
+// RadarApp; this provider resolves it once and hands the timeline wrappers a
+// source-agnostic `useEvents` hook.
+//
+// Default (no provider): the local source, so components work standalone.
+import { createContext, useContext, useMemo, Fragment } from 'react'
+import type { ReactNode } from 'react'
+import {
+  localSource,
+  resolveTimelineSource,
+  type TimelineSource,
+  type TimelineSourceConfig,
+} from '../api/timelineSource'
+
+const TimelineSourceContext = createContext<TimelineSource>(localSource)
+
+export function TimelineSourceProvider({
+  config,
+  children,
+}: {
+  config?: TimelineSourceConfig
+  children: ReactNode
+}) {
+  // Resolve from the config's two fields, not the object: a host passing a
+  // fresh config literal each render must not re-resolve the source.
+  const mode = config?.mode
+  const maxRangeDays = config?.maxRangeDays
+  const source = useMemo(
+    () => resolveTimelineSource(mode === 'retained' ? { mode, maxRangeDays } : undefined),
+    [mode, maxRangeDays],
+  )
+  return (
+    <TimelineSourceContext.Provider value={source}>
+      {/* Key the subtree on the source mode. `useEvents` is a hook, and the local
+          vs retained sources are different hook functions with different internal
+          hook counts; a host flipping `timelineSource` mode mid-session would
+          otherwise corrupt React's hook order. Remounting on the flip keeps the
+          hook sequence consistent. */}
+      <Fragment key={mode ?? 'local'}>{children}</Fragment>
+    </TimelineSourceContext.Provider>
+  )
+}
+
+export function useTimelineSource(): TimelineSource {
+  return useContext(TimelineSourceContext)
+}

package/src/hooks/useClusterLoadState.ts

@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { useDashboard, type DashboardResponse } from '../api/client'
+import { dashboardClusterLoadState, idleClusterLoadState, type ClusterLoadState } from '../types/clusterLoadState'
+
+interface UseClusterLoadStateArgs {
+  namespaces: string[]
+  mainView: string
+  chromeless: boolean
+  contentReady: boolean
+  onClusterLoadStateChange?: (state: ClusterLoadState) => void
+}
+
+interface UseClusterLoadStateResult {
+  clusterLoadState: ClusterLoadState
+  showHomeClusterLoadFallback: boolean
+  // The dashboard's first fetch is still in flight (no data yet). In this phase a
+  // center "Loading dashboard…" splash is shown, so the topbar label would be
+  // redundant — callers can suppress it and keep just the status dot.
+  clusterLoadInitial: boolean
+}
+
+// Tracks cluster-data warmup (deferred/partial dashboard load) once the main
+// connection is usable. Standalone / embedded-with-chrome render it in Radar's
+// topbar; chromeless hosts (Radar Hub) receive it via onClusterLoadStateChange;
+// a chromeless host without a callback gets a fallback row on Home.
+export function useClusterLoadState({
+  namespaces,
+  mainView,
+  chromeless,
+  contentReady,
+  onClusterLoadStateChange,
+}: UseClusterLoadStateArgs): UseClusterLoadStateResult {
+  const showHomeClusterLoadFallback = chromeless && !onClusterLoadStateChange && mainView === 'home'
+  const needsClusterLoadState =
+    contentReady && (!chromeless || Boolean(onClusterLoadStateChange) || mainView === 'home')
+
+  // Off Home, stop observing once warmup has settled so we don't keep refetching
+  // /dashboard on other views. `enabled: false` makes the observer inactive,
+  // which also drops it from the SSE-driven invalidateQueries(['dashboard'])
+  // refetches — a stopped refetchInterval alone would not. Home stays live via
+  // HomeView's own observer; returning Home or changing scope re-arms, since
+  // `enabled` is derived from the current cached (re)load state.
+  const queryClient = useQueryClient()
+  const cached = queryClient.getQueryState<DashboardResponse>(['dashboard', namespaces])
+  const warmupSettled =
+    cached?.status === 'error' || (cached?.data != null && !dashboardClusterLoadState(cached.data).loading)
+  const enabled = needsClusterLoadState && (mainView === 'home' || !warmupSettled)
+
+  const { data, isPending, isError } = useDashboard(namespaces, { enabled })
+
+  const clusterLoadState = useMemo<ClusterLoadState>(() => {
+    if (!needsClusterLoadState || isError) return idleClusterLoadState
+    if (data) return dashboardClusterLoadState(data)
+    if (isPending) return { loading: true, message: 'Loading dashboard…', pendingKinds: [] }
+    return idleClusterLoadState
+  }, [needsClusterLoadState, isError, data, isPending])
+
+  // Ref the host callback so an unmemoized prop doesn't churn emits, and so the
+  // unmount reset fires only on real unmount (not on every callback identity change).
+  const emitRef = useRef(onClusterLoadStateChange)
+  useEffect(() => {
+    emitRef.current = onClusterLoadStateChange
+  })
+  useEffect(() => {
+    emitRef.current?.(clusterLoadState)
+  }, [clusterLoadState])
+  useEffect(() => () => emitRef.current?.(idleClusterLoadState), [])
+
+  const clusterLoadInitial = clusterLoadState.loading && !data
+
+  return { clusterLoadState, showHomeClusterLoadFallback, clusterLoadInitial }
+}

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/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,
@@ -15,6 +16,17 @@ export {
   getCredentialsMode,
 } from './api/config';
 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 } from './context/DiagnoseCustomization';
 export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
 
 // Shared cluster-switcher primitive — re-exported from @skyhook-io/k8s-ui so

package/src/main.tsx

@@ -159,7 +159,7 @@ window.addEventListener('mouseup', (e: MouseEvent) => {
 // 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(
+ReactDOM.createRoot(document.getElementById('radar')!).render(
   <React.StrictMode>
     <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/utils/navigation.ts

@@ -57,6 +57,16 @@ export function resourcePath(resource: SelectedResource): string {
   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'), {