@gusnips/react 0.9.25 → 0.9.27

package/dist/ui/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ui/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,eAAO,MAAM,IAAI,sEAAiB,CAAC;AACnC,eAAO,MAAM,WAAW,mBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,yJAAmB,CAAC;AAC3C,eAAO,MAAM,cAAc,sJAAuB,CAAC;AACnD,eAAO,MAAM,SAAS,wJAAkB,CAAC;AACzC,eAAO,MAAM,YAAY,2JAAqB,CAAC;AAC/C,eAAO,MAAM,SAAS,wJAAkB,CAAC;AACzC,eAAO,MAAM,YAAY,oJAAqB,CAAC;AAC/C,eAAO,MAAM,gBAAgB,4JAAyB,CAAC;AACvD,eAAO,MAAM,yBAAyB,yKAAkC,CAAC;AACzE,eAAO,MAAM,sBAAsB,sKAA+B,CAAC;AACnE,eAAO,MAAM,eAAe,8BAAwB,CAAC;AACrD,eAAO,MAAM,kBAAkB,8JAA2B,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG;IACrD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAChD;;;;;OAKG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC;CAC9C,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA6BlB;AAcD,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,+BAEpE;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,CAAC,SAAS,CAAC,KAAK,+BAI9E;AAED,oFAAoF;AACpF,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAa3C;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,gBAAgB,+BAS/F;AAED,sGAAsG;AACtG,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,GAAG,gBAAgB,+BAS/C;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,GAAG;IAC3D,gCAAgC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,+BAY5F"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ui/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,eAAO,MAAM,IAAI,uBAAiB,CAAC;AACnC,eAAO,MAAM,WAAW,mBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,yJAAmB,CAAC;AAC3C,eAAO,MAAM,cAAc,sJAAuB,CAAC;AACnD,eAAO,MAAM,SAAS,wJAAkB,CAAC;AACzC,eAAO,MAAM,YAAY,2JAAqB,CAAC;AAC/C,eAAO,MAAM,SAAS,wJAAkB,CAAC;AACzC,eAAO,MAAM,YAAY,oJAAqB,CAAC;AAC/C,eAAO,MAAM,gBAAgB,4JAAyB,CAAC;AACvD,eAAO,MAAM,yBAAyB,yKAAkC,CAAC;AACzE,eAAO,MAAM,sBAAsB,sKAA+B,CAAC;AACnE,eAAO,MAAM,eAAe,8BAAwB,CAAC;AACrD,eAAO,MAAM,kBAAkB,8JAA2B,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG;IACrD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAChD;;;;;OAKG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC;CAC9C,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA6BlB;AAcD,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,+BAEpE;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,CAAC,SAAS,CAAC,KAAK,+BAI9E;AAED,oFAAoF;AACpF,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAa3C;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,gBAAgB,+BAS/F;AAED,sGAAsG;AACtG,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,GAAG,gBAAgB,+BAS/C;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,GAAG;IAC3D,gCAAgC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,+BAY5F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gusnips/react",
-  "version": "0.9.25",
+  "version": "0.9.27",
   "description": "The headless runtime under a Vite + React SPA: typed fetch client with single-flight refresh, auth store, query defaults, route guards, error boundary, stale-tab recovery, i18n bootstrap.",
   "type": "module",
   "license": "MIT",
@@ -41,6 +41,10 @@
     "./theme": {
       "types": "./dist/theme.d.ts",
       "default": "./dist/theme.js"
+    },
+    "./commands": {
+      "types": "./dist/commands.d.ts",
+      "default": "./dist/commands.js"
     }
   },
   "types": "./dist/index.d.ts",

package/src/busy-ring.tsx

@@ -0,0 +1,14 @@
+/**
+ * The ring that runs round a busy control's edge. Put it inside the control while it is busy.
+ *
+ * It draws nothing by itself: the look lives in `@gusnips/tokens/busy-ring.css`, which you import
+ * once. The control needs `position: relative` and the radius it already has (the ring copies it),
+ * and its disabled style must not dim it, or the ring is drawn at half strength and nobody sees it.
+ *
+ * Why a component for one `span`: the class name and the markup are one contract. Changing how
+ * busy looks, a second element or another shape, is then one edit here and one release, not one
+ * edit in every product's button.
+ */
+export function BusyRing() {
+  return <span aria-hidden="true" className="busy-ring" />;
+}

package/src/commands-hook.test.ts

@@ -0,0 +1,444 @@
+// @vitest-environment happy-dom
+import { act, createElement, useLayoutEffect, type ChangeEvent } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useSlashCommands, type SlashCommand } from "./commands.ts";
+
+interface Action extends SlashCommand {
+  action: string;
+}
+
+const commands: readonly Action[] = [
+  {
+    name: "help",
+    description: "See commands",
+    aliases: ["commands"],
+    tags: ["keyboard"],
+    action: "help",
+  },
+  {
+    name: "new",
+    description: "Start a chat",
+    aliases: ["fresh"],
+    tags: ["conversation"],
+    action: "new",
+  },
+  {
+    name: "stop",
+    description: "Stop the reply",
+    aliases: ["cancel"],
+    tags: ["reply"],
+    action: "stop",
+  },
+  {
+    name: "model",
+    description: "Choose a model",
+    aliases: ["llm"],
+    tags: ["engine"],
+    takesArg: true,
+    action: "model",
+  },
+];
+
+const roots = new Set<Root>();
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+afterEach(() => {
+  for (const root of roots) act(() => root.unmount());
+  roots.clear();
+  document.body.replaceChildren();
+});
+
+function composer(initialText = "/", initialCommands = commands) {
+  const element = document.createElement("div");
+  document.body.append(element);
+  const root = createRoot(element);
+  roots.add(root);
+  let text = initialText;
+  let registry = initialCommands;
+  let current: ReturnType<typeof useSlashCommands<Action>> | undefined;
+  const execute = vi.fn();
+  const error = vi.fn();
+  const send = vi.fn();
+  const changed = vi.fn((next: string) => {
+    text = next;
+    render();
+  });
+
+  function Harness() {
+    const slash = useSlashCommands({
+      text,
+      commands: registry,
+      onChange: changed,
+      onExecute: execute,
+      onError: error,
+    });
+    useLayoutEffect(() => {
+      current = slash;
+    }, [slash]);
+    return createElement(
+      "div",
+      null,
+      createElement("textarea", {
+        value: text,
+        onChange: (event: ChangeEvent<HTMLTextAreaElement>) => changed(event.currentTarget.value),
+        "aria-label": "Message",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": slash.open,
+        "aria-controls": slash.open ? slash.listId : undefined,
+        "aria-activedescendant": slash.activeId,
+        onKeyDown: (event) => {
+          if (slash.handleKeyDown(event)) return;
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            send(text);
+          }
+        },
+      }),
+      createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (!slash.submit()) send(text);
+          },
+        },
+        "Send",
+      ),
+      slash.open
+        ? createElement(
+            "div",
+            { id: slash.listId, role: "listbox", "aria-label": "Commands" },
+            ...slash.items.map((command, index) =>
+              createElement(
+                "button",
+                {
+                  key: command.name,
+                  type: "button",
+                  tabIndex: -1,
+                  id: slash.itemId(command),
+                  role: "option",
+                  "aria-selected": slash.index === index,
+                  onMouseEnter: () => slash.highlight(index),
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: (event) => slash.pick(command, event.altKey),
+                },
+                `/${command.name}`,
+              ),
+            ),
+          )
+        : null,
+    );
+  }
+
+  function render() {
+    root.render(createElement(Harness));
+  }
+  act(render);
+  const input = element.querySelector("textarea");
+  const sendButton = element.querySelector("button");
+  if (!input || !sendButton) throw new Error("Composer did not render");
+  input.focus();
+
+  return {
+    execute,
+    error,
+    send,
+    changed,
+    input,
+    get text() {
+      return text;
+    },
+    get menu() {
+      if (!current) throw new Error("Hook did not render");
+      return current;
+    },
+    change(next: string) {
+      act(() => {
+        text = next;
+        render();
+      });
+    },
+    register(next: readonly Action[]) {
+      act(() => {
+        registry = next;
+        render();
+      });
+    },
+    press(key: string, options: KeyboardEventInit = {}) {
+      const event = new KeyboardEvent("keydown", {
+        key,
+        bubbles: true,
+        cancelable: true,
+        ...options,
+      });
+      act(() => input.dispatchEvent(event));
+      return event;
+    },
+    clickSend() {
+      act(() => sendButton.click());
+    },
+    clickOption(name: string, options: MouseEventInit = {}) {
+      const option = Array.from(element.querySelectorAll("button[role=option]")).find(
+        (button) => button.textContent === `/${name}`,
+      );
+      if (!option) throw new Error(`Command not rendered: ${name}`);
+      const down = new MouseEvent("mousedown", { bubbles: true, cancelable: true });
+      act(() => {
+        option.dispatchEvent(down);
+        option.dispatchEvent(new MouseEvent("click", { bubbles: true, ...options }));
+      });
+      return down;
+    },
+  };
+}
+
+describe("useSlashCommands", () => {
+  it("wraps arrow selection and links the active row to the input", () => {
+    const chat = composer();
+    expect(chat.menu.index).toBe(0);
+    expect(chat.input.getAttribute("aria-activedescendant")).toBe(chat.menu.itemId(commands[0]!));
+    expect(chat.press("ArrowUp").defaultPrevented).toBe(true);
+    expect(chat.menu.index).toBe(3);
+    chat.press("ArrowDown");
+    expect(chat.menu.index).toBe(0);
+    expect(chat.input.getAttribute("aria-controls")).toBe(chat.menu.listId);
+  });
+
+  it("executes a selected local action once without sending or clearing the draft", () => {
+    const chat = composer();
+    chat.press("ArrowDown");
+    chat.press("Enter");
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[1], undefined, false);
+    expect(chat.send).not.toHaveBeenCalled();
+    expect(chat.changed).not.toHaveBeenCalled();
+    expect(chat.text).toBe("/");
+  });
+
+  it("Tab completes a name without running its action", () => {
+    const chat = composer("/he");
+    expect(chat.press("Tab").defaultPrevented).toBe(true);
+    expect(chat.text).toBe("/help");
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("retains arguments when keyboard selection completes a partial name", () => {
+    const chat = composer("/mo large  model");
+    chat.press("Enter");
+    expect(chat.text).toBe("/model large  model");
+    expect(chat.execute).not.toHaveBeenCalled();
+    chat.press("Enter", { altKey: true });
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[3], "large  model", true);
+  });
+
+  it("completes an argument-taking alias before keyboard or button submission", () => {
+    const keyboard = composer("/llm");
+    keyboard.press("Enter");
+    expect(keyboard.text).toBe("/model ");
+    expect(keyboard.execute).not.toHaveBeenCalled();
+    const button = composer("/llm");
+    button.clickSend();
+    expect(button.text).toBe("/model ");
+    expect(button.execute).not.toHaveBeenCalled();
+  });
+
+  it("button submission uses an exact alias without entering the message path", () => {
+    const chat = composer("/cancel");
+    chat.clickSend();
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, false);
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("Escape stays closed until the query changes", () => {
+    const chat = composer("/he");
+    expect(chat.press("Escape").defaultPrevented).toBe(true);
+    expect(chat.menu.open).toBe(false);
+    chat.register([commands[1]!]);
+    expect(chat.menu.open).toBe(false);
+    expect(chat.menu.activeId).toBeUndefined();
+    chat.register(commands);
+    chat.change("/hel");
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.index).toBe(0);
+    chat.change("/he");
+    expect(chat.menu.open).toBe(true);
+  });
+
+  it("reopens the full list even when Escape dismissed the same bare slash", () => {
+    const chat = composer();
+    chat.press("ArrowDown");
+    chat.press("Escape");
+    expect(chat.menu.open).toBe(false);
+    act(() => chat.menu.showAll());
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.index).toBe(0);
+    expect(chat.menu.items).toEqual(commands);
+    expect(chat.text).toBe("/");
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("returns an unknown draft to the full list for retry", () => {
+    const chat = composer("/missing arg");
+    chat.clickSend();
+    act(() => chat.menu.showAll());
+    expect(chat.text).toBe("/");
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.items).toEqual(commands);
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("protects IME when given a native keyboard event directly", () => {
+    const chat = composer("/help");
+    const event = new KeyboardEvent("keydown", {
+      key: "Enter",
+      isComposing: true,
+      cancelable: true,
+    });
+    act(() => expect(chat.menu.handleKeyDown(event)).toBe(true));
+    expect(event.defaultPrevented).toBe(false);
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("leaves Shift+Enter and modified arrow/Tab keys to the text field", () => {
+    const chat = composer();
+    for (const [key, options] of [
+      ["Enter", { shiftKey: true }],
+      ["ArrowDown", { shiftKey: true }],
+      ["ArrowUp", { metaKey: true }],
+      ["Tab", { shiftKey: true }],
+    ] satisfies Array<[string, KeyboardEventInit]>) {
+      expect(chat.press(key, options).defaultPrevented).toBe(false);
+    }
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("lets IME accept text without executing a command or sending a message", () => {
+    const chat = composer("/help");
+    expect(chat.press("Enter", { isComposing: true }).defaultPrevented).toBe(false);
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+    chat.change("plain text");
+    chat.press("Enter", { isComposing: true });
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("also protects the final IME key reported only as keyCode 229", () => {
+    const chat = composer("/help");
+    const event = new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true });
+    Object.defineProperty(event, "keyCode", { value: 229 });
+    act(() => chat.input.dispatchEvent(event));
+    expect(event.defaultPrevented).toBe(false);
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("exposes empty results and reports unknown commands without sending them", () => {
+    const chat = composer("/missing");
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.items).toEqual([]);
+    expect(chat.menu.activeId).toBeUndefined();
+    chat.press("Enter");
+    expect(chat.error).toHaveBeenCalledExactlyOnceWith({ kind: "unknown", name: "missing" });
+    expect(chat.send).not.toHaveBeenCalled();
+    expect(chat.text).toBe("/missing");
+  });
+
+  it("tags find a row but cannot execute through direct submission", () => {
+    const chat = composer("/conversation");
+    expect(chat.menu.items.map((command) => command.name)).toEqual(["new"]);
+    chat.clickSend();
+    expect(chat.error).toHaveBeenCalledWith({ kind: "unknown", name: "conversation" });
+    expect(chat.execute).not.toHaveBeenCalled();
+    chat.press("Tab");
+    expect(chat.text).toBe("/new");
+    chat.clickSend();
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[1], undefined, false);
+  });
+
+  it("does not auto-dispatch an ambiguous alias on Enter or button submission", () => {
+    const registry = commands.slice(0, 2).map((command) => ({ ...command, aliases: ["shared"] }));
+    const chat = composer("/shared", registry);
+    chat.press("Enter");
+    chat.clickSend();
+    expect(chat.error).toHaveBeenCalledTimes(2);
+    expect(chat.error).toHaveBeenLastCalledWith({
+      kind: "ambiguous",
+      name: "shared",
+      commands: registry,
+    });
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("lets an explicit arrow selection choose between ambiguous aliases", () => {
+    const registry = commands.slice(0, 2).map((command) => ({ ...command, aliases: ["shared"] }));
+    const chat = composer("/shared", registry);
+    chat.press("ArrowDown");
+    chat.press("Enter");
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(registry[1], undefined, false);
+    expect(chat.error).not.toHaveBeenCalled();
+  });
+
+  it("keeps focus on the text field when a row is clicked", () => {
+    const chat = composer();
+    expect(chat.clickOption("stop", { altKey: true }).defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(chat.input);
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, true);
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("refreshes matching and resets selection when capabilities change under a fixed draft", () => {
+    const chat = composer();
+    chat.press("ArrowDown");
+    expect(chat.menu.active?.name).toBe("new");
+    chat.register([commands[2]!]);
+    expect(chat.text).toBe("/");
+    expect(chat.menu.index).toBe(0);
+    expect(chat.menu.active?.name).toBe("stop");
+    chat.press("Enter");
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, false);
+  });
+
+  it("uses current translated search words even when the draft has not changed", () => {
+    const chat = composer("/comecar");
+    expect(chat.menu.items).toEqual([]);
+    const translated = commands.map((command) =>
+      command.name === "new"
+        ? { ...command, description: "Comece uma conversa", tags: ["começar", "conversa"] }
+        : command,
+    );
+    chat.register(translated);
+    expect(chat.menu.items.map((command) => command.name)).toEqual(["new"]);
+    expect(chat.text).toBe("/comecar");
+  });
+
+  it("re-resolves a retained row against current capabilities", () => {
+    const chat = composer();
+    const oldRow = chat.menu.items[2]!;
+    chat.register(commands.slice(0, 2));
+    act(() => chat.menu.pick(oldRow));
+    expect(chat.error).toHaveBeenCalledWith({ kind: "unknown", name: "stop" });
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("direct submission does not depend on menu state and forwards Alt", () => {
+    const chat = composer("/cancel");
+    chat.press("Escape");
+    act(() => expect(chat.menu.submit(true)).toBe(true));
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, true);
+  });
+
+  it("leaves ordinary and multiline messages to the existing sender", () => {
+    const chat = composer("hi");
+    expect(chat.menu.open).toBe(false);
+    chat.clickSend();
+    expect(chat.send).toHaveBeenLastCalledWith("hi");
+    chat.change("/help\nquoted text");
+    chat.clickSend();
+    expect(chat.send).toHaveBeenLastCalledWith("/help\nquoted text");
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+});