@skyhook-io/radar-app 1.8.1 → 1.8.3

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/ui/ShortcutHelpOverlay.tsx

@@ -29,7 +29,7 @@ const VIEW_LABELS: Record<string, string> = {
   timeline: 'Timeline',
   helm: 'Helm',
   gitops: 'GitOps',
-  traffic: 'Traffic',
+  traffic: 'Live Traffic',
 }
 
 type ShortcutEntry = { description: string; keys: string[] }

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/ui/command-items.ts

@@ -91,7 +91,7 @@ const VIEW_ENTRIES: { view: MainView; label: string; icon: React.ComponentType<{
   { view: 'timeline', label: 'Timeline', icon: Clock, shortcut: 'g l' },
   { view: 'helm', label: 'Helm', icon: Package, shortcut: 'g m' },
   { view: 'gitops', label: 'GitOps', icon: GitBranch, shortcut: 'g o' },
-  { view: 'traffic', label: 'Traffic', icon: Activity, shortcut: 'g f' },
+  { view: 'traffic', label: 'Live Traffic', icon: Activity, shortcut: 'g f' },
   { view: 'checks', label: 'Checks', icon: ShieldCheck, shortcut: 'g u' },
   { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: 'g c' },
 ]

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
@@ -159,6 +174,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 +209,7 @@ function useActionsBarProps(kind: string, namespace: string, name: string) {
   return {
     canExec,
     canViewLogs,
-    canPortForward,
+    canPortForward: showPortForward,
     onOpenTerminal: openTerminal,
     onOpenLogs: openLogs,
     onOpenWorkloadLogs: openWorkloadLogs,
@@ -417,6 +436,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 +551,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/context/ConnectionContext.tsx

@@ -62,6 +62,22 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
   // 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)
+  // Track whether we've reached 'connected' at least once. Distinguishes the
+  // 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)
+  // 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
+  // identical keys, so a warm-at-mount cache must be fully refreshed on first
+  // connect. A cold cache (standalone, or a per-cluster remount) takes the cheap
+  // error-only path. Snapshot synchronously before this provider's own query
+  // registers — ConnectionProvider is the outermost provider, so a fresh client
+  // is genuinely empty here.
+  const cacheWarmAtMountRef = useRef<boolean | null>(null)
+  if (cacheWarmAtMountRef.current === null) {
+    cacheWarmAtMountRef.current = queryClient.getQueryCache().getAll().length > 0
+  }
 
   // Fetch initial connection status
   // Poll while connecting to get progress updates (SSE not established yet)
@@ -143,9 +159,20 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
       return status
     })
 
-    // If we just connected, invalidate queries to fetch fresh data
     if (status.state === 'connected') {
-      queryClient.invalidateQueries()
+      const firstConnect = !hasConnectedRef.current
+      hasConnectedRef.current = true
+      // A reconnect after a drop (cache stale across the gap), or a first connect
+      // onto a client that already carried data at mount (shared across clusters),
+      // refreshes the whole cache. A clean first connect only needs to recover the
+      // bootstrap queries that 503'd while the cluster was still 'connecting'
+      // (status === 'error'); the rest already fetched fresh during 'connecting',
+      // so re-fetching the whole cache there would double-load every endpoint.
+      if (!firstConnect || cacheWarmAtMountRef.current) {
+        queryClient.invalidateQueries()
+      } else {
+        queryClient.invalidateQueries({ predicate: (q) => q.state.status === 'error' })
+      }
     }
   }, [queryClient])
 

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/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/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