# 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).