@skyhook-io/radar-app 1.14.5 → 1.15.0

package/src/components/useContextSwitchFlow.tsx

@@ -0,0 +1,147 @@
+import { useState, type ReactNode } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { pluralize } from '@skyhook-io/k8s-ui'
+import { useSwitchContext, fetchSessionCounts, type SessionCounts } from '../api/client'
+import { useContextSwitch } from '../context/ContextSwitchContext'
+import { useToast } from './ui/Toast'
+import { useDock } from './dock'
+import type { ContextInfo, SelectedResource } from '../types'
+import { parseContextForSwitcher } from '../utils/context-name'
+
+function shouldSuppressSwitchErrorToast(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : ''
+  return message.includes('cluster connection failed:')
+}
+
+interface PendingSwitch {
+  context: ContextInfo
+  openAfter?: SelectedResource
+}
+
+// The one way to switch contexts from the UI: the switching overlay, a
+// confirmation when port-forwards or terminals would be killed, and an error
+// toast when the switch fails. `openAfter` is opened once the new context is
+// live. Callers render `confirmDialog`.
+export function useContextSwitchFlow() {
+  const switchContext = useSwitchContext()
+  const { startSwitch, endSwitch, setOpenAfterSwitch } = useContextSwitch()
+  const { showError } = useToast()
+  const { tabs } = useDock()
+  const [pending, setPending] = useState<PendingSwitch | null>(null)
+  const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
+
+  const performSwitch = async ({ context, openAfter }: PendingSwitch) => {
+    const parsed = parseContextForSwitcher(context)
+    startSwitch({
+      raw: parsed.raw,
+      provider: parsed.provider,
+      account: parsed.account,
+      region: parsed.region,
+      clusterName: parsed.clusterName,
+    })
+    setOpenAfterSwitch(openAfter ? { context: context.name, resource: openAfter } : null)
+    try {
+      await switchContext.mutateAsync({ name: context.name })
+    } catch (error) {
+      console.error('Failed to switch context:', error)
+      setOpenAfterSwitch(null)
+      endSwitch()
+      // Backend may not transition to StateDisconnected on client-side errors
+      // (network, timeout) — without this toast the user gets no feedback.
+      if (!shouldSuppressSwitchErrorToast(error)) {
+        const message = error instanceof Error ? error.message : 'Unknown error'
+        showError('Failed to switch context', message)
+      }
+    }
+  }
+
+  const requestSwitch = async (context: ContextInfo, openAfter?: SelectedResource) => {
+    if (context.isCurrent || switchContext.isPending) return
+    // Active sessions (port forwards from API + terminal tabs from dock) get
+    // a confirmation prompt — switching contexts kills both.
+    try {
+      const counts = await fetchSessionCounts()
+      const terminalTabs = tabs.filter(t => t.type === 'terminal').length
+      const total = counts.portForwards + terminalTabs
+      if (total > 0) {
+        setSessionCounts({ ...counts, execSessions: terminalTabs, total })
+        setPending({ context, openAfter })
+        return
+      }
+    } catch (error) {
+      // Session-counts is best-effort; failing it shouldn't block the user.
+      // But warn — if there ARE active sessions we couldn't see, the switch
+      // will silently kill them.
+      console.error('Failed to check sessions:', error)
+      showError(
+        'Could not check active sessions',
+        'Switching anyway. Any open port-forwards or terminals will be terminated.',
+      )
+    }
+    performSwitch({ context, openAfter })
+  }
+
+  const confirm = () => {
+    if (pending) performSwitch(pending)
+    setPending(null)
+  }
+
+  const cancel = () => {
+    setPending(null)
+    setSessionCounts(null)
+  }
+
+  const confirmDialog: ReactNode = pending && sessionCounts ? (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50">
+      <div className="bg-theme-surface border border-theme-border rounded-lg shadow-xl max-w-md mx-4 overflow-hidden">
+        <div className="px-4 py-3 border-b border-theme-border flex items-center gap-2">
+          <AlertTriangle className="w-5 h-5 text-amber-400" />
+          <span className="font-medium text-theme-text-primary">Active Sessions</span>
+        </div>
+        <div className="px-4 py-4">
+          <p className="text-sm text-theme-text-secondary mb-3">
+            Switching contexts will terminate active sessions:
+          </p>
+          <ul className="text-sm text-theme-text-primary space-y-1 mb-4">
+            {sessionCounts.portForwards > 0 && (
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
+                {pluralize(sessionCounts.portForwards, 'port forward')}
+              </li>
+            )}
+            {sessionCounts.execSessions > 0 && (
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                {pluralize(sessionCounts.execSessions, 'terminal session')}
+              </li>
+            )}
+          </ul>
+          <p className="text-xs text-theme-text-tertiary">
+            Switch to: <span className="text-theme-text-secondary">{parseContextForSwitcher(pending.context).clusterName}</span>
+          </p>
+        </div>
+        <div className="px-4 py-3 border-t border-theme-border flex justify-end gap-2">
+          <button
+            onClick={cancel}
+            className="px-3 py-1.5 text-sm rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={confirm}
+            className="px-3 py-1.5 text-sm rounded-md bg-amber-500 hover:bg-amber-600 text-white transition-colors"
+          >
+            Switch Anyway
+          </button>
+        </div>
+      </div>
+    </div>
+  ) : null
+
+  return {
+    requestSwitch,
+    isPending: switchContext.isPending,
+    error: switchContext.isError ? switchContext.error : null,
+    confirmDialog,
+  }
+}

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

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+import { Megaphone } from 'lucide-react'
+import { nextSeenVersion, whatsNewToShow } from './WhatsNew'
+import { latestReleaseNotesFor, releaseLine, RELEASE_NOTES, releaseNotesFor, type ReleaseNotes } from './releaseNotes'
+import { compareVersions } from '../../utils/version'
+
+const entry = (version: string): ReleaseNotes => ({
+  version,
+  releaseUrl: 'https://github.com/skyhook-io/radar/releases',
+  highlights: [{ id: 'x', icon: Megaphone, title: 'X', description: 'Y' }],
+  improvements: [],
+})
+
+const catalog = [entry('v1.15.0'), entry('v2.0.0')]
+
+const show = (current: string, lastSeen: string | null, prior = true) =>
+  whatsNewToShow(current, lastSeen, prior, catalog)?.version ?? null
+
+describe('whatsNewToShow', () => {
+  it('shows when the notes are newer than the last version seen', () => {
+    expect(show('v2.0.0', 'v1.15.0')).toBe('v2.0.0')
+    expect(show('v2.0.0', 'v2.0.0')).toBeNull()
+    expect(show('2.0.0', 'v2.0.0')).toBeNull()
+  })
+
+  it('shows the newest earlier notes when the running release has none of its own', () => {
+    expect(show('v1.15.1', 'v1.14.1')).toBe('v1.15.0')
+    expect(show('v2.3.4', 'v1.15.2')).toBe('v2.0.0')
+  })
+
+  it('stays closed once a later release was seen, including after a downgrade', () => {
+    expect(show('v1.15.2', 'v1.15.1')).toBeNull()
+    expect(show('v1.15.0', 'v2.0.0')).toBeNull()
+  })
+
+  it('stays closed on a fresh install, and shows for installs that predate the seen record', () => {
+    expect(show('v2.0.0', null, false)).toBeNull()
+    expect(show('v2.0.0', null, true)).toBe('v2.0.0')
+  })
+
+  it('treats a record that is not a version as an install with nothing seen', () => {
+    expect(show('v2.0.0', 'vdev', false)).toBe('v2.0.0')
+  })
+
+  it('stays closed when no notes exist at or below the running version', () => {
+    expect(show('v1.14.9', 'v1.14.0')).toBeNull()
+    expect(show('dev', 'v1.14.1')).toBeNull()
+  })
+})
+
+describe('nextSeenVersion', () => {
+  it('only moves forward', () => {
+    expect(nextSeenVersion('v2.0.0', 'v1.15.0')).toBe('v2.0.0')
+    expect(nextSeenVersion('2.0.1', null)).toBe('v2.0.1')
+    expect(nextSeenVersion('1.15.0', 'v2.0.0')).toBeNull()
+    expect(nextSeenVersion('v2.0.0', 'v2.0.0')).toBeNull()
+  })
+
+  it('never records a development build, and replaces a record that is not a version', () => {
+    expect(nextSeenVersion('dev', null)).toBeNull()
+    expect(nextSeenVersion('dev', 'v2.0.0')).toBeNull()
+    expect(nextSeenVersion('v2.0.0', 'vdev')).toBe('v2.0.0')
+  })
+})
+
+describe('release notes lookup', () => {
+  it('matches an exact version with or without the v prefix', () => {
+    expect(releaseNotesFor('2.0.0', catalog)?.version).toBe('v2.0.0')
+    expect(releaseNotesFor(undefined, catalog)).toBeUndefined()
+  })
+
+  it('picks the newest entry at or below a version, whatever the catalog order', () => {
+    expect(latestReleaseNotesFor('v2.1.0', [entry('v2.0.0'), entry('v1.15.0')])?.version).toBe('v2.0.0')
+    expect(latestReleaseNotesFor('v1.99.0', catalog)?.version).toBe('v1.15.0')
+    expect(latestReleaseNotesFor('v1.0.0', catalog)).toBeUndefined()
+  })
+})
+
+describe('compareVersions', () => {
+  it('orders by semver, with a prerelease before its release', () => {
+    expect(compareVersions('v1.10.0', 'v1.9.9')).toBeGreaterThan(0)
+    expect(compareVersions('1.2.3', 'v1.2.3')).toBe(0)
+    expect(compareVersions('v1.2.3-rc.1', 'v1.2.3')).toBeLessThan(0)
+    expect(compareVersions('dev', 'v1.2.3')).toBeNull()
+  })
+})
+
+describe('the shipped catalog', () => {
+  it('has one well-formed entry per release', () => {
+    const versions = RELEASE_NOTES.map(n => n.version)
+    expect(new Set(versions).size).toBe(versions.length)
+    for (const notes of RELEASE_NOTES) {
+      expect(notes.version, notes.version).toMatch(/^v\d+\.\d+\.\d+$/)
+      expect(notes.highlights.length, `${notes.version} needs a lead highlight`).toBeGreaterThan(0)
+      expect(new Set(notes.highlights.map(h => h.id)).size, `${notes.version} highlight ids`).toBe(notes.highlights.length)
+      for (const h of notes.highlights) {
+        expect(!!h.path === !!h.cta, `${notes.version}/${h.id}: path and cta go together`).toBe(true)
+        if (h.path) expect(h.path, `${notes.version}/${h.id}`).toMatch(/^\//)
+      }
+      expect(notes.releaseUrl, notes.version).toMatch(/^https:\/\//)
+    }
+  })
+})
+
+describe('releaseLine', () => {
+  it('names the minor line, since its patches show the same notes', () => {
+    expect(releaseLine('v1.15.0')).toBe('v1.15')
+    expect(releaseLine('v2.0.0')).toBe('v2.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>
+  )
+}