Settings: recommended quality presets + device readout; persist all choices

New "Recommended settings" section at the top of Settings (above Local AI Model):
- High / Medium / Low presets that set the LLM model AND voice provider together,
like a game's graphics presets:
High = Qwen3 0.6B + Kokoro 82M
Medium = Qwen2.5 0.5B + Kitten TTS
Low = Qwen2.5 0.5B + Web Speech
Presets resolve the model within the active engine's catalog (family fallback).
Changing the model or voice by hand drops to Custom.
- Expandable "Your device" readout (CPU threads, RAM, WebGPU/GPU, storage, screen,
UA) for debugging and benchmarking.

Persistence: the LLM engine + per-engine model (runtime.js), the voice provider
(tts.js), and the preset choice (qualityPreset.js) are all saved to localStorage,
so settings survive a refresh. runtime.js now validates a stored model against the
active engine and emits onModelChange; the model/voice bars re-sync when a preset
changes them.

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

web/deviceInfo.js

@@ -0,0 +1,46 @@
+// Best-effort device/GPU/RAM probe for the Settings "Your device" panel — handy for
+// debugging and benchmarking which quality preset a machine can handle. Everything is
+// guarded: unsupported APIs just read "—" rather than throwing.
+import { storageEstimate } from '/web/storage.js'
+import { fmtBytes } from '/web/modelCatalog.js'
+
+function webglRenderer() {
+  try {
+    const c = document.createElement('canvas')
+    const gl = c.getContext('webgl') || c.getContext('experimental-webgl')
+    if (!gl) return '—'
+    const dbg = gl.getExtension('WEBGL_debug_renderer_info')
+    return dbg ? String(gl.getParameter(dbg.UNMASKED_RENDERER_WEBGL)) : (gl.getParameter(gl.RENDERER) || '—')
+  } catch { return '—' }
+}
+
+async function webgpuInfo() {
+  try {
+    if (!navigator.gpu) return 'unavailable'
+    const ad = await navigator.gpu.requestAdapter()
+    if (!ad) return 'no adapter'
+    const info = ad.info || (ad.requestAdapterInfo ? await ad.requestAdapterInfo() : null)
+    const desc = info ? [info.vendor, info.architecture, info.description].filter(Boolean).join(' ').trim() : ''
+    return desc || 'available'
+  } catch { return 'error' }
+}
+
+// Returns an ordered array of [label, value] rows.
+export async function gatherDeviceInfo() {
+  const rows = []
+  const add = (k, v) => rows.push([k, v == null || v === '' ? '—' : String(v)])
+
+  add('CPU threads', navigator.hardwareConcurrency)
+  add('Device memory', navigator.deviceMemory ? `${navigator.deviceMemory} GB (approx)` : '— (not reported)')
+  add('WebGPU', await webgpuInfo())
+  add('GPU (WebGL)', webglRenderer())
+  try {
+    const { usage, quota } = await storageEstimate()
+    add('Storage cache', quota ? `${fmtBytes(usage || 0)} / ${fmtBytes(quota)}` : '—')
+  } catch { add('Storage cache', '—') }
+  try { add('Screen', `${screen.width}×${screen.height} @ ${window.devicePixelRatio || 1}×`) } catch { add('Screen', '—') }
+  add('Platform', (navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform)
+  add('Language', navigator.language)
+  add('User agent', navigator.userAgent)
+  return rows
+}

web/modelBar.js

@@ -6,7 +6,7 @@
 import {
   listEngines, getEngineId, setEngine,
   listModels, currentModel, setModel,
-  cacheSupported, cachedSet, deleteCached, backendLabel,
+  cacheSupported, cachedSet, deleteCached, backendLabel, onModelChange,
 } from '/web/runtime.js'
 import { fmtBytes } from '/web/modelCatalog.js'
 import { storageEstimate } from '/web/storage.js'
@@ -76,6 +76,10 @@ export function mountModelBar(host, { onChange } = {}) {
     if (info.textContent.startsWith('delete failed')) setTimeout(() => { info.textContent = prev }, 2500)
   })
 
+  // A preset (or any other surface) may change the engine/model — re-sync this bar.
+  // render() updates the selects immediately; refresh() then refreshes cache/size info.
+  onModelChange(() => { engSel.value = getEngineId(); render(); refresh() })
+
   render()
   refresh()
   return { refresh }

web/qualityBar.js

@@ -0,0 +1,53 @@
+// "Recommended settings" — a High/Medium/Low/Custom preset picker (sets the LLM model +
+// 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'
+
+function el(tag, props = {}, kids = []) {
+  const n = document.createElement(tag)
+  for (const [k, v] of Object.entries(props)) {
+    if (k === 'class') n.className = v
+    else if (k.startsWith('on') && typeof v === 'function') n.addEventListener(k.slice(2), v)
+    else if (v != null) n.setAttribute(k, v)
+  }
+  for (const kid of [].concat(kids)) if (kid != null) n.append(kid)
+  return n
+}
+
+export function mountQualityBar(host) {
+  // Preset buttons (+ a derived "Custom" that only highlights, never applies).
+  const OPTS = [...PRESETS, { id: 'custom', label: 'Custom', sub: 'Your own model + voice' }]
+  const btns = {}
+  const row = el('div', { class: 'tac-preset-row' }, OPTS.map((p) => {
+    const b = el('button', { class: 'tac-preset-btn', type: 'button', 'data-id': p.id },
+      [el('span', { class: 'tac-preset-name' }, p.label), el('span', { class: 'tac-preset-sub' }, p.sub)])
+    if (p.id !== 'custom') b.addEventListener('click', () => applyPreset(p.id))
+    else b.disabled = true // Custom is a status, not an action
+    btns[p.id] = b
+    return b
+  }))
+
+  function highlight(active) {
+    for (const id of Object.keys(btns)) btns[id].classList.toggle('active', id === active)
+  }
+  highlight(getActivePreset())
+  onPresetChange((id) => highlight(id))
+
+  // Expandable device readout (debug / benchmark).
+  const devBody = el('div', { class: 'tac-device-body' }, 'reading…')
+  const dev = el('details', { class: 'tac-device' },
+    [el('summary', {}, 'Your device (GPU / RAM / storage)'), devBody])
+  dev.addEventListener('toggle', async () => {
+    if (!dev.open || dev.dataset.loaded) return
+    dev.dataset.loaded = '1'
+    try {
+      const rows = await gatherDeviceInfo()
+      devBody.replaceChildren(...rows.map(([k, v]) =>
+        el('div', { class: 'tac-device-row' }, [el('span', { class: 'tac-device-k' }, k), el('span', { class: 'tac-device-v' }, v)])))
+    } catch { devBody.textContent = 'could not read device info' }
+  })
+
+  host.append(el('div', { class: 'tac-quality' }, [row, dev]))
+  return { refresh: () => highlight(detectPreset()) }
+}

web/qualityPreset.js

@@ -0,0 +1,70 @@
+// Quality presets — a game-graphics-style High/Medium/Low/Custom picker that sets BOTH
+// the in-browser LLM model and the voice provider at once. Picking a preset applies it;
+// changing the model or voice by hand drops the picker to "Custom" (even if the new combo
+// happens to equal another preset — like a game's graphics dropdown). The choice is
+// persisted (and the model/voice themselves are persisted by runtime.js / tts.js), so it
+// survives a refresh.
+import { setModel, currentModelId, listModels, onModelChange } from '/web/runtime.js'
+import { setTtsEngine, getTtsEngineId, onTtsEngineChange } from '/web/tts.js'
+
+// model = preferred exact id; family = prefix fallback if the active engine lacks it
+// (e.g. Transformers.js has no Qwen3 — then High can't be honored and reads as Custom).
+export const PRESETS = [
+  { id: 'high',   label: 'High',   model: 'qwen3-0.6b',   family: 'qwen3',   voice: 'kokoro',    sub: 'Qwen3 · Kokoro 82M' },
+  { id: 'medium', label: 'Medium', model: 'qwen2.5-0.5b', family: 'qwen2.5', voice: 'kitten',    sub: 'Qwen2.5 · Kitten TTS' },
+  { id: 'low',    label: 'Low',    model: 'qwen2.5-0.5b', family: 'qwen2.5', voice: 'webspeech', sub: 'Qwen2.5 · Web Speech' },
+]
+const KEY = 'tinyarmy.qualityPreset'
+const VALID = new Set([...PRESETS.map((p) => p.id), 'custom'])
+
+const byId = (id) => PRESETS.find((p) => p.id === id)
+// Resolve a preset's model to an id that exists in the ACTIVE engine's catalog.
+function resolveModel(p) {
+  const ms = listModels()
+  const m = ms.find((x) => x.id === p.model) || ms.find((x) => x.id.startsWith(p.family))
+  return m ? m.id : ''
+}
+
+// Which preset does the current (model, voice) match? 'custom' if none.
+export function detectPreset() {
+  const mid = currentModelId(), v = getTtsEngineId()
+  const p = PRESETS.find((x) => (mid === x.model || mid.startsWith(x.family)) && v === x.voice)
+  return p ? p.id : 'custom'
+}
+
+let _applying = false
+// The active preset id. Load the saved one, but only trust a saved preset id if the
+// persisted model+voice still match it; honor a saved 'custom' as-is.
+let _current = (() => {
+  let saved = ''
+  try { saved = localStorage.getItem(KEY) || '' } catch { /* ignore */ }
+  if (!VALID.has(saved)) return detectPreset()
+  if (saved === 'custom') return 'custom'
+  return detectPreset() === saved ? saved : detectPreset()
+})()
+
+export const getActivePreset = () => _current
+
+function commit(id) {
+  _current = id
+  try { localStorage.setItem(KEY, id) } catch { /* ignore */ }
+  for (const fn of _listeners) { try { fn(id) } catch { /* ignore */ } }
+}
+
+export function applyPreset(id) {
+  const p = byId(id)
+  if (!p) return
+  _applying = true
+  const mid = resolveModel(p)
+  if (mid) setModel(mid)   // fires onModelChange (ignored while _applying)
+  setTtsEngine(p.voice)    // fires onTtsEngineChange (ignored while _applying)
+  _applying = false
+  commit(id)
+}
+
+const _listeners = new Set()
+export function onPresetChange(fn) { _listeners.add(fn); return () => _listeners.delete(fn) }
+// A model/voice change NOT caused by applyPreset = a manual edit → Custom.
+const _onManual = () => { if (!_applying) commit('custom') }
+onModelChange(_onManual)
+onTtsEngineChange(_onManual)

web/runtime.js

@@ -8,21 +8,49 @@ import { engine as webllm } from '/web/engineWebllm.js'
 import { ensurePersistentStorage } from '/web/storage.js'
 
 const ENGINES = [wllama, transformers, webllm]
-// Default to WebLLM (fastest on mobile WebGPU); fall back to wllama where there's no
-// WebGPU so the app still works. Both default to Qwen3 0.6B (see each engine).
-let activeId = webllm.available() ? 'webllm' : 'wllama'
-const modelSel = {} // engineId -> chosen model id (remembered per engine)
+// Persisted choices (survive refresh). Defaults: WebLLM where there's WebGPU (fastest),
+// else wllama so the app still works without it.
+const ENGINE_KEY = 'tinyarmy.llmEngine', MODELS_KEY = 'tinyarmy.llmModels'
+const loadJSON = (k, fb) => { try { const v = localStorage.getItem(k); return v ? JSON.parse(v) : fb } catch { return fb } }
+const loadStr = (k) => { try { return localStorage.getItem(k) || '' } catch { return '' } }
+
+let activeId = (() => {
+  const saved = loadStr(ENGINE_KEY)
+  const e = ENGINES.find((x) => x.id === saved)
+  return e && e.available() ? saved : (webllm.available() ? 'webllm' : 'wllama')
+})()
+const modelSel = loadJSON(MODELS_KEY, {}) // engineId -> chosen model id (remembered per engine)
+
+function persist() {
+  try { localStorage.setItem(ENGINE_KEY, activeId); localStorage.setItem(MODELS_KEY, JSON.stringify(modelSel)) } catch { /* ignore */ }
+}
+
+// Change listeners (the Settings "Recommended" preset bar + the model bar re-render).
+const _listeners = new Set()
+export function onModelChange(fn) { _listeners.add(fn); return () => _listeners.delete(fn) }
+const _notify = () => { for (const fn of _listeners) { try { fn() } catch { /* ignore */ } } }
 
 const eng = () => ENGINES.find((e) => e.id === activeId) || ENGINES[0]
 
 export const listEngines = () => ENGINES.map((e) => ({ id: e.id, label: e.label, available: e.available() }))
 export const getEngineId = () => activeId
-export function setEngine(id) { if (ENGINES.some((e) => e.id === id)) activeId = id }
+export function setEngine(id) {
+  if (!ENGINES.some((e) => e.id === id) || id === activeId) return
+  activeId = id; persist(); _notify()
+}
 
 export const listModels = () => eng().models
-export const currentModelId = () => modelSel[activeId] || eng().defaultModel
+// A stored model id only counts if it actually exists in the active engine's catalog
+// (otherwise fall back to that engine's default — handles cross-engine presets cleanly).
+export const currentModelId = () => {
+  const sel = modelSel[activeId]
+  return (sel && eng().models.some((m) => m.id === sel)) ? sel : eng().defaultModel
+}
 export const currentModel = () => eng().models.find((m) => m.id === currentModelId()) || eng().models[0]
-export function setModel(id) { modelSel[activeId] = id }
+export function setModel(id) {
+  if (modelSel[activeId] === id) return
+  modelSel[activeId] = id; persist(); _notify()
+}
 
 export const ensureModel = async (onProgress) => {
   await ensurePersistentStorage() // keep downloads from being evicted across engine switches

web/settingsPanel.js

@@ -9,6 +9,7 @@
 import { mountModelBar } from '/web/modelBar.js'
 import { mountTtsBar } from '/web/ttsBar.js'
 import { mountPersonaPromptBar } from '/web/personaPromptBar.js'
+import { mountQualityBar } from '/web/qualityBar.js'
 
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
@@ -38,7 +39,11 @@ export function mountSettingsPanel() {
   const tryInject = () => {
     const sample = [...document.querySelectorAll('.banner-wrap')].find((e) => /Display Theme/i.test(e.textContent))
     if (!sample) return
-    // Insert Model first, then Voice (each goes just above Display Theme).
+    // Recommended (preset) first so it sits at the very top, then Model, Voice, etc.
+    // Each injectSection inserts just above Display Theme, so call order = on-screen order.
+    injectSection(sample, 'tac-quality-settings', 'Recommended settings',
+      'Pick a quality preset — it sets the AI model and voice together, like graphics ' +
+      'presets in a game. Changing either by hand switches to Custom.', mountQualityBar)
     injectSection(sample, 'tac-model-settings', 'Local AI Model',
       'The in-browser model that writes your soldiers and their war diaries. Runs on ' +
       'your device; models cache in your browser.', mountModelBar)

web/shell/persona.css

@@ -257,6 +257,31 @@
 .tac-set-section .model-bar { border-bottom: 0; padding-bottom: 0; }
 .tac-set-intro { font-size: 14px; line-height: 1.5; opacity: .75; margin: 2px 0 14px; }
 
+/* Recommended settings — quality preset picker (High / Medium / Low / Custom). */
+.tac-quality { display: flex; flex-direction: column; gap: 12px; }
+.tac-preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.tac-preset-btn {
+  flex: 1 1 120px; display: flex; flex-direction: column; gap: 3px; text-align: left;
+  background: var(--p-card); border: 1.5px solid var(--p-ink); border-radius: 0;
+  padding: 9px 11px; cursor: pointer; color: var(--p-ink); transition: background .12s;
+}
+.tac-preset-btn:hover:not(:disabled) { background: var(--p-paper-2); }
+.tac-preset-btn.active { background: var(--p-ink); color: var(--p-paper); box-shadow: 2px 2px 0 var(--p-transmit); }
+.tac-preset-btn:disabled { cursor: default; }
+.tac-preset-name { font-family: var(--p-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.tac-preset-sub { font-family: var(--p-mono); font-size: 10px; opacity: .7; }
+
+/* Expandable device readout (debug / benchmark). */
+.tac-device { border: 1px dashed var(--p-ink); padding: 8px 10px; }
+.tac-device > summary {
+  cursor: pointer; font-family: var(--p-mono); font-size: 11px; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--p-transmit);
+}
+.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); }
+.tac-device-v { flex: 1; min-width: 0; color: var(--p-ink); word-break: break-word; }
+
 /* Persona-prompt editor (Settings → Persona Prompt). */
 .persona-prompt-bar { display: flex; flex-direction: column; gap: 10px; width: 100%; }
 .persona-prompt-edit {

web/tts.js

@@ -12,8 +12,14 @@ import { ensurePersistentStorage } from '/web/storage.js'
 const ENGINES = [kokoro, qwen3local, qwen3, kitten, webspeech]
 // Default voice provider: local-GPU Qwen3-TTS on localhost (your GPU designs voices),
 // in-browser Kokoro in prod (runs on the device — no exhaustible cloud quota). Cloud
-// Qwen3-TTS and the others remain selectable in Settings.
-let activeId = isLocalhost() ? 'qwen3local' : 'kokoro'
+// Qwen3-TTS and the others remain selectable in Settings. Persisted across refreshes.
+const TTS_ENGINE_KEY = 'tinyarmy.ttsEngine'
+let activeId = (() => {
+  let saved = ''
+  try { saved = localStorage.getItem(TTS_ENGINE_KEY) || '' } catch { /* ignore */ }
+  const e = ENGINES.find((x) => x.id === saved)
+  return e && e.available() ? saved : (isLocalhost() ? 'qwen3local' : 'kokoro')
+})()
 
 // Qwen3-TTS designs a voice from a free-form description (the persona's `voice`).
 // Panels set it before narrating; previewVoice() plays a one-off sample.
@@ -82,6 +88,7 @@ export function onTtsEngineChange(fn) { _engineListeners.add(fn); return () => _
 export function setTtsEngine(id) {
   if (!ENGINES.some((e) => e.id === id) || id === activeId) return
   activeId = id
+  try { localStorage.setItem(TTS_ENGINE_KEY, id) } catch { /* ignore */ }
   for (const fn of _engineListeners) { try { fn(id) } catch { /* ignore */ } }
 }
 

web/ttsBar.js

@@ -5,7 +5,7 @@
 // the shared tts.js facade; every page reads that choice.
 import {
   listTtsEngines, getTtsEngineId, setTtsEngine,
-  ttsBackendLabel, ttsNeedsDownload, activeEngineIsDesign,
+  ttsBackendLabel, ttsNeedsDownload, activeEngineIsDesign, onTtsEngineChange,
 } from '/web/tts.js'
 
 function el(tag, props = {}, kids = []) {
@@ -40,6 +40,8 @@ export function mountTtsBar(host, { onChange } = {}) {
   }
 
   engSel.addEventListener('change', () => { setTtsEngine(engSel.value); renderInfo(); onChange && onChange() })
+  // A preset (Settings → Recommended) may switch the provider — keep this select in sync.
+  onTtsEngineChange((id) => { engSel.value = id; renderInfo() })
 
   renderInfo()
   return { refresh: renderInfo }