From e470dfc244dc752f5bba49ebdc5d93fca8d9ef37 Mon Sep 17 00:00:00 2001
From: operator-main <operator-main@frontdoor.local>
Date: Sun, 4 Oct 2026 03:50:57 +0000
Subject: [PATCH] DOM reference: notifications and activity\n\n- No bell icon;
 toast live region + Activity tab documented\n- Chat nav unread via aria-label
 flip (match on testid, not label)

---
 docs/DOM-NOTIFICATIONS.md | 242 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 docs/DOM-NOTIFICATIONS.md

diff --git a/docs/DOM-NOTIFICATIONS.md b/docs/DOM-NOTIFICATIONS.md
new file mode 100644
index 0000000..bd82b74
--- /dev/null
+++ b/docs/DOM-NOTIFICATIONS.md
@@ -0,0 +1,242 @@
+# DOM reference: notifications & activity (muse.ai)
+
+Inspected live via CDP on the opm browser (warp-opm netns, port 9440),
+2026-10-04. Companion docs: `DOM-CHAT-PANEL.md`, `DOM-MESSAGES.md`,
+`DOM-PAGE-STRUCTURE.md`.
+
+## TL;DR
+
+muse.ai has **no bell icon and no notification center/dropdown**. The
+notification surface is three separate things:
+
+1. **Toast live region** — `section[aria-label="Notifications alt+T"]`
+   (transient toasts, aria-live).
+2. **Activity tab** — `button[aria-label="Activity"]` in the status-panel
+   toolbar (activity feed; tabs: Activity / Approvals / Upcoming / Identity).
+3. **Chat nav unread** — `a[data-testid="hatch-nav-chat"]` whose `aria-label`
+   becomes `"Chat, N notification(s)"` when chats are unread.
+
+There are no badge/dot/pill unread elements in the DOM, and no element with
+`notif` in its `data-testid`.
+
+---
+
+## 1. Toast live region
+
+The only element carrying the word "notification" in an aria-label.
+
+```js
+document.querySelector('section[aria-label="Notifications alt+T"]')
+```
+
+| Property | Value |
+|---|---|
+| Tag | `<section>` |
+| `aria-label` | `Notifications alt+T` (stable — safe to match on) |
+| `tabindex` | `-1` |
+| `aria-live` | `polite` |
+| `aria-relevant` | `additions text` |
+| `aria-atomic` | `false` |
+| `data-testid` | none |
+| Parent chain | direct child of `<body>` (no intermediate wrappers) |
+| Content when idle | empty — `childCount: 0`, `innerHTML === ""` |
+
+Semantics: an aria-live toast container. Toasts are injected as children and
+announced politely. `Alt+T` presumably moves focus to it (unverified —
+shortcut named in the label).
+
+**Visibility condition:** always in the DOM (even when empty). Presence of
+children = a toast is/was showing.
+
+**Automation note:** to detect a toast, poll
+`document.querySelector('section[aria-label="Notifications alt+T"]').childElementCount > 0`
+or read `innerText`.
+
+---
+
+## 2. Activity tab button
+
+```js
+document.querySelector('button[aria-label="Activity"]')
+```
+
+| Property | Value |
+|---|---|
+| Tag | `<button type="button">` |
+| `aria-label` | `Activity` (stable — safe to match on) |
+| `aria-pressed` | `"true"` / `"false"` — reflects selected tab |
+| `data-state` | `"closed"` (tooltip/popover state, not panel state) |
+| `data-slot` | `tooltip-trigger` |
+| `data-testid` | none |
+| Children | single `<span aria-hidden="true">` wrapping an SVG icon (no text) |
+
+Parent chain (bottom-up, 8 levels, coords at 780×493 viewport):
+
+```
+div @(420,0)
+div[data-testid="hatch-status-panel-sliding-surface"] @(420,0)
+div @(420,0)
+div @(421,0)
+div @(421,274)
+div @(437,274)
+div @(437,274)
+button[aria-label="Activity"] @(441,278)
+```
+
+The button lives in the **status-panel toolbar**, not the dock rail. It is a
+tab toggle: clicking selects the Activity feed inside the status panel.
+
+### 2a. Sibling tabs (same toolbar)
+
+All icon-only `<button>`s, same structure (span + SVG, no text):
+
+| aria-label | Observed state |
+|---|---|
+| `Activity` | `aria-pressed="true"` (selected during inspection) |
+| `Approvals` | `aria-pressed="false"` |
+| `Upcoming` | present (state not sampled) |
+| `Identity` | present (state not sampled) |
+
+Selector pattern for any tab:
+
+```js
+document.querySelector('button[aria-label="Approvals"]')  // etc.
+```
+
+**Automation note:** no badge/count was observed on any tab (nothing pending
+at inspection time). If counts ever appear they would likely be SVG-adjacent
+spans or aria-label suffixes — re-probe when approvals are pending.
+
+---
+
+## 3. Status panel (sliding surface)
+
+```js
+document.querySelector('[data-testid="hatch-status-panel-sliding-surface"]')
+```
+
+| Property | Value |
+|---|---|
+| Geometry | 360px wide, full height, at x≈420 (right of the chat column) |
+| Visibility | always in DOM; `visible: true` when the panel is open |
+
+Internal structure:
+
+```
+[data-testid="hatch-status-panel-sliding-surface"]
+├── div
+│   ├── div[data-testid="hatch-status-panel-close-drag-handle"]
+│   └── span[data-testid="hatch-status-panel-close-drag-handle-divider-line"]
+├── div                          ← tab content ("operator-main", "Today" when Activity selected)
+│   ├── div[data-testid="hatch-status-panel-close-toolbar"]
+│   │   └── span
+│   │       └── button[data-testid="hatch-status-panel-close"][aria-label="Close panel"]
+```
+
+Close button:
+
+```js
+document.querySelector('button[data-testid="hatch-status-panel-close"]')
+// aria-label="Close panel"
+```
+
+**Automation note:** the tab toolbar (Activity/Approvals/Upcoming/Identity)
+sits between the drag handle and the content area. Tab selection is readable
+via `aria-pressed`.
+
+---
+
+## 4. Chat nav unread indicator
+
+The dock-rail chat link doubles as the unread-chats indicator:
+
+```js
+document.querySelector('[data-testid="hatch-nav-chat"]')
+```
+
+| Property | Value |
+|---|---|
+| Tag | `<a href="/">` (a link, not a button) |
+| `data-testid` | `hatch-nav-chat` (stable — **match on this, not aria-label**) |
+| `aria-label` | **unstable**: `"Chat"` when clean, `"Chat, 1 notification"` (etc.) when chats are unread |
+| `aria-keyshortcuts` | `Control+J` |
+| `aria-current` | `"page"` when the chat view is active |
+| `data-pel-click` | `chat_tab_click` |
+| `data-hatch-shell-navigation` | `"true"` |
+
+Dock rail context (`[data-testid="hatch-dock-rail"]` children):
+
+```
+a[data-testid="hatch-nav-chat"][aria-label="Chat"]          ← unread shows here
+button[data-testid="hatch-nav-search"][aria-label="Search"]
+button[aria-label="Get the Muse app"]
+span[data-testid="hatch-dock-rail-divider"]
+button[data-testid="hatch-dock-more"][aria-label="Settings"]
+```
+
+**Visibility condition:** always in the DOM on chat pages (also present in the
+stripped `/thread/new` state — it is the recovery click target there).
+
+**Automation note — detecting unread chats:**
+
+```js
+const label = document.querySelector('[data-testid="hatch-nav-chat"]')
+  .getAttribute('aria-label');
+const unread = /notification/.test(label);   // "Chat, N notification(s)"
+```
+
+Do not match the element itself by aria-label — the count suffix changes.
+
+---
+
+## 5. What does NOT exist
+
+Verified absent (three DOM sweeps, 2026-10-04):
+
+- No bell icon element.
+- No `data-testid` containing `notif` (full inventory checked).
+- No badge / dot / pill / count / unread elements anywhere in the DOM
+  (regex sweep over testids, class names, and aria-labels — zero hits).
+- No notification dropdown, menu, or dialog container.
+- No `[data-radix-portal]` / portal roots hosting hidden dropdowns.
+- Clicking the Activity tab revealed no additional notification list UI
+  (the status panel was already open on the Activity feed).
+
+Unread state is therefore conveyed **only** through:
+1. the `hatch-nav-chat` aria-label suffix, and
+2. (presumably) unread styling on individual `[data-testid="hatch-thread-row"]`
+   rows in the chat panel — see `DOM-CHAT-PANEL.md`. The panel was closed
+   during this inspection so row-level unread markers were not sampled;
+   re-probe with the panel open if row-level detection is needed.
+
+---
+
+## 6. Automation cheat sheet
+
+```js
+// Is there a toast showing?
+document.querySelector('section[aria-label="Notifications alt+T"]')
+  .childElementCount > 0;
+
+// Any unread chats?
+/notification/.test(
+  document.querySelector('[data-testid="hatch-nav-chat"]').getAttribute('aria-label'));
+
+// Open the Activity feed (select tab):
+document.querySelector('button[aria-label="Activity"]').click();
+// Which status tab is selected?
+document.querySelector('button[aria-label="Activity"]').getAttribute('aria-pressed'); // "true"/"false"
+
+// Close the status panel:
+document.querySelector('button[data-testid="hatch-status-panel-close"]').click();
+
+// Focus the toast region (keyboard):
+// Alt+T  (named in the section's aria-label; behavior unverified)
+```
+
+## Open questions
+
+- Toast content structure (no toast was firing during inspection).
+- Whether tab buttons ever carry counts/badges when items are pending
+  (Approvals tab is the likely candidate — re-probe with a pending approval).
+- Row-level unread markers inside `hatch-thread-row` (needs panel-open probe).