@oneuptime/common 14.0.11 → 14.0.12

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

@@ -19,11 +19,12 @@ import * as React from "react";
 import getJestMockFunction, { MockFunction } from "../../MockType";
 
 /*
- * The conversation inside the AI investigation box, rendered for real with
- * only the network, markdown and heavy chat widgets stubbed. It drives the
- * component the way responders will: asking from a suggestion, typing,
+ * The conversation that closes the AI Investigation card, rendered for real
+ * with only the network, markdown and heavy chat widgets stubbed. It drives
+ * the component the way responders will: asking from a suggestion, typing,
  * seeing who asked what, watching an answer being written, approving an
- * action, stopping an answer, and choosing how much the AI may do.
+ * action, stopping an answer, and choosing how much the AI may do. Its
+ * composer, its sources list and its notices are the real ones.
  */
 
 const postMock: MockFunction = getJestMockFunction();
@@ -159,35 +160,14 @@ jest.mock(
   },
 );
 
-jest.mock(
-  "../../../../App/FeatureSet/Dashboard/src/Components/AIChat/CitationChips",
-  () => {
-    return {
-      __esModule: true,
-      default: (props: {
-        citations: Array<{ id: string; label: string }>;
-      }): React.ReactElement => {
-        return React.createElement(
-          "ul",
-          { "data-testid": "answer-sources" },
-          props.citations.map((citation: { id: string; label: string }) => {
-            return React.createElement(
-              "li",
-              { key: citation.id },
-              citation.label,
-            );
-          }),
-        );
-      },
-    };
-  },
-);
-
+import { AIInvestigationStage } from "../../../../App/FeatureSet/Dashboard/src/Components/AI/AIInvestigationStatus";
 import InvestigationConversation from "../../../../App/FeatureSet/Dashboard/src/Components/AI/InvestigationConversation/InvestigationConversation";
 import {
+  THREAD_FOLD_ABOVE_LENGTH,
   THREAD_PERMISSION_MODE_STORAGE_KEY,
   THREAD_POLL_BUSY_MS,
   THREAD_POLL_IDLE_MS,
+  THREAD_TAIL_LENGTH,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/AI/InvestigationConversation/InvestigationConversationData";
 import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
 import AIChatMessageRole from "../../../Types/AI/AIChatMessageRole";
@@ -347,13 +327,13 @@ async function tick(milliseconds: number): Promise<void> {
 function renderConversation(data?: {
   subjectType?: "incident" | "alert";
   subjectId?: ObjectID;
-  variant?: "embedded" | "card";
+  stage?: AIInvestigationStage;
 }): ReturnType<typeof render> {
   return render(
     <InvestigationConversation
       subjectType={data?.subjectType || "incident"}
       subjectId={data?.subjectId || INCIDENT_ID}
-      variant={data?.variant}
+      investigationStage={data?.stage}
     />,
   );
 }
@@ -483,14 +463,17 @@ describe("InvestigationConversation — an empty thread", () => {
     ).toBeVisible();
   });
 
-  test("stands as its own card when asked to", async () => {
+  test("is a section of the card and never a card of its own", async () => {
     routeResponses({});
 
-    renderConversation({ variant: "card" });
+    renderConversation();
     await flush();
 
-    expect(screen.getByTestId("card")).toBeInTheDocument();
-    expect(screen.getAllByText("Ask OneUptime AI").length).toBeGreaterThan(0);
+    expect(screen.queryByTestId("card")).toBeNull();
+    expect(screen.getAllByText("Ask OneUptime AI")).toHaveLength(1);
+    expect(screen.getByTestId("investigation-conversation").tagName).toBe(
+      "SECTION",
+    );
   });
 });
 
@@ -605,10 +588,8 @@ describe("InvestigationConversation — asking", () => {
     await flush();
 
     expect(
-      screen.getByText(
-        "OneUptime AI only reads and answers — it never changes anything.",
-      ),
-    ).toBeVisible();
+      screen.getByTestId("investigation-conversation-mode"),
+    ).toHaveTextContent("Only reads and answers. It never changes anything.");
     expect(
       window.localStorage.getItem(THREAD_PERMISSION_MODE_STORAGE_KEY),
     ).toBe(AIChatPermissionMode.ReadOnly);
@@ -635,8 +616,8 @@ describe("InvestigationConversation — asking", () => {
     await flush();
 
     expect(
-      screen.getByText("OneUptime AI asks before it changes anything."),
-    ).toBeVisible();
+      screen.getByTestId("investigation-conversation-mode"),
+    ).toHaveTextContent("Asks for approval before it changes anything.");
   });
 });
 
@@ -699,9 +680,9 @@ describe("InvestigationConversation — a shared thread", () => {
       "data-safe-mode",
       "true",
     );
-    expect(within(reply).getByTestId("answer-sources")).toHaveTextContent(
-      'kubectl top pods -A on cluster "prod"',
-    );
+    expect(
+      within(reply).getByTestId("investigation-conversation-sources"),
+    ).toHaveTextContent('kubectl top pods -A on cluster "prod"');
 
     // Everyone who asked, in the header.
     expect(
@@ -1105,3 +1086,1380 @@ describe("InvestigationConversation — resilience", () => {
     );
   });
 });
+
+/*
+ * ---------------------------------------------------------------------------
+ * One section of the AI Investigation card
+ * ---------------------------------------------------------------------------
+ * The conversation used to open with an icon tile and a header of its own
+ * (and, with no run, sat in a second card). It is the card's last section
+ * now and is drawn like the card's other rows.
+ */
+
+// Classes that would make something inside the section a panel of its own.
+const BOX_CLASS: RegExp =
+  /(^|\s)(bg-(gray|indigo|amber|emerald|red|green|rose|violet|sky)-(50|100)(\/\d+)?|border-(rose|red|amber|emerald|green)-\d{3}|rounded-xl|rounded-2xl|shadow(-sm|-md|-lg)?)(\s|$)/;
+
+function boxesInside(element: Element, except?: Element): Array<string> {
+  return [element, ...Array.from(element.querySelectorAll("*"))]
+    .filter((node: Element): boolean => {
+      return (
+        !except?.contains(node) &&
+        BOX_CLASS.test(node.getAttribute("class") || "")
+      );
+    })
+    .map((node: Element): string => {
+      return `<${node.tagName.toLowerCase()} class="${node.getAttribute("class")}">`;
+    });
+}
+
+function section(): HTMLElement {
+  return screen.getByTestId("investigation-conversation");
+}
+
+function chipLabels(): Array<string> {
+  return within(screen.getByTestId("investigation-conversation-empty"))
+    .getAllByRole("button")
+    .map((button: HTMLElement): string => {
+      return button.textContent || "";
+    });
+}
+
+describe("InvestigationConversation — a section of the card", () => {
+  test("opens with the card's own heading and description styles, and no icon tile", async () => {
+    routeResponses({});
+
+    renderConversation();
+    await flush();
+
+    expect(section()).toHaveAttribute(
+      "aria-label",
+      "Conversation with OneUptime AI",
+    );
+    // A hairline above it, like every other section of the card.
+    expect(section()).toHaveClass("border-t", "border-gray-200", "pt-5");
+
+    const heading: HTMLElement = screen.getByRole("heading", {
+      level: 3,
+      name: "Ask OneUptime AI",
+    });
+    // Exactly the heading the card's other rows use.
+    expect(heading.className).toBe("text-sm font-semibold text-gray-900");
+    expect(heading.nextElementSibling).toHaveClass(
+      "mt-1",
+      "text-xs",
+      "leading-5",
+      "text-gray-500",
+    );
+
+    // The old header: an indigo tile with a chat icon in front of the title.
+    expect(heading.parentElement!.querySelector("svg")).toBeNull();
+    expect(section().querySelector(".bg-indigo-50")).toBeNull();
+    expect(screen.getAllByRole("heading")).toHaveLength(1);
+  });
+
+  test("an empty thread draws no panel: chips and the composer only", async () => {
+    routeResponses({});
+
+    renderConversation();
+    await flush();
+
+    // The composer is a control: its frame is what shows the text box.
+    expect(
+      boxesInside(
+        section(),
+        screen.getByTestId("investigation-conversation-composer"),
+      ),
+    ).toEqual([]);
+    // The sentence that only said the thread was empty is gone.
+    expect(screen.queryByText(/Nobody has asked anything yet/)).toBeNull();
+  });
+
+  test.each([
+    [
+      "reported",
+      "incident",
+      "Ask a follow-up question, or ask it to act. Everyone on this incident sees this conversation.",
+    ],
+    [
+      "none",
+      "incident",
+      "Ask a question about this incident, or ask it to act. Everyone on this incident sees this conversation.",
+    ],
+    [
+      "underway",
+      "alert",
+      "Ask a question about this alert, or ask it to act. Everyone on this alert sees this conversation.",
+    ],
+    [
+      "checking",
+      "alert",
+      "Ask a question about this alert, or ask it to act. Everyone on this alert sees this conversation.",
+    ],
+    [
+      undefined,
+      "incident",
+      "Ask a question about this incident, or ask it to act. Everyone on this incident sees this conversation.",
+    ],
+  ] as Array<[AIInvestigationStage | undefined, "incident" | "alert", string]>)(
+    "with the investigation %s on an %s it says what it is for",
+    async (
+      stage: AIInvestigationStage | undefined,
+      subjectType: "incident" | "alert",
+      description: string,
+    ) => {
+      routeResponses({});
+
+      renderConversation({
+        subjectType,
+        subjectId: subjectType === "alert" ? ALERT_ID : INCIDENT_ID,
+        ...(stage ? { stage } : {}),
+      });
+      await flush();
+
+      expect(
+        screen.getByRole("heading", { level: 3 }).nextElementSibling,
+      ).toHaveTextContent(description);
+    },
+  );
+});
+
+describe("InvestigationConversation — what it suggests", () => {
+  test("leads with the root-cause question when the card has no report", async () => {
+    routeResponses({});
+
+    renderConversation({ stage: "none" });
+    await flush();
+
+    expect(chipLabels()).toEqual([
+      "What is the root cause?",
+      "What should I do right now?",
+      "What changed just before this?",
+      "Is anything else affected?",
+      "Draft a status update",
+      "Acknowledge this incident",
+    ]);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "What is the root cause?" }),
+    );
+    await flush();
+
+    // A question: asked on the click, never parked in the composer.
+    expect(
+      requests("/ai-investigation/conversation/send-message")[0]!.data[
+        "content"
+      ],
+    ).toBe(
+      "What is the most likely root cause of this incident? Investigate it and cite the evidence.",
+    );
+  });
+
+  test.each([["reported"], ["underway"], [undefined]] as Array<
+    [AIInvestigationStage | undefined]
+  >)(
+    "does not offer it while the investigation is %s",
+    async (stage: AIInvestigationStage | undefined) => {
+      routeResponses({});
+
+      renderConversation(stage ? { stage } : {});
+      await flush();
+
+      expect(chipLabels()).toEqual([
+        "What should I do right now?",
+        "What changed just before this?",
+        "Is anything else affected?",
+        "Draft a status update",
+        "Acknowledge this incident",
+      ]);
+    },
+  );
+
+  test("waits for the card to know before it suggests anything", async () => {
+    routeResponses({});
+
+    const view: ReturnType<typeof render> = renderConversation({
+      stage: "checking",
+    });
+    await flush();
+
+    // The thread has loaded (and is empty), but the card is still asking.
+    expect(requests("/ai-investigation/conversation")).toHaveLength(1);
+    expect(screen.getByText("Loading the conversation…")).toBeVisible();
+    expect(screen.queryByTestId("investigation-conversation-empty")).toBeNull();
+    // The composer is there throughout: asking never waits.
+    expect(composer()).toBeVisible();
+
+    view.rerender(
+      <InvestigationConversation
+        subjectType="incident"
+        subjectId={INCIDENT_ID}
+        investigationStage="none"
+      />,
+    );
+    await flush();
+
+    expect(screen.queryByText("Loading the conversation…")).toBeNull();
+    // All six arrive together: nothing is squeezed in front of the others.
+    expect(chipLabels()[0]).toBe("What is the root cause?");
+    expect(chipLabels()).toHaveLength(6);
+  });
+
+  test("a thread with messages does not wait for the card", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({
+          messages: [
+            question({
+              id: "q1",
+              content: "Is the pool exhausted?",
+              userId: PRIYA,
+              name: "Priya Shah",
+            }),
+          ],
+        });
+      },
+    });
+
+    renderConversation({ stage: "checking" });
+    await flush();
+
+    expect(screen.getByText("Is the pool exhausted?")).toBeVisible();
+    expect(screen.queryByText("Loading the conversation…")).toBeNull();
+  });
+
+  test("questions are plain chips; only a request to act carries a mark", async () => {
+    routeResponses({});
+
+    renderConversation({ stage: "none" });
+    await flush();
+
+    const group: HTMLElement = screen.getByRole("group", {
+      name: "Suggested questions",
+    });
+    expect(group).toBe(screen.getByTestId("investigation-conversation-empty"));
+
+    const chips: Array<HTMLElement> = within(group).getAllByRole("button");
+    const marked: Array<string> = chips
+      .filter((chip: HTMLElement): boolean => {
+        return chip.querySelector("svg") !== null;
+      })
+      .map((chip: HTMLElement): string => {
+        return chip.textContent || "";
+      });
+
+    expect(marked).toEqual(["Acknowledge this incident"]);
+    expect(
+      chips.map((chip: HTMLElement): string | null => {
+        return chip.getAttribute("data-suggestion-kind");
+      }),
+    ).toEqual([
+      "question",
+      "question",
+      "question",
+      "question",
+      "question",
+      "action",
+    ]);
+  });
+
+  test("the suggestions leave once someone has asked", async () => {
+    let asked: boolean = false;
+    routeResponses({
+      thread: () => {
+        return asked
+          ? threadResponse({
+              messages: [
+                question({
+                  id: "q1",
+                  content: "What changed?",
+                  userId: SAM,
+                  name: "Sam Lee",
+                }),
+              ],
+            })
+          : EMPTY;
+      },
+      send: () => {
+        asked = true;
+        return { data: { assistantMessageId: ANSWER_ID, aiRunId: RUN_ID } };
+      },
+    });
+
+    renderConversation({ stage: "none" });
+    await flush();
+    fireEvent.click(
+      screen.getByRole("button", { name: "What changed just before this?" }),
+    );
+    await flush();
+
+    expect(screen.queryByTestId("investigation-conversation-empty")).toBeNull();
+    expect(screen.getByRole("log")).toBeVisible();
+  });
+});
+
+/*
+ * ---------------------------------------------------------------------------
+ * A long thread
+ * ---------------------------------------------------------------------------
+ * The thread used to sit in a 40rem box that scrolled inside the card, cut
+ * mid-line at both ends. It is part of the page now, like the report, so a
+ * long one opens on its newest messages instead.
+ */
+function exchanges(
+  count: number,
+  askers: Array<[string, string]> = [[PRIYA, "Priya Shah"]],
+): Array<JSONObject> {
+  const messages: Array<JSONObject> = [];
+
+  for (let index: number = 1; index <= count; index++) {
+    const [userId, name] = askers[(index - 1) % askers.length]!;
+    messages.push(
+      question({
+        id: `q${index}`,
+        content: `Question ${index}`,
+        userId,
+        name,
+      }),
+      answer({
+        id: `a${index}`,
+        content: `Answer ${index}`,
+        userId,
+        name,
+      }),
+    );
+  }
+
+  return messages;
+}
+
+function shownMessages(): Array<string> {
+  return within(screen.getByRole("log"))
+    .getAllByText(/^(Question|Answer) \d+$/)
+    .map((element: HTMLElement): string => {
+      return element.textContent || "";
+    });
+}
+
+function showEarlier(): HTMLElement | null {
+  return screen.queryByTestId("investigation-conversation-show-earlier");
+}
+
+describe("InvestigationConversation — a long thread", () => {
+  test("the fold keeps the last three exchanges of a thread longer than four", () => {
+    expect(THREAD_TAIL_LENGTH).toBe(6);
+    expect(THREAD_FOLD_ABOVE_LENGTH).toBe(8);
+  });
+
+  test("opens on its newest messages, with the earlier ones one click away", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({ messages: exchanges(6) });
+      },
+    });
+
+    renderConversation();
+    await flush();
+
+    expect(shownMessages()).toEqual([
+      "Question 4",
+      "Answer 4",
+      "Question 5",
+      "Answer 5",
+      "Question 6",
+      "Answer 6",
+    ]);
+    expect(showEarlier()).toHaveTextContent("Show 6 earlier messages");
+    // Above the thread it unfolds.
+    expect(
+      showEarlier()!.compareDocumentPosition(screen.getByRole("log")) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("showing the earlier messages reveals them all and hands focus to the thread", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({ messages: exchanges(6) });
+      },
+    });
+
+    renderConversation();
+    await flush();
+
+    showEarlier()!.focus();
+    fireEvent.click(showEarlier()!);
+    await flush();
+
+    expect(shownMessages()).toHaveLength(12);
+    expect(shownMessages()[0]).toBe("Question 1");
+    expect(showEarlier()).toBeNull();
+    // The button that had focus is gone: the thread it revealed takes it.
+    expect(document.activeElement).toBe(screen.getByRole("log"));
+  });
+
+  test("never opens on an answer whose question is folded away", async () => {
+    // Nine messages: the cut would start on Answer 2.
+    const messages: Array<JSONObject> = [
+      ...exchanges(4),
+      question({
+        id: "q5",
+        content: "Question 5",
+        userId: SAM,
+        name: "Sam Lee",
+      }),
+    ];
+    routeResponses({
+      thread: () => {
+        return threadResponse({ messages });
+      },
+    });
+
+    renderConversation();
+    await flush();
+
+    expect(shownMessages()[0]).toBe("Question 2");
+    expect(shownMessages()).toHaveLength(7);
+    expect(showEarlier()).toHaveTextContent("Show 2 earlier messages");
+  });
+
+  test.each([[1], [2], [4]])(
+    "a thread of %i exchanges is shown whole",
+    async (count: number) => {
+      routeResponses({
+        thread: () => {
+          return threadResponse({ messages: exchanges(count) });
+        },
+      });
+
+      renderConversation();
+      await flush();
+
+      expect(shownMessages()).toHaveLength(count * 2);
+      expect(showEarlier()).toBeNull();
+    },
+  );
+
+  test("a thread that stays unfolded keeps showing new messages", async () => {
+    let count: number = 6;
+    routeResponses({
+      thread: () => {
+        return threadResponse({ messages: exchanges(count) });
+      },
+    });
+
+    renderConversation();
+    await flush();
+    fireEvent.click(showEarlier()!);
+    await flush();
+
+    count = 7;
+    await tick(THREAD_POLL_IDLE_MS);
+
+    expect(shownMessages()).toHaveLength(14);
+    expect(showEarlier()).toBeNull();
+  });
+
+  test("the next incident's thread opens folded again", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({ messages: exchanges(6) });
+      },
+    });
+
+    const view: ReturnType<typeof render> = renderConversation();
+    await flush();
+    fireEvent.click(showEarlier()!);
+    await flush();
+    expect(showEarlier()).toBeNull();
+
+    view.rerender(
+      <InvestigationConversation
+        subjectType="incident"
+        subjectId={new ObjectID("99999999-9999-4999-8999-999999999999")}
+      />,
+    );
+    await flush();
+
+    expect(showEarlier()).toHaveTextContent("Show 6 earlier messages");
+    expect(shownMessages()).toHaveLength(6);
+  });
+
+  test("the thread is part of the page, not a scrolling box inside the card", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({ messages: exchanges(6) });
+      },
+    });
+
+    renderConversation();
+    await flush();
+
+    const SCROLLER_CLASS: RegExp =
+      /(^|\s)(overflow-(y-)?(auto|scroll)|overscroll-\S+|max-h-\S+)(\s|$)/;
+    const scrollers: Array<Element> = Array.from(
+      section().querySelectorAll("*"),
+    ).filter((element: Element): boolean => {
+      return (
+        element.tagName !== "TEXTAREA" &&
+        SCROLLER_CLASS.test(element.getAttribute("class") || "")
+      );
+    });
+
+    expect(scrollers).toEqual([]);
+  });
+
+  test("names everyone who asked, four marks and how many more", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({
+          messages: exchanges(6, [
+            [PRIYA, "Priya Shah"],
+            [SAM, "Sam Lee"],
+            ["aaaaaaaa-0000-4000-8000-000000000003", "Jordan Patel"],
+            ["aaaaaaaa-0000-4000-8000-000000000004", "Alex Kim"],
+            ["aaaaaaaa-0000-4000-8000-000000000005", "Diego Santos"],
+            ["aaaaaaaa-0000-4000-8000-000000000006", "Mei Tan"],
+          ]),
+        });
+      },
+    });
+
+    renderConversation();
+    await flush();
+
+    // Counted over the whole thread, folded messages included.
+    const participants: HTMLElement = screen.getByLabelText(
+      "6 people have asked in this conversation",
+    );
+    expect(participants).toHaveAttribute(
+      "title",
+      "Priya Shah, You, Jordan Patel, Alex Kim, Diego Santos, Mei Tan",
+    );
+    expect(participants).toHaveTextContent("PSSLJPAK+2");
+    // Initials overlap by 4px at most, so none hides the next one's letters.
+    expect(participants.firstElementChild).toHaveClass("-space-x-1");
+  });
+});
+
+/*
+ * ---------------------------------------------------------------------------
+ * An answer's parts
+ * ---------------------------------------------------------------------------
+ * The parts of an answer used to arrive as boxes: gray steps, a red error,
+ * bordered action rows and bordered source pills. They are lines of the
+ * answer now. Two things keep a frame on purpose: a chart or table, and an
+ * action waiting for someone to approve it.
+ */
+describe("InvestigationConversation — an answer's parts", () => {
+  const citations: Array<JSONObject> = [
+    {
+      id: "C1",
+      toolName: "query_metrics",
+      label: "db.client.connections.usage for orders-db",
+      queryArguments: {},
+      rowCount: 45,
+      target: { type: "Metrics" },
+    },
+    {
+      id: "C2",
+      toolName: "search_logs",
+      label: 'Logs matching "pool timeout" in cart-api',
+      queryArguments: {},
+      rowCount: 0,
+      target: { type: "Logs" },
+    },
+    {
+      id: "C3",
+      toolName: "run_kubectl",
+      label: 'kubectl top pods -A on cluster "prod"',
+      queryArguments: {},
+      rowCount: 1,
+    },
+  ];
+
+  function renderAnswer(data: Parameters<typeof answer>[0]): void {
+    routeResponses({
+      thread: () => {
+        return threadResponse({ messages: [answer(data)] });
+      },
+    });
+    renderConversation();
+  }
+
+  test("lists its sources: the mark its text carries, what was read and how much came back", async () => {
+    renderAnswer({
+      content: "The pool is exhausted [C1], cart-api is fine [C2] [C3].",
+      userId: SAM,
+      name: "Sam Lee",
+      citations,
+    });
+    await flush();
+
+    const sources: HTMLElement = screen.getByTestId(
+      "investigation-conversation-sources",
+    );
+    expect(
+      within(sources).getByRole("heading", { level: 4, name: "Sources" }),
+    ).toBeVisible();
+    expect(
+      within(sources)
+        .getAllByRole("listitem")
+        .map((item: HTMLElement): string => {
+          return item.textContent || "";
+        }),
+    ).toEqual([
+      "C1db.client.connections.usage for orders-db · 45 rows",
+      'C2Logs matching "pool timeout" in cart-api · no rows',
+      'C3kubectl top pods -A on cluster "prod" · 1 row',
+    ]);
+    /*
+     * A quiet list. The Ask AI panel draws each source as a bordered,
+     * rounded-full pill; the only shape here is the small C# mark.
+     */
+    const PILL_CLASS: RegExp = /(^|\s)(border|rounded-full|shadow\S*)(\s|$)/;
+    expect(
+      Array.from(sources.querySelectorAll("*")).filter(
+        (element: Element): boolean => {
+          return PILL_CLASS.test(element.getAttribute("class") || "");
+        },
+      ),
+    ).toEqual([]);
+    expect(
+      Array.from(sources.querySelectorAll(".bg-gray-100")).map(
+        (mark: Element): string => {
+          return mark.textContent || "";
+        },
+      ),
+    ).toEqual(["C1", "C2", "C3"]);
+  });
+
+  test("a source with a page of its own opens it; one without is not a button", async () => {
+    renderAnswer({
+      content: "The pool is exhausted [C1].",
+      userId: SAM,
+      name: "Sam Lee",
+      citations,
+    });
+    await flush();
+
+    const sources: HTMLElement = screen.getByTestId(
+      "investigation-conversation-sources",
+    );
+    const buttons: Array<HTMLElement> = within(sources).getAllByRole("button");
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveAttribute(
+      "title",
+      "db.client.connections.usage for orders-db",
+    );
+    // Zero rows is a finding: the query ran and found nothing.
+    expect(buttons[1]).toHaveAttribute(
+      "title",
+      'Logs matching "pool timeout" in cart-api — checked, found nothing',
+    );
+
+    fireEvent.click(buttons[1]!);
+    expect(navigateToCitationTargetMock).toHaveBeenCalledWith({
+      type: "Logs",
+    });
+
+    const kubectl: HTMLElement = sources.querySelector(
+      '[data-citation-id="C3"]',
+    ) as HTMLElement;
+    expect(within(kubectl).queryByRole("button")).toBeNull();
+    expect(kubectl.firstElementChild).toHaveAttribute(
+      "title",
+      'kubectl top pods -A on cluster "prod"',
+    );
+  });
+
+  test("an answer without citations has no sources list", async () => {
+    renderAnswer({ content: "Nothing to cite.", userId: SAM, name: "Sam Lee" });
+    await flush();
+
+    expect(
+      screen.queryByTestId("investigation-conversation-sources"),
+    ).toBeNull();
+  });
+
+  test.each([
+    [AIChatToolActionStatus.Executed, "Done", "text-emerald-600"],
+    [AIChatToolActionStatus.Approved, "Approved", "text-emerald-600"],
+    [AIChatToolActionStatus.Failed, "Failed", "text-red-600"],
+    [AIChatToolActionStatus.Denied, "Denied", "text-gray-400"],
+    [AIChatToolActionStatus.Skipped, "Skipped", "text-gray-400"],
+  ])(
+    "an action that is %s is a line: a mark, what it was and %s",
+    async (
+      status: AIChatToolActionStatus,
+      label: string,
+      markClassName: string,
+    ) => {
+      renderAnswer({
+        content: "Here is what I did.",
+        userId: SAM,
+        name: "Sam Lee",
+        toolActions: [
+          {
+            id: "call-1",
+            toolName: "acknowledge_incident",
+            title: "Acknowledge incident #42",
+            arguments: { incidentNumber: 42 },
+            isMutation: true,
+            requiresApproval: false,
+            status,
+          },
+        ],
+      });
+      await flush();
+
+      const actions: HTMLElement = screen.getByRole("list", {
+        name: "Actions",
+      });
+      const line: HTMLElement = within(actions).getByRole("listitem");
+      expect(line).toHaveTextContent(`Acknowledge incident #42 · ${label}`);
+      expect(line).toHaveAttribute("data-status", status);
+      expect(line.querySelector("svg")).toHaveClass(markClassName);
+      // No bordered row, no coloured chip, and nothing to press.
+      expect(boxesInside(actions)).toEqual([]);
+      expect(within(actions).queryByRole("button")).toBeNull();
+      expect(
+        screen.queryByRole("group", { name: "Actions waiting for approval" }),
+      ).toBeNull();
+    },
+  );
+
+  test("only an action someone has to decide on gets the approval prompt", async () => {
+    renderAnswer({
+      status: AIChatMessageStatus.WaitingForApproval,
+      userId: PRIYA,
+      name: "Priya Shah",
+      toolActions: [
+        {
+          id: "call-1",
+          toolName: "add_note",
+          title: "Add a private note",
+          arguments: {},
+          isMutation: true,
+          requiresApproval: false,
+          status: AIChatToolActionStatus.Executed,
+        },
+        {
+          id: "call-2",
+          toolName: "acknowledge_incident",
+          title: "Acknowledge incident #42",
+          arguments: {},
+          isMutation: true,
+          requiresApproval: true,
+          status: AIChatToolActionStatus.Pending,
+        },
+      ],
+    });
+    await flush();
+
+    // One action is waiting, so the sentence is about one.
+    expect(
+      screen.getByText(
+        "I'd like to take this action. Review it and approve to continue.",
+      ),
+    ).toBeVisible();
+
+    expect(screen.getByRole("list", { name: "Actions" })).toHaveTextContent(
+      "Add a private note · Done",
+    );
+    expect(screen.getByRole("list", { name: "Actions" })).not.toHaveTextContent(
+      "Acknowledge incident #42",
+    );
+
+    const prompt: HTMLElement = screen.getByRole("group", {
+      name: "Actions waiting for approval",
+    });
+    expect(prompt).toHaveTextContent("Acknowledge incident #42");
+    expect(prompt).not.toHaveTextContent("Add a private note");
+
+    fireEvent.click(
+      within(prompt).getByRole("button", { name: /Run 1 action/ }),
+    );
+    await flush();
+
+    expect(
+      requests("/ai-investigation/conversation/respond-to-approval")[0]!.data[
+        "decisions"
+      ],
+    ).toEqual([{ toolCallId: "call-2", approved: true }]);
+  });
+
+  test("two actions waiting are asked about together", async () => {
+    renderAnswer({
+      status: AIChatMessageStatus.WaitingForApproval,
+      userId: PRIYA,
+      name: "Priya Shah",
+      toolActions: ["call-1", "call-2"].map((id: string): JSONObject => {
+        return {
+          id,
+          toolName: "acknowledge_incident",
+          title: `Action ${id}`,
+          arguments: {},
+          isMutation: true,
+          requiresApproval: true,
+          status: AIChatToolActionStatus.Pending,
+        };
+      }),
+    });
+    await flush();
+
+    expect(
+      screen.getByText(
+        "I'd like to take these actions. Review them and approve to continue.",
+      ),
+    ).toBeVisible();
+    expect(screen.queryByRole("list", { name: "Actions" })).toBeNull();
+  });
+
+  test("a failed answer is a line with a red mark, not a red box", async () => {
+    renderAnswer({
+      status: AIChatMessageStatus.Error,
+      errorMessage: "The AI provider is unavailable.",
+      userId: SAM,
+      name: "Sam Lee",
+    });
+    await flush();
+
+    const failure: HTMLElement = screen.getByTestId(
+      "investigation-conversation-answer-error",
+    );
+    expect(failure).toHaveTextContent(
+      "The AI provider is unavailable.Ask again to retry.",
+    );
+    expect(failure.querySelector("svg")).toHaveClass("text-red-600");
+    expect(boxesInside(failure)).toEqual([]);
+    expect(failure.className).not.toMatch(/border|rounded|bg-/);
+  });
+
+  test("a failed answer without a reason still says something", async () => {
+    renderAnswer({
+      status: AIChatMessageStatus.Error,
+      userId: SAM,
+      name: "Sam Lee",
+    });
+    await flush();
+
+    expect(
+      screen.getByText("Something went wrong while answering."),
+    ).toBeVisible();
+  });
+
+  test("a stopped answer says so, and falls back to 'Stopped.'", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({
+          messages: [
+            answer({
+              id: "a1",
+              status: AIChatMessageStatus.Cancelled,
+              userId: SAM,
+              name: "Sam Lee",
+            }),
+          ],
+        });
+      },
+    });
+    renderConversation();
+    await flush();
+
+    const stopped: HTMLElement = screen.getByText("Stopped.");
+    expect(stopped.tagName).toBe("P");
+    // The mark sits beside the sentence, never inside the paragraph.
+    expect(stopped.querySelector("div")).toBeNull();
+    expect(stopped.parentElement!.querySelector("svg")).not.toBeNull();
+  });
+
+  test.each([
+    [AIChatMessageStatus.Error, "The AI provider is unavailable."],
+    [AIChatMessageStatus.Cancelled, "Stopped by Sam."],
+  ])(
+    "an answer that ended as %s still lists what it had already done",
+    async (status: AIChatMessageStatus, text: string) => {
+      renderAnswer({
+        status,
+        content: status === AIChatMessageStatus.Cancelled ? text : "",
+        ...(status === AIChatMessageStatus.Error ? { errorMessage: text } : {}),
+        userId: SAM,
+        name: "Sam Lee",
+        toolActions: [
+          {
+            id: "call-1",
+            toolName: "acknowledge_incident",
+            title: "Acknowledge incident #42",
+            arguments: {},
+            isMutation: true,
+            requiresApproval: false,
+            status: AIChatToolActionStatus.Executed,
+          },
+          {
+            id: "call-2",
+            toolName: "add_note",
+            title: "Add a private note",
+            arguments: {},
+            isMutation: true,
+            requiresApproval: false,
+            status: AIChatToolActionStatus.Skipped,
+          },
+        ],
+      });
+      await flush();
+
+      // The incident was changed before the answer ended: the thread says so.
+      expect(screen.getByText(text)).toBeVisible();
+      expect(
+        within(screen.getByRole("list", { name: "Actions" }))
+          .getAllByRole("listitem")
+          .map((item: HTMLElement): string => {
+            return item.textContent || "";
+          }),
+      ).toEqual([
+        "Acknowledge incident #42 · Done",
+        "Add a private note · Skipped",
+      ]);
+      // After what went wrong, not before it.
+      expect(
+        screen
+          .getByText(text)
+          .compareDocumentPosition(
+            screen.getByRole("list", { name: "Actions" }),
+          ) & Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+      // No sources, no Copy and nothing to approve on an answer that ended.
+      expect(screen.queryByRole("button", { name: "Copy" })).toBeNull();
+      expect(
+        screen.queryByRole("group", { name: "Actions waiting for approval" }),
+      ).toBeNull();
+    },
+  );
+
+  test("a failed or stopped answer with nothing done has no actions list", async () => {
+    renderAnswer({
+      status: AIChatMessageStatus.Error,
+      errorMessage: "The AI provider is unavailable.",
+      userId: SAM,
+      name: "Sam Lee",
+    });
+    await flush();
+
+    expect(screen.queryByRole("list", { name: "Actions" })).toBeNull();
+  });
+
+  test("the steps of an answer being written hang from a rule, with no box", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({
+          isBusy: true,
+          messages: [
+            answer({
+              status: AIChatMessageStatus.InProgress,
+              userId: PRIYA,
+              name: "Priya Shah",
+            }),
+          ],
+          activeRun: {
+            aiRunId: RUN_ID,
+            assistantMessageId: ANSWER_ID,
+            status: AIRunStatus.Running,
+            events: [
+              {
+                _id: "88888888-8888-4888-8888-888888888888",
+                sequence: 1,
+                eventType: AIRunEventType.ToolCallStarted,
+                toolName: "search_logs",
+              },
+            ],
+          },
+        });
+      },
+    });
+    renderConversation();
+    await flush();
+
+    const steps: HTMLElement = screen.getByTestId(
+      "investigation-conversation-live-steps",
+    );
+    expect(steps.className).toBe("border-l-2 border-gray-200 pl-3");
+    expect(steps).toContainElement(screen.getByTestId("live-steps"));
+    // The feed draws the steps only: the card frames nothing around them.
+    expect(activityFeedMock.mock.calls[0]![0]).toMatchObject({
+      hideChrome: true,
+      showLiveIndicator: false,
+      maxVisibleSteps: 8,
+    });
+  });
+
+  test("the steps belong to the answer being written, not to an earlier one", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({
+          isBusy: true,
+          messages: [
+            answer({
+              id: "a-old",
+              content: "An earlier answer.",
+              userId: PRIYA,
+              name: "Priya Shah",
+            }),
+            answer({
+              id: "a-new",
+              status: AIChatMessageStatus.InProgress,
+              userId: SAM,
+              name: "Sam Lee",
+            }),
+          ],
+          activeRun: {
+            aiRunId: RUN_ID,
+            assistantMessageId: "a-new",
+            status: AIRunStatus.Running,
+            events: [
+              {
+                _id: "88888888-8888-4888-8888-888888888888",
+                sequence: 1,
+                eventType: AIRunEventType.ToolCallStarted,
+                toolName: "search_logs",
+              },
+            ],
+          },
+        });
+      },
+    });
+    renderConversation();
+    await flush();
+
+    const answers: Array<HTMLElement> = screen.getAllByTestId(
+      "investigation-conversation-answer",
+    );
+    expect(within(answers[0]!).queryByTestId("live-steps")).toBeNull();
+    expect(within(answers[1]!).getByTestId("live-steps")).toBeVisible();
+    expect(answers[1]).toHaveAttribute("data-status", "InProgress");
+  });
+
+  test("charts and tables are a named group of the answer", async () => {
+    renderAnswer({
+      content: "For me.",
+      userId: SAM,
+      name: "Sam Lee",
+      widgets: [{ id: "W1", type: "Table", title: "Top pods", data: {} }],
+    });
+    await flush();
+
+    expect(
+      screen.getByRole("group", { name: "Data from this answer" }),
+    ).toContainElement(screen.getByTestId("answer-widgets"));
+  });
+
+  test("the parts follow one order: text, data, actions, sources, copy", async () => {
+    renderAnswer({
+      content: "Done [C1].",
+      userId: SAM,
+      name: "Sam Lee",
+      citations,
+      widgets: [{ id: "W1", type: "Table", title: "Top pods", data: {} }],
+      toolActions: [
+        {
+          id: "call-1",
+          toolName: "acknowledge_incident",
+          title: "Acknowledge incident #42",
+          arguments: {},
+          isMutation: true,
+          requiresApproval: false,
+          status: AIChatToolActionStatus.Executed,
+        },
+      ],
+    });
+    await flush();
+
+    const parts: Array<HTMLElement> = [
+      screen.getByTestId("answer-markdown"),
+      screen.getByTestId("answer-widgets"),
+      screen.getByRole("list", { name: "Actions" }),
+      screen.getByTestId("investigation-conversation-sources"),
+      screen.getByRole("button", { name: "Copy" }),
+    ];
+
+    for (let index: number = 1; index < parts.length; index++) {
+      expect(
+        parts[index - 1]!.compareDocumentPosition(parts[index]!) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+    }
+  });
+
+  test("OneUptime AI's mark is the page's solid indigo sparkle", async () => {
+    renderAnswer({ content: "Hello.", userId: SAM, name: "Sam Lee" });
+    await flush();
+
+    const mark: Element = screen
+      .getByTestId("investigation-conversation-answer")
+      .querySelector('[aria-hidden="true"]')!;
+
+    expect(mark).toHaveClass("rounded-full", "bg-indigo-600", "text-white");
+    expect(mark.className).not.toMatch(/gradient|violet/);
+  });
+
+  test("nothing in a full thread nests a block inside a paragraph", async () => {
+    const consoleError: ReturnType<typeof jest.spyOn> = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    try {
+      routeResponses({
+        thread: () => {
+          return threadResponse({
+            messages: [
+              question({
+                id: "q1",
+                content: "What happened?",
+                userId: PRIYA,
+                name: "Priya Shah",
+              }),
+              answer({
+                id: "a1",
+                content: "The pool ran dry [C1].",
+                userId: PRIYA,
+                name: "Priya Shah",
+                citations,
+                toolActions: [
+                  {
+                    id: "call-1",
+                    toolName: "acknowledge_incident",
+                    title: "Acknowledge incident #42",
+                    arguments: {},
+                    isMutation: true,
+                    requiresApproval: false,
+                    status: AIChatToolActionStatus.Failed,
+                  },
+                ],
+              }),
+              answer({
+                id: "a2",
+                status: AIChatMessageStatus.Error,
+                errorMessage: "The AI provider is unavailable.",
+                userId: SAM,
+                name: "Sam Lee",
+              }),
+              answer({
+                id: "a3",
+                status: AIChatMessageStatus.Cancelled,
+                content: "Stopped by Sam.",
+                userId: SAM,
+                name: "Sam Lee",
+              }),
+            ],
+          });
+        },
+      });
+      renderConversation();
+      await flush();
+
+      expect(section().querySelectorAll("p div")).toHaveLength(0);
+      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();
+    }
+  });
+});
+
+describe("InvestigationConversation — when something does not go through", () => {
+  function refuse(message: string): void {
+    routeResponses({
+      send: () => {
+        return new HTTPErrorResponse(400, { message }, {});
+      },
+    });
+    getFriendlyMessageMock.mockReturnValue(message);
+  }
+
+  test("a refused question is said in the card's notice, which can be put away", async () => {
+    refuse("AI is turned off for this project.");
+
+    renderConversation();
+    await flush();
+    fireEvent.change(composer(), { target: { value: "What happened?" } });
+    fireEvent.click(sendButton());
+    await flush();
+
+    const notice: HTMLElement = screen.getByTestId(
+      "investigation-conversation-error",
+    );
+    expect(notice).toHaveAttribute("role", "alert");
+    expect(notice).toHaveTextContent("AI is turned off for this project.");
+    expect(notice.querySelector("svg")).toHaveClass("text-red-600");
+    // A line with a mark: it was a red box between the thread and the box.
+    expect(boxesInside(notice)).toEqual([]);
+    // Straight above the composer it is about.
+    expect(notice.nextElementSibling).toBe(
+      screen.getByTestId("investigation-conversation-composer"),
+    );
+
+    fireEvent.click(within(notice).getByRole("button", { name: "Dismiss" }));
+
+    expect(screen.queryByTestId("investigation-conversation-error")).toBeNull();
+    // Nothing typed is lost by any of it.
+    expect(composer().value).toBe("What happened?");
+  });
+
+  test("asking again clears the last refusal", async () => {
+    let refused: boolean = true;
+    routeResponses({
+      send: () => {
+        return refused
+          ? new HTTPErrorResponse(400, { message: "Busy." }, {})
+          : { data: { assistantMessageId: ANSWER_ID, aiRunId: RUN_ID } };
+      },
+    });
+    getFriendlyMessageMock.mockReturnValue("Busy.");
+
+    renderConversation();
+    await flush();
+    fireEvent.change(composer(), { target: { value: "What happened?" } });
+    fireEvent.click(sendButton());
+    await flush();
+    expect(screen.getByRole("alert")).toHaveTextContent("Busy.");
+
+    refused = false;
+    fireEvent.click(sendButton());
+    await flush();
+
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  test("a thread that cannot be loaded keeps the composer usable", async () => {
+    postMock.mockImplementation((() => {
+      return Promise.resolve(
+        new HTTPErrorResponse(500, { message: "Server error" }, {}),
+      );
+    }) as never);
+    getFriendlyMessageMock.mockReturnValue("Server error");
+
+    renderConversation();
+    await flush();
+
+    expect(
+      screen.getByText("Could not load the conversation: Server error"),
+    ).toBeVisible();
+    expect(screen.queryByTestId("investigation-conversation-empty")).toBeNull();
+    expect(composer()).toBeEnabled();
+    expect(
+      screen.getByRole("heading", { level: 3, name: "Ask OneUptime AI" }),
+    ).toBeVisible();
+  });
+});
+
+describe("InvestigationConversation — the composer in the card", () => {
+  test("is one control: the text, the mode with what it means, and Send", async () => {
+    routeResponses({});
+
+    renderConversation();
+    await flush();
+
+    const frame: HTMLElement = screen.getByTestId(
+      "investigation-conversation-composer",
+    );
+    expect(within(frame).getByRole("textbox")).toHaveAccessibleName(
+      "Ask OneUptime AI",
+    );
+    expect(composer()).toHaveAttribute(
+      "placeholder",
+      "Ask about this incident, or ask OneUptime AI to act…",
+    );
+    expect(
+      within(frame).getByTitle("Choose what the AI is allowed to do"),
+    ).toHaveTextContent("Auto-run");
+    expect(
+      within(frame).getByTestId("investigation-conversation-mode"),
+    ).toHaveTextContent(
+      "Acts on clear requests right away, within your permissions.",
+    );
+    expect(within(frame).getByTitle("Send (Enter)")).toBeDisabled();
+    // It is the last thing in the section, and so in the card.
+    expect(section().lastElementChild).toBe(frame);
+  });
+
+  test("the mode's menu opens from the picker's own left edge", async () => {
+    routeResponses({});
+
+    renderConversation();
+    await flush();
+
+    const picker: HTMLElement = screen.getByTitle(
+      "Choose what the AI is allowed to do",
+    );
+    expect(picker).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(picker);
+
+    const menu: HTMLElement = screen.getByRole("menu", {
+      name: "AI permissions",
+    });
+    /*
+     * The picker is at the composer's left end: lined up on its right edge
+     * the menu (wider than the button) would open out of the card.
+     */
+    expect(menu).toHaveClass("left-0");
+    expect(menu).not.toHaveClass("right-0");
+    expect(picker).toHaveAttribute("aria-expanded", "true");
+  });
+
+  test("Send lights up with something to send and goes back when it is sent", async () => {
+    routeResponses({});
+
+    renderConversation();
+    await flush();
+
+    expect(sendButton()).toHaveClass("bg-gray-100", "text-gray-400");
+
+    fireEvent.change(composer(), { target: { value: "  " } });
+    expect(sendButton()).toBeDisabled();
+
+    fireEvent.change(composer(), { target: { value: "What happened?" } });
+    expect(sendButton()).toBeEnabled();
+    // The page's own primary colour, not the Ask AI panel's black.
+    expect(sendButton()).toHaveClass("bg-indigo-600", "text-white");
+
+    fireEvent.click(sendButton());
+    await flush();
+
+    expect(composer().value).toBe("");
+    expect(sendButton()).toBeDisabled();
+  });
+
+  test("while an answer is written, Send becomes Stop and typing still works", async () => {
+    routeResponses({
+      thread: () => {
+        return threadResponse({
+          isBusy: true,
+          messages: [
+            answer({
+              status: AIChatMessageStatus.InProgress,
+              userId: PRIYA,
+              name: "Priya Shah",
+            }),
+          ],
+        });
+      },
+    });
+
+    renderConversation();
+    await flush();
+
+    expect(screen.queryByTitle("Send (Enter)")).toBeNull();
+    expect(screen.getByTitle("Stop generating")).toBeEnabled();
+
+    fireEvent.change(composer(), { target: { value: "And the node?" } });
+    expect(composer().value).toBe("And the node?");
+  });
+});