@skyhook-io/radar-app 1.14.6 → 1.15.0

package/src/components/whats-new/WhatsNew.tsx

@@ -0,0 +1,423 @@
+import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore, type ReactNode } from 'react'
+import { useLocation, useSearchParams } from 'react-router-dom'
+import { useQueryClient } from '@tanstack/react-query'
+import { clsx } from 'clsx'
+import { ArrowRight, Check, ExternalLink, Megaphone, X } from 'lucide-react'
+import { DialogPortal } from '@skyhook-io/k8s-ui'
+import { getApiBase } from '../../api/config'
+import { markWhatsNewSeen, useCapabilities, useWhatsNewState, type WhatsNewState } from '../../api/client'
+import { compareVersions } from '../../utils/version'
+import { latestReleaseNotesFor, releaseLine, releaseNotesFor, RELEASE_NOTES, type HighlightTone, type ReleaseHighlight, type ReleaseNotes } from './releaseNotes'
+import type { UsageDataStatus } from '../../api/usage-data'
+import { UsageDataAsk } from '../usage-data/UsageDataAsk'
+
+const LAST_SEEN_KEY = 'radar-whats-new-seen'
+const PREVIEW_PARAM = 'whats-new'
+export const SHOW_WHATS_NEW_EVENT = 'radar:show-whats-new'
+
+/**
+ * The notes to open automatically, if any: the newest release at or below the
+ * running version that is newer than what was last seen. A fresh install has
+ * nothing to compare against and sees nothing; an install that predates the
+ * seen record sees the notes once.
+ */
+export function whatsNewToShow(
+  currentVersion: string,
+  lastSeen: string | null,
+  priorInstall: boolean,
+  catalog: ReleaseNotes[] = RELEASE_NOTES,
+): ReleaseNotes | null {
+  const notes = latestReleaseNotesFor(currentVersion, catalog)
+  if (!notes) return null
+  // A record that isn't a version (a development build's) proves an install
+  // but says nothing about which notes were seen.
+  const newer = lastSeen === null ? null : compareVersions(notes.version, lastSeen)
+  if (newer === null) return lastSeen !== null || priorInstall ? notes : null
+  return newer > 0 ? notes : null
+}
+
+/**
+ * The version to record once the running version's notes are acknowledged, or
+ * null when nothing should change. It only moves forward, so a downgrade
+ * doesn't replay notes on the way back up, and a development build records
+ * nothing — a non-version record could never be compared again.
+ */
+export function nextSeenVersion(currentVersion: string, lastSeen: string | null): string | null {
+  if (compareVersions(currentVersion, currentVersion) === null) return null
+  const cmp = lastSeen === null ? null : compareVersions(currentVersion, lastSeen)
+  if (cmp !== null && cmp <= 0) return null
+  return normalize(currentVersion)
+}
+
+function normalize(version: string): string {
+  return version.startsWith('v') ? version : `v${version}`
+}
+
+// A local Radar's browser origin changes between launches (Desktop binds a
+// random port), so its record lives server-side; in-cluster, each browser
+// keeps its own. undefined = nothing can be recorded, so don't auto-open.
+function readBrowserLastSeen(): string | null | undefined {
+  try {
+    return localStorage.getItem(LAST_SEEN_KEY)
+  } catch {
+    return undefined
+  }
+}
+
+function hadRadarStateBeforeThisSession(): boolean {
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && key !== LAST_SEEN_KEY && key.startsWith('radar')) return true
+    }
+  } catch { /* ignore */ }
+  return false
+}
+
+// Read at module load, before this session's own queries write radar-* keys
+// (the version check records its last run), which would make every fresh
+// install look like an upgrade.
+const HAD_PRIOR_RADAR_STATE = hadRadarStateBeforeThisSession()
+
+function writeBrowserLastSeen(version: string) {
+  try { localStorage.setItem(LAST_SEEN_KEY, version) } catch { /* ignore */ }
+}
+
+export interface WhatsNewStatus {
+  /** Notes exist for this version, so there is something to open. */
+  available: boolean
+  /** Those notes are newer than what the user has seen. */
+  unread: boolean
+}
+
+// The rail and the omnibar sit outside this component but need its status.
+const NO_STATUS: WhatsNewStatus = { available: false, unread: false }
+let status = NO_STATUS
+const statusListeners = new Set<() => void>()
+
+function publishStatus(next: WhatsNewStatus) {
+  if (next.available === status.available && next.unread === status.unread) return
+  status = next
+  statusListeners.forEach(listener => listener())
+}
+
+function subscribeStatus(listener: () => void) {
+  statusListeners.add(listener)
+  return () => { statusListeners.delete(listener) }
+}
+
+export function useWhatsNewStatus(): WhatsNewStatus {
+  return useSyncExternalStore(subscribeStatus, () => status)
+}
+
+export function openWhatsNew() {
+  window.dispatchEvent(new Event(SHOW_WHATS_NEW_EVENT))
+}
+
+interface WhatsNewProps {
+  onNavigate: (path: string) => void
+  // Omitted by hosts that don't run usage data; the dialog then never asks.
+  usageData?: UsageDataStatus
+}
+
+/**
+ * Opens once after Radar is upgraded to a version that has release notes.
+ * `?whats-new` (or `?whats-new=v1.15.0`) opens it on demand for previews.
+ */
+export function WhatsNew({ onNavigate, usageData }: WhatsNewProps) {
+  const { data: capabilities } = useCapabilities()
+  // Radar Cloud ships its own release communication.
+  const isCloud = capabilities?.deployment?.mode === 'cloud'
+  const { data: state } = useWhatsNewState(!!capabilities && !isCloud)
+  const queryClient = useQueryClient()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [notes, setNotes] = useState<ReleaseNotes | null>(null)
+  const [open, setOpen] = useState(false)
+  const [previousVersion, setPreviousVersion] = useState<string | null>(null)
+  // In-cluster only; undefined when browser storage is unavailable.
+  const [browserLastSeen, setBrowserLastSeen] = useState(readBrowserLastSeen)
+  const decidedRef = useRef(false)
+  const { pathname } = useLocation()
+  const titleId = useId()
+
+  const currentVersion = state?.currentVersion
+  const previewParam = searchParams.get(PREVIEW_PARAM)
+  // One authority per install: the server record for a personal install, this
+  // browser's storage for a shared one. undefined = nothing can be recorded.
+  const lastSeen = !state ? undefined : state.storage === 'server' ? state.seenVersion ?? null : browserLastSeen
+  const priorInstall = state?.storage === 'server' ? !!state.priorInstall : HAD_PRIOR_RADAR_STATE
+
+  // Another tab acknowledging the notes clears this tab's dot too.
+  useEffect(() => {
+    const onStorage = () => setBrowserLastSeen(readBrowserLastSeen())
+    window.addEventListener('storage', onStorage)
+    return () => window.removeEventListener('storage', onStorage)
+  }, [])
+
+  const recordSeen = useCallback((s: WhatsNewState, seen: string | null) => {
+    const next = nextSeenVersion(s.currentVersion, seen)
+    if (next === null) return
+    if (s.storage === 'browser') {
+      writeBrowserLastSeen(next)
+      setBrowserLastSeen(readBrowserLastSeen())
+      return
+    }
+    // Only a confirmed write clears the dot; a failed one is retried on the
+    // next close. A read still in flight predates the write, so it's dropped.
+    const queryKey = ['whats-new', getApiBase()]
+    markWhatsNewSeen(next).then(
+      async () => {
+        await queryClient.cancelQueries({ queryKey })
+        queryClient.setQueryData<WhatsNewState>(queryKey, prev => prev && { ...prev, seenVersion: next })
+      },
+      err => console.warn('[whats-new] Failed to record seen version', next, err),
+    )
+  }, [queryClient])
+
+  useEffect(() => {
+    if (previewParam === null) return
+    const preview = releaseNotesFor(previewParam) ?? latestReleaseNotesFor(currentVersion) ?? RELEASE_NOTES[0]
+    if (!preview) return
+    setPreviousVersion(null)
+    setNotes(preview)
+    setOpen(true)
+  }, [previewParam, currentVersion])
+
+  useEffect(() => {
+    if (!state || lastSeen === undefined || previewParam !== null || decidedRef.current) return
+    decidedRef.current = true
+    const due = whatsNewToShow(state.currentVersion, lastSeen, priorInstall)
+    // Only on Home: someone arriving on a deep link came for that page, often
+    // mid-incident. Elsewhere the nav rail's unread dot carries the notes.
+    if (due && (pathname === '/' || pathname === '/home')) {
+      setPreviousVersion(lastSeen)
+      setNotes(due)
+      setOpen(true)
+    } else if (!due && lastSeen === null) {
+      recordSeen(state, lastSeen)
+    }
+  // Decided once, when the state loads; the preview param is handled above.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state?.currentVersion, state?.storage])
+
+  const available = !!state && !isCloud && !!latestReleaseNotesFor(state.currentVersion)
+  const unread = available && lastSeen !== undefined && !!whatsNewToShow(state.currentVersion, lastSeen, priorInstall)
+  useEffect(() => { publishStatus({ available, unread }) }, [available, unread])
+  useEffect(() => () => publishStatus(NO_STATUS), [])
+
+  useEffect(() => {
+    const handler = () => {
+      const latest = latestReleaseNotesFor(currentVersion) ?? RELEASE_NOTES[0]
+      if (!latest) return
+      setPreviousVersion(null)
+      setNotes(latest)
+      setOpen(true)
+    }
+    window.addEventListener(SHOW_WHATS_NEW_EVENT, handler)
+    return () => window.removeEventListener(SHOW_WHATS_NEW_EVENT, handler)
+  }, [currentVersion])
+
+  const close = useCallback(() => {
+    setOpen(false)
+    // A preview of another release acknowledges nothing about this one.
+    if (state && lastSeen !== undefined && notes && notes === latestReleaseNotesFor(state.currentVersion)) recordSeen(state, lastSeen)
+    if (searchParams.has(PREVIEW_PARAM)) {
+      const next = new URLSearchParams(searchParams)
+      next.delete(PREVIEW_PARAM)
+      setSearchParams(next, { replace: true })
+    }
+  }, [state, lastSeen, notes, recordSeen, searchParams, setSearchParams])
+
+  const go = useCallback((path: string) => {
+    close()
+    onNavigate(path)
+  }, [close, onNavigate])
+
+  const readAboutUsageData = useCallback(() => {
+    close()
+    window.dispatchEvent(new CustomEvent('radar:open-settings', { detail: { section: 'privacy' } }))
+  }, [close])
+
+  if (isCloud) return null
+
+  return (
+    <DialogPortal open={open} onClose={close} ariaLabelledBy={titleId} className="w-[760px] max-w-[calc(100vw-2rem)] max-h-[min(840px,calc(100vh-4rem))] flex flex-col overflow-hidden rounded-xl">
+      {notes && (
+        <WhatsNewContent
+          titleId={titleId}
+          notes={notes}
+          previousVersion={previousVersion}
+          currentVersion={currentVersion}
+          onClose={close}
+          onNavigate={go}
+          ask={<UsageDataAsk usageData={usageData} onReadMore={readAboutUsageData} />}
+        />
+      )}
+    </DialogPortal>
+  )
+}
+
+interface WhatsNewContentProps {
+  titleId?: string
+  notes: ReleaseNotes
+  previousVersion?: string | null
+  /** The running version, which can be newer than the release the notes are for. */
+  currentVersion?: string
+  onClose: () => void
+  onNavigate: (path: string) => void
+  // Rendered between the notes and the footer, outside the scroll area so it
+  // stays visible however long the notes run.
+  ask?: ReactNode
+}
+
+export function WhatsNewContent({ titleId, notes, previousVersion, currentVersion, onClose, onNavigate, ask }: WhatsNewContentProps) {
+  const [lead, ...rest] = notes.highlights
+  const to = currentVersion ? normalize(currentVersion) : notes.version
+  const from = previousVersion && normalize(previousVersion) !== to ? normalize(previousVersion) : null
+
+  return (
+    <>
+      <div className="relative px-6 pt-5 pb-4 bg-gradient-to-b from-accent-muted to-transparent">
+        <div className="flex items-center gap-4 pr-8">
+          <div className="flex items-center justify-center w-11 h-11 rounded-xl bg-accent text-white shadow-glow-brand-sm shrink-0">
+            <Megaphone className="w-5 h-5" aria-hidden />
+          </div>
+          <div className="min-w-0">
+            <h2 id={titleId} className="text-lg font-semibold text-theme-text-primary leading-tight">
+              What's new in Radar <span className="font-mono">{releaseLine(notes.version)}</span>
+            </h2>
+            {from ? (
+              <p className="flex flex-wrap items-center gap-1.5 mt-1.5 text-xs text-theme-text-tertiary">
+                <span>You just updated</span>
+                <span className="font-mono px-1.5 py-0.5 rounded bg-theme-elevated text-theme-text-secondary">{from}</span>
+                <ArrowRight className="w-3 h-3" aria-label="to" />
+                <span className="font-mono px-1.5 py-0.5 rounded bg-accent-muted text-accent-text">{to}</span>
+              </p>
+            ) : (
+              <p className="mt-1 text-xs text-theme-text-tertiary">Highlights from this release</p>
+            )}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute top-4 right-4 p-1 rounded text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* The fade sits over the bottom padding, so it only covers content while more is below. */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-6 pb-6 [mask-image:linear-gradient(to_bottom,black_calc(100%-1.5rem),transparent)]">
+        <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          {lead && (
+            <li className="sm:col-span-2">
+              <HighlightCard item={lead} lead onNavigate={onNavigate} />
+            </li>
+          )}
+          {rest.map((item, i) => (
+            // An odd card out spans the row instead of leaving a hole beside it.
+            <li key={item.id} className={clsx(rest.length % 2 === 1 && i === rest.length - 1 && 'sm:col-span-2')}>
+              <HighlightCard item={item} onNavigate={onNavigate} />
+            </li>
+          ))}
+        </ul>
+
+        {notes.improvements.length > 0 && (
+          <div className="mt-4">
+            <h3 className="text-xs font-medium uppercase tracking-wide text-theme-text-tertiary mb-2">
+              Also in this release
+            </h3>
+            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1">
+              {notes.improvements.map(line => (
+                <li key={line} className="flex gap-2 text-xs text-theme-text-secondary leading-relaxed">
+                  <Check className="w-3.5 h-3.5 mt-px text-accent shrink-0" aria-hidden />
+                  {line}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {ask}
+
+      <div className="flex items-center justify-between gap-3 px-6 py-3 border-t border-theme-border bg-theme-base/60">
+        <a
+          href={notes.releaseUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:underline"
+        >
+          Full release notes
+          <ExternalLink className="w-3 h-3" aria-hidden />
+        </a>
+        <button type="button" onClick={onClose} className="btn-brand px-4 py-1.5 text-sm font-medium rounded-lg">
+          Got it
+        </button>
+      </div>
+    </>
+  )
+}
+
+// Literal class strings so Tailwind keeps them.
+const TONE_TILE: Record<HighlightTone, string> = {
+  violet: 'bg-violet-500/10 text-violet-600 dark:text-violet-400',
+  teal: 'bg-teal-500/10 text-teal-600 dark:text-teal-400',
+  emerald: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+  indigo: 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400',
+}
+
+function HighlightCard({ item, lead = false, onNavigate }: {
+  item: ReleaseHighlight
+  lead?: boolean
+  onNavigate: (path: string) => void
+}) {
+  const Icon = item.icon
+  const descriptionId = useId()
+  const actionable = !!(item.path && item.cta)
+  const className = clsx(
+    'flex gap-3 w-full h-full text-left rounded-lg border',
+    lead ? 'p-3.5 border-accent/30 bg-gradient-to-br from-accent-muted to-transparent' : 'p-3 border-theme-border',
+    actionable && 'group transition-colors hover:border-accent/50 hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
+  )
+  const body = (
+    <>
+      <span className={clsx(
+        'flex items-center justify-center shrink-0 rounded-lg',
+        lead ? 'w-10 h-10 bg-accent text-white' : clsx('w-8 h-8', item.tone ? TONE_TILE[item.tone] : 'bg-accent-muted text-accent'),
+      )}>
+        <Icon className={lead ? 'w-5 h-5' : 'w-4 h-4'} aria-hidden />
+      </span>
+      <span className="block min-w-0 flex-1">
+        <span className={clsx('block font-medium text-theme-text-primary leading-snug', lead ? 'text-base' : 'text-sm')}>
+          {item.title}
+        </span>
+        <span id={descriptionId} className={clsx('block mt-0.5 text-theme-text-secondary leading-relaxed', lead ? 'text-sm' : 'text-xs')}>
+          {item.description}
+        </span>
+        {actionable && (
+          <span className="inline-flex items-center gap-1 mt-1.5 text-xs font-medium text-accent-text group-hover:underline">
+            {item.cta}
+            <ArrowRight className="w-3 h-3" aria-hidden />
+          </span>
+        )}
+      </span>
+    </>
+  )
+
+  return actionable ? (
+    <button
+      type="button"
+      onClick={() => onNavigate(item.path!)}
+      aria-label={`${item.cta}: ${item.title}`}
+      aria-describedby={descriptionId}
+      className={className}
+    >
+      {body}
+    </button>
+  ) : (
+    <div className={className}>{body}</div>
+  )
+}

package/src/components/whats-new/WhatsNewDialog.test.tsx

@@ -0,0 +1,229 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { focusManager, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Megaphone } from 'lucide-react'
+import type { WhatsNewState } from '../../api/client'
+import { openWhatsNew, useWhatsNewStatus, WhatsNew } from './WhatsNew'
+import { RELEASE_NOTES } from './releaseNotes'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+let root: Root
+let client: QueryClient
+let serverState: WhatsNewState
+const seenPosts: string[] = []
+let failSeenPosts = 0
+let pendingRead: ((state: WhatsNewState) => void) | null = null
+let holdNextRead = false
+const status = { current: { available: false, unread: false } }
+
+function memoryStorage(): Storage {
+  const items = new Map<string, string>()
+  return {
+    get length() { return items.size },
+    key: (i: number) => Array.from(items.keys())[i] ?? null,
+    getItem: (k: string) => items.get(k) ?? null,
+    setItem: (k: string, v: string) => { items.set(k, String(v)) },
+    removeItem: (k: string) => { items.delete(k) },
+    clear: () => items.clear(),
+  }
+}
+
+function StatusProbe() {
+  status.current = useWhatsNewStatus()
+  return null
+}
+
+beforeEach(() => {
+  RELEASE_NOTES.push({
+    version: 'v1.15.0',
+    releaseUrl: 'https://github.com/skyhook-io/radar/releases',
+    highlights: [{ id: 'x', icon: Megaphone, title: 'Capacity views', description: 'd' }],
+    improvements: [],
+  })
+  seenPosts.length = 0
+  failSeenPosts = 0
+  pendingRead = null
+  holdNextRead = false
+  vi.stubGlobal('localStorage', memoryStorage())
+  // Radar's own defaults: focus refetch is off unless a query opts in.
+  client = new QueryClient({ defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } } })
+  const element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+  vi.stubGlobal('fetch', vi.fn(async (input: string, init?: RequestInit) => {
+    const path = new URL(input, 'http://localhost').pathname
+    if (path === '/api/capabilities') return Response.json({ deployment: { mode: serverState.storage === 'server' ? 'local' : 'in-cluster' } })
+    if (path === '/api/whats-new') {
+      const snapshot = { ...serverState }
+      if (holdNextRead) {
+        holdNextRead = false
+        return new Promise<Response>(resolve => { pendingRead = s => resolve(Response.json(s)) })
+      }
+      return Response.json(snapshot)
+    }
+    if (path === '/api/whats-new/seen' && init?.method === 'POST') {
+      seenPosts.push(JSON.parse(String(init.body)).version)
+      if (failSeenPosts > 0) {
+        failSeenPosts--
+        return Response.json({ error: 'failed to record the seen version' }, { status: 500 })
+      }
+      serverState = { ...serverState, seenVersion: seenPosts[seenPosts.length - 1] }
+      return new Response(null, { status: 204 })
+    }
+    throw new Error(`Unexpected request: ${input}`)
+  }))
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  RELEASE_NOTES.length = 0
+  client.clear()
+  document.body.replaceChildren()
+  vi.unstubAllGlobals()
+})
+
+async function render(path: string) {
+  await act(async () => {
+    root.render(
+      <QueryClientProvider client={client}>
+        <MemoryRouter initialEntries={[path]}>
+          <WhatsNew onNavigate={() => {}} />
+          <StatusProbe />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    )
+  })
+  await vi.waitFor(async () => {
+    await act(async () => { await new Promise(resolve => setTimeout(resolve, 0)) })
+    expect(status.current.available).toBe(true)
+  })
+}
+
+const dialog = () => document.querySelector('[role="dialog"][aria-modal="true"]')
+
+async function clickGotIt() {
+  const gotIt = Array.from(document.querySelectorAll('button')).find(b => b.textContent === 'Got it')!
+  await act(async () => { gotIt.click() })
+  await act(async () => { await new Promise(resolve => setTimeout(resolve, 0)) })
+}
+
+describe('WhatsNew', () => {
+  it('auto-opens on Home after an upgrade and records the running version on close', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'server', seenVersion: 'v1.14.1', priorInstall: true }
+    await render('/')
+    expect(dialog()?.textContent).toContain('v1.14.1')
+    expect(status.current.unread).toBe(true)
+    await clickGotIt()
+    expect(seenPosts).toEqual(['v1.15.2'])
+    expect(status.current.unread).toBe(false)
+  })
+
+  it('stays closed on a deep link, leaving the notes unread until opened on demand', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'server', seenVersion: 'v1.14.1', priorInstall: true }
+    await render('/resources/pods')
+    expect(dialog()).toBeNull()
+    expect(status.current.unread).toBe(true)
+    expect(seenPosts).toEqual([])
+    await act(async () => { openWhatsNew() })
+    expect(dialog()).not.toBeNull()
+    await clickGotIt()
+    expect(seenPosts).toEqual(['v1.15.2'])
+    expect(status.current.unread).toBe(false)
+  })
+
+  it('records a fresh install without opening', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'server', priorInstall: false }
+    await render('/')
+    expect(dialog()).toBeNull()
+    expect(seenPosts).toEqual(['v1.15.2'])
+    expect(status.current.unread).toBe(false)
+  })
+
+  it('keeps the in-cluster record in the browser, never on the server', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'browser' }
+    localStorage.setItem('radar-whats-new-seen', 'v1.14.1')
+    await render('/')
+    expect(dialog()).not.toBeNull()
+    await clickGotIt()
+    expect(localStorage.getItem('radar-whats-new-seen')).toBe('v1.15.2')
+    expect(seenPosts).toEqual([])
+  })
+
+  it('records nothing when previewing another release', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'server', seenVersion: 'v1.15.2', priorInstall: true }
+    RELEASE_NOTES.push({ ...RELEASE_NOTES[0], version: 'v1.14.0' })
+    serverState.seenVersion = 'v1.14.1'
+    await render('/resources/pods?whats-new=v1.14.0')
+    expect(dialog()?.textContent).toContain("What's new in Radar v1.14")
+    await clickGotIt()
+    expect(seenPosts).toEqual([])
+    expect(status.current.unread).toBe(true)
+  })
+
+  it('keeps the notes unread when recording fails, and retries on the next close', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'server', seenVersion: 'v1.14.1', priorInstall: true }
+    failSeenPosts = 1
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+    await render('/')
+    await clickGotIt()
+    expect(seenPosts).toEqual(['v1.15.2'])
+    expect(status.current.unread).toBe(true)
+    await act(async () => { openWhatsNew() })
+    await clickGotIt()
+    expect(seenPosts).toEqual(['v1.15.2', 'v1.15.2'])
+    expect(status.current.unread).toBe(false)
+  })
+
+  it('clears the dot when another tab acknowledges the notes', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'browser' }
+    localStorage.setItem('radar-whats-new-seen', 'v1.14.1')
+    await render('/resources/pods')
+    expect(status.current.unread).toBe(true)
+    localStorage.setItem('radar-whats-new-seen', 'v1.15.2')
+    await act(async () => { window.dispatchEvent(new Event('storage')) })
+    expect(status.current.unread).toBe(false)
+  })
+
+  it('picks up another tab\'s acknowledgment when this window regains focus', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'server', seenVersion: 'v1.14.1', priorInstall: true }
+    await render('/resources/pods')
+    expect(status.current.unread).toBe(true)
+    serverState = { ...serverState, seenVersion: 'v1.15.2' }
+    await act(async () => { focusManager.setFocused(false); focusManager.setFocused(true) })
+    await vi.waitFor(() => expect(status.current.unread).toBe(false))
+    focusManager.setFocused(undefined)
+  })
+
+  it('does not let a read that started before the acknowledgment undo it', async () => {
+    serverState = { currentVersion: 'v1.15.2', storage: 'server', seenVersion: 'v1.14.1', priorInstall: true }
+    await render('/')
+    const staleSnapshot = { ...serverState }
+    holdNextRead = true
+    await act(async () => { void client.refetchQueries({ queryKey: ['whats-new'] }) })
+    await vi.waitFor(() => expect(pendingRead).not.toBeNull())
+    await clickGotIt()
+    await vi.waitFor(() => expect(status.current.unread).toBe(false))
+    await act(async () => { pendingRead!(staleSnapshot) })
+    await act(async () => { await new Promise(resolve => setTimeout(resolve, 10)) })
+    expect(status.current.unread).toBe(false)
+  })
+
+  it('never records a development build', async () => {
+    serverState = { currentVersion: 'dev', storage: 'server', priorInstall: false }
+    RELEASE_NOTES.push({ ...RELEASE_NOTES[0], version: 'v0.0.0' })
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={client}>
+          <MemoryRouter initialEntries={['/']}><WhatsNew onNavigate={() => {}} /><StatusProbe /></MemoryRouter>
+        </QueryClientProvider>,
+      )
+    })
+    await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)) })
+    expect(dialog()).toBeNull()
+    expect(seenPosts).toEqual([])
+  })
+})