@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/components/curl/ServiceCurlButton.tsx

@@ -5,6 +5,7 @@ import { Activity, Loader2, X, Maximize2, Copy, Check } from 'lucide-react'
 import { clsx } from 'clsx'
 import { apiFetch } from '../../api/client'
 import { apiUrl } from '../../api/config'
+import { readErrorBody } from '../../api/httpErrors'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '@skyhook-io/k8s-ui'
 import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
@@ -296,9 +297,12 @@ export function CurlPanel({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ namespace, name: serviceName, port: String(port), scheme: vars.scheme, path: vars.path }),
       })
-      const data = await res.json().catch(() => ({}))
-      if (!res.ok) throw new Error(data?.error || `Request failed (${res.status})`)
-      return data as CurlResult
+      if (!res.ok) {
+        const error = await readErrorBody(res)
+        throw new Error(error.error || `Request failed (${res.status})`)
+      }
+      // A failing target service still comes back as a 200 carrying its result.
+      return (await res.json().catch(() => ({}))) as CurlResult
     },
   })
 

package/src/components/diagnose/ActivityTurn.tsx

@@ -1099,6 +1099,7 @@ function ToolResultDialog({
   text: string;
   truncated?: boolean;
 }) {
+  const titleId = useId();
   const { theme } = useTheme();
   const [fmt, setFmt] = useState<"yaml" | "json">("yaml");
   const parsed = useMemo<{ ok: boolean; value?: unknown }>(() => {
@@ -1136,10 +1137,10 @@ function ToolResultDialog({
     };
   }, [open, display, language, theme]);
   return (
-    <DialogPortal open={open} onClose={onClose} className="w-[min(90vw,820px)]">
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={onClose} className="w-[min(90vw,820px)]">
       <div className="flex items-center justify-between gap-3 border-b border-theme-border p-3">
         <div className="min-w-0">
-          <div className="truncate font-mono text-sm text-theme-text-primary">
+          <div id={titleId} className="truncate font-mono text-sm text-theme-text-primary">
             {title}
           </div>
           {truncated && (

package/src/components/diagnose/ApplyDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useId } from "react";
 import {
   CheckCircle2,
   AlertTriangle,
@@ -41,6 +41,7 @@ export function ApplyDialog({
   managedBy?: string; // GitOps/Helm owner of the resource, if any
   confidence?: number;
 }) {
+  const titleId = useId();
   const fixText = fix?.trim();
   const lowConfidence = confidence != null && confidence < 0.5;
   // A GitOps/Helm-managed resource needs an explicit acknowledgment before applying
@@ -56,6 +57,7 @@ export function ApplyDialog({
   const applyBlocked = !!managedBy && !acked;
   return (
     <DialogPortal
+      ariaLabelledBy={titleId}
       open={open}
       onClose={onClose}
       className="flex max-h-[calc(100dvh-2rem)] w-full max-w-2xl flex-col overflow-hidden"
@@ -65,7 +67,7 @@ export function ApplyDialog({
           <AlertTriangle className="h-5 w-5 text-amber-500" />
         </div>
         <div className="min-w-0 flex-1">
-          <h3 className="text-lg font-semibold text-theme-text-primary">
+          <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">
             Apply this fix?
           </h3>
           <p className="mt-1 text-sm text-theme-text-secondary">

package/src/components/dialog-names.test.ts

@@ -0,0 +1,69 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// Screen readers announce a dialog by its name; an unnamed one is read as just
+// "dialog". Every DialogPortal must pass ariaLabelledBy (its visible title) or
+// ariaLabel.
+const repoRoot = join(__dirname, '..', '..', '..')
+const roots = ['web/src', 'packages/k8s-ui/src'].map(r => join(repoRoot, r))
+
+function sourceFiles(dir: string): string[] {
+  return readdirSync(dir).flatMap(name => {
+    const path = join(dir, name)
+    if (statSync(path).isDirectory()) return name === 'node_modules' ? [] : sourceFiles(path)
+    return /\.tsx$/.test(name) && !/\.test\.tsx$/.test(name) ? [path] : []
+  })
+}
+
+// The opening tag ends at the first '>' outside a {…} expression or a string.
+function openingTags(source: string, component: string): string[] {
+  const tags: string[] = []
+  let from = 0
+  for (;;) {
+    const start = source.indexOf(`<${component}`, from)
+    if (start < 0) return tags
+    let depth = 0
+    let i = start + component.length + 1
+    for (; i < source.length; i++) {
+      const c = source[i]
+      if (c === '"' || c === "'" || c === '`') {
+        i++
+        while (i < source.length && source[i] !== c) i += source[i] === '\\' ? 2 : 1
+      } else if (c === '{') depth++
+      else if (c === '}') depth--
+      else if (c === '>' && depth === 0) break
+    }
+    tags.push(source.slice(start, i + 1))
+    from = i
+  }
+}
+
+function isNamed(tag: string): boolean {
+  const withoutStrings = tag.replace(/(["'`])(?:\\.|(?!\1)[^\\])*\1/gs, '""')
+  return /\saria(Label|LabelledBy)\s*=/.test(withoutStrings)
+}
+
+describe('dialogs', () => {
+  it('every DialogPortal has an accessible name', () => {
+    const unnamed = roots.flatMap(sourceFiles).flatMap(file => {
+      if (file.endsWith('DialogPortal.tsx')) return []
+      return openingTags(readFileSync(file, 'utf8'), 'DialogPortal')
+        .filter(tag => /^<DialogPortal[\s>]/.test(tag) && !isNamed(tag))
+        .map(() => relative(repoRoot, file))
+    })
+    expect(unnamed).toEqual([])
+  })
+
+  it('reads attributes, not text that looks like them', () => {
+    const [unnamed, spaced, braceInString] = openingTags(
+      `<DialogPortal onClose={() => log("ariaLabel=unused")}>` +
+      `<DialogPortal ariaLabel = "Named">` +
+      `<DialogPortal title={"}"} open>`,
+      'DialogPortal',
+    )
+    expect(isNamed(unnamed)).toBe(false)
+    expect(isNamed(spaced)).toBe(true)
+    expect(braceInString).toBe('<DialogPortal title={"}"} open>')
+  })
+})

package/src/components/dock/NodeTerminalTab.tsx

@@ -1,5 +1,6 @@
 import { NodeTerminalTab as SharedNodeTerminalTab, type NodeTerminalTabProps as SharedNodeTerminalTabProps } from '@skyhook-io/k8s-ui'
 import { apiUrl, getWsUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { readErrorBody } from '../../api/httpErrors'
 
 interface NodeTerminalTabProps {
   nodeName: string
@@ -15,7 +16,7 @@ export function NodeTerminalTab({ nodeName, isActive }: NodeTerminalTabProps) {
       body: JSON.stringify({}),
     })
     if (!response.ok) {
-      const err = await response.json().catch(() => ({ error: 'Unknown error' }))
+      const err = await readErrorBody(response)
       throw new Error(err.error || `HTTP ${response.status}`)
     }
     return response.json()

package/src/components/dock/TerminalTab.tsx

@@ -1,5 +1,6 @@
 import { TerminalTab as SharedTerminalTab } from '@skyhook-io/k8s-ui'
 import { apiUrl, getWsUrl } from '../../api/config'
+import { readErrorBody } from '../../api/httpErrors'
 
 interface TerminalTabProps {
   namespace: string
@@ -22,7 +23,7 @@ export function TerminalTab({ namespace, podName, containerName, containers, isA
       body: JSON.stringify({ targetContainer }),
     })
     if (!response.ok) {
-      const err = await response.json().catch(() => ({ error: 'Unknown error' }))
+      const err = await readErrorBody(response)
       throw new Error(err.error || `HTTP ${response.status}`)
     }
     return response.json()

package/src/components/dock/TrafficFlowListTab.tsx

@@ -3,7 +3,7 @@ import { TrafficFlowList } from '../traffic/TrafficFlowList'
 import { List } from 'lucide-react'
 
 export function TrafficFlowListTab() {
-  const { flows } = useTrafficFlowList()
+  const { flows, responsesCallerOriented } = useTrafficFlowList()
 
   if (flows.length === 0) {
     return (
@@ -14,5 +14,5 @@ export function TrafficFlowListTab() {
     )
   }
 
-  return <TrafficFlowList flows={flows} />
+  return <TrafficFlowList flows={flows} responsesCallerOriented={responsesCallerOriented} />
 }

package/src/components/execution/BatchExecutionView.tsx

@@ -344,7 +344,7 @@ export function BatchExecutionFullscreen({ kind, apiKind, namespace, name, resou
               <JobSetRenderer data={resource} mode="overview" shownMemberCounts={shownMemberCounts} onSelectRole={memberCollection ? selectRole : undefined} />
             </section>
           )}
-          {jobSetRoot && <JobSetAdmission resource={resource} namespace={namespace} name={name} onNavigate={onNavigateToResource} />}
+          {(jobSetRoot || (resource.apiVersion === 'batch/v1' && resource.kind === 'Job')) && <JobSetAdmission resource={resource} namespace={namespace} name={name} onNavigate={onNavigateToResource} />}
           {memberShell && <JobSetMemberComparison
             runs={runs} total={runsQuery.data?.total ?? 0} filteredTotal={runsQuery.data?.filteredTotal ?? runs.length}
             truncated={runsQuery.data?.truncated ?? false} loading={runsQuery.isLoading} error={runsQuery.error}

package/src/components/execution/JobSetAdmission.test.tsx

@@ -1,42 +1,165 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import type { KueueAdmissionResponse } from '@skyhook-io/k8s-ui/types/scheduling'
-import { JobSetAdmission } from './JobSetAdmission'
-
-const state = vi.hoisted(() => ({ data: undefined as KueueAdmissionResponse | undefined, query: vi.fn() }))
-vi.mock('../../api/client', () => ({
-  ApiError: class extends Error {},
-  useKueueAdmission: (...args: unknown[]) => {
-    state.query(...args)
-    return { data: state.data, isLoading: false, refetch: vi.fn() }
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { KueueAdmission } from "./JobSetAdmission";
+const mock = vi.hoisted(() => ({ result: {} as any, calls: [] as any[] }));
+vi.mock("../../api/client", () => ({
+  ApiError: class extends Error {
+    status = 403;
+  },
+  useKueueAdmission: (...args: any[]) => {
+    mock.calls.push(args);
+    return mock.result;
+  },
+}));
+const job = {
+  apiVersion: "batch/v1",
+  kind: "Job",
+  metadata: { name: "train", namespace: "ml", uid: "current" },
+  spec: { suspend: true },
+};
+const empty = {
+  uid: "current",
+  installed: true,
+  workloads: [],
+  total: 0,
+  truncated: false,
+};
+const evidence = {
+  ...empty,
+  total: 1,
+  workloads: [
+    {
+      name: "owned-workload",
+      uid: "w",
+      apiVersion: "kueue.x-k8s.io/v1beta2",
+      projection: "unsupported",
+    },
+  ],
+};
+const hinted = {
+  ...job,
+  metadata: {
+    ...job.metadata,
+    labels: { "kueue.x-k8s.io/queue-name": "ready" },
   },
-}))
+};
+const render = (resource: any = job) =>
+  renderToStaticMarkup(
+    <KueueAdmission resource={resource} namespace="ml" name="train" />,
+  );
+describe("Job admission host", () => {
+  beforeEach(() => {
+    mock.result = {};
+    mock.calls = [];
+  });
+  it.each([
+    { isLoading: true },
+    { data: empty },
+    { error: new Error("denied") },
+  ])("keeps plain suspended Jobs quiet: %j", (result) => {
+    mock.result = result;
+    expect(render()).toBe("");
+    expect(mock.calls[0][3]).toEqual({
+      isJob: true,
+      isRayJob: false,
+      hinted: false,
+      terminal: false,
+    });
+  });
+  it("discovers unlabeled evidence but hides it after errors", () => {
+    mock.result = { data: evidence };
+    expect(render()).toContain("owned-workload");
+    mock.result.error = new Error("cache unavailable");
+    expect(render()).toContain("cache unavailable");
+    expect(render()).not.toContain("owned-workload");
+  });
+  it("rejects reused-name evidence", () => {
+    mock.result = { data: { ...evidence, uid: "old" } };
+    expect(render(hinted)).toContain("different workload instance");
+    expect(render(hinted)).not.toContain("owned-workload");
+  });
+  it("shows missing evidence and conditional owner guidance for a hinted child", () => {
+    mock.result = { data: empty };
+    const html = render({
+      ...hinted,
+      metadata: {
+        ...hinted.metadata,
+        ownerReferences: [{ controller: true, kind: "JobSet", name: "parent" }],
+      },
+    });
+    expect(html).toContain("Admission may be tracked on the owning resource");
+    expect(html).not.toContain("Admission is tracked");
+  });
+  it("does not use failed Pod counts as terminal or arbitrary managedBy as Kueue hint", () => {
+    render({
+      ...job,
+      spec: { managedBy: "other.io/controller" },
+      status: { failed: 1 },
+    });
+    expect(mock.calls[0][3]).toEqual({
+      isJob: true,
+      isRayJob: false,
+      hinted: false,
+      terminal: false,
+    });
+  });
+  it("preserves JobSet errors", () => {
+    mock.result = { error: new Error("denied") };
+    expect(
+      render({
+        ...job,
+        apiVersion: "jobset.x-k8s.io/v1alpha2",
+        kind: "JobSet",
+      }),
+    ).toContain("denied");
+  });
+});
 
-beforeEach(() => {
-  state.query.mockClear()
-  state.data = { uid: 'old-uid', installed: true, total: 1, truncated: false, workloads: [{
-    apiVersion: 'kueue.x-k8s.io/v1beta2', namespace: 'ml', name: 'old-workload', uid: 'workload-uid', generation: 1,
-    createdAt: null, deleting: false, projection: 'unsupported', linksLimited: false,
-  }] }
-})
+describe("JobSet admission identity", () => {
+  it("rejects evidence and absence for a different root instance", () => {
+    const resource = {
+      ...job,
+      apiVersion: "jobset.x-k8s.io/v1alpha2",
+      kind: "JobSet",
+    };
+    mock.result = { data: evidence };
+    expect(render(resource)).toContain("owned-workload");
+    mock.result = { data: { ...evidence, uid: "old" } };
+    expect(render(resource)).toContain("different workload instance");
+    expect(render(resource)).not.toContain("owned-workload");
+    mock.result = { data: { ...empty, uid: "old", installed: false } };
+    expect(render(resource)).toContain("different workload instance");
+    mock.result.data.uid = "current";
+    expect(render(resource)).toBe("");
+  });
+});
 
-function render(uid: string) {
-  return renderToStaticMarkup(<JobSetAdmission resource={{ metadata: { uid } }} namespace="ml" name="training" />)
-}
+it("does not suggest parent admission for a CronJob-created Job", () => {
+  mock.result = { data: empty };
+  const html = render({
+    ...hinted,
+    metadata: {
+      ...hinted.metadata,
+      ownerReferences: [
+        { apiVersion: "batch/v1", kind: "CronJob", controller: true },
+      ],
+    },
+  });
+  expect(html).toContain("No controller-owned Kueue Workload observed");
+  expect(html).not.toContain("Admission may be tracked");
+});
 
-describe('JobSet admission identity', () => {
-  it('rejects old evidence after recreation under the same name', () => {
-    expect(render('old-uid')).toContain('old-workload')
-    const html = render('new-uid')
-    expect(state.query).toHaveBeenLastCalledWith('ml', 'training', 'new-uid')
-    expect(html).not.toContain('old-workload')
-    expect(html).toContain('different JobSet instance')
-  })
 
-  it('accepts absence only for the displayed root instance', () => {
-    state.data = { uid: 'old-uid', installed: false, total: 0, truncated: false, workloads: [] }
-    expect(render('new-uid')).toContain('different JobSet instance')
-    state.data.uid = 'new-uid'
-    expect(render('new-uid')).toBe('')
-  })
-})
+describe("RayJob admission", () => {
+  it("uses RayJob identity and controller terminal status without inventing a Kueue hint", () => {
+    mock.result = { data: empty };
+    expect(render({ ...job, apiVersion: "ray.io/v1", kind: "RayJob", spec: { managedBy: "ray.io/kuberay-operator" }, status: { jobDeploymentStatus: "Complete" } })).toBe("");
+    expect(mock.calls.at(-1)?.[3]).toEqual({ isJob: false, isRayJob: true, hinted: false, terminal: true });
+  });
+  it("keeps MultiKueue admission visible separately from remote execution", () => {
+    mock.result = { data: empty };
+    const html = render({ ...job, apiVersion: "ray.io/v1", kind: "RayJob", spec: { managedBy: "kueue.x-k8s.io/multikueue" } });
+    expect(html).toContain("No controller-owned Kueue Workload observed");
+    expect(mock.calls.at(-1)?.[3]).toEqual({ isJob: false, isRayJob: true, hinted: true, terminal: false });
+  });
+});

package/src/components/execution/JobSetAdmission.tsx

@@ -1,17 +1,26 @@
 import { KueueAdmissionSection } from '@skyhook-io/k8s-ui/components/resources/KueueAdmissionSection'
 import { ApiError, useKueueAdmission } from '../../api/client'
 
-export function JobSetAdmission({ resource, namespace, name, onNavigate }: {
+export function KueueAdmission({ resource, namespace, name, onNavigate, presentation }: {
+  presentation?: 'card' | 'drawer'
   resource: any
   namespace: string
   name: string
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }) {
-  const query = useKueueAdmission(namespace, name, resource.metadata?.uid)
-  const data = query.data?.uid === resource.metadata?.uid ? query.data : undefined
-  const error = query.error?.message ?? (query.data && !data ? 'Admission evidence belongs to a different JobSet instance; waiting for a fresh observation.' : undefined)
+  const isJob = resource.apiVersion === 'batch/v1' && resource.kind === 'Job'
+  const isRayJob = resource.apiVersion === 'ray.io/v1' && resource.kind === 'RayJob'
   const labels = resource.metadata?.labels
-  const externalExecution = Boolean(resource.spec?.managedBy && resource.spec.managedBy !== 'jobset.sigs.k8s.io/jobset-controller')
-  const hinted = Boolean(labels?.['kueue.x-k8s.io/queue-name'] || labels?.['kueue.x-k8s.io/prebuilt-workload-name'] || externalExecution)
-  return <KueueAdmissionSection data={data} loading={query.isLoading} error={error} forbidden={query.error instanceof ApiError && query.error.status === 403} hinted={hinted} externalExecution={externalExecution} onRetry={() => { void query.refetch() }} onNavigate={onNavigate} />
+  const annotations = resource.metadata?.annotations
+  const externalExecution = Boolean(resource.spec?.managedBy && resource.spec.managedBy !== (isRayJob ? 'ray.io/kuberay-operator' : isJob ? 'kubernetes.io/job-controller' : 'jobset.sigs.k8s.io/jobset-controller'))
+  const hinted = Boolean(labels?.['kueue.x-k8s.io/queue-name'] || labels?.['kueue.x-k8s.io/prebuilt-workload-name'] || annotations?.['kueue.x-k8s.io/prebuilt-workload-name'] || resource.spec?.managedBy === 'kueue.x-k8s.io/multikueue' || (!isJob && !isRayJob && externalExecution))
+  const terminal = (isRayJob && ['Complete', 'Failed', 'ValidationFailed'].includes(resource.status?.jobDeploymentStatus)) || (resource.status?.conditions ?? []).some((c: any) => ['Complete', 'Failed'].includes(c.type) && c.status === 'True')
+  const query = useKueueAdmission(namespace, name, resource.metadata?.uid, { isJob, isRayJob, hinted, terminal })
+  const data = query.data?.uid === resource.metadata?.uid ? query.data : undefined
+  const error = query.error?.message ?? (query.data && !data ? 'Admission evidence belongs to a different workload instance; waiting for a fresh observation.' : undefined)
+  if ((isJob || isRayJob) && !hinted && !data?.workloads.length) return null
+  const hasOwner = (resource.metadata?.ownerReferences ?? []).some((owner: any) => owner.controller === true && !(owner.apiVersion === 'batch/v1' && owner.kind === 'CronJob'))
+  return <KueueAdmissionSection presentation={presentation} data={data} loading={query.isLoading} error={error} forbidden={query.error instanceof ApiError && query.error.status === 403} hinted={hinted} externalExecution={externalExecution} hasOwner={isJob && hasOwner} onRetry={() => { void query.refetch() }} onNavigate={onNavigate} />
 }
+
+export { KueueAdmission as JobSetAdmission }

package/src/components/gitops/GitOpsView.tsx

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import yaml from 'yaml'
+import { hasHealthSettingsHint } from '@skyhook-io/k8s-ui/components/gitops/GitOpsHealthSourceNotice'
+import { previousSettingsNote, usePreviousIntegrationSettings } from '../../hooks/usePreviousIntegrationSettings'
 import {
   GitOpsActivityInsightView,
   GitOpsChangesView,
@@ -412,6 +414,14 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
   const terminatingChipTooltip = terminatingDescriptions.chipTooltip
   const terminatingActionTooltip = terminatingDescriptions.actionDisabledTooltip
   const [appView, setAppView] = useState<GitOpsDetailTab>('topology')
+  const insight = insightsQ.data
+  const showDiffSettingsHint = appView === 'changes' && insight?.summary.tool === 'argocd' && insight.summary.kind === 'Application'
+    && !!insight.changes?.length && !insight.capabilities?.argoDiffAvailable
+  const previousSettings = usePreviousIntegrationSettings(!!onOpenSettings && (
+    hasHealthSettingsHint(insight?.summary, insight?.changes)
+    || showDiffSettingsHint
+  ))
+  const settingsNote = previousSettings.argocd ? previousSettingsNote('argocd', previousSettings.argocd) : undefined
   // When the user clicks an actionable issue alert ("OutOfSync — NodePool
   // default is out of sync · View →"), we navigate to Changes and focus
   // that resource. The ref is stringified to a stable key so GitOpsChangesView
@@ -670,6 +680,7 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
       healthDocsUrl={GITOPS_HEALTH_DOCS_URL}
       remoteDestinationHint={<RemoteDestinationCloudHint />}
       onOpenSettings={onOpenSettings}
+      settingsNote={showDiffSettingsHint ? undefined : settingsNote}
       renderRevisionMeta={
         isArgoApp && insightsQ.data?.capabilities?.revisionMetadataAvailable
           ? (revision) => (
@@ -809,6 +820,7 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
                 <ArgoResourceDiffLoader appNamespace={namespace} appName={name} resourceRef={ref} />
               ) : undefined}
               onOpenSettings={onOpenSettings}
+              settingsNote={settingsNote}
             />
           )
         }

package/src/components/helm/TrackChartSourceDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useId } from 'react'
 import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
 import { X, Plus, Trash2, Link2, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -50,6 +50,7 @@ function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError
 // GitOps) Radar can only track upgrades once the user declares where they live.
 // Registering a registry/org prefix lets Radar probe "<prefix>/<chartName>".
 export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue, sourceError }: TrackChartSourceDialogProps) {
+  const titleId = useId()
   const [value, setValue] = useState('')
   const { data: sources } = useHelmOCISources()
   const { data: clusterInfo } = useClusterInfo()
@@ -78,13 +79,13 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
   }
 
   return (
-    <DialogPortal open={open} onClose={onClose} className="max-w-lg w-full">
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={onClose} className="max-w-lg w-full">
       <div className="flex items-start gap-3 p-4 border-b border-theme-border">
         <div className="flex items-center justify-center w-10 h-10 rounded-full shrink-0 bg-theme-hover">
           <Link2 className="w-5 h-5 text-theme-text-secondary" />
         </div>
         <div className="flex-1 min-w-0">
-          <h3 className="text-lg font-semibold text-theme-text-primary">Track chart source</h3>
+          <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">Track chart source</h3>
           <p className="text-sm text-theme-text-secondary mt-1">
             Helm doesn&apos;t record where a chart was installed from. Radar checks registered OCI
             prefixes for newer versions of your charts.
@@ -92,6 +93,7 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
         </div>
         <button
           onClick={onClose}
+          aria-label="Close"
           className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
         >
           <X className="w-5 h-5" />

package/src/components/home/HomeView.tsx

@@ -52,9 +52,11 @@ interface HomeViewProps {
   onNavigateToUpgradeImpact?: () => void
   onNavigateToHelmRelease?: (namespace: string, release: string) => void
   onNavigateToManagerPath?: (path: string) => void
+  // Present only when release notes exist for this version.
+  onShowWhatsNew?: () => void
 }
 
-export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts, onNavigateToUpgradeImpact, onNavigateToHelmRelease, onNavigateToManagerPath }: HomeViewProps) {
+export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts, onNavigateToUpgradeImpact, onNavigateToHelmRelease, onNavigateToManagerPath, onShowWhatsNew }: HomeViewProps) {
   // The card itself decides whether the cluster has a capacity story
   // (available, softened-denied, or karpenterless-with-managers/groups) and
   // returns null otherwise — the outer gate only excludes states with nothing
@@ -138,9 +140,11 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
         )}
         {/* Row 1: Cluster Health Card (combined health + resource counts) */}
         <ClusterHealthCard
-          radarVersion={deploymentMode === 'in-cluster' && versionInfo ? (
+          radarVersion={versionInfo && deploymentMode !== 'cloud' ? (
             <RadarVersionLine
               version={versionInfo}
+              showUpgrade={deploymentMode === 'in-cluster'}
+              onShowWhatsNew={onShowWhatsNew}
               manager={installationManager}
               managerLoading={installationManagerLoading}
               onNavigateToHelmRelease={onNavigateToHelmRelease}
@@ -347,7 +351,7 @@ function ProblemsPanel({
         <div className="flex items-center gap-2">
           <button
             type="button"
-            className="rounded-md px-2 py-1 text-xs font-medium text-accent-text transition-colors hover:bg-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40"
+            className="rounded-md px-2 py-1 text-xs font-medium text-accent-text transition-colors hover:bg-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40"
             onClick={onNavigateToIssues}
           >
             View all