@skyhook-io/k8s-ui 1.5.7 → 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -5,11 +5,14 @@ import {
   useRef,
   useState,
 } from 'react'
-import { ChevronDown, Check, Loader2, Search, X } from 'lucide-react'
+import { ChevronDown, Check, Loader2, Search, Server, X } from 'lucide-react'
+import { ClusterName } from '../ui/ClusterName'
 import { StatusDot, type StatusTone } from '../ui/status-tone'
 
 export interface ClusterSwitcherItem {
   id: string
+  /** Raw context / display string. ClusterName collapses GKE/EKS/AKS
+   *  shapes; user-named clusters pass through unchanged. */
   name: string
   secondary?: string
   badge?: string
@@ -18,17 +21,17 @@ export interface ClusterSwitcherItem {
   status?: StatusTone
   /** Hard navigation target. Takes precedence over the parent's `onSelect`. */
   href?: string
-  /** Tooltip — useful on disabled rows to explain why the row is inert. */
+  /** Native tooltip — useful on disabled rows to explain why the row is inert.
+   *  ClusterName supplies its own tooltip for the cluster name itself; this
+   *  is for row-level affordances (e.g. "Cluster offline — reconnect…"). */
   title?: string
 }
 
 export interface ClusterSwitcherProps {
   currentId?: string
+  /** Raw context / display string. Pass it as-is — the trigger renders
+   *  through ClusterName, which handles parse + provider badge + tooltip. */
   currentName: string
-  currentTooltip?: string
-  triggerIcon?: ReactNode
-  triggerPrefix?: ReactNode
-  triggerMaxWidthClass?: string
   items: ClusterSwitcherItem[]
   onSelect?: (item: ClusterSwitcherItem) => void
   searchable?: boolean
@@ -43,15 +46,17 @@ export interface ClusterSwitcherProps {
   align?: 'left' | 'right'
 }
 
-const DEFAULT_TRIGGER_MAX_WIDTH = 'max-w-[120px] sm:max-w-[220px]'
+// Trigger width cap. With middle-truncation kicking in, this is a
+// horizontal-real-estate guard rather than a readability one. The cap
+// grows with viewport so wide screens (where there's no real estate
+// pressure) show full cluster names rather than middle-truncating
+// pointlessly. The xl tier (~400px) fits names up to ~30 chars in
+// full — comfortably covering parsed cluster names from any provider.
+const TRIGGER_NAME_MAX_WIDTH = 'max-w-[160px] sm:max-w-[260px] xl:max-w-[400px]'
 
 export function ClusterSwitcher({
   currentId,
   currentName,
-  currentTooltip,
-  triggerIcon,
-  triggerPrefix,
-  triggerMaxWidthClass = DEFAULT_TRIGGER_MAX_WIDTH,
   items,
   onSelect,
   searchable = true,
@@ -169,7 +174,6 @@ export function ClusterSwitcher({
         type="button"
         onClick={() => setIsOpen(v => !v)}
         disabled={disabled || loading}
-        title={currentTooltip ?? currentName}
         className={`
           flex items-center gap-1.5 px-2.5 py-1.5
           bg-theme-elevated border border-theme-border rounded text-sm font-medium
@@ -179,16 +183,25 @@ export function ClusterSwitcher({
         `}
       >
         {loading ? (
-          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          <>
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            <span className={`${TRIGGER_NAME_MAX_WIDTH} block truncate`}>Switching…</span>
+          </>
         ) : (
-          triggerIcon
+          // ClusterName parses the context (provider badge for GKE/EKS/AKS,
+          // raw name for custom kubeconfig) and middle-truncates to the cap.
+          // Server icon is the fallback badge for the no-provider case so
+          // the trigger always has a leading visual. Tooltip is suppressed
+          // while the dropdown is open — the popover already shows the raw
+          // context inline (per-row secondary line), and an extra hover
+          // tooltip would just overlap the search input.
+          <ClusterName
+            name={currentName}
+            fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
+            className={TRIGGER_NAME_MAX_WIDTH}
+            noTooltip={isOpen}
+          />
         )}
-        {triggerPrefix && (
-          <span className="text-theme-text-tertiary">{triggerPrefix}</span>
-        )}
-        <span className={`${triggerMaxWidthClass} truncate`}>
-          {loading ? 'Switching...' : currentName}
-        </span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
@@ -274,19 +287,23 @@ export function ClusterSwitcher({
                         )}
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-1.5">
-                            <span
-                              className={`text-sm font-medium truncate ${
+                            {/* No tooltip on row names — each row already
+                                renders the raw context inline below the
+                                name (item.secondary), so the hover tooltip
+                                would just repeat what's already visible. */}
+                            <ClusterName
+                              name={item.name}
+                              noTooltip
+                              className={`text-sm font-medium flex-1 ${
                                 isCurrent
                                   ? 'selection-text'
                                   : item.disabled
                                     ? 'text-theme-text-tertiary'
                                     : 'text-theme-text-primary'
                               }`}
-                            >
-                              {item.name}
-                            </span>
+                            />
                             {item.badge && (
-                              <span className="shrink-0 ml-auto text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
+                              <span className="shrink-0 text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
                                 {item.badge}
                               </span>
                             )}

package/src/components/resources/ResourcesView.tsx

@@ -1695,8 +1695,20 @@ function getInitialKindFromURL(
   locationPathname?: string,
   locationSearch?: string,
 ): SelectedKindInfo {
-  const pathname = locationPathname || window.location.pathname
-  const search = locationSearch || window.location.search
+  // Prefer injected pathname/search from the host router. Using `||` would incorrectly fall back to
+  // window when the host passes '' before hydration. SSR has no window.
+  const pathname =
+    locationPathname !== undefined
+      ? locationPathname
+      : typeof window !== 'undefined'
+        ? window.location.pathname
+        : ''
+  const search =
+    locationSearch !== undefined
+      ? locationSearch
+      : typeof window !== 'undefined'
+        ? window.location.search
+        : ''
   const base = basePath.replace(/\/$/, '') // strip trailing slash
   let kind: string | null = null
   if (pathname.startsWith(base + '/')) {
@@ -1751,8 +1763,8 @@ export function ResourcesView({
   pinned = [],
   togglePin = () => {},
   isPinned = () => false,
-  locationSearch = '',
-  locationPathname = '',
+  locationSearch,
+  locationPathname,
   onNavigate,
   basePath = '/resources',
   onOpenLogs,
@@ -1763,7 +1775,6 @@ export function ResourcesView({
   extraLeadingColumns,
   onRowSelect,
 }: ResourcesViewProps) {
-  const location = useMemo(() => ({ search: locationSearch, pathname: locationPathname }), [locationSearch, locationPathname])
   const initialFilters = getInitialFiltersFromURL()
   const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(() => getInitialKindFromURL(basePath, locationPathname, locationSearch))
   // Sync selectedKind from URL when locationPathname changes (e.g., browser back, external sidebar navigation)
@@ -1772,7 +1783,7 @@ export function ResourcesView({
     if (kindFromURL.name !== selectedKind.name || kindFromURL.group !== selectedKind.group) {
       setSelectedKind(kindFromURL)
     }
-  }, [locationPathname]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [locationPathname, locationSearch]) // eslint-disable-line react-hooks/exhaustive-deps
   // Notify parent of selected kind changes (including initial mount)
   useEffect(() => {
     onSelectedKindChange?.(selectedKind)
@@ -2355,7 +2366,7 @@ export function ResourcesView({
     requestAnimationFrame(() => {
       isSyncingFromURL.current = false
     })
-  }, [location.search, location.pathname]) // Re-run when URL path or search params change
+  }, [locationPathname, locationSearch]) // Re-run when injected URL path or search params change
 
   const navigate = useMemo(() => {
     if (!onNavigate) return (_pathOrObj: any, _opts?: any) => {}

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

@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { getCNPGClusterCertificateExpirations } from './resource-utils-cnpg'
+
+describe('getCNPGClusterCertificateExpirations', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-04-28T12:00:00Z'))
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('regression: future Go-format dates are not flagged as expired (issue #554)', () => {
+    const resource = {
+      status: {
+        certificates: {
+          expirations: {
+            'mycluster-ca': '2026-07-27 08:27:41 +0000 UTC',
+            'mycluster-server': '2026-07-27 08:27:41 +0000 UTC',
+            'mycluster-replication': '2026-07-27 08:27:41 +0000 UTC',
+          },
+        },
+      },
+    }
+    const certs = getCNPGClusterCertificateExpirations(resource)
+    expect(certs).toHaveLength(3)
+    for (const cert of certs) {
+      expect(cert.daysUntilExpiry).toBeGreaterThan(0)
+      expect(cert.daysUntilExpiry).toBeLessThanOrEqual(91)
+    }
+  })
+
+  it('floors fractional days down so threshold banners do not misfire', () => {
+    // Pinned now: 2026-04-28T12:00:00Z; expiry 2026-07-27T00:00:00Z is 89.5
+    // days away. Math.floor pins this to 89, not 90 — locks day-boundary
+    // semantics so a future Math.ceil/round refactor doesn't shift the
+    // <30d / <7d alert thresholds.
+    const resource = {
+      status: {
+        certificates: {
+          expirations: { 'mycluster-ca': '2026-07-27 00:00:00 +0000 UTC' },
+        },
+      },
+    }
+    const [cert] = getCNPGClusterCertificateExpirations(resource)
+    expect(cert.daysUntilExpiry).toBe(89)
+  })
+
+  it('flags genuinely expired certificates as negative', () => {
+    const resource = {
+      status: {
+        certificates: {
+          expirations: {
+            'mycluster-ca': '2026-04-27 08:27:41 +0000 UTC',
+          },
+        },
+      },
+    }
+    const [cert] = getCNPGClusterCertificateExpirations(resource)
+    expect(cert.daysUntilExpiry).toBeLessThan(0)
+  })
+
+  it('maps unparseable values to the -1 sentinel (renders as "expired")', () => {
+    const resource = {
+      status: { certificates: { expirations: { 'mycluster-ca': 'garbage' } } },
+    }
+    const [cert] = getCNPGClusterCertificateExpirations(resource)
+    expect(cert.daysUntilExpiry).toBe(-1)
+  })
+
+  it('returns empty list when no expirations are present', () => {
+    expect(getCNPGClusterCertificateExpirations({})).toEqual([])
+    expect(getCNPGClusterCertificateExpirations({ status: {} })).toEqual([])
+  })
+})

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/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/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,6 +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

@@ -85,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 */
@@ -160,6 +165,11 @@ export function WorkloadView({
   allEvents,
   eventsLoading = false,
   topology,
+  resourceFocusedK8sEvents,
+  resourceFocusedUpdates,
+  resourceFocusedEventsLoading = false,
+  resourceFocusedK8sError = null,
+  resourceFocusedUpdatesError = null,
   // Capabilities
   canUpdateSecrets,
   // Mutations
@@ -457,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">
@@ -603,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 })}
             />
         )}
@@ -1088,6 +1108,11 @@ function InfoTab({
   onSwitchToTimeline,
   rendererOverrides,
   resolvedEnvFrom,
+  events,
+  eventsLoading,
+  updates,
+  eventsError,
+  updatesError,
   extraContent,
 }: {
   resource: any
@@ -1103,6 +1128,11 @@ function InfoTab({
   onSwitchToTimeline?: () => void
   rendererOverrides?: RendererOverrides
   resolvedEnvFrom?: ResolvedEnvFrom
+  events?: TimelineEvent[]
+  eventsLoading?: boolean
+  updates?: TimelineEvent[]
+  eventsError?: Error | null
+  updatesError?: Error | null
   extraContent?: ReactNode
 }) {
   if (isLoading) {
@@ -1133,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/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

package/src/utils/parse-go-time.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest'
+import { parseGoTimeString } from './parse-go-time'
+
+describe('parseGoTimeString', () => {
+  it('parses Go default time format (no fractional seconds)', () => {
+    expect(parseGoTimeString('2026-07-27 08:27:41 +0000 UTC').toISOString()).toBe(
+      '2026-07-27T08:27:41.000Z',
+    )
+  })
+
+  it('truncates Go nanosecond precision to milliseconds', () => {
+    expect(
+      parseGoTimeString('2026-07-27 08:27:41.123456789 +0000 UTC').toISOString(),
+    ).toBe('2026-07-27T08:27:41.123Z')
+  })
+
+  it('pads fractional seconds to 3 digits (Go strips trailing zeros)', () => {
+    // Go emits ".1" / ".12" when nanoseconds end in zeros; without padding
+    // the constructed ISO string violates the .sss profile and Safari rejects
+    // it, re-introducing the bug for certs that happen to expire on these
+    // round nanoseconds.
+    expect(parseGoTimeString('2026-07-27 08:27:41.1 +0000 UTC').toISOString()).toBe(
+      '2026-07-27T08:27:41.100Z',
+    )
+    expect(parseGoTimeString('2026-07-27 08:27:41.12 +0000 UTC').toISOString()).toBe(
+      '2026-07-27T08:27:41.120Z',
+    )
+    expect(parseGoTimeString('2026-07-27 08:27:41.5 +0000 UTC').toISOString()).toBe(
+      '2026-07-27T08:27:41.500Z',
+    )
+  })
+
+  it('handles non-UTC offsets and ignores tz abbreviation', () => {
+    expect(parseGoTimeString('2026-07-27 08:27:41 -0700 PDT').toISOString()).toBe(
+      '2026-07-27T15:27:41.000Z',
+    )
+  })
+
+  it('falls back to native parser for ISO 8601', () => {
+    expect(parseGoTimeString('2026-07-27T08:27:41Z').toISOString()).toBe(
+      '2026-07-27T08:27:41.000Z',
+    )
+  })
+
+  it('returns Invalid Date for unparseable input', () => {
+    expect(isNaN(parseGoTimeString('not a date').getTime())).toBe(true)
+  })
+
+  it('regex normalizes nanosecond inputs without overflow into seconds', () => {
+    const d = parseGoTimeString('2026-07-27 08:27:41.999999999 +0000 UTC')
+    expect(d.getUTCMilliseconds()).toBe(999)
+    expect(d.getUTCSeconds()).toBe(41)
+  })
+})

package/src/utils/parse-go-time.ts

@@ -0,0 +1,23 @@
+// Some Kubernetes controllers serialize timestamps using Go's default
+// `time.Time.String()` format (e.g. "2026-07-27 08:27:41.123456789 +0000 UTC")
+// when the field is typed as `string` instead of `metav1.Time`. ECMAScript
+// only requires `Date(...)` to parse the ISO 8601 subset, so Safari rejects
+// this format while V8 (Chrome/Node) accepts it leniently — which makes the
+// bug invisible in test runners. Known affected schema: CloudNativePG
+// `Cluster.status.certificates.expirations`.
+
+const GO_TIME_PATTERN =
+  /^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2}:\d{2})(\.\d+)?\s+([+-]\d{2})(\d{2})\b/
+
+export function parseGoTimeString(s: string): Date {
+  const m = s.match(GO_TIME_PATTERN)
+  if (m) {
+    const [, date, time, frac, tzHour, tzMin] = m
+    // Go's ".999999999" format strips trailing zeros, so nanos=100_000_000
+    // emits ".1". The ISO 8601 simplified profile requires exactly ".sss";
+    // pad to 3 digits before truncating so Safari accepts the result.
+    const ms = frac ? '.' + (frac.slice(1) + '000').slice(0, 3) : ''
+    return new Date(`${date}T${time}${ms}${tzHour}:${tzMin}`)
+  }
+  return new Date(s)
+}