@oneuptime/common 14.0.11 → 14.0.12

package/Tests/App/Dashboard/KubernetesClusterAiPage.test.tsx

@@ -40,9 +40,21 @@ import {
   getAiAgentWriteDisclosure,
 } from "../../../../App/FeatureSet/Dashboard/src/Pages/Kubernetes/Utils/KubernetesAiAccessSetup";
 import {
-  REMEDIATION_MODE_LABELS,
+  INVESTIGATION_ON_SENTENCE,
+  KUBECTL_ALLOWLIST_FIELD_DESCRIPTION,
+  REMEDIATION_MODE_OPTION_DESCRIPTIONS,
+  REMEDIATION_MODE_SHORT_NAMES,
   REMEDIATION_MODE_SUMMARIES,
+  getEveryModeProtections,
 } from "../../../../App/FeatureSet/Dashboard/src/Pages/Kubernetes/Utils/KubernetesAiAccessSettings";
+import {
+  AI_ACCESS_PROTECTIONS_TITLE,
+  AI_FIXES_MODE_TONES,
+  formatAiAccessProtections,
+  getAiFixesFieldDescription,
+  getAiFixesOffHint,
+  getAiInvestigationOffSentence,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/AiAccess/AiAccessModes";
 import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
 import RouteMap from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
 import KubernetesCluster from "../../../Models/DatabaseModels/KubernetesCluster";
@@ -89,7 +101,9 @@ jest.mock("react-i18next", () => {
  * the permission snapshot stubbed. It is three cards at most: the
  * "Kubernetes AI agent" card in each of its states (connected, offline,
  * not installed, the previous in-cluster Runner, an advanced Runner),
- * "Needs attention" only when the server has gaps, and "What AI may do"
+ * "Needs attention" only when the server has gaps — as ONE item: a
+ * headline and a short step per gap — and "What AI may do" (one row for
+ * investigation, one for fixes, each with a badge and one plain sentence)
  * with its Change modal — whose loosening rules, confirmations and
  * advanced-binding pickers carry over from the old AI page, with Off ->
  * enabled now needing the admin set.
@@ -553,6 +567,47 @@ function menuOptions(): Array<HTMLElement> {
     });
 }
 
+/*
+ * The Change form walks two steps when it asks a Runner or credential
+ * question - "Investigation & Fixes", then "Runner & Credential" - and is
+ * one page otherwise. Every step already holds the saved answer, so the
+ * step list opens the second directly.
+ */
+async function openRunnerStep(dialog: HTMLElement): Promise<void> {
+  const progress: HTMLElement = await within(dialog).findByRole(
+    "navigation",
+    { name: "Progress" },
+    { timeout: WAIT_TIMEOUT },
+  );
+  fireEvent.click(within(progress).getByText("Runner & Credential"));
+  await waitFor(
+    () => {
+      expect(progress.querySelector('[aria-current="step"]')?.textContent).toBe(
+        "Runner & Credential",
+      );
+    },
+    { timeout: WAIT_TIMEOUT },
+  );
+}
+
+/*
+ * A form that asks no Runner or credential question is one page. The form
+ * opens on its first step in an effect after its first render, so let that
+ * run before saying there is no step list; otherwise this passes on the
+ * render before a step list would have appeared.
+ */
+async function expectNoSteps(dialog: HTMLElement): Promise<void> {
+  await act(async (): Promise<void> => {
+    await Promise.resolve();
+  });
+  expect(
+    within(dialog).queryByRole("navigation", { name: "Progress" }),
+  ).not.toBeInTheDocument();
+  expect(
+    within(dialog).queryByTestId("modal-footer-next-button"),
+  ).not.toBeInTheDocument();
+}
+
 async function openDropdown(
   dialog: HTMLElement,
   name: RegExp,
@@ -572,21 +627,46 @@ async function openDropdown(
   });
 }
 
-async function pickOption(
+// The Change modal's Fixes picker: one card (role "radio") per mode.
+function modeField(dialog: HTMLElement): HTMLElement {
+  return within(dialog).getByTestId("ai-remediation-mode-field");
+}
+
+function modeCards(dialog: HTMLElement): Array<HTMLElement> {
+  return within(modeField(dialog)).getAllByRole("radio");
+}
+
+// Each card's title, in the order the picker shows them.
+function modeCardTitles(dialog: HTMLElement): Array<string> {
+  return modeCards(dialog).map((card: HTMLElement): string => {
+    return card.querySelector("span.font-semibold")?.textContent || "";
+  });
+}
+
+function modeCard(
   dialog: HTMLElement,
-  name: RegExp,
-  optionText: string,
-): Promise<void> {
-  await openDropdown(dialog, name);
-  const option: HTMLElement | undefined = menuOptions().find(
-    (candidate: HTMLElement): boolean => {
-      return candidate.textContent === optionText;
-    },
-  );
-  if (!option) {
-    throw new Error(`No option "${optionText}" in the ${name} dropdown.`);
+  mode: KubernetesAiRemediationMode,
+): HTMLElement {
+  return within(modeField(dialog)).getByTestId(`card-select-option-${mode}`);
+}
+
+function pickMode(
+  dialog: HTMLElement,
+  mode: KubernetesAiRemediationMode,
+): void {
+  fireEvent.click(modeCard(dialog, mode));
+  expect(modeCard(dialog, mode)).toHaveAttribute("aria-checked", "true");
+}
+
+// The "What AI may do" card, by its title.
+async function settingsCard(): Promise<HTMLElement> {
+  const card: HTMLElement | null = (
+    await findText(SETTINGS_CARD_TITLE)
+  ).closest('[data-testid="card"]');
+  if (!card) {
+    throw new Error(`"${SETTINGS_CARD_TITLE}" is not inside a card.`);
   }
-  fireEvent.click(option);
+  return card;
 }
 
 /*
@@ -1136,7 +1216,7 @@ describe("Needs attention", () => {
     expect(screen.getByTestId("ai-agent-ready")).toBeInTheDocument();
   });
 
-  test("lists one row per server gap with its title and next step", async () => {
+  test("merges every server gap into one item: a headline, then a numbered step each", async () => {
     serve(
       makeStatus({
         isInvestigationReady: false,
@@ -1149,17 +1229,333 @@ describe("Needs attention", () => {
     );
     openAgentPage();
 
-    const list: HTMLElement = await findTestId("ai-agent-gaps");
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    expect(screen.getAllByTestId("ai-agent-attention")).toHaveLength(1);
     expect(screen.getByText(GAPS_CARD_TITLE)).toBeInTheDocument();
-    const rows: Array<HTMLElement> = within(list).getAllByRole("listitem");
-    expect(rows).toHaveLength(2);
-    expect(rows[0]).toHaveTextContent("Title of ai_balance_insufficient");
-    expect(rows[0]).toHaveTextContent("Next step for ai_balance_insufficient");
-    expect(rows[1]).toHaveTextContent("Title of llm_provider_missing");
+    expect(
+      within(item).getByTestId("ai-agent-attention-title"),
+    ).toHaveTextContent("OneUptime AI can't investigate this cluster");
+
+    // The fixes-off choice is not a step.
+    const steps: Array<HTMLElement> = within(
+      within(item).getByTestId("ai-agent-gaps"),
+    ).getAllByRole("listitem");
+    expect(steps).toHaveLength(2);
+    expect(steps[0]).toHaveAttribute(
+      "data-testid",
+      "ai-agent-gap-ai_balance_insufficient",
+    );
+    expect(
+      within(steps[0]!).getByTestId("ai-agent-gap-number"),
+    ).toHaveTextContent("1.");
+    expect(steps[0]).toHaveTextContent(
+      "Add AI credits to this project, or turn on auto-recharge.",
+    );
+    expect(steps[1]).toHaveAttribute(
+      "data-testid",
+      "ai-agent-gap-llm_provider_missing",
+    );
+    expect(
+      within(steps[1]!).getByTestId("ai-agent-gap-number"),
+    ).toHaveTextContent("2.");
+    expect(steps[1]).toHaveTextContent(
+      "Add an AI provider for this project, or use OneUptime AI credits.",
+    );
+
+    // Not a row per gap with the server's title and next step any more.
+    expect(item).not.toHaveTextContent("Title of");
+    expect(item).not.toHaveTextContent("Next step for");
+    expect(screen.queryByText(/Each item stops/)).not.toBeInTheDocument();
     // Not ready: no ready line either.
     expect(screen.queryByTestId("ai-agent-ready")).not.toBeInTheDocument();
   });
 
+  test("a new cluster: what is wrong in one line, and the two steps that fix it", async () => {
+    serve(
+      notInstalledStatus({
+        isInvestigationEnabled: false,
+        // The server's own words, written for every surface that shows them.
+        gaps: [
+          {
+            code: "ai_agent_not_connected",
+            title: "The Kubernetes AI agent is not connected",
+            description:
+              "OneUptime AI runs kubectl on this cluster through the Kubernetes AI agent, and no agent has connected for this cluster yet.",
+            nextStep: `Install the Kubernetes AI agent (use your own release name and namespace if they differ):\n\n${getAiAgentHelmCommands().install}\n\nAlready installed? Check its logs: kubectl logs -n <namespace> -l component=ai-agent --tail=100`,
+            blocks: "both",
+          },
+          {
+            code: "investigation_disabled",
+            title: "AI investigation is turned off for this cluster",
+            description:
+              "OneUptime AI will investigate incidents and alerts on this cluster with OneUptime data only — it will not run kubectl.",
+            nextStep:
+              'Turn on "Investigate with kubectl" on the cluster\'s AI agent page (AI → Agent).',
+            blocks: "investigation",
+          },
+          {
+            code: "remediation_disabled",
+            title: "AI fixes are turned off for this cluster",
+            description:
+              "OneUptime AI will diagnose but never propose or apply a fix on this cluster.",
+            nextStep:
+              'Set "Fixes" to "Ask for approval", "Automatic" or "Bypass approval" on the cluster\'s AI agent page (AI → Agent).',
+            blocks: "remediation",
+          },
+        ],
+      }),
+    );
+    openAgentPage();
+
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    expect(
+      within(item).getByTestId("ai-agent-attention-title"),
+    ).toHaveTextContent("OneUptime AI can't investigate this cluster");
+    const steps: Array<HTMLElement> = within(item).getAllByRole("listitem");
+    expect(steps).toHaveLength(2);
+    expect(steps[0]).toHaveTextContent(
+      "Install the Kubernetes AI agent with the command above.",
+    );
+    expect(within(steps[0]!).queryByRole("button")).not.toBeInTheDocument();
+    expect(within(steps[0]!).queryByRole("link")).not.toBeInTheDocument();
+    expect(steps[1]).toHaveTextContent(
+      "Turn on AI investigation with kubectl.",
+    );
+
+    // Nothing sends the reader to the page they are on, or repeats a command.
+    expect(item).not.toHaveTextContent("AI → Agent");
+    expect(item).not.toHaveTextContent("AI agent page");
+    expect(item).not.toHaveTextContent("helm");
+    expect(item).not.toHaveTextContent("kubectl logs");
+
+    // The command it points at is on the page, above it.
+    const install: HTMLElement = screen.getByTestId("ai-agent-install-command");
+    expect(codeIn(install)).toBe(getAiAgentHelmCommands().install);
+    expect(
+      install.compareDocumentPosition(item) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+
+    fireEvent.click(
+      within(steps[1]!).getByTestId("ai-agent-gap-turn-on-investigation"),
+    );
+    expect(await waitForOneUpdate()).toEqual({
+      isAiInvestigationEnabled: true,
+    });
+    expect(await findTestId("ai-agent-action-notice")).toHaveTextContent(
+      "AI may now investigate this cluster with kubectl.",
+    );
+  });
+
+  test("a single gap is a single sentence, without a number", async () => {
+    serve(
+      makeStatus({
+        isInvestigationEnabled: false,
+        isInvestigationReady: false,
+        gaps: [gap("investigation_disabled", "investigation")],
+      }),
+    );
+    openAgentPage();
+
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    expect(within(item).getAllByRole("listitem")).toHaveLength(1);
+    expect(
+      within(item).queryByTestId("ai-agent-gap-number"),
+    ).not.toBeInTheDocument();
+    expect(
+      within(item).getByTestId("ai-agent-gap-investigation_disabled"),
+    ).toHaveTextContent("Turn on AI investigation with kubectl.");
+  });
+
+  test("fixes on and nothing installed: the headline names both", async () => {
+    serve(
+      notInstalledStatus({
+        remediationMode: KubernetesAiRemediationMode.RequireApproval,
+      }),
+    );
+    openAgentPage();
+
+    expect(await findTestId("ai-agent-attention-title")).toHaveTextContent(
+      "OneUptime AI can't investigate this cluster or run fixes on it",
+    );
+    expect(
+      screen.getByTestId("ai-agent-gap-ai_agent_not_connected"),
+    ).toHaveTextContent(
+      "Install the Kubernetes AI agent with the command above.",
+    );
+  });
+
+  test("fixes on with a read-only agent: only fixes are blocked, and the commands are below", async () => {
+    serve(
+      makeStatus({
+        remediationMode: KubernetesAiRemediationMode.RequireApproval,
+        gaps: [gap("remediation_write_access_missing", "remediation")],
+      }),
+    );
+    openAgentPage();
+
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    expect(
+      within(item).getByTestId("ai-agent-attention-title"),
+    ).toHaveTextContent("OneUptime AI can't run fixes on this cluster");
+    const step: HTMLElement = within(item).getByTestId(
+      "ai-agent-gap-remediation_write_access_missing",
+    );
+    expect(step).toHaveTextContent(
+      "Give the Kubernetes AI agent write access with the commands below.",
+    );
+    expect(within(step).queryByRole("button")).not.toBeInTheDocument();
+    // Investigation still works, so the agent card still says it is ready.
+    expect(screen.getByTestId("ai-agent-ready")).toBeInTheDocument();
+    const writeCommands: HTMLElement = screen.getByTestId(
+      "ai-access-write-commands",
+    );
+    expect(
+      item.compareDocumentPosition(writeCommands) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("an offline agent: bring it back, with the logs command above", async () => {
+    serve(
+      makeStatus(
+        {
+          isInvestigationReady: false,
+          gaps: [gap("ai_agent_offline")],
+        },
+        silentAgent(),
+      ),
+    );
+    openAgentPage();
+
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    expect(
+      within(item).getByTestId("ai-agent-attention-title"),
+    ).toHaveTextContent("OneUptime AI can't investigate this cluster");
+    expect(item).toHaveTextContent(
+      "Bring the Kubernetes AI agent back online. Its logs say why it is offline (the command is above).",
+    );
+    expect(
+      screen
+        .getByTestId("ai-agent-logs-command")
+        .compareDocumentPosition(item) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("an agent that just signed off: wait for it, as the card says", async () => {
+    serve(
+      makeStatus(
+        {
+          isInvestigationReady: false,
+          gaps: [gap("ai_agent_offline")],
+        },
+        signedOffAgent(),
+      ),
+    );
+    openAgentPage();
+
+    expect(await findTestId("ai-agent-gap-ai_agent_offline")).toHaveTextContent(
+      "Wait a few minutes for the Kubernetes AI agent to reconnect. If it does not, its logs say why (the command is above).",
+    );
+    expect(screen.getByTestId("ai-agent-sentence")).toHaveTextContent(
+      AI_AGENT_SIGNED_OFF_TEXT,
+    );
+  });
+
+  test("the previous in-cluster Runner offline: upgrade with the command above", async () => {
+    serve(
+      legacyStatus({
+        runner: {
+          ...legacyStatus().runner!,
+          isOnline: false,
+          lastAliveAt: minutesAgo(20),
+        },
+        isInvestigationReady: false,
+        gaps: [gap("runner_offline")],
+      }),
+    );
+    openAgentPage();
+
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    const step: HTMLElement = within(item).getByTestId(
+      "ai-agent-gap-runner_offline",
+    );
+    expect(step).toHaveTextContent(
+      "Upgrade the Kubernetes agent chart with the command above. The Kubernetes AI agent replaces the previous in-cluster Runner.",
+    );
+    // Nothing to fix on a Runner that is being replaced.
+    expect(within(step).queryByRole("link")).not.toBeInTheDocument();
+    expect(within(step).queryByRole("button")).not.toBeInTheDocument();
+    expect(
+      screen
+        .getByTestId("ai-agent-install-command")
+        .compareDocumentPosition(item) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("a member gets the button they may use and is told who to ask for the rest, in the same item", async () => {
+    serve(
+      makeStatus({
+        isInvestigationEnabled: false,
+        isInvestigationReady: false,
+        gaps: [
+          gap("investigation_disabled", "investigation"),
+          gap("llm_provider_missing"),
+        ],
+      }),
+    );
+    openAgentPage();
+
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    const investigation: HTMLElement = within(item).getByTestId(
+      "ai-agent-gap-investigation_disabled",
+    );
+    const provider: HTMLElement = within(item).getByTestId(
+      "ai-agent-gap-llm_provider_missing",
+    );
+    expect(
+      within(investigation).getByTestId("ai-agent-gap-turn-on-investigation"),
+    ).toBeInTheDocument();
+    expect(
+      within(investigation).queryByTestId("ai-agent-gap-ask"),
+    ).not.toBeInTheDocument();
+    expect(within(provider).getByTestId("ai-agent-gap-ask")).toHaveTextContent(
+      "Ask a project owner or admin.",
+    );
+    expect(
+      within(provider).queryByText("Open LLM Providers"),
+    ).not.toBeInTheDocument();
+    expect(within(item).getAllByTestId("ai-agent-gap-ask")).toHaveLength(1);
+  });
+
+  test("the item goes away once its last gap is fixed", async () => {
+    serve(
+      makeStatus({
+        isInvestigationEnabled: false,
+        isInvestigationReady: false,
+        gaps: [gap("investigation_disabled", "investigation")],
+      }),
+    );
+    openAgentPage();
+
+    const button: HTMLElement = await findTestId(
+      "ai-agent-gap-turn-on-investigation",
+    );
+    // What the server says once investigation is on.
+    serve(makeStatus());
+    fireEvent.click(button);
+
+    await waitFor(
+      () => {
+        expect(
+          screen.queryByTestId("ai-agent-attention"),
+        ).not.toBeInTheDocument();
+      },
+      { timeout: WAIT_TIMEOUT },
+    );
+    expect(screen.queryByText(GAPS_CARD_TITLE)).not.toBeInTheDocument();
+    expect(await findTestId("ai-agent-ready")).toBeInTheDocument();
+  });
+
   test("a cluster editor turns investigation on from its row", async () => {
     serve(
       makeStatus({
@@ -1269,18 +1665,71 @@ describe("Needs attention", () => {
     serve(
       makeStatus({
         isInvestigationReady: false,
-        gaps: [gap("project_auto_remediation_disabled", "remediation")],
+        gaps: [gap("project_ai_disabled")],
       }),
     );
     openAgentPage();
 
     const row: HTMLElement = await findTestId(
-      "ai-agent-gap-project_auto_remediation_disabled",
+      "ai-agent-gap-project_ai_disabled",
     );
     expect(row).toHaveTextContent("Ask a project owner or admin.");
     expect(within(row).queryByText("Open AI Features")).not.toBeInTheDocument();
   });
 
+  /*
+   * Enable AI is the project's only AI switch. The server no longer sends
+   * the two gaps of the switches folded into it, but a server one release
+   * behind may, while a rollout is under way: the page still sends an admin
+   * to AI Features for them, where Enable AI is, and tells a member who to
+   * ask.
+   */
+  const RETIRED_PROJECT_GAP_CODES: Array<KubernetesAiAccessGapCode> = [
+    "project_auto_remediation_disabled",
+    "project_ai_command_execution_disabled",
+  ];
+
+  test.each(RETIRED_PROJECT_GAP_CODES)(
+    "a retired project gap from an older server (%s) still links an admin to AI Features",
+    async (code: KubernetesAiAccessGapCode) => {
+      grant(ADMIN_PERMISSIONS);
+      serve(
+        makeStatus({
+          isInvestigationReady: false,
+          gaps: [gap(code, "remediation")],
+        }),
+      );
+      openAgentPage();
+
+      const row: HTMLElement = await findTestId(`ai-agent-gap-${code}`);
+      expect(
+        within(row)
+          .getByText("Open AI Features")
+          .closest("a")
+          ?.getAttribute("href"),
+      ).toBe(`/dashboard/${PROJECT_ID}/settings/ai-features`);
+    },
+  );
+
+  test.each(RETIRED_PROJECT_GAP_CODES)(
+    "a retired project gap from an older server (%s) tells a member who to ask",
+    async (code: KubernetesAiAccessGapCode) => {
+      serve(
+        makeStatus({
+          isInvestigationReady: false,
+          gaps: [gap(code, "remediation")],
+        }),
+      );
+      openAgentPage();
+
+      const row: HTMLElement = await findTestId(`ai-agent-gap-${code}`);
+      expect(row).toHaveTextContent("Ask a project owner or admin.");
+      expect(
+        within(row).queryByText("Open AI Features"),
+      ).not.toBeInTheDocument();
+    },
+  );
+
   test("a failed access check offers the connection test", async () => {
     serve(
       makeStatus({
@@ -1302,7 +1751,8 @@ describe("Needs attention", () => {
     const row: HTMLElement = await findTestId(
       "ai-agent-gap-last_access_check_failed",
     );
-    fireEvent.click(within(row).getByText("Test connection"));
+    expect(row).toHaveTextContent("Test the connection again.");
+    fireEvent.click(within(row).getByTestId("ai-agent-gap-test-connection"));
 
     await waitFor(
       () => {
@@ -1324,9 +1774,37 @@ describe("Needs attention", () => {
     openAgentPage();
 
     const row: HTMLElement = await findTestId("ai-agent-gap-runner_offline");
+    expect(row).toHaveTextContent(
+      "Start the Runner and make sure it can reach your OneUptime URL.",
+    );
     expect(
       within(row).getByText("View Runner").closest("a")?.getAttribute("href"),
-    ).toBe(`/dashboard/${PROJECT_ID}/settings/runners/${HOST_RUNNER_ID}`);
+    ).toBe(`/dashboard/${PROJECT_ID}/runbooks/runners/${HOST_RUNNER_ID}`);
+  });
+
+  test("an advanced Runner without a credential: choose one or clear it, with Change below", async () => {
+    serve(
+      advancedStatus({
+        accessMethod: "none",
+        credentialId: undefined,
+        credentialName: undefined,
+        isInvestigationReady: false,
+        gaps: [gap("credential_missing")],
+      }),
+    );
+    openAgentPage();
+
+    const item: HTMLElement = await findTestId("ai-agent-attention");
+    expect(
+      within(item).getByTestId("ai-agent-gap-credential_missing"),
+    ).toHaveTextContent(
+      "With Change below, choose a Kubernetes credential the Runner may use, or clear the Runner to use the Kubernetes AI agent.",
+    );
+    expect(
+      item.compareDocumentPosition(
+        screen.getByTestId("ai-access-change-button"),
+      ) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
   });
 
   test("the not-installed gap has no extra action: the command is on the card", async () => {
@@ -1336,23 +1814,45 @@ describe("Needs attention", () => {
     const row: HTMLElement = await findTestId(
       "ai-agent-gap-ai_agent_not_connected",
     );
+    expect(row).toHaveTextContent(
+      "Install the Kubernetes AI agent with the command above.",
+    );
     expect(within(row).queryByRole("button")).not.toBeInTheDocument();
     expect(within(row).queryByRole("link")).not.toBeInTheDocument();
   });
 });
 
 describe("What AI may do", () => {
-  test("shows investigation and fixes in plain words, with the fixes-off hint", async () => {
+  test("one row for investigation and one for fixes, each with a badge and one plain sentence", async () => {
     openAgentPage();
 
-    expect(await findTestId("ai-access-investigation-value")).toHaveTextContent(
-      "Yes — read-only",
+    const card: HTMLElement = await settingsCard();
+    expect(
+      within(card)
+        .getAllByRole("heading", { level: 3 })
+        .map((heading: HTMLElement): string => {
+          return heading.textContent || "";
+        }),
+    ).toEqual(["Investigation", "Fixes"]);
+    expect(within(card).getByTestId("card-description")).toHaveTextContent(
+      "For incidents and alerts on this cluster. Changes apply from the next one.",
+    );
+
+    expect(
+      screen.getByTestId("ai-access-investigation-badge"),
+    ).toHaveTextContent("On");
+    expect(
+      screen.getByTestId("ai-access-investigation-value"),
+    ).toHaveTextContent(INVESTIGATION_ON_SENTENCE);
+    expect(screen.getByTestId("ai-access-fixes-badge")).toHaveTextContent(
+      "Off",
     );
     expect(screen.getByTestId("ai-access-fixes-value")).toHaveTextContent(
-      `Off — ${REMEDIATION_MODE_SUMMARIES[KubernetesAiRemediationMode.Disabled]}`,
+      REMEDIATION_MODE_SUMMARIES[KubernetesAiRemediationMode.Disabled],
     );
+    // A member may not turn fixes on: told who may.
     expect(screen.getByTestId("ai-access-fixes-off-hint")).toHaveTextContent(
-      "Want AI to propose fixes? Choose Ask for approval.",
+      getAiFixesOffHint(false),
     );
     // Off: no write commands, no allowlist.
     expect(
@@ -1372,9 +1872,81 @@ describe("What AI may do", () => {
     );
     openAgentPage();
 
-    expect(await findTestId("ai-access-investigation-value")).toHaveTextContent(
-      "No — AI investigates with OneUptime data only",
+    expect(await findTestId("ai-access-investigation-badge")).toHaveTextContent(
+      "Off",
+    );
+    expect(
+      screen.getByTestId("ai-access-investigation-value"),
+    ).toHaveTextContent(getAiInvestigationOffSentence("cluster"));
+    const card: HTMLElement = await settingsCard();
+    expect(card).not.toHaveTextContent("only investigates");
+    expect(card).not.toHaveTextContent("No — AI investigates");
+  });
+
+  test("an admin on fixes Off is told to click Change and choose Ask for approval", async () => {
+    grant(ADMIN_PERMISSIONS);
+    openAgentPage();
+
+    expect(await findTestId("ai-access-fixes-off-hint")).toHaveTextContent(
+      "Want AI to propose fixes? Click Change and choose Ask for approval.",
+    );
+  });
+
+  test.each(Object.values(KubernetesAiRemediationMode))(
+    "fixes in %s: the badge names the mode in its tone, the sentence says what it does",
+    async (mode: KubernetesAiRemediationMode) => {
+      serve(makeStatus({ remediationMode: mode }));
+      openAgentPage();
+
+      const badge: HTMLElement = await findTestId("ai-access-fixes-badge");
+      expect(badge).toHaveTextContent(REMEDIATION_MODE_SHORT_NAMES[mode]);
+      expect(badge).toHaveAttribute("data-tone", AI_FIXES_MODE_TONES[mode]);
+      expect(screen.getByTestId("ai-access-fixes-value")).toHaveTextContent(
+        REMEDIATION_MODE_SUMMARIES[mode],
+      );
+    },
+  );
+
+  test("the write-access command and the credential note sit in the Fixes row", async () => {
+    serve(
+      makeStatus({
+        remediationMode: KubernetesAiRemediationMode.RequireApproval,
+      }),
+    );
+    openAgentPage();
+
+    const fixes: HTMLElement = await findTestId("ai-access-fixes");
+    expect(
+      within(fixes).getByTestId("ai-access-write-commands"),
+    ).toHaveTextContent("Give the agent write access");
+    cleanup();
+
+    serve(
+      advancedStatus({
+        remediationMode: KubernetesAiRemediationMode.Automatic,
+      }),
     );
+    openAgentPage();
+    expect(
+      within(await findTestId("ai-access-fixes")).getByTestId(
+        "ai-access-credential-rbac-note",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  test("the project's automatic-investigation line sits in the Investigation row", async () => {
+    openAgentPage();
+
+    expect(
+      within(await findTestId("ai-access-investigation")).getByTestId(
+        "ai-access-automatic-investigation",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("ai-access-fixes")).queryByTestId(
+        "ai-access-automatic-investigation",
+      ),
+    ).not.toBeInTheDocument();
   });
 
   /*
@@ -1468,7 +2040,7 @@ describe("What AI may do", () => {
       }),
     );
     openAgentPage();
-    expect(await findTestId("ai-access-fixes-value")).toHaveTextContent(
+    expect(await findTestId("ai-access-fixes-badge")).toHaveTextContent(
       "Bypass approval",
     );
     expect(
@@ -1483,7 +2055,7 @@ describe("What AI may do", () => {
     openAgentPage();
 
     expect(await findTestId("kubectl-allowlist-in-effect")).toHaveTextContent(
-      "None",
+      "None — riskier fixes always wait for approval.",
     );
   });
 
@@ -1640,6 +2212,107 @@ describe("automatic investigation footer", () => {
   });
 });
 
+describe("the Change modal: the mode cards", () => {
+  test("one card per mode, each saying what it does, the saved one chosen", async () => {
+    grant(ADMIN_PERMISSIONS);
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    expect(modeCards(dialog)).toHaveLength(4);
+    for (const mode of Object.values(KubernetesAiRemediationMode)) {
+      const card: HTMLElement = modeCard(dialog, mode);
+      expect(card).toHaveTextContent(
+        REMEDIATION_MODE_OPTION_DESCRIPTIONS[mode],
+      );
+      expect(card).toHaveAttribute(
+        "aria-checked",
+        mode === KubernetesAiRemediationMode.RequireApproval ? "true" : "false",
+      );
+    }
+    expect(
+      within(dialog).getByText(getAiFixesFieldDescription("cluster")),
+    ).toBeInTheDocument();
+    expect(dialog).not.toHaveTextContent("Off: AI only investigates.");
+    expect(
+      within(dialog).queryByRole("combobox", { name: /^Fixes/ }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("what stays protected in every mode is folded under the cards, every clause listed", async () => {
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    const protections: HTMLElement = within(dialog).getByTestId(
+      "ai-access-protections",
+    );
+    expect(protections).not.toHaveAttribute("open");
+    expect(protections).toHaveTextContent(AI_ACCESS_PROTECTIONS_TITLE);
+    expect(
+      Array.from(
+        within(protections)
+          .getByTestId("ai-access-protections-list")
+          .querySelectorAll("li"),
+      ).map((item: Element): string => {
+        return item.textContent || "";
+      }),
+    ).toEqual(formatAiAccessProtections(getEveryModeProtections()));
+  });
+
+  test("a member's note says what they can change first, then what needs more", async () => {
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    const note: HTMLElement = within(dialog).getByTestId(
+      "kubernetes-ai-access-admin-note",
+    );
+    expect(note).toHaveTextContent(
+      "You can turn investigation on or off, lower fixes and remove allowlist patterns.",
+    );
+    expect(note).toHaveTextContent(
+      "Turning fixes on or up, adding allowlist patterns, or choosing a Runner needs Project Owner, Project Admin or Edit Auto Remediation Rule.",
+    );
+  });
+
+  test("the kubectl allowlist help is the short one, without the permission rules", async () => {
+    grant(ADMIN_PERMISSIONS);
+    serveCluster({ aiRemediationMode: KubernetesAiRemediationMode.Automatic });
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    await within(dialog).findByTestId(
+      "kubectl-allowlist-field",
+      {},
+      { timeout: WAIT_TIMEOUT },
+    );
+    expect(
+      within(dialog).getByText(KUBECTL_ALLOWLIST_FIELD_DESCRIPTION),
+    ).toBeInTheDocument();
+  });
+
+  test("a card chosen from the keyboard is saved like a clicked one", async () => {
+    grant(ADMIN_PERMISSIONS);
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    fireEvent.keyDown(modeCard(dialog, KubernetesAiRemediationMode.Disabled), {
+      key: " ",
+    });
+    await waitFor(
+      () => {
+        expect(
+          modeCard(dialog, KubernetesAiRemediationMode.Disabled),
+        ).toHaveAttribute("aria-checked", "true");
+      },
+      { timeout: WAIT_TIMEOUT },
+    );
+    saveChangeModal(dialog);
+
+    expect(await waitForOneUpdate()).toEqual({
+      aiRemediationMode: KubernetesAiRemediationMode.Disabled,
+    });
+  });
+});
+
 describe("the Change modal: who may loosen", () => {
   test("a member on an Ask-for-approval cluster is offered only Off and the current mode, and told why", async () => {
     openAgentPage();
@@ -1654,9 +2327,9 @@ describe("the Change modal: who may loosen", () => {
     ).not.toBeInTheDocument();
     expect(within(dialog).queryByText("Runner")).not.toBeInTheDocument();
 
-    expect(await openDropdown(dialog, /^Fixes/)).toEqual([
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.Disabled],
-      `${REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.RequireApproval]} (current)`,
+    expect(modeCardTitles(dialog)).toEqual([
+      "Off",
+      "Ask for approval (current)",
     ]);
     expect(listRequestsFor(Runner)).toHaveLength(0);
     expect(listRequestsFor(RunbookCredential)).toHaveLength(0);
@@ -1671,9 +2344,7 @@ describe("the Change modal: who may loosen", () => {
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
 
-    expect(await openDropdown(dialog, /^Fixes/)).toEqual([
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.Disabled],
-    ]);
+    expect(modeCardTitles(dialog)).toEqual(["Off (current)"]);
   });
 
   test("an admin is offered every mode", async () => {
@@ -1684,13 +2355,12 @@ describe("the Change modal: who may loosen", () => {
     expect(
       within(dialog).queryByTestId("kubernetes-ai-access-admin-note"),
     ).not.toBeInTheDocument();
-    expect(await openDropdown(dialog, /^Fixes/)).toEqual(
-      Object.values(KubernetesAiRemediationMode).map(
-        (mode: KubernetesAiRemediationMode): string => {
-          return REMEDIATION_MODE_LABELS[mode];
-        },
-      ),
-    );
+    expect(modeCardTitles(dialog)).toEqual([
+      "Off",
+      "Ask for approval (current)",
+      "Automatic",
+      "Bypass approval",
+    ]);
   });
 
   test("an admin turns fixes on from Off", async () => {
@@ -1699,11 +2369,7 @@ describe("the Change modal: who may loosen", () => {
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
 
-    await pickOption(
-      dialog,
-      /^Fixes/,
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.RequireApproval],
-    );
+    pickMode(dialog, KubernetesAiRemediationMode.RequireApproval);
     saveChangeModal(dialog);
 
     expect(await waitForOneUpdate()).toEqual({
@@ -1718,21 +2384,14 @@ describe("the Change modal: who may loosen", () => {
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
 
-    expect(await openDropdown(dialog, /^Fixes/)).toEqual([
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.Disabled],
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.RequireApproval],
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.Automatic],
-      `${REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.BypassApproval]} (current)`,
+    expect(modeCardTitles(dialog)).toEqual([
+      "Off",
+      "Ask for approval",
+      "Automatic",
+      "Bypass approval (current)",
     ]);
 
-    fireEvent.click(
-      menuOptions().find((option: HTMLElement): boolean => {
-        return (
-          option.textContent ===
-          REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.Automatic]
-        );
-      })!,
-    );
+    pickMode(dialog, KubernetesAiRemediationMode.Automatic);
     saveChangeModal(dialog);
 
     expect(await waitForOneUpdate()).toEqual({
@@ -1753,8 +2412,8 @@ describe("the Change modal: who may loosen", () => {
     const dialog: HTMLElement = await openChangeModal();
 
     expect(
-      within(dialog).getByText(/You can remove patterns or clear the list/),
-    ).toBeInTheDocument();
+      within(dialog).getByTestId("kubernetes-ai-access-admin-note"),
+    ).toHaveTextContent("remove allowlist patterns");
     await setAllowlistText(dialog, SET_IMAGE_PATTERN);
     saveChangeModal(dialog);
 
@@ -1801,11 +2460,7 @@ describe("the Change modal: who may loosen", () => {
       ),
     ).toBeInTheDocument();
 
-    await pickOption(
-      dialog,
-      /^Fixes/,
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.RequireApproval],
-    );
+    pickMode(dialog, KubernetesAiRemediationMode.RequireApproval);
     await waitFor(
       () => {
         expect(
@@ -1892,11 +2547,7 @@ describe("the Change modal: confirmations", () => {
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
 
-    await pickOption(
-      dialog,
-      /^Fixes/,
-      REMEDIATION_MODE_LABELS[KubernetesAiRemediationMode.BypassApproval],
-    );
+    pickMode(dialog, KubernetesAiRemediationMode.BypassApproval);
     saveChangeModal(dialog);
 
     const confirm: HTMLElement = await findDialogTitled(
@@ -1995,9 +2646,30 @@ describe("the Change modal: confirmations", () => {
     );
     expect(description).toHaveTextContent("flags must be written out");
     expect(description).toHaveTextContent('a leading "kubectl" is optional');
-    expect(description).toHaveTextContent(
-      "Write the verb (and the subcommand of rollout, set or create) out, never as *, and use more than one word",
-    );
+  });
+
+  /*
+   * The help no longer lists every rule up front. A rule is explained
+   * where it bites: by the pattern's own validation error, before anything
+   * is sent.
+   */
+  test("a pattern with * for the verb is explained when it is saved, and nothing is sent", async () => {
+    grant(ADMIN_PERMISSIONS);
+    serveCluster({ aiRemediationMode: KubernetesAiRemediationMode.Automatic });
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    await setAllowlistText(dialog, "kubectl * deployment/web -n web");
+    saveChangeModal(dialog);
+
+    expect(
+      await within(dialog).findByText(
+        /has a \* where the kubectl verb goes\. .* so write the verb out/,
+        {},
+        { timeout: WAIT_TIMEOUT },
+      ),
+    ).toBeInTheDocument();
+    expect(updateByIdSpy).not.toHaveBeenCalled();
   });
 });
 
@@ -2012,6 +2684,7 @@ describe("the Change modal: advanced Runner bindings", () => {
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
 
+    await expectNoSteps(dialog);
     expect(within(dialog).queryByText("Runner")).not.toBeInTheDocument();
     expect(
       within(dialog).queryByText("Kubernetes credential"),
@@ -2030,6 +2703,10 @@ describe("the Change modal: advanced Runner bindings", () => {
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
 
+    // The pickers are on the form's second step, not on its first.
+    expect(within(dialog).queryByText("Runner")).not.toBeInTheDocument();
+    await openRunnerStep(dialog);
+
     await within(dialog).findByText("Runner", {}, { timeout: WAIT_TIMEOUT });
     expect(await openDropdown(dialog, /^Runner/)).toEqual(["bash-runner"]);
     fireEvent.keyDown(
@@ -2061,6 +2738,7 @@ describe("the Change modal: advanced Runner bindings", () => {
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
 
+    await expectNoSteps(dialog);
     expect(
       within(dialog).queryByTestId("ai-access-clear-runner-field"),
     ).not.toBeInTheDocument();
@@ -2075,6 +2753,7 @@ describe("the Change modal: advanced Runner bindings", () => {
     serveCluster(hostRunnerBinding());
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
+    await openRunnerStep(dialog);
 
     expect(
       within(dialog).getByText(/Bound now: bash-runner/),
@@ -2104,12 +2783,89 @@ describe("the Change modal: advanced Runner bindings", () => {
     expect(
       within(dialog).getByTestId("kubernetes-runner-picker-permission-note"),
     ).toHaveTextContent("Read Runbook Agent");
+    await openRunnerStep(dialog);
     expect(
       within(dialog).getByTestId("ai-access-clear-runner-field"),
     ).toBeInTheDocument();
     expect(listRequestsFor(Runner)).toHaveLength(0);
   });
 
+  /*
+   * Two steps once a Runner question is asked - and Save on both: a change
+   * on the first step saves without walking to the second, which already
+   * holds the saved Runner and credential.
+   */
+  test("an admin with a Runner question saves a first-step change without walking to the second step", async () => {
+    grant(ADMIN_PERMISSIONS);
+    serve(advancedStatus());
+    serveCluster(hostRunnerBinding());
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    // The step list and Next come in once the form opens its first step.
+    const progress: HTMLElement = await within(dialog).findByRole(
+      "navigation",
+      { name: "Progress" },
+      { timeout: WAIT_TIMEOUT },
+    );
+    expect(progress.querySelector('[aria-current="step"]')?.textContent).toBe(
+      "Investigation & Fixes",
+    );
+    expect(
+      await within(dialog).findByTestId(
+        "modal-footer-next-button",
+        {},
+        { timeout: WAIT_TIMEOUT },
+      ),
+    ).toHaveTextContent("Next");
+    expect(
+      within(dialog).getByTestId("modal-footer-submit-button"),
+    ).toHaveTextContent("Save");
+
+    await toggleSwitch(dialog, "ai-investigation-field", true);
+    saveChangeModal(dialog);
+
+    expect(await waitForOneUpdate()).toEqual({
+      isAiInvestigationEnabled: false,
+    });
+  });
+
+  test("an admin walks to the Runner step with Next, where Next is no longer offered", async () => {
+    grant(ADMIN_PERMISSIONS);
+    serve(advancedStatus());
+    serveCluster(hostRunnerBinding());
+    openAgentPage();
+    const dialog: HTMLElement = await openChangeModal();
+
+    fireEvent.click(
+      await within(dialog).findByTestId(
+        "modal-footer-next-button",
+        {},
+        { timeout: WAIT_TIMEOUT },
+      ),
+    );
+
+    expect(
+      await within(dialog).findByText(
+        "Kubernetes credential",
+        {},
+        { timeout: WAIT_TIMEOUT },
+      ),
+    ).toBeInTheDocument();
+    await waitFor(
+      () => {
+        expect(
+          within(dialog).queryByTestId("modal-footer-next-button"),
+        ).not.toBeInTheDocument();
+      },
+      { timeout: WAIT_TIMEOUT },
+    );
+    expect(
+      within(dialog).queryByText("Investigate with kubectl"),
+    ).not.toBeInTheDocument();
+    expect(updateByIdSpy).not.toHaveBeenCalled();
+  });
+
   test("one picker's failed list leaves the other picker and the form working", async () => {
     grant(ADMIN_PERMISSIONS);
     serve(advancedStatus());
@@ -2124,6 +2880,7 @@ describe("the Change modal: advanced Runner bindings", () => {
     });
     openAgentPage();
     const dialog: HTMLElement = await openChangeModal();
+    await openRunnerStep(dialog);
 
     expect(
       await within(dialog).findByText(