@skyhook-io/radar-app 1.14.6 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.14.6",
+  "version": "1.15.0",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -49,6 +49,9 @@ import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/Capabil
 import { UserMenu } from './components/UserMenu'
 import { ErrorBoundary } from './components/ui/ErrorBoundary'
 import { UpdateNotification } from './components/ui/UpdateNotification'
+import { openWhatsNew, useWhatsNewStatus, WhatsNew } from './components/whats-new/WhatsNew'
+import { useUsageData, useUsageRecording } from './api/usage-data'
+import { UsageDataPrompt } from './components/usage-data/UsageDataPrompt'
 import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
@@ -67,7 +70,7 @@ import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
 import { SettingsDialog, type SettingsSectionId } from './components/settings/SettingsDialog'
 import type { APIResource, TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
-import { kindToPluralWithGroup, pluralToKind, openExternal, apiVersionToGroup, relatedResourcePath, searchHitToSelectedResource } from './utils/navigation'
+import { kindToPluralWithGroup, pluralToKind, openExternal, apiVersionToGroup, relatedResourcePath, searchHitToSelectedResource, withCrossViewParams } from './utils/navigation'
 import { findSelectedTopologyNode } from './utils/topology-selection'
 import { type OmnibarHandle } from './components/ui/Omnibar'
 import { RadarOmnibar } from './components/ui/RadarOmnibar'
@@ -144,6 +147,28 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   return 'home'
 }
 
+// The usage-data name for the current screen: a resource list names its
+// kind's plural ("resources:deployments"); the server keeps built-in kinds
+// only, so a custom resource's name never leaves.
+function usageView(pathname: string, view: ExtendedMainView, upgrade: boolean): string {
+  if (upgrade) return 'upgrade'
+  if (view === 'resources') {
+    const plural = pathname.match(/^\/resources\/([^/]+)/)?.[1]
+    if (plural) return `resources:${plural.toLowerCase()}`
+  }
+  return view
+}
+
+// The screen a crash is counted under. Fixed names, because release builds
+// shorten component names and the component stack can't say which screen.
+const CRASH_LABELS: Record<ExtendedMainView, string> = {
+  home: 'Home', topology: 'Topology', resources: 'Resources', timeline: 'Timeline',
+  issues: 'Issues', helm: 'Helm', helmCompare: 'HelmCompare', traffic: 'Traffic',
+  cost: 'Cost', capacity: 'Capacity', checks: 'Checks', gitops: 'GitOps',
+  applications: 'Applications', workload: 'Workload', compare: 'Compare',
+  investigations: 'Investigations',
+}
+
 // The namespace scope filter is meaningful only on namespaced surfaces. On
 // cluster-scoped views it does nothing, so we disable it with an explanation
 // rather than leaving a dead control that silently ignores the pick:
@@ -417,6 +442,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const mainView = getViewFromPath(location.pathname)
   const upgradeReadinessRoute = location.pathname.startsWith('/checks/upgrade')
 
+  // Opt-in usage data. Embedded hosts own their own consent, so Radar never asks there.
+  const usageData = useUsageData(!navCustomization.embedded)
+  // A status cached by another screen must not start recording inside a host.
+  useUsageRecording(usageView(location.pathname, mainView, upgradeReadinessRoute), navCustomization.embedded ? undefined : usageData.data)
+
   // Initialize the kind→plural discovery map app-wide (not just on ResourcesView
   // mount) so the omnibar can open a CRD hit with an irregular plural from any
   // view — kindToPlural would otherwise English-guess the route before a
@@ -492,6 +522,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     navigate({ pathname: path, search: newParams.toString() })
   }, [location.search, navigate, takeover, goHost])
 
+  const whatsNewStatus = useWhatsNewStatus()
+
+  const navigateToPath = useCallback((path: string) => {
+    navigate(withCrossViewParams(path, location.search))
+  }, [location.search, navigate])
+
   // The standalone rail expresses intent to leave the full-width investigation
   // workspace. Close it before routing so the destination is immediately visible;
   // docked investigations stay open across views as a persistent side panel.
@@ -777,13 +813,14 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       metadata: { namespace: resource.namespace ?? '', name: resource.name },
     })
     if (gitOpsPath) {
-      const destination = new URL(gitOpsPath, window.location.origin)
-      if (investigationRunID) destination.searchParams.set('ai-run', investigationRunID)
+      const destination = new URL(withCrossViewParams(gitOpsPath, searchParams.toString()), window.location.origin)
+      if (investigationRunID === null) destination.searchParams.delete('ai-run')
+      else if (investigationRunID) destination.searchParams.set('ai-run', investigationRunID)
       navigate(`${destination.pathname}${destination.search}${destination.hash}`)
       return
     }
     navigateToResourceList(resource, investigationRunID)
-  }, [navigate, navigateToHelmRelease, navigateToResourceList])
+  }, [navigate, navigateToHelmRelease, navigateToResourceList, searchParams])
 
   // Collapse the over-list fullscreen back to the drawer = drop ?full=1 (and the
   // resource-scoped ?tab) in place. The button means "collapse THIS to a drawer"
@@ -1732,6 +1769,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           showPinToggle={!railForcedSlim}
           onOpenSettings={() => openSettings()}
           accountSlot={<UserMenu variant="rail" pinned={navRailEffectivePinned} />}
+          whatsNew={whatsNewStatus.available ? { unread: whatsNewStatus.unread, onOpen: openWhatsNew } : undefined}
         />
       )}
       {/* `relative` makes this column the containing block for the absolute
@@ -1833,6 +1871,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
             onSetNamespaces={(ns) => { setNamespaces(ns); setActiveNamespace.mutate({ namespaces: ns }) }}
             onToggleTheme={toggleTheme}
             onShowDiagnostics={() => setShowDiagnostics(true)}
+            onShowWhatsNew={whatsNewStatus.available ? openWhatsNew : undefined}
             onOpenResource={(hit) => navigateToResourceList(searchHitToSelectedResource(hit))}
           />
         </div>
@@ -1977,7 +2016,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         {/* Search included, not just the path: selection inside a view rides in
             the query (?resource=, ?release=), so a path-only key would still
             strand a crash on the view that produced it. */}
-        <ErrorBoundary resetKey={location.pathname + location.search}>
+        <ErrorBoundary
+          resetKey={location.pathname + location.search}
+          usageLabel={upgradeReadinessRoute ? 'Upgrade' : CRASH_LABELS[mainView]}
+        >
         {/* Initial sync in progress: views that need the full cluster dataset
             show per-kind progress instead; resource views work as kinds sync. */}
         {viewsSyncGated && connection.syncStatus && (
@@ -1994,7 +2036,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
             fallbackClusterLoadState={showHomeClusterLoadFallback ? clusterLoadState : undefined}
             onNavigateToView={setMainView}
             onNavigateToHelmRelease={navCustomization.embedded ? undefined : navigateToHelmRelease}
-            onNavigateToManagerPath={navCustomization.embedded || takeover.gitops ? undefined : (path) => navigate(path)}
+            onNavigateToManagerPath={navCustomization.embedded || takeover.gitops ? undefined : navigateToPath}
+            onShowWhatsNew={!navCustomization.embedded && whatsNewStatus.available ? openWhatsNew : undefined}
             // Upgrade impact lives under /checks, which a Cloud host takes
             // over wholesale — its fleet pages have no upgrade sub-route, so
             // the version line stays plain text there.
@@ -2435,6 +2478,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
       {/* Update notification — hidden in embedded mode (OSS download nudge). */}
       {!navCustomization.embedded && <UpdateNotification />}
+      {!navCustomization.embedded && <WhatsNew onNavigate={navigateToPath} usageData={usageData.data} />}
+      {!navCustomization.embedded && <UsageDataPrompt status={usageData.data} />}
 
       {/* Bottom Dock for Terminal/Logs */}
       <BottomDock />

package/src/api/client.admission.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from 'vitest'
+import { useQuery } from '@tanstack/react-query'
+import { ApiError, useKueueAdmission as admissionQuery } from './client'
+
+vi.mock('@tanstack/react-query', async (original) => ({ ...await original<typeof import('@tanstack/react-query')>(), useQuery: vi.fn(() => ({})) }))
+
+describe('Kueue admission polling', () => {
+  function options(settings?: Parameters<typeof admissionQuery>[3]) {
+    admissionQuery('ml', 'training', 'current', settings)
+    return vi.mocked(useQuery).mock.calls.at(-1)![0]
+  }
+  function interval(settings: Parameters<typeof admissionQuery>[3], state: any = {}) {
+    const poll = options(settings).refetchInterval as (query: any) => number | false
+    return poll({ state })
+  }
+  it('separates Job and JobSet identities and recreated roots', () => {
+    expect(options({ isJob: true }).queryKey).toEqual(['kueue-admission', 'batch', 'jobs', 'ml', 'training', 'current'])
+    expect(options({ isRayJob: true }).queryKey).toEqual(['kueue-admission', 'ray.io', 'rayjobs', 'ml', 'training', 'current'])
+    expect(options().queryKey).toEqual(['kueue-admission', 'jobset.x-k8s.io', 'jobsets', 'ml', 'training', 'current'])
+  })
+  it('polls quiet and terminal Jobs slowly, active admission quickly', () => {
+    expect(interval({ isJob: true })).toBe(30000)
+    expect(interval({ isJob: true, hinted: true })).toBe(5000)
+    expect(interval({ isJob: true }, { data: { workloads: [{}] } })).toBe(5000)
+    expect(interval({ isJob: true, hinted: true, terminal: true })).toBe(30000)
+    expect(interval(undefined)).toBe(5000)
+  })
+  it('stops on confirmed absence or denied requests, not transient outages or old absence', () => {
+    expect(interval({ isJob: true }, { data: { uid: 'current', installed: false } })).toBe(false)
+    expect(interval({ isJob: true, hinted: true }, { data: { uid: 'old', installed: false } })).toBe(5000)
+    expect(interval({ isJob: true }, { error: new ApiError('denied', 403) })).toBe(false)
+    expect(interval({ isJob: true, hinted: true }, { error: new ApiError('warming', 503) })).toBe(5000)
+  })
+})

package/src/api/client.ts

@@ -1604,6 +1604,37 @@ export function useClusterInfo() {
 export type InstallMethod =
   "homebrew" | "krew" | "scoop" | "direct" | "desktop";
 
+export interface WhatsNewState {
+  currentVersion: string;
+  // "server": seenVersion / priorInstall are authoritative (local installs).
+  // "browser": the client keeps its own record (in-cluster).
+  storage: "server" | "browser";
+  seenVersion?: string;
+  priorInstall?: boolean;
+}
+
+export function useWhatsNewState(enabled: boolean) {
+  return useQuery<WhatsNewState>({
+    queryKey: ["whats-new", getApiBase()],
+    queryFn: () => fetchJSON("/whats-new"),
+    enabled,
+    // Refetched on focus (the app default is off), so another tab's
+    // acknowledgment clears this tab's dot.
+    staleTime: 0,
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+}
+
+export async function markWhatsNewSeen(version: string): Promise<void> {
+  const response = await apiFetch(`${getApiBase()}/whats-new/seen`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ version }),
+  });
+  if (!response.ok) throw new ApiError(`HTTP ${response.status}`, response.status);
+}
+
 export interface VersionInfo {
   currentVersion: string;
   latestVersion?: string;
@@ -6905,15 +6936,18 @@ export function useWorkloadRuns(
   });
 }
 
-export function useKueueAdmission(namespace: string, name: string, uid: string | undefined) {
+export function useKueueAdmission(namespace: string, name: string, uid: string | undefined, options?: { isJob?: boolean; isRayJob?: boolean; hinted?: boolean; terminal?: boolean }) {
+  const group = options?.isRayJob ? 'ray.io' : options?.isJob ? 'batch' : 'jobset.x-k8s.io'
+  const kind = options?.isRayJob ? 'rayjobs' : options?.isJob ? 'jobs' : 'jobsets'
   return useQuery<KueueAdmissionResponse>({
-    queryKey: ['kueue-admission', 'jobset.x-k8s.io', namespace, name, uid],
-    queryFn: () => fetchJSON(`/kueue/admission/jobsets/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}?group=jobset.x-k8s.io`),
+    queryKey: ['kueue-admission', group, kind, namespace, name, uid],
+    queryFn: () => fetchJSON(`/kueue/admission/${kind}/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}?group=${group}`),
     enabled: Boolean(namespace && name && uid),
     staleTime: 5000,
     refetchInterval: (query) => {
       if (query.state.error instanceof ApiError && query.state.error.status < 500) return false
       if (query.state.data?.uid === uid && query.state.data?.installed === false) return false
+      if ((options?.isJob || options?.isRayJob) && (options.terminal || (!options.hinted && !query.state.data?.workloads.length))) return 30000
       return 5000
     },
     retry: (count, error) => !(error instanceof ApiError && error.status < 500) && count < 2,

package/src/api/usage-data.fixtures.ts

@@ -0,0 +1,33 @@
+import type { UsageDataStatus, UsageReport } from './usage-data'
+
+// Test-only: a report and status shaped like the server's.
+export function exampleReport(patch: Partial<UsageReport> = {}): UsageReport {
+  return {
+    schema: 3,
+    version: '1.15.0', os: 'darwin', arch: 'arm64', installMethod: 'homebrew', mode: 'local',
+    periodStart: '2026-09-23', periodEnd: '2026-09-24',
+    setup: {
+      authMode: 'none', timelineStorage: 'memory', mcpEnabled: true, prometheus: 'none',
+      costSource: 'auto', browsers: ['chrome'],
+    },
+    engagement: { sessions: 2, activeMinutes: '20-49' },
+    views: {}, actions: {}, mcpTools: {}, uiEvents: {}, errors: {},
+    clusters: {
+      contexts: '5-9', used: 1,
+      shapes: [{ kubernetesVersion: '1.33', platform: 'eks', nodes: '10-19', integrations: ['argo-cd'] }],
+    },
+    ...patch,
+  }
+}
+
+export function exampleStatus(patch: Partial<UsageDataStatus> = {}): UsageDataStatus {
+  return {
+    state: 'undecided', source: 'default', canChange: true,
+    developmentBuild: false,
+    preview: exampleReport(),
+    firstRunPrompt: false,
+    ask: true,
+    shared: false,
+    ...patch,
+  }
+}

package/src/api/usage-data.ts

@@ -0,0 +1,165 @@
+import { useCallback, useEffect } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { fetchJSON } from './client'
+import { apiUrl, getApiBase, getAuthHeaders, getCredentialsMode } from './config'
+
+export type UsageDataState = 'undecided' | 'on' | 'off'
+export type UsageDataSource = 'default' | 'user' | 'env' | 'deployment'
+
+export interface ClusterShape {
+  kubernetesVersion: string
+  platform: string
+  nodes: string
+  integrations: string[]
+}
+
+export interface UsageReport {
+  schema: number
+  version: string
+  os: string
+  arch: string
+  installMethod: string
+  mode: string
+  periodStart: string
+  periodEnd: string
+  setup: {
+    authMode: string
+    timelineStorage: string
+    mcpEnabled: boolean
+    prometheus: string
+    costSource: string
+    browsers: string[]
+  }
+  engagement: { sessions: number; activeMinutes: string }
+  views: Record<string, number>
+  actions: Record<string, number>
+  mcpTools: Record<string, number>
+  uiEvents: Record<string, number>
+  errors: Record<string, number>
+  clusters: { contexts: string; used: number; shapes: ClusterShape[] }
+}
+
+export interface UsageDataStatus {
+  state: UsageDataState
+  source: UsageDataSource
+  canChange: boolean
+  developmentBuild: boolean
+  nextReportAt?: string
+  preview: UsageReport
+  firstRunPrompt: boolean
+  // What's New may ask: never asked, or asked and left unanswered long enough ago.
+  ask: boolean
+  // Several people use this Radar, so its configuration decides and nobody is asked.
+  shared: boolean
+}
+
+const usageDataKey = (apiBase: string) => ['usage-data', apiBase]
+
+// `fresh` is for the report preview: it must match what would be sent now, so
+// it refetches every time it is shown instead of reusing the app shell's copy.
+export function useUsageData(enabled = true, { fresh = false }: { fresh?: boolean } = {}) {
+  const apiBase = getApiBase()
+  return useQuery<UsageDataStatus>({
+    queryKey: usageDataKey(apiBase),
+    queryFn: () => fetchJSON<UsageDataStatus>('/usage-data'),
+    enabled,
+    staleTime: fresh ? 0 : 60_000,
+    refetchOnMount: fresh ? 'always' : true,
+    retry: false,
+  })
+}
+
+export function useSetUsageData() {
+  const queryClient = useQueryClient()
+  const apiBase = getApiBase()
+  return useMutation({
+    mutationFn: (enabled: boolean) =>
+      fetchJSON<UsageDataStatus>('/usage-data', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled }),
+      }),
+    meta: { errorMessage: 'Failed to save usage data choice' },
+    // A status read still in flight predates the choice; it must not
+    // replace the answer the server just confirmed.
+    onSuccess: async (status) => {
+      const queryKey = usageDataKey(apiBase)
+      await queryClient.cancelQueries({ queryKey })
+      queryClient.setQueryData(queryKey, status)
+    },
+  })
+}
+
+// Records that the question was shown, answered or not, and stops this tab
+// offering it again from its cached status. Fire and forget: a failure only
+// means it might show once more.
+export function useMarkUsagePromptShown() {
+  const queryClient = useQueryClient()
+  const apiBase = getApiBase()
+  return useCallback(() => {
+    const queryKey = usageDataKey(apiBase)
+    void queryClient.cancelQueries({ queryKey })
+    queryClient.setQueryData<UsageDataStatus>(queryKey, (prev) => prev && { ...prev, firstRunPrompt: false, ask: false })
+    void fetch(apiUrl('/usage-data/prompt-shown'), {
+      method: 'POST',
+      headers: getAuthHeaders(),
+      credentials: getCredentialsMode(),
+    }).catch(() => {})
+  }, [queryClient, apiBase])
+}
+
+export function isRecording(status: UsageDataStatus | undefined): boolean {
+  return status?.state === 'on'
+}
+
+// Set from the status query so code without hook access (error boundaries,
+// event handlers) can skip the request entirely when usage data is off.
+let recording = false
+
+function setUsageRecording(on: boolean) {
+  recording = on
+}
+
+type UsageEvent =
+  | { type: 'view'; name: string }
+  | { type: 'ui'; name: string }
+  | { type: 'session' }
+  | { type: 'active'; minutes: number }
+
+// Fire and forget; the server drops anything outside its allow-list.
+export function recordUsageEvent(event: UsageEvent): void {
+  if (!recording) return
+  void fetch(apiUrl('/usage-data/event'), {
+    method: 'POST',
+    headers: { ...getAuthHeaders(), 'Content-Type': 'application/json' },
+    credentials: getCredentialsMode(),
+    body: JSON.stringify(event),
+    keepalive: true,
+  }).catch(() => {})
+}
+
+const ACTIVE_TICK_MINUTES = 5
+
+// Counts views, one session per page load, and visible time in five-minute
+// ticks. Nothing is sent unless usage data is on.
+export function useUsageRecording(view: string, status: UsageDataStatus | undefined) {
+  const on = isRecording(status)
+  useEffect(() => {
+    setUsageRecording(on)
+  }, [on])
+
+  useEffect(() => {
+    if (on) recordUsageEvent({ type: 'view', name: view })
+  }, [view, on])
+
+  useEffect(() => {
+    if (!on) return
+    recordUsageEvent({ type: 'session' })
+    const tick = window.setInterval(() => {
+      if (document.visibilityState === 'visible') {
+        recordUsageEvent({ type: 'active', minutes: ACTIVE_TICK_MINUTES })
+      }
+    }, ACTIVE_TICK_MINUTES * 60_000)
+    return () => window.clearInterval(tick)
+  }, [on])
+}

package/src/components/CloudFunnelButton.test.tsx

@@ -91,9 +91,9 @@ describe('Cloud dialog connection availability', () => {
     expect(requests).not.toContain('/api/cloud/install/discover')
     expect(requests).not.toContain('/api/cloud/install/prepare')
     await act(async () => { button('How it works and what it costs')!.click() })
-    expect(document.body.textContent).toContain('You approve the connection before anything is installed.')
+    expect(document.body.textContent).toContain('Radar runs in your cluster and tunnels outward to Radar Cloud')
     expect(document.body.textContent).not.toContain('Setup runs here in the app')
-    expect(document.body.textContent).not.toContain('Nothing installs on click')
+    expect(document.body.textContent).not.toContain('see what gets installed')
   })
 
   it('restores cluster discovery and Connect in the open dialog when the connection recovers', async () => {