@skyhook-io/radar-app 1.14.6 → 1.15.0

package/src/components/settings/PrivacySection.test.tsx

@@ -0,0 +1,84 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+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'
+
+let current: UsageDataStatus
+
+vi.mock('../../api/usage-data', async (orig) => ({
+  ...(await orig<typeof import('../../api/usage-data')>()),
+  useUsageData: () => ({ data: current, isLoading: false, error: null }),
+  useSetUsageData: () => ({ mutate: vi.fn(), isPending: false }),
+}))
+
+import { PrivacySection } from './PrivacySection'
+
+function make(patch: Partial<UsageDataStatus>): UsageDataStatus {
+  return exampleStatus({ preview: exampleReport({ views: { topology: 3 } }), ...patch })
+}
+
+function render(status: UsageDataStatus) {
+  current = status
+  return renderToString(
+    <QueryClientProvider client={new QueryClient()}>
+      <PrivacySection active />
+    </QueryClientProvider>,
+  )
+}
+
+describe('PrivacySection', () => {
+  it('shows an example report and promises nothing is sent while off', () => {
+    const html = render(make({}))
+    expect(html).toContain('See an example report')
+    expect(html).toContain('What isn')
+    expect(html).not.toContain('usage-report.json')
+    expect(html).toContain('aria-checked="false"')
+  })
+
+  it('shows the pending report and where it lives once on', () => {
+    const html = render(make({ state: 'on', source: 'user', nextReportAt: '2026-09-30T12:00:00Z' }))
+    expect(html).toContain('See the next report')
+    expect(html).toContain('usage-report.json')
+    expect(html).toContain('&quot;topology&quot;: 3')
+  })
+
+  it('names the control that fixed the choice', () => {
+    expect(render(make({ state: 'off', source: 'deployment', canChange: false }))).toContain('Radar Cloud manages')
+    const helm = make({ state: 'on', source: 'env', canChange: false, shared: true })
+    expect(render({ ...helm, preview: { ...helm.preview, mode: 'in-cluster' } })).toContain('Helm value usageReporting.enabled')
+    expect(render(make({ state: 'off', source: 'env', canChange: false }))).toContain('RADAR_USAGE_REPORTING=off')
+  })
+})
+
+describe('PrivacySection intro', () => {
+  it('does not claim data stays on this machine for an in-cluster install', () => {
+    const base = make({ state: 'off', source: 'deployment', canChange: false })
+    const html = render({ ...base, preview: { ...base.preview, mode: 'in-cluster' } })
+    expect(html).toContain('from inside it')
+    expect(html).not.toContain('from this machine')
+  })
+})
+
+describe('PrivacySection on a shared Radar', () => {
+  it('points at the Helm value while nothing set it', () => {
+    const base = make({ shared: true, canChange: false })
+    const html = render({ ...base, preview: { ...base.preview, mode: 'in-cluster' } })
+    expect(html).toContain('Applies to everyone using this Radar.')
+    expect(html).toContain('usageReporting.enabled')
+    expect(html).toContain('aria-checked="false"')
+  })
+
+  it('uses the environment variable outside a cluster', () => {
+    expect(render(make({ shared: true, canChange: false }))).toContain('RADAR_USAGE_REPORTING=on')
+  })
+})
+
+describe('PrivacySection storage and log wording', () => {
+  it('says logs, not sends, for development builds', () => {
+    const html = render(make({ state: 'on', source: 'user', developmentBuild: true, nextReportAt: '2026-09-25T12:00:00Z' }))
+    expect(html).toContain('logs')
+    expect(html).toContain('reports go to the log, never sent')
+    expect(render(make({ state: 'on', source: 'user', nextReportAt: '2026-09-25T12:00:00Z' }))).toContain('sends')
+  })
+})

package/src/components/settings/PrivacySection.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react'
+import { ExternalLink } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
+import { ConfigToggle, SubHeading } from './controls'
+import { isRecording, useSetUsageData, useUsageData, type UsageDataStatus } from '../../api/usage-data'
+
+const DOCS_URL = 'https://radarhq.io/docs/configuration/usage-stats'
+
+export function PrivacySection({ active }: { active: boolean }) {
+  const { data: status, isLoading, error, refetch } = useUsageData(active, { fresh: true })
+  const setUsageData = useSetUsageData()
+
+  // The pane stays mounted while hidden, so refetch each time it is revealed.
+  useEffect(() => {
+    if (active) void refetch()
+  }, [active, refetch])
+
+  if (isLoading) {
+    return <p className="text-sm text-theme-text-tertiary">Loading…</p>
+  }
+  if (error || !status) {
+    return <p className="text-sm text-theme-text-secondary">Couldn't load privacy settings.</p>
+  }
+
+  const recording = isRecording(status)
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-theme-text-secondary">
+        {status.preview.mode === 'in-cluster' || status.preview.mode === 'cloud'
+          ? 'Radar reads this cluster from inside it and keeps what it reads there.'
+          : 'Radar reads your cluster from this machine and keeps what it reads here.'}
+      </p>
+
+      <section className="space-y-3">
+        <SubHeading>Usage stats</SubHeading>
+        <ConfigToggle
+          label="Send anonymous usage stats"
+          description={<>Shows us which features get used, so we know what to build next.<br />Sent straight to us, with no third-party trackers.</>}
+          value={recording}
+          disabled={!status.canChange || setUsageData.isPending}
+          onChange={(v) => setUsageData.mutate(v)}
+        />
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs">
+          <dt className="text-theme-text-tertiary">What's sent</dt>
+          <dd className="text-theme-text-secondary">
+            The views you open, the actions and MCP tools you use, and each cluster's version,
+            platform, size range and known integrations.
+          </dd>
+          <dt className="text-theme-text-tertiary">What isn't</dt>
+          <dd className="text-theme-text-secondary">
+            Names, contents, logs, identifiers, timestamps, or the resources in your clusters.
+          </dd>
+        </dl>
+        <ManagedReason status={status} />
+        <SharedNote status={status} />
+        <ReportPreview status={status} />
+      </section>
+
+    </div>
+  )
+}
+
+function ManagedReason({ status }: { status: UsageDataStatus }) {
+  let text: string | null = null
+  switch (status.source) {
+    case 'env':
+      text = status.shared && status.preview.mode === 'in-cluster'
+        ? 'Set for everyone by the Helm value usageReporting.enabled.'
+        : `Set by RADAR_USAGE_REPORTING=${status.state}.`
+      break
+    case 'deployment':
+      text = 'Radar Cloud manages usage data for this installation.'
+      break
+  }
+  if (!text && status.developmentBuild && isRecording(status)) {
+    text = 'Development build: reports go to the log, never sent.'
+  }
+  return text ? <p className="text-xs text-theme-text-tertiary">{text}</p> : null
+}
+
+// A shared Radar is decided by its configuration; say where, while nothing set it.
+function SharedNote({ status }: { status: UsageDataStatus }) {
+  if (!status.shared || status.source !== 'default') return null
+  return (
+    <p className="text-xs text-theme-text-tertiary">
+      Applies to everyone using this Radar. Set it with{' '}
+      {status.preview.mode === 'in-cluster'
+        ? <>the Helm value <code className="inline-code">usageReporting.enabled</code></>
+        : <code className="inline-code">RADAR_USAGE_REPORTING=on</code>}.
+    </p>
+  )
+}
+
+function ReportPreview({ status }: { status: UsageDataStatus }) {
+  const recording = isRecording(status)
+  const [open, setOpen] = useState(false)
+  const disclosure = useDisclosure(open)
+  // Development builds write the report to the log instead of sending it.
+  const logsOnly = status.developmentBuild
+  const next = status.nextReportAt ? new Date(status.nextReportAt) : null
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          onClick={() => setOpen(o => !o)}
+          {...disclosure.buttonProps}
+          className="flex items-center gap-1 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
+        >
+          <CollapseChevron open={open} />
+          {recording ? 'See the next report' : 'See an example report'}
+          {recording && next && (
+            <span className="font-normal text-theme-text-tertiary">
+              {' '}· {logsOnly ? 'logs' : 'sends'} {next.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+            </span>
+          )}
+        </button>
+        <a
+          href={DOCS_URL}
+          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"
+        >
+          How it works <ExternalLink className="w-3 h-3" aria-hidden />
+        </a>
+      </div>
+      <Collapse open={open} id={disclosure.panelId}>
+        <pre className="max-h-80 overflow-auto rounded-md border border-theme-border bg-theme-elevated px-3 py-2 text-[11px] leading-relaxed font-mono text-theme-text-primary">
+          {JSON.stringify(status.preview, null, 2)}
+        </pre>
+      </Collapse>
+      {recording && status.canChange && (
+        <p className="text-xs text-theme-text-tertiary">
+          Waiting in <code className="inline-code">~/.radar/usage-report.json</code>. Turning this off deletes it.
+        </p>
+      )}
+    </div>
+  )
+}

package/src/components/settings/SettingsDialog.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import {
   Settings, X, RotateCcw, RotateCw, Loader2, Copy, Check, Pin, Shield, Lock, Plug,
   Plus, Terminal, Boxes, Activity, GitBranch, Sparkles, SlidersHorizontal, Zap,
-  LayoutDashboard, ChevronRight, ExternalLink, Download, AlertTriangle, Coins,
+  LayoutDashboard, ChevronRight, ExternalLink, Download, AlertTriangle, Coins, EyeOff,
   type LucideIcon,
 } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -21,6 +21,8 @@ import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Coll
 import { Tooltip } from '../ui/Tooltip'
 import { AISettingsSection, type AIDraft } from '../diagnose/AISettings'
 import { MyPermissionsContent } from './MyPermissionsDialog'
+import { PrivacySection } from './PrivacySection'
+import { ConfigToggle, SubHeading } from './controls'
 import { useDiagnose } from '../diagnose/DiagnoseContext'
 import { currencyOptionsForValue } from './currency-options'
 import { versionUpdateURL } from '../../utils/version'
@@ -449,6 +451,7 @@ export function SettingsDialog({
     { id: 'cost', label: 'Cost', icon: Coins, ownerOnly: true, dirty: costIntegrationDirty },
     { id: 'argocd', label: 'Argo CD', icon: GitBranch, ownerOnly: true, dirty: false },
     { id: 'ai', label: 'AI investigations', icon: Sparkles, ownerOnly: false, dirty: aiDirty },
+    { id: 'privacy', label: 'Privacy', icon: EyeOff, ownerOnly: false, dirty: false },
     { id: 'advanced', label: 'Advanced', icon: SlidersHorizontal, ownerOnly: true, dirty: advancedDirty },
   ]
 
@@ -510,6 +513,7 @@ export function SettingsDialog({
                 Radar{versionInfo?.currentVersion ? ` v${versionInfo.currentVersion}` : ''}
                 <span className="text-theme-text-disabled"> · by Skyhook</span>
               </span>
+
             </div>
           </div>
           <button
@@ -562,10 +566,10 @@ export function SettingsDialog({
               </div>
             )}
 
-            {!configData && !['overview', 'perms', 'ai'].includes(section) ? (
+            {!configData && !['overview', 'perms', 'ai', 'privacy'].includes(section) ? (
               <p className="text-sm text-theme-text-secondary">{loadError ? 'Configuration is unavailable. Close Settings and try again.' : 'Loading configuration…'}</p>
             ) : <>
-            {operatorManaged && section !== 'perms' && section !== 'ai' && <div className="mb-4"><OperatorManagedNotice /></div>}
+            {operatorManaged && section !== 'perms' && section !== 'ai' && section !== 'privacy' && <div className="mb-4"><OperatorManagedNotice /></div>}
             {/* Overview — status at a glance; the landing section */}
             <div className={clsx(section !== 'overview' && 'hidden')} role="tabpanel" inert={section !== 'overview' || undefined}>
               <div className="mb-1">
@@ -796,6 +800,12 @@ export function SettingsDialog({
               )}
             </div>
 
+            {/* Privacy: the usage-stats choice. Readable by everyone; only a local
+                install can change it here. */}
+            <SectionPane id="privacy" active={section} title="Privacy" caption="Applies immediately." live>
+              <PrivacySection active={section === 'privacy'} />
+            </SectionPane>
+
             {/* Advanced — MCP + Timeline merged */}
             <SectionPane
               id="advanced"
@@ -954,16 +964,6 @@ interface NavItemDef {
   dirty: boolean
 }
 
-// Light subheading separating the two field groups inside a merged pane
-// (Cluster/Server, MCP/Timeline).
-function SubHeading({ children }: { children: ReactNode }) {
-  return (
-    <h4 className="text-xs font-semibold uppercase tracking-wider text-theme-text-tertiary">
-      {children}
-    </h4>
-  )
-}
-
 function NavItem({
   item,
   active,
@@ -2798,45 +2798,6 @@ function ConfigNumberField({
   )
 }
 
-function ConfigToggle({
-  label,
-  description,
-  value,
-  onChange,
-}: {
-  label: string
-  description?: string
-  value: boolean
-  onChange: (value: boolean) => void
-}) {
-  return (
-    <label className="flex items-start justify-between gap-3 py-1 cursor-pointer">
-      <span className="min-w-0">
-        <span className="block text-sm text-theme-text-primary">{label}</span>
-        {description && (
-          <span className="mt-0.5 block text-xs text-theme-text-tertiary">{description}</span>
-        )}
-      </span>
-      <button
-        role="switch"
-        aria-checked={value}
-        onClick={() => onChange(!value)}
-        className={clsx(
-          'relative w-9 h-5 shrink-0 rounded-full transition-colors',
-          value ? 'bg-skyhook-600' : 'bg-theme-elevated border border-theme-border'
-        )}
-      >
-        <span
-          className={clsx(
-            'absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform shadow-sm',
-            value && 'translate-x-4'
-          )}
-        />
-      </button>
-    </label>
-  )
-}
-
 function EffectiveHint({
   current,
   effective,

package/src/components/settings/controls.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+
+export function SubHeading({ children }: { children: ReactNode }) {
+  return (
+    <h4 className="text-xs font-semibold uppercase tracking-wider text-theme-text-tertiary">
+      {children}
+    </h4>
+  )
+}
+
+export function ConfigToggle({
+  label,
+  description,
+  value,
+  disabled,
+  onChange,
+}: {
+  label: string
+  description?: ReactNode
+  value: boolean
+  disabled?: boolean
+  onChange: (value: boolean) => void
+}) {
+  return (
+    <label className={clsx('flex items-start justify-between gap-3 py-1', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
+      <span className="min-w-0">
+        <span className={clsx('block text-sm', disabled ? 'text-theme-text-secondary' : 'text-theme-text-primary')}>{label}</span>
+        {description && (
+          <span className="mt-0.5 block text-xs text-theme-text-tertiary">{description}</span>
+        )}
+      </span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={value}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => onChange(!value)}
+        className={clsx(
+          'relative w-9 h-5 shrink-0 rounded-full transition-colors',
+          value ? 'bg-skyhook-600' : 'bg-theme-elevated border border-theme-border',
+          disabled && 'opacity-50'
+        )}
+      >
+        <span
+          className={clsx(
+            'absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform shadow-sm',
+            value && 'translate-x-4'
+          )}
+        />
+      </button>
+    </label>
+  )
+}

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

@@ -7,6 +7,7 @@ export type SettingsSectionId =
   | 'argocd'
   | 'ai'
   | 'advanced'
+  | 'privacy'
 
 export function shouldOfferCostReview(
   costIntegrationDirty: boolean,

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: {
@@ -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('')
+  })
+})