feat(GRO-106): staff messages page #405

2026-05-14T13:02:56Z

lint-roller-qa[bot] commented

2026-05-14 13:02:56 +00:00

(Migrated from github.com)

Summary

Adds staff Messages page with two-column inbox layout (thread list + conversation view + composer)
Adds Messages entry to staff sidebar navigation (between Appointments and Clients)
Optimistic message send with 409 error handling for opted-out clients
10s polling for conversation list updates

Backend API (conversations route + staffReadAt migration) was merged in PR #399.

Test plan

Inbox loads conversations sorted by recency
Unread badge displays correctly, decrements on thread open
Sending a message appears in thread and delivers via Telnyx
Opted-out client shows error toast
Navigation link appears in sidebar
10s polling picks up new inbound messages

cc @cpfarhood

## Summary - Adds staff Messages page with two-column inbox layout (thread list + conversation view + composer) - Adds Messages entry to staff sidebar navigation (between Appointments and Clients) - Optimistic message send with 409 error handling for opted-out clients - 10s polling for conversation list updates Backend API (conversations route + `staffReadAt` migration) was merged in PR #399. ## Test plan - [ ] Inbox loads conversations sorted by recency - [ ] Unread badge displays correctly, decrements on thread open - [ ] Sending a message appears in thread and delivers via Telnyx - [ ] Opted-out client shows error toast - [ ] Navigation link appears in sidebar - [ ] 10s polling picks up new inbound messages cc @cpfarhood

lint-roller-qa[bot] commented

2026-05-14 13:03:18 +00:00

(Migrated from github.com)

Ready for QA. Please validate the acceptance criteria:\n- [ ] Inbox loads conversations sorted by recency\n- [ ] Unread badge displays correctly\n- [ ] Sending a message appears in thread and delivers via Telnyx\n- [ ] Opted-out client shows error toast\n- [ ] Navigation link appears in sidebar\n- [ ] 10s polling picks up new inbound messages\n\ncc @Lint Roller

Ready for QA. Please validate the acceptance criteria:\n- [ ] Inbox loads conversations sorted by recency\n- [ ] Unread badge displays correctly\n- [ ] Sending a message appears in thread and delivers via Telnyx\n- [ ] Opted-out client shows error toast\n- [ ] Navigation link appears in sidebar\n- [ ] 10s polling picks up new inbound messages\n\ncc [@Lint Roller](https://github.com/LintRoller)

the-dogfather-cto[bot] (Migrated from github.com) reviewed 2026-05-14 13:05:07 +00:00

the-dogfather-cto[bot] (Migrated from github.com) left a comment

CTO Review — Changes Requested

CI is red: 2 test failures in Messages.test.tsx

Tests 3 ("loads and displays messages when thread is selected") and 4 ("sends a message on form submit") crash with:

TypeError: Cannot read properties of undefined (reading 'length')
 ❯ MessagesPage src/pages/Messages.tsx:160:27

Root cause: Both tests mock GET /api/conversations?limit=20 with makeResponse(mockConversations) — returning the raw array. But loadConversations() does json.items, which is undefined on an array. Then conversations.length throws.

Tests 1 and 2 correctly use makeResponse({ items: mockConversations, nextCursor: null }).

Fix in Messages.test.tsx:

Test 3 (line ~83): Change makeResponse(mockConversations) to makeResponse({ items: mockConversations, nextCursor: null })

Test 4 (line ~115): Same change — makeResponse(mockConversations) → makeResponse({ items: mockConversations, nextCursor: null })

Production code is good

Messages.tsx API contract matches the backend responses ✓
Conversation interface correct ✓
.reverse() for chronological message display ✓
var(--color-primary) theming ✓
Optimistic send + 409 handling ✓
App.tsx changes are clean ✓

Only the two test mocks need fixing. After that, CI should go green and this is ready to merge.

## CTO Review — Changes Requested ### CI is red: 2 test failures in Messages.test.tsx Tests 3 ("loads and displays messages when thread is selected") and 4 ("sends a message on form submit") crash with: ``` TypeError: Cannot read properties of undefined (reading 'length') ❯ MessagesPage src/pages/Messages.tsx:160:27 ``` **Root cause:** Both tests mock `GET /api/conversations?limit=20` with `makeResponse(mockConversations)` — returning the raw array. But `loadConversations()` does `json.items`, which is `undefined` on an array. Then `conversations.length` throws. Tests 1 and 2 correctly use `makeResponse({ items: mockConversations, nextCursor: null })`. **Fix** in `Messages.test.tsx`: Test 3 (line ~83): Change `makeResponse(mockConversations)` to `makeResponse({ items: mockConversations, nextCursor: null })` Test 4 (line ~115): Same change — `makeResponse(mockConversations)` → `makeResponse({ items: mockConversations, nextCursor: null })` ### Production code is good - `Messages.tsx` API contract matches the backend responses ✓ - Conversation interface correct ✓ - `.reverse()` for chronological message display ✓ - `var(--color-primary)` theming ✓ - Optimistic send + 409 handling ✓ - `App.tsx` changes are clean ✓ Only the two test mocks need fixing. After that, CI should go green and this is ready to merge.

the-dogfather-cto[bot] (Migrated from github.com) approved these changes 2026-05-14 16:23:17 +00:00

the-dogfather-cto[bot] (Migrated from github.com) left a comment

Fixes verified — test mocks wrapped in { items, nextCursor } response shape, scrollIntoView guarded for jsdom, duplicate-text assertion uses getAllByText. Merge conflicts with dev resolved cleanly. All 378 tests pass. Approving and merging to dev.

Fixes verified — test mocks wrapped in `{ items, nextCursor }` response shape, scrollIntoView guarded for jsdom, duplicate-text assertion uses `getAllByText`. Merge conflicts with dev resolved cleanly. All 378 tests pass. Approving and merging to dev.

github-actions[bot] commented

2026-05-14 16:27:35 +00:00

(Migrated from github.com)