From c3c516e1c34d26e2f7440b2663c8e7d29e9d3af5 Mon Sep 17 00:00:00 2001
From: Ross Cadogan <ross.cadogan@gmail.com>
Date: Sat, 4 Jul 2026 22:33:30 +0100
Subject: [PATCH] fix(pi): restore the "More voices" door in Pi's redesigned
 in-chat menu (#491)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pi redesigned its in-chat voice menu (the `div.t-action-m` anchor has been
stale since Feb 2024) into a popover it LAZILY BUILDS on expand and tears down
on collapse: collapsed it's a pill; expanded, Pi swaps in a `rounded-xl` card
whose voice list holds `div.cursor-pointer` rows (no longer `<button>`s).
So SayPi's whole in-chat voice surface went dark on Pi — verified live
(Layer-4 CDP, 2026-07-04): the old firstChild-`<button>` expansion heuristic
watched the wrong depth (a direct-child childList of a shape Pi no longer
produces) and never fired, and the `#saypi-voice-menu` element was SayPi's
empty fallback div appended OUTSIDE Pi's card.

Door-first (founder-scoped): rather than re-inject a full inline voice block
into Pi's ephemeral, arbitrary-Tailwind, div-based menu (fragile against Pi's
~yearly redesigns), restore the robust path — the "More voices" door — so Pi
users reach the full catalog + previews in the extension's Voices settings.

- Observe the audio-controls SUBTREE (Pi's pill↔card swap happens deep, not as
  a direct child) and, whenever the menu is open, ensure the door is the last
  row of Pi's live list. Idempotent; re-injects after each rebuild-on-expand.
- Anchor on the stable "Toggle voice menu" aria-label → the `rounded-xl` card →
  the `flex.flex-col.gap-1` list (the load-bearing, most-churn-resistant hooks).
- Build the door by CLONING a native row's class list so it renders Pi-native
  (Pi's own utilities are already compiled — SayPi can't author them itself),
  plus role=button + Enter/Space for keyboard a11y.

Inline SayPi voice rows on Pi's in-chat menu are deferred (follow-up), which
keeps #483's Pi ▶ deferred with them. Fixture-backed unit tests reproduce Pi's
current DOM; verified live: door renders as the last row (Pi 1-8 + More voices),
native-styled, 0 console errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012WmjGuAUmFGQBZukitHp4L
---
 src/chatbots/PiVoiceMenu.ts                   | 148 +++++++----
 .../PiVoiceMenu-more-voices-door.spec.ts      | 230 ++++++++++++++++++
 2 files changed, 324 insertions(+), 54 deletions(-)
 create mode 100644 test/chatbots/PiVoiceMenu-more-voices-door.spec.ts

diff --git a/src/chatbots/PiVoiceMenu.ts b/src/chatbots/PiVoiceMenu.ts
index 956ebda86c..7bbe7ac08a 100644
--- a/src/chatbots/PiVoiceMenu.ts
+++ b/src/chatbots/PiVoiceMenu.ts
@@ -1,5 +1,7 @@
 import { Observation } from "../dom/Observation";
 import EventBus from "../events/EventBus";
+import getMessage from "../i18n";
+import { openSettings } from "../popup/popupopener";
 import { audioProviders } from "../tts/SpeechModel";
 import { GridVoiceSelector } from "../tts/GridVoiceSelector";
 import { PI_MENU_CAP } from "../tts/VoiceCuration";
@@ -16,8 +18,7 @@ export class PiVoiceMenu extends GridVoiceSelector {
 
     this.addIdVoiceMenu(element);
     this.restyleVoiceMenuControls(element);
-    this.addVoiceMenuExpansionListener();
-    this.addVoiceButtonAdditionListener(element);
+    this.observeForMoreVoicesDoor();
   }
 
   getId(): string {
@@ -103,64 +104,103 @@ export class PiVoiceMenu extends GridVoiceSelector {
     return Observation.foundAndDecorated(obs);
   }
 
-  addVoiceMenuExpansionListener(): Observation {
+  /**
+   * Keep a "More voices" door present in Pi's live in-chat voice menu (#491,
+   * door-first). Pi redesigned the menu into a popover it LAZILY BUILDS on
+   * expand and tears down on collapse (verified live 2026-07-04, Layer-4 CDP):
+   * collapsed there is only a pill; expanded, Pi swaps in a `rounded-xl` card
+   * holding the voice list (`div.flex.flex-col.gap-1` of `div.cursor-pointer`
+   * rows — no longer `<button>`s). The old firstChild-`<button>` expansion
+   * heuristic watched the wrong depth (a direct-child childList) and matched a
+   * shape Pi no longer produces, so it never fired and the SayPi block/door
+   * stayed dark. We instead observe the audio-controls SUBTREE and, whenever
+   * the menu is open, ensure the door is the last row of Pi's list. Inline
+   * SayPi voice rows are deferred; the door reaches the full catalog + ▶
+   * previews in the extension's Voices settings.
+   */
+  observeForMoreVoicesDoor(): Observation {
     const className = "saypi-audio-controls";
-    const audioControlsContainer = document.querySelector("." + className) as HTMLElement;
-    const voiceMenu = document.getElementById(this.getId());
-
-    if (!audioControlsContainer || !voiceMenu) {
+    const audioControls = document.querySelector(
+      "." + className
+    ) as HTMLElement | null;
+    if (!audioControls) {
       return Observation.notFound(className);
     }
-    let foundAudioCtrls = Observation.foundUndecorated(
-      className,
-      audioControlsContainer
+    // The menu may already be open when we attach (re-decoration mid-open).
+    this.ensureMoreVoicesDoor(audioControls);
+    const observer = new MutationObserver(() =>
+      this.ensureMoreVoicesDoor(audioControls)
+    );
+    // Pi swaps the pill↔card DEEP in the subtree, not as a direct child of the
+    // audio-controls container, so the old direct-child childList observer
+    // never saw it — subtree is required.
+    observer.observe(audioControls, { childList: true, subtree: true });
+    return Observation.foundAndDecorated(
+      Observation.foundUndecorated(className, audioControls)
     );
+  }
 
-    const observerCallback = async (
-      mutationsList: MutationRecord[],
-      observer: MutationObserver
-    ) => {
-      for (let mutation of mutationsList) {
-        if (mutation.type === "childList") {
-          for (let node of mutation.addedNodes) {
-            // the addition of a button with an aria-label giving instructions to "close the menu", indicates the voice menu is expanded
-            if (
-              node instanceof HTMLElement &&
-              node.nodeName === "BUTTON" &&
-              node.getAttribute("aria-label") &&
-              node === audioControlsContainer.firstChild
-            ) {
-              voiceMenu.classList.add("expanded");
-              // Pi recreates its native menu on every expand: re-adopt the
-              // fresh host rows and re-render SayPi's block from state. When
-              // TTS is off we still adopt + top up Pi's extras (and the
-              // door), just with no SayPi catalog rows.
-              this.userPreferences.getTextToSpeechEnabled().then((enabled) => {
-                if (enabled) {
-                  this.refreshMenu();
-                } else {
-                  this.renderMenu([], null);
-                }
-              });
-            }
-          }
-          for (let node of mutation.removedNodes) {
-            if (
-              node instanceof HTMLElement &&
-              node.nodeName === "BUTTON" &&
-              node.getAttribute("aria-label")
-            ) {
-              voiceMenu.classList.remove("expanded");
-              return;
-            }
-          }
-        }
-      }
-    };
+  /**
+   * Inject the door into Pi's live voice list when the menu is open and it is
+   * not already there. Idempotent (guarded on `.saypi-more-voices`), so it is
+   * safe to call on every subtree mutation and re-injects after Pi rebuilds the
+   * list on the next expand.
+   */
+  ensureMoreVoicesDoor(audioControls: HTMLElement): void {
+    const list = this.findLiveVoiceList(audioControls);
+    if (!list) return; // collapsed / no list to host the door
+    if (list.querySelector(".saypi-more-voices")) return; // already present
+    list.appendChild(this.createLiveMenuDoor(list));
+  }
 
-    const observer = new MutationObserver(observerCallback);
-    observer.observe(audioControlsContainer, { childList: true });
-    return Observation.foundAndDecorated(foundAudioCtrls); // Assuming listener doesn't require further checks
+  /**
+   * Locate Pi's live voice-list container. Anchors on the stable "Toggle voice
+   * menu" aria-label (present in both states) → the expanded `rounded-xl` card
+   * (the collapsed pill is `rounded-[100px]`, so this is null when collapsed) →
+   * the row list. Positional class-literal chains would be brittle against Pi's
+   * churn; these three anchors are the load-bearing, most-stable ones.
+   */
+  private findLiveVoiceList(audioControls: HTMLElement): HTMLElement | null {
+    const toggle = audioControls.querySelector(
+      'button[aria-label="Toggle voice menu"]'
+    );
+    if (!toggle) return null;
+    const card = toggle.closest(".rounded-xl");
+    if (!card) return null; // collapsed — the pill, not the card
+    return card.querySelector<HTMLElement>(".flex.flex-col.gap-1");
+  }
+
+  /**
+   * Build the door as a Pi-native-looking row by CLONING a native row's class
+   * list (Pi's own utilities are already compiled, so its arbitrary classes —
+   * `min-h-11`, `!bg-secondary-default` — apply to the clone; SayPi can't author
+   * those itself, per the host-injected-arbitrary-Tailwind constraint). Pi's
+   * rows are role-less `<div>` clickables, so we match with a keyboard-operable
+   * div (marginally better a11y than Pi's own rows).
+   */
+  private createLiveMenuDoor(list: HTMLElement): HTMLElement {
+    const template = list.firstElementChild as HTMLElement | null;
+    const door = document.createElement("div");
+    if (template) door.className = template.className;
+    door.classList.add("saypi-more-voices");
+    door.setAttribute("role", "button");
+    door.tabIndex = 0;
+
+    const label = document.createElement("span");
+    const templateSpan = template?.querySelector("span");
+    if (templateSpan) label.className = templateSpan.className;
+    label.textContent = getMessage("moreVoices");
+    door.appendChild(label);
+
+    const open = () => openSettings("voices");
+    door.addEventListener("click", open);
+    door.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        open();
+      }
+    });
+    return door;
   }
 }
 
diff --git a/test/chatbots/PiVoiceMenu-more-voices-door.spec.ts b/test/chatbots/PiVoiceMenu-more-voices-door.spec.ts
new file mode 100644
index 0000000000..103fe3faad
--- /dev/null
+++ b/test/chatbots/PiVoiceMenu-more-voices-door.spec.ts
@@ -0,0 +1,230 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// ConfigModule reads injected env at import time; stub it (mirrors the sibling specs).
+vi.mock("../../src/ConfigModule", () => ({
+  config: {
+    appServerUrl: "https://app.example.com",
+    apiServerUrl: "https://api.saypi.ai",
+    GA_MEASUREMENT_ID: "x",
+    GA_API_SECRET: "x",
+    GA_ENDPOINT: "x",
+  },
+}));
+
+vi.mock("../../src/JwtManager", () => ({
+  getJwtManagerSync: () => ({
+    isAuthenticated: () => true,
+    getClaims: () => ({ ttsQuotaRemaining: 1000 }),
+  }),
+}));
+
+const openSettingsMock = vi.fn();
+vi.mock("../../src/popup/popupopener", () => ({
+  openSettings: (...args: unknown[]) => openSettingsMock(...args),
+}));
+
+import { PiVoiceMenu } from "../../src/chatbots/PiVoiceMenu";
+
+/**
+ * A faithful fixture of pi.ai's CURRENT in-chat voice menu DOM (captured live via
+ * Layer-4 CDP, 2026-07-04 — see #491). Pi lazily builds the whole popover on expand
+ * and tears it down on collapse. The two shapes:
+ *
+ *   collapsed → a pill (`inline-flex … rounded-[100px]`) holding the on/off + toggle buttons.
+ *   expanded  → a card (`… rounded-xl bg-secondary-default`) holding the voice list
+ *               (`div.flex.flex-col.gap-1.pt-1` of `div.cursor-pointer` rows — NOT buttons)
+ *               and a controls row that still carries the "Toggle voice menu" button.
+ *
+ * The door injector anchors on the stable "Toggle voice menu" aria-label → the
+ * rounded-xl card → the flex-col-gap-1 list, so the fixture keeps those exact classes.
+ */
+function buildAudioControls(opts: { expanded: boolean }): HTMLElement {
+  const ac = document.createElement("div");
+  ac.className = "order-2 w-auto saypi-audio-controls";
+
+  const wrapper = document.createElement("div");
+  wrapper.className = "relative flex flex-col-reverse";
+  ac.appendChild(wrapper);
+
+  if (!opts.expanded) {
+    // Collapsed: the pill. rounded-[100px], NOT rounded-xl.
+    const pillOuter = document.createElement("div");
+    pillOuter.className = "relative z-10 flex justify-end self-end";
+    const pill = document.createElement("div");
+    pill.className =
+      "inline-flex h-9 min-h-9 items-stretch overflow-hidden rounded-[100px] bg-fill-default";
+    pill.appendChild(iconButton("Turn voice off"));
+    pill.appendChild(iconButton("Toggle voice menu"));
+    pillOuter.appendChild(pill);
+    wrapper.appendChild(pillOuter);
+  } else {
+    // Expanded: the card with the voice list + controls row.
+    const card = document.createElement("div");
+    card.className =
+      "flex w-auto min-w-fit max-w-[200px] flex-col-reverse overflow-hidden rounded-xl bg-secondary-default";
+
+    const listWrapper = document.createElement("div");
+    listWrapper.className =
+      "flex w-auto min-w-fit max-w-[200px] flex-col overflow-visible bg-transparent p-2";
+    const list = document.createElement("div");
+    list.className = "flex flex-col gap-1 pt-1";
+    for (let i = 1; i <= 8; i++) {
+      const row = document.createElement("div");
+      row.className =
+        "flex min-h-11 cursor-pointer items-center gap-2 rounded-[8px] p-2 transition-colors bg-menu-background text-text-secondary hover:bg-menu-bg-hover py-3 !bg-secondary-default";
+      const span = document.createElement("span");
+      span.className =
+        "text-body-s min-h-px min-w-0 flex-[1_0_0] truncate text-left not-italic";
+      span.textContent = `Pi ${i}`;
+      row.appendChild(span);
+      list.appendChild(row);
+    }
+    listWrapper.appendChild(list);
+    card.appendChild(listWrapper);
+
+    const controls = document.createElement("div");
+    controls.className =
+      "relative flex items-center justify-between overflow-visible bg-secondary-default p-2 self-stretch";
+    controls.appendChild(iconButton("")); // "Voice on" button (no aria-label)
+    controls.appendChild(iconButton("Toggle voice menu"));
+    card.appendChild(controls);
+
+    wrapper.appendChild(card);
+  }
+
+  // SayPi's fallback empty div, appended by findAndDecorateVoiceMenu (id set in ctor).
+  const fallback = document.createElement("div");
+  fallback.id = "saypi-voice-menu";
+  ac.appendChild(fallback);
+
+  return ac;
+}
+
+function iconButton(ariaLabel: string): HTMLButtonElement {
+  const b = document.createElement("button");
+  if (ariaLabel) b.setAttribute("aria-label", ariaLabel);
+  const span = document.createElement("span");
+  b.appendChild(span);
+  return b;
+}
+
+// Object.create bypasses the heavy DOM-observer constructor; the door methods only
+// read `this` for nothing (they take the audio-controls root explicitly).
+function makeMenu(): any {
+  const menu = Object.create(PiVoiceMenu.prototype);
+  return menu;
+}
+
+function listOf(ac: HTMLElement): HTMLElement {
+  return ac.querySelector(".rounded-xl .flex.flex-col.gap-1") as HTMLElement;
+}
+
+beforeEach(() => {
+  openSettingsMock.mockReset();
+  document.body.innerHTML = "";
+});
+
+describe("PiVoiceMenu — 'More voices' door in Pi's live in-chat menu (#491, door-first)", () => {
+  it("injects the door into Pi's live voice list when the menu is expanded", () => {
+    const menu = makeMenu();
+    const ac = buildAudioControls({ expanded: true });
+    document.body.appendChild(ac);
+
+    menu.ensureMoreVoicesDoor(ac);
+
+    const door = listOf(ac).querySelector(".saypi-more-voices");
+    expect(door).not.toBeNull();
+    // Appended at the end — after Pi's native rows (Pi 1..8, then More voices).
+    expect(listOf(ac).lastElementChild).toBe(door);
+    // Label renders (its text is the resolved `moreVoices` message; real i18n
+    // returns the raw key under JSDOM, so assert a non-empty label, not exact copy).
+    expect(
+      (door as HTMLElement).querySelector("span")?.textContent?.length
+    ).toBeGreaterThan(0);
+  });
+
+  it("does nothing when the menu is collapsed (no list to inject into)", () => {
+    const menu = makeMenu();
+    const ac = buildAudioControls({ expanded: false });
+    document.body.appendChild(ac);
+
+    expect(() => menu.ensureMoreVoicesDoor(ac)).not.toThrow();
+    expect(ac.querySelector(".saypi-more-voices")).toBeNull();
+  });
+
+  it("is idempotent: repeated calls on the same open menu never duplicate the door", () => {
+    const menu = makeMenu();
+    const ac = buildAudioControls({ expanded: true });
+    document.body.appendChild(ac);
+
+    menu.ensureMoreVoicesDoor(ac);
+    menu.ensureMoreVoicesDoor(ac);
+    menu.ensureMoreVoicesDoor(ac);
+
+    expect(ac.querySelectorAll(".saypi-more-voices").length).toBe(1);
+  });
+
+  it("clicking the door opens the extension's Voices settings", () => {
+    const menu = makeMenu();
+    const ac = buildAudioControls({ expanded: true });
+    document.body.appendChild(ac);
+
+    menu.ensureMoreVoicesDoor(ac);
+    const door = ac.querySelector(".saypi-more-voices") as HTMLElement;
+    door.click();
+
+    expect(openSettingsMock).toHaveBeenCalledWith("voices");
+  });
+
+  it("Enter/Space activate the door (it matches Pi's div-rows, so needs keyboard a11y)", () => {
+    const menu = makeMenu();
+    const ac = buildAudioControls({ expanded: true });
+    document.body.appendChild(ac);
+
+    menu.ensureMoreVoicesDoor(ac);
+    const door = ac.querySelector(".saypi-more-voices") as HTMLElement;
+    expect(door.getAttribute("role")).toBe("button");
+    expect(door.tabIndex).toBe(0);
+    // KeyboardEvent is on window (not a bare global) in this JSDOM env.
+    door.dispatchEvent(
+      new window.KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+    );
+
+    expect(openSettingsMock).toHaveBeenCalledWith("voices");
+  });
+
+  it("clones a native row's styling so it renders as a Pi-native option, not foreign chrome", () => {
+    const menu = makeMenu();
+    const ac = buildAudioControls({ expanded: true });
+    document.body.appendChild(ac);
+
+    const nativeRow = listOf(ac).firstElementChild as HTMLElement;
+    menu.ensureMoreVoicesDoor(ac);
+    const door = ac.querySelector(".saypi-more-voices") as HTMLElement;
+
+    // Carries Pi's own row classes (already compiled by Pi → no arbitrary-Tailwind gap).
+    expect(door.classList.contains("cursor-pointer")).toBe(true);
+    expect(door.classList.contains("min-h-11")).toBe(true);
+    // The label span mirrors the native span so text sizing matches.
+    const span = door.querySelector("span") as HTMLElement;
+    const nativeSpan = nativeRow.querySelector("span") as HTMLElement;
+    expect(span.className).toBe(nativeSpan.className);
+  });
+
+  it("re-injects the door after Pi tears the menu down and rebuilds it (recreate-on-expand)", () => {
+    const menu = makeMenu();
+    // First expand.
+    let ac = buildAudioControls({ expanded: true });
+    document.body.appendChild(ac);
+    menu.ensureMoreVoicesDoor(ac);
+    expect(ac.querySelectorAll(".saypi-more-voices").length).toBe(1);
+
+    // Collapse then re-expand: Pi rebuilds a fresh card+list with no SayPi door.
+    document.body.innerHTML = "";
+    ac = buildAudioControls({ expanded: true });
+    document.body.appendChild(ac);
+    expect(ac.querySelector(".saypi-more-voices")).toBeNull(); // fresh list, no door yet
+    menu.ensureMoreVoicesDoor(ac);
+    expect(ac.querySelectorAll(".saypi-more-voices").length).toBe(1);
+  });
+});