DOM message surface re-verified 2026-10-04 (3 nodes): .group/msg nesting fix, ownership-split menus, More reactions dialog, dividers, virtualization, DM text formats
Session: sidechat/dom-messages
This commit is contained in:
dom-inspector-2
+109
-20
@@ -5,6 +5,11 @@ Covers main chat (`https://muse.ai/`) and sidechat threads (`/thread/<uuid>`).
|
||||
Read-mostly probes; the only state-changing probes were opening/closing the
|
||||
"More options" menu and one Reply-draft open/cancel cycle (composer verified clean after).
|
||||
|
||||
**Re-verified 2026-10-04 ~04:30 UTC** on all three fleet nodes (muse/9410,
|
||||
pip/9420, opm/9440) against live main chats. Menu contents re-probed on muse
|
||||
(own + other's menus, "More reactions" dialog opened and Escape-closed, no
|
||||
residue). Corrections inline; no per-node structural differences.
|
||||
|
||||
Related: `DOM-CHAT-PANEL.md` (panel/sidechat create), `DOM-MESSAGES.md`, `DOM-PAGE-STRUCTURE.md`.
|
||||
|
||||
---
|
||||
@@ -25,6 +30,27 @@ Selector:
|
||||
document.querySelectorAll('.group\\/msg') // note: escaped slash in class name
|
||||
```
|
||||
|
||||
**Structural correction (verified 2026-10-04):** `.group/msg` is *inside*
|
||||
`div[data-message-id]`, not the top-level message element. Full chain:
|
||||
|
||||
```
|
||||
div[data-message-id] ← class "flex flex-col gap-2", the message identity hook
|
||||
└── div.group/msg ← interactive wrapper (this section's hook)
|
||||
├── div (action rail, absolute inset-y-0 end-full)
|
||||
│ └── button[aria-label="More options"]
|
||||
└── div.hatch-chat-groupable-bubble
|
||||
├── span.sr-only "You:" (own messages only)
|
||||
└── p / div (visible body)
|
||||
```
|
||||
|
||||
`div[data-message-id]` additionally carries a direct-child
|
||||
`span.sr-only` with the full accessible label (`"User message: <text>"` /
|
||||
`"Assistant message: <text>"`) — see `DOM-MESSAGES.md` §3.
|
||||
|
||||
Every rendered message has exactly one `.group/msg`, and every `.group/msg`
|
||||
has exactly one `More options` rail button (verified rails == groups on
|
||||
muse, pip, opm — including agent messages).
|
||||
|
||||
Parent chain (own message, bottom-up):
|
||||
|
||||
```
|
||||
@@ -153,7 +179,41 @@ b.dispatchEvent(new MouseEvent('click', opts));
|
||||
- `data-side` / `data-align` describe popper placement (`bottom`/`end` observed).
|
||||
- `id` is Radix-generated (`radix-_r_nd_`) — unstable, don't match on it.
|
||||
|
||||
### Menu contents (in order)
|
||||
### Menu contents — DIFFERS BY OWNERSHIP (corrected 2026-10-04)
|
||||
|
||||
Verified on muse (CDP 9410): opening the menu on an **own** message vs an
|
||||
**other's** (agent) message yields different menus. The earlier doc described
|
||||
one menu; there are two.
|
||||
|
||||
**Own message** — children: header DIV, Reply, Copy, separator, Delete.
|
||||
*No quick-reactions group at all.*
|
||||
|
||||
```javascript
|
||||
[...menu.querySelectorAll('[role="menuitem"]')].map(mi => mi.innerText.trim())
|
||||
// own message: ["Reply", "Copy", "Delete"]
|
||||
```
|
||||
|
||||
**Other's message** — children: header DIV, `[role="group"][aria-label="Quick reactions"]`,
|
||||
separator, Reply, Copy. *No Delete item.*
|
||||
|
||||
```javascript
|
||||
// other's message: ["Reply", "Copy"] (+ 7 reaction buttons in the group)
|
||||
```
|
||||
|
||||
| | Own message menu | Other's message menu |
|
||||
|---|---|---|
|
||||
| Timestamp header | yes | yes |
|
||||
| Quick reactions | **absent** | present (7 buttons) |
|
||||
| Reply / Copy | yes | yes |
|
||||
| Delete | yes (2/2 opens) | **absent** |
|
||||
|
||||
- **Delete** was present on own messages in both opens this session; still
|
||||
absent on other's. The earlier "seen once, absent once" observation is
|
||||
superseded for the ownership axis, but keep a conditional mindset —
|
||||
render conditions beyond ownership are untested, and clicking Delete was
|
||||
not tested (destructive).
|
||||
- **No Edit item exists** on either menu. Message editing UI was not found
|
||||
anywhere (unchanged).
|
||||
|
||||
**a) Timestamp header**
|
||||
|
||||
@@ -161,16 +221,19 @@ b.dispatchEvent(new MouseEvent('click', opts));
|
||||
<div class="text-caption-2 text-text-secondary px-2 pt-1.5 pb-2">Today at 3:48 AM</div>
|
||||
```
|
||||
|
||||
Relative format ("Today at …"). No `<time>` element, no `datetime` attribute.
|
||||
Relative format, **two variants observed**: `Today at 3:48 AM` (today),
|
||||
`Oct 3 at 8:01 PM` (older). No `<time>` element, no `datetime` attribute.
|
||||
|
||||
**b) Quick reactions** — this IS the emoji picker (no separate picker UI exists)
|
||||
**b) Quick reactions** — this IS the emoji picker entry point, and it appears
|
||||
**only on other people's messages** (own-message menus have no reaction UI).
|
||||
|
||||
```html
|
||||
<div role="group" aria-label="Quick reactions"
|
||||
class="flex flex-wrap items-center justify-between gap-0.5 px-1 pt-0.5 pb-1">
|
||||
```
|
||||
|
||||
Six buttons, each:
|
||||
Seven buttons (six emoji + a "More reactions" opener — the 7th was not in the
|
||||
earlier capture):
|
||||
|
||||
```html
|
||||
<button type="button" aria-pressed="false" aria-label="React with thumbs up"
|
||||
@@ -186,14 +249,16 @@ Six buttons, each:
|
||||
| `React with surprised face` | 😮 |
|
||||
| `React with crying face` | 😢 |
|
||||
| `React with folded hands` | 🙏 |
|
||||
| `More reactions` | (opens full picker — see below) |
|
||||
|
||||
```javascript
|
||||
menu.querySelectorAll('button[aria-label^="React"]') // 6 buttons
|
||||
menu.querySelectorAll('button[aria-label^="React"]') // 7 buttons, other's menu only
|
||||
```
|
||||
|
||||
- `aria-pressed="false"` flips to `"true"` once applied (state toggle).
|
||||
- Followed by an empty `<span class="contents">` — likely a conditional slot
|
||||
(e.g. "more emojis" expander); empty in all observed renders.
|
||||
- Clicking **"More reactions"** opens a full emoji picker: `[role="dialog"]`
|
||||
with category headings (`Smileys & People`, …) — 346 `React *` buttons
|
||||
observed in the dialog. Escape closes it cleanly (verified, no draft left).
|
||||
|
||||
**c) Separator**
|
||||
|
||||
@@ -275,20 +340,34 @@ Facts:
|
||||
|
||||
### Timestamps
|
||||
|
||||
- **No `<time>` elements** exist in the inspected threads (zero hits).
|
||||
- Message list level: relative plain text, e.g. `3:47 AM`, rendered as a text node
|
||||
at the `div[role="log"]` level (not wrapped in its own element per message).
|
||||
- Menu header (§3a): relative format `Today at 3:48 AM`.
|
||||
- **No `<time>` elements** exist in the inspected threads (zero hits on all
|
||||
three nodes, 2026-10-04).
|
||||
- Message list level: dividers are direct children of `div[role="log"]`,
|
||||
interspersed between messages (not per-message nodes):
|
||||
- Day boundary: `div.pt-10.pb-4.text-center > span.text-caption-1.text-text-secondary`
|
||||
— text `Oct 3, 11:41 PM`.
|
||||
- Intra-day gap: `div.py-4.text-center > span.text-caption-1.text-text-secondary`
|
||||
— text `2:38 AM` (bare 12h time).
|
||||
- Menu header (§3a): relative format with two variants — `Today at 3:48 AM`
|
||||
(today), `Oct 3 at 8:01 PM` (older).
|
||||
- There is no `datetime` attribute / ISO timestamp anywhere in the message DOM.
|
||||
|
||||
### Author display
|
||||
|
||||
- Own messages: `<span class="sr-only">You:</span>` — **screen-reader-only**,
|
||||
first child of `div.hatch-chat-groupable-bubble`. Not visually rendered.
|
||||
Two sr-only layers (verified 2026-10-04):
|
||||
|
||||
1. **Wrapper level** — direct child of `div[data-message-id]`:
|
||||
`span.sr-only` containing the full accessible label —
|
||||
`"User message: <entire text>"` / `"Assistant message: <entire text>"`.
|
||||
2. **Bubble level** — own messages only: `span.sr-only` with exactly `"You:"`,
|
||||
first child of `div.hatch-chat-groupable-bubble`. Agent messages have no
|
||||
bubble-level sr-only span.
|
||||
|
||||
```javascript
|
||||
// reliable own-vs-other discriminator:
|
||||
msg.querySelector('span.sr-only')?.innerText.trim() === 'You:'
|
||||
// reliable own-vs-other discriminator (bubble level):
|
||||
msg.querySelector('.group\\/msg span.sr-only')?.innerText.trim() === 'You:'
|
||||
// full author+text label (wrapper level):
|
||||
msg.querySelector(':scope > span.sr-only')?.innerText // "Assistant message: …"
|
||||
```
|
||||
|
||||
- Visually, authorship is conveyed by bubble alignment/color only
|
||||
@@ -354,9 +433,19 @@ const hasDraft = /Replying to/.test(document.body.innerText);
|
||||
|
||||
---
|
||||
|
||||
## 8. Open questions
|
||||
## 8. Open questions (updated 2026-10-04)
|
||||
|
||||
1. Delete menuitem render conditions (seen on own message once, absent once).
|
||||
2. Rendered reaction badge markup (no badges present to inspect).
|
||||
3. Whether the empty `span.contents` after quick reactions becomes a full emoji picker.
|
||||
4. `aria-pressed` flip verification after applying a reaction (not clicked in testing).
|
||||
1. ~~Delete menuitem render conditions~~ — resolved on the ownership axis:
|
||||
present on own messages (2/2 opens), absent on other's. Untested whether
|
||||
other conditions (age, thread type) also gate it; clicking Delete untested.
|
||||
2. Rendered reaction badge markup (no badges present to inspect — 0 hits for
|
||||
`[aria-label*="reacted"]` / `[data-testid*="reaction"]` on all three nodes).
|
||||
Re-probe on a thread with known reactions.
|
||||
3. ~~Full emoji picker~~ — answered: "More reactions" button (other's menu only)
|
||||
opens `[role="dialog"]` with categories (`Smileys & People`, …), 346
|
||||
`React *` buttons observed. Escape closes cleanly.
|
||||
4. `aria-pressed` flip verification after applying a reaction (not clicked in
|
||||
testing — applying a reaction is state-changing; left for a dedicated test).
|
||||
5. Menu open flakiness varies by node/moment (4/4 attempts failed on pip,
|
||||
first-try success on muse in the same session — possibly contention with
|
||||
parallel automation). Keep the retry loop (max 4, Escape between attempts).
|
||||
|
||||
Reference in New Issue
Block a user