@oneuptime/common 14.0.10 → 14.0.11

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

@@ -139,6 +139,7 @@ jest.mock(
 
 import InvestigationPanel, {
   InvestigationSubjectType,
+  VERDICT_QUESTION,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/AI/InvestigationPanel";
 import AIRunEvent from "../../../Models/DatabaseModels/AIRunEvent";
 import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
@@ -532,7 +533,7 @@ describe("InvestigationPanel report lifecycle", () => {
     renderPanel({ onAnalysisAvailable });
     await flush();
 
-    expect(screen.getByText("Investigation complete")).toBeInTheDocument();
+    expect(screen.getByText("Completed")).toBeInTheDocument();
     expect(screen.getByLabelText("Investigation report")).toBeInTheDocument();
     expect(screen.getByTestId("investigation-markdown")).toHaveTextContent(
       "The database connection pool was exhausted.",
@@ -550,8 +551,12 @@ describe("InvestigationPanel report lifecycle", () => {
         renderEventReference: expect.any(Function),
       }),
     });
+    /*
+     * Sections sit directly under the card's title, so their headings are
+     * h3s, like the Summary's.
+     */
     expect(
-      screen.getByRole("heading", { level: 4, name: "Root cause" }),
+      screen.getByRole("heading", { level: 3, name: "Root cause" }),
     ).toBeInTheDocument();
     /*
      * This report carries no evidence, so the section is only the activity
@@ -602,7 +607,7 @@ describe("InvestigationPanel report lifecycle", () => {
     renderPanel({ onAnalysisAvailable });
     await flush();
 
-    expect(screen.getByText("Preparing investigation report…")).toBeVisible();
+    expect(screen.getByText("Preparing report…")).toBeVisible();
     expect(screen.getByText("Preparing the final report")).toBeVisible();
     expect(screen.queryByTestId("investigation-markdown")).toBeNull();
     // The steps can already be checked while the report is being written.
@@ -612,7 +617,7 @@ describe("InvestigationPanel report lifecycle", () => {
     /* Status, run id, events and recommendation remain identical. */
     await tick(POLL_INTERVAL_MS);
 
-    expect(screen.getByText("Investigation complete")).toBeVisible();
+    expect(screen.getByText("Completed")).toBeVisible();
     expect(screen.getByTestId("investigation-markdown")).toHaveTextContent(
       "The database connection pool was exhausted.",
     );
@@ -652,7 +657,7 @@ describe("InvestigationPanel report lifecycle", () => {
     expect(postMock).toHaveBeenCalledTimes(2);
 
     await resolveDeferred(slowPoll, completedResponse());
-    expect(screen.getByText("Investigation complete")).toBeVisible();
+    expect(screen.getByText("Completed")).toBeVisible();
     expect(postMock).toHaveBeenCalledTimes(2);
   });
 
@@ -682,7 +687,7 @@ describe("InvestigationPanel report lifecycle", () => {
     );
     await flush();
 
-    expect(screen.getByText("Investigation complete")).toBeVisible();
+    expect(screen.getByText("Completed")).toBeVisible();
     expect(postRequestAt(1).data).toEqual({ alertId: ALERT_ID.toString() });
 
     await resolveDeferred(
@@ -690,7 +695,7 @@ describe("InvestigationPanel report lifecycle", () => {
       successfulResponse(investigationPayload({ status: AIRunStatus.Running })),
     );
 
-    expect(screen.getByText("Investigation complete")).toBeVisible();
+    expect(screen.getByText("Completed")).toBeVisible();
     expect(screen.queryByText("Investigating…")).toBeNull();
     expect(statuses[statuses.length - 1]).toBe(AIRunStatus.Completed);
   });
@@ -749,9 +754,7 @@ describe("InvestigationPanel report lifecycle", () => {
     renderPanel();
     await flush();
 
-    expect(
-      screen.getByText("Investigation completed without a report"),
-    ).toBeVisible();
+    expect(screen.getByText("No report")).toBeVisible();
     expect(
       screen.getByText("No investigation report was published."),
     ).toBeVisible();
@@ -770,7 +773,7 @@ describe("InvestigationPanel report lifecycle", () => {
     );
     expect(fixButton()).toBeDisabled();
     // There is no report to judge, so the rating row is left out entirely.
-    expect(screen.queryByText("Rate this investigation")).toBeNull();
+    expect(screen.queryByText("Was this analysis correct?")).toBeNull();
     expect(screen.queryByRole("button", { name: "Confirmed" })).toBeNull();
     expect(screen.queryByRole("button", { name: "Rejected" })).toBeNull();
   });
@@ -789,7 +792,7 @@ describe("InvestigationPanel report lifecycle", () => {
     renderPanel();
     await flush();
 
-    expect(screen.getByText("Investigation did not finish")).toBeVisible();
+    expect(screen.getByText("Did not finish")).toBeVisible();
     expect(screen.getByText("The model provider timed out.")).toBeVisible();
     expect(
       screen.getByText("The investigation stopped before it could report."),
@@ -804,7 +807,7 @@ describe("InvestigationPanel report lifecycle", () => {
       }),
     );
     expect(fixButton()).toBeNull();
-    expect(screen.queryByText("Rate this investigation")).toBeNull();
+    expect(screen.queryByText("Was this analysis correct?")).toBeNull();
   });
 
   test("uses the alert endpoint and alert id", async () => {
@@ -1078,9 +1081,19 @@ describe("InvestigationPanel TL;DR", () => {
     renderPanel();
     await flush();
 
+    /*
+     * The summary is the card's first section, under the same kind of
+     * heading as the rest, and the TL;DR is its lead line. There is no
+     * "TL;DR" chip any more: the larger type says it is the answer.
+     */
     const summary: HTMLElement = screen.getByLabelText("Investigation summary");
-    expect(summary).toHaveTextContent("TL;DR");
-    expect(summary).toHaveTextContent(TLDR);
+    expect(
+      within(summary).getByRole("heading", { level: 3, name: "Summary" }),
+    ).toBeInTheDocument();
+    expect(summary).not.toHaveTextContent("TL;DR");
+    const lead: HTMLElement = within(summary).getByText(TLDR);
+    expect(lead.tagName).toBe("P");
+    expect(lead).toHaveClass("text-base", "font-semibold");
 
     // The summary is never routed through the markdown renderer.
     expect(markdownTexts().length).toBeGreaterThan(0);
@@ -1306,7 +1319,7 @@ describe("InvestigationPanel TL;DR", () => {
  */
 describe("InvestigationPanel verdict control", () => {
   function verdictGroup(): HTMLElement | null {
-    return screen.queryByRole("group", { name: "Rate this investigation" });
+    return screen.queryByRole("group", { name: "Was this analysis correct?" });
   }
 
   test("offers both verdicts inside one labelled group", async () => {
@@ -1383,7 +1396,7 @@ describe("InvestigationPanel verdict control", () => {
     await flush();
 
     expect(screen.getByLabelText("Investigation status")).toHaveTextContent(
-      "Investigation complete",
+      "Completed",
     );
   });
 });
@@ -1399,11 +1412,13 @@ describe("InvestigationPanel verdict control", () => {
  */
 describe("InvestigationPanel rating availability", () => {
   function ratingHeading(): HTMLElement | null {
-    return screen.queryByRole("heading", { name: "Rate this investigation" });
+    return screen.queryByRole("heading", {
+      name: "Was this analysis correct?",
+    });
   }
 
   function ratingGroup(): HTMLElement | null {
-    return screen.queryByRole("group", { name: "Rate this investigation" });
+    return screen.queryByRole("group", { name: "Was this analysis correct?" });
   }
 
   function actionsFrame(): HTMLElement | null {
@@ -1428,7 +1443,7 @@ describe("InvestigationPanel rating availability", () => {
 
   function expectNoRating(): void {
     expect(ratingHeading()).toBeNull();
-    expect(screen.queryByText("Rate this investigation")).toBeNull();
+    expect(screen.queryByText("Was this analysis correct?")).toBeNull();
     expect(ratingGroup()).toBeNull();
     expect(verdictAnswers()).toEqual([]);
     expect(screen.queryByText(/You (confirmed|rejected) this/)).toBeNull();
@@ -1530,9 +1545,7 @@ describe("InvestigationPanel rating availability", () => {
       await flush();
 
       expect(requestPath(0)).toContain(path);
-      expect(
-        screen.getByText("Investigation completed without a report"),
-      ).toBeVisible();
+      expect(screen.getByText("No report")).toBeVisible();
       expect(
         screen.getByText("No investigation report was published."),
       ).toBeVisible();
@@ -1592,7 +1605,7 @@ describe("InvestigationPanel rating availability", () => {
     await flush();
 
     expect(screen.getByLabelText("Investigation status")).toHaveTextContent(
-      "Investigation complete",
+      "Completed",
     );
     expect(
       screen.getByText("No investigation report was published."),
@@ -1986,7 +1999,7 @@ describe("InvestigationPanel code-fix recommendation", () => {
 
     expect(fixButton()).toBeEnabled();
     expect(screen.getByText("Act on this investigation")).toBeVisible();
-    expect(screen.getByText("Rate this investigation")).toBeVisible();
+    expect(screen.getByText("Was this analysis correct?")).toBeVisible();
   });
 
   test("hides every fix-task element for NotRecommended but retains verdict controls", async () => {
@@ -2002,7 +2015,7 @@ describe("InvestigationPanel code-fix recommendation", () => {
     expect(fixButton()).toBeNull();
     expect(screen.queryByText("Act on this investigation")).toBeNull();
     expect(screen.queryByText(/Fix task created/)).toBeNull();
-    expect(screen.getByText("Rate this investigation")).toBeVisible();
+    expect(screen.getByText("Was this analysis correct?")).toBeVisible();
     expect(screen.getByRole("button", { name: "Confirmed" })).toBeEnabled();
     expect(screen.getByRole("button", { name: "Rejected" })).toBeEnabled();
   });
@@ -2019,7 +2032,7 @@ describe("InvestigationPanel code-fix recommendation", () => {
     await flush();
 
     expect(fixButton()).toBeNull();
-    expect(screen.getByText("Rate this investigation")).toBeVisible();
+    expect(screen.getByText("Was this analysis correct?")).toBeVisible();
     expect(jest.getTimerCount()).toBe(1);
 
     await advanceFastPolls(4);
@@ -2055,7 +2068,7 @@ describe("InvestigationPanel code-fix recommendation", () => {
     await flush();
 
     expect(fixButton()).toBeNull();
-    expect(screen.getByText("Rate this investigation")).toBeVisible();
+    expect(screen.getByText("Was this analysis correct?")).toBeVisible();
     expect(jest.getTimerCount()).toBe(2);
 
     await advanceFastPolls();
@@ -2077,7 +2090,7 @@ describe("InvestigationPanel code-fix recommendation", () => {
     renderPanel();
     await flush();
 
-    expect(screen.getByText("Investigation complete")).toBeVisible();
+    expect(screen.getByText("Completed")).toBeVisible();
     expect(fixButton()).toBeNull();
     expect(postMock).toHaveBeenCalledTimes(1);
     expect(jest.getTimerCount()).toBe(2);
@@ -2099,7 +2112,7 @@ describe("InvestigationPanel code-fix recommendation", () => {
     renderPanel();
     await flush();
 
-    expect(screen.getByText("Investigation complete")).toBeVisible();
+    expect(screen.getByText("Completed")).toBeVisible();
     expect(screen.queryByText("Investigating…")).toBeNull();
     expect(
       document.querySelector('[class~="motion-safe:animate-ping"]'),
@@ -2361,7 +2374,7 @@ describe("InvestigationPanel completed actions", () => {
 
     expect(screen.queryByRole("alert")).toBeNull();
     expect(fixButton()).toBeEnabled();
-    expect(screen.getByText("Investigation complete")).toBeVisible();
+    expect(screen.getByText("Completed")).toBeVisible();
   });
 
   test("resets fix-task and verdict state when the same subject gets a new run", async () => {
@@ -2439,7 +2452,7 @@ describe("InvestigationPanel completed actions", () => {
     expect(fixButton()).toBeNull();
     expect(screen.getByText(/You confirmed this analysis/)).toBeVisible();
     expect(screen.getByText("Change")).toBeVisible();
-    expect(screen.getByText("Rate this investigation")).toBeVisible();
+    expect(screen.getByText("Was this analysis correct?")).toBeVisible();
   });
 
   test("a GET started before verdict save cannot overwrite the saved verdict", async () => {
@@ -2709,7 +2722,7 @@ describe("InvestigationPanel structured report", () => {
     });
     expect(
       within(report)
-        .getAllByRole("heading", { level: 4 })
+        .getAllByRole("heading", { level: 3 })
         .map((heading: HTMLElement): string => {
           return heading.textContent || "";
         }),
@@ -3360,7 +3373,7 @@ describe("InvestigationPanel structured report", () => {
       screen.getByRole("heading", { name: "Act on this investigation" }),
     ).toBeVisible();
     expect(
-      screen.getByRole("heading", { name: "Rate this investigation" }),
+      screen.getByRole("heading", { name: "Was this analysis correct?" }),
     ).toBeVisible();
     expect(container.querySelectorAll("p div")).toHaveLength(0);
   });
@@ -4205,3 +4218,685 @@ describe("InvestigationPanel verdict callback", () => {
     expect(first).toHaveBeenCalledTimes(firstCallCount);
   });
 });
+
+/*
+ * A completed investigation used to stack a tinted summary box, a report box
+ * with an amber callout inside it, a details box and an actions box inside
+ * the card: a card inside a card inside a card. Every state is now the card
+ * and plain content inside it, spaced apart and split by at most a hairline,
+ * with the state named once, in the header's neutral pill.
+ */
+describe("InvestigationPanel as one flat card", () => {
+  const CLUSTER_ID: string = "0193c0de-1111-4aaa-8bbb-000000000001";
+  const OTHER_CLUSTER_ID: string = "0193c0de-2222-4aaa-8bbb-000000000002";
+
+  const clusterAccess: JSONArray = [
+    {
+      clusterId: CLUSTER_ID,
+      clusterName: "prod-east",
+      isInvestigationReady: true,
+      isRemediationReady: true,
+      remediationMode: "RequireApproval",
+      gaps: [],
+      evaluatedAt: COMPLETED_AT,
+    },
+    {
+      clusterId: OTHER_CLUSTER_ID,
+      clusterName: "staging-west",
+      isInvestigationReady: false,
+      isRemediationReady: false,
+      remediationMode: "Disabled",
+      gaps: [
+        {
+          code: "investigation_disabled",
+          title: "Investigation is off",
+          description: "AI may not run kubectl on this cluster.",
+          nextStep: "Turn on 'Investigate with kubectl'.",
+          blocks: "investigation",
+        },
+      ],
+      evaluatedAt: COMPLETED_AT,
+    },
+  ];
+
+  const structuredMarkdown: string = [
+    "**Summary** — the connection pool ran dry after the 18:00 deploy [C1].",
+    "",
+    "**Most likely root cause** — the deploy halved the pool size [C1].",
+    "",
+    "**Suggested next steps**",
+    "- Roll back the deploy",
+  ].join("\n");
+
+  const evidenceItems: JSONArray = [
+    {
+      citationId: "C1",
+      toolName: "search_logs",
+      label: "Logs 17:20 – 18:20 (1 shown)",
+      rowCount: 1,
+      queryArguments: { bodySearchText: "pool timeout" },
+      executedAt: "2026-08-07T11:59:00.000Z",
+      canLoadRows: true,
+    },
+  ];
+
+  function withClusters(response: ApiResponse): ApiResponse {
+    return { data: { ...response.data, clusterAccess } };
+  }
+
+  function fullReportResponse(): ApiResponse {
+    return withClusters(
+      completedResponse({
+        analysisMarkdown: structuredMarkdown,
+        analysisTldr: TLDR,
+        evidence: evidenceItems,
+      }),
+    );
+  }
+
+  /*
+   * Classes that turn an element into a panel of its own: a large rounded
+   * frame, a shadow, a gradient or a tinted wash. Controls (buttons, links,
+   * tabs and the verdict's two-answer group) are drawn as controls and are
+   * left out.
+   */
+  const PANEL_CLASS: RegExp =
+    /^(rounded-xl|rounded-2xl|shadow|shadow-(sm|md|lg)|bg-gradient-to-[a-z]+|bg-(indigo|amber|emerald|red|green|rose|violet)-50(\/\d+)?|bg-gray-50(\/\d+)?)$/;
+  const CONTROL_SELECTOR: string =
+    "button, a, [role='tab'], [role='group'], [data-testid='investigation-markdown']";
+
+  function classTokens(element: Element): Array<string> {
+    return (element.getAttribute("class") || "").split(/\s+/);
+  }
+
+  function panelsInsideTheCard(): Array<string> {
+    const region: HTMLElement = screen.getByRole("region", {
+      name: "AI Investigation",
+    });
+
+    return Array.from(region.querySelectorAll("*"))
+      .filter((element: Element): boolean => {
+        if (element.closest(CONTROL_SELECTOR)) {
+          return false;
+        }
+
+        const tokens: Array<string> = classTokens(element);
+        const isFramedBox: boolean =
+          tokens.includes("border") &&
+          tokens.some((token: string): boolean => {
+            return token.startsWith("rounded");
+          });
+
+        return (
+          isFramedBox ||
+          tokens.some((token: string): boolean => {
+            return PANEL_CLASS.test(token);
+          })
+        );
+      })
+      .map((element: Element): string => {
+        return `<${element.tagName.toLowerCase()} class="${element.getAttribute("class")}">`;
+      });
+  }
+
+  const STATES: Array<[string, () => ApiResponse]> = [
+    [
+      "a completed report with a TL;DR, evidence and cluster access",
+      fullReportResponse,
+    ],
+    [
+      "a running investigation",
+      (): ApiResponse => {
+        return withClusters(
+          successfulResponse(
+            investigationPayload({
+              status: AIRunStatus.Running,
+              events: [activityEvent],
+            }),
+          ),
+        );
+      },
+    ],
+    [
+      "a queued investigation",
+      (): ApiResponse => {
+        return successfulResponse(
+          investigationPayload({ status: AIRunStatus.Queued }),
+        );
+      },
+    ],
+    [
+      "a run that stopped with an error",
+      (): ApiResponse => {
+        return withClusters(
+          successfulResponse(
+            investigationPayload({
+              status: AIRunStatus.Error,
+              errorMessage: "The model provider timed out.",
+              events: [activityEvent],
+              toolCallCount: 3,
+              totalTokens: 900,
+            }),
+          ),
+        );
+      },
+    ],
+    [
+      "a report that is still being prepared",
+      (): ApiResponse => {
+        return completedResponse({
+          analysisMarkdown: null,
+          isAnalysisPending: true,
+        });
+      },
+    ],
+    [
+      "a run that finished without a report",
+      (): ApiResponse => {
+        return completedResponse({
+          analysisMarkdown: null,
+          isAnalysisPending: false,
+        });
+      },
+    ],
+  ];
+
+  test.each(STATES)(
+    "draws %s as one card with no panel inside it",
+    async (_state: string, response: () => ApiResponse) => {
+      postMock.mockResolvedValue(response() as never);
+
+      renderPanel();
+      await flush();
+
+      expect(screen.getAllByTestId("card")).toHaveLength(1);
+      expect(panelsInsideTheCard()).toEqual([]);
+    },
+  );
+
+  test("still draws no panel once the details and an evidence row are open", async () => {
+    routePosts({
+      investigation: (): unknown => {
+        return Promise.resolve(fullReportResponse());
+      },
+      evidence: (): unknown => {
+        return Promise.resolve(
+          evidenceRowsResponse("C1", "18:01 ERROR pool timeout"),
+        );
+      },
+    });
+
+    renderPanel();
+    await flush();
+
+    openDetails();
+    fireEvent.click(
+      within(evidenceList()).getByRole("button", { name: /Logs 17:20/ }),
+    );
+    await flush();
+
+    expect(screen.getByText("18:01 ERROR pool timeout")).toBeVisible();
+    expect(panelsInsideTheCard()).toEqual([]);
+  });
+
+  test.each([
+    [
+      "Investigating…",
+      "live",
+      (): ApiResponse => {
+        return successfulResponse(
+          investigationPayload({ status: AIRunStatus.Running }),
+        );
+      },
+    ],
+    [
+      "Queued",
+      "live",
+      (): ApiResponse => {
+        return successfulResponse(
+          investigationPayload({ status: AIRunStatus.Queued }),
+        );
+      },
+    ],
+    [
+      "Preparing report…",
+      "live",
+      (): ApiResponse => {
+        return completedResponse({
+          analysisMarkdown: null,
+          isAnalysisPending: true,
+        });
+      },
+    ],
+    [
+      "Completed",
+      "done",
+      (): ApiResponse => {
+        return completedResponse();
+      },
+    ],
+    [
+      "No report",
+      "attention",
+      (): ApiResponse => {
+        return completedResponse({
+          analysisMarkdown: null,
+          isAnalysisPending: false,
+        });
+      },
+    ],
+    [
+      "Did not finish",
+      "failed",
+      (): ApiResponse => {
+        return successfulResponse(
+          investigationPayload({
+            status: AIRunStatus.Error,
+            errorMessage: "The provider timed out.",
+          }),
+        );
+      },
+    ],
+  ])(
+    'names the state "%s" in the neutral header pill, marked %s',
+    async (text: string, indicator: string, response: () => ApiResponse) => {
+      postMock.mockResolvedValue(response() as never);
+
+      renderPanel();
+      await flush();
+
+      const badge: HTMLElement = screen.getByLabelText("Investigation status");
+      expect(badge).toHaveTextContent(text);
+      expect(badge).toHaveAttribute("data-indicator", indicator);
+      // The pill itself never changes colour with the state.
+      expect(badge).toHaveClass("bg-gray-50", "text-gray-700", "ring-gray-200");
+      expect(badge.className).not.toMatch(
+        /(^|\s)(bg|text|ring)-(green|indigo|red|amber|rose|emerald)-/,
+      );
+      // It sits in the card's header, not in the body with the report.
+      expect(
+        screen.getByRole("region", { name: "AI Investigation" }),
+      ).not.toContainElement(badge);
+    },
+  );
+
+  test("reads summary, report, cluster access, working, then actions, in that order", async () => {
+    postMock.mockResolvedValue(fullReportResponse() as never);
+
+    renderPanel();
+    await flush();
+
+    const order: Array<HTMLElement> = [
+      screen.getByRole("region", { name: "Investigation summary" }),
+      screen.getByRole("region", { name: "Investigation report" }),
+      screen.getByTestId("cluster-access-notice"),
+      runDetails(),
+      screen.getByTestId("investigation-actions"),
+    ];
+
+    for (let index: number = 1; index < order.length; index++) {
+      expect(
+        order[index - 1]!.compareDocumentPosition(order[index]!) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+    }
+
+    // The report comes first: nothing about clusters stands above the answer.
+    const region: HTMLElement = screen.getByRole("region", {
+      name: "AI Investigation",
+    });
+    expect(region.firstElementChild).toBe(
+      screen.getByRole("region", { name: "Investigation summary" }),
+    );
+  });
+
+  test("separates the report from its working and its actions with hairlines, not boxes", async () => {
+    postMock.mockResolvedValue(fullReportResponse() as never);
+
+    renderPanel();
+    await flush();
+
+    expect(runDetails()).toHaveClass("border-t", "border-gray-200", "pt-5");
+    expect(classTokens(runDetails())).not.toContain("border");
+    expect(runDetails().className).not.toMatch(/rounded|shadow|bg-/);
+
+    const actions: HTMLElement = screen.getByTestId("investigation-actions");
+    expect(actions).toHaveClass("border-t", "border-gray-200", "divide-y");
+    expect(classTokens(actions)).not.toContain("border");
+    expect(actions.className).not.toMatch(/rounded|shadow|bg-/);
+  });
+
+  test("gives every heading inside the card the same weight and size", async () => {
+    postMock.mockResolvedValue(fullReportResponse() as never);
+
+    renderPanel();
+    await flush();
+
+    const region: HTMLElement = screen.getByRole("region", {
+      name: "AI Investigation",
+    });
+    const headings: Array<HTMLElement> = within(region).getAllByRole("heading");
+    expect(
+      headings.map((heading: HTMLElement): string => {
+        return heading.textContent || "";
+      }),
+    ).toEqual([
+      "Summary",
+      "Most likely root cause",
+      "Suggested next steps",
+      "Evidence and activity",
+      "Act on this investigation",
+      VERDICT_QUESTION,
+    ]);
+
+    for (const heading of headings) {
+      expect(heading.tagName).toBe("H3");
+      expect(heading).toHaveClass("text-sm", "font-semibold", "text-gray-900");
+      expect(heading.className).not.toMatch(/uppercase|amber|indigo/);
+    }
+  });
+
+  test("asks for the verdict in plain words", async () => {
+    postMock.mockResolvedValue(completedResponse() as never);
+
+    renderPanel();
+    await flush();
+
+    expect(VERDICT_QUESTION).toBe("Was this analysis correct?");
+    expect(
+      screen.getByRole("heading", { level: 3, name: VERDICT_QUESTION }),
+    ).toBeVisible();
+    const answers: HTMLElement = screen.getByRole("group", {
+      name: VERDICT_QUESTION,
+    });
+    expect(
+      within(answers)
+        .getAllByRole("button")
+        .map((button: HTMLElement): string => {
+          return button.textContent || "";
+        }),
+    ).toEqual(["Confirmed", "Rejected"]);
+  });
+
+  test("describes only a queued or running investigation as live", async () => {
+    postMock.mockResolvedValue(
+      successfulResponse(
+        investigationPayload({ status: AIRunStatus.Running }),
+      ) as never,
+    );
+    const view: ReturnType<typeof render> = renderPanel();
+    await flush();
+
+    expect(screen.getByTestId("card-description")).toHaveTextContent(
+      "OneUptime AI's live root-cause investigation for this incident.",
+    );
+    view.unmount();
+
+    postMock.mockReset();
+    postMock.mockResolvedValue(
+      successfulResponse(
+        investigationPayload({
+          status: AIRunStatus.Error,
+          errorMessage: "The provider timed out.",
+        }),
+      ) as never,
+    );
+    renderPanel();
+    await flush();
+
+    // A run that stopped is not live any more.
+    expect(screen.getByTestId("card-description")).toHaveTextContent(
+      "OneUptime AI's root-cause investigation for this incident.",
+    );
+    expect(screen.getByTestId("card-description")).not.toHaveTextContent(
+      "live",
+    );
+  });
+
+  test("tells a live run's story without a frame or a progress bar of its own", async () => {
+    postMock.mockResolvedValue(
+      successfulResponse(
+        investigationPayload({
+          status: AIRunStatus.Running,
+          events: [activityEvent],
+        }),
+      ) as never,
+    );
+
+    renderPanel();
+    await flush();
+
+    const live: HTMLElement = screen.getByRole("region", {
+      name: "Live investigation",
+    });
+    expect(live.className).toBe("space-y-4");
+    expect(
+      within(live).getByRole("heading", {
+        level: 3,
+        name: "OneUptime AI is investigating",
+      }),
+    ).toBeVisible();
+    expect(live).toContainElement(screen.getByTestId("investigation-activity"));
+    // The header's pulsing badge says the run is moving; no hairline bar.
+    expect(
+      screen
+        .getByRole("region", { name: "AI Investigation" })
+        .querySelector(".h-0\\.5"),
+    ).toBeNull();
+  });
+
+  test("states a failure as a line with a red mark, not a red box", async () => {
+    postMock.mockResolvedValue(
+      successfulResponse(
+        investigationPayload({
+          status: AIRunStatus.Error,
+          errorMessage: "The model provider timed out.",
+          events: [activityEvent],
+        }),
+      ) as never,
+    );
+
+    renderPanel();
+    await flush();
+
+    const failure: HTMLElement = screen.getByTestId("investigation-error");
+    expect(failure).toHaveTextContent(
+      "The investigation stopped before it could report.",
+    );
+    expect(failure).toHaveTextContent("The model provider timed out.");
+    expect(failure.className).toBe("flex items-start gap-3");
+    expect(failure.querySelector("svg")?.getAttribute("class")).toContain(
+      "text-red-600",
+    );
+    for (const paragraph of Array.from(failure.querySelectorAll("p"))) {
+      expect(paragraph.className).not.toMatch(/red/);
+    }
+  });
+
+  test.each([
+    [
+      "Preparing the final report",
+      (): ApiResponse => {
+        return completedResponse({
+          analysisMarkdown: null,
+          isAnalysisPending: true,
+        });
+      },
+    ],
+    [
+      "No investigation report was published.",
+      (): ApiResponse => {
+        return completedResponse({
+          analysisMarkdown: null,
+          isAnalysisPending: false,
+        });
+      },
+    ],
+  ])(
+    'stands "%s" in for the report as a plain line',
+    async (title: string, response: () => ApiResponse) => {
+      postMock.mockResolvedValue(response() as never);
+
+      renderPanel();
+      await flush();
+
+      const line: HTMLElement = screen
+        .getByText(title)
+        .closest("div")!.parentElement!;
+      expect(line.className).toBe("flex items-start gap-3");
+      expect(screen.getByText(title)).toHaveClass(
+        "text-sm",
+        "font-medium",
+        "text-gray-900",
+      );
+      expect(panelsInsideTheCard()).toEqual([]);
+    },
+  );
+
+  test("renders no block inside a paragraph in any state", async () => {
+    const consoleError: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      console,
+      "error",
+    );
+
+    try {
+      for (const [, response] of STATES) {
+        postMock.mockReset();
+        postMock.mockResolvedValue(response() as never);
+        const view: ReturnType<typeof render> = renderPanel();
+        await flush();
+
+        expect(view.container.querySelectorAll("p div")).toHaveLength(0);
+        view.unmount();
+      }
+
+      expect(
+        consoleError.mock.calls.some((args: Array<unknown>): boolean => {
+          return args.some((value: unknown): boolean => {
+            return (
+              typeof value === "string" && value.includes("validateDOMNesting")
+            );
+          });
+        }),
+      ).toBe(false);
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+});
+
+/*
+ * The conversation with OneUptime AI is supplied by the page and placed by
+ * the panel: at the bottom of the investigation card while there is a run,
+ * or as its own card under the "not investigated" explanation — the box is
+ * two-way whether or not an automatic investigation ran.
+ */
+describe("InvestigationPanel conversation slot", () => {
+  const renderConversationMock: MockFunction = getJestMockFunction();
+
+  function renderWithConversation(): ReturnType<typeof render> {
+    renderConversationMock.mockImplementation(((
+      variant: "embedded" | "card",
+    ): React.ReactElement => {
+      return React.createElement(
+        "div",
+        { "data-testid": `conversation-${variant}` },
+        "Ask OneUptime AI",
+      );
+    }) as never);
+
+    return render(
+      <InvestigationPanel
+        subjectType="incident"
+        subjectId={INCIDENT_ID}
+        renderConversation={(variant: "embedded" | "card") => {
+          return renderConversationMock(variant) as React.ReactElement;
+        }}
+      />,
+    );
+  }
+
+  afterEach(() => {
+    renderConversationMock.mockReset();
+  });
+
+  test("closes a completed investigation card with the embedded conversation", async () => {
+    postMock.mockResolvedValue(completedResponse() as never);
+
+    renderWithConversation();
+    await flush();
+
+    const embedded: HTMLElement = screen.getByTestId("conversation-embedded");
+    const region: HTMLElement = screen.getByRole("region", {
+      name: "AI Investigation",
+    });
+
+    expect(region).toContainElement(embedded);
+    expect(screen.queryByTestId("conversation-card")).toBeNull();
+
+    // It is the last thing in the card, after the report and its actions.
+    expect(region.lastElementChild).toBe(embedded);
+  });
+
+  test("is embedded while the investigation is still running", async () => {
+    postMock.mockResolvedValue(
+      successfulResponse(
+        investigationPayload({
+          status: AIRunStatus.Running,
+          events: [activityEvent],
+        }),
+      ) as never,
+    );
+
+    renderWithConversation();
+    await flush();
+
+    expect(screen.getByTestId("conversation-embedded")).toBeInTheDocument();
+    expect(renderConversationMock).not.toHaveBeenCalledWith("card");
+  });
+
+  test("stands as its own card when no investigation ran", async () => {
+    postMock.mockResolvedValue(noInvestigationResponse() as never);
+
+    renderWithConversation();
+    await flush();
+
+    expect(
+      screen.getByText("No investigation has been recorded"),
+    ).toBeVisible();
+
+    const card: HTMLElement = screen.getByTestId("conversation-card");
+    expect(card).toBeInTheDocument();
+    expect(screen.queryByTestId("conversation-embedded")).toBeNull();
+    // Its own card, beside the explanation rather than inside it.
+    expect(
+      screen.getByRole("region", { name: "AI Investigation" }),
+    ).not.toContainElement(card);
+  });
+
+  test("waits for the investigation status before showing it", async () => {
+    const deferred: Deferred<ApiResponse> = createDeferred<ApiResponse>();
+    postMock.mockReturnValue(deferred.promise as never);
+
+    renderWithConversation();
+    await flush();
+
+    expect(screen.getByText("Checking investigation status…")).toBeVisible();
+    expect(screen.queryByTestId("conversation-card")).toBeNull();
+    expect(screen.queryByTestId("conversation-embedded")).toBeNull();
+
+    await resolveDeferred(deferred, completedResponse());
+
+    expect(screen.getByTestId("conversation-embedded")).toBeInTheDocument();
+  });
+
+  test("renders nothing extra when the page supplies no conversation", async () => {
+    postMock.mockResolvedValue(noInvestigationResponse() as never);
+
+    renderPanel();
+    await flush();
+
+    expect(screen.queryByTestId("conversation-card")).toBeNull();
+    expect(screen.getAllByTestId("card")).toHaveLength(1);
+  });
+});