UI: Restore full settings menu with sliders and toggles

backend/public/chat.html

@@ -74,8 +74,28 @@
 
         /* PREVIEW STYLING */
         .preview-container { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
-        .preview-img { width: 100%; height: 100%; border-radius: 8px; object-cover: cover; border: 1px solid var(--border); }
-        .preview-remove { position: absolute; -top: 5px; -right: 5px; background: #ff4444; color: white; border-radius: 50%; width: 12px; height: 12px; font-size: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+        .preview-img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
+        .preview-remove { position: absolute; top: -5px; right: -5px; background: #ff4444; color: white; border-radius: 50%; width: 12px; height: 12px; font-size: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #000; }
+
+        /* SETTINGS GRID */
+        .settings-grid { display: grid; grid-template-cols: 1fr 1fr; gap: 1.2rem; }
+        @media (max-width: 600px) { .settings-grid { grid-template-cols: 1fr; } }
+        .setting-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 1.5rem; border-radius: 1.5rem; }
+        .setting-label { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3em; color: #444; margin-bottom: 1rem; display: block; }
+        .select-group { display: flex; flex-direction: column; gap: 8px; }
+        .select-item { width: 100%; padding: 12px; background: rgba(0,0,0,0.4); border: 1px solid #111; border-radius: 10px; font-family: 'JetBrains Mono'; font-size: 10px; font-weight: 700; color: #555; text-align: left; transition: 0.2s; cursor: pointer; text-transform: uppercase; }
+        .select-item:hover { border-color: #333; color: #aaa; }
+        .select-item.active { background: #fff; color: #000; border-color: #fff; box-shadow: 0 5px 20px rgba(255,255,255,0.1); }
+        
+        .switch-box { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.4); padding: 12px; border-radius: 10px; border: 1px solid #111; cursor: pointer; transition: 0.2s; }
+        .switch-box.active { border-color: #444; background: rgba(255,255,255,0.02); }
+        .switch-box span { font-family: 'JetBrains Mono'; font-size: 10px; font-weight: 700; color: #444; text-transform: uppercase; }
+        .switch-box.active span { color: #fff; }
+        .switch-indicator { width: 10px; height: 10px; border-radius: 50%; background: #222; }
+        .active .switch-indicator { background: #22c55e; box-shadow: 0 0 10px #22c55e; }
+        
+        input[type="range"] { -webkit-appearance: none; background: #111; height: 4px; border-radius: 5px; width: 100%; }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; background: #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(255,255,255,0.5); }
 
         @keyframes node-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
@@ -147,7 +167,7 @@
         </div>
     </main>
 
-    <!-- SETTINGS MODAL -->
+    <!-- SETTINGS MODAL FULL RESTORATION -->
     <div id="settings-modal" class="hidden fixed inset-0 z-[200] flex items-center justify-center p-4 backdrop-blur-3xl overflow-y-auto">
         <div class="max-w-4xl w-full p-10 bg-zinc-950 border border-white/10 rounded-[3rem] space-y-10 shadow-[0_50px_150px_#000] my-auto">
             <div class="flex justify-between items-center">
@@ -156,24 +176,54 @@
             </div>
 
             <div class="settings-grid">
+                <!-- MODEL SELECTION -->
                 <div class="setting-card">
                     <label class="setting-label">Active Neural Core</label>
                     <div class="select-group" id="model-group">
-                        <button class="select-item" data-value="codex-thinking">Codex Thinking</button>
-                        <button class="select-item" data-value="codex-code">Codex Code</button>
-                        <button class="select-item" data-value="codex-v3-2">Codex V3.2</button>
-                        <button class="select-item" data-value="qwen3-coder">Qwen3 Coder</button>
+                        <button class="select-item" data-value="codex-thinking">Codex Thinking (Titan)</button>
+                        <button class="select-item" data-value="codex-code">Codex Code (Architect)</button>
+                        <button class="select-item" data-value="codex-reasoning">Codex Reasoning (Deep)</button>
+                        <button class="select-item" data-value="codex-v3-2">Codex V3.2 (DeepSeek)</button>
+                        <button class="select-item" data-value="qwen3-coder">Qwen3 Coder (Elite)</button>
                     </div>
                 </div>
+
+                <!-- COT MODE -->
                 <div class="setting-card">
                     <label class="setting-label">Reasoning Strategy</label>
                     <div class="select-group" id="cot-group">
-                        <button class="select-item" data-value="none">Direct</button>
-                        <button class="select-item" data-value="summary">Explain</button>
+                        <button class="select-item" data-value="none">Direct Response</button>
+                        <button class="select-item" data-value="summary">Explain Logic</button>
+                        <button class="select-item" data-value="internal">Deep Trace</button>
+                    </div>
+                </div>
+
+                <!-- SLIDERS -->
+                <div class="setting-card space-y-8">
+                    <div>
+                        <label class="setting-label">Reasoning Budget: <span id="budget-val" class="text-white">1024</span>t</label>
+                        <input type="range" id="reasoning-budget" min="256" max="4096" step="256" value="1024" oninput="document.getElementById('budget-val').innerText = this.value">
+                    </div>
+                    <div>
+                        <label class="setting-label">Cognitive Temp: <span id="temp-val" class="text-white">0.7</span></label>
+                        <input type="range" id="temp-slider" min="0" max="1" step="0.1" value="0.7" oninput="document.getElementById('temp-val').innerText = this.value">
+                    </div>
+                </div>
+
+                <!-- TOGGLES -->
+                <div class="setting-card space-y-4">
+                    <div class="switch-box" id="critique-toggle" onclick="this.classList.toggle('active')">
+                        <span>Self Critique Pass</span>
+                        <div class="switch-indicator"></div>
+                    </div>
+                    <div class="switch-box" id="debug-toggle" onclick="this.classList.toggle('active')">
+                        <span>Deep Debug Mode</span>
+                        <div class="switch-indicator"></div>
                     </div>
                 </div>
             </div>
-            <button onclick="saveSettings()" class="w-full py-6 bg-white text-black rounded-3xl font-black text-[10px] uppercase tracking-[0.4em] shadow-xl active:scale-95 transition">Apply Protocols</button>
+
+            <button onclick="saveSettings()" class="w-full py-6 bg-white text-black rounded-3xl font-black text-[10px] uppercase tracking-[0.4em] shadow-xl active:scale-95 transition">Apply Neural Protocols</button>
         </div>
     </div>
 
@@ -228,6 +278,12 @@
                     const p = data.data.preferences || {};
                     setActive('model-group', p.preferredModel || 'codex-thinking');
                     setActive('cot-group', p.cotMode || 'none');
+                    if (p.selfCritique) document.getElementById('critique-toggle').classList.add('active');
+                    if (p.debugMode) document.getElementById('debug-toggle').classList.add('active');
+                    document.getElementById('reasoning-budget').value = p.reasoningBudget || 1024;
+                    document.getElementById('budget-val').innerText = p.reasoningBudget || 1024;
+                    document.getElementById('temp-slider').value = p.temperature || 0.7;
+                    document.getElementById('temp-val').innerText = p.temperature || 0.7;
                     document.getElementById('usage-count').innerText = `${String(data.data.usage.requestsToday).padStart(2, '0')}/75`;
                     if (data.data.isOwner) document.getElementById('owner-tag').classList.remove('hidden');
                 }
@@ -310,7 +366,7 @@
             } finally { 
                 isProcessing = false; 
                 document.getElementById('send-btn').innerHTML = '<i class="fas fa-arrow-up text-sm"></i>'; 
-            }
+            } 
         }
 
         function appendMessage(role, text, model = '', attachmentUrl = '') {
@@ -357,6 +413,10 @@
             const config = {
                 preferredModel: document.querySelector('#model-group .active')?.dataset.value,
                 cotMode: document.querySelector('#cot-group .active')?.dataset.value,
+                reasoningBudget: parseInt(document.getElementById('reasoning-budget').value),
+                temperature: parseFloat(document.getElementById('temp-slider').value),
+                selfCritique: document.getElementById('critique-toggle').classList.contains('active'),
+                debugMode: document.getElementById('debug-toggle').classList.contains('active')
             };
             await fetch(`${API_BASE}/api/users/preferences`, {
                 method: 'PUT', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },