@agent-native/toolkit 0.228.0-nightly-20261111212500 → 0.228.0

package/src/app/agentkit/react/markdown.spec.tsx

@@ -7,6 +7,7 @@ import { createRoot, hydrateRoot, type Root } from "react-dom/client";
 import { renderToString } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { loadCodeHighlighter } from "../../code-highlighter.js";
 import { AgentMessagePartView } from "./components.js";
 import { AgentKitProvider } from "./context.js";
 
@@ -32,6 +33,14 @@ async function renderPart(
   });
 }
 
+async function settleHighlighting() {
+  await act(async () => {
+    vi.runAllTimers();
+    await loadCodeHighlighter();
+    await Promise.resolve();
+  });
+}
+
 beforeEach(() => {
   vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
   vi.useFakeTimers();
@@ -187,16 +196,16 @@ describe("AgentKit Markdown text parts", () => {
       { active: false, resetKey: "code-block" },
     );
 
-    const figure = container.querySelector("figure.agentkit-code-block");
+    const figure = container.querySelector(".agentkit-code-block");
     const language = figure?.querySelector(
-      ".agentkit-code-block-header > span.agentkit-code-block-language",
+      ".agentkit-code-block-header > span.agentkit-code-block-title",
     );
     const pre = figure?.querySelector<HTMLPreElement>(
-      ":scope > pre[role='region']",
+      ":scope > pre[role='group']",
     );
-    expect(language?.textContent).toBe("ts");
+    expect(language?.textContent).toBe("TypeScript");
     expect(pre?.tabIndex).toBe(0);
-    expect(pre?.getAttribute("aria-label")).toBe("ts code");
+    expect(pre?.getAttribute("aria-label")).toBe("TypeScript code");
     const copy = figure?.querySelector<HTMLButtonElement>(
       ".agentkit-code-block-header button",
     );
@@ -218,7 +227,7 @@ describe("AgentKit Markdown text parts", () => {
       { active: false, resetKey: "plain-code-block" },
     );
     expect(
-      container.querySelector("pre[role='region']")?.getAttribute("aria-label"),
+      container.querySelector("pre[role='group']")?.getAttribute("aria-label"),
     ).toBe("Code block");
   });
 
@@ -253,7 +262,7 @@ describe("AgentKit Markdown text parts", () => {
       { active: false, resetKey: "table" },
     );
     const table = container.querySelector(
-      "div.agentkit-markdown-table[role='region'] > table",
+      "div.agentkit-markdown-table[role='group'] > table",
     );
     expect(table).not.toBeNull();
     expect(table?.querySelector("[data-prose]")).toBeNull();
@@ -492,7 +501,7 @@ describe("AgentKit streamed Markdown reveal", () => {
       expect(container.textContent).not.toMatch(/\*\*|\]\(|`|\|\s*-/);
     }
     await renderPart(markdown(text), { active: false, resetKey });
-    await act(async () => vi.runAllTimers());
+    await settleHighlighting();
     const normalize = (html: string) =>
       html
         .replace(/<span class="agentkit-stream-word">([^<]*)<\/span>/g, "$1")
@@ -503,6 +512,7 @@ describe("AgentKit streamed Markdown reveal", () => {
     await act(async () => root.unmount());
     root = createRoot(container);
     await renderPart(markdown(text), { active: false, resetKey: "static" });
+    await settleHighlighting();
 
     expect(streamedHtml).toBe(container.innerHTML);
   });

package/src/app/agentkit/react/message-actions.spec.tsx

@@ -365,7 +365,7 @@ describe("assistant reply toolbar", () => {
     expect(latest.dataset.latest).toBe("true");
     expect(older.dataset.latest).toBeUndefined();
     expect(footer("assistant-latest").dataset.placement).toBe("inline");
-    expect(latest.getAttribute("role")).toBe("group");
+    expect(latest.getAttribute("role")).toBe("toolbar");
     expect(labelsOf(set(latest, "primary"))).toEqual([
       "Copy message",
       "Good response",
@@ -823,6 +823,60 @@ describe("assistant reply toolbar", () => {
   });
 });
 
+describe("assistant reply toolbar keyboard", () => {
+  it("costs one tab stop per reply and moves between actions with the arrow keys", async () => {
+    const { toolbar } = await renderChat();
+    const latest = toolbar("assistant-latest");
+    const stops = () =>
+      Array.from(latest.querySelectorAll("button")).filter(
+        (button) => button.tabIndex === 0,
+      );
+    expect(stops().map((button) => button.getAttribute("aria-label"))).toEqual([
+      "Copy message",
+    ]);
+
+    await act(async () => stops()[0]?.focus());
+    await act(async () => {
+      document.activeElement?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }),
+      );
+    });
+    expect(document.activeElement?.getAttribute("aria-label")).toBe(
+      "Good response",
+    );
+    expect(stops()).toEqual([document.activeElement]);
+  });
+
+  it("keeps Retry focused and enabled while its fork is in flight", async () => {
+    const fork = Promise.withResolvers<{
+      id: string;
+      createdAt: string;
+      updatedAt: string;
+    }>();
+    const { toolbar } = await renderChat({
+      transport: {
+        forkThread: vi.fn(() => fork.promise),
+        assertAiSetupReady: vi.fn(async () => undefined),
+      },
+    });
+    const latest = toolbar("assistant-latest");
+    await press(toggle(latest));
+    const retry = latest.querySelector<HTMLButtonElement>(
+      'button[aria-label="Retry"]',
+    );
+    await act(async () => retry?.focus());
+    await press(retry);
+
+    expect(retry?.disabled).toBe(false);
+    expect(retry?.getAttribute("aria-busy")).toBe("true");
+    expect(document.activeElement).toBe(retry);
+    await act(async () => {
+      fork.reject(new Error("offline"));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  });
+});
+
 describe("assistant reply toolbar placement", () => {
   it("sits under the reply, not on the Worked for row above it", async () => {
     const { container, footer, toolbar } = await renderChat({

package/src/app/agentkit/react/notices.spec.tsx

@@ -272,7 +272,7 @@ describe("AgentKit recoverable failure notices", () => {
     expect(row()?.textContent).toContain("Connection to the agent was lost.");
   });
 
-  it("keeps red for a final run failure and amber for a recoverable one", async () => {
+  it("marks final and recoverable run failures amber with a triangle", async () => {
     const failures: Record<string, AgentError> = {
       "thread-retryable": {
         code: "runtime_error",
@@ -307,13 +307,13 @@ describe("AgentKit recoverable failure notices", () => {
       () => <AgentKitChat composer={false} />,
       "thread-retryable",
     );
+    // oracle-change: final run failures are amber like retryable ones, so the tone checks merged into one.
     const row = () =>
       view.container.querySelector<HTMLElement>(".agentkit-run-failure");
-    expect(row()?.dataset.tone).toBe("warning");
     expect(row()?.querySelector(".tabler-icon-alert-triangle")).not.toBeNull();
 
     await view.rerender("thread-final");
-    expect(row()?.dataset.tone).toBe("danger");
-    expect(row()?.querySelector(".tabler-icon-alert-circle")).not.toBeNull();
+    expect(row()?.querySelector(".tabler-icon-alert-triangle")).not.toBeNull();
+    expect(row()?.querySelector(".tabler-icon-alert-circle")).toBeNull();
   });
 });

package/src/app/agentkit/react/optimistic-send.spec.tsx

@@ -184,6 +184,49 @@ describe("AgentKit optimistic send", () => {
     expect(messages[0]?.textContent).toContain("Plan the launch");
   });
 
+  it("anchors the sent message near the top before the thread confirms it", async () => {
+    const readiness = Promise.withResolvers<void>();
+    const chat = await renderChat({
+      history: [{ id: "user-earlier", text: "Earlier question" }],
+      readiness: () => readiness.promise,
+    });
+    const transcript = chat.container.querySelector(
+      ".agentkit-transcript",
+    ) as HTMLDivElement;
+    const spacer = chat.container.querySelector(
+      ".agentkit-turn-spacer",
+    ) as HTMLDivElement;
+    let scrollTop = 0;
+    const height = () =>
+      1_260 + (Number.parseFloat(spacer.style.blockSize) || 0);
+    Object.defineProperties(transcript, {
+      clientHeight: { configurable: true, get: () => 300 },
+      scrollHeight: { configurable: true, get: height },
+      scrollTop: {
+        configurable: true,
+        get: () => scrollTop,
+        set: (value: number) => {
+          scrollTop = Math.min(value, height() - 300);
+        },
+      },
+    });
+    // The sent copy starts 1,210px down the transcript content.
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        const top = this.dataset.pending === "true" ? 1_210 - scrollTop : 0;
+        return { top, bottom: top, left: 0, right: 0 } as DOMRect;
+      },
+    );
+    await act(async () => chat.composerRef.current!.setText("And then?"));
+
+    await chat.send();
+
+    expect(chat.userMessages().at(-1)?.dataset.pending).toBe("true");
+    expect(scrollTop).toBe(1_178);
+    readiness.resolve();
+    await chat.settle();
+  });
+
   it("puts the draft back and shows the error when readiness fails", async () => {
     const readiness = Promise.withResolvers<void>();
     const chat = await renderChat({ readiness: () => readiness.promise });

package/src/app/agentkit/react/question-card.spec.tsx

@@ -0,0 +1,276 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { QuestionCard, type AgentKitQuestion } from "./question-card.js";
+
+const questions: AgentKitQuestion[] = [
+  {
+    id: "cuisine",
+    question: "Which cuisine?",
+    options: [
+      { value: "italian", label: "Italian" },
+      { value: "thai", label: "Thai", recommended: true },
+      { value: "mexican", label: "Mexican" },
+    ],
+  },
+  {
+    id: "courses",
+    question: "Which courses?",
+    multiSelect: true,
+    options: [
+      { value: "starter", label: "Starter" },
+      { value: "main", label: "Main" },
+      { value: "dessert", label: "Dessert" },
+    ],
+  },
+];
+
+describe("QuestionCard", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  const options = () =>
+    Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        ".agentkit-question-option",
+      ),
+    );
+  const button = (name: string) => {
+    const match = Array.from(container.querySelectorAll("button")).find(
+      (item) => item.textContent?.trim() === name,
+    );
+    if (!match) throw new Error(`No ${name} button`);
+    return match;
+  };
+  const press = (target: Element | null, key: string) =>
+    act(() => {
+      target?.dispatchEvent(
+        new KeyboardEvent("keydown", { key, bubbles: true }),
+      );
+    });
+
+  it("picks with number keys and arrows, and focuses the next question", async () => {
+    const onSubmit = vi.fn();
+    await act(async () =>
+      root.render(
+        <QuestionCard
+          questions={questions}
+          onSubmit={onSubmit}
+          onDismiss={vi.fn()}
+        />,
+      ),
+    );
+
+    // The recommended option comes first and holds the group's one tab stop.
+    expect(options().map((option) => option.textContent)).toEqual([
+      "1ThaiRecommended",
+      "2Italian",
+      "3Mexican",
+    ]);
+    expect(options().map((option) => option.tabIndex)).toEqual([0, -1, -1]);
+    expect(
+      container
+        .querySelector('[role="radiogroup"]')
+        ?.getAttribute("aria-labelledby"),
+    ).toBe(container.querySelector(".agentkit-question-text")?.id);
+
+    const [first] = options();
+    act(() => first?.focus());
+    await press(first, "3");
+    expect(options()[2]?.getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toBe(options()[2]);
+    await press(document.activeElement, "ArrowDown");
+    expect(options()[0]?.getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toBe(options()[0]);
+
+    await act(async () => button("Next").click());
+    // Focus moves to the new question instead of dropping to the page.
+    expect(
+      container.querySelector(".agentkit-question-text")?.textContent,
+    ).toBe("Which courses?");
+    expect(document.activeElement).toBe(options()[0]);
+    expect(container.querySelector('[role="group"]')).not.toBeNull();
+
+    await press(document.activeElement, "1");
+    await press(document.activeElement, "3");
+    expect(
+      options().map((option) => option.getAttribute("aria-checked")),
+    ).toEqual(["true", "false", "true"]);
+    await act(async () => button("Send").click());
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      cuisine: { values: ["thai"] },
+      courses: { values: ["starter", "dessert"] },
+    });
+  });
+
+  it("lets a written answer replace a single choice", async () => {
+    const onSubmit = vi.fn();
+    await act(async () =>
+      root.render(
+        <QuestionCard
+          questions={[questions[0] as AgentKitQuestion]}
+          onSubmit={onSubmit}
+          onDismiss={vi.fn()}
+        />,
+      ),
+    );
+    await act(async () => options()[1]?.click());
+    const input = container.querySelector<HTMLInputElement>(
+      ".agentkit-question-other input",
+    );
+    if (!input) throw new Error("No written answer");
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )?.set?.call(input, "Korean");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(options()[1]?.getAttribute("aria-checked")).toBe("false");
+    // Number keys belong to the text while it has focus.
+    await press(input, "2");
+    expect(options()[1]?.getAttribute("aria-checked")).toBe("false");
+    await press(input, "Enter");
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      cuisine: { values: [], other: "Korean" },
+    });
+  });
+
+  it("keeps a required question from being skipped, and dismisses on close", async () => {
+    const onDismiss = vi.fn();
+    await act(async () =>
+      root.render(
+        <QuestionCard
+          questions={[
+            { ...(questions[0] as AgentKitQuestion), required: true },
+          ]}
+          onSubmit={vi.fn()}
+          onDismiss={onDismiss}
+        />,
+      ),
+    );
+
+    expect(button("Skip").disabled).toBe(true);
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Dismiss questions"]',
+        )
+        ?.click(),
+    );
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("answers a color, a slider and files", async () => {
+    const onSubmit = vi.fn();
+    await act(async () =>
+      root.render(
+        <QuestionCard
+          questions={[
+            {
+              id: "accent",
+              question: "Which accent?",
+              allowOther: false,
+              options: [
+                { value: "teal", label: "Teal", color: "teal" },
+                { value: "plum", label: "Plum", color: "#8e4585" },
+              ],
+            },
+            {
+              id: "volume",
+              question: "How loud?",
+              options: [],
+              allowOther: false,
+              range: { min: 0, max: 10, step: 1, initial: 5 },
+            },
+            {
+              id: "brief",
+              question: "Any brief to read?",
+              options: [],
+              allowOther: false,
+              files: true,
+            },
+          ]}
+          onSubmit={onSubmit}
+          onDismiss={vi.fn()}
+        />,
+      ),
+    );
+
+    expect(
+      container.querySelectorAll(".agentkit-question-swatch"),
+    ).toHaveLength(2);
+    expect(container.querySelector(".agentkit-question-other")).toBeNull();
+    await act(async () => options()[1]?.click());
+    await act(async () => button("Next").click());
+
+    // The slider's shown value is already the answer.
+    const slider = container.querySelector<HTMLInputElement>(
+      '.agentkit-question-range input[type="range"]',
+    );
+    expect(slider?.value).toBe("5");
+    expect(slider?.getAttribute("aria-labelledby")).toBe(
+      container.querySelector(".agentkit-question-text")?.id,
+    );
+    expect(button("Next").disabled).toBe(false);
+    await act(async () => {
+      if (!slider) return;
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )?.set?.call(slider, "8");
+      slider.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(
+      container.querySelector(".agentkit-question-range-value")?.textContent,
+    ).toBe("8");
+    await act(async () => button("Next").click());
+
+    const brief = new File(["notes"], "brief.md", { type: "text/markdown" });
+    const picker = container.querySelector<HTMLInputElement>(
+      '.agentkit-question-files input[type="file"]',
+    );
+    expect(button("Send").disabled).toBe(true);
+    await act(async () => {
+      if (!picker) return;
+      Object.defineProperty(picker, "files", {
+        configurable: true,
+        value: [brief],
+      });
+      picker.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    expect(
+      container.querySelector(".agentkit-question-file-name")?.textContent,
+    ).toBe("brief.md");
+    expect(
+      container
+        .querySelector(".agentkit-question-file-remove")
+        ?.getAttribute("aria-label"),
+    ).toBe("Remove brief.md");
+    await act(async () => button("Send").click());
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      accent: { values: ["plum"] },
+      volume: { values: ["8"] },
+      brief: { values: [], files: [brief] },
+    });
+  });
+});