Compose: typed text became a recipient without being an address

Blurring the To/Cc/Bcc field (or Enter, or a comma) committed whatever was
typed — a name like "John" became a recipient that could never be
delivered. Only valid addresses ("a@x.com" or "Name <a@x.com>") now become
chips; anything else stays in the input, marked red, to fix or complete
from the suggestions. A pasted list keeps just its invalid parts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/test/recipientChips.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  isValidRecipient,
+  RecipientChips,
+} from "../components/compose/RecipientChips";
+import { I18nProvider } from "../i18n";
+
+vi.mock("../lib/api", () => ({
+  api: { suggestRecipients: vi.fn().mockResolvedValue([]) },
+}));
+
+// A controlled field, reporting every value it is given.
+function Field({ seen }: { seen: string[] }) {
+  const [value, setValue] = useState("");
+  return (
+    <I18nProvider>
+      <RecipientChips
+        label="To"
+        value={value}
+        onChange={(v) => {
+          seen.push(v);
+          setValue(v);
+        }}
+      />
+    </I18nProvider>
+  );
+}
+
+function type(text: string) {
+  const input = screen.getByRole("textbox");
+  fireEvent.change(input, { target: { value: text } });
+  return input as HTMLInputElement;
+}
+
+describe("RecipientChips", () => {
+  it("leaves typed text that is not an address in the input on blur", () => {
+    const seen: string[] = [];
+    render(<Field seen={seen} />);
+    const input = type("John");
+    fireEvent.blur(input);
+    expect(seen).toEqual([]);
+    expect(input.value).toBe("John");
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+  });
+
+  it("does not turn a non-address into a recipient on Enter either", () => {
+    const seen: string[] = [];
+    render(<Field seen={seen} />);
+    const input = type("john@");
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(seen).toEqual([]);
+    expect(input.value).toBe("john@");
+  });
+
+  it("commits a valid address on blur", () => {
+    const seen: string[] = [];
+    render(<Field seen={seen} />);
+    const input = type("john@example.com");
+    fireEvent.blur(input);
+    expect(seen).toEqual(["john@example.com"]);
+    expect(input.value).toBe("");
+  });
+
+  it("keeps only the invalid part of a pasted list", () => {
+    const seen: string[] = [];
+    render(<Field seen={seen} />);
+    const input = type("a@x.com, John, Bob <bob@y.org>");
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(seen).toEqual(["a@x.com, Bob <bob@y.org>"]);
+    expect(input.value).toBe("John");
+  });
+});
+
+describe("isValidRecipient", () => {
+  it.each([
+    ["john@example.com", true],
+    ["John Smith <john@example.com>", true],
+    ["John", false],
+    ["john@", false],
+    ["john@localhost", false],
+    ["John <not an address>", false],
+  ])("%s -> %s", (token, ok) => expect(isValidRecipient(token)).toBe(ok));
+});