@skyhook-io/radar-app 0.1.9 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -217,6 +217,23 @@ function AppInner() {
   // Get mainView from URL path
   const mainView = getViewFromPath(location.pathname)
 
+  // Workload slug after `/resources/` (defaults to `pods`). Bare `/resources` redirects to `/resources/pods`.
+  const normalizedResourcesKindSlug = useMemo(() => {
+    const m = location.pathname.match(/^\/resources(?:\/([^/]+))?/)
+    const slug = m?.[1] ?? ''
+    return slug || 'pods'
+  }, [location.pathname])
+
+  // Canonical URL — `/resources` is not stable for bookmarks/sharing; normalize to `/resources/pods`.
+  useEffect(() => {
+    const path = location.pathname.replace(/\/+$/, '') || '/'
+    if (path !== '/resources') return
+    navigate(
+      { pathname: '/resources/pods', search: location.search, hash: location.hash },
+      { replace: true },
+    )
+  }, [location.pathname, location.search, location.hash, navigate])
+
   // Set mainView by navigating to the path
   const setMainView = useCallback((view: ExtendedMainView, params?: Record<string, string>) => {
     const path = view === 'home' ? '/' : `/${view}`
@@ -292,6 +309,23 @@ function AppInner() {
   // Suppress the mainView-change clear effect during controlled expand/collapse transitions.
   const suppressViewClearRef = useRef(false)
 
+  // Close resource drawer when switching workload kind in URL (/resources/pods → /resources/deployments).
+  // Keeps stale Pod drawer from masking the table after sidebar navigation (Radar Hub / app.radarhq.io).
+  const prevResourcesKindSlugRef = useRef<string | null>(null)
+  useEffect(() => {
+    if (mainView !== 'resources') {
+      prevResourcesKindSlugRef.current = null
+      return
+    }
+    const slug = normalizedResourcesKindSlug
+    const prev = prevResourcesKindSlugRef.current
+    prevResourcesKindSlugRef.current = slug
+    if (prev !== null && prev !== slug) {
+      setSelectedResource(null)
+      setDrawerExpanded(false)
+    }
+  }, [mainView, normalizedResourcesKindSlug])
+
   // Animation hooks for smooth mount/unmount transitions
   const resourceDrawer = useAnimatedUnmount(!!selectedResource, 300)
   const helmDrawer = useAnimatedUnmount(!!(mainView === 'helm' && selectedHelmRelease), 300)
@@ -755,12 +789,7 @@ function AppInner() {
       <header className="relative z-50 flex items-center justify-between px-4 py-2 bg-theme-base/90 backdrop-blur-sm border-b border-theme-border/50">
         {/* Left: Logo + Cluster info */}
         <div className="flex items-center gap-4 shrink-0">
-          {navCustomization.brandSlot ?? (
-            <div className="flex items-center gap-2.5">
-              <Logo />
-              <span className="text-xl text-theme-text-primary leading-none -translate-y-0.5" style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 520 }}>radar</span>
-            </div>
-          )}
+          {navCustomization.brandSlot ?? <Logo />}
 
           <div className="flex items-center gap-2">
             {navCustomization.contextSlot ?? <ContextSwitcher />}
@@ -787,13 +816,17 @@ function AppInner() {
                   }`}
                 />
               </Tooltip>
-              <span className="text-xs text-theme-text-tertiary hidden xl:inline">
-                {!connected
-                  ? 'Disconnected'
-                  : crdDiscoveryStatus === 'discovering'
-                    ? 'Discovering Custom Resources...'
-                    : 'Connected'}
-              </span>
+              {/* Inline label only for non-steady states where the user
+                  might need to act or wait. The healthy "Connected" case
+                  is the dot alone; the dot's tooltip discloses it. Keeping
+                  "Connected" text here would expand the left section and
+                  collide with the absolute-centered nav block at xl, which
+                  is the same breakpoint where nav labels appear. */}
+              {(!connected || crdDiscoveryStatus === 'discovering') && (
+                <span className="text-xs text-theme-text-tertiary hidden xl:inline">
+                  {!connected ? 'Disconnected' : 'Discovering Custom Resources...'}
+                </span>
+              )}
               {!connected && (
                 <button
                   onClick={reconnect}
@@ -834,7 +867,17 @@ function AppInner() {
                 }`}
               >
                 <Icon className="w-4 h-4" />
-                <span className="hidden lg:inline">{label}</span>
+                {/* Labels appear only when the absolute-centered nav has
+                    enough horizontal room past the left section. Right-side
+                    chrome that adds further pressure (Connected text, star
+                    count) is intentionally pushed to the next tier (xl) so
+                    label rendering and right-side expansion stay decoupled.
+                    Per-button Tooltip discloses labels on hover when the
+                    icon-only viewport is in effect. The 1440 anchor is an
+                    off-system breakpoint chosen by measurement at the time
+                    of this PR — recompute if the cluster switcher cap or
+                    other left-section chrome changes appreciably. */}
+                <span className="hidden min-[1440px]:inline">{label}</span>
               </button>
             </Tooltip>
           ))}
@@ -945,7 +988,9 @@ function AppInner() {
             <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
             <div className="text-center">
               <p className="font-medium text-theme-text-primary">Connecting to cluster</p>
-              <p className="text-sm text-theme-text-secondary mt-1">{connection.context || 'Loading…'}</p>
+              {connection.context && (
+                <p className="text-sm text-theme-text-secondary mt-1">{connection.context}</p>
+              )}
               {connection.progressMessage && (
                 <p className="text-xs text-theme-text-tertiary animate-pulse mt-3">
                   {connection.progressMessage}
@@ -1379,14 +1424,35 @@ function App() {
   )
 }
 
-// Skyhook logo that switches based on theme
+// Header brand: emerald-square radar icon + stacked "Radar" / "by Skyhook"
+// wordmark. Shares its visual shape with the radar-hub-web shell so the
+// standalone OSS app and the embedded Cloud experience read as the same
+// product, and is narrow enough to leave room for the cluster switcher
+// and nav block on standard laptop viewports.
 function Logo() {
-  const { theme } = useTheme()
-  const logoSrc = theme === 'dark'
-    ? '/assets/skyhook/logotype-white-color.svg'
-    : '/assets/skyhook/logotype-dark-color.svg'
-
-  return <img src={logoSrc} alt="Skyhook" className="h-5 w-auto" />
+  return (
+    <div className="flex items-center gap-2.5">
+      <div className="relative w-7 h-7 rounded-lg overflow-hidden flex-shrink-0 bg-emerald-500/10 border border-emerald-500/20">
+        <img
+          src="/images/radar/radar-icon.svg"
+          alt=""
+          aria-hidden
+          className="w-full h-full p-0.5"
+          // Fail loud on a missing/blocked asset rather than rendering an
+          // empty emerald square next to the wordmark — the latter reads
+          // as broken chrome with no diagnostics. Most likely cause is a
+          // build/deploy path mismatch.
+          onError={(e) =>
+            console.error('Radar logo asset failed to load:', (e.currentTarget as HTMLImageElement).src)
+          }
+        />
+      </div>
+      <div className="flex flex-col leading-none">
+        <span className="font-semibold text-[15px] tracking-tight text-theme-text-primary">Radar</span>
+        <span className="text-[9px] mt-0.5 tracking-wide uppercase text-theme-text-tertiary">by Skyhook</span>
+      </div>
+    </div>
+  )
 }
 
 // GitHub star button with live star count + programmatic starring via gh CLI

package/src/api/client.ts

@@ -26,6 +26,7 @@ import type {
 } from '../types'
 import type { GitOpsOperationResponse } from '../types/gitops'
 import { getApiBase, getAuthHeaders, getCredentialsMode, getBasename, routePath } from './config'
+import { pluralToKind } from '../utils/navigation'
 
 // Wrapper around fetch that always includes credentials (for session cookies)
 // and handles 401 responses globally. Merges caller-provided headers with
@@ -907,27 +908,78 @@ export function useResourceChildren(kind: string, namespace: string, name: strin
   })
 }
 
-// Resource-specific events (filtered by resource name)
-export function useResourceEvents(kind: string, namespace: string, name: string) {
-  const params = new URLSearchParams()
-  params.set('namespace', namespace)
-  params.set('kind', kind)
-  params.set('limit', '50')
+export interface ResourceEventsResult {
+  k8sEvents: TimelineEvent[]
+  updates: TimelineEvent[]
+  isLoading: boolean
+  // Per-stream errors are surfaced separately so the UI can distinguish
+  // "this stream failed" from "no data" — silent fallback to [] would
+  // reproduce the exact failure mode #547 is about.
+  k8sError: Error | null
+  updatesError: Error | null
+}
+
+// K8s events and resource updates are fetched separately so a high-frequency
+// informer update stream (e.g. a CrashLoop status field flapping every few
+// seconds) can never starve out user-meaningful K8s events under a shared limit.
+export function useResourceEvents(kind: string, namespace: string, name: string): ResourceEventsResult {
+  // The timeline store keys events by their K8s Kind (singular PascalCase, e.g. "Pod"),
+  // but callers pass the URL-form kind ("pods").
+  const singularKind = pluralToKind(kind)
+  const since = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()
+
+  // Include managed resources — when viewing a specific resource (e.g. a Pod owned
+  // by a ReplicaSet, or a K8s Event whose involvedObject is the Pod itself), the
+  // default preset's IsManaged() filter would otherwise drop everything.
+  const baseParams = () => {
+    const p = new URLSearchParams()
+    p.set('namespace', namespace)
+    p.set('kind', singularKind)
+    p.set('include_managed', 'true')
+    p.set('since', since)
+    return p
+  }
 
-  // Get events from last 24 hours
-  const since = new Date(Date.now() - 24 * 60 * 60 * 1000)
-  params.set('since', since.toISOString())
+  const enabled = Boolean(kind && namespace && name)
 
-  return useQuery<TimelineEvent[]>({
-    queryKey: ['resource-events', kind, namespace, name],
+  // K8s events: high limit so the full set is always returned. The number of
+  // distinct K8s events per resource is naturally bounded — kubelet/controllers
+  // dedupe via Reason+InvolvedObject and bump count.
+  const k8sQuery = useQuery<TimelineEvent[]>({
+    queryKey: ['resource-events', 'k8s', singularKind, namespace, name],
     queryFn: async () => {
+      const params = baseParams()
+      params.set('sources', 'k8s_event')
+      params.set('limit', '500')
       const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
-      // Filter to only events for this specific resource
       return events.filter(e => e.name === name)
     },
-    enabled: Boolean(kind && namespace && name),
-    refetchInterval: 15000, // Refresh every 15 seconds
+    enabled,
+    refetchInterval: 15000,
+  })
+
+  // Resource updates (informer diffs + historical): bounded so a flapping
+  // resource doesn't return an unbounded payload.
+  const updatesQuery = useQuery<TimelineEvent[]>({
+    queryKey: ['resource-events', 'updates', singularKind, namespace, name],
+    queryFn: async () => {
+      const params = baseParams()
+      params.set('sources', 'informer,historical')
+      params.set('limit', '50')
+      const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
+      return events.filter(e => e.name === name)
+    },
+    enabled,
+    refetchInterval: 15000,
   })
+
+  return {
+    k8sEvents: k8sQuery.data ?? [],
+    updates: updatesQuery.data ?? [],
+    isLoading: k8sQuery.isLoading || updatesQuery.isLoading,
+    k8sError: (k8sQuery.error as Error | null) ?? null,
+    updatesError: (updatesQuery.error as Error | null) ?? null,
+  }
 }
 
 // ============================================================================

package/src/components/ContextSwitcher.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { Server, AlertTriangle } from 'lucide-react'
+import { AlertTriangle } from 'lucide-react'
 import {
   ClusterSwitcher,
   type ClusterSwitcherItem,
@@ -61,9 +61,14 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
         : hasMultipleAccounts
           ? 'Other'
           : undefined
+      // `name` is the raw context — ClusterSwitcher renders it through
+      // ClusterName, which collapses GKE/EKS/AKS shapes to the meaningful
+      // tail. `secondary` shows the original raw when we collapsed it,
+      // so users always see the full context at a glance (rather than
+      // having to hover to reveal it).
       return {
         id: p.context.name,
-        name: p.clusterName,
+        name: p.context.name,
         secondary: p.provider ? p.raw : undefined,
         badge: p.region || undefined,
         group: { key: groupKey, label: groupLabel },
@@ -148,7 +153,6 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
   }
 
   const currentRaw = clusterInfo?.context || contexts?.find(c => c.isCurrent)?.name || 'Unknown'
-  const currentParsed = parseContextName(currentRaw)
   const currentId = contexts?.find(c => c.isCurrent)?.name
 
   return (
@@ -156,9 +160,7 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
       <ClusterSwitcher
         className={className}
         currentId={currentId}
-        currentName={currentParsed.clusterName}
-        currentTooltip={currentRaw}
-        triggerIcon={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
+        currentName={currentRaw}
         items={items}
         onSelect={handleSelect}
         loading={switchContext.isPending}

package/src/components/resources/ResourcesView.tsx

@@ -160,6 +160,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   return (
     <>
     <BaseResourcesView
+      key={location.pathname}
       namespaces={namespaces}
       selectedResource={selectedResource}
       onResourceClick={onResourceClick}

package/src/components/workload/WorkloadView.tsx

@@ -17,6 +17,7 @@ import {
   useArgoSync, useArgoRefresh, useArgoSuspend, useArgoResume,
   useCordonNode, useUncordonNode, useDrainNode,
   useCascadeDeletePreview,
+  useResourceEvents,
   fetchJSON,
 } from '../../api/client'
 import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
@@ -290,6 +291,16 @@ export function WorkloadView({
   // Fetch topology for hierarchy building (only when expanded)
   const { data: topology } = useTopology([namespace], 'resources', { enabled: expanded })
 
+  // Always fetched so Recent Events populates on drawer open; allEvents below is
+  // gated on expanded because it's namespace-wide and expensive.
+  const {
+    k8sEvents: resourceFocusedK8sEvents,
+    updates: resourceFocusedUpdates,
+    isLoading: resourceFocusedEventsLoading,
+    k8sError: resourceFocusedK8sError,
+    updatesError: resourceFocusedUpdatesError,
+  } = useResourceEvents(kindProp, namespace, name)
+
   // Fetch all events for this resource's namespace (only when expanded)
   const { data: allEvents, isLoading: eventsLoading } = useChanges({
     namespaces: [namespace],
@@ -336,6 +347,11 @@ export function WorkloadView({
       allEvents={allEvents}
       eventsLoading={eventsLoading}
       topology={topology}
+      resourceFocusedK8sEvents={resourceFocusedK8sEvents}
+      resourceFocusedUpdates={resourceFocusedUpdates}
+      resourceFocusedEventsLoading={resourceFocusedEventsLoading}
+      resourceFocusedK8sError={resourceFocusedK8sError}
+      resourceFocusedUpdatesError={resourceFocusedUpdatesError}
       // Capabilities
       canUpdateSecrets={canUpdateSecrets}
       // Mutations

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -1,31 +0,0 @@
-import { type ComponentProps } from 'react'
-import {
-  ResourceRendererDispatch as BaseResourceRendererDispatch,
-  getResourceStatus,
-} from '@skyhook-io/k8s-ui'
-import { PrometheusCharts } from '../resource/PrometheusCharts'
-import { useResourceEvents } from '../../api/client'
-
-// Re-export getResourceStatus as-is (pure function, no wrapper needed)
-export { getResourceStatus }
-
-type BaseProps = ComponentProps<typeof BaseResourceRendererDispatch>
-
-export function ResourceRendererDispatch(props: Omit<BaseProps, 'events' | 'eventsLoading' | 'renderMetrics'>) {
-  const { data: events, isLoading: eventsLoading } = useResourceEvents(
-    props.resource.kind,
-    props.resource.namespace,
-    props.resource.name
-  )
-
-  return (
-    <BaseResourceRendererDispatch
-      {...props}
-      events={events}
-      eventsLoading={eventsLoading}
-      renderMetrics={({ kind, namespace, name }) => (
-        <PrometheusCharts kind={kind} namespace={namespace} name={name} />
-      )}
-    />
-  )
-}