Put the model picker in Gradio's OWN settings page (not a custom tab)

Per the clarification: inject the engine/model picker into Gradio's native settings
page (footer "Settings" → ?view=settings) instead of a custom sidebar tab. Gradio's
settings page isn't an official extension point (footer_links only toggles which of
api/gradio/settings show), so settingsPanel.js anchors on its "Display Theme" section,
clones the section + heading classes, and appends a native-looking "Local AI Model"
section driving the shared runtime.js singleton. Reverts the custom Settings tab +
nav item + #settings-stage. Graceful no-op if Gradio's DOM changes (app still runs on
the default model).

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,#settings-stage{position:fixed !important;top:0;bottom:0;'
+         '#sprite-stage,#persona-stage,#diary-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,body.tac-collapsed #settings-stage{left:0;}'
-         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage,#settings-stage{left:0;}}'
+         'body.tac-collapsed #diary-stage{left:0;}'
+         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage{left:0;}}'
          '</style>')
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
         + HIDE_TABS + FONTS + THEME +
@@ -194,10 +194,8 @@ 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>')
+        # NOTE: the engine/model picker is injected into Gradio's OWN settings page
+        # (footer "Settings" → ?view=settings) by web/settingsPanel.js — not a tab.
 
 # Mount Gradio on FastAPI so we can also serve the JS module + the sprite assets.
 fastapi_app = FastAPI()

web/settingsPanel.js

@@ -1,7 +1,11 @@
-// 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.
+// Inject the in-browser LLM engine/model picker (and cache management) into Gradio's
+// OWN settings page — the footer "Settings" link (?view=settings). That page isn't an
+// official extension point, so we anchor on its "Display Theme" section, clone its
+// styling, and append a matching "Local AI Model" section. The picker drives the shared
+// runtime.js singleton, so Personas + War Diaries both use whatever is chosen here.
+//
+// Fragile by nature (it rides Gradio's internal DOM): if the structure changes the
+// section simply won't appear (graceful no-op) and the app still runs on defaults.
 import { mountModelBar } from '/web/modelBar.js'
 
 function el(tag, props = {}, kids = []) {
@@ -15,20 +19,29 @@ function el(tag, props = {}, kids = []) {
   return n
 }
 
-export function mountSettingsPanel(host) {
+function injectInto(sampleSection) {
+  const list = sampleSection.parentElement
+  if (!list || list.querySelector('#tac-model-settings')) return
+  // Clone Gradio's own section + heading classes so it looks native.
+  const section = el('div', { class: sampleSection.className, id: 'tac-model-settings' })
+  const h = document.createElement('h2')
+  h.className = sampleSection.querySelector('h2')?.className || ''
+  h.textContent = 'Local AI Model'
+  const intro = el('p', { class: 'tac-set-intro' },
+    'The in-browser model that writes your soldiers and their war diaries — shared by ' +
+    'Personas and War Diaries. Runs on your device; models cache in your browser.')
   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]))
+  section.append(h, intro, modelHost)
+  list.appendChild(section)
   mountModelBar(modelHost)
 }
+
+export function mountSettingsPanel() {
+  const tryInject = () => {
+    const sample = [...document.querySelectorAll('.banner-wrap')].find((e) => /Display Theme/i.test(e.textContent))
+    if (sample) injectInto(sample)
+  }
+  // The settings modal mounts/unmounts on demand, so watch the DOM and (re)inject.
+  new MutationObserver(tryInject).observe(document.body, { childList: true, subtree: true })
+  tryInject()
+}

web/shell/nav.json

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

web/shell/persona.css

@@ -118,13 +118,18 @@
 .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; } }
+/* ── "Local AI Model" section injected into Gradio's own Settings page ──────── */
+/* The model bar's styles use --p-* vars (normally scoped to .persona-view); define
+   them here too so the picker renders correctly inside Gradio's settings modal. */
+#tac-model-settings {
+  --p-ink: #141821; --p-muted: #6d6a5f; --p-paper: #f3ebdc; --p-paper-2: #ece2cc;
+  --p-card: #fbf6ea; --p-transmit: #d8271a;
+  --p-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --p-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+}
+#tac-model-settings * { box-sizing: border-box; }
+#tac-model-settings .model-bar { border-bottom: 0; padding-bottom: 0; }
+.tac-set-intro { font-size: 14px; line-height: 1.5; opacity: .75; margin: 2px 0 14px; }
 
 /* Collapsible control sections (model / voice). Desktop: no toggle, always shown. */
 .ctl-collapse > summary { display: none; }

web/tiny.js

@@ -58,8 +58,9 @@ 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) })
+// Engine + model picker is injected into Gradio's own Settings page (footer link),
+// shared by both Personas and War Diaries via the runtime.js singleton.
+mountSettingsPanel()
 
 // ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────
 const PLAYERS = [