@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/components/traffic/trafficFilters.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, isExternalKind, isPolicyDropReason } from './trafficFilters'
+import type { AggregatedFlow, TrafficFlow } from '../../types'
+import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, isExternalKind, isPolicyDropReason, requestRateOf, errorRateOf, formatRate, displayVolume, mergeFlowVolume, dedupeHTTPPairs, coverageLabel, latencyWeightOf } from './trafficFilters'
 
 describe('matchesStatusRanges', () => {
   it('does not filter when nothing is selected', () => {
@@ -128,3 +129,155 @@ describe('isPolicyDropReason', () => {
     expect(isPolicyDropReason('', 0)).toBe(false)
   })
 })
+
+describe('edge rates', () => {
+  it('reads the unrounded rates, so a trickle of errors is not a 100% error rate', () => {
+    const flow = { requestRate: 0.3, requestCount: 1, errorRate: 0.01, errorCount: 1 }
+    expect(errorRateOf(flow) / requestRateOf(flow)).toBeCloseTo(0.0333, 3)
+  })
+
+  it('falls back to the rounded counts from a server that sends no rates', () => {
+    expect(requestRateOf({ requestCount: 7 })).toBe(7)
+    expect(errorRateOf({ errorCount: 2 })).toBe(2)
+    expect(requestRateOf({})).toBe(0)
+  })
+
+  it('shows the unrounded rate for a rate-based edge, and the connection count otherwise', () => {
+    expect(displayVolume({ requestRate: 0.3, connections: 1 }, true)).toBe(0.3)
+    expect(displayVolume({ connections: 4 }, true)).toBe(4)
+    expect(displayVolume({ requestRate: 0.3, connections: 12 }, false)).toBe(12)
+  })
+
+  it('formats a rate without rounding a trickle away', () => {
+    expect(formatRate(0)).toBe('0')
+    expect(formatRate(0.004)).toBe('<0.01')
+    expect(formatRate(0.3)).toBe('0.30')
+    expect(formatRate(2.46)).toBe('2.5')
+    expect(formatRate(12.4)).toBe('12')
+    expect(formatRate(1530)).toBe('1.5K')
+  })
+})
+
+describe('mergeFlowVolume', () => {
+  it('sums every figure the graph displays, not only connections and bytes', () => {
+    const base = { source: { name: 'a', namespace: '', kind: 'External' }, destination: { name: 'web', namespace: 'shop', kind: 'Pod' }, protocol: 'tcp', port: 80, lastSeen: '' }
+    const into = { ...base, flowCount: 1, bytesSent: 10, bytesRecv: 20, connections: 2, requestCount: 2, requestRate: 2, errorRate: 0.5, errorCount: 1 }
+    mergeFlowVolume(into, { ...base, flowCount: 1, bytesSent: 5, bytesRecv: 5, connections: 8, requestCount: 8, requestRate: 8 })
+    expect(into).toMatchObject({ connections: 10, bytesSent: 15, bytesRecv: 25, flowCount: 2, requestCount: 10, requestRate: 10, errorRate: 0.5, errorCount: 1 })
+  })
+})
+
+describe('mergeFlowVolume latency', () => {
+  const base: AggregatedFlow = { source: { name: 'a', namespace: 'shop', kind: 'Pod' }, destination: { name: 'web', namespace: 'shop', kind: 'Pod' }, protocol: 'tcp', port: 80, lastSeen: '', flowCount: 1, bytesSent: 0, bytesRecv: 0, connections: 1 }
+
+  it('weights average latency by request rate, whatever the order', () => {
+    const fast = { ...base, requestRate: 100, avgLatencyMs: 10 }
+    const slow = { ...base, requestRate: 1, avgLatencyMs: 1000 }
+    const a = { ...fast }
+    mergeFlowVolume(a, slow)
+    const b = { ...slow }
+    mergeFlowVolume(b, fast)
+    expect(a.avgLatencyMs).toBeCloseTo(19.8, 1)
+    expect(b.avgLatencyMs).toBeCloseTo(19.8, 1)
+  })
+
+  it('ignores traffic that had no latency measured, in any merge order', () => {
+    const a = { ...base, requestRate: 1, avgLatencyMs: 10 }
+    const b = { ...base, requestRate: 100 }
+    const c = { ...base, requestRate: 1, avgLatencyMs: 1000 }
+    for (const order of [[a, b, c], [c, b, a], [a, c, b], [b, a, c]]) {
+      const into = { ...order[0] }
+      for (const f of order.slice(1)) mergeFlowVolume(into, f)
+      expect(into.avgLatencyMs).toBeCloseTo(505, 6)
+    }
+  })
+
+  it('keeps the weight through a copy of a merged edge', () => {
+    const into = { ...base, requestRate: 1, avgLatencyMs: 1000 }
+    mergeFlowVolume(into, { ...base, requestRate: 100 })
+    const collapsed = { ...into, source: { name: 'Internet', namespace: '', kind: 'Internet' } }
+    mergeFlowVolume(collapsed, { ...base, requestRate: 1, avgLatencyMs: 10 })
+    expect(collapsed.avgLatencyMs).toBeCloseTo(505, 6)
+  })
+
+  it('averages edges without rates equally, however many are merged', () => {
+    const into = { ...base, avgLatencyMs: 10 }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 20 })
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 30 })
+    expect(into.avgLatencyMs).toBeCloseTo(20, 6)
+  })
+
+  it('takes the only latency there is', () => {
+    const into = { ...base }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 7 })
+    expect(into.avgLatencyMs).toBe(7)
+  })
+})
+
+describe('dedupeHTTPPairs', () => {
+  const ep = (name: string) => ({ name, namespace: 'shop', kind: 'Pod' })
+  const rec = (from: string, to: string, l7Type: string, port = 80): TrafficFlow => ({
+    source: ep(from), destination: ep(to), protocol: 'tcp', port, l7Protocol: 'HTTP', l7Type,
+    httpMethod: 'GET', httpPath: '/orders', bytesSent: 0, bytesRecv: 0, connections: 1, verdict: 'forwarded', lastSeen: '',
+  } as TrafficFlow)
+  const rows = (fs: TrafficFlow[]) => fs.map(f => `${f.source.name}>${f.destination.name}:${f.port}:${f.l7Type}`)
+
+  describe('from a server whose responses run caller → callee', () => {
+    it('pairs a response with its request', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST'), rec('a', 'b', 'RESPONSE')], true))).toEqual(['a>b:80:RESPONSE'])
+    })
+    it('keeps an unanswered call the other way on the same route', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'RESPONSE'), rec('b', 'a', 'REQUEST')], true))).toEqual(['a>b:80:RESPONSE', 'b>a:80:REQUEST'])
+    })
+    it('keeps an unanswered call on another port', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST'), rec('a', 'b', 'RESPONSE'), rec('a', 'b', 'REQUEST', 8080)], true)))
+        .toEqual(['a>b:80:RESPONSE', 'a>b:8080:REQUEST'])
+    })
+  })
+
+  describe('from an older server whose responses run server → client', () => {
+    it('pairs the reversed response with its request', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST'), rec('b', 'a', 'RESPONSE', 41732)], false))).toEqual(['b>a:41732:RESPONSE'])
+    })
+  })
+
+  it('keeps a request that got no response', () => {
+    expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST')], true))).toEqual(['a>b:80:REQUEST'])
+  })
+})
+
+describe('merged latency', () => {
+  const base: AggregatedFlow = { source: { name: 'a', namespace: 'shop', kind: 'Pod' }, destination: { name: 'web', namespace: 'shop', kind: 'Pod' }, protocol: 'tcp', port: 80, lastSeen: '', flowCount: 1, bytesSent: 0, bytesRecv: 0, connections: 1 }
+
+  it('drops percentiles once two edges with latency are merged', () => {
+    const into = { ...base, avgLatencyMs: 10, latencySamples: 90, latencyP50Ms: 9, latencyP95Ms: 30, latencyP99Ms: 40 }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 100, latencySamples: 10, latencyP50Ms: 90, latencyP95Ms: 300, latencyP99Ms: 400 })
+    expect(into.latencyP50Ms).toBeUndefined()
+    expect(into.latencyP95Ms).toBeUndefined()
+    expect(into.avgLatencyMs).toBeCloseTo(19, 6)
+  })
+
+  it('keeps the percentiles of the only edge that had latency', () => {
+    const into = { ...base }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 10, latencySamples: 5, latencyP95Ms: 30 })
+    expect(into.latencyP95Ms).toBe(30)
+    mergeFlowVolume(into, { ...base })
+    expect(into.latencyP95Ms).toBe(30)
+  })
+
+  it('weights a response-level edge by its samples', () => {
+    expect(latencyWeightOf({ ...base, avgLatencyMs: 5, latencySamples: 42 })).toBe(42)
+    expect(latencyWeightOf({ ...base, avgLatencyMs: 5, requestRate: 3, latencySamples: 42 })).toBe(3)
+    expect(latencyWeightOf({ ...base })).toBe(0)
+  })
+})
+
+describe('coverageLabel', () => {
+  it('says how far back the flows reach from when they were collected', () => {
+    expect(coverageLabel('2026-09-30T08:37:24Z', '2026-09-30T08:39:04Z')).toBe('last 1m 40s')
+    expect(coverageLabel('2026-09-30T08:38:59Z', '2026-09-30T08:39:04Z')).toBe('last 5s')
+  })
+  it('is empty when the window is fully covered', () => {
+    expect(coverageLabel(undefined, '2026-09-30T08:39:04Z')).toBeNull()
+  })
+})

package/src/components/traffic/trafficFilters.ts

@@ -1,3 +1,5 @@
+import type { AggregatedFlow, TrafficFlow } from '../../types'
+
 /**
  * Does a flow fall into one of the selected HTTP status ranges?
  *
@@ -51,6 +53,115 @@ export function isRateBasedSource(source: string | undefined): boolean {
   return source === 'istio' || source === 'beyla'
 }
 
+/**
+ * The request and 5xx rates of an edge from a rate-based source, unrounded.
+ *
+ * requestCount / errorCount carry the same figures rounded with a floor of one,
+ * which keeps a trickle visible but makes their ratio meaningless at low rates:
+ * 0.3 req/s with 0.01 err/s rounds to one of each, a 100% error rate. The counts
+ * are only read when the rates are absent — Radar Hub renders clusters whose
+ * Radar predates requestRate / errorRate, and for those they are all there is.
+ */
+export function requestRateOf(flow: Pick<AggregatedFlow, 'requestRate' | 'requestCount'>): number {
+  return flow.requestRate ?? flow.requestCount ?? 0
+}
+export function errorRateOf(flow: Pick<AggregatedFlow, 'errorRate' | 'errorCount'>): number {
+  return flow.errorRate ?? flow.errorCount ?? 0
+}
+
+/**
+ * The volume shown for an edge. For a rate-based source `connections` is its
+ * request rate rounded with a floor of one — the graph sizes, sorts and filters
+ * on that integer — so what is printed is the unrounded rate where the edge has
+ * one. An edge with no HTTP rate (plain TCP) keeps its connection figure.
+ */
+export function displayVolume(flow: Pick<AggregatedFlow, 'requestRate' | 'connections'>, isRateBased: boolean): number {
+  return isRateBased && flow.requestRate ? flow.requestRate : flow.connections
+}
+
+/**
+ * A merged edge records the weight behind its average latency on itself, so a
+ * later `{...flow}` copy — the Internet collapse, addon grouping — carries it.
+ * Client-only: the server never sends it.
+ */
+type LatencyWeighted = AggregatedFlow & { latencyWeight?: number }
+
+/**
+ * How much traffic an edge's average latency stands for: its request rate, or
+ * one for an edge with no rate, summed through merges. Zero when it has none.
+ * Used to average latencies so a slow trickle does not stand for a busy path.
+ */
+export function latencyWeightOf(flow: AggregatedFlow): number {
+  const merged = (flow as LatencyWeighted).latencyWeight
+  if (merged !== undefined) return merged
+  return flow.avgLatencyMs ? (flow.requestRate || flow.latencySamples || 1) : 0
+}
+
+/**
+ * Fold one aggregated flow's volume into another's, for the client-side merges
+ * that collapse several edges into one. Every figure displayVolume or the error
+ * rate reads has to be summed here: a field left out keeps only the first
+ * merged edge's value.
+ */
+export function mergeFlowVolume(into: AggregatedFlow, flow: AggregatedFlow): void {
+  // A metric-based source reports only an average latency per edge, so the
+  // merged edge's is theirs weighted by request rate. The weight behind a merged
+  // average is carried apart from the edge's request rate, which also counts
+  // traffic that had no latency measured: weighting by that would make the
+  // result depend on the order the edges arrived in.
+  const wInto = latencyWeightOf(into)
+  const wFlow = latencyWeightOf(flow)
+  if (wFlow > 0) {
+    if (wInto > 0) {
+      into.avgLatencyMs = (into.avgLatencyMs! * wInto + flow.avgLatencyMs! * wFlow) / (wInto + wFlow)
+      // Percentiles of two edges cannot be combined into a percentile of both,
+      // so a merged edge that had latency on both sides keeps only the average.
+      delete into.latencyP50Ms
+      delete into.latencyP95Ms
+      delete into.latencyP99Ms
+    } else {
+      into.avgLatencyMs = flow.avgLatencyMs
+      into.latencyP50Ms = flow.latencyP50Ms
+      into.latencyP95Ms = flow.latencyP95Ms
+      into.latencyP99Ms = flow.latencyP99Ms
+    }
+  }
+  const weighted: LatencyWeighted = into
+  weighted.latencyWeight = wInto + wFlow
+  into.connections += flow.connections
+  into.bytesSent += flow.bytesSent
+  into.bytesRecv += flow.bytesRecv
+  into.flowCount += flow.flowCount
+  if (flow.requestCount) into.requestCount = (into.requestCount || 0) + flow.requestCount
+  if (flow.errorCount) into.errorCount = (into.errorCount || 0) + flow.errorCount
+  if (flow.requestRate) into.requestRate = (into.requestRate || 0) + flow.requestRate
+  if (flow.errorRate) into.errorRate = (into.errorRate || 0) + flow.errorRate
+}
+
+/**
+ * How much of the requested window the flows cover, as a short label: "last
+ * 1m 40s". Null when the whole window is covered. Measured back from when the
+ * data was collected, not from now.
+ */
+export function coverageLabel(coveredSince: string | undefined, collectedAt: string | undefined): string | null {
+  if (!coveredSince || !collectedAt) return null
+  const seconds = Math.max(0, Math.round((Date.parse(collectedAt) - Date.parse(coveredSince)) / 1000))
+  if (!Number.isFinite(seconds)) return null
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `last ${m > 0 ? `${m}m ${s}s` : `${s}s`}`
+}
+
+/** A per-second rate, precise enough to tell a trickle from nothing: 0.30, 12, 1.2K. */
+export function formatRate(rate: number): string {
+  if (rate >= 1000) return `${(rate / 1000).toFixed(1)}K`
+  if (rate >= 10) return rate.toFixed(0)
+  if (rate >= 1) return rate.toFixed(1)
+  if (rate >= 0.01) return rate.toFixed(2)
+  if (rate > 0) return '<0.01'
+  return '0'
+}
+
 /**
  * Narrow a set of chosen filter values to the ones still offered.
  *
@@ -146,3 +257,33 @@ export function isPolicyDropReason(dropReasonDesc: string | undefined, deniedByC
   const code = (dropReasonDesc ?? '').toUpperCase()
   return code === 'POLICY_DENIED' || code === 'POLICY_DENY'
 }
+
+/**
+ * Drop each HTTP REQUEST record that has a matching RESPONSE: the response
+ * carries the status and latency, so it stands for the call. A request with no
+ * response stays, because a missing response is worth seeing.
+ *
+ * `callerOriented` is the server saying its responses run caller → callee on
+ * the server's port, like their requests, so they match on endpoints, route and
+ * port exactly. Without it the server is a Radar that predates that — Radar Hub
+ * renders clusters running such builds — whose responses run server → client on
+ * the client's ephemeral port, so they match reversed and without the port.
+ * The orientation is taken from the server, never inferred from which records
+ * happen to be in the window.
+ */
+export function dedupeHTTPPairs(flows: TrafficFlow[], callerOriented: boolean): TrafficFlow[] {
+  const isHTTP = (f: TrafficFlow, type: string) => f.l7Protocol === 'HTTP' && f.l7Type === type
+  const call = (from: string, to: string, f: TrafficFlow) =>
+    callerOriented
+      ? `${from}|${to}|${f.httpMethod}|${f.httpPath}|${f.port}`
+      : `${from}|${to}|${f.httpMethod}|${f.httpPath}`
+
+  const answered = new Set<string>()
+  for (const f of flows) {
+    if (!isHTTP(f, 'RESPONSE')) continue
+    answered.add(callerOriented
+      ? call(f.source.name, f.destination.name, f)
+      : call(f.destination.name, f.source.name, f))
+  }
+  return flows.filter(f => !(isHTTP(f, 'REQUEST') && answered.has(call(f.source.name, f.destination.name, f))))
+}

package/src/components/ui/ErrorBoundary.tsx

@@ -1,5 +1,6 @@
 import { Component, ReactNode } from 'react'
 import { AlertTriangle, RefreshCw } from 'lucide-react'
+import { recordUsageEvent } from '../../api/usage-data'
 
 interface Props {
   children: ReactNode
@@ -12,6 +13,8 @@ interface Props {
    * while nothing is wrong.
    */
   resetKey: string | number
+  /** Fixed name of the screen inside, counted in usage stats when it crashes. */
+  usageLabel?: string
 }
 
 interface State {
@@ -34,6 +37,8 @@ export class ErrorBoundary extends Component<Props, State> {
 
   componentDidCatch(error: Error, info: React.ErrorInfo) {
     console.error('[ErrorBoundary]', error, info.componentStack)
+    // Only which screen crashed is counted, never the message.
+    if (this.props.usageLabel) recordUsageEvent({ type: 'ui', name: `ui_error:${this.props.usageLabel}` })
   }
 
   handleReset = () => this.setState({ hasError: false, error: null })

package/src/components/ui/Omnibar.tsx

@@ -7,6 +7,7 @@ import { TRANSITION_BACKDROP, TRANSITION_MENU, TW_EASE_UI, overlayExitMs, overla
 import { SearchPillInput, type SearchModifier } from '@skyhook-io/k8s-ui'
 import { getResourceIcon } from '../../utils/resource-icons'
 import type { SearchHit, SearchMatchedField } from '../../api/client'
+import { recordUsageEvent } from '../../api/usage-data'
 import { bestScore, type CommandItem } from './command-items'
 import { SearchSyntaxHelp } from './SearchSyntaxHelp'
 
@@ -182,6 +183,21 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
 
   useImperativeHandle(ref, () => ({ focus: () => { inputRef.current?.focus(); inputRef.current?.select() } }), [])
 
+  // Usage data: one count per opening, one per opening that searched. Never
+  // the query itself.
+  const searchedThisOpen = useRef(false)
+  useEffect(() => {
+    if (!open) return
+    searchedThisOpen.current = false
+    recordUsageEvent({ type: 'ui', name: 'command_palette' })
+  }, [open])
+  useEffect(() => {
+    if (open && text.trim() && !searchedThisOpen.current) {
+      searchedThisOpen.current = true
+      recordUsageEvent({ type: 'ui', name: 'search' })
+    }
+  }, [open, text])
+
   // Hero autofocus parks the cursor in the field on mount (Home's primary
   // action) but must NOT pop the dropdown — landing on the page shouldn't dim
   // it behind a command palette. Suppress exactly the programmatic focus; a
@@ -527,7 +543,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
     >
       <SearchPillInput
         className={hero
-          ? `min-h-14 px-5 rounded-2xl bg-theme-surface border border-theme-border shadow-theme-sm transition-[color,background-color,border-color,box-shadow] duration-[140ms] ${TW_EASE_UI} focus-within:border-[var(--color-brand-500)] focus-within:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-brand-500)_15%,transparent)]`
+          ? `min-h-14 px-5 rounded-2xl bg-theme-surface border border-theme-border shadow-theme-sm transition-[color,background-color,border-color,box-shadow] duration-[140ms] ${TW_EASE_UI} focus-within:border-[var(--color-brand-500,var(--accent))] focus-within:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-brand-500,var(--accent))_15%,transparent)]`
           : `min-h-8 px-2.5 rounded-md bg-theme-elevated border border-transparent focus-within:border-theme-border focus-within:bg-theme-surface transition-[color,background-color,border-color] duration-[140ms] ${TW_EASE_UI}`}
         inputClassName={hero ? 'text-lg py-4' : undefined}
         text={text}

package/src/components/ui/UpdateNotification.tsx

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

package/src/components/ui/command-items.ts

@@ -15,6 +15,7 @@ import {
   AlertTriangle,
   Boxes,
   Server,
+  Megaphone,
 } from "lucide-react";
 import { useNamespaces, useContexts } from "../../api/client";
 import { CORE_RESOURCES, useAPIResources } from "../../api/apiResources";
@@ -124,6 +125,8 @@ export interface CommandItemCallbacks {
   onSetNamespaces: (ns: string[]) => void;
   onToggleTheme: () => void;
   onShowDiagnostics?: () => void;
+  // Present only when release notes exist for this version.
+  onShowWhatsNew?: () => void;
 }
 
 const VIEW_ENTRIES: {
@@ -262,6 +265,16 @@ export function useCommandItems(cb: CommandItemCallbacks): CommandItem[] {
       shortcut: "t",
       action: () => cb.onToggleTheme(),
     });
+    if (cb.onShowWhatsNew) {
+      result.push({
+        id: "action-whats-new",
+        label: "What's new",
+        category: "Actions",
+        icon: Megaphone,
+        action: () => cb.onShowWhatsNew?.(),
+        searchTerms: ["release notes", "changelog", "updates", "new features"],
+      });
+    }
     if (cb.onShowDiagnostics) {
       result.push({
         id: "action-diagnostics",
@@ -285,5 +298,6 @@ export function useCommandItems(cb: CommandItemCallbacks): CommandItem[] {
     cb.onSetNamespaces,
     cb.onToggleTheme,
     cb.onShowDiagnostics,
+    cb.onShowWhatsNew,
   ]);
 }

package/src/components/usage-data/UsageDataAsk.test.tsx

@@ -0,0 +1,41 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import type { UsageDataStatus } from '../../api/usage-data'
+import { exampleReport, exampleStatus } from '../../api/usage-data.fixtures'
+
+vi.mock('../../api/usage-data', () => ({
+  useSetUsageData: () => ({ mutate: vi.fn(), isPending: false }),
+  useMarkUsagePromptShown: () => vi.fn(),
+}))
+
+import { UsageDataAsk } from './UsageDataAsk'
+
+function status(patch: Partial<UsageDataStatus>): UsageDataStatus {
+  return exampleStatus({ preview: exampleReport({ views: {} }), ...patch })
+}
+
+const render = (s: UsageDataStatus | undefined) =>
+  renderToString(<UsageDataAsk usageData={s} onReadMore={() => {}} />)
+
+describe('UsageDataAsk', () => {
+  it('asks an undecided user who can decide', () => {
+    const html = render(status({}))
+    expect(html).toContain('Help improve Radar')
+    expect(html).toContain('Anonymous, with no third-party trackers.')
+    expect(html).toContain('See what')
+    expect(html).toContain('Send usage stats')
+  })
+
+  it('stays out of the way once answered or where the viewer cannot decide', () => {
+    expect(render(status({ state: 'on', source: 'user' }))).toBe('')
+    expect(render(status({ state: 'off', source: 'user' }))).toBe('')
+    expect(render(status({ state: 'off', source: 'deployment', canChange: false }))).toBe('')
+    expect(render(status({ state: 'off', source: 'env', canChange: false }))).toBe('')
+    expect(render(status({ shared: true, canChange: false, ask: false }))).toBe('')
+    expect(render(undefined)).toBe('')
+  })
+
+  it('waits when the server says it asked recently', () => {
+    expect(render(status({ ask: false }))).toBe('')
+  })
+})