@skyhook-io/k8s-ui 1.5.6 → 1.5.8

package/src/components/resources/resource-utils-cnpg.ts

@@ -2,6 +2,7 @@
 
 import type { StatusBadge } from './resource-utils'
 import { healthColors, formatAge, formatDuration } from './resource-utils'
+import { parseGoTimeString } from '../../utils/parse-go-time'
 
 // ============================================================================
 // CNPG CLUSTER UTILITIES
@@ -195,7 +196,7 @@ export function getCNPGClusterCertificateExpirations(resource: any): CNPGCertifi
   if (!expirations || typeof expirations !== 'object') return []
   const now = new Date()
   return Object.entries(expirations).map(([secretName, expiryDate]: [string, any]) => {
-    const expiry = new Date(expiryDate)
+    const expiry = parseGoTimeString(String(expiryDate))
     const daysUntilExpiry = isNaN(expiry.getTime())
       ? -1  // treat unparseable dates as expired/critical
       : Math.floor((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -200,7 +200,7 @@ import {
   AzureManagedMachinePoolRenderer,
   AzureMachineRenderer,
 } from '../resources/renderers'
-import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom } from '../../types'
+import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom, TimelineEvent } from '../../types'
 import type { CopyHandler } from '../ui/drawer-components'
 import { AlertBanner } from '../ui/drawer-components'
 
@@ -312,10 +312,19 @@ interface ResourceRendererDispatchProps {
   eventsHint?: React.ReactNode
   /** When provided, sidebar sections (related resources, events, labels, annotations, metadata) are passed to this render prop instead of being rendered inline */
   renderSidebar?: (sections: React.ReactNode) => React.ReactNode
-  /** Resource events — injected by the platform wrapper */
-  events?: any[]
+  /** K8s events for the focused resource — always shown (no toggle hides them)
+   *  so resource history can't go missing. */
+  events?: TimelineEvent[]
   /** Whether events are still loading */
   eventsLoading?: boolean
+  /** Resource update events (informer/historical diffs) — hidden behind a
+   *  toggle in the Recent Events section because they can be very high-volume
+   *  for a flapping resource. */
+  updates?: TimelineEvent[]
+  /** Errors from the events / updates queries — surfaced inline in the
+   *  Recent Events section so a partial failure doesn't render as empty. */
+  eventsError?: Error | null
+  updatesError?: Error | null
   /** Render prop for Prometheus metrics charts — injected by the platform wrapper */
   renderMetrics?: (props: { kind: string; namespace: string; name: string }) => React.ReactNode
 }
@@ -337,6 +346,9 @@ export function ResourceRendererDispatch({
   renderSidebar,
   events,
   eventsLoading,
+  updates,
+  eventsError,
+  updatesError,
   renderMetrics,
   resolvedEnvFrom,
   rendererOverrides,
@@ -353,7 +365,7 @@ export function ResourceRendererDispatch({
   const sidebarContent = showCommonSections && (
     <>
       <RelatedResourcesSection relationships={relationships} onNavigate={onNavigate} />
-      {kind !== 'events' && <EventsSection events={events || []} isLoading={eventsLoading ?? false} hint={eventsHint} />}
+      {kind !== 'events' && <EventsSection events={events || []} updates={updates || []} isLoading={eventsLoading ?? false} eventsError={eventsError ?? null} updatesError={updatesError ?? null} hint={eventsHint} />}
       <LabelsSection data={data} />
       <AnnotationsSection data={data} />
       <MetadataSection data={data} />

package/src/components/timeline/TimelineList.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo, useRef, useEffect } from 'react'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { PaneLoader } from '../ui/PaneLoader'
 import {
   AlertCircle,
   CheckCircle,
@@ -403,10 +404,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
       {/* Timeline content */}
       <div className="flex-1 overflow-auto">
         {isLoading ? (
-          <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-            <RefreshCw className="w-5 h-5 animate-spin mr-2" />
-            Loading timeline...
-          </div>
+          <PaneLoader label="Loading timeline…" className="h-full" />
         ) : filteredActivity.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary">
             <Clock className="w-12 h-12 mb-4 opacity-50" />

package/src/components/topology/TopologyGraph.tsx

@@ -21,6 +21,7 @@ import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
 import { AlertTriangle, Download, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
+import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
@@ -653,14 +654,7 @@ export function TopologyGraph({
   }, [selectedNodeId, setNodes])
 
   if (!topology) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
-        <div className="text-center">
-          <Loader2 className="w-6 h-6 animate-spin mx-auto mb-2 opacity-50" />
-          <p className="text-sm">Loading topology...</p>
-        </div>
-      </div>
-    )
+    return <PaneLoader label="Loading topology…" className="flex-1" />
   }
 
   if (topology.nodes.length === 0) {

package/src/components/ui/ClusterName.tsx

@@ -1,3 +1,5 @@
+import { type ReactNode, useCallback, useState } from 'react'
+import { MiddleEllipsis } from './MiddleEllipsis'
 import { Tooltip } from './Tooltip'
 import { parseContextName } from '../../utils/context-name'
 import type { ParsedContextName } from '../../utils/context-name'
@@ -10,8 +12,14 @@ import azureLogo from './provider-logos/azure.svg'
 // cluster identity surfaced as primary text and provider/region pushed
 // into supporting metadata. Wraps parseContextName from utils/context-name
 // so all surfaces (cluster cards, table cells, column headers, switcher
-// dropdowns, breadcrumb, error views) share identical cluster-identity
-// rendering.
+// trigger + dropdowns, breadcrumb, error views) share identical
+// cluster-identity rendering.
+//
+// Width-aware: the name middle-truncates to fit its container so long
+// strings (`gke_proj_us-east1-b_prod-cluster-us-east1`, custom user names)
+// keep both ends readable. Tooltip surfaces the raw whenever EITHER the
+// parse collapsed something (`gke_…` → `prod-cluster-us-east1`) OR the
+// rendered name is being middle-truncated to fit.
 //
 // Variants:
 //   inline   — name + small provider logo, fits in a table cell or
@@ -20,7 +28,9 @@ import azureLogo from './provider-logos/azure.svg'
 //              for card-sized surfaces
 //
 // User-named clusters that don't match a known shape pass through
-// unchanged — no provider badge, no tooltip needed.
+// unchanged. A `fallbackBadge` prop lets surfaces that always want a
+// leading visual (e.g. the cluster-switcher trigger) supply one for the
+// no-provider case.
 
 type Provider = NonNullable<ParsedContextName['provider']>
 
@@ -38,10 +48,21 @@ interface Props {
   name: string
   /** Visual shape. Default: inline. */
   variant?: 'inline' | 'stacked'
-  /** Suppress the provider badge — use when context already conveys provider. */
+  /** Suppress the provider badge — use when context already conveys provider.
+   *  Also suppresses `fallbackBadge`; `noBadge` wins when both are set. */
   noBadge?: boolean
+  /** Rendered in the badge slot when no provider is detected and `noBadge`
+   *  is not set. Lets the cluster switcher trigger keep a Server-icon
+   *  fallback for custom kubeconfig names without forcing every consumer
+   *  to ship one. Ignored when `noBadge` is set. */
+  fallbackBadge?: ReactNode
   /** Optional className on the outer span. */
   className?: string
+  /** Suppress the hover tooltip even when the parsed name was collapsed
+   *  or middle-truncated. Use when the surrounding chrome already
+   *  discloses the raw context (e.g. inside an open switcher dropdown
+   *  where the tooltip would overlap the popover content). */
+  noTooltip?: boolean
 }
 
 function ProviderBadge({ provider }: { provider: Provider }) {
@@ -60,19 +81,28 @@ function ProviderBadge({ provider }: { provider: Provider }) {
   )
 }
 
-export function ClusterName({ name, variant = 'inline', noBadge, className }: Props) {
+export function ClusterName({ name, variant = 'inline', noBadge, fallbackBadge, className, noTooltip }: Props) {
   const parsed = parseContextName(name)
+  const [truncated, setTruncated] = useState(false)
+  const onTruncatedChange = useCallback((t: boolean) => setTruncated(t), [])
 
-  const showBadge = !noBadge && parsed.provider !== null
+  const hasProvider = parsed.provider !== null
+  const showProviderBadge = !noBadge && hasProvider
+  const showFallback = !noBadge && !hasProvider && fallbackBadge != null
   const showRegion = parsed.region !== null && variant === 'stacked'
-  const needsTooltip = parsed.raw !== parsed.clusterName
+  const collapsed = parsed.raw !== parsed.clusterName
+  // Tooltip when there's something to disclose — either we collapsed the
+  // raw, or the displayed name is being middle-truncated to fit. Callers
+  // can opt out via `noTooltip` when the raw is already visible elsewhere.
+  const needsTooltip = !noTooltip && (collapsed || truncated)
 
   const body = (
     <span className={['inline-flex items-center gap-1.5 min-w-0', className ?? ''].join(' ')}>
-      {showBadge && <ProviderBadge provider={parsed.provider!} />}
+      {showProviderBadge && <ProviderBadge provider={parsed.provider!} />}
+      {showFallback && fallbackBadge}
       {variant === 'stacked' ? (
-        <span className="flex flex-col min-w-0">
-          <span className="truncate">{parsed.clusterName}</span>
+        <span className="flex flex-col min-w-0 flex-1">
+          <MiddleEllipsis text={parsed.clusterName} onTruncatedChange={onTruncatedChange} />
           {showRegion && (
             <span className="text-[10px] text-theme-text-tertiary truncate">
               {parsed.provider} · {parsed.region}
@@ -80,7 +110,7 @@ export function ClusterName({ name, variant = 'inline', noBadge, className }: Pr
           )}
         </span>
       ) : (
-        <span className="truncate">{parsed.clusterName}</span>
+        <MiddleEllipsis text={parsed.clusterName} onTruncatedChange={onTruncatedChange} />
       )}
     </span>
   )

package/src/components/ui/MiddleEllipsis.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useRef, useState } from 'react'
+
+// Renders text on a single line, fitted to its parent's width. When the full
+// string overflows, it's truncated from the middle (`gke_koala…us-east1`)
+// rather than the end, so cluster context strings like
+// `gke_koalabackend_us-east1-b_prod-cluster-us-east1` keep both the
+// identifying prefix and the region/role suffix.
+//
+// The trick: a "ghost" copy of the full text sits in normal flow but is
+// visually hidden, while the visible truncated text overlays it absolutely.
+// The ghost lets flex layout know our PREFERRED width is the full text — so
+// when an ancestor's max-width grows (e.g. on a viewport breakpoint change),
+// the wrapper re-grows back instead of staying trapped at the truncated
+// render's width. Without it the layout settles into a fixed point: the
+// flex parent shrink-wraps to the truncated content, MiddleEllipsis sees
+// the shrunken width, keeps truncating; widening doesn't recover.
+//
+// Concretely, removing the ghost makes the trigger render full-width on
+// first paint, then collapse to the truncated width on the first
+// ResizeObserver tick, and stay collapsed forever even when the viewport
+// widens. The ghost is load-bearing — don't simplify it away.
+//
+// Place inside a width-constrained container (e.g. a button child with
+// `max-w-[…]`). The wrapper itself takes `width: 100%` of that container.
+
+const ELLIPSIS = '…'
+
+export interface MiddleEllipsisProps {
+  text: string
+  className?: string
+  /** Native browser tooltip. Opt-in: defaulting to the full text would
+   *  duplicate any tooltip wrapper (e.g. `<Tooltip>`) higher up the tree. */
+  title?: string
+  /** Fires whenever the rendered text changes between full and truncated
+   *  (edge-triggered, not level — won't fire on every render). Lets a parent
+   *  gate behavior on actual truncation, e.g. show a custom tooltip only
+   *  when the visible text isn't already the full string.
+   *
+   *  Do NOT use the value to alter the width of the measured container — a
+   *  truncated→untruncated swap that resizes the parent would oscillate
+   *  through the ResizeObserver. Tooltips, badges, and other overlays/sibling
+   *  affordances are fine; layout-affecting changes are not. */
+  onTruncatedChange?: (truncated: boolean) => void
+}
+
+export function MiddleEllipsis({ text, className, title, onTruncatedChange }: MiddleEllipsisProps) {
+  const wrapperRef = useRef<HTMLSpanElement>(null)
+  const [display, setDisplay] = useState(text)
+  const lastReportedTruncated = useRef<boolean | null>(null)
+
+  useEffect(() => {
+    const node = wrapperRef.current
+    if (!node || typeof window === 'undefined') return
+    const ctx = document.createElement('canvas').getContext('2d')
+    if (!ctx) {
+      setDisplay(text)
+      return
+    }
+
+    const recompute = () => {
+      // Use subpixel width (`getBoundingClientRect`) rather than the
+      // pixel-rounded `clientWidth`. measureText returns subpixel widths,
+      // and when the full text is JUST under the available space — say
+      // ctx.measureText says 173.4px and clientWidth rounds to 173 — the
+      // integer comparison decides we don't fit and middle-truncates a
+      // name that visually would have rendered fine.
+      const width = node.getBoundingClientRect().width
+      if (width <= 0) return
+      const cs = window.getComputedStyle(node)
+      // Include fontStyle in the shorthand so italic faces measure correctly.
+      // If the assignment ever silently fails (malformed family quoting,
+      // exotic computed values), the browser leaves ctx.font at its previous
+      // value — on first call that's the default `10px sans-serif`, which
+      // under-measures and would cause over-truncation. Detect by reading
+      // back: if ctx.font normalised to the default but we didn't ask for
+      // it, bail to full-text render (clipped by overflow:hidden) rather
+      // than render a wrongly-truncated string.
+      ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`
+      if (ctx.font === '10px sans-serif' && cs.fontSize !== '10px') {
+        setDisplay(text)
+        return
+      }
+      const next = fitMiddleTruncate(text, width, ctx)
+      setDisplay(next)
+      const truncated = next !== text
+      if (truncated !== lastReportedTruncated.current) {
+        lastReportedTruncated.current = truncated
+        onTruncatedChange?.(truncated)
+      }
+    }
+
+    recompute()
+    const observer = new ResizeObserver(recompute)
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [text, onTruncatedChange])
+
+  return (
+    <span
+      ref={wrapperRef}
+      className={className}
+      title={title}
+      style={{
+        display: 'block',
+        position: 'relative',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        minWidth: 0,
+        // width:100% so the wrapper claims the parent's full available
+        // width before measurement. Without it, a parent with extra room
+        // would let the wrapper shrink to the ghost's natural width — and
+        // the absolute-positioned visible overlay (inset:0) would clip to
+        // that shrunken box, making text middle-truncate even when the
+        // surrounding container had room to render it in full.
+        width: '100%',
+      }}
+    >
+      {/* Ghost: claims the full text's natural width in flow so flex parents
+          shrink-wrap to the *full* preferred size, not the truncated render. */}
+      <span aria-hidden="true" style={{ visibility: 'hidden' }}>
+        {text}
+      </span>
+      {/* Visible: overlays the ghost with the current truncated rendering. */}
+      <span style={{ position: 'absolute', inset: 0, overflow: 'hidden', whiteSpace: 'nowrap' }}>
+        {display}
+      </span>
+    </span>
+  )
+}
+
+// Binary-search the largest `n` such that `prefix(n) + … + suffix(n)` fits
+// in `width`. Symmetric on purpose — keeping prefix and suffix balanced is
+// the cheapest way to preserve the most identifying chars on both ends of
+// names like `arn:aws:eks:…:cluster/prod` or `gke_…_prod-cluster-us-east1`.
+function fitMiddleTruncate(
+  text: string,
+  width: number,
+  ctx: CanvasRenderingContext2D,
+): string {
+  if (ctx.measureText(text).width <= width) return text
+  if (text.length <= 2) return text
+
+  let lo = 1
+  let hi = Math.floor((text.length - 1) / 2)
+  let best = 0
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1
+    const candidate = text.slice(0, mid) + ELLIPSIS + text.slice(-mid)
+    if (ctx.measureText(candidate).width <= width) {
+      best = mid
+      lo = mid + 1
+    } else {
+      hi = mid - 1
+    }
+  }
+  return best === 0 ? ELLIPSIS : text.slice(0, best) + ELLIPSIS + text.slice(-best)
+}

package/src/components/ui/PaneLoader.tsx

@@ -0,0 +1,21 @@
+import radarLoadingIcon from '../../assets/radar/radar-icon-loading.svg'
+
+// PaneLoader — center-of-pane loading state. Animated radar icon stacked
+// above a label so swapping the label across the loading chain doesn't
+// shift the icon horizontally. Pin to the parent's fill via `className`
+// (`flex-1`, `h-full`, `h-32`, `absolute inset-0`, etc.). The SVG self-
+// animates (sweep arm + blips, `prefers-reduced-motion` honored).
+export function PaneLoader({
+  label = 'Loading…',
+  className = '',
+}: {
+  label?: string
+  className?: string
+}) {
+  return (
+    <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
+      <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+      <span className="text-sm text-theme-text-tertiary">{label}</span>
+    </div>
+  )
+}

package/src/components/ui/drawer-components.tsx

@@ -913,13 +913,23 @@ function formatKindForRef(kind: string): string {
 // ============================================================================
 
 interface EventsSectionProps {
+  /** K8s events for the focused resource — always shown. */
   events: TimelineEvent[]
+  /** Resource update events (informer/historical diffs) — hidden behind a
+   *  toggle to avoid drowning out K8s events when a resource flaps. */
+  updates?: TimelineEvent[]
   isLoading?: boolean
+  /** Errors from the K8s events / updates queries. Rendered inline so a
+   *  failed fetch doesn't silently look like "no events." */
+  eventsError?: Error | null
+  updatesError?: Error | null
   /** Optional hint shown below the event list (e.g. "See Timeline tab for related resources") */
   hint?: React.ReactNode
 }
 
-export function EventsSection({ events, isLoading, hint }: EventsSectionProps) {
+export function EventsSection({ events, updates = [], isLoading, eventsError, updatesError, hint }: EventsSectionProps) {
+  const [showUpdates, setShowUpdates] = useState(false)
+
   if (isLoading) {
     return (
       <Section title="Recent Events" defaultExpanded>
@@ -928,19 +938,55 @@ export function EventsSection({ events, isLoading, hint }: EventsSectionProps) {
     )
   }
 
-  if (!events || events.length === 0) {
+  const updateCount = updates.length
+  const visible = showUpdates
+    ? [...events, ...updates].sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+    : events
+
+  const toggle = updateCount > 0 ? (
+    <Tooltip
+      className="max-w-xs leading-snug"
+      content={
+        <span style={{ whiteSpace: 'normal', display: 'inline-block' }}>
+          Changes are field-level diffs to this resource&apos;s spec or status (e.g. status flips, replica counts). Distinct from K8s events, which are messages emitted by the kubelet and controllers.
+        </span>
+      }
+    >
+      <button
+        onClick={(e) => { e.stopPropagation(); setShowUpdates(v => !v) }}
+        className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+      >
+        {showUpdates ? `Hide ${updateCount} changes` : `Show ${updateCount} changes`}
+      </button>
+    </Tooltip>
+  ) : null
+
+  const errors = (
+    <>
+      {eventsError && (
+        <div className="text-xs text-red-500 mt-2">Failed to load K8s events: {eventsError.message}</div>
+      )}
+      {updatesError && (
+        <div className="text-xs text-red-500 mt-2">Failed to load resource changes: {updatesError.message}</div>
+      )}
+    </>
+  )
+
+  if (visible.length === 0) {
     return (
-      <Section title="Recent Events" defaultExpanded={false}>
+      <Section title="Recent Events" defaultExpanded={!!(eventsError || updatesError)}>
         <div className="text-sm text-theme-text-tertiary">No recent events</div>
+        {errors}
+        {toggle && <div className="mt-2">{toggle}</div>}
         {hint && <div className="mt-2">{hint}</div>}
       </Section>
     )
   }
 
   return (
-    <Section title={`Recent Events (${events.length})`} defaultExpanded>
+    <Section title={`Recent Events (${visible.length})`} defaultExpanded>
       <div className="space-y-2 max-h-64 overflow-y-auto">
-        {events.map((event, i) => (
+        {visible.map((event, i) => (
           <div
             key={`${event.id}-${i}`}
             className={clsx(
@@ -973,6 +1019,8 @@ export function EventsSection({ events, isLoading, hint }: EventsSectionProps) {
           </div>
         ))}
       </div>
+      {errors}
+      {toggle && <div className="mt-2">{toggle}</div>}
       {hint && <div className="mt-2">{hint}</div>}
     </Section>
   )

package/src/components/ui/index.ts

@@ -1,5 +1,8 @@
 export { Tooltip } from './Tooltip'
+export { PaneLoader } from './PaneLoader'
 export { ClusterName } from './ClusterName'
+export { MiddleEllipsis } from './MiddleEllipsis'
+export type { MiddleEllipsisProps } from './MiddleEllipsis'
 export { EmptyState } from './EmptyState'
 export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
 export { FilterPill } from './FilterPill'

package/src/components/workload/WorkloadView.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } from 'react'
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { PaneLoader } from '../ui/PaneLoader'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
 import {
@@ -84,6 +85,11 @@ interface WorkloadViewProps {
   eventsLoading?: boolean
   /** Topology data for hierarchy building */
   topology?: any
+  resourceFocusedK8sEvents?: TimelineEvent[]
+  resourceFocusedUpdates?: TimelineEvent[]
+  resourceFocusedEventsLoading?: boolean
+  resourceFocusedK8sError?: Error | null
+  resourceFocusedUpdatesError?: Error | null
 
   // ── Capabilities ─────────────────────────────────────────────────────────
   /** Whether secrets can be updated */
@@ -159,6 +165,11 @@ export function WorkloadView({
   allEvents,
   eventsLoading = false,
   topology,
+  resourceFocusedK8sEvents,
+  resourceFocusedUpdates,
+  resourceFocusedEventsLoading = false,
+  resourceFocusedK8sError = null,
+  resourceFocusedUpdatesError = null,
   // Capabilities
   canUpdateSecrets,
   // Mutations
@@ -426,7 +437,7 @@ export function WorkloadView({
         {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element */}
         <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
           {resourceLoading ? (
-            <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Loading...</div>
+            <PaneLoader className="h-32" />
           ) : !resource ? (
             <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
           ) : showYaml ? (
@@ -456,6 +467,11 @@ export function WorkloadView({
                 rendererOverrides={rendererOverrides}
                 resolvedEnvFrom={resolvedEnvFrom}
                 renderMetrics={renderMetricsTab}
+                events={resourceFocusedK8sEvents}
+                eventsLoading={resourceFocusedEventsLoading}
+                updates={resourceFocusedUpdates}
+                eventsError={resourceFocusedK8sError}
+                updatesError={resourceFocusedUpdatesError}
               />
               {renderOverviewExtra && (
                 <div className="px-4 pb-4">
@@ -602,6 +618,11 @@ export function WorkloadView({
               onSwitchToTimeline={() => handleSetTab('timeline')}
               rendererOverrides={rendererOverrides}
               resolvedEnvFrom={resolvedEnvFrom}
+              events={resourceFocusedK8sEvents}
+              eventsLoading={resourceFocusedEventsLoading}
+              updates={resourceFocusedUpdates}
+              eventsError={resourceFocusedK8sError}
+              updatesError={resourceFocusedUpdatesError}
               extraContent={renderOverviewExtra && renderOverviewExtra({ kind, namespace, name })}
             />
         )}
@@ -640,7 +661,7 @@ export function WorkloadView({
         {activeTab === 'yaml' && (
           <div className="h-full overflow-auto">
             {resourceLoading ? (
-              <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Loading...</div>
+              <PaneLoader className="h-32" />
             ) : !resource ? (
               <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
             ) : (
@@ -1087,6 +1108,11 @@ function InfoTab({
   onSwitchToTimeline,
   rendererOverrides,
   resolvedEnvFrom,
+  events,
+  eventsLoading,
+  updates,
+  eventsError,
+  updatesError,
   extraContent,
 }: {
   resource: any
@@ -1102,15 +1128,15 @@ function InfoTab({
   onSwitchToTimeline?: () => void
   rendererOverrides?: RendererOverrides
   resolvedEnvFrom?: ResolvedEnvFrom
+  events?: TimelineEvent[]
+  eventsLoading?: boolean
+  updates?: TimelineEvent[]
+  eventsError?: Error | null
+  updatesError?: Error | null
   extraContent?: ReactNode
 }) {
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-        <RefreshCw className="w-5 h-5 animate-spin mr-2" />
-        Loading...
-      </div>
-    )
+    return <PaneLoader className="h-full" />
   }
 
   if (!resource) {
@@ -1137,6 +1163,11 @@ function InfoTab({
         onOpenLogs={onOpenLogs}
         rendererOverrides={rendererOverrides}
         resolvedEnvFrom={resolvedEnvFrom}
+        events={events}
+        eventsLoading={eventsLoading}
+        updates={updates}
+        eventsError={eventsError}
+        updatesError={updatesError}
         eventsHint={onSwitchToTimeline && (
           <button
             onClick={onSwitchToTimeline}

package/src/index.ts

@@ -36,3 +36,6 @@ export * from './components/topology'
 
 // Cluster audit (AuditCard, AuditAlerts, AuditFindingsTable)
 export * from './components/audit'
+
+// Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
+export * from './components/cluster-switcher'

package/src/utils/index.ts

@@ -11,3 +11,4 @@ export * from './download'
 export * from './api-resources'
 export * from './skeleton-yaml'
 export * from './k8s-errors'
+export * from './parse-go-time'

package/src/utils/navigation.test.ts

@@ -135,6 +135,17 @@ describe('initNavigationMap', () => {
     // Passing an already-plural kind should be idempotent
     expect(kindToPlural('secretstores')).toBe('secretstores')
   })
+
+  test('builtin core mappings win over colliding discovered resources', () => {
+    // metrics.k8s.io exposes a resource named "pods" with kind "PodMetrics".
+    // Without first-wins on builtins, this clobbers core "pods" → "Pod" and
+    // every Pod-keyed lookup (timeline kind filter, badge color, etc.) breaks.
+    initNavigationMap([
+      { group: '', version: 'v1', kind: 'Pod', name: 'pods', namespaced: true, isCrd: false, verbs: ['get'] },
+      { group: 'metrics.k8s.io', version: 'v1beta1', kind: 'PodMetrics', name: 'pods', namespaced: true, isCrd: false, verbs: ['get'] },
+    ])
+    expect(pluralToKind('pods')).toBe('Pod')
+  })
 })
 
 describe('refToSelectedResource', () => {

package/src/utils/navigation.ts

@@ -51,7 +51,10 @@ export function initNavigationMap(resources: APIResource[]) {
   const k2p: Record<string, string> = {}
   for (const r of resources) {
     const plural = r.name.toLowerCase()
-    p2k[plural] = r.kind
+    // First-wins on plurals: BUILTIN_PLURAL_TO_KIND seeds canonical core mappings
+    // (e.g. "pods" → "Pod") so a colliding API resource (metrics.k8s.io exposes
+    // "pods" with kind "PodMetrics") cannot hijack the core mapping.
+    if (!(plural in p2k)) p2k[plural] = r.kind
     k2p[r.kind.toLowerCase()] = plural
   }
   discoveredPluralToKind = p2k