@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/components/whats-new/check-whats-new.test.ts

@@ -0,0 +1,65 @@
+import { spawnSync } from 'node:child_process'
+import { mkdtempSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// scripts/check-whats-new.sh gates every minor release on having notes; these
+// pin what counts as an entry, against catalogs written to a temp dir.
+const script = join(__dirname, '..', '..', '..', '..', 'scripts', 'check-whats-new.sh')
+
+function check(version: string, catalog: string) {
+  const file = join(mkdtempSync(join(tmpdir(), 'whats-new-')), 'releaseNotes.ts')
+  writeFileSync(file, catalog)
+  return spawnSync('bash', [script, version], { env: { ...process.env, WHATS_NEW_CATALOG: file }, encoding: 'utf8' }).status
+}
+
+const empty = `export const RELEASE_NOTES: ReleaseNotes[] = []\n`
+const withEntry = (entry: string, before = '') => `${before}export const RELEASE_NOTES: ReleaseNotes[] = [\n${entry}\n]\n\nexport function after() {}\n`
+
+describe('check-whats-new.sh', () => {
+  it('lets patches and prereleases through without notes', () => {
+    expect(check('v1.15.1', empty)).toBe(0)
+    expect(check('v1.15.0-rc.1', empty)).toBe(0)
+  })
+
+  it('refuses a minor or major release without notes, including one with build metadata', () => {
+    expect(check('v1.15.0', empty)).toBe(1)
+    expect(check('v2.0.0', empty)).toBe(1)
+    expect(check('v1.15.0+build.1', empty)).toBe(1)
+  })
+
+  it('refuses a version that is not vX.Y.Z', () => {
+    expect(check('v1.15', empty)).toBe(1)
+    expect(check('latest', empty)).toBe(1)
+  })
+
+  it('accepts a real entry, wherever version sits in it', () => {
+    const entry = `  {\n    releaseUrl: 'https://github.com/skyhook-io/radar/releases/tag/v1.15.0', version: 'v1.15.0',\n    highlights: [],\n  },`
+    expect(check('v1.15.0', withEntry(entry))).toBe(0)
+    expect(check('1.15.0+build.1', withEntry(entry))).toBe(0)
+  })
+
+  it('does not count comments, objects outside the catalog, or look-alike properties', () => {
+    const decoys = `// { version: 'v1.16.0' },\n/* { version: 'v1.17.0' } */\nconst draft = { version: 'v1.18.0' }\n`
+    const catalog = withEntry(`  // { version: 'v1.20.0' },\n  { notversion: 'v1.19.0' },`, decoys)
+    for (const v of ['v1.16.0', 'v1.17.0', 'v1.18.0', 'v1.19.0', 'v1.20.0']) expect(check(v, catalog), v).toBe(1)
+  })
+
+  it('ignores an object after an empty catalog, even with a semicolon', () => {
+    expect(check('v1.15.0', `export const RELEASE_NOTES: ReleaseNotes[] = [];\nconst draft = { version: 'v1.15.0' };\n`)).toBe(1)
+  })
+
+  it('does not count the words "version:" inside another entry\'s text', () => {
+    const entry = `  {\n    version: 'v1.14.0',\n    improvements: ["Set version: 'v1.15.0' in your configuration"],\n  },`
+    expect(check('v1.15.0', withEntry(entry))).toBe(1)
+  })
+
+  it('accepts a value on the line after its key, quoted keys, and space before the colon', () => {
+    expect(check('v1.15.0', withEntry(`  {\n    version:\n      'v1.15.0',\n  },`))).toBe(0)
+    expect(check('v1.15.0', withEntry(`  { version: "v1.15.0" },`))).toBe(0)
+    expect(check('v1.15.0', withEntry(`  { "version": "v1.15.0" },`))).toBe(0)
+    expect(check('v1.15.0', withEntry(`  { version : 'v1.15.0' },`))).toBe(0)
+    expect(check('v1.15.0', withEntry(`  {\n    "version" :\n      "v1.15.0",\n  },`))).toBe(0)
+  })
+})

package/src/components/whats-new/releaseNotes.ts

@@ -0,0 +1,121 @@
+import type { LucideIcon } from 'lucide-react'
+import { Bot, GitCompareArrows, Layers, Network, Scale } from 'lucide-react'
+import { compareVersions } from '../../utils/version'
+
+export interface ReleaseHighlight {
+  id: string
+  icon: LucideIcon
+  title: string
+  description: string
+  /** In-app route the highlight's call to action opens. */
+  path?: string
+  cta?: string
+  /** Icon tile color, so the cards read apart at a glance. The lead card always uses the accent. */
+  tone?: HighlightTone
+}
+
+export type HighlightTone = 'violet' | 'teal' | 'emerald' | 'indigo'
+
+export interface ReleaseNotes {
+  version: string
+  /** The first highlight leads the dialog at full width. */
+  highlights: ReleaseHighlight[]
+  improvements: string[]
+  releaseUrl: string
+}
+
+// One entry per release that has something to announce. A version without its
+// own entry shows the newest entry at or below it, so a patch upgrade (or one
+// that skips the release with notes) still gets them. Every minor and major
+// release must have its own entry: scripts/check-whats-new.sh refuses to
+// release one without it.
+export const RELEASE_NOTES: ReleaseNotes[] = [
+  {
+    version: 'v1.15.0',
+    releaseUrl: 'https://github.com/skyhook-io/radar/releases/tag/v1.15.0',
+    highlights: [
+      {
+        id: 'ai-investigations',
+        icon: Bot,
+        title: 'AI investigations that show their work',
+        // No link: the investigations workspace redirects home when this run
+        // mode can't host local agents.
+        description: 'A clear verdict and the story of what broke, with the charts, logs and config behind it placed where the agent cites them. Now also runs on OpenCode, including AWS Bedrock.',
+      },
+      {
+        id: 'gitops-manifest-diff',
+        icon: GitCompareArrows,
+        title: 'Full manifest diffs for Argo CD resources',
+        description: 'Compare the Git-rendered and live manifest of a drifted Argo CD resource, side by side or unified.',
+        tone: 'violet',
+        path: '/gitops',
+        cta: 'Open GitOps',
+      },
+      {
+        id: 'rightsizing-risks-first',
+        icon: Scale,
+        title: 'Rightsizing and cost data in MCP',
+        description: 'Agents get new optimized tools. Risks (OOM, limit conflicts and throttling) lead before cost-saving, in the UI as well.',
+        tone: 'emerald',
+        path: '/cost/rightsizing',
+        cta: 'Open Rightsizing',
+      },
+      {
+        id: 'batch-ai-workloads',
+        icon: Layers,
+        title: 'Deeper batch + AI/ML workloads support',
+        description: 'Dedicated pages for Kueue, JobSet and Ray resources, and Job and JobSet details now show why a queued job has no Pods.',
+        tone: 'teal',
+      },
+      {
+        id: 'rollout-traffic-topology',
+        icon: Network,
+        title: 'Canary and blue-green in Topology',
+        description: 'See canary and stable Pods, which Services route to each side, and the canary traffic weight.',
+        tone: 'indigo',
+        path: '/topology',
+        cta: 'Open Topology',
+      },
+    ],
+    improvements: [
+      // The grid fills row by row: pair lines of similar length.
+      'Resource tables remember your sort for each kind',
+      'Install Helm charts from OCI registries',
+      'Checks flag expired and expiring TLS certificates',
+      'Radar Desktop keeps your preferences across restarts',
+      'Issues show where a failing Pod differs from its template',
+      'PVC details say why usage data is unavailable',
+      'Issues catch Strimzi connector and admission webhook failures',
+      'Bind the web UI to a specific IP with --listen-address',
+    ],
+  },
+]
+
+export function releaseNotesFor(
+  version: string | undefined,
+  catalog: ReleaseNotes[] = RELEASE_NOTES,
+): ReleaseNotes | undefined {
+  if (!version) return undefined
+  const normalized = version.startsWith('v') ? version : `v${version}`
+  return catalog.find(notes => notes.version === normalized)
+}
+
+/** The release line a catalog entry covers, e.g. v1.15 for v1.15.0: its patches show the same notes. */
+export function releaseLine(version: string): string {
+  return version.replace(/^(v\d+\.\d+)\.\d+$/, '$1')
+}
+
+/** The newest notes for a release at or below `version` — what that version's user has access to. */
+export function latestReleaseNotesFor(
+  version: string | undefined,
+  catalog: ReleaseNotes[] = RELEASE_NOTES,
+): ReleaseNotes | undefined {
+  if (!version) return undefined
+  let latest: ReleaseNotes | undefined
+  for (const notes of catalog) {
+    const atOrBelow = compareVersions(notes.version, version)
+    if (atOrBelow === null || atOrBelow > 0) continue
+    if (!latest || (compareVersions(notes.version, latest.version) ?? 0) > 0) latest = notes
+  }
+  return latest
+}

package/src/components/workload/WorkloadView.tsx

@@ -1,3 +1,5 @@
+import { RayJobRenderer } from '../resources/renderers/RayJobRenderer'
+import { JobRenderer, JobSetRenderer } from '../resources/renderers/JobAdmissionRenderers'
 import { RayClusterRenderer } from '../resources/renderers/RayClusterRenderer'
 import { RayServiceRenderer } from '../resources/renderers/RayServiceRenderer'
 import { KueueWorkloadRenderer } from '../resources/renderers/KueueWorkloadRenderer'
@@ -34,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,
@@ -44,7 +47,8 @@ import {
   type NavigateToResource,
 } from '../../utils/navigation'
 import {
-  useChanges,
+  useWorkloadHistory,
+  fetchWorkloadHistoryPage,
   useResourceWithRelationships,
   usePodLogs,
   useTopology,
@@ -75,7 +79,6 @@ import {
   useUncordonNode,
   useDrainNode,
   useDrainPlan,
-  DrainPlanUnsupportedError,
   useCascadeDeletePreview,
   useResourceEvents,
   useResource,
@@ -90,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'
@@ -171,6 +175,9 @@ export function supportsBatchExecution(kind: string, apiKind: string, group?: st
 
 // Stable reference — web renderer wrappers inject platform hooks internally
 const rendererOverrides: RendererOverrides = {
+  RayJobRenderer,
+  JobRenderer,
+  JobSetRenderer,
   RayServiceRenderer,
   RayClusterRenderer,
   KueueWorkloadRenderer,
@@ -513,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,
   }
 }
 
@@ -607,6 +616,11 @@ export function WorkloadView({
   const refetchResourceAndRuns = useCallback(async () => {
     await Promise.all([
       refetchResource(),
+      ...(apiKind === 'rayjobs' && effectiveGroup === 'ray.io' ? [
+        queryClient.refetchQueries({ queryKey: ['resource', 'jobs', namespace, name, 'batch'], type: 'active' }),
+        ...(resource?.spec?.clusterSelector?.['ray.io/cluster'] ? [queryClient.refetchQueries({ queryKey: ['resource', 'rayclusters', namespace, resource.spec.clusterSelector['ray.io/cluster'], 'ray.io'], type: 'active' })] : []),
+      ] : []),
+      queryClient.refetchQueries({ queryKey: ['kueue-admission', effectiveGroup, apiKind, namespace, name], type: 'active' }),
       queryClient.refetchQueries({
         queryKey: ['workload-runs', apiKind, namespace, name],
       }),
@@ -615,7 +629,7 @@ export function WorkloadView({
         ...(apiKind === 'rayclusters' ? { type: 'active' as const } : {}),
       }),
     ])
-  }, [apiKind, name, namespace, queryClient, refetchResource])
+  }, [apiKind, effectiveGroup, name, namespace, queryClient, refetchResource, resource?.spec?.clusterSelector])
   const podWorkloadOwner = useMemo(
     () => podWorkloadOwnerFromRelationships(apiKind, namespace, relationships, resource),
     [apiKind, namespace, relationships, resource],
@@ -781,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()
@@ -1186,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()