@skyhook-io/radar-app 1.15.0 → 1.16.0

package/src/components/ui/UpdateNotification.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useId } from 'react'
 import { clsx } from 'clsx'
 import { Download, X, Copy, Check, RotateCw, ArrowDownToLine, Loader2 } from 'lucide-react'
 import { useQueryClient } from '@tanstack/react-query'
@@ -13,6 +13,7 @@ import type { DesktopUpdateState } from '../../api/client'
 import { WithTooltip } from './Tooltip'
 import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { IN_CLUSTER_UPGRADE_URL } from '../../utils/version'
 
 const DISMISSED_KEY = 'radar-update-dismissed'
 
@@ -27,7 +28,12 @@ export function isUpdateDismissed(latestVersion: string): boolean {
   }
 }
 
-export function UpdateNotification() {
+export function UpdateNotification({ placement = 'floating' }: { placement?: 'floating' | 'settings' }) {
+  const inSettings = placement === 'settings'
+  const [expanded, setExpanded] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const panelId = useId()
   const queryClient = useQueryClient()
   const { data: capabilities } = useCapabilities()
   const deploymentMode = capabilities ? (capabilities.deployment?.mode ?? 'local') : undefined
@@ -40,9 +46,17 @@ export function UpdateNotification() {
   const [desktopUpdating, setDesktopUpdating] = useState(false)
   const startUpdate = useStartDesktopUpdate()
   const applyUpdate = useApplyDesktopUpdate()
-  const { data: updateStatus } = useDesktopUpdateStatus(desktopUpdating)
-
   const isDesktop = versionInfo?.installMethod === 'desktop'
+  const { data: updateStatus } = useDesktopUpdateStatus(desktopUpdating || (inSettings && expanded && isDesktop))
+
+  useEffect(() => {
+    if (!expanded) return
+    const closeOutside = (event: PointerEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) setExpanded(false)
+    }
+    document.addEventListener('pointerdown', closeOutside)
+    return () => document.removeEventListener('pointerdown', closeOutside)
+  }, [expanded])
 
   // Listen for "Check for Updates" menu item in desktop app.
   useEffect(() => {
@@ -110,22 +124,25 @@ export function UpdateNotification() {
 
   // Shared in-cluster viewers get a persistent Home notice instead of a
   // floating action prompt they may not be able to act on.
-  const show = !!versionInfo?.updateAvailable && !dismissed && deploymentMode !== undefined && deploymentMode !== 'in-cluster' && deploymentMode !== 'cloud'
+  const available = !!versionInfo?.updateAvailable && deploymentMode !== undefined && deploymentMode !== 'cloud'
+  const show = available && deploymentMode !== 'in-cluster' && (inSettings ? expanded : !dismissed)
   // Presence outlives `show` by the menu exit so a dismiss fades the chip out
   // instead of snapping it away; the enter runs the same transition in reverse.
   const { shouldRender, isOpen } = useAnimatedUnmount(show, overlayExitMs('menu'))
-  if (!shouldRender || !versionInfo) {
+  if ((!inSettings && !shouldRender) || (inSettings && !available) || !versionInfo) {
     return null
   }
 
   // Determine what the current effective state is
   const effectiveState: DesktopUpdateState = updateStatus?.state ?? 'idle'
 
-  return (
+  const panel = shouldRender && (
     <div
+      id={panelId}
       inert={!show || undefined}
       className={clsx(
-        'fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-accent/50 rounded-lg shadow-xl p-4 origin-bottom-right',
+        'bg-theme-surface border border-accent/50 rounded-lg shadow-theme-lg p-4',
+        inSettings ? 'absolute top-full left-0 mt-2 z-10 w-[28rem] max-sm:left-4 max-sm:right-4 max-sm:w-auto origin-top-left' : 'fixed bottom-4 right-4 z-50 max-w-sm origin-bottom-right',
         TRANSITION_MENU,
         isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-1 scale-[0.97]',
         !show && 'pointer-events-none',
@@ -142,7 +159,7 @@ export function UpdateNotification() {
           </h4>
           <p className="text-xs text-theme-text-secondary mt-1">
             Radar {versionInfo.latestVersion} is available.{' '}
-            You're on {versionInfo.currentVersion}.
+            {!inSettings && <>You're on {versionInfo.currentVersion}.</>}
           </p>
 
           {/* Desktop: in-app update flow */}
@@ -166,7 +183,7 @@ export function UpdateNotification() {
                   onClick={handleCopyCommand}
                   className="flex items-center gap-2 mt-2 px-2 py-1.5 bg-theme-elevated rounded font-mono text-theme-text-primary hover:bg-theme-surface-hover transition-colors w-full"
                 >
-                  <code className="inline-code flex-1 truncate text-left text-[11px]">{versionInfo.updateCommand}</code>
+                  <code className={clsx('inline-code flex-1 text-left text-[11px]', inSettings ? 'whitespace-pre-wrap break-all' : 'truncate')}>{versionInfo.updateCommand}</code>
                   <CopyIcon copied={copied} failed={copyFailed} />
                 </button>
               </WithTooltip>
@@ -201,15 +218,43 @@ export function UpdateNotification() {
           fixed on the parent already establishes the positioning context. */}
       {effectiveState !== 'downloading' && effectiveState !== 'applying' && (
         <button
-          onClick={handleDismiss}
+          onClick={inSettings ? () => { setExpanded(false); triggerRef.current?.focus() } : handleDismiss}
           className="absolute top-2 right-2 p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-          aria-label="Dismiss"
+          aria-label={inSettings ? 'Close update details' : 'Dismiss'}
         >
           <X className="w-4 h-4" />
         </button>
       )}
     </div>
   )
+
+  if (!inSettings) return panel
+
+  const triggerClass = 'inline-flex items-center gap-1.5 rounded-lg border border-accent/40 bg-accent-muted px-2.5 py-1.5 text-xs font-semibold text-accent-text hover:bg-theme-hover'
+  if (deploymentMode === 'in-cluster') return (
+    <a href={IN_CLUSTER_UPGRADE_URL} target="_blank" rel="noreferrer" className={triggerClass}>
+      <Download aria-hidden="true" className="h-4 w-4" />
+      Update available
+    </a>
+  )
+
+  return (
+    <div ref={containerRef} className="sm:relative" onBlur={event => {
+      if (!event.currentTarget.contains(event.relatedTarget)) setExpanded(false)
+    }} onKeyDown={event => {
+      if (event.key !== 'Escape' || !expanded) return
+      event.preventDefault()
+      event.stopPropagation()
+      setExpanded(false)
+      triggerRef.current?.focus()
+    }}>
+      <button ref={triggerRef} type="button" className={triggerClass} aria-expanded={expanded} aria-controls={panelId} onClick={() => setExpanded(value => !value)}>
+        <Download aria-hidden="true" className="h-4 w-4" />
+        Update available
+      </button>
+      {panel}
+    </div>
+  )
 }
 
 function CopyIcon({ copied, failed }: { copied: boolean; failed: boolean }) {

package/src/components/workload/WorkloadView.tsx

@@ -36,6 +36,7 @@ import {
 import type { ServicePortRenderProps } from '@skyhook-io/k8s-ui/components/resources/renderers/ServiceRenderer'
 import { isJobSetV1Alpha2 } from '@skyhook-io/k8s-ui/components/resources/resource-utils-jobset-lws'
 import type { SelectedResource, ResourceRef, Relationships, ResourceWithRelationships } from '../../types'
+import { useHistoryPaging } from './historyPaging'
 import {
   kindToPlural,
   kindToPluralWithGroup,
@@ -46,7 +47,8 @@ import {
   type NavigateToResource,
 } from '../../utils/navigation'
 import {
-  useChanges,
+  useWorkloadHistory,
+  fetchWorkloadHistoryPage,
   useResourceWithRelationships,
   usePodLogs,
   useTopology,
@@ -77,7 +79,6 @@ import {
   useUncordonNode,
   useDrainNode,
   useDrainPlan,
-  DrainPlanUnsupportedError,
   useCascadeDeletePreview,
   useResourceEvents,
   useResource,
@@ -92,8 +93,9 @@ import { RestartEventLane } from '../resource/RestartChart'
 import { RightsizingPanel } from '../resource/RightsizingStrip'
 import { WorkloadCostTab } from '../cost/WorkloadCostTab'
 import { isOpenCostWorkloadKind } from '../cost/kinds'
+import { isRadarFeatureUnsupported } from '../../api/radarFeatures'
 import { useResourceAudit, useResourceIssues, useResources, useTrace, fetchTraceWithProbes, fetchInClusterCapability, runInClusterMerged } from '../../api/client'
-import { AuditAlerts, ResourceIssuesSection, ReachabilityView, TraceSummary, InClusterConsentDialog, traceFingerprint, staticPollUnreliable, summarizeInClusterTests, type Trace as NetworkTrace, type InClusterCapability, inClusterConsentGiven, consentRequestRows } from '@skyhook-io/k8s-ui'
+import { AuditAlerts, getRadarUpgradeRequirement, ResourceIssuesSection, ReachabilityView, TraceSummary, InClusterConsentDialog, traceFingerprint, staticPollUnreliable, summarizeInClusterTests, type Trace as NetworkTrace, type InClusterCapability, inClusterConsentGiven, consentRequestRows } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
 import { ScheduledWorkloadLogsViewer } from '../logs/ScheduledWorkloadLogsViewer'
 import { LogsViewer } from '../logs/LogsViewer'
@@ -518,7 +520,9 @@ function useActionsBarProps(
     drainPlan: drainPlanMutation.data ?? null,
     isPlanningDrain: drainPlanMutation.isPending,
     drainPlanError: drainPlanMutation.error?.message ?? null,
-    drainPlanUnsupported: drainPlanMutation.error instanceof DrainPlanUnsupportedError,
+    drainPlanUpgrade: isRadarFeatureUnsupported(drainPlanMutation.error, 'drainPlan')
+      ? getRadarUpgradeRequirement(drainPlanMutation.error)
+      : null,
   }
 }
 
@@ -791,15 +795,26 @@ export function WorkloadView({
     updatesError: resourceFocusedUpdatesError,
   } = useResourceEvents(apiKind, namespace, name, effectiveGroup)
 
-  // Fetch all events for this resource's namespace (only when expanded)
-  const { data: allEvents, isLoading: eventsLoading } = useChanges({
-    namespaces: [namespace],
-    timeRange: 'all',
-    includeK8sEvents: true,
-    includeManaged: true,
-    limit: 10000,
-    enabled: expanded,
-  })
+  // This workload's history (only when expanded): the workload, what it owns,
+  // K8s Events about those, and the resources attached to it. Older pages load
+  // on demand and stay until the viewed workload changes.
+  // The group settles from the route, or from the fetched resource when the
+  // route has none; asking before then would key the history (and resolve a
+  // colliding kind) under the wrong group and refetch once it settles.
+  const historyGroupSettled = Boolean(rest.group) || resource !== undefined || resourceError != null
+  const historyQuery = useWorkloadHistory(apiKind, namespace, name, effectiveGroup, expanded && historyGroupSettled)
+  const {
+    events: allEvents,
+    truncated: historyTruncated,
+    loadOlder: loadOlderHistory,
+    loadingOlder: loadingOlderHistory,
+    olderError: olderHistoryError,
+  } = useHistoryPaging(
+    `${effectiveGroup ?? ''}/${apiKind}/${namespace}/${name}`,
+    historyQuery.data,
+    (beforeSeq) => fetchWorkloadHistoryPage(apiKind, namespace, name, effectiveGroup, beforeSeq),
+  )
+  const eventsLoading = historyQuery.isLoading || (expanded && !historyGroupSettled)
 
   // RBAC
   const canUpdateSecrets = useCanUpdateSecrets()
@@ -1196,6 +1211,14 @@ export function WorkloadView({
         refetch={refetchResourceAndRuns}
         // Timeline
         allEvents={allEvents}
+        historyTruncated={historyTruncated}
+        onLoadOlderHistory={loadOlderHistory}
+        loadingOlderHistory={loadingOlderHistory}
+        olderHistoryError={olderHistoryError}
+        historyScoped
+        historyIncomplete={Boolean(historyQuery.data?.incomplete)}
+        historyError={historyQuery.error as Error | null}
+        onRetryHistory={() => void historyQuery.refetch()}
         relatedTimelineEvents={relatedTimelineEvents}
         eventsLoading={eventsLoading || (batchExecution && batchKind !== 'JobSet' && batchRunsQuery.isLoading)}
         topology={topology}

package/src/components/workload/historyPaging.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+import type { WorkloadHistoryPage } from '../../api/client'
+import type { TimelineEvent } from '../../types'
+import { addOlderPage, foldRefreshedPage } from './historyPaging'
+
+// Rows newest first, each id its own seq.
+const ev = (id: string, seq: number) => ({ id, seq }) as TimelineEvent
+const rows = (from: number, to: number) => Array.from({ length: from - to + 1 }, (_, i) => ev(String(from - i), from - i))
+const page = (from: number, to: number, truncated: boolean): WorkloadHistoryPage => ({
+  events: rows(from, to),
+  truncated,
+  nextBeforeSeq: truncated ? to : undefined,
+})
+const ids = (p: WorkloadHistoryPage) => p.events.map((e) => Number(e.id))
+const contiguous = (p: WorkloadHistoryPage, from: number, to: number) =>
+  expect(new Set(ids(p))).toEqual(new Set(rows(from, to).map((e) => Number(e.id))))
+
+describe('workload history paging', () => {
+  it('keeps rows the newest page slides past once older pages are loaded', () => {
+    const first = page(40, 21, true)
+    const step = addOlderPage(null, page(20, 1, false), first, first)
+    if (step.kind !== 'set') throw new Error(step.kind)
+    let loaded = step.history
+    for (const refreshed of [page(50, 31, true), page(60, 41, true)]) {
+      const next = foldRefreshedPage(loaded, refreshed)
+      if (next.kind === 'set') loaded = next.history
+      else expect(next.kind).toBe('keep')
+    }
+    contiguous(loaded, 60, 1)
+    expect(loaded.truncated).toBe(false)
+  })
+
+  it('restarts paging when a refresh no longer reaches what is loaded', () => {
+    const loaded = page(40, 1, false)
+    expect(foldRefreshedPage(loaded, page(80, 61, true)).kind).toBe('restart')
+    expect(foldRefreshedPage(loaded, page(45, 26, true)).kind).toBe('set')
+    expect(foldRefreshedPage(loaded, page(40, 21, true)).kind).toBe('keep')
+  })
+
+  it('anchors a first older page to what refreshed while it loaded', () => {
+    const base = page(40, 21, true)
+    const step = addOlderPage(null, page(20, 1, false), base, page(45, 26, true))
+    if (step.kind !== 'set') throw new Error(step.kind)
+    contiguous(step.history, 45, 1)
+  })
+
+  it('restarts instead of landing a first older page behind a hole', () => {
+    const base = page(40, 21, true)
+    expect(addOlderPage(null, page(20, 1, false), base, page(90, 71, true)).kind).toBe('restart')
+  })
+
+  it('a repeated K8s Event must not hide a gap after Load older', () => {
+    // Loaded after Load older: events 120..1. "backoff" is a K8s Event already held, at seq 50.
+    const loaded: WorkloadHistoryPage = { events: [...rows(120, 51), ev('backoff', 50), ...rows(49, 1)], truncated: false }
+    // 200 arrive (121..320) and the page holds 20; "backoff" fired again: same id, seq 320.
+    const refreshed: WorkloadHistoryPage = { events: [ev('backoff', 320), ...rows(319, 301)], truncated: true, nextBeforeSeq: 301 }
+    expect(foldRefreshedPage(loaded, refreshed).kind).toBe('restart')
+  })
+
+  it('handles a loaded history far larger than a page', () => {
+    const loaded: WorkloadHistoryPage = { events: rows(200_000, 1), truncated: false }
+    expect(foldRefreshedPage(loaded, page(200_020, 200_001, true)).kind).toBe('restart')
+    expect(foldRefreshedPage(loaded, page(200_010, 199_991, true)).kind).toBe('set')
+  })
+
+  it("keeps a repeated K8s Event's newer copy", () => {
+    const loaded: WorkloadHistoryPage = { events: [...rows(30, 21), ev('backoff', 20), ...rows(19, 1)], truncated: false }
+    const step = foldRefreshedPage(loaded, { events: [ev('backoff', 31), ...rows(30, 22)], truncated: true, nextBeforeSeq: 22 })
+    if (step.kind !== 'set') throw new Error(step.kind)
+    expect(step.history.events.filter((e) => e.id === 'backoff').map((e) => e.seq)).toEqual([31])
+  })
+})

package/src/components/workload/historyPaging.ts

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { WorkloadHistoryPage } from '../../api/client'
+import type { TimelineEvent } from '../../types'
+
+// Paging state for a workload's history: the newest page keeps refreshing on
+// its own, and older pages load on demand below it. These rules keep the two
+// contiguous. When they can't (more arrived between refreshes than one page
+// holds), paging restarts from the newest page instead of leaving a hole.
+//
+// Continuity is judged by seq, not by id: a K8s Event that fires again keeps
+// its id but moves to a new, higher seq, so a page can share an id with what's
+// loaded and still not reach it.
+
+export type PagingStep = { kind: 'keep' } | { kind: 'restart' } | { kind: 'set'; history: WorkloadHistoryPage }
+
+const seqOf = (e: TimelineEvent) => e.seq ?? 0
+
+/** Whether a newest page reaches down to rows already loaded, leaving no gap. */
+function reaches(page: WorkloadHistoryPage, loaded: TimelineEvent[]): boolean {
+  if (!page.truncated) return true
+  if (loaded.length === 0 || page.events.length === 0) return false
+  // Loops, not Math.max(...rows): loaded history has no cap, and spreading it
+  // into arguments overflows the stack.
+  let newestLoaded = -Infinity
+  for (const e of loaded) newestLoaded = Math.max(newestLoaded, seqOf(e))
+  let oldestOnPage = Infinity
+  for (const e of page.events) oldestOnPage = Math.min(oldestOnPage, seqOf(e))
+  return oldestOnPage <= newestLoaded
+}
+
+/** Newer rows first; a row both lists hold keeps the newer copy (a repeated
+ *  K8s Event's count and message move with it). */
+function mergeNewer(newer: TimelineEvent[], older: TimelineEvent[]): TimelineEvent[] {
+  const ids = new Set(newer.map((e) => e.id))
+  return [...newer, ...older.filter((e) => !ids.has(e.id))]
+}
+
+/** Folds a refreshed newest page into the loaded older pages. */
+export function foldRefreshedPage(loaded: WorkloadHistoryPage, page: WorkloadHistoryPage): PagingStep {
+  const seqById = new Map(loaded.events.map((e) => [e.id, seqOf(e)]))
+  if (page.events.every((e) => seqById.get(e.id) === seqOf(e))) return { kind: 'keep' }
+  if (!reaches(page, loaded.events)) return { kind: 'restart' }
+  return { kind: 'set', history: { ...loaded, events: mergeNewer(page.events, loaded.events) } }
+}
+
+/**
+ * Adds an older page. The first one continues from the newest page it was
+ * requested from (basePage), and keeps that page plus whatever refreshed
+ * since (latest), unless the refresh has already moved past it.
+ */
+export function addOlderPage(
+  loaded: WorkloadHistoryPage | null,
+  page: WorkloadHistoryPage,
+  basePage: WorkloadHistoryPage | undefined,
+  latest: WorkloadHistoryPage | undefined,
+): PagingStep {
+  const more = { truncated: page.truncated, nextBeforeSeq: page.nextBeforeSeq }
+  if (loaded) return { kind: 'set', history: { events: mergeNewer(loaded.events, page.events), ...more } }
+  let newest = basePage?.events ?? []
+  if (latest && latest !== basePage) {
+    if (!reaches(latest, newest)) return { kind: 'restart' }
+    newest = mergeNewer(latest.events, newest)
+  }
+  return { kind: 'set', history: { events: mergeNewer(newest, page.events), ...more } }
+}
+
+/**
+ * A workload's history: the newest page (refreshed by its query) plus older
+ * pages loaded on demand. identity names the workload; changing it restarts
+ * paging, and a page requested before a restart is dropped when it arrives.
+ */
+export function useHistoryPaging(
+  identity: string,
+  newest: WorkloadHistoryPage | undefined,
+  fetchOlder: (beforeSeq: number) => Promise<WorkloadHistoryPage>,
+) {
+  // Loaded pages carry the workload they belong to, so the render between a
+  // navigation and the restart below never shows another workload's rows.
+  const [olderState, setOlderState] = useState<{ identity: string; history: WorkloadHistoryPage } | null>(null)
+  const older = olderState?.identity === identity ? olderState.history : null
+  const setOlder = useCallback(
+    (history: WorkloadHistoryPage | null) => setOlderState(history ? { identity, history } : null),
+    [identity],
+  )
+  const [loadingOlder, setLoadingOlder] = useState(false)
+  const [olderError, setOlderError] = useState<Error | null>(null)
+  const generation = useRef(0)
+  const latest = useRef(newest)
+  latest.current = newest
+  const loaded = useRef(older)
+  loaded.current = older
+
+  const restart = useCallback(() => {
+    generation.current++
+    // Effects later in this commit (the refresh fold below) read the ref
+    // before the next render would update it.
+    loaded.current = null
+    setOlderState(null)
+    setOlderError(null)
+    setLoadingOlder(false)
+  }, [])
+  useEffect(restart, [identity, restart])
+
+  useEffect(() => {
+    if (!newest || !loaded.current) return
+    const step = foldRefreshedPage(loaded.current, newest)
+    if (step.kind === 'restart') restart()
+    else if (step.kind === 'set') setOlder(step.history)
+  }, [newest, restart, setOlder])
+
+  const events = useMemo<TimelineEvent[] | undefined>(() => {
+    if (!newest) return undefined
+    if (!older) return newest.events
+    const byId = new Map(newest.events.map((e) => [e.id, e]))
+    for (const e of older.events) if (!byId.has(e.id)) byId.set(e.id, e)
+    return [...byId.values()]
+  }, [newest, older])
+
+  const loadOlder = useCallback(async () => {
+    const basePage = older ? undefined : newest
+    const cursor = older ? older.nextBeforeSeq : basePage?.nextBeforeSeq
+    if (!cursor) return
+    const requested = generation.current
+    setLoadingOlder(true)
+    setOlderError(null)
+    try {
+      const page = await fetchOlder(cursor)
+      if (generation.current !== requested) return
+      const step = addOlderPage(loaded.current, page, basePage, latest.current)
+      if (step.kind === 'restart') restart()
+      else if (step.kind === 'set') setOlder(step.history)
+    } catch (err) {
+      if (generation.current !== requested) return
+      setOlderError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      if (generation.current === requested) setLoadingOlder(false)
+    }
+  }, [older, newest, fetchOlder, restart, setOlder])
+
+  return {
+    events,
+    truncated: older ? older.truncated : Boolean(newest?.truncated),
+    loadOlder,
+    loadingOlder,
+    olderError,
+  }
+}

package/src/components/workload/useHistoryPaging.test.tsx

@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { WorkloadHistoryPage } from '../../api/client'
+import type { TimelineEvent } from '../../types'
+import { useHistoryPaging } from './historyPaging'
+
+const page = (prefix: string, from: number, to: number, truncated: boolean): WorkloadHistoryPage => ({
+  events: Array.from({ length: from - to + 1 }, (_, i) => ({ id: `${prefix}${from - i}`, seq: from - i }) as TimelineEvent),
+  truncated,
+  nextBeforeSeq: truncated ? to : undefined,
+})
+
+type Paging = ReturnType<typeof useHistoryPaging>
+const renders: Paging[] = []
+function Harness(props: { identity: string; newest?: WorkloadHistoryPage; fetchOlder: (seq: number) => Promise<WorkloadHistoryPage> }) {
+  renders.push(useHistoryPaging(props.identity, props.newest, props.fetchOlder))
+  return null
+}
+const latest = () => renders[renders.length - 1]
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root
+let element: HTMLDivElement
+beforeEach(() => {
+  renders.length = 0
+  element = document.createElement('div')
+  root = createRoot(element)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+})
+const render = (props: Parameters<typeof Harness>[0]) => act(async () => root.render(<Harness {...props} />))
+const ids = () => (latest().events ?? []).map((e) => e.id).sort()
+function deferred() {
+  let resolve!: (p: WorkloadHistoryPage) => void
+  const promise = new Promise<WorkloadHistoryPage>((r) => (resolve = r))
+  return { promise, resolve }
+}
+
+describe('useHistoryPaging', () => {
+  it("shows only the new workload's history after navigating away from loaded older pages", async () => {
+    const fetchOlder = async () => page('a', 2, 1, false)
+    await render({ identity: 'A', newest: page('a', 4, 3, true), fetchOlder })
+    await act(async () => latest().loadOlder())
+    expect(ids()).toEqual(['a1', 'a2', 'a3', 'a4'])
+    await render({ identity: 'B', newest: page('b', 2, 1, false), fetchOlder })
+    expect(ids()).toEqual(['b1', 'b2'])
+    expect(latest().truncated).toBe(false)
+  })
+
+  it('drops an older page that arrives after navigating to another workload', async () => {
+    const pending = deferred()
+    await render({ identity: 'A', newest: page('a', 4, 3, true), fetchOlder: () => pending.promise })
+    let loading!: Promise<void>
+    await act(async () => { loading = latest().loadOlder() })
+    await render({ identity: 'B', newest: page('b', 4, 3, true), fetchOlder: () => pending.promise })
+    await act(async () => { pending.resolve(page('a', 2, 1, false)); await loading })
+    expect(ids()).toEqual(['b3', 'b4'])
+    expect(latest().truncated).toBe(true)
+    expect(latest().loadingOlder).toBe(false)
+  })
+
+  it('drops an older page that arrives after a refresh restarted paging', async () => {
+    const first = deferred()
+    let calls = 0
+    const fetchOlder = () => (++calls === 1 ? Promise.resolve(page('', 20, 11, true)) : first.promise)
+    await render({ identity: 'A', newest: page('', 30, 21, true), fetchOlder })
+    await act(async () => latest().loadOlder())
+    let loading!: Promise<void>
+    await act(async () => { loading = latest().loadOlder() })
+    expect(latest().loadingOlder).toBe(true)
+    // More arrived than one page holds: the refreshed page no longer reaches what's loaded.
+    await render({ identity: 'A', newest: page('', 60, 51, true), fetchOlder })
+    expect(latest().loadingOlder).toBe(false)
+    await act(async () => { first.resolve(page('', 10, 1, false)); await loading })
+    expect(ids()).toEqual(page('', 60, 51, true).events.map((e) => e.id).sort())
+    expect(latest().truncated).toBe(true)
+  })
+})

package/src/context/ConnectionContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useState, useCallback, useEffect, useRef, ReactNode } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { getApiBase } from '../api/config'
+import { readErrorBody } from '../api/httpErrors'
 import { apiFetch, type SyncStatusSnapshot } from '../api/client'
 
 export type ConnectionStateType = 'connected' | 'disconnected' | 'connecting'
@@ -90,7 +91,7 @@ async function retryConnection(): Promise<ConnectionState> {
     method: 'POST',
   })
   if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Unknown error' })) as { error?: string; errorType?: string }
+    const error = await readErrorBody(response) as { error?: string; errorType?: string }
     throw new ConnectionRetryError(error.error || `HTTP ${response.status}`, error.errorType)
   }
   return response.json()

package/src/context/RadarUpgrade.tsx

@@ -0,0 +1,30 @@
+import { useMemo, type ReactNode } from 'react'
+import { RadarUpgradeContext, type RadarUpgradeActions } from '@skyhook-io/k8s-ui'
+import { useCapabilities, useVersionCheck } from '../api/client'
+import { IN_CLUSTER_UPGRADE_URL } from '../utils/version'
+import { useRadarUpgradeHost } from './RadarUpgradeHost'
+
+/**
+ * Supplies the "Upgrade Radar" action to the inline notes k8s-ui renders for
+ * features the connected Radar is too old to serve. A host that owns upgrades
+ * (Radar Cloud) gets the request; standalone Radar links to the instructions
+ * for how it was installed.
+ */
+export function RadarUpgradeProvider({ children }: { children: ReactNode }) {
+  const { onRequestRadarUpgrade } = useRadarUpgradeHost()
+  const { data: capabilities } = useCapabilities()
+  const { data: versionInfo } = useVersionCheck()
+  const mode = capabilities?.deployment?.mode ?? 'local'
+  // A local binary upgrades from its release page; an in-cluster or Cloud
+  // agent from the docs section that covers Helm, Argo CD and Flux installs.
+  const upgradeHref = mode === 'local' && versionInfo?.releaseUrl
+    ? versionInfo.releaseUrl
+    : `${IN_CLUSTER_UPGRADE_URL}#upgrading`
+
+  const value = useMemo<RadarUpgradeActions>(
+    () => (onRequestRadarUpgrade ? { onRequestUpgrade: onRequestRadarUpgrade } : { upgradeHref }),
+    [onRequestRadarUpgrade, upgradeHref],
+  )
+
+  return <RadarUpgradeContext.Provider value={value}>{children}</RadarUpgradeContext.Provider>
+}

package/src/context/RadarUpgradeHost.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react'
+import type { RadarUpgradeRequirement } from '@skyhook-io/k8s-ui'
+
+/** What the user is missing and which Radar serves it; see RadarUpgradeRequirement. */
+export type RadarUpgradeRequest = RadarUpgradeRequirement
+
+/**
+ * What an embedding host knows about the connected Radar and how it upgrades
+ * it: RadarApp's `radarVersion` and `onRequestRadarUpgrade` props. Kept apart
+ * from RadarUpgrade.tsx so api/client.ts can read it without an import cycle.
+ */
+export interface RadarUpgradeHost {
+  radarVersion?: string
+  onRequestRadarUpgrade?: (request: RadarUpgradeRequest) => void
+}
+
+const RadarUpgradeHostContext = createContext<RadarUpgradeHost>({})
+
+export const RadarUpgradeHostProvider = RadarUpgradeHostContext.Provider
+
+export function useRadarUpgradeHost(): RadarUpgradeHost {
+  return useContext(RadarUpgradeHostContext)
+}