10 - Interaction Specification (Webhooks Module)
- 1. Async action semantics (the core interaction)
- 2. Screen transitions
- 3. In-screen interactions
- 4. Waiting states (async delivery)
- 5. Error interactions
- 6. a11y & motion-safety
Interaction/motion contract for webhook screens. Global motion tokens in 00-shared/08 (
m-fast150 ms,m-base250 ms,m-slow400 ms); this file defines module-specific interactions and the async delivery UX.
1. Async action semantics (the core interaction)
Every destructive/async action (test, retry, pause, resume, delete) follows one pattern because the server is always async: the HTTP call enqueues, never delivers.
| Action | HTTP | Server work (async) | UX response |
|---|---|---|---|
| Test | POST /webhooks/:id/test (webhooks.controller.ts:65-70) | worker POSTs WebhookTested (webhooks.service.ts:130-138) | snackbar "Test delivery queued" → offer "Watch logs" |
| Retry | POST /webhooks/:id/retry (:58-63) | re-queue failed payload (webhooks.service.ts:110-118) | snackbar "Retry queued" → open/refresh logs |
| Pause | POST /webhooks/:id/pause (:78-83) | setEnabled(false) (webhooks.service.ts:158-161) | badge flips instantly, snackbar |
| Resume | POST /webhooks/:id/resume (:85-90) | setEnabled(true) | badge flips instantly, snackbar |
| Delete | DELETE /webhooks/:id (:45-50) | soft delete (webhooks.service.ts:50-53) | confirm dialog → optimistic row removal |
Rules:
- Never claim completion for test/retry (server says "queued",
:62, 69). - After test/retry, navigate to S5 or show a "Watch delivery" action.
- Pause/resume are optimistic with rollback on 404/500.
2. Screen transitions
| From | To | Trigger | Motion (00-shared/08) |
|---|---|---|---|
| S1 list | S2 create | FAB | push slide m-base |
| S1 list | S3 detail | tile tap | push slide m-base |
| S3 detail | S4 edit | menu/action | push slide m-base |
| S3 detail | S5 logs | preview tap / "View all" | push slide m-base |
| S5 logs | S6 log detail | tile tap | bottom sheet, m-base rise |
| S3/S5/S6 | dialogs (S7/S8) | action button | fade + scale m-fast |
| Any | snackbar | async reply | m-fast entrance, auto-dismiss 4 s |
3. In-screen interactions
- Event picker (S2/S4): chip tap toggles with
m-fastscale feedback; group expand/collapsem-fast; "Select all" bulk toggle. - Secret field: reveal/obscure icon swap
m-fast; generate → text replace withm-fastfade; copy → snackbar "Copied" (m-fast). - Logs (S5): pull-to-refresh; new rows fade-in
m-base; failed rows shake briefly on retry successm-fast(subtle, 00-shared/08). - Metrics (S3): counts tick-animate on refresh (
m-base); failed count pulses when > 0 (attention, 00-shared/08 motion-safe). - Status badge transitions: Active ↔ Paused cross-fade
m-fast.
4. Waiting states (async delivery)
- While a test/retry is in flight, the logs screen shows a subtle "processing"
indicator only if the newest row is
pending(webhook-delivery-log.schema.ts:22-23); no infinite spinners - apendingrow is self-explanatory. - If no new row appears within 20 s, show non-blocking hint "Still queued? Check network or retry" (queue health is out of client control).
5. Error interactions
| Error | Presentation | Recovery |
|---|---|---|
| 400 validation | inline field errors, first invalid focused | fix + resubmit |
| 404 webhook | AppErrorState + back (S3/S4/S5) | re-open from list |
| 404 retry | dialog note "No failed deliveries to retry" (webhooks.service.ts:107-108) | dismiss |
| 401 | global re-auth flow (00-shared/06) | sign in |
| 403 | actions hidden; if invoked, permission copy | contact admin |
| 500 / offline | AppErrorState / AppOfflineBanner | retry button |
6. a11y & motion-safety
- All status changes announced via live regions (badge, snackbar, dialog result).
- Motion-reduce: disable shake/pulse; keep cross-fades (00-shared/08 §7, 00-shared/09).
- Touch targets ≥ 48 dp; chip hit areas padded.