@runtypelabs/persona 3.17.0 → 3.18.0

package/src/components/ask-user-question-bubble.test.ts

@@ -0,0 +1,583 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it, vi } from "vitest";
+import {
+  ASK_USER_QUESTION_MAX,
+  ASK_USER_QUESTION_TOOL_NAME,
+  __resetTruncateWarn,
+  buildStructuredAnswers,
+  createAskUserQuestionBubble,
+  ensureAskUserQuestionSheet,
+  getCurrentIndex,
+  getQuestionCount,
+  getSelectedLabels,
+  isAskUserQuestionMessage,
+  isGroupedSheet,
+  navigateToPage,
+  readAnswersFromSheet,
+  removeAskUserQuestionSheet,
+  setCurrentAnswer,
+} from "./ask-user-question-bubble";
+import type {
+  AgentWidgetConfig,
+  AgentWidgetMessage,
+  AskUserQuestionPrompt,
+} from "../types";
+
+const makeMessage = (overrides: Partial<AgentWidgetMessage> = {}): AgentWidgetMessage => ({
+  id: "msg-1",
+  role: "assistant",
+  content: "",
+  createdAt: new Date().toISOString(),
+  variant: "tool",
+  streaming: false,
+  toolCall: {
+    id: "tool-1",
+    name: ASK_USER_QUESTION_TOOL_NAME,
+    status: "complete",
+    args: {
+      questions: [
+        {
+          question: "Who shops on your site?",
+          options: [
+            { label: "Hobbyists" },
+            { label: "Professionals" },
+            { label: "Gift-seekers" },
+          ],
+          multiSelect: false,
+          allowFreeText: true,
+        },
+      ],
+    },
+    chunks: [],
+  },
+  ...overrides,
+});
+
+const makeOverlay = () => {
+  const overlay = document.createElement("div");
+  overlay.setAttribute("data-persona-composer-overlay", "");
+  document.body.innerHTML = "";
+  document.body.appendChild(overlay);
+  return overlay;
+};
+
+describe("isAskUserQuestionMessage", () => {
+  it("is true for a tool-variant message whose toolCall.name is ask_user_question", () => {
+    expect(isAskUserQuestionMessage(makeMessage())).toBe(true);
+  });
+
+  it("is false for other tool calls", () => {
+    const other = makeMessage({
+      toolCall: {
+        id: "t2",
+        name: "search_products",
+        status: "complete",
+        chunks: [],
+      },
+    });
+    expect(isAskUserQuestionMessage(other)).toBe(false);
+  });
+
+  it("is false for non-tool variants", () => {
+    const notTool = makeMessage({ variant: undefined, toolCall: undefined });
+    expect(isAskUserQuestionMessage(notTool)).toBe(false);
+  });
+});
+
+describe("createAskUserQuestionBubble", () => {
+  it("renders a compact transcript stub carrying the message id", () => {
+    const bubble = createAskUserQuestionBubble(makeMessage());
+    expect(bubble.getAttribute("data-message-id")).toBe("msg-1");
+    expect(bubble.getAttribute("data-bubble-type")).toBe("ask-user-question");
+    expect(bubble.textContent).toContain("Awaiting");
+  });
+});
+
+describe("ensureAskUserQuestionSheet", () => {
+  it("mounts a sheet in the overlay with real pills when args are complete", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]');
+    expect(sheet).not.toBeNull();
+    const pills = sheet!.querySelectorAll('[data-ask-user-action="pick"]');
+    expect(pills.length).toBe(3);
+    // Default rows layout — label is in `.persona-ask-row-label`, alongside
+    // a number-badge affordance. Read the dedicated label slot.
+    const firstLabel = pills[0].querySelector(".persona-ask-row-label");
+    expect(firstLabel?.textContent).toBe("Hobbyists");
+    // Free-text affordance present by default — rows mode embeds the input
+    // inside the Other row via `focus-free-text` (digit shortcut + click chrome).
+    const custom = sheet!.querySelector('[data-ask-user-action="focus-free-text"]');
+    expect(custom).not.toBeNull();
+  });
+
+  it("renders skeleton pills while streaming (status=running, no parsable chunks)", () => {
+    const overlay = makeOverlay();
+    const streaming = makeMessage({
+      toolCall: {
+        id: "tool-streaming",
+        name: ASK_USER_QUESTION_TOOL_NAME,
+        status: "running",
+        chunks: ['{"ques'],
+      },
+    });
+    ensureAskUserQuestionSheet(streaming, {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-streaming"]');
+    expect(sheet).not.toBeNull();
+    const skeletons = sheet!.querySelectorAll(".persona-ask-pill-skeleton");
+    expect(skeletons.length).toBeGreaterThan(0);
+    const realPills = sheet!.querySelectorAll('[data-ask-user-action="pick"]');
+    expect(realPills.length).toBe(0);
+  });
+
+  it("hydrates skeleton pills into real pills when streaming chunks become parsable", () => {
+    const overlay = makeOverlay();
+    const msg = makeMessage({
+      toolCall: {
+        id: "tool-hyd",
+        name: ASK_USER_QUESTION_TOOL_NAME,
+        status: "running",
+        chunks: ['{"questions":[{"question":"X","options":['],
+      },
+    });
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+
+    // Simulate more chunks arriving — options now parseable
+    msg.toolCall!.chunks = ['{"questions":[{"question":"X","options":[{"label":"A"},{"label":"B"}'];
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-hyd"]')!;
+    const pills = sheet.querySelectorAll('[data-ask-user-action="pick"]');
+    expect(pills.length).toBe(2);
+    expect(pills[0].querySelector(".persona-ask-row-label")?.textContent).toBe("A");
+    expect(pills[1].querySelector(".persona-ask-row-label")?.textContent).toBe("B");
+  });
+
+  it("is idempotent — re-invoking does not duplicate sheets", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    const sheets = overlay.querySelectorAll('[data-persona-ask-sheet-for]');
+    expect(sheets.length).toBe(1);
+  });
+
+  it("respects enabled: false — sheet is not mounted", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(
+      makeMessage(),
+      { features: { askUserQuestion: { enabled: false } } } as AgentWidgetConfig,
+      overlay
+    );
+    expect(overlay.querySelector('[data-persona-ask-sheet-for]')).toBeNull();
+  });
+
+  it("omits the free-text pill when allowFreeText is false", () => {
+    const overlay = makeOverlay();
+    const msg = makeMessage();
+    (msg.toolCall!.args as any).questions[0].allowFreeText = false;
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    expect(sheet.querySelector('[data-ask-user-action="open-free-text"]')).toBeNull();
+  });
+
+  it("renders a multi-select submit row when multiSelect is true", () => {
+    const overlay = makeOverlay();
+    const msg = makeMessage();
+    (msg.toolCall!.args as any).questions[0].multiSelect = true;
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    expect(sheet.querySelector('[data-ask-user-action="submit-multi"]')).not.toBeNull();
+    expect(sheet.getAttribute("data-multi-select")).toBe("true");
+  });
+
+  it("does not render a dismiss button — Skip in the nav row is the canonical escape", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    expect(sheet.querySelector('[data-ask-user-action="dismiss"]')).toBeNull();
+    expect(sheet.querySelector(".persona-ask-sheet-close")).toBeNull();
+  });
+});
+
+describe("getSelectedLabels", () => {
+  it("collects labels from pills with aria-pressed=true", () => {
+    const overlay = makeOverlay();
+    const msg = makeMessage();
+    (msg.toolCall!.args as any).questions[0].multiSelect = true;
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    const pills = sheet.querySelectorAll<HTMLElement>('[data-ask-user-action="pick"]');
+    pills[0].setAttribute("aria-pressed", "true");
+    pills[2].setAttribute("aria-pressed", "true");
+    expect(getSelectedLabels(sheet as HTMLElement)).toEqual(["Hobbyists", "Gift-seekers"]);
+  });
+});
+
+describe("removeAskUserQuestionSheet", () => {
+  it("removes the sheet for a specific tool-call id after the slide-out delay", async () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    expect(overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')).not.toBeNull();
+    removeAskUserQuestionSheet(overlay, "tool-1");
+    // The implementation defers removal with setTimeout — flush it.
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    expect(overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')).toBeNull();
+  });
+});
+
+// ============================================================================
+// Grouped (paginated) multi-question payloads
+// ============================================================================
+
+const makeGroupedMessage = (
+  questions: Partial<AskUserQuestionPrompt>[],
+  agentMetadata?: AgentWidgetMessage["agentMetadata"]
+): AgentWidgetMessage =>
+  makeMessage({
+    toolCall: {
+      id: "tool-grouped",
+      name: ASK_USER_QUESTION_TOOL_NAME,
+      status: "complete",
+      args: { questions },
+      chunks: [],
+    },
+    agentMetadata,
+  });
+
+const sheetFor = (overlay: Element, toolCallId: string): HTMLElement =>
+  overlay.querySelector<HTMLElement>(`[data-persona-ask-sheet-for="${toolCallId}"]`)!;
+
+describe("grouped questions — stepper UI", () => {
+  it("renders 'Question 1 of N' chip and Back/Next nav row when N > 1", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      { question: "Q1?", options: [{ label: "A" }, { label: "B" }] },
+      { question: "Q2?", options: [{ label: "C" }, { label: "D" }] },
+      { question: "Q3?", options: [{ label: "E" }, { label: "F" }] },
+    ]);
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+
+    expect(isGroupedSheet(sheet)).toBe(true);
+    expect(getQuestionCount(sheet)).toBe(3);
+    expect(getCurrentIndex(sheet)).toBe(0);
+
+    const stepInline = sheet.querySelector('[data-ask-step-inline="true"]');
+    expect(stepInline?.textContent).toBe("1/3");
+
+    expect(sheet.querySelector('[data-ask-user-action="back"]')).not.toBeNull();
+    expect(sheet.querySelector('[data-ask-user-action="next"]')).not.toBeNull();
+    expect(sheet.querySelector('[data-ask-user-action="submit-all"]')).toBeNull();
+  });
+
+  it("leaves the inline stepper empty in single-Q mode (no grouped UI)", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-1");
+
+    expect(isGroupedSheet(sheet)).toBe(false);
+    const stepInline = sheet.querySelector('[data-ask-step-inline="true"]');
+    expect(stepInline?.textContent).toBe("");
+    expect(sheet.querySelector('[data-ask-nav-row="true"]')).toBeNull();
+  });
+
+  it("Next is disabled until current page has an answer; enabled after pick", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      { question: "Q1?", options: [{ label: "A" }, { label: "B" }] },
+      { question: "Q2?", options: [{ label: "C" }, { label: "D" }] },
+    ]);
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+    const next = sheet.querySelector<HTMLButtonElement>('[data-ask-user-action="next"]')!;
+    expect(next.disabled).toBe(true);
+
+    setCurrentAnswer(sheet, "A");
+    expect(next.disabled).toBe(false);
+    const pillA = sheet.querySelector<HTMLElement>('[data-option-label="A"]');
+    expect(pillA?.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("navigateToPage(1) shows page 2 and Back becomes enabled; Submit-all on final page", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      { question: "Q1?", options: [{ label: "A" }] },
+      { question: "Q2?", options: [{ label: "B" }] },
+    ]);
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+    setCurrentAnswer(sheet, "A");
+    navigateToPage(sheet, msg, undefined, 1);
+
+    const back = sheet.querySelector<HTMLButtonElement>('[data-ask-user-action="back"]')!;
+    expect(back.disabled).toBe(false);
+    const submitAll = sheet.querySelector('[data-ask-user-action="submit-all"]');
+    expect(submitAll).not.toBeNull();
+    expect(sheet.querySelector('[data-ask-user-action="next"]')).toBeNull();
+
+    const stepInline = sheet.querySelector('[data-ask-step-inline="true"]');
+    expect(stepInline?.textContent).toBe("2/2");
+  });
+
+  it("Back from page 2 → page 1 preserves the prior answer's selected pill state", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      { question: "Q1?", options: [{ label: "A" }, { label: "B" }] },
+      { question: "Q2?", options: [{ label: "C" }, { label: "D" }] },
+    ]);
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+
+    setCurrentAnswer(sheet, "A");
+    navigateToPage(sheet, msg, undefined, 1);
+    setCurrentAnswer(sheet, "C");
+    navigateToPage(sheet, msg, undefined, 0);
+
+    const pillA = sheet.querySelector<HTMLElement>('[data-option-label="A"]');
+    expect(pillA?.getAttribute("aria-pressed")).toBe("true");
+    expect(getCurrentIndex(sheet)).toBe(0);
+  });
+
+  it("multi-select page stores an array; pill toggles preserve other selections", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      {
+        question: "Pick many",
+        options: [{ label: "X" }, { label: "Y" }, { label: "Z" }],
+        multiSelect: true,
+        allowFreeText: false,
+      },
+      { question: "Q2?", options: [{ label: "A" }] },
+    ]);
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+
+    setCurrentAnswer(sheet, ["X", "Z"]);
+    const stored = readAnswersFromSheet(sheet)[0];
+    expect(stored).toEqual(["X", "Z"]);
+    const pillX = sheet.querySelector<HTMLElement>('[data-option-label="X"]');
+    const pillY = sheet.querySelector<HTMLElement>('[data-option-label="Y"]');
+    const pillZ = sheet.querySelector<HTMLElement>('[data-option-label="Z"]');
+    expect(pillX?.getAttribute("aria-pressed")).toBe("true");
+    expect(pillY?.getAttribute("aria-pressed")).toBe("false");
+    expect(pillZ?.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("buildStructuredAnswers keys answers by question text", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      { question: "Tone?", options: [{ label: "Bold" }] },
+      { question: "Length?", options: [{ label: "Short" }, { label: "Long" }] },
+    ]);
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+
+    setCurrentAnswer(sheet, "Bold");
+    navigateToPage(sheet, msg, undefined, 1);
+    setCurrentAnswer(sheet, "Short");
+
+    expect(buildStructuredAnswers(sheet, msg)).toEqual({
+      "Tone?": "Bold",
+      "Length?": "Short",
+    });
+  });
+
+  it("hydrates from agentMetadata — restores index and prior answers on a fresh mount", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage(
+      [
+        { question: "Q1?", options: [{ label: "A" }, { label: "B" }] },
+        { question: "Q2?", options: [{ label: "C" }, { label: "D" }] },
+        { question: "Q3?", options: [{ label: "E" }, { label: "F" }] },
+      ],
+      {
+        askUserQuestionAnswers: { "Q1?": "B", "Q2?": "D" },
+        askUserQuestionIndex: 1,
+      }
+    );
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+
+    expect(getCurrentIndex(sheet)).toBe(1);
+    const pillD = sheet.querySelector<HTMLElement>('[data-option-label="D"]');
+    expect(pillD?.getAttribute("aria-pressed")).toBe("true");
+    expect(buildStructuredAnswers(sheet, msg)).toEqual({ "Q1?": "B", "Q2?": "D" });
+  });
+
+  it("renders all 8 questions when at the cap, and warns + truncates at 9", () => {
+    __resetTruncateWarn();
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const overlay = makeOverlay();
+    const eight: Partial<AskUserQuestionPrompt>[] = Array.from({ length: 8 }, (_, i) => ({
+      question: `Q${i + 1}?`,
+      options: [{ label: `${i + 1}-A` }],
+    }));
+    ensureAskUserQuestionSheet(makeGroupedMessage(eight), {} as AgentWidgetConfig, overlay);
+    let sheet = sheetFor(overlay, "tool-grouped");
+    expect(getQuestionCount(sheet)).toBe(ASK_USER_QUESTION_MAX);
+    expect(warn).not.toHaveBeenCalled();
+
+    overlay.innerHTML = "";
+    const nine = [...eight, { question: "overflow", options: [{ label: "X" }] }];
+    ensureAskUserQuestionSheet(makeGroupedMessage(nine), {} as AgentWidgetConfig, overlay);
+    sheet = sheetFor(overlay, "tool-grouped");
+    expect(getQuestionCount(sheet)).toBe(ASK_USER_QUESTION_MAX);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0]?.[0]).toContain("truncating to");
+
+    warn.mockRestore();
+  });
+});
+
+describe("rows layout (default)", () => {
+  it("renders option rows with description visible inline (not in title attr)", () => {
+    const overlay = makeOverlay();
+    const msg = makeMessage({
+      toolCall: {
+        id: "tool-rows-desc",
+        name: ASK_USER_QUESTION_TOOL_NAME,
+        status: "complete",
+        args: {
+          questions: [
+            {
+              question: "Pick one",
+              options: [
+                { label: "Discord", description: "Real Discord invite to link" },
+                { label: "Slack", description: "Public Slack community" },
+              ],
+              multiSelect: false,
+              allowFreeText: false,
+            },
+          ],
+        },
+        chunks: [],
+      },
+    });
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-rows-desc"]')!;
+    expect(sheet.getAttribute("data-ask-layout")).toBe("rows");
+    const firstRow = sheet.querySelector<HTMLElement>('[data-ask-user-action="pick"]')!;
+    expect(firstRow.querySelector(".persona-ask-row-label")?.textContent).toBe("Discord");
+    expect(firstRow.querySelector(".persona-ask-row-description")?.textContent).toBe(
+      "Real Discord invite to link"
+    );
+    // No title-attr fallback in rows layout — description is inline.
+    expect(firstRow.getAttribute("title")).toBeNull();
+  });
+
+  it("shows numeric badges 1..N on single-select rows", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    const rows = sheet.querySelectorAll<HTMLElement>('[data-ask-user-action="pick"]');
+    expect(rows[0].querySelector(".persona-ask-row-badge")?.textContent).toBe("1");
+    expect(rows[1].querySelector(".persona-ask-row-badge")?.textContent).toBe("2");
+    expect(rows[2].querySelector(".persona-ask-row-badge")?.textContent).toBe("3");
+    // Multi-select check should NOT be present on single-select rows.
+    expect(rows[0].querySelector(".persona-ask-row-check")).toBeNull();
+  });
+
+  it("shows checkbox affordance instead of badge on multi-select rows", () => {
+    const overlay = makeOverlay();
+    const multi = makeMessage({
+      toolCall: {
+        id: "tool-multi",
+        name: ASK_USER_QUESTION_TOOL_NAME,
+        status: "complete",
+        args: {
+          questions: [
+            {
+              question: "Pick any",
+              options: [{ label: "A" }, { label: "B" }],
+              multiSelect: true,
+              allowFreeText: false,
+            },
+          ],
+        },
+        chunks: [],
+      },
+    });
+    ensureAskUserQuestionSheet(multi, {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-multi"]')!;
+    const rows = sheet.querySelectorAll<HTMLElement>('[data-ask-user-action="pick"]');
+    expect(rows[0].querySelector(".persona-ask-row-check")).not.toBeNull();
+    expect(rows[0].querySelector(".persona-ask-row-badge")).toBeNull();
+  });
+
+  it("embeds the free-text input INSIDE the Other row (rows mode) — no separate row, no Send button", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    // No standalone free-text row in rows mode — input lives inside the Other row.
+    expect(sheet.querySelector('[data-ask-free-text-row="true"]')).toBeNull();
+    const otherRow = sheet.querySelector<HTMLElement>('[data-ask-other-row="true"]')!;
+    expect(otherRow).not.toBeNull();
+    expect(otherRow.classList.contains("persona-ask-row--other")).toBe(true);
+    expect(otherRow.querySelector('[data-ask-free-text-input="true"]')).not.toBeNull();
+    expect(otherRow.querySelector('[data-ask-user-action="submit-free-text"]')).toBeNull();
+    // Other row carries the focus-free-text action (digit shortcut + click chrome).
+    expect(otherRow.getAttribute("data-ask-user-action")).toBe("focus-free-text");
+    // Number badge for the Other row (N+1 — 3 real options + Other = 4).
+    const badge = otherRow.querySelector<HTMLElement>(".persona-ask-row-badge");
+    expect(badge?.textContent).toBe("4");
+  });
+
+  it("respects layout: 'pills' opt-out — no row affordances, free-text starts hidden, Send button still rendered", () => {
+    const overlay = makeOverlay();
+    const config = {
+      features: { askUserQuestion: { layout: "pills" } },
+    } as unknown as AgentWidgetConfig;
+    ensureAskUserQuestionSheet(makeMessage(), config, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    expect(sheet.getAttribute("data-ask-layout")).toBe("pills");
+    const firstPill = sheet.querySelector<HTMLElement>('[data-ask-user-action="pick"]')!;
+    expect(firstPill.querySelector(".persona-ask-row-label")).toBeNull();
+    expect(firstPill.querySelector(".persona-ask-row-badge")).toBeNull();
+    expect(firstPill.textContent).toBe("Hobbyists");
+    const freeRow = sheet.querySelector<HTMLElement>('[data-ask-free-text-row="true"]')!;
+    expect(freeRow.classList.contains("persona-hidden")).toBe(true);
+    // Pills mode keeps the Send button to commit the expand-on-click input.
+    expect(freeRow.querySelector('[data-ask-user-action="submit-free-text"]')).not.toBeNull();
+  });
+});
+
+describe("Skip button", () => {
+  it("renders a Skip button alongside Next in the grouped nav row", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      { question: "Q1", options: [{ label: "A" }] },
+      { question: "Q2", options: [{ label: "B" }] },
+    ]);
+    ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+    const skip = sheet.querySelector<HTMLButtonElement>('[data-ask-user-action="skip"]');
+    expect(skip).not.toBeNull();
+    expect(skip!.disabled).toBe(false);
+    expect(skip!.textContent).toBe("Skip");
+  });
+
+  it("uses the configured skipLabel override", () => {
+    const overlay = makeOverlay();
+    const msg = makeGroupedMessage([
+      { question: "Q1", options: [{ label: "A" }] },
+      { question: "Q2", options: [{ label: "B" }] },
+    ]);
+    const config = {
+      features: { askUserQuestion: { skipLabel: "Pass" } },
+    } as unknown as AgentWidgetConfig;
+    ensureAskUserQuestionSheet(msg, config, overlay);
+    const sheet = sheetFor(overlay, "tool-grouped");
+    const skip = sheet.querySelector<HTMLButtonElement>('[data-ask-user-action="skip"]')!;
+    expect(skip.textContent).toBe("Pass");
+  });
+
+  it("does not render a Skip button in single-question (non-grouped) mode", () => {
+    const overlay = makeOverlay();
+    ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
+    const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
+    expect(sheet.querySelector('[data-ask-user-action="skip"]')).toBeNull();
+  });
+});