Move engine/model settings to a Settings page; share one model across both pages

The model picker was duplicated on Personas and War Diaries. Move the engine +
model selector and cache controls into a new Settings tab (settingsPanel.js); both
pages now read the same selection from the runtime.js singleton, so there's one
place to choose the model and it's guaranteed identical on both. The diary page
keeps its Voice (TTS) controls. nav.json gains an "App › Settings" item (Space-only).

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

app.py

@@ -91,11 +91,11 @@ THEME = ('<style>'
          # Gradio still hides it (display:none on the inactive tab's ancestor).
          '.gradio-container .tabitem{padding:0 !important;}'
          '.gradio-container .tabs{border:0 !important;}'
-         '#sprite-stage,#persona-stage,#diary-stage{position:fixed !important;top:0;bottom:0;'
+         '#sprite-stage,#persona-stage,#diary-stage,#settings-stage{position:fixed !important;top:0;bottom:0;'
          'right:0;left:var(--tac-w,240px);height:auto !important;z-index:1;}'
          'body.tac-collapsed #sprite-stage,body.tac-collapsed #persona-stage,'
-         'body.tac-collapsed #diary-stage{left:0;}'
-         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage{left:0;}}'
+         'body.tac-collapsed #diary-stage,body.tac-collapsed #settings-stage{left:0;}'
+         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage,#settings-stage{left:0;}}'
          '</style>')
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
         + HIDE_TABS + FONTS + THEME +
@@ -194,6 +194,10 @@ with gr.Blocks(title="Tiny Army") as demo:
         with gr.Tab("Personas"):
             # In-browser persona generator (web/personaPanel.js → wllama).
             gr.HTML('<div id="persona-stage" style="overflow:hidden"></div>')
+        with gr.Tab("Settings"):
+            # Engine + model picker + cache management (web/settingsPanel.js). Shared by
+            # the Personas and War Diaries pages via the runtime.js singleton.
+            gr.HTML('<div id="settings-stage" style="overflow:hidden"></div>')
 
 # Mount Gradio on FastAPI so we can also serve the JS module + the sprite assets.
 fastapi_app = FastAPI()

web/diaryPanel.js

@@ -3,7 +3,6 @@
 // on the user's device too (Kokoro / Kitten / Web Speech via the TTS facade). Shares
 // the persona styling (.persona-*), the model picker, and tok/s stats.
 import { streamChat, ensureModel, currentModel } from '/web/runtime.js'
-import { mountModelBar } from '/web/modelBar.js'
 import { mountTtsBar } from '/web/ttsBar.js'
 import { makeNarrator, ensureTts } from '/web/tts.js'
 import { DIARY_SYSTEM, diaryUserPrompt, stripThink, noThink, thinkMaxTokens } from '/web/personaPrompts.js'
@@ -20,7 +19,6 @@ function el(tag, props = {}, kids = []) {
 }
 
 export function mountDiaryPanel(host) {
-  const modelHost = el('div')
   const ttsHost = el('div')
   const unit = el('input', { class: 'persona-input', type: 'text', value: 'Bram the Warrior' })
   const traits = el('input', { class: 'persona-input', type: 'text', value: 'Cautious, Veteran, Vengeful' })
@@ -31,14 +29,12 @@ export function mountDiaryPanel(host) {
   const ttsStatus = el('div', { class: 'persona-status tts-status' })
   const out = el('div', { class: 'persona-about' }, 'A first-person diary entry, written by a small model in your browser — and read aloud on your device.')
 
-  // On phones the model + voice bars collapse behind tap-to-expand summaries so the
-  // story isn't pushed off-screen; on desktop they stay open (summary hidden via CSS).
-  const modelWrap = el('details', { class: 'ctl-collapse' }, [el('summary', {}, '⚙ Model'), modelHost])
+  // On phones the voice bar collapses behind a tap-to-expand summary so the story
+  // isn't pushed off-screen; on desktop it stays open (summary hidden via CSS).
   const ttsWrap = el('details', { class: 'ctl-collapse' }, [el('summary', {}, '🔊 Voice'), ttsHost])
-  modelWrap.open = ttsWrap.open = window.innerWidth > 768
+  ttsWrap.open = window.innerWidth > 768
 
   const controls = el('aside', { class: 'persona-controls' }, [
-    modelWrap,
     el('label', { class: 'persona-label' }, 'Unit'), unit,
     el('label', { class: 'persona-label' }, 'Traits'), traits,
     btn, stats, status,
@@ -47,7 +43,6 @@ export function mountDiaryPanel(host) {
   const result = el('div', { class: 'persona-result' }, [out])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
 
-  const bar = mountModelBar(modelHost)
   const ttsBar = mountTtsBar(ttsHost)
 
   let busy = false
@@ -127,7 +122,6 @@ export function mountDiaryPanel(host) {
       })
       status.textContent = 'written ✓ (generated locally)'
       if (live) live.end() // flush the tail sentence; onState resets the button
-      bar.refresh()
     } catch (e) {
       status.textContent = `couldn't run the local model: ${e.message || e}`
       if (live) live.stop()

web/personaPanel.js

@@ -3,7 +3,6 @@
 // (modelBar), generation streams into a live "thinking" view + parsed result, and we
 // show tok/s. Reuses woid's persona parser + extractLivePersona verbatim.
 import { streamChat, ensureModel, currentModel } from '/web/runtime.js'
-import { mountModelBar } from '/web/modelBar.js'
 import { extractLivePersona } from '/web/personaStream.js'
 import { parsePersonaJson } from '/web/personaParse.js'
 import { PERSONA_SYSTEM, personaUserPrompt, stripThink, noThink, thinkMaxTokens } from '/web/personaPrompts.js'
@@ -22,7 +21,6 @@ function el(tag, props = {}, kids = []) {
 }
 
 export function mountPersonaPanel(host) {
-  const modelHost = el('div')
   const sel = el('select', { class: 'persona-input' }, CLASSES.map((c) => el('option', { value: c }, c)))
   const seed = el('input', { class: 'persona-input', type: 'text', placeholder: 'a word, a vibe… (optional)' })
   const stats = el('div', { class: 'persona-stats' })
@@ -35,13 +33,7 @@ export function mountPersonaPanel(host) {
   const thinkEl = el('pre', { class: 'persona-think' })
   const thinkWrap = el('details', { class: 'persona-think-wrap' }, [el('summary', {}, 'model output (raw)'), thinkEl])
 
-  // On phones the model bar collapses behind a tap-to-expand summary so the result
-  // isn't pushed off-screen; on desktop it stays open (summary hidden via CSS).
-  const modelWrap = el('details', { class: 'ctl-collapse' }, [el('summary', {}, '⚙ Model'), modelHost])
-  modelWrap.open = window.innerWidth > 768
-
   const controls = el('aside', { class: 'persona-controls' }, [
-    modelWrap,
     el('label', { class: 'persona-label' }, 'Class'), sel,
     el('label', { class: 'persona-label' }, 'Seed'), seed,
     btn, stats, status,
@@ -49,8 +41,6 @@ export function mountPersonaPanel(host) {
   const result = el('div', { class: 'persona-result' }, [nameEl, tagsEl, aboutEl, thinkWrap])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
 
-  const bar = mountModelBar(modelHost)
-
   function setTags(p) {
     tagsEl.replaceChildren(...[p.specialty, p.personality, p.vibe].filter(Boolean)
       .map((t) => el('span', { class: 'persona-tag' }, t)))
@@ -93,7 +83,6 @@ export function mountPersonaPanel(host) {
       } catch (e) {
         status.textContent = `the model rambled — couldn't parse a clean persona (${e.message || e})`
       }
-      bar.refresh() // it's now cached
     } catch (e) {
       status.textContent = `couldn't run the local model: ${e.message || e}`
     } finally {

web/settingsPanel.js

@@ -0,0 +1,34 @@
+// Settings — the in-browser LLM engine + model picker and cache management, shared by
+// BOTH the Personas and War Diaries pages (they read the same runtime.js singleton).
+// Moved here out of the individual panels so there's ONE place to choose the model and
+// it's guaranteed identical on both pages.
+import { mountModelBar } from '/web/modelBar.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 mountSettingsPanel(host) {
+  const modelHost = el('div')
+  const pane = el('div', { class: 'settings-pane' }, [
+    el('h2', { class: 'persona-name settings-title' }, 'Settings'),
+    el('p', { class: 'persona-about settings-intro' },
+      'Pick the in-browser LLM that writes your soldiers and their war diaries. ' +
+      'Everything runs on your device — no cloud. This choice applies to both ' +
+      'Personas and War Diaries.'),
+    el('label', { class: 'persona-label' }, 'Local LLM'),
+    modelHost,
+    el('p', { class: 'settings-note' },
+      'Models download once and are cached in your browser; use 🗑 delete to free space. ' +
+      'wllama (llama.cpp) is the most reliable; WebLLM and Transformers.js are here to benchmark.'),
+  ])
+  host.appendChild(el('div', { class: 'persona-view settings-view' }, [pane]))
+  mountModelBar(modelHost)
+}

web/shell/nav.json

@@ -27,6 +27,12 @@
         { "label": "War Diaries", "icon": "📓", "space": "Barracks" },
         { "label": "Personas", "icon": "🪖", "space": "Personas" }
       ]
+    },
+    {
+      "title": "App",
+      "items": [
+        { "label": "Settings", "icon": "⚙", "space": "Settings" }
+      ]
     }
   ]
 }

web/shell/persona.css

@@ -118,6 +118,14 @@
 .persona-go-alt:hover { background: var(--p-paper-2) !important; color: var(--p-ink) !important; }
 .tts-status { min-height: 14px; }
 
+/* ── Settings page (engine + model picker, shared by both pages) ───────────── */
+.settings-view { background: var(--p-paper); overflow-y: auto; }
+.settings-pane { max-width: 560px; width: 100%; margin: 0 auto; padding: 48px 28px; }
+.settings-title { font-size: 30px; margin-bottom: 8px; }
+.settings-intro { font-size: 15px; max-width: none; margin-bottom: 26px; }
+.settings-note { font-family: var(--p-mono); font-size: 10px; line-height: 1.6; color: var(--p-muted); margin-top: 14px; }
+@media (max-width: 768px) { .settings-pane { padding: 54px 16px 28px; } }
+
 /* Collapsible control sections (model / voice). Desktop: no toggle, always shown. */
 .ctl-collapse > summary { display: none; }
 

web/tiny.js

@@ -9,6 +9,7 @@ import { sliceGridWith, cellOf, rowFor, facingFor, ANIM } from '/web/sheet.js'
 import { mountSpritePlayground } from '/web/playground.js'
 import { mountPersonaPanel } from '/web/personaPanel.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
+import { mountSettingsPanel } from '/web/settingsPanel.js'
 
 function whenEl(id, cb) {
   const found = document.getElementById(id)
@@ -57,6 +58,8 @@ whenEl('sprite-stage', async (el) => {
 // ── Personas + War Diary tabs — in-browser llama.cpp (wllama), runs on the device ──
 whenEl('persona-stage', (el) => { mountPersonaPanel(el) })
 whenEl('diary-stage', (el) => { mountDiaryPanel(el) })
+// Engine + model live in Settings (shared by both Personas and War Diaries).
+whenEl('settings-stage', (el) => { mountSettingsPanel(el) })
 
 // ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────
 const PLAYERS = [