@skyhook-io/radar-app 1.16.3 → 1.17.0

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());
+  }
+});

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

@@ -3,6 +3,29 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 import { ApplyDialog } from "./parts";
 import { AgentSetupNotice } from "./AgentSetupNotice";
+import { evaluateGitOpsWriteGuard } from "@skyhook-io/k8s-ui/utils/gitops-write-guard";
+
+const target = { kind: "Deployment", group: "apps", namespace: "dev", name: "api" };
+const APPLY_WRITES = [{ scope: "spec" as const }];
+const unmanaged = evaluateGitOpsWriteGuard({ target, owner: null, writes: APPLY_WRITES });
+const argoManaged = evaluateGitOpsWriteGuard({
+  target,
+  owner: { tool: "argocd", kind: "applications", namespace: "argocd", name: "api" },
+  writes: APPLY_WRITES,
+  evidence: {
+    uid: "u",
+    resourceVersion: "1",
+    owner: null,
+    policy: { tool: "argocd", auto: true, selfHeal: true, prune: false, suspended: null },
+    paths: [],
+  },
+});
+
+function applyButton(html: string) {
+  return html
+    .match(/<button\b[^>]*>[\s\S]*?<\/button>/g)
+    ?.find((button) => button.includes("Apply fix"));
+}
 
 vi.mock("@skyhook-io/k8s-ui/components/ui/DialogPortal", () => ({
   DialogPortal: ({ open, children }: { open: boolean; children: ReactNode }) =>
@@ -25,6 +48,7 @@ describe("Apply confirmation context", () => {
           resourceLabel="Deployment dev/api"
           context={context}
           fix="Only after verifying credentials, update the Secret reference."
+          gitOpsGuard={unmanaged}
         />,
       );
       expect(html).toContain("Cluster:");
@@ -48,23 +72,52 @@ describe("Apply confirmation context", () => {
         resourceLabel="Deployment dev/api"
         context="kind-dev"
         fix="Update its configuration"
-        managedBy="Argo CD"
+        gitOpsGuard={argoManaged}
         confidence={0.3}
       />,
     );
+    expect(html).toContain("Argo CD Application argocd/api may revert this change.");
     expect(html).toContain("I understand Argo CD may revert this");
-    const applyButton = html
-      .match(/<button\b[^>]*>[\s\S]*?<\/button>/g)
-      ?.find((button) => button.includes("Apply fix"));
-    expect(applyButton).toContain('disabled=""');
+    expect(applyButton(html)).toContain('disabled=""');
     expect(html).toContain("low confidence");
     expect(html.match(/kubeconfig/g)).toHaveLength(1);
   });
 });
 
+describe("Apply GitOps gate", () => {
+  const props = {
+    open: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    agentLabel: "Local agent",
+    resourceLabel: "Deployment dev/api",
+    context: "kind-dev",
+  };
+
+  it("enables Apply for an unmanaged target without acknowledgement", () => {
+    const html = renderToStaticMarkup(<ApplyDialog {...props} gitOpsGuard={unmanaged} />);
+    expect(applyButton(html)).not.toContain('disabled=""');
+    expect(html).not.toContain('type="checkbox"');
+  });
+
+  it("blocks Apply while ownership is being checked or unknown", () => {
+    const pending = evaluateGitOpsWriteGuard({ target, owner: null, ownerPending: true, writes: APPLY_WRITES });
+    const checking = renderToStaticMarkup(<ApplyDialog {...props} gitOpsGuard={pending} />);
+    expect(checking).toContain("Checking GitOps ownership");
+    expect(applyButton(checking)).toContain('disabled=""');
+    expect(applyButton(renderToStaticMarkup(<ApplyDialog {...props} />))).toContain('disabled=""');
+  });
+});
+
 it("distinguishes local execution from sending resource data to the model provider", () => {
   const html = renderToStaticMarkup(
-    <AgentSetupNotice setupState="needs-install" />,
+    <AgentSetupNotice
+      setupState="needs-install"
+      cliOverride={false}
+      checkingAgents={false}
+      agentsCheckFailed={false}
+      recheckAgents={async () => {}}
+    />,
   );
   expect(html).toContain("Your agent runs locally");
   expect(html).toContain("model provider under your account, not to Radar");

package/src/components/diagnose/ApplyDialog.tsx

@@ -8,6 +8,12 @@ import {
   RefreshCw,
 } from "lucide-react";
 import { DialogPortal } from "@skyhook-io/k8s-ui/components/ui/DialogPortal";
+import { GitOpsWriteWarning } from "@skyhook-io/k8s-ui";
+import {
+  canConfirmGitOpsWrite,
+  gitOpsWriteGuardKey,
+  type GitOpsWriteGuard,
+} from "@skyhook-io/k8s-ui/utils/gitops-write-guard";
 import { parseContextName } from "../../utils/context-name";
 import type { Diagnosis, ApplyMutationOutcome } from "../../api/diagnose";
 import { AIMarkdown, CopyButton } from "./AIMarkdown";
@@ -24,7 +30,8 @@ export function ApplyDialog({
   fix,
   reason,
   precondition,
-  managedBy,
+  gitOpsGuard,
+  onOpenGitOpsOwner,
   confidence,
 }: {
   open: boolean;
@@ -38,7 +45,9 @@ export function ApplyDialog({
   reason?: string;
   /** The condition the agent attached to this step; shown before the operator confirms. */
   precondition?: string;
-  managedBy?: string; // GitOps/Helm owner of the resource, if any
+  /** GitOps/Helm write guard for the target; undefined blocks Apply. */
+  gitOpsGuard?: GitOpsWriteGuard;
+  onOpenGitOpsOwner?: () => void;
   confidence?: number;
 }) {
   const titleId = useId();
@@ -47,14 +56,19 @@ export function ApplyDialog({
   // A GitOps/Helm-managed resource needs an explicit acknowledgment before applying
   // a direct change — it's the canonical footgun (the controller reverts it). Gating
   // (not just warning) makes the user opt into "yes, I know this may be undone."
+  // Apply also waits until ownership has been checked.
   // TODO(SKY-1075): once Radar can connect the user's SCM (GitHub/GitLab/…), replace
   //   direct apply on managed resources with "open a PR against the Git source"
   //   instead — the durable fix. See Linear SKY-1075.
-  const [acked, setAcked] = useState(false);
+  // The guard key the acknowledgment was given for: a different verdict (the
+  // owner resolved, the policy changed) asks again.
+  const guardKey = gitOpsWriteGuardKey(gitOpsGuard);
+  const [ackedKey, setAckedKey] = useState("");
   useEffect(() => {
-    if (open) setAcked(false);
+    if (open) setAckedKey("");
   }, [open]);
-  const applyBlocked = !!managedBy && !acked;
+  const acked = Boolean(guardKey) && ackedKey === guardKey;
+  const applyBlocked = !canConfirmGitOpsWrite(gitOpsGuard, acked);
   return (
     <DialogPortal
       ariaLabelledBy={titleId}
@@ -130,29 +144,13 @@ export function ApplyDialog({
         )}
       </div>
       <div className="shrink-0 space-y-2 p-4">
-        {/* The star warning: when we KNOW a controller owns this resource, a live
-            change reverts on the next reconcile — say so authoritatively. */}
-        {managedBy && (
-          <div className="space-y-2 rounded border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-theme-text-primary">
-            <div className="flex items-start gap-2">
-              <RefreshCw className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
-              <span>
-                <span className="font-medium">Managed by {managedBy}.</span>{" "}
-                Unless you turn off auto-sync, a direct change here will be
-                undone within minutes when {managedBy} re-syncs from Git — the
-                durable fix is to change it in Git (the {managedBy} source).
-              </span>
-            </div>
-            <label className="flex cursor-pointer items-center gap-2 pl-6 text-xs text-theme-text-secondary">
-              <input
-                type="checkbox"
-                checked={acked}
-                onChange={(e) => setAcked(e.target.checked)}
-                className="h-3.5 w-3.5 accent-amber-500"
-              />
-              I understand {managedBy} may revert this — apply anyway.
-            </label>
-          </div>
+        {gitOpsGuard && (
+          <GitOpsWriteWarning
+            guard={gitOpsGuard}
+            acknowledged={acked}
+            onAcknowledgedChange={(value) => setAckedKey(value ? guardKey : "")}
+            onOpenOwner={onOpenGitOpsOwner}
+          />
         )}
         {lowConfidence && (
           <div className="flex items-start gap-2 rounded border border-theme-border bg-theme-elevated p-3 text-sm text-theme-text-secondary">

package/src/components/diagnose/DiagnoseContext.test.ts

@@ -8,6 +8,7 @@ import {
   isInvestigationWorkspacePath,
   shouldExitUnavailableWorkspace,
   workspaceRunIDFromPath,
+  resolveSetupState,
 } from "./DiagnoseContext";
 
 describe("investigation workspace routes", () => {
@@ -103,3 +104,45 @@ describe("investigationPanelFillsViewport", () => {
     expect(investigationPanelFillsViewport(1200, 1000)).toBe(true);
   });
 });
+
+describe("resolveSetupState", () => {
+  const base = {
+    available: false,
+    eligibilityResolved: true,
+    eligible: true,
+    supportedAgentCount: 0,
+  };
+
+  it("does not call an unanswered probe a deployment restriction", () => {
+    // eligible starts false and the probe's catch leaves it false, so both the
+    // in-flight and the failed request land here.
+    expect(
+      resolveSetupState({
+        ...base,
+        eligibilityResolved: false,
+        eligible: false,
+      }),
+    ).toBe("unknown");
+  });
+
+  it("reports off only once the probe said eligible: false", () => {
+    expect(resolveSetupState({ ...base, eligible: false })).toBe("off");
+  });
+
+  it("separates a CLI that appeared after boot from none at all", () => {
+    expect(resolveSetupState({ ...base, supportedAgentCount: 1 })).toBe(
+      "needs-restart",
+    );
+    expect(resolveSetupState(base)).toBe("needs-install");
+  });
+
+  it("lets a working engine win over an unresolved probe", () => {
+    expect(
+      resolveSetupState({
+        ...base,
+        available: true,
+        eligibilityResolved: false,
+      }),
+    ).toBe("ready");
+  });
+});