@skyhook-io/radar-app 1.14.6 → 1.15.0

package/src/components/CloudFunnelButton.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useId, useState } from 'react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { Bell, Check, Globe, History, Sparkles, Users, X } from 'lucide-react'
+import { Bell, Check, Cloud, Globe, History, Sparkles, Users, X } from 'lucide-react'
 import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
 import { Tooltip } from './ui/Tooltip'
 import { CloudConnectFlow } from './CloudConnectFlow'
+import { SelfManagedStart } from './SelfManagedStart'
 import {
   type Handoff,
-  SELF_HOSTED_DOCS_URL,
   exitFor,
   handoffForBlocked,
   handoffForPrepareError,
@@ -33,7 +33,9 @@ import {
 } from '../api/client'
 
 // OSS → Cloud funnel: a quiet globe button in the top bar that opens a modal
-// pitching Radar Cloud. Two lanes (capabilities.cloudConnect): "driver" runs
+// pitching Radar Cloud: Radar for you and your team, every cluster, around the
+// clock. Alerts and hosted investigations lead because they are the two things
+// the OSS binary cannot do at all. Two lanes (capabilities.cloudConnect): "driver" runs
 // the in-product connect flow against this server; "wizard" links to the Hub's
 // connect wizard.
 //
@@ -58,7 +60,7 @@ const FALLBACK_APP_URL = 'https://app.radarhq.io'
 const DEFAULT_ASSURANCES = [
   'Secure outbound-only tunnel',
   'Disconnect and delete your data anytime',
-  'SOC 2 Type II',
+  'SOC 2 Type II · SSO & SCIM on Enterprise',
   '3 clusters free, no card required',
 ]
 // Other OSS surfaces (a GitOps app that deploys to another cluster, say)
@@ -71,6 +73,7 @@ export function openCloudFunnel() {
   window.dispatchEvent(new Event(OPEN_EVENT))
 }
 const ABOUT_URL = 'https://radarhq.io/about'
+const BENCHMARK_URL = 'https://radarhq.io/benchmark'
 const PRICING_URL = 'https://radarhq.io/pricing'
 const SEEN_KEY = 'radar.cloudFunnel.seen'
 
@@ -99,6 +102,7 @@ export function CloudFunnelButton() {
   const [open, setOpen] = useState(false)
   const [seen, setSeen] = useState(readSeen)
   const [inFlowView, setInFlowView] = useState(false)
+  const [selfManaged, setSelfManaged] = useState(false)
   const [blocked, setBlocked] = useState<CloudInstallBlocked | null>(null)
   // Set once an in-app attempt has ended without connecting, naming what
   // happened (a flow failure kind, a blocked plan, a canceled plan, or the
@@ -191,6 +195,7 @@ export function CloudFunnelButton() {
 
   const openModal = () => {
     setOpen(true)
+    setSelfManaged(false)
     setSeen(true)
     markSeen()
     // Re-open lands on a live flow if one is running.
@@ -282,14 +287,24 @@ export function CloudFunnelButton() {
     <>
       {/* Tooltip is suppressed while the modal is open — it portals above the
           modal backdrop and would otherwise paint on top of the dialog. */}
-      <Tooltip content="Radar Cloud: all your clusters, one URL" delay={100} position="bottom" disabled={open}>
+      <Tooltip
+        content={
+          <>
+            <span className="block font-semibold">Meet Radar Cloud</span>
+            See all your clusters in one place, share with your team, and get alerts and automatic AI investigations in Slack.
+          </>
+        }
+        delay={100}
+        position="bottom"
+        disabled={open}
+      >
         <button
           onClick={openModal}
           aria-label="Radar Cloud"
           aria-haspopup="dialog"
           className="relative p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
         >
-          <Globe className="w-4 h-4" />
+          <Cloud className="w-4 h-4" />
           {cloudInstallActive(flow?.state) ? (
             <span className="absolute top-0.5 right-0.5 w-[7px] h-[7px] rounded-full bg-emerald-500 animate-pulse motion-reduce:animate-none" />
           ) : (
@@ -305,6 +320,7 @@ export function CloudFunnelButton() {
       <DialogPortal
         open={open}
         onClose={() => setOpen(false)}
+        ariaLabel="Radar Cloud"
         className="w-[580px] max-w-full max-h-[calc(100vh-2rem)] overflow-hidden flex flex-col"
       >
         <button
@@ -332,6 +348,13 @@ export function CloudFunnelButton() {
               onExit={() => exitFlow(outcomeOf(flowForView))}
             />
           </div>
+        ) : selfManaged ? (
+          <>
+            <div className="shrink-0 px-8 pt-7">
+              <Eyebrow />
+            </div>
+            <SelfManagedStart appUrl={appUrl} onBack={() => setSelfManaged(false)} />
+          </>
         ) : (
           <>
             <div className="min-h-0 overflow-y-auto">
@@ -360,6 +383,7 @@ export function CloudFunnelButton() {
               // in-cluster, so the CTA would escape before classification.
               selfLoading={inCluster && self.isPending}
               onConnect={startConnect}
+              onSelfManaged={() => setSelfManaged(true)}
               onLater={() => setOpen(false)}
             />
           </>
@@ -395,7 +419,7 @@ function Eyebrow() {
   return (
     <div className="flex items-center gap-3 mb-5">
       <RadarSweep />
-      <span className="font-mono text-[10.5px] tracking-[0.16em] uppercase text-emerald-600 dark:text-emerald-400">Radar Cloud</span>
+      <span className="font-mono text-[16px] tracking-[0.12em] uppercase text-emerald-600 dark:text-emerald-400">Radar Cloud</span>
     </div>
   )
 }
@@ -417,6 +441,7 @@ function ModalFooter({
   discoverPending = false,
   clustersUrl,
   onConnect,
+  onSelfManaged,
   onLater,
 }: {
   lane: 'driver' | 'wizard'
@@ -449,6 +474,7 @@ function ModalFooter({
   // settings say it is connected but not where.
   clustersUrl?: string
   onConnect: () => void
+  onSelfManaged: () => void
   onLater: () => void
 }) {
   const gitops = self?.ownership === 'gitops'
@@ -463,7 +489,7 @@ function ModalFooter({
   // fast click would escape to signup before we could route this install.
   const selfPending = selfLoading === true
   return (
-    <div className="shrink-0 px-8 py-5 bg-theme-base border-t border-theme-border">
+    <div className="shrink-0 px-8 py-6 bg-theme-base border-t border-theme-border">
       {self && self.ownership !== 'unknown' && (
         <div className="mb-3.5 card-inner p-3 text-[12px] leading-relaxed text-theme-text-secondary">
           {ambiguous ? (
@@ -551,17 +577,6 @@ function ModalFooter({
                   inspect step and a plan the user approves in the browser. */}
               {prepareFailed ? 'Try again' : 'Connect this cluster…'}
             </button>
-            {/* Always visible: the browser wizard is a different workflow, not
-                a recovery path — install-averse operators need the door before
-                anything fails, or they close the modal instead. */}
-            <a
-              href={driverBrowserUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="whitespace-nowrap text-[12.5px] text-theme-text-secondary hover:text-theme-text-primary hover:underline underline-offset-2 transition-colors"
-            >
-              or set up in the browser
-            </a>
           </>
         ) : cliOnly ? null : (
           <a
@@ -575,6 +590,19 @@ function ModalFooter({
             {lane === 'driver' ? 'Continue in Radar Cloud' : self?.ownership === 'helm' || gitops ? 'Connect this cluster' : 'Try Cloud free'}
           </a>
         )}
+        {/* Self-Managed is a paid product with its own trial, so it gets a real
+            button beside the hosted CTA rather than a link near the exit, the
+            way GitLab and n8n show their self-managed tiers. Outlined, so the
+            hosted CTA stays the default. */}
+        {!(lane === 'driver' && alreadyConnected) && (
+          <button
+            type="button"
+            onClick={onSelfManaged}
+            className="whitespace-nowrap px-4 py-2 rounded-[10px] border border-theme-border bg-theme-surface hover:bg-theme-hover text-theme-text-primary text-[13px] font-medium transition-colors"
+          >
+            Run Radar Cloud yourself
+          </button>
+        )}
         <button onClick={onLater} className="ml-auto whitespace-nowrap text-[12px] text-theme-text-tertiary hover:text-theme-text-primary transition-colors">
           {lane === 'driver' && alreadyConnected ? 'Close' : 'Maybe later'}
         </button>
@@ -592,16 +620,27 @@ function ModalFooter({
           fulfills. Sits next to the button whose click it de-risks. */}
       {lane === 'driver' && clusterConnected && !alreadyConnected && (
         <p className="mt-2.5 text-[11px] leading-relaxed text-theme-text-tertiary">
-          Nothing installs on click. Radar inspects{' '}
-          {clusterName ? <span className="text-theme-text-secondary">{clusterName}</span> : 'the cluster'} and shows
-          you a plan; you approve it in the browser before anything changes.
+          Nothing installs on click. You&apos;ll see what gets installed in{' '}
+          {clusterName ? <span className="text-theme-text-secondary">{clusterName}</span> : 'this cluster'} and approve
+          it before anything changes.{' '}
+          {/* Always offered: the browser wizard is a different workflow, not a
+              recovery path. Install-averse operators need this door before
+              anything fails, or they close the dialog instead. */}
+          <a
+            href={driverBrowserUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="whitespace-nowrap text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary"
+          >
+            Or set up in the browser →
+          </a>
         </p>
       )}
       {/* A 2-column grid, not flex-wrap: the long data-locality chip cannot
           share a single row with the other three at this width, and flex
           wrapping strands it as a 3+1 orphan. Two balanced columns read as a
           designed layout at any chip length the Hub sends. */}
-      <div className="mt-4 grid grid-cols-2 gap-x-3 gap-y-1.5 text-[11px] text-theme-text-tertiary">
+      <div className="mt-5 grid grid-cols-2 gap-x-3 gap-y-2 text-[11px] text-theme-text-tertiary">
         {assuranceItems(assurances).map((item) => (
           <span key={item} className="flex items-center gap-1">
             <Check className="w-3 h-3 shrink-0 text-emerald-600 dark:text-emerald-400" />
@@ -622,26 +661,31 @@ function PitchBody({ lane, freeTier }: { lane: 'driver' | 'wizard'; freeTier?: s
   // unreachable or predates the field).
   const freeLine = freeTier || 'free for 3 clusters'
   // lead is the scannable anchor (medium, primary); rest stays secondary.
+  // Each bullet is one line at the dialog's width, so the first screen stays
+  // skimmable. Alerts and investigations lead: they are the two things the
+  // OSS binary cannot do at all. Team, fleet and history follow.
   const highlights = [
-    { icon: Globe, lead: 'Your whole fleet in one URL', rest: ': issues, checks and search across every cluster' },
-    { icon: Users, lead: 'Bring the team', rest: ": SSO, invites and roles. Your cluster's RBAC has the final say" },
-    { icon: Bell, lead: 'Alerts', rest: ' that reach you the moment something breaks' },
-    { icon: History, lead: 'Long-term retention', rest: ': history that survives restarts and keeps growing' },
-    { icon: Sparkles, lead: 'An AI agent', rest: ' that digs into issues and pinpoints the root cause' },
+    { icon: Bell, lead: 'Alerts', rest: ' in Slack when something breaks. Once, not for every crash-looping pod.' },
+    { icon: Sparkles, lead: 'AI investigations', rest: ': root cause with evidence, automatic on alerts or on demand' },
+    { icon: Users, lead: 'Your team', rest: ': share any view with just a link, scoped by your existing RBAC' },
+    { icon: Globe, lead: 'Every cluster', rest: ': the whole fleet in one view and one MCP endpoint' },
+    { icon: History, lead: 'History', rest: ': events and changes kept long after Kubernetes deletes them' },
   ]
   return (
-    <div className="px-8 pt-7 pb-2">
+    <div className="px-8 pt-7 pb-5">
       <Eyebrow />
-      <h3 className="text-[22px] font-semibold leading-tight tracking-tight text-theme-text-primary mb-3">
-        Meet Radar Cloud
+      <h3 className="text-[22px] font-semibold leading-tight tracking-tight text-theme-text-primary mb-3 text-balance">
+        Close the laptop. Radar keeps watching.
       </h3>
+      <p className="text-[14px] leading-relaxed text-theme-text-secondary mb-1.5">
+        Radar Cloud is the hosted side of Radar: Slack alerts, AI root cause and every cluster in one place, for
+        you and your team.
+      </p>
       <p className="text-[14px] leading-relaxed text-theme-text-secondary mb-6">
-        The hosted side of Radar: your clusters in one place, run by us.
-        <br />
         The Radar you're running{' '}
         <b className="text-theme-text-primary font-semibold">stays free and open source, always.</b>
       </p>
-      <ul className="space-y-2.5 mb-4">
+      <ul className="space-y-2.5 mb-3">
         {highlights.map(({ icon: Icon, lead, rest }) => (
           <li key={lead} className="flex items-start gap-2.5 text-[13px] leading-relaxed text-theme-text-secondary">
             <Icon className="w-4 h-4 shrink-0 mt-[3px] text-emerald-600 dark:text-emerald-400" />
@@ -670,46 +714,46 @@ function PitchBody({ lane, freeTier }: { lane: 'driver' | 'wizard'; freeTier?: s
             {/* No heading: the disclosure's own label already names this one. */}
             <p className="text-[12px] leading-relaxed text-theme-text-secondary">
               {lane === 'driver'
-                ? 'Setup runs here in the app: Radar is installed in your cluster and connects outward to Radar Cloud. You review the plan and approve in your browser before anything is installed.'
-                : 'Radar runs in your cluster and connects outward to Radar Cloud. You approve the connection before anything is installed.'}
+                ? "Setup runs here in the app: Radar is installed in your cluster and tunnels outward to Radar Cloud, so there's no ingress to open."
+                : "Radar runs in your cluster and tunnels outward to Radar Cloud, so there's no ingress to open."}{' '}
+              Live views are fetched from your cluster when someone opens them, within their permissions. Radar
+              Cloud stores event history, changes and investigation results, so you can go back in time to
+              debug.
+            </p>
+          </section>
+          <section>
+            <h4 className="text-[12.5px] font-semibold text-theme-text-primary mb-0.5">Investigations</h4>
+            <p className="text-[12px] leading-relaxed text-theme-text-secondary">
+              In our public benchmark, Radar's agent found the root cause 3× faster than the same model on plain
+              kubectl, and 2× faster than the other AI SRE tools we tested. Run it automatically on every alert, or
+              on demand from any issue, with no CLI or API key.{' '}
+              <a href={BENCHMARK_URL} target="_blank" rel="noopener noreferrer" className="whitespace-nowrap text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary">
+                See the benchmarks →
+              </a>
             </p>
           </section>
           <section>
             <h4 className="text-[12.5px] font-semibold text-theme-text-primary mb-0.5">What it costs</h4>
             <p className="text-[12px] leading-relaxed text-theme-text-secondary">
-              Radar Cloud is {freeLine}. The paid plans beyond that are what keep the lights on. The
-              Radar you're running stays
-              Apache&nbsp;2.0 either way: every feature, forever.{' '}
+              Radar Cloud is {freeLine}, with 100 investigations a month included, then $1 per investigation.
+              Paid plans add more clusters, more included investigations, and enterprise features like SSO, SCIM
+              and audit logs.{' '}
               <a href={PRICING_URL} target="_blank" rel="noopener noreferrer" className="whitespace-nowrap text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary">
                 See pricing →
               </a>
             </p>
           </section>
           <section>
-            <h4 className="text-[12.5px] font-semibold text-theme-text-primary mb-0.5">Who's behind it</h4>
+            {/* No heading: "built by Skyhook" already answers who is behind it. */}
             <p className="text-[12px] leading-relaxed text-theme-text-secondary">
-              Radar is built in the open and run by Skyhook, a CNCF Silver member and a small team of
-              humans, the kind you can actually talk to.{' '}
+              Built in the open by Skyhook, a CNCF Silver member and a small team you can actually talk to.{' '}
               <a href={ABOUT_URL} target="_blank" rel="noopener noreferrer" className="whitespace-nowrap text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary">
                 Meet us →
               </a>
             </p>
           </section>
-          <p className="text-[12px] leading-relaxed text-theme-text-secondary">
-            Prefer your own VPC? You can run the Radar Cloud control plane yourself.{' '}
-            <a href={SELF_HOSTED_DOCS_URL} target="_blank" rel="noopener noreferrer" className="text-theme-text-secondary underline underline-offset-2 hover:text-theme-text-primary">
-              Read the docs
-            </a>
-            .
-          </p>
         </div>
       </Collapse>
-      <div className="mb-5 border-l-2 border-emerald-500/40 pl-3.5">
-        <p className="text-[12px] leading-relaxed text-theme-text-secondary">
-          Don't need Radar Cloud right now? That's fine. What you're running is already a full product,
-          not a demo. We're here if you ever do.
-        </p>
-      </div>
     </div>
   )
 }

package/src/components/SelfManagedStart.tsx

@@ -0,0 +1,96 @@
+import { ArrowLeft, ArrowUpRight } from 'lucide-react'
+import { SELF_HOSTED_DOCS_URL, signupUrlFor } from './cloudConnectHandoff'
+
+// What the Cloud dialog shows after "Run Radar Cloud yourself…". Running your
+// own control plane starts with a Radar Cloud account, because the Hub signs
+// the Self-Managed license, so this view names that as step 1 of 3 before the
+// click instead of letting a sign-up page surprise someone who came to host
+// it themselves. The link carries intent=self-hosting: the Hub's sign-in page
+// repeats the steps and, after sign-up or sign-in, continues on its
+// Self-hosting page, where the trial, the license and the install command are.
+export function SelfManagedStart({ appUrl, onBack }: { appUrl: string; onBack: () => void }) {
+  const signupUrl = `${signupUrlFor(appUrl, 'self-managed-signup')}&intent=self-hosting`
+  const steps = [
+    {
+      title: 'Create your Radar Cloud account',
+      body: 'Your license is issued from it. An existing account works too.',
+    },
+    {
+      title: 'Generate your install command',
+      body: 'Self-Managed is part of Enterprise, with a 14-day free trial.',
+    },
+    {
+      title: 'Install the control plane, then connect each cluster',
+      body: 'One Helm command installs it. Then one command per cluster to connect it.',
+    },
+  ]
+  return (
+    <>
+      <div className="min-h-0 overflow-y-auto">
+        <div className="px-8 pb-5">
+          <h3 className="text-[20px] font-semibold leading-tight tracking-tight text-theme-text-primary mb-1.5">
+            Run Radar Cloud yourself
+          </h3>
+          <p className="text-[13px] leading-relaxed text-theme-text-secondary mb-5">
+            Run the Radar Cloud control plane in your own infrastructure: the same fleet view, alerts, history
+            and team access, and your cluster data never leaves your network.
+          </p>
+          <ol className="space-y-3.5">
+            {steps.map((step, i) => (
+              <li key={step.title} className="flex gap-3">
+                <span
+                  className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10.5px] font-semibold ${
+                    i === 0 ? 'bg-emerald-500 text-emerald-950' : 'border border-theme-border text-theme-text-tertiary'
+                  }`}
+                >
+                  {i + 1}
+                </span>
+                <div className="min-w-0">
+                  <p className={`text-[13px] font-medium ${i === 0 ? 'text-theme-text-primary' : 'text-theme-text-secondary'}`}>
+                    {step.title}
+                  </p>
+                  <p className="text-[12px] leading-relaxed text-theme-text-tertiary">{step.body}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
+          {/* What a platform engineer has to bring, split by stage: a trial
+              needs only an address clusters can reach (a cloud load balancer
+              is the install page's default; Postgres and a built-in admin come
+              bundled); production adds their own Postgres and IdP. */}
+          <div className="mt-5 space-y-1 text-[12px] leading-relaxed text-theme-text-tertiary">
+            <p>
+              <b className="font-medium text-theme-text-secondary">For a trial</b>, you just need a hostname your
+              clusters can reach the hub on.
+            </p>
+            <p>
+              <b className="font-medium text-theme-text-secondary">For production</b>, connect your own Postgres and
+              your IdP to manage users.
+            </p>
+            <a href={SELF_HOSTED_DOCS_URL} target="_blank" rel="noopener noreferrer" className="inline-block underline underline-offset-2 hover:text-theme-text-primary">
+              Read the Self-Managed guide →
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="shrink-0 px-8 py-4 bg-theme-base border-t border-theme-border flex flex-wrap items-center gap-x-3 gap-y-2.5">
+        <button
+          onClick={onBack}
+          className="inline-flex items-center gap-1.5 whitespace-nowrap text-[12.5px] text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+        >
+          <ArrowLeft className="w-3.5 h-3.5" />
+          Back to Radar Cloud
+        </button>
+        <a
+          href={signupUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="ml-auto inline-flex items-center gap-1.5 whitespace-nowrap px-5 py-2 rounded-[10px] bg-emerald-500 hover:bg-emerald-400 text-emerald-950 text-[13.5px] font-bold shadow-[0_0_22px_rgba(16,185,129,0.35)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] transition-all"
+        >
+          Create your Radar Cloud account
+          <ArrowUpRight className="w-4 h-4" />
+        </a>
+      </div>
+    </>
+  )
+}

package/src/components/cloudConnectHandoff.test.ts

@@ -171,7 +171,7 @@ describe('composeAdminNote — an ask, then the link, then the evidence', () =>
     expect(note).toContain('Please confirm nothing is already installed before a fresh install.')
     // The object of the request and the answer to "no SaaS", before the evidence.
     expect(note.indexOf('What it is: Radar, the open-source Kubernetes tool')).toBeLessThan(note.indexOf('Details:'))
-    expect(note).toContain(`can be self-hosted in-house: ${SELF_HOSTED_DOCS_URL}`)
+    expect(note).toContain(`can run in-house as Radar Cloud Self-Managed: ${SELF_HOSTED_DOCS_URL}`)
     // Never the card's second person.
     expect(note).not.toMatch(/\byour\b/i)
   })

package/src/components/cloudConnectHandoff.ts

@@ -144,7 +144,7 @@ export interface AdminNoteContext {
 export const SELF_HOSTED_DOCS_URL = 'https://radarhq.io/docs/cloud/self-hosted/'
 const WHAT_IT_IS = [
   'What it is: Radar, the open-source Kubernetes tool, installed in the cluster as a Helm chart. It opens an outbound connection to a hosted control plane (nothing listens inbound); Radar Cloud users reach this Radar only through that connection, with the permissions of the ServiceAccount it runs as.',
-  `If a hosted service is not an option, the same control plane can be self-hosted in-house: ${SELF_HOSTED_DOCS_URL}`,
+  `If a hosted service is not an option, the same control plane can run in-house as Radar Cloud Self-Managed: ${SELF_HOSTED_DOCS_URL}`,
 ].join(' ')
 
 export function composeAdminNote(blocked: CloudInstallBlocked, exit: BlockedExit, where: AdminNoteContext = {}): string {

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/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}