@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/operations/CNPGOperationTracker.test.tsx

@@ -0,0 +1,247 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { CNPG_OP_UNOBSERVABLE_MS, type CNPGTrackedOperation } from './model'
+
+const state = vi.hoisted(() => ({
+  operations: [] as CNPGTrackedOperation[],
+  invalidateQueries: vi.fn(),
+  caps: vi.fn(() => ({ data: undefined as { uid: string } | undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })),
+  ha: vi.fn(() => ({ data: undefined as { cluster: { uid: string } } | undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })),
+  workspace: vi.fn(() => ({ dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })),
+  runtime: vi.fn(() => ({ data: undefined as { cluster: { uid: string } } | undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })),
+}))
+vi.mock('@tanstack/react-query', () => ({ useQueryClient: () => ({ invalidateQueries: state.invalidateQueries }) }))
+vi.mock('../../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'kind-db' } }) }))
+vi.mock('../../../api/cnpg', () => ({
+  useCNPGClusterCapabilities: state.caps,
+  useCNPGRuntime: state.runtime,
+  useCNPGWorkspace: state.workspace,
+}))
+vi.mock('../../../api/cnpg-ha', () => ({ useCNPGClusterHA: state.ha }))
+vi.mock('./store', () => ({
+  useCNPGOperations: () => state.operations,
+  updateCNPGOperations: (update: (all: CNPGTrackedOperation[]) => CNPGTrackedOperation[]) => { state.operations = update(state.operations) },
+  dismissCNPGOperation: vi.fn(),
+}))
+
+const { CNPGOperationTracker } = await import('./CNPGOperationTracker')
+
+beforeEach(() => {
+  state.invalidateQueries.mockClear()
+  state.workspace.mockReturnValue({ dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  state.caps.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  state.ha.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  state.runtime.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+})
+
+it('uses a fresh runtime identity to supersede a hidden predecessor when other reads fail', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now() - 1_000
+  state.operations = [{ id: 'predecessor', kind: 'restart', label: 'Restart', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'old-uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: { instances: ['pg-1'], podUIDs: { 'pg-1': 'old-pod' } } }]
+  state.caps.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: true, isFetching: false, isFetchedAfterMount: true })
+  state.ha.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: true, isFetching: false, isFetchedAfterMount: true })
+  state.runtime.mockReturnValue({ data: { cluster: { uid: 'new-uid' } }, dataUpdatedAt: startedAt + 1, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(state.operations[0].state).toBe('superseded')
+    expect(state.operations[0].finishedAt).toBeDefined()
+  } finally {
+    act(() => root.unmount())
+  }
+})
+
+it('observes a lone predecessor record even when identity filtering hides it', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const op: CNPGTrackedOperation = { id: 'old', kind: 'reload', label: 'Reload', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'old-uid', startedAt: 1, lastProgressAt: 1, state: 'requested', baseline: {} }
+  const completed = { ...op, id: 'finished', state: 'completed' as const, finishedAt: 2 }
+  const otherContext = { ...op, id: 'other-context', context: 'prod' }
+  const otherCluster = { ...op, id: 'other-cluster', cluster: 'other' }
+  state.operations = [op, completed, otherContext, otherCluster]
+  state.caps.mockReturnValue({ data: { uid: 'new-uid' }, dataUpdatedAt: Date.now(), errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(host.textContent).toBe('')
+    expect(state.ha).toHaveBeenCalledWith('db', 'pg', { enabled: true, refetchInterval: 5_000 })
+    expect(state.operations[0]).toMatchObject({ state: 'superseded', clusterUID: 'old-uid' })
+    expect(state.operations[0].finishedAt).toBeGreaterThan(2)
+    expect(state.operations.slice(1)).toEqual([completed, otherContext, otherCluster])
+  } finally {
+    act(() => root.unmount())
+  }
+})
+
+it.each([true, false])('keeps the current operation when an old capability UID has failed=%s', (failed) => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now() - 1_000
+  state.operations = [{ id: 'current', kind: 'switchover', label: 'Switch over', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'new-uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: {} }]
+  state.caps.mockReturnValue({ data: { uid: 'old-uid' }, dataUpdatedAt: startedAt - 1, errorUpdatedAt: 0, isError: failed, isFetching: false, isFetchedAfterMount: true })
+  state.ha.mockReturnValue({ data: { cluster: { uid: 'new-uid' } }, dataUpdatedAt: startedAt + 1, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(state.operations[0].state).not.toBe('superseded')
+    expect(state.operations[0].finishedAt).toBeUndefined()
+    expect(state.operations[0].clusterUID).toBe('new-uid')
+  } finally {
+    act(() => root.unmount())
+  }
+})
+
+
+it.each(['reload', 'restart'])('waits for the first identity response before finalizing an old hidden %s', (kind) => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now() - CNPG_OP_UNOBSERVABLE_MS - 1_000
+  state.operations = [{ id: 'predecessor', kind, label: kind, apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'old-uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: {} }]
+  state.caps.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: false, isFetching: true, isFetchedAfterMount: false })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(host.textContent).toBe('')
+    expect(state.operations[0].state).toBe('unobservable')
+    expect(state.operations[0].finishedAt).toBeUndefined()
+    state.caps.mockReturnValue({ data: { uid: 'new-uid' }, dataUpdatedAt: Date.now(), errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(state.operations[0].state).toBe('superseded')
+    expect(state.operations[0].finishedAt).toBeDefined()
+  } finally {
+    act(() => root.unmount())
+  }
+})
+
+
+it('bounds old unobservable operations during background refetches after initial reads settled', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now() - CNPG_OP_UNOBSERVABLE_MS - 1_000
+  state.operations = [{ id: 'predecessor', kind: 'reload', label: 'Reload', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'old-uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: {} }]
+  state.caps.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: true, isFetching: true, isFetchedAfterMount: true })
+  state.ha.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: 0, isError: true, isFetching: true, isFetchedAfterMount: true })
+  state.workspace.mockReturnValue({ dataUpdatedAt: 0, errorUpdatedAt: 0, isError: true, isFetching: true, isFetchedAfterMount: true })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(state.operations[0].state).toBe('unobservable')
+    expect(state.operations[0].detail).toContain('identity')
+    expect(state.operations[0].finishedAt).toBeDefined()
+  } finally {
+    act(() => root.unmount())
+  }
+})
+
+
+it('advances the follow-window clock when only repeated failure timestamps change', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now()
+  const clock = vi.spyOn(Date, 'now').mockReturnValue(startedAt + 1_000)
+  state.operations = [{ id: 'outage', kind: 'restart', label: 'Restart', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'old-uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: {} }]
+  const failed = { data: undefined, dataUpdatedAt: 0, errorUpdatedAt: startedAt + 1_000, isError: true, isFetching: false, isFetchedAfterMount: true }
+  state.caps.mockReturnValue(failed)
+  state.ha.mockReturnValue(failed)
+  state.runtime.mockReturnValue(failed)
+  state.workspace.mockReturnValue(failed)
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(state.operations[0].finishedAt).toBeUndefined()
+    const settledAt = startedAt + CNPG_OP_UNOBSERVABLE_MS + 1
+    clock.mockReturnValue(settledAt)
+    state.caps.mockReturnValue({ ...failed, errorUpdatedAt: settledAt })
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    expect(state.operations[0].state).toBe('unobservable')
+    expect(state.operations[0].finishedAt).toBe(settledAt)
+    expect(state.operations[0].lastCheckedAt).toBe(settledAt)
+  } finally {
+    act(() => root.unmount())
+    clock.mockRestore()
+  }
+})
+
+it('preserves an in-flight initial identity read when its next poll is due', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.useFakeTimers()
+  const startedAt = Date.now() - CNPG_OP_UNOBSERVABLE_MS - 1_000
+  state.operations = [{ id: 'slow', kind: 'reload', label: 'Reload', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'old-uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: {} }]
+  state.caps.mockReturnValue({ data: { uid: 'old-uid' }, dataUpdatedAt: startedAt - 1, errorUpdatedAt: 0, isError: false, isFetching: true, isFetchedAfterMount: false })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="new-uid" />))
+    act(() => vi.advanceTimersByTime(5_000))
+    expect(state.operations[0].finishedAt).toBeUndefined()
+    expect(state.invalidateQueries).toHaveBeenCalledWith({ queryKey: ['cnpg', 'capabilities', 'clusters', 'db', 'pg'] }, { cancelRefetch: false })
+    expect(state.invalidateQueries).toHaveBeenCalledWith({ queryKey: ['cnpg', 'workspace', 'db'] }, { cancelRefetch: false })
+  } finally {
+    act(() => root.unmount())
+    vi.useRealTimers()
+  }
+})
+
+it('reads "requested", not "cannot be followed", until the first read since the request lands', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now() - 1_000
+  state.operations = [{ id: 'fresh', kind: 'switchover', label: 'Switch over', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'uid', target: { name: 'pg-2' }, startedAt, lastProgressAt: startedAt, state: 'requested', baseline: { currentPrimary: 'pg-1' } }]
+  state.caps.mockReturnValue({ data: { uid: 'uid' }, dataUpdatedAt: startedAt - 1, errorUpdatedAt: 0, isError: false, isFetching: true, isFetchedAfterMount: true })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="uid" />))
+    expect(state.operations[0]).toMatchObject({ state: 'requested', detail: 'Waiting for the first read since the request' })
+    expect(host.textContent).toContain('requested')
+    state.caps.mockReturnValue({ data: undefined, dataUpdatedAt: startedAt - 1, errorUpdatedAt: Date.now(), isError: true, isFetching: false, isFetchedAfterMount: true })
+    state.ha.mockReturnValue({ data: undefined, dataUpdatedAt: 0, errorUpdatedAt: Date.now(), isError: true, isFetching: false, isFetchedAfterMount: true })
+    state.workspace.mockReturnValue({ dataUpdatedAt: 0, errorUpdatedAt: Date.now(), isError: true, isFetching: false, isFetchedAfterMount: true })
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="uid" />))
+    expect(state.operations[0].state).toBe('unobservable')
+    expect(state.operations[0].finishedAt).toBeUndefined()
+  } finally {
+    act(() => root.unmount())
+  }
+})
+
+it('does not let runtime cached by another view stand in for the identity while the polled reads fail', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now() - 1_000
+  state.operations = [{ id: 'fence', kind: 'fence', label: 'Fence pg-2', apiBase: '/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: { instances: ['pg-2'] } }]
+  const failing = { data: undefined, dataUpdatedAt: 0, errorUpdatedAt: Date.now(), isError: true, isFetching: false, isFetchedAfterMount: true }
+  state.caps.mockReturnValue(failing)
+  state.ha.mockReturnValue(failing)
+  state.workspace.mockReturnValue(failing)
+  state.runtime.mockReturnValue({ data: { cluster: { uid: 'uid' } }, dataUpdatedAt: startedAt - 1, errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="uid" />))
+    expect(state.runtime).toHaveBeenLastCalledWith('db', 'pg', false)
+    expect(state.operations[0].state).toBe('unobservable')
+    expect(state.operations[0].detail).toContain('identity')
+    expect(state.operations[0].finishedAt).toBeUndefined()
+  } finally {
+    act(() => root.unmount())
+  }
+})
+
+it('leaves records issued against another Radar alone', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const startedAt = Date.now() - 1_000
+  const other: CNPGTrackedOperation = { id: 'east', kind: 'reload', label: 'Reload', apiBase: '/c/east/api', context: 'kind-db', namespace: 'db', cluster: 'pg', clusterUID: 'uid', startedAt, lastProgressAt: startedAt, state: 'requested', baseline: {} }
+  state.operations = [other]
+  state.caps.mockReturnValue({ data: { uid: 'uid' }, dataUpdatedAt: Date.now(), errorUpdatedAt: 0, isError: false, isFetching: false, isFetchedAfterMount: true })
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<CNPGOperationTracker namespace="db" name="pg" uid="uid" />))
+    expect(host.textContent).toBe('')
+    expect(state.operations).toEqual([other])
+  } finally {
+    act(() => root.unmount())
+  }
+})

package/src/components/cnpg/operations/CNPGOperationTracker.tsx

@@ -0,0 +1,255 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { Check, Circle, CircleHelp, Copy, X } from 'lucide-react'
+import { Badge, DialogPortal, StatusDot, coverageReadable, formatAge } from '@skyhook-io/k8s-ui'
+import { copyText } from '@skyhook-io/k8s-ui/utils/clipboard'
+import { getApiBase, routePath } from '../../../api/config'
+import { cnpgClusterFullPath } from '../paths'
+import { useToast } from '../../ui/Toast'
+import { useConnection } from '../../../context/ConnectionContext'
+import { useCNPGClusterCapabilities, useCNPGRuntime, useCNPGWorkspace } from '../../../api/cnpg'
+import { useCNPGClusterHA } from '../../../api/cnpg-ha'
+import {
+  CNPG_OP_TERMINAL,
+  advanceCNPGOperation,
+  cnpgOperationFollowed,
+  type CNPGObservation,
+  type CNPGTrackedOperation,
+} from './model'
+import {
+  CNPG_OP_STATE_TEXT as STATE_TEXT,
+  CNPG_OP_STATE_TONE as STATE_TONE,
+  CNPG_OP_STATE_SEVERITY as STATE_SEVERITY,
+  cnpgOperationHandoff,
+  cnpgOperationsForCluster,
+} from './presentation'
+import { dismissCNPGOperation, updateCNPGOperations, useCNPGOperations } from './store'
+
+const POLL_MS = 5_000
+
+function sourceFreshness(q: { dataUpdatedAt: number; errorUpdatedAt: number; isError: boolean; isFetching: boolean; isFetchedAfterMount: boolean }) {
+  return { updatedAt: q.dataUpdatedAt, checkedAt: Math.max(q.dataUpdatedAt, q.errorUpdatedAt), failed: q.isError, initialPending: q.isFetching && !q.isFetchedAfterMount }
+}
+
+/**
+ * Follows the operations requested on this Cluster in this browser session
+ * and shows them in the header until they finish. Reads only what the caller
+ * can read; a step it cannot see stays "unknown".
+ */
+export function CNPGOperationTracker({ namespace, name, uid }: { namespace: string; name: string; uid: string }) {
+  const { connection } = useConnection()
+  const context = connection.context
+  const apiBase = getApiBase()
+  const allOps = useCNPGOperations()
+  const ops = cnpgOperationsForCluster(allOps, { apiBase, namespace, name, context, uid })
+  const active = ops.filter(cnpgOperationFollowed)
+  const followed = cnpgOperationsForCluster(allOps, { apiBase, namespace, name, context }).filter(cnpgOperationFollowed)
+  const following = followed.length > 0
+  const needsRuntime = followed.some((o) => ['switchover', 'unfence', 'restart', 'restartInstance', 'destroyInstance'].includes(o.kind))
+
+  const queryClient = useQueryClient()
+  const caps = useCNPGClusterCapabilities(namespace, name, following)
+  const ha = useCNPGClusterHA(namespace, name, { enabled: following, refetchInterval: following ? POLL_MS : false })
+  const runtime = useCNPGRuntime(namespace, name, following && needsRuntime)
+  const workspace = useCNPGWorkspace([namespace], { enabled: following })
+
+  useEffect(() => {
+    if (!following) return
+    const t = setInterval(() => {
+      if (document.visibilityState === 'hidden') return
+      queryClient.invalidateQueries({ queryKey: ['cnpg', 'capabilities', 'clusters', namespace, name] }, { cancelRefetch: false })
+      queryClient.invalidateQueries({ queryKey: ['cnpg', 'workspace', namespace] }, { cancelRefetch: false })
+    }, POLL_MS)
+    return () => clearInterval(t)
+  }, [following, queryClient, namespace, name])
+
+  const capsFresh = sourceFreshness(caps)
+  const haFresh = sourceFreshness(ha)
+  const runtimeFresh = sourceFreshness(runtime)
+  const workspaceFresh = sourceFreshness(workspace)
+  const observation = useMemo<CNPGObservation | null>(() => {
+    if (!following) return null
+    const ws = workspace.data
+    const cluster = ws?.objects.clusters?.find(
+      (c: any) => c?.metadata?.namespace === namespace && c?.metadata?.name === name,
+    )
+    const backupsReadable = ws?.coverage.backups ? coverageReadable(ws.coverage.backups, namespace) : false
+    // Runtime that is not polled is a cached answer from another view, not a
+    // check of the Cluster now.
+    const identity = [
+      { uid: caps.data?.uid, updatedAt: capsFresh.updatedAt, failed: capsFresh.failed },
+      { uid: ha.data?.cluster.uid, updatedAt: haFresh.updatedAt, failed: haFresh.failed },
+      ...(needsRuntime ? [{ uid: runtime.data?.cluster.uid, updatedAt: runtimeFresh.updatedAt, failed: runtimeFresh.failed }] : []),
+      { uid: cluster?.metadata?.uid, updatedAt: workspaceFresh.updatedAt, failed: workspaceFresh.failed },
+    ].filter((source) => source.uid && !source.failed).sort((a, b) => b.updatedAt - a.updatedAt)[0]
+    return {
+      // Failed polls must advance elapsed-time checks even when no data changes.
+      now: Math.max(Date.now(), capsFresh.checkedAt, haFresh.checkedAt, runtimeFresh.checkedAt, workspaceFresh.checkedAt),
+      clusterUID: identity?.uid,
+      identityPending: capsFresh.initialPending || haFresh.initialPending || workspaceFresh.initialPending || (needsRuntime && runtimeFresh.initialPending),
+      identityReadFailed: capsFresh.failed || haFresh.failed || workspaceFresh.failed || (needsRuntime && runtimeFresh.failed),
+      facts: caps.data?.facts,
+      cluster,
+      ha: ha.data,
+      runtime: runtime.data,
+      backups: backupsReadable ? (ws?.objects.backups ?? []) : undefined,
+      freshness: {
+        clusterUID: identity ? { updatedAt: identity.updatedAt, failed: false } : undefined,
+        facts: { updatedAt: capsFresh.updatedAt, failed: capsFresh.failed, clusterUID: caps.data?.uid },
+        cluster: { updatedAt: workspaceFresh.updatedAt, failed: workspaceFresh.failed, clusterUID: cluster?.metadata?.uid },
+        backups: { updatedAt: workspaceFresh.updatedAt, failed: workspaceFresh.failed },
+        ha: { updatedAt: haFresh.updatedAt, failed: haFresh.failed, clusterUID: ha.data?.cluster.uid },
+        runtime: { updatedAt: runtimeFresh.updatedAt, failed: runtimeFresh.failed, clusterUID: runtime.data?.cluster.uid },
+      },
+    }
+  }, [
+    following,
+    needsRuntime,
+    namespace,
+    name,
+    caps.data,
+    ha.data,
+    runtime.data,
+    workspace.data,
+    capsFresh.updatedAt,
+    capsFresh.failed,
+    haFresh.updatedAt,
+    haFresh.failed,
+    runtimeFresh.updatedAt,
+    runtimeFresh.failed,
+    workspaceFresh.updatedAt,
+    workspaceFresh.failed,
+    capsFresh.initialPending,
+    haFresh.initialPending,
+    workspaceFresh.initialPending,
+    runtimeFresh.initialPending,
+    capsFresh.checkedAt,
+    haFresh.checkedAt,
+    workspaceFresh.checkedAt,
+    runtimeFresh.checkedAt,
+  ])
+
+  useEffect(() => {
+    if (!observation) return
+    updateCNPGOperations((all) => {
+      let changed = false
+      const next = all.map((op) => {
+        if (op.apiBase !== apiBase || op.namespace !== namespace || op.cluster !== name || op.context !== context || !cnpgOperationFollowed(op))
+          return op
+        const adv = advanceCNPGOperation(op, observation)
+        if (JSON.stringify(adv) !== JSON.stringify(op)) changed = true
+        return adv
+      })
+      return changed ? next : all
+    })
+  }, [observation, apiBase, namespace, name, context])
+
+  const [open, setOpen] = useState(false)
+  if (ops.length === 0) return null
+  const lead = active[active.length - 1] ?? ops[ops.length - 1]
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="btn-secondary inline-flex max-w-[22rem] items-center gap-1.5 px-2.5 py-1.5 text-xs"
+      >
+        <StatusDot tone={STATE_TONE[lead.state]} />
+        <span className="truncate">{lead.label}</span>
+        <span className="shrink-0 text-theme-text-tertiary">· {STATE_TEXT[lead.state]}</span>
+        {ops.length > 1 && <span className="shrink-0 text-theme-text-tertiary">+{ops.length - 1}</span>}
+      </button>
+      <DialogPortal
+        open={open}
+        onClose={() => setOpen(false)}
+        ariaLabel="Operations on this cluster"
+        className="w-full max-w-xl p-4"
+      >
+        <div className="mb-3 flex items-center justify-between gap-3">
+          <h3 className="text-sm font-semibold text-theme-text-primary">Operations in this tab</h3>
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            aria-label="Close operations"
+            className="rounded p-1 text-theme-text-secondary hover:bg-theme-hover"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="max-h-[65vh] space-y-2 overflow-y-auto">
+          {[...ops].reverse().map((op) => (
+            <OperationRow key={op.id} op={op} />
+          ))}
+        </div>
+      </DialogPortal>
+    </div>
+  )
+}
+
+function OperationRow({ op }: { op: CNPGTrackedOperation }) {
+  const terminal = CNPG_OP_TERMINAL.has(op.state)
+  const { showSuccess, showError } = useToast()
+  const handoff = async () => {
+    const path = cnpgClusterFullPath(op.namespace, op.cluster, op.context)
+    const url = new URL(routePath(path), window.location.origin).href
+    const copied = await copyText(cnpgOperationHandoff(op, url))
+    if (copied) showSuccess('Handoff copied · the link opens current Cluster facts')
+    else showError('Could not copy the handoff')
+  }
+  return (
+    <div className="rounded-md border border-theme-border bg-theme-base p-2 text-xs">
+      <div className="flex items-center gap-2">
+        <span className="min-w-0 flex-1 truncate font-medium text-theme-text-primary">{op.label}</span>
+        <Badge severity={STATE_SEVERITY[op.state]} size="sm">
+          {STATE_TEXT[op.state]}
+        </Badge>
+        {(terminal || op.state === 'unobservable') && (
+          <button
+            type="button"
+            aria-label={`Dismiss ${op.label}`}
+            onClick={() => dismissCNPGOperation(op.id)}
+            className="rounded p-0.5 text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </div>
+      <div className="mt-0.5 text-theme-text-tertiary">
+        requested {formatAge(new Date(op.startedAt).toISOString())} ago
+      </div>
+      <div className="mt-0.5 text-theme-text-tertiary">
+        {op.lastCheckedAt
+          ? `Last checked in this tab ${formatAge(new Date(op.lastCheckedAt).toISOString())} ago`
+          : 'Not yet checked in this tab'}
+      </div>
+      {op.detail && <div className="mt-1 text-theme-text-secondary">{op.detail}</div>}
+      {op.steps && op.steps.length > 0 && (
+        <ul className="mt-1.5 space-y-0.5">
+          {op.steps.map((s) => (
+            <li key={s.label} className="flex items-center gap-1.5 text-theme-text-secondary">
+              {s.done === true ? (
+                <Check className="h-3 w-3 shrink-0 text-accent" aria-label="done" />
+              ) : s.done === false ? (
+                <Circle className="h-3 w-3 shrink-0 text-theme-text-tertiary" aria-label="not yet" />
+              ) : (
+                <CircleHelp className="h-3 w-3 shrink-0 text-theme-text-tertiary" aria-label="not observable" />
+              )}
+              <span>{s.label}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <button
+        type="button"
+        onClick={() => void handoff()}
+        className="mt-2 inline-flex items-center gap-1 text-accent-text hover:underline"
+      >
+        <Copy className="h-3 w-3" />
+        Copy handoff
+      </button>
+    </div>
+  )
+}