Move Voice settings into the Settings page; add a sidebar ⚙ Settings button

- settingsPanel.js injects two sections into Gradio's settings page now: "Local AI
Model" + "Voice" (the TTS engine/voice picker, moved off the diary page). Both ride
the shared singletons. Auto-narrate is now global facade state (getAutoNarrate /
setAutoNarrate) so the diary reads it without the bar being mounted.
- diaryPanel: drop the voice bar; keep the Read-aloud button + narration; read
getAutoNarrate() for "narrate as it writes".
- Sidebar gains a "⚙ Settings" item (nav.json) that opens the SAME Gradio settings
page as the footer link (tiny.js wraps tacNavigate to click the footer button).

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

web/diaryPanel.js

@@ -3,8 +3,7 @@
 // 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, currentModelId, getEngineId, backendLabel } from '/web/runtime.js'
-import { mountTtsBar } from '/web/ttsBar.js'
-import { makeNarrator, ensureTts, setVoiceDescription } from '/web/tts.js'
+import { makeNarrator, ensureTts, setVoiceDescription, getAutoNarrate } from '/web/tts.js'
 import { DIARY_SYSTEM, diaryUserPrompt, stripThinkFinal, noThink } from '/web/personaPrompts.js'
 
 const MAX_TOKENS = 100 // short diary entries — cap matches the "~60 words" prompt
@@ -21,7 +20,6 @@ function el(tag, props = {}, kids = []) {
 }
 
 export function mountDiaryPanel(host) {
-  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' })
   const stats = el('div', { class: 'persona-stats' })
@@ -34,22 +32,15 @@ export function mountDiaryPanel(host) {
   const copyBtn = el('button', { class: 'persona-copy', type: 'button' }, '📋 Copy debug')
   const dbgWrap = el('details', { class: 'persona-think-wrap' }, [el('summary', {}, 'model output / debug (raw)'), copyBtn, dbgEl])
 
-  // 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])
-  ttsWrap.open = window.innerWidth > 768
-
   const controls = el('aside', { class: 'persona-controls' }, [
     el('label', { class: 'persona-label' }, 'Unit'), unit,
     el('label', { class: 'persona-label' }, 'Traits'), traits,
     btn, stats, status,
-    ttsWrap, narrateBtn, ttsStatus,
+    narrateBtn, ttsStatus,
   ])
   const result = el('div', { class: 'persona-result' }, [out, dbgWrap])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
 
-  const ttsBar = mountTtsBar(ttsHost)
-
   let lastDebug = ''
   function buildDebug(outcome, raw) {
     return [
@@ -133,7 +124,7 @@ export function mountDiaryPanel(host) {
     let live = null
     let spokenLen = 0
     let raw = ''
-    if (ttsBar.autoNarrate()) {
+    if (getAutoNarrate()) {
       try { setSpeaking(true); narrator = live = await makeReadyNarrator() }
       catch (e) { setSpeaking(false); ttsStatus.textContent = `voice unavailable: ${e.message || e}` }
     }

web/settingsPanel.js

@@ -1,12 +1,13 @@
-// 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.
+// Inject our settings sections into Gradio's OWN settings page (footer "Settings" or the
+// sidebar ⚙ button → ?view=settings). Not an official extension point, so we anchor on
+// the "Display Theme" section, clone its styling, and prepend matching sections:
+//   • Local AI Model — the in-browser LLM engine/model picker (modelBar)
+//   • Voice          — the read-aloud TTS engine/voice picker (ttsBar)
+// Both drive the shared runtime.js / tts.js singletons, so every page uses the same
+// choice. Fragile by nature (rides Gradio's DOM): if the structure changes the sections
+// just won't appear (graceful no-op) and the app still runs on defaults.
 import { mountModelBar } from '/web/modelBar.js'
+import { mountTtsBar } from '/web/ttsBar.js'
 
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
@@ -19,29 +20,31 @@ function el(tag, props = {}, kids = []) {
   return n
 }
 
-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' })
+function injectSection(sample, id, title, intro, mountFn) {
+  const list = sample.parentElement
+  if (!list || list.querySelector('#' + id)) return
+  const section = el('div', { class: sample.className + ' tac-set-section', id })
   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')
-  section.append(h, intro, modelHost)
-  list.insertBefore(section, sampleSection) // directly above Display Theme (below the title)
-  mountModelBar(modelHost)
+  h.className = sample.querySelector('h2')?.className || ''
+  h.textContent = title
+  const host = el('div')
+  section.append(h, el('p', { class: 'tac-set-intro' }, intro), host)
+  list.insertBefore(section, sample) // above Display Theme, below the title
+  mountFn(host)
 }
 
 export function mountSettingsPanel() {
   const tryInject = () => {
     const sample = [...document.querySelectorAll('.banner-wrap')].find((e) => /Display Theme/i.test(e.textContent))
-    if (sample) injectInto(sample)
+    if (!sample) return
+    // Insert Model first, then Voice (each goes just above Display Theme).
+    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)
+    injectSection(sample, 'tac-voice-settings', 'Voice',
+      'How war diaries are read aloud. Kokoro/Kitten run on your device; Qwen3-TTS ' +
+      'designs a voice in the cloud.', mountTtsBar)
   }
-  // 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,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

@@ -133,14 +133,14 @@
 /* ── "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 {
+.tac-set-section {
   --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-section * { box-sizing: border-box; }
+.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; }
 
 /* Collapsible control sections (model / voice). Desktop: no toggle, always shown. */

web/tiny.js

@@ -58,10 +58,26 @@ 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 picker is injected into Gradio's own Settings page (footer link),
-// shared by both Personas and War Diaries via the runtime.js singleton.
+// Engine + model + voice pickers are injected into Gradio's own Settings page (footer
+// link / sidebar ⚙), shared across pages via the runtime.js + tts.js singletons.
 mountSettingsPanel()
 
+// Sidebar "⚙ Settings" item opens the SAME Gradio settings page as the footer link.
+// Wrap sidebar.js's tacNavigate (already set, since that's a non-module script): the
+// "Settings" nav target clicks Gradio's footer Settings button; everything else routes
+// to its tab as before.
+const _tacNav = window.tacNavigate
+window.tacNavigate = function (target) {
+  if (target === 'Settings') {
+    const footer = document.querySelector('footer')
+    const btn = footer && Array.prototype.find.call(
+      footer.querySelectorAll('button, a'), (e) => /^settings$/i.test((e.textContent || '').trim()))
+    if (btn) btn.click()
+    return
+  }
+  if (_tacNav) _tacNav(target)
+}
+
 // ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────
 const PLAYERS = [
   { profession: 'Warrior', name: 'Bram', skills: [], slug: 'true-heroes-iii-fighter' },

web/tts.js

@@ -36,6 +36,13 @@ export function setVoice(id) { voiceSel[activeId] = id }
 
 export const ttsNeedsDownload = () => !!eng().needsDownload
 export const ttsBackendLabel = () => eng().backendLabel()
+export const ttsNetworked = () => !!eng().networked
+
+// "Narrate as it writes" — global now that the picker lives in Settings (the diary
+// reads it; the settings voice bar sets it).
+let _autoNarrate = false
+export const getAutoNarrate = () => _autoNarrate
+export const setAutoNarrate = (v) => { _autoNarrate = !!v }
 
 export async function ensureTts(onProgress) {
   if (eng().needsDownload) await ensurePersistentStorage()

web/ttsBar.js

@@ -6,6 +6,7 @@ import {
   listTtsEngines, getTtsEngineId, setTtsEngine,
   listVoices, currentVoiceId, setVoice,
   ttsBackendLabel, ttsNeedsDownload,
+  getAutoNarrate, setAutoNarrate,
 } from '/web/tts.js'
 
 function el(tag, props = {}, kids = []) {
@@ -23,10 +24,10 @@ export function mountTtsBar(host, { onChange } = {}) {
   const engSel = el('select', { class: 'model-select engine-select' })
   const voiceSel = el('select', { class: 'model-select' })
   const auto = el('input', { type: 'checkbox', class: 'tts-auto' })
-  const autoWrap = el('label', { class: 'tts-auto-row' }, [auto, ' narrate as it writes'])
+  const autoWrap = el('label', { class: 'tts-auto-row' }, [auto, ' narrate war diaries as they write'])
   const info = el('div', { class: 'model-info' })
   host.append(el('div', { class: 'model-bar tts-bar' }, [
-    el('label', { class: 'persona-label' }, '🔊 Voice (reads on your device)'),
+    el('label', { class: 'persona-label' }, '🔊 Voice (reads war diaries aloud)'),
     engSel,
     el('label', { class: 'persona-label' }, 'Voice'),
     voiceSel, info, autoWrap,
@@ -50,6 +51,10 @@ export function mountTtsBar(host, { onChange } = {}) {
   engSel.addEventListener('change', () => { setTtsEngine(engSel.value); renderVoices(); onChange && onChange() })
   voiceSel.addEventListener('change', () => { setVoice(voiceSel.value); onChange && onChange() })
 
+  // auto-narrate is global state (the diary reads it); reflect + persist it here.
+  auto.checked = getAutoNarrate()
+  auto.addEventListener('change', () => setAutoNarrate(auto.checked))
+
   // Web Speech voices populate asynchronously.
   if (typeof speechSynthesis !== 'undefined') speechSynthesis.onvoiceschanged = () => renderVoices()