Settings: "Use recommended for this device" button (GPU/device-tier heuristic)

Inside the "Your device" panel, a button picks a preset from the hardware:
- Mobile → Low, but Medium if a Qualcomm Adreno 700-series (or higher) is found.
- Desktop → Medium, but High if an NVIDIA RTX 3090 (or higher) is found
(newer generation, or 30-gen ≥90; so 3090/3090 Ti and all 40xx/50xx qualify).
GPU is read from the WebGL ANGLE renderer string + WebGPU adapter info. Applies
and persists the chosen preset, and shows what it picked and why. Heuristic
unit-tested across 13 GPU strings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/deviceInfo.js

@@ -25,6 +25,46 @@ async function webgpuInfo() {
   } catch { return 'error' }
 }
 
+export function isMobile() {
+  try { if (navigator.userAgentData && typeof navigator.userAgentData.mobile === 'boolean') return navigator.userAgentData.mobile } catch { /* ignore */ }
+  return /Mobi|Android|iPhone|iPad|iPod|IEMobile|Opera Mini/i.test(navigator.userAgent || '')
+}
+
+// A combined, lowercased GPU descriptor (WebGL renderer + WebGPU adapter info) for
+// heuristic matching. WebGL's ANGLE string usually carries the real chip name, e.g.
+// "…nvidia geforce rtx 3090…" on desktop or "adreno (tm) 730" on Android.
+async function gpuDescriptor() {
+  let s = webglRenderer()
+  try {
+    if (navigator.gpu) {
+      const ad = await navigator.gpu.requestAdapter()
+      const info = ad && (ad.info || (ad.requestAdapterInfo ? await ad.requestAdapterInfo() : null))
+      if (info) s += ' ' + [info.vendor, info.architecture, info.description].filter(Boolean).join(' ')
+    }
+  } catch { /* ignore */ }
+  return s.toLowerCase()
+}
+
+// Recommend a quality preset for this device:
+//   • Mobile → Low, but Medium if a Qualcomm Adreno 700-series (or higher) is detected.
+//   • Desktop → Medium, but High if an NVIDIA RTX 3090 (or higher) is detected.
+// "or higher" for RTX = a newer generation, or the same 30-gen at ≥90 (so 3090/3090 Ti
+// and all 40xx/50xx qualify; 3080 and below don't).
+export async function recommendPreset() {
+  const gpu = await gpuDescriptor()
+  if (isMobile()) {
+    const a = gpu.match(/adreno[^\d]*(\d{3,4})/)
+    if (a && parseInt(a[1], 10) >= 700) return { id: 'medium', reason: `mobile · Adreno ${a[1]} (≥700)` }
+    return { id: 'low', reason: 'mobile device' }
+  }
+  const r = gpu.match(/rtx\s*0*(\d{3,4})/)
+  if (r) {
+    const n = parseInt(r[1], 10), gen = Math.floor(n / 100), model = n % 100
+    if (gen > 30 || (gen === 30 && model >= 90)) return { id: 'high', reason: `desktop · RTX ${r[1]} (≥3090)` }
+  }
+  return { id: 'medium', reason: 'desktop' }
+}
+
 // Returns an ordered array of [label, value] rows.
 export async function gatherDeviceInfo() {
   const rows = []

web/qualityBar.js

@@ -2,7 +2,9 @@
 // voice provider together) plus an expandable "Your device" readout for debugging and
 // benchmarking. Mounted at the TOP of the Settings page, above Local AI Model.
 import { PRESETS, applyPreset, getActivePreset, onPresetChange } from '/web/qualityPreset.js'
-import { gatherDeviceInfo } from '/web/deviceInfo.js'
+import { gatherDeviceInfo, recommendPreset } from '/web/deviceInfo.js'
+
+const presetLabel = (id) => (PRESETS.find((p) => p.id === id) || {}).label || id
 
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
@@ -34,10 +36,24 @@ export function mountQualityBar(host) {
   highlight(getActivePreset())
   onPresetChange((id) => highlight(id))
 
-  // Expandable device readout (debug / benchmark).
+  // Expandable device readout (debug / benchmark) + a one-click "recommend for me".
+  const recBtn = el('button', { class: 'persona-go tac-device-rec', type: 'button' }, '✦ Use recommended for this device')
+  const recNote = el('div', { class: 'persona-status tac-device-rec-note' })
+  recBtn.addEventListener('click', async () => {
+    recBtn.disabled = true; recNote.textContent = 'detecting…'
+    try {
+      const { id, reason } = await recommendPreset()
+      applyPreset(id)
+      recNote.textContent = `Chose ${presetLabel(id)} (${reason}).`
+    } catch { recNote.textContent = 'Could not detect — pick a preset above.' }
+    recBtn.disabled = false
+  })
   const devBody = el('div', { class: 'tac-device-body' }, 'reading…')
-  const dev = el('details', { class: 'tac-device' },
-    [el('summary', {}, 'Your device (GPU / RAM / storage)'), devBody])
+  const dev = el('details', { class: 'tac-device' }, [
+    el('summary', {}, 'Your device (GPU / RAM / storage)'),
+    el('div', { class: 'tac-device-actions' }, [recBtn, recNote]),
+    devBody,
+  ])
   dev.addEventListener('toggle', async () => {
     if (!dev.open || dev.dataset.loaded) return
     dev.dataset.loaded = '1'

web/shell/persona.css

@@ -280,6 +280,9 @@
   cursor: pointer; font-family: var(--p-mono); font-size: 11px; letter-spacing: .08em;
   text-transform: uppercase; color: var(--p-transmit);
 }
+.tac-device-actions { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
+.tac-device-rec { align-self: flex-start; margin-top: 0 !important; }
+.tac-device-rec-note { min-height: 0; }
 .tac-device-body { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
 .tac-device-row { display: flex; gap: 10px; font-family: var(--p-mono); font-size: 11px; line-height: 1.4; }
 .tac-device-k { flex: 0 0 130px; color: var(--p-muted); }