member flow hardening (#60)

* Harden member flows

* Clarify local e2e env setup

* Clarify Playwright env docs

* Address review feedback

* Harden inline mutation guard

* slim chat payloads and type yak theme bridge

* fix review follow-ups and chat view migration

* fix latest copilot follow-ups

Author: dnywh

README.md

@@ -262,6 +262,39 @@ Peels keeps testing intentionally small:
 
 The smoke suite covers seeded sign-in, public listing, profile, and chat flows against local Supabase data. It is designed to stay small and high-signal rather than grow into a broad frontend testing matrix.
 
+Before `npm run test:e2e` or `npm run test:e2e:prod`, make sure you are using the local seeded app stack, not hosted Supabase:
+
+- Run `npm run supabase:start`
+- Run `npm run supabase:reset`
+- Run `npm run seed:local-media`
+- Run `npm run supabase:env`
+- Make sure `.env.local` uses `NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54331`
+- Copy the local `ANON_KEY` into `NEXT_PUBLIC_SUPABASE_ANON_KEY`
+
+If your `.env.local` was previously set up for the hosted Peels project, update it before running Playwright. A working local test setup looks like:
+
+```bash
+NEXT_PUBLIC_SITE_URL=http://127.0.0.1:3000
+NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54331
+NEXT_PUBLIC_SUPABASE_ANON_KEY=<paste the ANON_KEY from npm run supabase:env>
+```
+
+Then run either:
+
+```bash
+npm run test:e2e
+```
+
+or:
+
+```bash
+npm run test:e2e:prod
+```
+
+Use the local anon key that matches the running local Supabase stack. Do not mix the hosted project URL with the local anon key, or the local URL with a hosted anon key.
+
+The production-like Playwright config starts its own `next start` server so it does not accidentally reuse a stray `next dev` process on port `3000`.
+
 In CI, pull requests run `npm run check` and `npm run build`. Pushes to `main` also run the production-like Playwright smoke suite.
 
 For the first local Playwright run, install the browser once with:

docs/supabase-local-first.md

@@ -98,6 +98,29 @@ Finally:
 npm run dev
 ```
 
+### Local `.env.local` for Playwright
+
+Both Playwright suites expect the local seeded Supabase stack, not the hosted Peels project.
+
+Use this shape in `.env.local` before `npm run test:e2e:prod`:
+
+```bash
+NEXT_PUBLIC_SITE_URL=http://127.0.0.1:3000
+NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54331
+NEXT_PUBLIC_SUPABASE_ANON_KEY=<paste the ANON_KEY value from npm run supabase:env>
+```
+
+Recommended sequence:
+
+1. Run `npm run supabase:start`
+2. Run `npm run supabase:reset`
+3. Run `npm run seed:local-media`
+4. Run `npm run supabase:env`
+5. Paste the printed `ANON_KEY` into `.env.local`
+6. Run `npm run test:e2e` or `npm run test:e2e:prod`
+
+If `.env.local` still points at `https://mfnaqdyunuafbwukbbyr.supabase.co`, the smoke suite will not see the seeded local listings, demo accounts, or demo chat thread.
+
 ### Local URLs
 
 - App: `http://127.0.0.1:3000`

e2e/chat.spec.ts

@@ -1,5 +1,11 @@
 import { expect, test } from "@playwright/test";
-import { DONOR_EMAIL, SEEDED_THREAD_ID, signIn } from "./helpers";
+import {
+  DONOR_EMAIL,
+  SEEDED_THREAD_ID,
+  delayChatSendRequests,
+  failChatSendRequests,
+  signIn,
+} from "./helpers";
 
 test("chat loads the seeded thread and composer for a signed-in donor", async ({
   page,
@@ -21,6 +27,51 @@ test("chat loads the seeded thread and composer for a signed-in donor", async ({
   await expect(page.getByTestId("chat-composer-input")).toBeVisible();
 });
 
+test("chat send disables the composer while pending and appends the new message", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: DONOR_EMAIL,
+    redirectTo: `/chats/${SEEDED_THREAD_ID}`,
+  });
+  await delayChatSendRequests(page);
+
+  const composerInput = page.getByTestId("chat-composer-input");
+  const sendButton = page.getByTestId("chat-composer-send");
+  const message = `Playwright chat message ${Date.now()}`;
+
+  await composerInput.fill(message);
+
+  const messageVisible = page
+    .getByTestId("chat-message-list")
+    .getByText(message);
+  await sendButton.click();
+  await expect(sendButton).toBeDisabled();
+  await expect(sendButton).toHaveAttribute("aria-busy", "true");
+  await expect(composerInput).toBeDisabled();
+  await expect(messageVisible).toBeVisible();
+  await expect(composerInput).toHaveValue("");
+});
+
+test("chat send failures preserve the draft and show inline feedback", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: DONOR_EMAIL,
+    redirectTo: `/chats/${SEEDED_THREAD_ID}`,
+  });
+  await failChatSendRequests(page);
+
+  const composerInput = page.getByTestId("chat-composer-input");
+  const failedMessage = `Chat failure draft ${Date.now()}`;
+
+  await composerInput.fill(failedMessage);
+  await page.getByTestId("chat-composer-send").click();
+
+  await expect(composerInput).toHaveValue(failedMessage);
+  await expect(page.getByText("Synthetic chat failure")).toBeVisible();
+});
+
 test("invalid chat thread ids redirect back to the chat index", async ({
   page,
 }) => {

e2e/helpers.ts

@@ -37,12 +37,51 @@ export async function signIn(
   ]);
 }
 
+export async function delayServerActionRequests(page: Page, delayMs = 500) {
+  await page.route("**/*", async (route) => {
+    const request = route.request();
+    const isServerActionRequest =
+      request.method() === "POST" &&
+      request.headers()["next-action"] !== undefined;
+
+    if (!isServerActionRequest) {
+      await route.fallback();
+      return;
+    }
+
+    await page.waitForTimeout(delayMs);
+    await route.continue();
+  });
+}
+
 export async function delayProfileActionRequests(page: Page, delayMs = 500) {
-  await page.route(/\/profile(?:\/|\?|$)/, async (route) => {
+  await delayServerActionRequests(page, delayMs);
+}
+
+export async function delayChatSendRequests(page: Page, delayMs = 500) {
+  await page.route(/\/rest\/v1\/chat_messages(?:\?|$)/, async (route) => {
     if (route.request().method() === "POST") {
       await page.waitForTimeout(delayMs);
     }
 
     await route.continue();
   });
 }
+
+export async function failChatSendRequests(
+  page: Page,
+  message = "Synthetic chat failure"
+) {
+  await page.route(/\/rest\/v1\/chat_messages(?:\?|$)/, async (route) => {
+    if (route.request().method() === "POST") {
+      await route.fulfill({
+        status: 500,
+        contentType: "application/json",
+        body: JSON.stringify({ message }),
+      });
+      return;
+    }
+
+    await route.continue();
+  });
+}

e2e/listings.spec.ts

@@ -1,5 +1,10 @@
 import { expect, test } from "@playwright/test";
-import { HOST_EMAIL, PROFILE_RENDER_TIMEOUT_MS, signIn } from "./helpers";
+import {
+  HOST_EMAIL,
+  PROFILE_RENDER_TIMEOUT_MS,
+  delayServerActionRequests,
+  signIn,
+} from "./helpers";
 
 const BUSINESS_LISTING_EDIT_PATH = "/profile/listings/demo-inner-west-cafe";
 const ALTERNATE_BUSINESS_DESCRIPTION =
@@ -83,11 +88,16 @@ test("listing edit saves and restores seeded business fields", async ({
 
   await descriptionInput.fill(updatedDescription);
   await visibilityInput.selectOption(updatedVisibility);
+  await delayServerActionRequests(page);
 
-  await Promise.all([
-    page.waitForURL(/\/listings\/demo-inner-west-cafe\?status=updated$/),
-    page.getByTestId("listing-write-submit").click(),
-  ]);
+  const submitButton = page.getByTestId("listing-write-submit");
+  const updateNavigation = page.waitForURL(
+    /\/listings\/demo-inner-west-cafe\?status=updated$/
+  );
+  await submitButton.click();
+  await expect(submitButton).toBeDisabled();
+  await expect(submitButton).toHaveAttribute("aria-busy", "true");
+  await updateNavigation;
 
   await page.goto(BUSINESS_LISTING_EDIT_PATH);
   await expect(page.locator("#description")).toHaveValue(updatedDescription);

messages/de.json

@@ -34,6 +34,7 @@
     "signInToContact": "Zum Kontaktieren anmelden",
     "signOut": "Abmelden",
     "signUp": "Registrieren",
+    "tryAgain": "Erneut versuchen",
     "update": "Aktualisieren",
     "viewFullListing": "Vollständigen Eintrag ansehen",
     "viewListing": "Eintrag ansehen"

messages/en.json

@@ -34,6 +34,7 @@
     "signInToContact": "Sign in to contact",
     "signOut": "Sign out",
     "signUp": "Sign up",
+    "tryAgain": "Try again",
     "update": "Update",
     "viewFullListing": "View full listing",
     "viewListing": "View listing"

messages/es.json

@@ -34,6 +34,7 @@
     "signInToContact": "Inicia sesión para contactar",
     "signOut": "Cerrar sesión",
     "signUp": "Registrarse",
+    "tryAgain": "Intentarlo de nuevo",
     "update": "Actualizar",
     "viewFullListing": "Ver anuncio completo",
     "viewListing": "Ver anuncio"

messages/fr.json

@@ -34,6 +34,7 @@
     "signInToContact": "Se connecter pour contacter",
     "signOut": "Se déconnecter",
     "signUp": "S’inscrire",
+    "tryAgain": "Réessayer",
     "update": "Mettre à jour",
     "viewFullListing": "Voir l’annonce complète",
     "viewListing": "Voir l’annonce"

messages/pt-BR.json

@@ -34,6 +34,7 @@
     "signInToContact": "Entrar para falar",
     "signOut": "Sair",
     "signUp": "Criar conta",
+    "tryAgain": "Tentar novamente",
     "update": "Atualizar",
     "viewFullListing": "Ver anúncio completo",
     "viewListing": "Ver anúncio"