[frederick-wang]

Summary

Fixes #744.

Replaces the three native <select> elements in packages/agent-office's Settings menu (#optLang, #optScene, #optQuality) with in-page Magpie-style listbox app menus (role="listbox"):

flowchart LR
    subgraph Before["Before (#740)"]
        S1["select#optLang.lang-select"] & S2["select#optScene.lang-select"] & S3["select#optQuality.lang-select"] --> Native["OS-native <select> popup\n(violates Magpie GUI rule)"]
    end

    subgraph After["After (#744)"]
        B1["button#optLang.lang-select\n(inline SVG .chev)"] --> L1["div#optLangList\n(role=listbox, fixed)"]
        B2["button#optScene.lang-select\n(inline SVG .chev)"] --> L2["div#optSceneList\n(role=listbox, fixed)"]
        B3["button#optQuality.lang-select\n(inline SVG .chev)"] --> L3["div#optQualityList\n(role=listbox, fixed)"]
    end

Loading

• Trigger buttons (#optLang, #optScene, #optQuality): Replaced <select> with <button type="button" class="lang-select" aria-haspopup="listbox" aria-expanded="false"> containing .picker-val and the same inline <svg class="chev" viewBox="0 0 10 6"> used by #settingsBtn (rotating 180° when open), eliminating the light/dark data-URI background SVG select workarounds.
• Viewport-clamped role="listbox" popovers (#optLangList, #optSceneList, #optQualityList): Positioned with position: fixed (minWidth matching the trigger, opening below or flipping above when bottom space is tighter than top space, clamped within 8px of viewport edges) so #settings's overflow: auto container never clips options.
• Keyboard & pointer behaviour: Supports ArrowDown, ArrowUp, Home, End, Enter, Space, Tab, and Escape (closing the open picker first and returning focus to its trigger without closing #settings), capture-phase outside pointerdown, #settings scroll, and window resize dismissal, plus live label updates across all nine languages.
• Tests & asset stamps: Updated test/browser.mjs and agent-office.test.mjs, and re-stamped page/index.html asset fingerprints with scripts/stamp-page.mjs.

Evidence

• After (Light & Dark Themes — Custom App Menu Open):

Light Mode	Dark Mode

• Automated Verification:
  • HOME=<scratch> bun test packages/agent-office: 183 pass, 0 fail across 15 files.
  • bun packages/agent-office/scripts/stamp-page.mjs --check: 0 (all ?v= sha256 stamps verified).
  • bun scripts/check.mjs agent-office: ✓ registry.json.
  • Playwright 2x Retina verification (1200x820 and compact 600x620, light and dark): zero <select> elements, aria-expanded / 180° .chev rotation, viewport clamping, keyboard navigation, Escape closing picker before #settings, outside click dismissal, and 9-language live label updates.

Merge Danger

Door: Two-way (self-contained UI/DOM update inside packages/agent-office/page/* and its tests).

Blast Radius: Low (scoped to the three Settings pickers #optLang, #optScene, #optQuality in packages/agent-office).

[yetone]

Thanks @frederick-wang! Merged and released as agent-office 0.3.3 (served from the dist branch). I tested it on mote in Chromium and WebKit, in light and dark themes, at two window sizes, with both mouse and keyboard, and saved picks come back after a reload. Two small follow-ups are in #773: a screen reader doesn't hear the current value, and in a narrow window, scrolling past the end of a list closes it.