@skyhook-io/radar-app 1.14.5 → 1.15.0

package/src/components/settings/settings-state.ts

@@ -7,6 +7,7 @@ export type SettingsSectionId =
   | 'argocd'
   | 'ai'
   | 'advanced'
+  | 'privacy'
 
 export function shouldOfferCostReview(
   costIntegrationDirty: boolean,
@@ -37,3 +38,21 @@ export function costSourceApplyLabel(
 ): string {
   return source === 'prometheus' ? 'Apply source' : 'Test & apply source'
 }
+
+export function prometheusHeadersFromRows(
+  rows: { key: string; value: string }[] | null,
+): Record<string, string> | undefined {
+  if (rows === null) return undefined
+  if (rows.length === 0) return {}
+  const entries: [string, string][] = []
+  const seen = new Set<string>()
+  for (const row of rows) {
+    const key = row.key.trim()
+    if (!key && !row.value) continue
+    if (!key || !row.value) throw new Error('Enter both a name and value for each header, or remove the incomplete row.')
+    if (seen.has(key.toLowerCase())) throw new Error(`Header "${key}" is entered more than once.`)
+    seen.add(key.toLowerCase())
+    entries.push([key, row.value])
+  }
+  return entries.length ? Object.fromEntries(entries) : undefined
+}

package/src/components/timeline/TimelineView.tsx

@@ -10,6 +10,7 @@ import {
   buildAppMembershipIndex,
   eventsForApplication,
   isPinnedLaneRef,
+  pinnedLaneRefMatches,
   LIVE_TICK_MS,
   SEVERITY_TEXT,
   type ScrubberRange,
@@ -50,6 +51,13 @@ function loadPinnedLanes(): PinnedLaneRef[] {
   }
 }
 
+export function togglePinnedLaneRefs(previous: PinnedLaneRef[], ref: PinnedLaneRef): PinnedLaneRef[] {
+  const pinned = previous.some((stored) => pinnedLaneRefMatches(stored, ref))
+  return pinned
+    ? previous.filter((stored) => !pinnedLaneRefMatches(stored, ref))
+    : [...previous, ref]
+}
+
 // Helper to check if topology has meaningfully changed
 function topologyContentEqual(a: Topology | undefined, b: Topology | undefined): boolean {
   if (a === b) return true
@@ -348,9 +356,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     }
   }, [pinnedLanes])
   const togglePin = useCallback((ref: PinnedLaneRef) => {
-    setPinnedLanes((prev) => (
-      prev.some((p) => p.id === ref.id) ? prev.filter((p) => p.id !== ref.id) : [...prev, ref]
-    ))
+    setPinnedLanes((prev) => togglePinnedLaneRefs(prev, ref))
   }, [])
   // pinnedOnly is meaningless with no pins: unpinning the last lane (or landing
   // on ?pinnedOnly=1 with no stored pins) would otherwise leave the filter stuck

package/src/components/timeline/TimelineView.urlparams.test.ts

@@ -1,16 +1,33 @@
 import { describe, expect, it } from 'vitest'
-import type { ActivityFilterKey, TimelineGrouping, TimelineSort } from '@skyhook-io/k8s-ui'
+import type { ActivityFilterKey, PinnedLaneRef, TimelineGrouping, TimelineSort } from '@skyhook-io/k8s-ui'
 import {
   parseTimeMode,
   resolveApplicationTimelineScope,
   writeTimelineParams,
   onlyHighFreqDiffer,
   timeModeEqual,
+  togglePinnedLaneRefs,
   type TimelineMode,
   type PersistedTimelineState,
   type TimelineViewMode,
 } from './TimelineView'
 
+describe('togglePinnedLaneRefs', () => {
+  it('unpins a migrated legacy CRD pin by its canonical live identity', () => {
+    const legacy: PinnedLaneRef = { id: 'Cluster/prod/main', kind: 'Cluster', namespace: 'prod', name: 'main' }
+    const live: PinnedLaneRef = { id: 'Cluster.postgresql.cnpg.io/prod/main', kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'prod', name: 'main' }
+
+    expect(togglePinnedLaneRefs([legacy], live)).toEqual([])
+  })
+
+  it('does not unpin a different explicit API group', () => {
+    const cnpg: PinnedLaneRef = { id: 'Cluster.postgresql.cnpg.io/prod/main', kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'prod', name: 'main' }
+    const capi: PinnedLaneRef = { id: 'Cluster.cluster.x-k8s.io/prod/main', kind: 'Cluster', group: 'cluster.x-k8s.io', namespace: 'prod', name: 'main' }
+
+    expect(togglePinnedLaneRefs([cnpg], capi)).toEqual([cnpg, capi])
+  })
+})
+
 // These mirror the module-private defaults writeTimelineParams omits at (and
 // parseTimeMode falls back to). Kept in sync deliberately: the round-trip tests
 // below fail loudly if a module default drifts from what is asserted here.

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

package/src/components/ui/UpdateNotification.tsx

@@ -16,6 +16,17 @@ import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 
 const DISMISSED_KEY = 'radar-update-dismissed'
 
+// 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() {
   const queryClient = useQueryClient()
   const { data: capabilities } = useCapabilities()
@@ -54,15 +65,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])
 

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: {
@@ -146,9 +149,6 @@ const VIEW_ENTRIES: {
   { view: "cost", label: "Cost", icon: Coins, shortcut: "g c" },
 ];
 
-// The static command-palette items (Views, Resource Kinds, Contexts,
-// Namespaces, Actions) — shared by the centered modal (embedded) and the
-// standalone omnibar so the two never drift.
 export function useCommandItems(cb: CommandItemCallbacks): CommandItem[] {
   const { data: namespacesData } = useNamespaces();
   const { data: contexts } = useContexts();
@@ -265,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",
@@ -288,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('')
+  })
+})

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

@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from 'react'
+import { BarChart3, Check } from 'lucide-react'
+import { useMarkUsagePromptShown, useSetUsageData, type UsageDataStatus } from '../../api/usage-data'
+
+// One wording for every place Radar asks, so the question can't drift.
+export function UsageDataBlurb({ onReadMore }: { onReadMore: () => void }) {
+  return (
+    <>
+      <p className="text-sm font-medium text-theme-text-primary">Help improve Radar</p>
+      <p className="mt-0.5 text-xs text-theme-text-secondary leading-relaxed">
+        Anonymous, with no third-party trackers.{' '}
+        <button
+          type="button"
+          onClick={onReadMore}
+          className="whitespace-nowrap text-theme-text-primary underline underline-offset-2 hover:text-accent-text"
+        >
+          See what's sent
+        </button>
+      </p>
+    </>
+  )
+}
+
+// Shown in place of the question once answered, so it doesn't vanish under
+// the cursor.
+export function UsageDataAnswered({ answer }: { answer: boolean }) {
+  return (
+    <>
+      <Check className="w-3.5 h-3.5 shrink-0 text-accent" aria-hidden />
+      {answer
+        ? 'Thanks. Change this any time in Settings > Privacy.'
+        : 'Nothing will be sent. Change this any time in Settings > Privacy.'}
+    </>
+  )
+}
+
+// The usage-data question, asked inside What's New when the server says to:
+// someone who closed it without answering is asked again only months later,
+// and a "no" is never asked again. A shared Radar, or one set by its
+// configuration, never asks.
+export function UsageDataAsk({ usageData, onReadMore }: {
+  usageData: UsageDataStatus | undefined
+  onReadMore: () => void
+}) {
+  const setUsageData = useSetUsageData()
+  const markUsagePromptShown = useMarkUsagePromptShown()
+  const [answer, setAnswer] = useState<boolean | null>(null)
+  // Latched: recording the showing stops the server offering the question,
+  // and the block must not vanish while the dialog is open.
+  const [offered, setOffered] = useState(!!usageData?.ask)
+  const recorded = useRef(false)
+
+  useEffect(() => {
+    if (usageData?.ask) setOffered(true)
+  }, [usageData?.ask])
+  useEffect(() => {
+    if (offered && !recorded.current) {
+      recorded.current = true
+      markUsagePromptShown()
+    }
+  }, [offered, markUsagePromptShown])
+
+  const undecided = offered && usageData?.state === 'undecided' && usageData.canChange
+  if (!undecided && answer === null) return null
+
+  if (answer !== null) {
+    return (
+      <div className="flex items-center gap-2 px-6 py-3 border-t border-theme-border text-xs text-theme-text-secondary">
+        <UsageDataAnswered answer={answer} />
+      </div>
+    )
+  }
+
+  const choose = (enabled: boolean) => setUsageData.mutate(enabled, { onSuccess: () => setAnswer(enabled) })
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center gap-3 px-6 py-3.5 border-t border-theme-border">
+      <div className="flex gap-3 min-w-0 flex-1">
+        <span className="flex items-center justify-center w-8 h-8 shrink-0 rounded-lg bg-accent-muted text-accent">
+          <BarChart3 className="w-4 h-4" aria-hidden />
+        </span>
+        <div className="min-w-0">
+          <UsageDataBlurb onReadMore={onReadMore} />
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0 pl-11 sm:pl-0">
+        <button
+          type="button"
+          disabled={setUsageData.isPending}
+          onClick={() => choose(true)}
+          className="px-3 py-1.5 text-xs font-medium rounded-lg border border-theme-border bg-theme-surface text-theme-text-primary hover:bg-theme-hover disabled:opacity-50"
+        >
+          Send usage stats
+        </button>
+        <button
+          type="button"
+          disabled={setUsageData.isPending}
+          onClick={() => choose(false)}
+          className="px-3 py-1.5 text-xs font-medium rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated disabled:opacity-50"
+        >
+          No thanks
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/usage-data/UsageDataPrompt.test.ts

@@ -0,0 +1,53 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { UsageDataStatus } from '../../api/usage-data'
+
+vi.mock('../../api/client', () => ({ useVersionCheck: () => ({ data: undefined }) }))
+vi.mock('../../api/usage-data', () => ({ useSetUsageData: () => ({ mutate: vi.fn(), isPending: false }), useMarkUsagePromptShown: () => vi.fn() }))
+
+import { cardStillAsking, shouldShowFirstRunPrompt, updateNoticeVisible } from './UsageDataPrompt'
+
+const status = (firstRunPrompt: boolean) => ({ firstRunPrompt } as UsageDataStatus)
+
+describe('shouldShowFirstRunPrompt', () => {
+  it('shows only when the server offers it, after the delay, with the corner free', () => {
+    expect(shouldShowFirstRunPrompt({ status: status(true), ready: true, updateNoticeShowing: false })).toBe(true)
+    expect(shouldShowFirstRunPrompt({ status: status(false), ready: true, updateNoticeShowing: false })).toBe(false)
+    expect(shouldShowFirstRunPrompt({ status: status(true), ready: false, updateNoticeShowing: false })).toBe(false)
+    expect(shouldShowFirstRunPrompt({ status: status(true), ready: true, updateNoticeShowing: true })).toBe(false)
+    expect(shouldShowFirstRunPrompt({ status: undefined, ready: true, updateNoticeShowing: false })).toBe(false)
+  })
+})
+
+describe('updateNoticeVisible', () => {
+  const store = new Map<string, string>()
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, v),
+  })
+  afterEach(() => store.clear())
+
+  it('is visible until that version is dismissed', () => {
+    expect(updateNoticeVisible('1.16.0', true)).toBe(true)
+    store.set('radar-update-dismissed', '1.16.0')
+    expect(updateNoticeVisible('1.16.0', true)).toBe(false)
+    expect(updateNoticeVisible('1.16.0', false)).toBe(false)
+  })
+})
+
+describe('cardStillAsking', () => {
+  const st = (state: UsageDataStatus['state'], canChange = true) => ({ state, canChange } as UsageDataStatus)
+
+  it('keeps asking while the choice is still open', () => {
+    expect(cardStillAsking(st('undecided'), null)).toBe(true)
+  })
+
+  it('stops asking once the choice was made elsewhere', () => {
+    expect(cardStillAsking(st('off'), null)).toBe(false)
+    expect(cardStillAsking(st('on'), null)).toBe(false)
+    expect(cardStillAsking(st('undecided', false), null)).toBe(false)
+  })
+
+  it('keeps its own answer on screen', () => {
+    expect(cardStillAsking(st('off'), false)).toBe(true)
+  })
+})

package/src/components/usage-data/UsageDataPrompt.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef, useState } from 'react'
+import { clsx } from 'clsx'
+import { BarChart3, X } from 'lucide-react'
+import { useMarkUsagePromptShown, useSetUsageData, type UsageDataStatus } from '../../api/usage-data'
+import { useVersionCheck } from '../../api/client'
+import { isUpdateDismissed } from '../ui/UpdateNotification'
+import { UsageDataAnswered, UsageDataBlurb } from './UsageDataAsk'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
+
+// Long enough that the first thing a new user sees is their cluster, not a
+// question about it.
+export const FIRST_RUN_PROMPT_DELAY_MS = 15_000
+const THANKS_MS = 4_000
+
+// The update notice uses the same corner. One nudge at a time.
+export function updateNoticeVisible(latest: string | undefined, updateAvailable: boolean | undefined): boolean {
+  return !!updateAvailable && !!latest && !isUpdateDismissed(latest)
+}
+
+export function shouldShowFirstRunPrompt(opts: {
+  status: UsageDataStatus | undefined
+  ready: boolean
+  updateNoticeShowing: boolean
+}): boolean {
+  return !!opts.status?.firstRunPrompt && opts.ready && !opts.updateNoticeShowing
+}
+
+// Once shown, the card stays until answered or closed, unless the choice was
+// made elsewhere (another tab, Settings) while it sat unanswered.
+export function cardStillAsking(status: UsageDataStatus | undefined, answer: boolean | null): boolean {
+  return answer !== null || (status?.state === 'undecided' && !!status?.canChange)
+}
+
+// Shown once per machine, after the first install. Upgrading installs are
+// asked in What's New instead. The server records the showing, so a reload,
+// another browser or the Desktop app on the same machine won't show it again.
+export function UsageDataPrompt({ status }: { status: UsageDataStatus | undefined }) {
+  const setUsageData = useSetUsageData()
+  const markUsagePromptShown = useMarkUsagePromptShown()
+  const { data: versionInfo } = useVersionCheck()
+  const [ready, setReady] = useState(false)
+  const [, setTick] = useState(0)
+  // Latched once shown: the server stops offering the prompt the moment it is
+  // recorded, and the card must not disappear because of that.
+  const [latched, setLatched] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
+  const [answer, setAnswer] = useState<boolean | null>(null)
+  const recorded = useRef(false)
+
+  const offered = !!status?.firstRunPrompt
+  useEffect(() => {
+    if (!offered) return
+    const delay = window.setTimeout(() => setReady(true), FIRST_RUN_PROMPT_DELAY_MS)
+    // Dismissing the update notice only touches localStorage, which does not
+    // notify this tab, so look again now and then.
+    const poll = window.setInterval(() => setTick((t) => t + 1), 5_000)
+    return () => {
+      window.clearTimeout(delay)
+      window.clearInterval(poll)
+    }
+  }, [offered])
+
+  const eligible = shouldShowFirstRunPrompt({
+    status,
+    ready,
+    updateNoticeShowing: updateNoticeVisible(versionInfo?.latestVersion, versionInfo?.updateAvailable),
+  })
+  useEffect(() => {
+    if (eligible && !recorded.current) {
+      recorded.current = true
+      setLatched(true)
+      markUsagePromptShown()
+    }
+  }, [eligible, markUsagePromptShown])
+
+  useEffect(() => {
+    if (answer === null) return
+    const t = window.setTimeout(() => setDismissed(true), THANKS_MS)
+    return () => window.clearTimeout(t)
+  }, [answer])
+
+  const show = latched && !dismissed && cardStillAsking(status, answer)
+  const { shouldRender, isOpen } = useAnimatedUnmount(show, overlayExitMs('menu'))
+  if (!shouldRender) return null
+
+  const readMore = () => {
+    setDismissed(true)
+    window.dispatchEvent(new CustomEvent('radar:open-settings', { detail: { section: 'privacy' } }))
+  }
+  const choose = (enabled: boolean) => setUsageData.mutate(enabled, { onSuccess: () => setAnswer(enabled) })
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Help improve Radar"
+      inert={!show || undefined}
+      className={clsx(
+        'fixed bottom-4 right-4 z-40 w-[21rem] max-w-[calc(100vw-2rem)] rounded-xl border border-theme-border bg-theme-surface shadow-theme-lg overflow-hidden 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',
+      )}
+      style={overlayTransitionStyle(isOpen, 'menu')}
+    >
+      {answer === null ? (
+        <div className="relative flex gap-3 p-3.5 pr-9">
+          <button
+            type="button"
+            onClick={() => setDismissed(true)}
+            aria-label="Close"
+            className="absolute top-2.5 right-2.5 p-1 rounded text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+          <span className="flex items-center justify-center w-8 h-8 shrink-0 rounded-lg bg-accent-muted text-accent">
+            <BarChart3 className="w-4 h-4" aria-hidden />
+          </span>
+          <div className="min-w-0">
+            <UsageDataBlurb onReadMore={readMore} />
+            <div className="flex items-center gap-2 mt-2.5">
+              <button
+                type="button"
+                disabled={setUsageData.isPending}
+                onClick={() => choose(true)}
+                className="btn-brand px-3 py-1 text-xs font-medium rounded-md whitespace-nowrap disabled:opacity-50"
+              >
+                Send usage stats
+              </button>
+              <button
+                type="button"
+                disabled={setUsageData.isPending}
+                onClick={() => choose(false)}
+                className="px-3 py-1 text-xs font-medium rounded-md text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated disabled:opacity-50"
+              >
+                No thanks
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 px-4 py-3 text-xs text-theme-text-secondary">
+          <UsageDataAnswered answer={answer} />
+        </div>
+      )}
+    </div>
+  )
+}