From 790a8f21565fea180545cfd6fd7408bd8fc19674 Mon Sep 17 00:00:00 2001
From: Zhaoji Wang <zhaoji.wang@foxmail.com>
Date: Thu, 5 Nov 2026 13:49:07 -0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(agent-office):=20replace=20nat?=
 =?UTF-8?q?ive=20<select>=20pickers=20in=20Settings=20with=20app=20menus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the three remaining native <select> elements in the Settings menu
(#optLang, #optScene, #optQuality) with Magpie-style listbox app menus:

- Turn #optLang, #optScene, and #optQuality into button triggers
  (aria-haspopup="listbox") carrying the shared inline SVG chevron (.chev)
  that rotates 180deg while open, removing the light/dark data-URI
  background-image select workarounds.
- Pair each trigger with a fixed-positioned role="listbox" menu
  (#optLangList, #optSceneList, #optQualityList) clamped within the
  viewport (opening below by default and flipping above when bottom space
  is tight) so #settings's overflow:auto container never clips options.
- Support keyboard navigation (ArrowUp/Down, Home, End, Enter, Space,
  Tab, and Escape closing the open picker first without closing #settings),
  capture-phase outside pointerdown, #settings scroll, and window resize
  dismissal, plus live label updates across all nine languages.
- Update test/browser.mjs and agent-office.test.mjs, and re-stamp asset
  fingerprints in page/index.html.

Closes #5
---
 packages/agent-office/agent-office.test.mjs |  19 +-
 packages/agent-office/page/app.js           | 237 ++++++++++++++++----
 packages/agent-office/page/index.html       |  29 ++-
 packages/agent-office/page/style.css        |  18 +-
 packages/agent-office/test/browser.mjs      |  25 ++-
 5 files changed, 259 insertions(+), 69 deletions(-)

diff --git a/packages/agent-office/agent-office.test.mjs b/packages/agent-office/agent-office.test.mjs
index 079c2e132..9c9eaeb93 100644
--- a/packages/agent-office/agent-office.test.mjs
+++ b/packages/agent-office/agent-office.test.mjs
@@ -288,18 +288,27 @@ test("words, in English and Chinese", () => {
   expect(M.duration(130e3, "en")).toBe("2m 10s")
 })
 
-test("the Settings chevron and select dropdowns draw SVG chevrons, not the ⌄ character", () => {
+test("the Settings chevron and Language, Scene and Quality pickers are SVG app menus, with no native <select>", () => {
   const html = read("index.html")
   const css = read("style.css")
+  const app = read("app.js")
   expect(html).not.toContain("⌄")
+  expect(html).not.toContain("<select")
   expect(html).toMatch(/id="settingsBtn"[^>]*><span data-t="settings">Settings<\/span><svg class="chev" viewBox="0 0 10 6"/)
+  for (const [btnId, listId] of [["optLang", "optLangList"], ["optScene", "optSceneList"], ["optQuality", "optQualityList"]]) {
+    expect(html).toMatch(new RegExp(`<button[^>]*id="${btnId}"[^>]*aria-haspopup="listbox"[^>]*aria-expanded="false"[^>]*aria-controls="${listId}"[^>]*>.*<svg class="chev" viewBox="0 0 10 6"`))
+    expect(html).toMatch(new RegExp(`<div[^>]*id="${listId}"[^>]*role="listbox"`))
+  }
   expect(css).toMatch(/\.btn\s*\{[^}]*display:\s*inline-flex;[^}]*align-items:\s*center;[^}]*gap:\s*7px;/)
   expect(css).toContain(".today-tokens:empty { display: none; }")
-  expect(css).toContain('.btn:hover .chev, #settingsBtn[aria-expanded="true"] .chev { opacity: .9; }')
-  expect(css).toContain('#settingsBtn[aria-expanded="true"] .chev { transform: rotate(180deg); }')
-  expect(css).toMatch(/\.lang-select\s*\{[^}]*appearance:\s*none;/)
-  expect(css).toMatch(/\.lang-select\s*\{[^}]*viewBox='0 0 10 6'/)
+  expect(css).toContain('#settingsBtn[aria-expanded="true"] .chev, .lang-select[aria-expanded="true"] .chev { transform: rotate(180deg); }')
+  expect(css).not.toContain("appearance: none")
   expect(css).toMatch(/prefers-reduced-motion:\s*reduce[\s\S]*\.chev/)
+  expect(app).toContain('setAttribute("role", "option")')
+  expect(app).toContain('getAttribute("aria-controls")')
+  for (const btnId of ["optLang", "optScene", "optQuality"]) {
+    expect(app).toContain(`makePicker(\n    "${btnId}"`)
+  }
 })
 
 // ---- the host part --------------------------------------------------------
diff --git a/packages/agent-office/page/app.js b/packages/agent-office/page/app.js
index 15b58fa85..457bee62d 100644
--- a/packages/agent-office/page/app.js
+++ b/packages/agent-office/page/app.js
@@ -75,7 +75,6 @@
 
   // ---- words -----------------------------------------------------------
   let lastLegend = ""
-  let langSelectSig = ""
   function words() {
     document.querySelectorAll("[data-t]").forEach((e) => { e.textContent = t()[e.dataset.t] })
     $("pip").textContent = floatHome ? t().pipOn : t().pip
@@ -84,12 +83,8 @@
     lastLegend = ""
     railSig = ""
     todaySig = ""
-    langSelectSig = ""
-    syncLangSelect()
+    syncPickers()
     if (typeof scene2 !== "undefined") scene2.lang = lang
-    if ($("optScene")) {
-      for (const option of $("optScene").options) option.textContent = t()["scene" + ({office:"Office",station:"Station",cafe:"Cafe",castle:"Castle",pirate:"Pirate",graveyard:"Graveyard",library:"Library",cyberlab:"Cyberlab",greenhouse:"Greenhouse",arctic:"Arctic",rainynight:"Rainynight"})[option.value]]
-    }
   }
 
   function statusLegend() {
@@ -759,17 +754,163 @@
     box.replaceChildren(...kids)
   }
 
-  function syncLangSelect() {
-    const sel = $("optLang")
-    const sig = lang + "|" + manualLang
-    if (sig === langSelectSig) return
-    langSelectSig = sig
-    const kids = []
-    const option = (value, name) => { const o = document.createElement("option"); o.value = value; o.textContent = name; return o }
-    kids.push(option("auto", t().auto))
-    for (const code of M.LANGS) kids.push(option(code, M.LANG_NAMES[code]))
-    sel.replaceChildren(...kids)
-    sel.value = manualLang
+  const SCENE_OPTIONS = [
+    ["office", "sceneOffice"], ["station", "sceneStation"], ["cafe", "sceneCafe"],
+    ["castle", "sceneCastle"], ["pirate", "scenePirate"], ["graveyard", "sceneGraveyard"],
+    ["library", "sceneLibrary"], ["cyberlab", "sceneCyberlab"], ["greenhouse", "sceneGreenhouse"],
+    ["arctic", "sceneArctic"], ["rainynight", "sceneRainynight"],
+  ]
+  const QUALITY_OPTIONS = [["low", "qLow"], ["medium", "qMedium"], ["high", "qHigh"]]
+  const pickers = []
+  let openPicker = null
+  function checkIcon() {
+    const ns = "http://www.w3.org/2000/svg"
+    const s = document.createElementNS(ns, "svg")
+    s.setAttribute("class", "picker-check")
+    s.setAttribute("viewBox", "0 0 12 12")
+    s.setAttribute("width", "12")
+    s.setAttribute("height", "12")
+    s.setAttribute("aria-hidden", "true")
+    const p = document.createElementNS(ns, "path")
+    p.setAttribute("d", "M2.5 6.2L5 8.6L9.5 3.6")
+    p.setAttribute("fill", "none")
+    p.setAttribute("stroke", "currentColor")
+    p.setAttribute("stroke-width", "1.6")
+    p.setAttribute("stroke-linecap", "round")
+    p.setAttribute("stroke-linejoin", "round")
+    s.append(p)
+    return s
+  }
+  function closePicker(refocus) {
+    return openPicker ? openPicker.close(refocus) : false
+  }
+  function makePicker(btnId, getOptions, getValue, onPick) {
+    const btn = $(btnId)
+    const listId = btn.getAttribute("aria-controls")
+    const list = $(listId)
+    const valNode = btn.querySelector(".picker-val")
+    const wrap = btn.closest(".picker")
+    let sig = ""
+    let activeIdx = 0
+    function setActive(idx) {
+      const items = list.querySelectorAll(".picker-opt")
+      if (!items.length) return
+      activeIdx = (idx + items.length) % items.length
+      items.forEach((it, i) => it.classList.toggle("active", i === activeIdx))
+      const activeEl = items[activeIdx]
+      list.setAttribute("aria-activedescendant", activeEl.id)
+      const top = activeEl.offsetTop
+      const bottom = top + activeEl.offsetHeight
+      if (top < list.scrollTop) list.scrollTop = top
+      else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight
+    }
+    function sync() {
+      const optsList = getOptions()
+      const cur = getValue()
+      const found = optsList.find((o) => o.value === cur) || optsList[0]
+      valNode.textContent = found.label
+      const nextSig = cur + "|" + optsList.map((o) => o.value + ":" + o.label).join(",")
+      if (nextSig === sig) return
+      sig = nextSig
+      const kids = optsList.map((o, i) => {
+        const b = el("button", "picker-opt")
+        b.type = "button"
+        b.id = `${listId}-opt-${i}`
+        b.dataset.value = o.value
+        b.setAttribute("role", "option")
+        b.setAttribute("aria-selected", String(o.value === cur))
+        b.tabIndex = -1
+        b.append(el("span", "picker-opt-label", o.label), checkIcon())
+        b.addEventListener("pointermove", () => { if (activeIdx !== i) setActive(i) })
+        b.addEventListener("click", (e) => { e.stopPropagation(); choose(i) })
+        return b
+      })
+      list.replaceChildren(...kids)
+    }
+    function position() {
+      if (list.hidden) return
+      const r = btn.getBoundingClientRect()
+      const gap = 4, edge = 8
+      const minW = Math.min(Math.max(r.width, 160), innerWidth - edge * 2)
+      list.style.minWidth = minW + "px"
+      const naturalH = Math.min(list.scrollHeight + 2, 240)
+      const below = innerHeight - r.bottom - gap - edge
+      const above = r.top - gap - edge
+      const flipUp = below < naturalH && above > below
+      const maxH = Math.max(72, Math.min(240, flipUp ? above : below))
+      const h = Math.min(naturalH, maxH)
+      const w = list.offsetWidth
+      const top = flipUp ? Math.max(edge, r.top - gap - h) : Math.min(innerHeight - edge - h, Math.max(edge, r.bottom + gap))
+      const left = Math.max(edge, Math.min(r.left, innerWidth - w - edge))
+      list.style.left = left + "px"
+      list.style.top = top + "px"
+      list.style.maxHeight = maxH + "px"
+    }
+    function close(refocus) {
+      if (openPicker === api) openPicker = null
+      list.hidden = true
+      btn.setAttribute("aria-expanded", "false")
+      list.removeAttribute("aria-activedescendant")
+      if (refocus) btn.focus({ preventScroll: true })
+      return true
+    }
+    const api = { btn, list, wrap, sync, position, close }
+    function open(at) {
+      if (openPicker && openPicker !== api) openPicker.close(false)
+      sync()
+      const optsList = getOptions()
+      const selIdx = Math.max(0, optsList.findIndex((o) => o.value === getValue()))
+      const idx = at === "last" ? Math.max(0, optsList.length - 1) : selIdx
+      list.hidden = false
+      btn.setAttribute("aria-expanded", "true")
+      openPicker = api
+      position()
+      setActive(idx)
+      list.focus({ preventScroll: true })
+    }
+    function choose(idx) {
+      const chosen = getOptions()[idx]
+      if (!chosen) return
+      const prevVal = getValue()
+      close(true)
+      if (chosen.value !== prevVal) onPick(chosen.value)
+      syncPickers()
+    }
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation()
+      if (openPicker === api) close(false)
+      else open()
+    })
+    btn.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault()
+        e.stopPropagation()
+        if (openPicker === api) close(false)
+        else open(e.key === "ArrowUp" ? "last" : undefined)
+      } else if (e.key === "Escape" && openPicker === api) {
+        e.preventDefault()
+        e.stopPropagation()
+        close(true)
+      }
+    })
+    list.addEventListener("keydown", (e) => {
+      const count = list.querySelectorAll(".picker-opt").length
+      if (e.key === "ArrowDown") setActive(activeIdx + 1)
+      else if (e.key === "ArrowUp") setActive(activeIdx - 1)
+      else if (e.key === "Home") setActive(0)
+      else if (e.key === "End") setActive(Math.max(0, count - 1))
+      else if (e.key === "Enter" || e.key === " ") choose(activeIdx)
+      else if (e.key === "Escape") close(true)
+      else if (e.key === "Tab") { close(false); return }
+      else return
+      e.preventDefault()
+      e.stopPropagation()
+    })
+    pickers.push(api)
+  }
+  function syncPickers() {
+    for (const p of pickers) p.sync()
+    if (openPicker) openPicker.position()
   }
 
   // ---- in-page toasts ---------------------------------------------------
@@ -942,8 +1083,9 @@
       Object.assign(node.style, {position: "fixed", right: "auto", left: Math.max(8, rect.right-width-10) + "px", top: Math.max(8, rect.top+10) + "px", width: width + "px", maxHeight: Math.max(80, Math.min(rect.height-20, innerHeight-rect.top-18)) + "px"})
     }
   }
-  addEventListener("resize", positionOverlays)
+  addEventListener("resize", () => { closePicker(false); positionOverlays() })
   function closeMenus(except) {
+    closePicker(false)
     let changed = false
     for (const [btn, m] of [[$("settingsBtn"), menu], [$("todayBtn"), todayMenu]]) {
       if (m === except || m.hidden) continue
@@ -964,7 +1106,11 @@
   $("settingsBtn").addEventListener("click", (e) => { e.stopPropagation(); toggleMenu($("settingsBtn"), menu) })
   $("todayBtn").addEventListener("click", (e) => { e.stopPropagation(); toggleMenu($("todayBtn"), todayMenu) })
   menu.addEventListener("click", (e) => e.stopPropagation())
+  menu.addEventListener("scroll", () => closePicker(false))
   todayMenu.addEventListener("click", (e) => e.stopPropagation())
+  addEventListener("pointerdown", (e) => {
+    if (openPicker && !openPicker.wrap.contains(e.target)) closePicker(false)
+  }, true)
   document.addEventListener("click", (e) => {
     if (menu.contains(e.target) || todayMenu.contains(e.target)) return
     if (e.target === $("settingsBtn") || e.target === $("todayBtn")) return
@@ -983,13 +1129,6 @@
   $("optText").addEventListener("change", (e) => { view.text = e.target.checked; refresh(); save() })
   $("optSub").addEventListener("change", (e) => { view.showSub = e.target.checked; agentFilterSig = ""; refresh(); save() })
   $("optIdle").addEventListener("change", (e) => { view.showIdle = e.target.checked; agentFilterSig = ""; refresh(); save() })
-  $("optLang").addEventListener("change", (e) => {
-    manualLang = M.LANG_NAMES[e.target.value] ? e.target.value : "auto"
-    lang = pickLang()
-    words()
-    refresh()
-    save()
-  })
   $("optHide").addEventListener("click", (e) => {
     const h = e.target.closest("button")?.dataset.hide
     if (!h) return
@@ -1077,6 +1216,7 @@
   }).observe($("stage"))
   document.addEventListener("keydown", (e) => {
     if (e.key !== "Escape") return
+    if (closePicker(true)) return
     if (!menu.hidden || !todayMenu.hidden) return closeMenus()
     if (state.open) return close()
     if (floatHome) closeFloat()
@@ -1092,31 +1232,42 @@
     refresh()
   })
 
-  const SCENE_OPTIONS = [
-    ["office", "sceneOffice"], ["station", "sceneStation"], ["cafe", "sceneCafe"],
-    ["castle", "sceneCastle"], ["pirate", "scenePirate"], ["graveyard", "sceneGraveyard"],
-    ["library", "sceneLibrary"], ["cyberlab", "sceneCyberlab"], ["greenhouse", "sceneGreenhouse"],
-    ["arctic", "sceneArctic"], ["rainynight", "sceneRainynight"],
-  ]
-  if ($("optScene")) {
-    $("optScene").replaceChildren(...SCENE_OPTIONS.map(([id, name]) => { const o = el("option", "", t()[name]); o.value = id; return o }))
-    $("optScene").value = view.scene
-    $("optQuality").value = view.quality
-    $("optQuality").addEventListener("change", (e) => {
-      view.quality = e.target.value
-      if (scene3) scene3.setQuality(view.quality)
+  makePicker(
+    "optLang",
+    () => [{ value: "auto", label: t().auto }, ...M.LANGS.map((code) => ({ value: code, label: M.LANG_NAMES[code] }))],
+    () => manualLang,
+    (val) => {
+      manualLang = M.LANG_NAMES[val] ? val : "auto"
+      lang = pickLang()
+      words()
+      refresh()
       save()
-    })
-    $("optScene").addEventListener("change", (e) => {
-      view.scene = e.target.value
+    }
+  )
+  makePicker(
+    "optScene",
+    () => SCENE_OPTIONS.map(([value, name]) => ({ value, label: t()[name] })),
+    () => view.scene,
+    (val) => {
+      view.scene = val
       // a scene belongs to the real 3D view; choosing one takes you there
       if (view.dim !== "3d") { view.dim = "3d"; select("dims", "dim", "3d") }
       if (scene3) scene3.setScene(view.scene)
       activateScene()
       refresh()
       save()
-    })
-  }
+    }
+  )
+  makePicker(
+    "optQuality",
+    () => QUALITY_OPTIONS.map(([value, name]) => ({ value, label: t()[name] })),
+    () => view.quality,
+    (val) => {
+      view.quality = val
+      if (scene3) scene3.setQuality(view.quality)
+      save()
+    }
+  )
   select("modes", "mode", view.mode)
   select("dims", "dim", view.dim)
   words()
diff --git a/packages/agent-office/page/index.html b/packages/agent-office/page/index.html
index 5aa47b692..dbc972bd3 100644
--- a/packages/agent-office/page/index.html
+++ b/packages/agent-office/page/index.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Agent Office</title>
-<link rel="stylesheet" href="style.css?v=f600355d91db">
+<link rel="stylesheet" href="style.css?v=8702ccabcfcc">
 <script src="_magpie/bridge.js"></script>
 <script src="agents.js?v=d958111cd669"></script>
 <script src="model.js?v=b04e2020da2a"></script>
@@ -12,7 +12,7 @@
 <script src="scene.js?v=097cc0a3eec6"></script>
 <script src="three.min.js?v=5b5a0ae404b6"></script>
 <script src="scene3d.js?v=b666062a087d"></script>
-<script src="app.js?v=54035e24dbb8" defer></script>
+<script src="app.js?v=5fca331c2ab2" defer></script>
 </head>
 <body>
 <main class="card" id="card">
@@ -57,20 +57,25 @@ <h1><span class="eyes" aria-hidden="true"><i></i><i></i></span><span data-t="tit
           <div class="agent-filter" id="optAgents"></div>
         </div>
         <div class="row col">
-          <span data-t="language">Language</span>
-          <select class="lang-select" id="optLang"></select>
+          <span id="lblLang" data-t="language">Language</span>
+          <div class="picker">
+            <button type="button" class="lang-select" id="optLang" aria-labelledby="lblLang" aria-haspopup="listbox" aria-expanded="false" aria-controls="optLangList"><span class="picker-val"></span><svg class="chev" viewBox="0 0 10 6" width="10" height="6" aria-hidden="true"><path d="M1.25 1.25L5 4.75L8.75 1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+            <div class="picker-list" id="optLangList" role="listbox" aria-labelledby="lblLang" tabindex="-1" hidden></div>
+          </div>
         </div>
         <div class="row col">
-          <span data-t="scene">Scene</span>
-          <select class="lang-select" id="optScene"></select>
+          <span id="lblScene" data-t="scene">Scene</span>
+          <div class="picker">
+            <button type="button" class="lang-select" id="optScene" aria-labelledby="lblScene" aria-haspopup="listbox" aria-expanded="false" aria-controls="optSceneList"><span class="picker-val"></span><svg class="chev" viewBox="0 0 10 6" width="10" height="6" aria-hidden="true"><path d="M1.25 1.25L5 4.75L8.75 1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+            <div class="picker-list" id="optSceneList" role="listbox" aria-labelledby="lblScene" tabindex="-1" hidden></div>
+          </div>
         </div>
         <div class="row col">
-          <span data-t="quality">Quality</span>
-          <select class="lang-select" id="optQuality">
-            <option value="low" data-t="qLow">Low</option>
-            <option value="medium" data-t="qMedium">Medium</option>
-            <option value="high" data-t="qHigh">High</option>
-          </select>
+          <span id="lblQuality" data-t="quality">Quality</span>
+          <div class="picker">
+            <button type="button" class="lang-select" id="optQuality" aria-labelledby="lblQuality" aria-haspopup="listbox" aria-expanded="false" aria-controls="optQualityList"><span class="picker-val"></span><svg class="chev" viewBox="0 0 10 6" width="10" height="6" aria-hidden="true"><path d="M1.25 1.25L5 4.75L8.75 1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+            <div class="picker-list" id="optQualityList" role="listbox" aria-labelledby="lblQuality" tabindex="-1" hidden></div>
+          </div>
         </div>
         <div class="row col">
           <span data-t="hideAfter">Leave the office after</span>
diff --git a/packages/agent-office/page/style.css b/packages/agent-office/page/style.css
index c86e5e30d..7344bce4b 100644
--- a/packages/agent-office/page/style.css
+++ b/packages/agent-office/page/style.css
@@ -58,8 +58,8 @@ h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px;
 .btn:hover { border-color: var(--muted); }
 .btn.on { background: #1f1f22; color: #fff; }
 .chev { display: block; flex: none; opacity: .55; transition: transform .16s ease, opacity .16s ease; }
-.btn:hover .chev, #settingsBtn[aria-expanded="true"] .chev { opacity: .9; }
-#settingsBtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
+.btn:hover .chev, .lang-select:hover .chev, #settingsBtn[aria-expanded="true"] .chev, .lang-select[aria-expanded="true"] .chev { opacity: .9; }
+#settingsBtn[aria-expanded="true"] .chev, .lang-select[aria-expanded="true"] .chev { transform: rotate(180deg); }
 .menu-wrap { position: relative; }
 .menu { position: fixed; right: auto; top: 0; z-index: 50; width: 260px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
 .menu .row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
@@ -200,9 +200,17 @@ footer { padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
 .agent-filter .af input { margin: 0; accent-color: var(--accent); }
 .agent-filter .afn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .agent-filter .afc { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
-.lang-select { width: 100%; margin-top: 6px; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath d='M1.25 1.25L5 4.75L8.75 1.25' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; -webkit-appearance: none; appearance: none; }
-.lang-select:hover { border-color: var(--muted); }
-[data-theme="dark"] .lang-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath d='M1.25 1.25L5 4.75L8.75 1.25' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
+.picker { position: relative; width: 100%; margin-top: 6px; }
+.lang-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
+.lang-select:hover, .lang-select[aria-expanded="true"] { border-color: var(--muted); }
+.picker-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.picker-list { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 1px; max-width: min(320px, calc(100vw - 16px)); max-height: 240px; overflow: auto; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); outline: none; }
+.picker-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
+.picker-opt:hover, .picker-opt.active { background: var(--card); }
+.picker-opt[aria-selected="true"] { font-weight: 600; }
+.picker-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.picker-check { flex: none; width: 12px; height: 12px; color: var(--accent); visibility: hidden; }
+.picker-opt[aria-selected="true"] .picker-check { visibility: visible; }
 
 /* the list's three groups, as sticky-ish heading rows */
 tr.group td { background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 12px 14px 5px; border-bottom: 1px solid var(--line); }
diff --git a/packages/agent-office/test/browser.mjs b/packages/agent-office/test/browser.mjs
index a10d89368..7e6285c9c 100644
--- a/packages/agent-office/test/browser.mjs
+++ b/packages/agent-office/test/browser.mjs
@@ -60,6 +60,15 @@ for(const engine of (process.env.OFFICE_BROWSERS||'chromium,webkit').split(','))
    await frame.locator(id==='settings'?'#settingsBtn':'#todayBtn').click()
    const bounds=await frame.locator('#'+id).evaluate(e=>{const r=e.getBoundingClientRect();return {left:r.left,right:r.right,top:r.top,bottom:r.bottom,w:innerWidth,h:innerHeight}})
    assert(bounds.left>=0&&bounds.right<=bounds.w+1&&bounds.top>=0&&bounds.bottom<=bounds.h+1,`${engine} menu ${JSON.stringify(bounds)}`)
+   if(id==='settings') {
+    await frame.locator('#optQuality').scrollIntoViewIfNeeded()
+    await frame.locator('#optQuality').click()
+    const pb=await frame.locator('#optQualityList').evaluate(e=>{const r=e.getBoundingClientRect();return {left:r.left,right:r.right,top:r.top,bottom:r.bottom,w:innerWidth,h:innerHeight}})
+    assert(pb.left>=0&&pb.right<=pb.w+1&&pb.top>=0&&pb.bottom<=pb.h+1,`${engine} picker ${JSON.stringify(pb)}`)
+    await page.keyboard.press('Escape')
+    assert.equal(await frame.locator('#optQualityList').isVisible(),false)
+    assert.equal(await frame.locator('#settings').isVisible(),true)
+   }
    await page.screenshot({path:`${output}/${engine}-${width}-${id}.png`})
    await frame.locator(id==='settings'?'#settingsBtn':'#todayBtn').click()
   }
@@ -76,15 +85,23 @@ for(const engine of (process.env.OFFICE_BROWSERS||'chromium,webkit').split(','))
   }
   if(width===1440) {
    await frame.locator('#settingsBtn').click()
+   const pick=async(btn,val)=>{await frame.locator(btn).click();await frame.locator(`${btn}List [data-value="${val}"]`).click()}
+   await pick('#optLang','en')
+   await frame.locator('#optQuality').focus()
+   await page.keyboard.press('ArrowDown')
+   await page.keyboard.press('Home')
+   await page.keyboard.press('Enter')
+   assert.equal((await frame.locator('#optQuality .picker-val').textContent())?.trim(),'Low')
+   await pick('#optLang','auto')
    for(const scene of ['office','station','cafe','castle','pirate','graveyard','library','cyberlab','greenhouse','arctic','rainynight']) {
-    await frame.locator('#optScene').selectOption(scene)
+    await pick('#optScene',scene)
     for(const quality of ['low','medium','high']) {
-     await frame.locator('#optQuality').selectOption(quality)
+     await pick('#optQuality',quality)
      await page.waitForTimeout(80)
     }
    }
-   await frame.locator('#optScene').selectOption('office')
-   await frame.locator('#optQuality').selectOption('medium')
+   await pick('#optScene','office')
+   await pick('#optQuality','medium')
    await frame.locator('#settingsBtn').click()
   }
   await frame.locator('[data-mode="list"]').click()