Show seven cards on the four method decks and open each as a routing overlay of its parts, so groups write from empty fields with Generate draft, search the full deck, and see unselected scope chips with enough contrast.

tests/pages/communication-methods.test.jsx

@@ -37,10 +37,10 @@ describe("Create flow communication-methods page", () => {
     const dialog = screen.getByRole("dialog");
     expect(dialog).toBeInTheDocument();
     expect(within(dialog).getByText("Signal")).toBeInTheDocument();
-    expect(within(dialog).getByText("Add card")).toBeInTheDocument();
+    expect(within(dialog).getByText("Add to Rule")).toBeInTheDocument();
   });
 
-  test("re-opening a selected method shows Save and footer Remove; Remove stays in the kebab", async () => {
+  test("re-opening a selected method shows Save and footer Deselect; Remove stays in the kebab", async () => {
     const user = userEvent.setup();
     render(<CommunicationMethodsScreen />);
 
@@ -49,15 +49,15 @@ describe("Create flow communication-methods page", () => {
     });
     await user.click(signalCards[0]);
     const dialog = screen.getByRole("dialog");
-    await user.click(within(dialog).getByRole("button", { name: "Add card" }));
+    await user.click(within(dialog).getByRole("button", { name: "Add to Rule" }));
 
     await user.click(signalCards[0]);
     const dialogAgain = screen.getByRole("dialog");
     expect(
-      within(dialogAgain).getByRole("button", { name: "Remove" }),
+      within(dialogAgain).getByRole("button", { name: "Deselect" }),
     ).toBeInTheDocument();
     expect(
-      within(dialogAgain).queryByRole("button", { name: "Add card" }),
+      within(dialogAgain).queryByRole("button", { name: "Add to Rule" }),
     ).not.toBeInTheDocument();
     expect(
       within(dialogAgain).getByRole("button", { name: "Save" }),
@@ -67,7 +67,7 @@ describe("Create flow communication-methods page", () => {
     expect(screen.getByRole("menuitem", { name: "Remove" })).toBeInTheDocument();
   });
 
-  test("Remove from the footer deselects the method", async () => {
+  test("Deselect from the footer deselects the method", async () => {
     const user = userEvent.setup();
     render(<CommunicationMethodsScreen />);
 
@@ -77,7 +77,7 @@ describe("Create flow communication-methods page", () => {
     await user.click(signalCards[0]);
     await user.click(
       within(screen.getByRole("dialog")).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
 
@@ -85,7 +85,9 @@ describe("Create flow communication-methods page", () => {
 
     await user.click(signalCards[0]);
     await user.click(
-      within(screen.getByRole("dialog")).getByRole("button", { name: "Remove" }),
+      within(screen.getByRole("dialog")).getByRole("button", {
+        name: "Deselect",
+      }),
     );
 
     expect(signalCards[0]).not.toHaveTextContent("SELECTED");
@@ -101,7 +103,7 @@ describe("Create flow communication-methods page", () => {
     await user.click(signalCards[0]);
     await user.click(
       within(screen.getByRole("dialog")).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
 
@@ -143,11 +145,13 @@ describe("Create flow communication-methods page", () => {
     await user.click(signalCards[0]);
 
     const dialog = screen.getByRole("dialog");
-    const textbox = within(dialog).getAllByRole("textbox")[0];
-    expect(textbox).not.toBeDisabled();
-
     await user.click(within(dialog).getByRole("button", { name: "More options" }));
     expect(screen.getByRole("menuitem", { name: "Customize" })).toBeInTheDocument();
+    await user.click(
+      within(dialog).getByRole("button", { name: "Core principle and scope" }),
+    );
+    const textbox = within(dialog).getAllByRole("textbox")[0];
+    expect(textbox).not.toBeDisabled();
   });
 
   test("meta-only custom policy opens with editable section fields", async () => {
@@ -167,14 +171,35 @@ describe("Create flow communication-methods page", () => {
       screen.getAllByRole("button", { name: /My policy: Desc/ })[0],
     );
     const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).queryByText("No custom fields yet."),
+    ).not.toBeInTheDocument();
+    await user.click(
+      within(dialog).getByRole("button", { name: "Core principle and scope" }),
+    );
     const textboxes = within(dialog).getAllByRole("textbox");
     expect(textboxes.length).toBeGreaterThan(0);
     for (const field of textboxes) {
       expect(field).not.toBeDisabled();
     }
+  });
+
+  test("compact stack shows seven cards and See all search", async () => {
+    const user = userEvent.setup();
+    render(<CommunicationMethodsScreen />);
+
+    const compactCards = screen
+      .getAllByRole("button")
+      .filter((el) => (el.getAttribute("aria-label") || "").includes(": "));
+    expect(compactCards).toHaveLength(7);
+    expect(screen.queryByText("RECOMMENDED")).not.toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole("button", { name: "See all communication cards" }),
+    );
     expect(
-      within(dialog).queryByText("No custom fields yet."),
-    ).not.toBeInTheDocument();
+      screen.getByRole("searchbox", { name: "Search this deck" }),
+    ).toBeInTheDocument();
   });
 
   test("renders without error", () => {
@@ -419,7 +444,7 @@ describe("Create flow communication-methods page", () => {
     const dupId = dupIds[0];
     expect(latest.selectedCommunicationMethodIds).toEqual([CUSTOM_POLICY_ID]);
     expect(
-      within(dialog).getByRole("button", { name: "Add card" }),
+      within(dialog).getByRole("button", { name: "Add to Rule" }),
     ).toBeInTheDocument();
     expect(metaAfterDup[dupId].label.endsWith(" (copy)")).toBe(true);
     expect(within(dialog).getByRole("heading", { level: 1 })).toHaveTextContent(