container.querySelectorAll<HTMLButtonElement>(".chat-controls .btn--icon[data-tooltip]"),

);

expect(buttons).toHaveLength(5);

expect(buttons).toHaveLength(6);

const labels = buttons.map((button) => button.getAttribute("data-tooltip"));

expect(labels).toEqual([

t("chat.refreshTitle"),

`${t("chat.autoScrollMode")}: ${t("chat.autoScrollNearBottom")}`,

t("chat.thinkingToggle"),

t("chat.toolCallsToggle"),

t("chat.focusToggle"),

container.querySelectorAll<HTMLButtonElement>(".chat-controls__thinking .btn--icon"),

);

expect(buttons).toHaveLength(4);

expect(buttons).toHaveLength(5);

const autoScrollButton = requireButton(buttons.at(0), "auto-scroll mode");

expect(autoScrollButton.dataset.chatAutoScrollMode).toBe("near-bottom");

const cronButton = requireButton(buttons.at(-1), "cron sessions");

expect([...cronButton.classList]).toEqual(["btn", "btn--sm", "btn--icon", "active"]);

expect(cronButton.getAttribute("aria-pressed")).toBe("true");

expect(state.sessionsHideCron).toBe(false);

});

it("renders and applies the chat auto-scroll mode selector", async () => {

it("renders and applies the chat auto-scroll mode toggle", async () => {

const applySettings = vi.fn();

const state = createState({ applySettings });

const container = document.createElement("div");

render(renderChatControls(state), container);

await Promise.resolve();

const select = requireElement(

container.querySelector<HTMLSelectElement>('[data-chat-auto-scroll-select="true"]'),

"auto-scroll select",

const toggle = requireButton(

container.querySelector<HTMLButtonElement>('[data-chat-auto-scroll-toggle="true"]'),

"auto-scroll toggle",

);

expect(select.getAttribute("aria-label")).toBe(t("chat.autoScrollMode"));

expect(select.value).toBe("near-bottom");

expect(toggle.getAttribute("aria-label")).toBe(

`${t("chat.autoScrollMode")}: ${t("chat.autoScrollNearBottom")}`,

);

expect(toggle.getAttribute("data-tooltip")).toBe(toggle.getAttribute("aria-label"));

expect(toggle.dataset.chatAutoScrollMode).toBe("near-bottom");

expect(toggle.getAttribute("aria-pressed")).toBe("true");

select.value = "off";

select.dispatchEvent(new Event("change"));

toggle.click();

expect(applySettings).toHaveBeenCalledWith({

...state.settings,

chatAutoScroll: "off",

chatAutoScroll: "always",

});

});

const selectDatasets = Array.from(container.querySelectorAll("select")).map(

(select) => select.dataset,

);

expect(selectDatasets).toHaveLength(5);

expect(selectDatasets).toHaveLength(4);

expect(selectDatasets[0]?.chatAgentFilter).toBe("true");

expect(selectDatasets[1]?.chatSessionSelect).toBe("true");

expect(selectDatasets[2]?.chatModelSelect).toBe("true");

expect(selectDatasets[3]?.chatThinkingSelect).toBe("true");

expect(selectDatasets[4]?.chatAutoScrollSelect).toBe("true");

const autoScrollToggle = requireButton(

container.querySelector<HTMLButtonElement>('[data-chat-auto-scroll-toggle="true"]'),

"auto-scroll toggle",

);

expect(autoScrollToggle.dataset.chatAutoScrollMode).toBe("near-bottom");

});

it("renders the mobile dropdown from state instead of mutating DOM classes", async () => {