cm_whatsapp_bot_v1/docs/superpowers/specs/manual-test-web.md

# Manual test: Web app end-to-end

Run after every major web change. Captures the daily-ops flows that
unit tests can't verify (live Baileys QR, WhatsApp delivery, swipe
gestures on a real touch device).

## Prerequisites

- `scripts/dev.sh up` is running. The bot, web, postgres, and tools
  containers are all healthy.
- Browser open on the host, ideally on a phone for the swipe tests.
  LAN URL is `http://<host-ip>:9000` (e.g. `192.168.0.253:9000`); the
  reverse-proxy URL is `https://wabot.04080616.xyz`.
- A WhatsApp test phone with at least one group you can fire test
  messages into.

## 1. Smoke

1. Visit `/` — dashboard renders with three stat cards (Accounts
   connected, Active reminders, Recent runs). No console errors
   beyond the known browser-extension hydration warning ("Encountered
   a script tag while rendering"). The "Recent runs" card description
   reads "3 most recent runs" and links to `/activity`.
2. Mobile header on the phone shows the `cm` brand pill (left), the
   current page title in the centre, and a hamburger menu (right).
   Tap the menu → a right-side drawer opens with the five nav items.
   Tapping any item closes the drawer and routes to the page.
3. Click `cm` brand pill → navigates to dashboard. Same on the
   desktop sidebar header (`cm WhatsApp Bot`).
4. Status tab strips on `/reminders` (4 tabs) span the row evenly;
   on `/activity` (6 tabs incl. Archived) the strip scrolls
   horizontally on narrow widths.

## 2. Account pairing (live QR)

1. `/accounts` → "New Account" → form → enter "Web Test 1" → "Add
   Account". Redirects to `/accounts/<id>` with status `Unpaired`.
2. Tap the "Pair WhatsApp" card. Redirects to
   `/accounts/<id>/pairing`. Within ~5 s a QR appears below
   "Waiting for scan…".
3. Scan with WhatsApp on the test phone (Linked Devices →
   Link a Device).
4. After scan, status flips to "✅ Connected as +60xxx" and the page
   auto-redirects to the account detail. Phone number visible.
5. Hit "Sync Groups" — group rows appear.
6. Tap a group → opens the group detail. Type "Test from web" →
   Send Test. Toast shows "Sending…", then "Sent ✓". The phone's
   WhatsApp shows the message in the group within ~5 s.

## 3. Re-pair / unpair

1. From the account detail, tap "Re-pair WhatsApp" → re-routes to
   `/pairing` with a fresh QR. Cancel by going back.
2. Tap "Unpair" → confirm dialog. Confirm. Status flips to
   `Unpaired` immediately (no flicker through `Disconnected`). Bot
   logs show no spurious 5-second reconnect.
3. Re-pair the same account by scanning again — old session files
   cleared, fresh handshake.

## 4. Reminders — single message, one-off

1. `/reminders` → "New Reminder".
2. Step 1 (Account): pick the test account.
3. Step 2 (Message): type "Hello world" in a single text block.
   Continue.
4. Step 3 (When): pick "now + 2 minutes" (a date+time, no repeat).
5. Step 4 (Groups): pick the test group.
6. Step 5 (Review): all sections show correct values. Tap "Schedule
   Reminder".
7. Within ~2.5 minutes the reminder fires. WhatsApp shows "Hello
   world" in the group.
8. Reload `/reminders/<id>` — status `ended`, run history has one
   row with `Success`.

## 5. Reminders — multi-message stack with media swap

1. `/reminders/new` → step 2.
2. Add a text block "Block 1". "+ Add file" → upload a JPEG image.
   Caption "img caption". "+ Add text" "Block 3 PS".
3. Continue through When / Groups / Review. Review pane shows three
   message parts in order with the JPEG filename rendered.
4. Schedule. Bot fires three messages in sequence with a ~1.5 s
   gap. WhatsApp shows them in order.

## 6. Reminders — recurrence picker (cron-backed)

1. `/reminders/new` → step 3 (When). Switch the recurrence picker
   from "No Repeats" to "Daily" → set time 09:00 → continue.
   Description on the review pane reads "Every day at 09:00", NOT
   raw cron text.
2. Edit recurrence to Weekly Mon, Wed, Fri 17:30. Review reads
   "Every week on Mon, Wed, Fri at 17:30".
3. Edit recurrence to Monthly with multiple days (1, 15) at 09:00.
   Review reads "Every month on days 1, 15 at 09:00".
4. Edit recurrence to Yearly with months Jan, Apr at day 1 at 09:00.
   Review reads "Every year in Jan, Apr on day 1 at 09:00".
5. Add a SECOND recurrence row alongside the first. Review summary
   joins both with " · ".
6. Schedule (set first fire close to now). Verify both rules fire.

## 7. Reminders — edit each section preserves the message stack

1. Create a reminder with a 3-message stack. Schedule for the
   future.
2. From `/reminders/<id>`, click the Account section → switch to
   another connected account → Save. The reminder's message list
   on the detail page still shows all 3 parts. (Regression guard
   for the previous bug where editing the account dropped parts
   2..N.)
3. Same exercise on the Message section: open, swap the JPEG for
   a different image (file picker on the media block), Save.
   Reminder still has 3 parts; the second part now points at the
   new media.
4. Same on When (change time) and Groups (toggle a group).

## 8. Reminders list — swipe + lifecycle

1. `/reminders` (mobile). Swipe a row LEFT → red "Delete" shelf
   appears on the right.
2. Swipe the same row RIGHT → amber "Pause" or "Restart" shelf on
   the left (depending on current status).
3. Tap "Pause" on an active row. The row stays in the same list
   position (no reshuffle) and its status pill flips to "Paused".
   The shelf collapses immediately (no leftover open state).
4. Swipe right again → "Restart". Tap. Status flips back to active,
   row position unchanged, shelf closed.
5. Swipe left → "Delete". Confirm. Row removed, run history
   preserved on `/activity`.

## 9. Activity — swipe to archive / delete

1. `/activity`. Swipe a row LEFT → red "Delete" shelf.
2. Swipe RIGHT on a non-archived row → amber "Archive" shelf. Tap.
   Row disappears from the All / Success / Partial / Failed /
   Skipped tabs.
3. Switch to the "Archived" tab → archived row is here. Swipe
   RIGHT → "Restore". Tap. Row leaves Archived, returns to All.
4. "Clear history" button at the top hard-deletes everything and
   is hidden when on the Archived tab.

## 10. Send-test feedback round trip

1. Group detail → type a quick message → Send Test.
2. Toast "Sending…" appears. Within ~5 s it changes to "Sent ✓".
3. Phone's WhatsApp shows the message in the group.

## 11. Media upload limits

1. `/reminders/new` step 2, upload a 4 MB JPEG → accepted, file
   shows in the media block.
2. Upload a 6 MB JPEG → "Image too large (6.0 MB > 5.0 MB limit on
   WhatsApp)".
3. Upload a HEIC photo (e.g. straight off an iPhone) → accepted,
   delivered as a document on WhatsApp instead of inline image.
   Recipient sees a downloadable .heic file.
4. Upload a `.mov` (QuickTime) → accepted, delivered as a document.
5. Upload a 110 MB document (PDF) → rejected: "Document too large
   (110.0 MB > 100.0 MB limit on WhatsApp)".

## 12. PWA install

1. Phone Chrome → menu → "Install App" / "Add to Home Screen".
2. Open from the home screen. The header chrome (URL bar, tabs)
   is gone — fullscreen standalone display.
3. Brand icon shows the placeholder dark `cm` square.
4. Force the phone offline (airplane mode) → relaunch the PWA.
   Cached navigation shell loads (white-on-dark spinner / shell);
   network-dependent pages show the offline shell instead of a
   browser error page.

## 13. Theme toggle

1. Desktop sidebar footer → click the theme button → page swaps
   between light / dark / system.
2. Mobile drawer no longer contains the theme toggle (intentional
   — it lives only in the desktop sidebar now).

## Sign-off

- [ ] All sections passed
- [ ] No console errors beyond the known browser-extension
      "Encountered a script tag" hydration noise (Incognito with
      extensions disabled is clean)
- [ ] Bot logs show no unexpected ERROR / WARN entries during the run
- [ ] Tester / date / build SHA recorded