@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/useCNPGSidebarWorkspace.ts

@@ -1,10 +1,13 @@
 import { useMemo } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { Database, FileCheck2, Settings2, ShieldCheck, Waypoints } from 'lucide-react'
-import { buildCNPGFleet, type CNPGFleet, type SidebarCategoryWorkspace } from '@skyhook-io/k8s-ui'
+import { applyCNPGDisk, applyCNPGFleetMetrics, buildCNPGFleet, type CNPGDiskReading, type CNPGFleet, type SidebarCategoryWorkspace } from '@skyhook-io/k8s-ui'
 import type { APIResource } from '../../types'
 import { useCNPGWorkspace } from '../../api/cnpg'
+import { useRadarFeature } from '../../api/client'
+import { useCNPGFleetDisk } from '../../api/cnpg-storage'
+import { useCNPGFleetMetrics } from '../../api/cnpg-history'
 import { CNPG_SCREENS, type CNPGScreen } from './routes'
+import { useCNPGNavigate } from './useCNPGNavigate'
 
 export const CNPG_SIDEBAR_CATEGORY = 'CloudNativePG'
 
@@ -20,24 +23,67 @@ export function cnpgDiscovered(apiResources: APIResource[] | undefined): boolean
   return !!apiResources?.some((r) => r.group === 'postgresql.cnpg.io')
 }
 
-export function useCNPGFleet(namespaces: string[], enabled = true) {
+// Disk use joins the fleet here, so low-disk clusters count toward Needs
+// attention on every screen and sidebar badge that reads the enriched fleet;
+// measured replication lag and disk growth join the same way. Both are
+// Prometheus fan-outs per namespace, so callers outside the CloudNativePG views
+// pass withMetrics=false.
+export function useCNPGFleet(namespaces: string[], enabled = true, withMetrics = true) {
   const query = useCNPGWorkspace(namespaces, { enabled })
-  const fleet = useMemo<CNPGFleet | null>(() => (query.data?.installed ? buildCNPGFleet(query.data) : null), [query.data])
+  const { support } = useRadarFeature('cnpgWorkspace')
+  const enrich = enabled && withMetrics && support === 'supported' && !!query.data?.installed
+  const disk = useCNPGFleetDisk(namespaces, enrich)
+  const metrics = useCNPGFleetMetrics(namespaces, enrich)
+  const fleet = useMemo<CNPGFleet | null>(
+    () =>
+      query.data?.installed
+        ? applyCNPGFleetMetrics(
+            applyCNPGDisk(buildCNPGFleet(query.data), enrich ? disk.data?.clusters ?? (disk.error ? diskFailed(query.data.objects.clusters ?? [], disk.error) : undefined) : undefined),
+            enrich ? metrics.data?.clusters : undefined,
+            enrich ? metrics.data : undefined,
+          )
+        : null,
+    [query.data, disk.data, disk.error, metrics.data, enrich],
+  )
   return { query, fleet }
 }
 
-function destinationCount(screen: CNPGScreen, fleet: CNPGFleet | null): { count?: number | null; title?: string } {
+// A failed disk read is stated per cluster; left undefined it would render as
+// still loading.
+function diskFailed(clusters: any[], err: unknown): CNPGDiskReading[] {
+  const reason = `Disk usage could not be read: ${err instanceof Error ? err.message : 'request failed'}`
+  return clusters.map((c) => ({ namespace: c?.metadata?.namespace ?? '', name: c?.metadata?.name ?? '', state: 'error', reason, claims: 0, measured: 0 }))
+}
+
+const UNMEASURED_NOTE = 'Disk use and replication lag are counted on the CloudNativePG views.'
+
+function destinationCount(screen: CNPGScreen, fleet: CNPGFleet | null, withMetrics: boolean): { count?: number | null; lowerBound?: boolean; title?: string } {
   if (!fleet) return {}
-  const lowerBound = fleet.incompleteKinds.length > 0 ? ' Some CloudNativePG data is not readable, so this is a lower bound.' : ''
+  const partial = fleet.incompleteKinds.length > 0
+  const note = partial ? ' Some CloudNativePG data is not readable, so this is a lower bound.' : ''
+  // Disk use and measured lag only ever add problems, so a count without them
+  // is a lower bound, and its zero is not "none".
+  const at = (count: number, what: string, unmeasured?: string) => {
+    const lowerBound = partial || !!unmeasured
+    const extra = unmeasured ? ` ${unmeasured}` : ''
+    if (lowerBound && count === 0) {
+      return {
+        count: null,
+        lowerBound: true,
+        title: partial ? `Unknown: some CloudNativePG data could not be read.${extra}` : `None found in the workspace read.${extra}`,
+      }
+    }
+    return { count, lowerBound, title: `${lowerBound ? 'At least ' : ''}${count} ${what}.${note}${extra}` }
+  }
   switch (screen) {
     case 'overview':
-      return { count: fleet.attentionCount, title: `${fleet.attentionCount} clusters need attention.${lowerBound}` }
+      return at(fleet.attentionCount, 'clusters need attention', withMetrics ? undefined : UNMEASURED_NOTE)
     case 'protection':
-      return { count: fleet.categoryCounts.protection, title: `${fleet.categoryCounts.protection} clusters with failing backups or WAL archiving.${lowerBound}` }
+      return at(fleet.categoryCounts.protection, 'clusters with failing backups or WAL archiving')
     case 'declarations':
-      return { count: fleet.categoryCounts.declarations, title: `${fleet.categoryCounts.declarations} clusters with declarations that are not reconciled.${lowerBound}` }
+      return at(fleet.categoryCounts.declarations, 'clusters with declarations that are not reconciled')
     case 'pooling':
-      return { count: fleet.categoryCounts.pooling, title: `${fleet.categoryCounts.pooling} clusters with Pooler problems.${lowerBound}` }
+      return at(fleet.categoryCounts.pooling, 'clusters with Pooler problems')
     default:
       return {}
   }
@@ -52,25 +98,29 @@ export function useCNPGSidebarWorkspace({
   apiResources,
   namespaces,
   active,
+  withMetrics = !!active,
 }: {
   apiResources: APIResource[] | undefined
   namespaces: string[]
   active?: { screen: CNPGScreen; child?: { label: string; title?: string } }
+  /** Count disk use and replication lag too. Off by default outside the CloudNativePG views: every Resources page renders this sidebar. */
+  withMetrics?: boolean
 }): Record<string, SidebarCategoryWorkspace> | undefined {
-  const navigate = useNavigate()
-  const discovered = cnpgDiscovered(apiResources)
-  const { fleet } = useCNPGFleet(namespaces, discovered)
+  const navigate = useCNPGNavigate()
+  const available = cnpgDiscovered(apiResources)
+  const { fleet } = useCNPGFleet(namespaces, available, withMetrics)
   const nsKey = namespaces.join(',')
 
   return useMemo(() => {
-    if (!discovered) return undefined
+    if (!available) return undefined
     const destinations = CNPG_SCREENS.map((s) => {
-      const { count, title } = destinationCount(s.id, fleet)
+      const { count, lowerBound, title } = destinationCount(s.id, fleet, withMetrics)
       return {
         id: s.id,
         label: s.label,
         icon: ICONS[s.id],
         count,
+        countLowerBound: lowerBound,
         countTitle: title,
         active: active?.screen === s.id,
         child: active?.screen === s.id ? active.child : undefined,
@@ -84,5 +134,5 @@ export function useCNPGSidebarWorkspace({
         scopeNote: nsKey ? `Counts for namespace ${nsKey.split(',').join(', ')}` : undefined,
       },
     }
-  }, [discovered, fleet, active?.screen, active?.child?.label, active?.child?.title, navigate, nsKey]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [available, fleet, withMetrics, active?.screen, active?.child?.label, active?.child?.title, navigate, nsKey]) // eslint-disable-line react-hooks/exhaustive-deps
 }

package/src/components/cnpg/workspaceRoute.ts

@@ -0,0 +1,23 @@
+import type { WorkspaceRoute } from '../../integrations/workspaceRoute'
+import { CNPG_SCREENS, parseCNPGRoute } from './routes'
+
+export const cnpgWorkspaceRoute: WorkspaceRoute = {
+  id: 'cnpg',
+  path: '/cnpg',
+  label: 'CloudNativePG',
+  navView: 'resources',
+  namespaceScope: 'view',
+  pageTitle(pathname) {
+    const route = parseCNPGRoute(pathname)
+    if (route.detail) return route.detail.name
+    const screen = CNPG_SCREENS.find(screen => screen.id === route.screen)
+    return `CloudNativePG ${screen?.label ?? 'Clusters'}`
+  },
+  contextSwitchSearch(pathname, search) {
+    // A detail's context pin prevents loading a same-named object after a switch.
+    const next = new URLSearchParams()
+    const context = search.get('ctx')
+    if (context && pathname.startsWith('/cnpg/')) next.set('ctx', context)
+    return next
+  },
+}

package/src/components/cost/ApplicationCostTab.test.ts

@@ -195,6 +195,13 @@ describe('getApplicationCostState', () => {
     ).toBe('not_found')
   })
 
+  it('does not report a cross-origin refusal as missing access', () => {
+    const refused = new ApiError('Radar refused this request because it came from http://radar.internal', 403, {
+      error_code: 'cross_origin_refused',
+    })
+    expect(getApplicationCostState(undefined, undefined, { currentError: refused })).toBe('load_error')
+  })
+
   it('queries only steady-state workload kinds', () => {
     const workloads = [
       { kind: 'Deployment', namespace: 'prod', name: 'api' },

package/src/components/cost/ApplicationCostTab.tsx

@@ -3,6 +3,7 @@ import { AlertCircle, Coins, HelpCircle, Loader2, TrendingUp } from 'lucide-reac
 import type { AppRow, AppWorkload } from '@skyhook-io/k8s-ui'
 import {
   COST_DISCOVERY_GRACE_MS,
+  crossOriginRefusalMessage,
   useOpenCostApplicationCost,
   useOpenCostApplicationCostTrend,
   type CostTimeRange,
@@ -149,7 +150,8 @@ export function ApplicationCostTab({
         />
       )
     }
-    return <ApplicationCostUnavailable state={state} settingsAvailable={settingsAvailable} />
+    const refusal = crossOriginRefusalMessage(currentQuery.error) ?? crossOriginRefusalMessage(trendQuery.error)
+    return <ApplicationCostUnavailable state={state} message={refusal} settingsAvailable={settingsAvailable} />
   }
 
   const current = currentQuery.data
@@ -512,11 +514,11 @@ function applicationCostKey(ref: { kind: string; namespace: string; name: string
 function reasonLabel(reason?: CostUnavailableReason) {
   if (reason === 'no_prometheus') return 'Metrics backend not found'
   if (reason === 'no_cost_source') return 'Cost source not found'
-  if (reason === 'query_error') return 'Cost query failed'
+  if (reason === 'query_error') return 'Cost data unavailable'
   if (reason === 'access_denied') return 'No access to this workload'
   if (reason === 'not_found') return 'Workload not found'
   if (reason === 'configuration_mismatch') return 'Kubecost settings are not valid for this cluster'
-  if (reason === 'deployment_configuration_error') return 'Radar cost deployment is misconfigured'
+  if (reason === 'deployment_configuration_error') return 'Radar configuration is invalid'
   if (reason === 'metrics_settings_error') return 'Saved metrics settings need review'
   if (reason === 'cost_settings_error') return 'Saved cost settings need review'
   return 'No workload cost metrics'
@@ -568,10 +570,8 @@ function ApplicationCostUnavailable({
     costIntegrationUnavailableMessage(state, settingsAvailable) ??
     (state === 'no_prometheus'
       ? 'No compatible metrics backend was found. OpenCost application cost requires OpenCost metrics in a PromQL-compatible backend.'
-      : state === 'query_error'
-        ? 'Cost data is temporarily unavailable. A metrics backend was found, but application cost queries failed.'
-        : state === 'history_unsupported'
-          ? 'Historical application cost is not available for Kubecost yet.'
+      : state === 'history_unsupported'
+        ? 'Historical application cost is not available for Kubecost yet.'
         : state === 'access_denied'
           ? 'Cost data is unavailable because these workloads are not accessible with your current permissions.'
           : state === 'not_found'

package/src/components/cost/CostView.test.ts

@@ -17,7 +17,8 @@ describe('costUnavailableMessage', () => {
     expect(costUnavailableMessage('source_unavailable')).toContain('Settings → Cost')
     expect(costUnavailableMessage('authentication_error')).toContain('API key')
     expect(costUnavailableMessage('configuration_mismatch')).toContain('not valid for this cluster')
-    expect(costUnavailableMessage('deployment_configuration_error')).toContain('Helm cost values')
+    expect(costUnavailableMessage('deployment_configuration_error')).toContain('launch flags')
+    expect(costUnavailableMessage('deployment_configuration_error')).toContain('Helm values')
   })
 
   it('distinguishes a scoped empty result from missing source data', () => {

package/src/components/cost/CostView.tsx

@@ -402,8 +402,6 @@ export function costUnavailableMessage(
       return 'No compatible cost source found — connect OpenCost metrics through a PromQL-compatible backend or configure Kubecost'
     case 'no_metrics':
       return 'Cost data is not ready — the selected source returned no allocation data'
-    case 'query_error':
-      return 'Cost data is temporarily unavailable — the selected source query failed'
     case 'access_denied':
       return 'You do not have access to view cluster cost data'
     default:

package/src/components/cost/WorkloadCostTab.tsx

@@ -363,10 +363,8 @@ function WorkloadCostUnavailable({
     costIntegrationUnavailableMessage(state, settingsAvailable) ??
     (state === 'no_prometheus'
       ? 'No compatible metrics backend was found. OpenCost workload cost requires OpenCost metrics in a PromQL-compatible backend.'
-      : state === 'query_error'
-        ? 'Cost data is temporarily unavailable. A metrics backend was found, but workload cost queries failed.'
-        : state === 'history_unsupported'
-          ? 'Historical workload cost is not available for Kubecost yet.'
+      : state === 'history_unsupported'
+        ? 'Historical workload cost is not available for Kubecost yet.'
         : state === 'access_denied'
           ? 'You do not have access to view cost for this workload.'
           : state === 'not_found'

package/src/components/cost/errors.ts

@@ -1,7 +1,9 @@
-import { ApiError, type CostUnavailableReason } from '../../api/client'
+import { ApiError, crossOriginRefusalMessage, type CostUnavailableReason } from '../../api/client'
 
 export function costUnavailableReasonFromError(error: unknown): CostUnavailableReason | undefined {
   if (!(error instanceof ApiError)) return undefined
+  // Not a permission problem: the server's message says what to fix.
+  if (crossOriginRefusalMessage(error)) return undefined
   if (error.status === 403) return 'access_denied'
   if (error.status === 404) return 'not_found'
   return undefined

package/src/components/cost/source.test.ts

@@ -58,3 +58,13 @@ describe('cost source presentation', () => {
     expect(costIntegrationUnavailableMessage('authentication_error', false)).not.toContain('Settings')
   })
 })
+
+it('gives connection guidance without claiming an unreachable source ran a query', () => {
+  const standalone = costIntegrationUnavailableMessage('query_error', true)
+  expect(standalone).toContain('Settings → Metrics')
+  expect(standalone).toContain('Settings → Cost')
+  expect(standalone).not.toContain('query failed')
+  const embedded = costIntegrationUnavailableMessage('query_error', false)
+  expect(embedded).toContain('Ask your operator')
+  expect(embedded).not.toContain('Settings')
+})

package/src/components/cost/source.ts

@@ -107,6 +107,10 @@ export function costIntegrationUnavailableMessage(
   settingsAvailable = true,
 ): string | undefined {
   switch (reason) {
+    case 'query_error':
+      return settingsAvailable
+        ? 'The selected cost source could not provide data. Check its connection in Settings → Metrics (OpenCost) or Settings → Cost (Kubecost).'
+        : 'The selected cost source could not provide data. Ask your operator to check its connection and query health.'
     case 'no_cost_source':
       return settingsAvailable
         ? 'No compatible cost source was found. Connect OpenCost metrics in Settings → Metrics or configure Kubecost in Settings → Cost.'
@@ -120,7 +124,7 @@ export function costIntegrationUnavailableMessage(
     case 'cost_settings_error':
       return 'This cluster’s saved cost settings need review before cost data can load. Review them in Settings → Cost.'
     case 'deployment_configuration_error':
-      return 'Cost collection is misconfigured by this Radar deployment. Update its environment variables or Helm cost values, then restart Radar.'
+      return "Radar's operator-supplied cost or metrics configuration is invalid. Check local launch flags or the deployment environment variables and Helm values."
     case 'authentication_error':
       return settingsAvailable
         ? 'Kubecost rejected the configured API key. Update it in Settings → Cost.'

package/src/components/diagnose/AgentSetupNotice.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { AgentSetupNotice } from "./AgentSetupNotice";
+import type { DiagnoseSetup } from "./DiagnoseContext";
+
+const render = (
+  setupState: DiagnoseSetup,
+  { checkingAgents = false, cliOverride = false } = {},
+) =>
+  renderToStaticMarkup(
+    <AgentSetupNotice
+      setupState={setupState}
+      cliOverride={cliOverride}
+      checkingAgents={checkingAgents}
+      agentsCheckFailed={false}
+      recheckAgents={async () => {}}
+    />,
+  );
+
+describe("AgentSetupNotice", () => {
+  it("offers installs and a re-check, never a restart, when no CLI is found", () => {
+    const html = render("needs-install");
+    expect(html).toContain("Claude Code");
+    expect(html).toContain("OpenCode");
+    expect(html).toContain("Check again");
+    expect(html).not.toMatch(/restart/i);
+    // A desktop user can't set an environment variable for a Dock launch.
+    expect(html).not.toContain("RADAR_AI_CLI_BIN");
+  });
+
+  it("shows the check in progress", () => {
+    const html = render("needs-install", { checkingAgents: true });
+    expect(html).toContain("Checking…");
+    expect(html).toContain("disabled");
+  });
+
+  it("names the override only when the server says it is set", () => {
+    for (const state of ["needs-restart", "needs-install"] as const) {
+      const html = render(state, { cliOverride: true });
+      expect(html).toContain("RADAR_AI_CLI_BIN");
+      expect(html).toContain("restart Radar");
+      // Detection is off while the variable is set, so an install can't help.
+      expect(html).not.toContain("Install one of these");
+      // A working file put back at the pinned path is picked up without one.
+      expect(html).toContain("Check again");
+    }
+  });
+
+  it("says nothing it can't know when an agent is reported but off", () => {
+    // Radar Hub reports a hosted agent that is supported but not enabled when
+    // its own runner is down: no CLI, no startup output, no override.
+    const html = render("needs-restart");
+    expect(html).toContain("aren&#x27;t available right now");
+    expect(html).not.toMatch(/RADAR_AI_CLI_BIN|agent CLI|startup output/);
+    expect(html).not.toContain("Install one of these");
+    expect(html).toContain("Check again");
+  });
+});

package/src/components/diagnose/AgentSetupNotice.tsx

@@ -1,20 +1,31 @@
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
+import clsx from "clsx";
 import { Sparkles, Copy, Check, ExternalLink, RotateCw } from "lucide-react";
+import { copyText } from "@skyhook-io/k8s-ui/utils/clipboard";
 import { SUPPORTED_AGENTS, type AgentInstall } from "./agentCatalog";
 import { type DiagnoseSetup } from "./DiagnoseContext";
+import { openExternal } from "../../utils/navigation";
 
-function CopyButton({ text }: { text: string }) {
+const REPORT_URL =
+  "https://github.com/skyhook-io/radar/issues/new?labels=bug&template=bug_report.md";
+
+function CopyButton({ text, label }: { text: string; label: string }) {
   const [copied, setCopied] = useState(false);
   return (
     <button
       type="button"
       onClick={() => {
-        void navigator.clipboard?.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1100);
+        // The shared helper, not navigator.clipboard directly: a Radar served
+        // over plain HTTP is an insecure origin where the async API rejects,
+        // and the tick must not claim a copy that didn't happen.
+        void copyText(text).then((ok) => {
+          if (!ok) return;
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1100);
+        });
       }}
       className="shrink-0 rounded-md p-1 text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
-      aria-label={copied ? "Copied" : "Copy install command"}
+      aria-label={copied ? "Copied" : label}
     >
       {copied ? (
         <Check className="h-3.5 w-3.5 text-emerald-500" />
@@ -46,68 +57,148 @@ function AgentRow({ agent }: { agent: AgentInstall }) {
         <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-xs text-theme-text-secondary">
           {agent.install}
         </code>
-        <CopyButton text={agent.install} />
+        <CopyButton text={agent.install} label="Copy install command" />
       </div>
     </div>
   );
 }
 
-// Shown in the AI surface's Home when investigations are eligible in this deployment
-// but not runnable yet — either no agent CLI is installed ("needs-install") or a
-// supported one appeared after Radar booted ("needs-restart"). Radar decides the
-// engine once at startup, so a fresh install needs a restart to take effect.
+function CheckAgainButton({
+  checking,
+  onCheck,
+}: {
+  checking: boolean;
+  onCheck: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={checking}
+      onClick={onCheck}
+      className="btn-brand mt-4 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm"
+    >
+      <RotateCw className={clsx("h-3.5 w-3.5", checking && "animate-spin")} />
+      {checking ? "Checking…" : "Check again"}
+    </button>
+  );
+}
+
+// Shown in the AI surface's Home when investigations are eligible here but not
+// runnable yet:
+//  - cliOverride: RADAR_AI_CLI_BIN pins the engine to one CLI, so detection is
+//    off and installing another changes nothing. Investigations being off means
+//    the variable names a file Radar can't run. A working file put at that path
+//    is picked up on the next check; changing the variable needs a restart.
+//  - "needs-install": no agent CLI found. The server picks one up as soon as
+//    it's installed, so the notice offers a re-check rather than a restart.
+//  - "needs-restart": an agent is reported but investigations are off. Locally
+//    that's a race with an install in progress; an embedding host reports it
+//    when its own runner is down. Neither has a cause the user can act on, so
+//    say only that and offer a re-check.
 export function AgentSetupNotice({
   setupState,
+  cliOverride,
+  checkingAgents,
+  agentsCheckFailed,
+  recheckAgents,
 }: {
   setupState: DiagnoseSetup;
+  cliOverride: boolean;
+  checkingAgents: boolean;
+  agentsCheckFailed: boolean;
+  recheckAgents: () => Promise<void>;
+}) {
+  // The state the panel was in when a check started. "Still…" is only true when
+  // the finished check left it there.
+  const [checkedState, setCheckedState] = useState<DiagnoseSetup | null>(null);
+  const check = () => {
+    void recheckAgents().then(() => setCheckedState(setupState));
+  };
+  const showResult = checkedState === setupState && !checkingAgents;
+  const unreachable = showResult && agentsCheckFailed && (
+    <p className="mt-2 text-xs text-theme-text-secondary">
+      Couldn&apos;t check. Try again.
+    </p>
+  );
+
+  if (cliOverride) {
+    return (
+      <SetupFrame title="Radar can't run your RADAR_AI_CLI_BIN">
+        <p className="mt-1 text-sm text-theme-text-secondary">
+          Fix the path, or remove it and restart Radar.
+        </p>
+        <CheckAgainButton checking={checkingAgents} onCheck={check} />
+        {unreachable ||
+          (showResult && (
+            <p className="mt-2 text-xs text-theme-text-secondary">
+              Still can&apos;t run it.
+            </p>
+          ))}
+      </SetupFrame>
+    );
+  }
+  if (setupState === "needs-restart") {
+    return (
+      <SetupFrame title="AI investigations aren't available right now">
+        <p className="mt-1 text-sm text-theme-text-secondary">
+          Try again in a moment.
+        </p>
+        <CheckAgainButton checking={checkingAgents} onCheck={check} />
+        {unreachable ||
+          (showResult && (
+            <p className="mt-2 text-xs text-theme-text-secondary">
+              Still not available.
+            </p>
+          ))}
+      </SetupFrame>
+    );
+  }
+  return (
+    <SetupFrame title="Set up AI investigations">
+      <p className="mt-1 text-sm text-theme-text-secondary">
+        Radar runs investigations through a coding agent CLI on your own
+        machine, with no Radar cloud and no API key. Install one of these:
+      </p>
+      <div className="mt-4 flex flex-col gap-2.5">
+        {SUPPORTED_AGENTS.map((a) => (
+          <AgentRow key={a.name} agent={a} />
+        ))}
+      </div>
+      <CheckAgainButton checking={checkingAgents} onCheck={check} />
+      {unreachable ||
+        (showResult && (
+          <p className="mt-2 text-xs text-theme-text-secondary">
+            Still not found. Already installed one?{" "}
+            <button
+              type="button"
+              onClick={() => openExternal(REPORT_URL)}
+              className="underline hover:text-theme-text-primary"
+            >
+              Report it
+            </button>
+            .
+          </p>
+        ))}
+    </SetupFrame>
+  );
+}
+
+function SetupFrame({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
 }) {
-  const needsRestart = setupState === "needs-restart";
   return (
     <div className="mx-auto max-w-md px-1 py-6">
       <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl border border-accent/30 bg-accent/5">
         <Sparkles className="h-5 w-5 text-accent" />
       </div>
       <h3 className="text-base font-semibold text-theme-text-primary">
-        {needsRestart
-          ? "Restart Radar to enable AI investigations"
-          : "Set up AI investigations"}
+        {title}
       </h3>
-      <p className="mt-1 text-sm text-theme-text-secondary">
-        {needsRestart ? (
-          <>
-            A supported agent CLI is now installed, but Radar started before it
-            was — restart Radar to pick it up. Investigations then run locally
-            on your machine, keyless, using your own agent.
-          </>
-        ) : (
-          <>
-            Radar runs investigations through a coding agent CLI on your own
-            machine — no Radar cloud, no API key. Install one of these, then
-            restart Radar:
-          </>
-        )}
-      </p>
-
-      {!needsRestart && (
-        <div className="mt-4 flex flex-col gap-2.5">
-          {SUPPORTED_AGENTS.map((a) => (
-            <AgentRow key={a.name} agent={a} />
-          ))}
-        </div>
-      )}
-
-      {/* The panel only re-reads /api/agents on load, so after installing or
-          restarting the user needs a way to refresh in place rather than
-          hunting for a manual browser reload. */}
-      <button
-        type="button"
-        onClick={() => window.location.reload()}
-        className="btn-brand mt-4 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm"
-      >
-        <RotateCw className="h-3.5 w-3.5" />
-        {needsRestart ? "Reload after restarting" : "Reload after installing"}
-      </button>
-
+      {children}
       <p className="mt-4 text-xs text-theme-text-tertiary">
         Your agent runs locally. Resource details and logs are sent to its model
         provider under your account, not to Radar.

package/src/components/diagnose/ApplyDialog.ack.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+import type { ReactNode } from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { evaluateGitOpsWriteGuard } from "@skyhook-io/k8s-ui/utils/gitops-write-guard";
+import { ApplyDialog } from "./parts";
+
+vi.mock("@skyhook-io/k8s-ui/components/ui/DialogPortal", () => ({
+  DialogPortal: ({ open, children }: { open: boolean; children: ReactNode }) => (open ? children : null),
+}));
+
+const target = { kind: "Deployment", group: "apps", namespace: "dev", name: "api" };
+const owner = { tool: "argocd" as const, kind: "applications" as const, namespace: "argocd", name: "api" };
+const writes = [{ scope: "spec" as const }];
+// Ownership unknown at first; then the owner resolves to an Argo CD Application.
+const guardWith = (resolved: boolean) =>
+  resolved
+    ? evaluateGitOpsWriteGuard({ target, owner, writes, evidence: { uid: "u", resourceVersion: "1", owner: null, policy: { tool: "argocd", auto: true, selfHeal: true, prune: false, suspended: null }, paths: [] } })
+    : evaluateGitOpsWriteGuard({ target, owner: null, writes, ownershipError: "Radar hasn't mapped this resource's owners yet, so it can't tell whether a GitOps tool or Helm manages it." });
+
+let container: HTMLDivElement;
+afterEach(() => container?.remove());
+
+it("asks again when the verdict changes after the user acknowledged", async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const render = (resolved: boolean) =>
+    root.render(
+      <ApplyDialog open onClose={() => {}} onConfirm={() => {}} agentLabel="Local agent" resourceLabel="Deployment dev/api" context="kind-dev" fix="Raise the memory limit." gitOpsGuard={guardWith(resolved)} />,
+    );
+  const applyButton = () => [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Apply fix"))!;
+  try {
+    await act(async () => render(false));
+    expect(applyButton().disabled).toBe(true);
+    const checkbox = container.querySelector<HTMLInputElement>('input[type="checkbox"]')!;
+    await act(async () => checkbox.click());
+    expect(applyButton().disabled).toBe(false);
+    await act(async () => render(true));
+    expect(applyButton().disabled).toBe(true);
+    expect(container.querySelector<HTMLInputElement>('input[type="checkbox"]')!.checked).toBe(false);
+  } finally {
+    await act(async () => root.unmount());
+  }
+});