feat(ui): add model selection UI to LLM Settings tab

- Three dropdowns for Regular Miku, Evil Miku, Japanese Mode models
- GPU availability badges (Both GPUs / NVIDIA Only / AMD Only)
- Refresh Models + Refresh Status buttons
- Load models on tab switch with defensive checks
- Bump cache-busting version for all JS files
- Remove redundant Current Status section

bot/static/index.html

@@ -663,15 +663,55 @@
           </div>
         </div>
 
-        <!-- Language Mode Status Section -->
-        <div style="margin-bottom: 1.5rem; padding: 1rem; background: #2a2a2a; border-radius: 4px;">
-          <h4 style="margin-top: 0;">📊 Current Status</h4>
-          <div id="language-status-display" style="background: #1a1a1a; padding: 1rem; border-radius: 4px; font-family: monospace; font-size: 0.9rem;">
-            <p style="margin: 0.5rem 0;"><strong>Language Mode:</strong> <span id="status-language">English</span></p>
-            <p style="margin: 0.5rem 0;"><strong>Active Model:</strong> <span id="status-model">llama3.1</span></p>
-            <p style="margin: 0.5rem 0;"><strong>Available Languages:</strong> English, 日本語 (Japanese)</p>
+        <!-- Model Selection Section -->
+        <div style="margin-bottom: 1.5rem; padding: 1rem; background: #2a2a2a; border-radius: 4px; border: 2px solid #7c4dff;">
+          <h4 style="margin-top: 0; color: #b388ff;">🎛️ Model Selection</h4>
+          <p style="margin: 0.5rem 0; color: #aaa;">Choose which model each persona uses. Changes take effect immediately and persist across bot restarts.</p>
+
+          <div style="margin: 1rem 0;">
+            <div id="model-selection-loading" style="color: #aaa;">Loading available models...</div>
+
+            <div id="model-selection-controls" style="display: none;">
+              <!-- Regular Miku -->
+              <div style="margin-bottom: 1rem; padding: 0.8rem; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #69f0ae;">
+                <label for="model-regular" style="font-weight: bold; color: #69f0ae;">🎤 Regular Miku</label>
+                <div style="margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+                  <select id="model-regular" style="flex: 1; min-width: 200px; padding: 0.5rem; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px;"></select>
+                  <span id="model-regular-badge" style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px;"></span>
+                  <button onclick="selectModel('regular')" style="background: #69f0ae; color: #000; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Apply</button>
+                </div>
+              </div>
+
+              <!-- Evil Miku -->
+              <div style="margin-bottom: 1rem; padding: 0.8rem; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #ff5252;">
+                <label for="model-evil" style="font-weight: bold; color: #ff5252;">😈 Evil Miku</label>
+                <div style="margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+                  <select id="model-evil" style="flex: 1; min-width: 200px; padding: 0.5rem; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px;"></select>
+                  <span id="model-evil-badge" style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px;"></span>
+                  <button onclick="selectModel('evil')" style="background: #ff5252; color: #fff; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Apply</button>
+                </div>
+              </div>
+
+              <!-- Japanese Mode -->
+              <div style="margin-bottom: 1rem; padding: 0.8rem; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #40c4ff;">
+                <label for="model-japanese" style="font-weight: bold; color: #40c4ff;">🗾 Japanese Mode</label>
+                <div style="margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+                  <select id="model-japanese" style="flex: 1; min-width: 200px; padding: 0.5rem; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px;"></select>
+                  <span id="model-japanese-badge" style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px;"></span>
+                  <button onclick="selectModel('japanese')" style="background: #40c4ff; color: #000; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Apply</button>
+                </div>
+              </div>
+            </div>
+
+            <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
+              <button onclick="loadAvailableModels()" style="background: #7c4dff; color: #fff; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">🔄 Refresh Models</button>
+              <button onclick="refreshModelStatus()" style="background: #333; color: #fff; padding: 0.5rem 1rem; border: 1px solid #555; border-radius: 4px; cursor: pointer;">📊 Refresh Status</button>
+            </div>
+          </div>
+
+          <div id="model-selection-info" style="margin-top: 0.5rem; padding: 0.5rem; background: #1a1a1a; border-radius: 4px; font-size: 0.8rem; color: #888; display: none;">
+            <span id="model-selection-info-text"></span>
           </div>
-          <button onclick="refreshLanguageStatus()" style="margin-top: 1rem;">🔄 Refresh Status</button>
         </div>
 
         <!-- Information Section -->
@@ -1375,15 +1415,15 @@
   </div>
 </div>
 
-<script src="/static/js/core.js?v=20260502"></script>
-<script src="/static/js/servers.js?v=20260502"></script>
-<script src="/static/js/modes.js?v=20260502"></script>
-<script src="/static/js/actions.js?v=20260502"></script>
-<script src="/static/js/image-gen.js?v=20260502"></script>
-<script src="/static/js/status.js?v=20260502"></script>
-<script src="/static/js/dm.js?v=20260502"></script>
-<script src="/static/js/chat.js?v=20260502"></script>
-<script src="/static/js/memories.js?v=20260502"></script>
-<script src="/static/js/profile.js?v=20260502"></script>
+<script src="/static/js/core.js?v=20260520"></script>
+<script src="/static/js/servers.js?v=20260520"></script>
+<script src="/static/js/modes.js?v=20260520"></script>
+<script src="/static/js/actions.js?v=20260520"></script>
+<script src="/static/js/image-gen.js?v=20260520"></script>
+<script src="/static/js/status.js?v=20260520"></script>
+<script src="/static/js/dm.js?v=20260520"></script>
+<script src="/static/js/chat.js?v=20260520"></script>
+<script src="/static/js/memories.js?v=20260520"></script>
+<script src="/static/js/profile.js?v=20260520"></script>
 </body>
 </html>