New UI

ui/script.js

@@ -1,10 +1,13 @@
+
 document.addEventListener('DOMContentLoaded', () => {
     const editor = document.getElementById('editor');
     const suggestionOverlay = document.getElementById('suggestion-overlay');
     const status = document.getElementById('status');
+    const statusIndicator = document.querySelector('.status-indicator');
     
     // Controls
     const nGramSelect = document.getElementById('n-gram');
+    const nValDisplay = document.getElementById('n-val');
     const tempInput = document.getElementById('temperature');
     const tempValDisplay = document.getElementById('temp-val');
     const lengthInput = document.getElementById('length');
@@ -15,17 +18,21 @@ document.addEventListener('DOMContentLoaded', () => {
     let isFetching = false;
     let debounceTimer;
 
-    const autoResize = () => {
-        editor.style.height = 'auto';
-        suggestionOverlay.style.height = 'auto';
-        const newHeight = Math.max(360, editor.scrollHeight);
-        editor.style.height = newHeight + 'px';
-        suggestionOverlay.style.height = newHeight + 'px';
+    // --- UI Logic ---
+    
+    const updateUI = () => {
+        nValDisplay.textContent = nGramSelect.value;
+        tempValDisplay.textContent = tempInput.value;
+        lengthValDisplay.textContent = lengthInput.value;
     };
 
-    tempInput.addEventListener('input', () => { tempValDisplay.textContent = tempInput.value; });
-    lengthInput.addEventListener('input', () => { lengthValDisplay.textContent = lengthInput.value; });
-    
+    tempInput.addEventListener('input', updateUI);
+    lengthInput.addEventListener('input', updateUI);
+    nGramSelect.addEventListener('change', () => {
+        updateUI();
+        triggerUpdate();
+    });
+
     const triggerUpdate = () => {
         currentSuggestion = '';
         updateSuggestion();
@@ -33,16 +40,17 @@ document.addEventListener('DOMContentLoaded', () => {
         if (prompt.trim().length > 0) fetchPrediction(prompt);
     };
 
-    nGramSelect.addEventListener('change', triggerUpdate);
     tempInput.addEventListener('change', triggerUpdate);
     lengthInput.addEventListener('change', triggerUpdate);
 
+    // --- Core Functions ---
+
     const fetchPrediction = async (prompt, customLength = null) => {
         if (isFetching) return;
 
         isFetching = true;
         status.textContent = 'Thinking...';
-        status.classList.add('fetching');
+        statusIndicator.classList.add('fetching');
         
         const n = parseInt(nGramSelect.value);
         const temperature = parseFloat(tempInput.value);
@@ -72,7 +80,7 @@ document.addEventListener('DOMContentLoaded', () => {
         } finally {
             isFetching = false;
             status.textContent = 'Idle';
-            status.classList.remove('fetching');
+            statusIndicator.classList.remove('fetching');
         }
     };
 
@@ -88,15 +96,18 @@ document.addEventListener('DOMContentLoaded', () => {
         editor.value += space + text;
         currentSuggestion = '';
         updateSuggestion();
-        autoResize();
-        window.scrollTo(0, document.body.scrollHeight);
+        
+        // Ensure the editor scrolls with content
+        editor.scrollTop = editor.scrollHeight;
     };
 
+    // --- Event Handlers ---
+
     editor.addEventListener('input', () => {
-        autoResize();
         clearTimeout(debounceTimer);
         currentSuggestion = '';
         updateSuggestion();
+
         const prompt = editor.value;
         if (prompt.trim().length === 0) return;
         debounceTimer = setTimeout(() => fetchPrediction(prompt), 300);
@@ -114,5 +125,11 @@ document.addEventListener('DOMContentLoaded', () => {
         fetchPrediction(editor.value, 50);
     });
 
-    autoResize();
-});
+    // Sync scroll
+    editor.addEventListener('scroll', () => {
+        suggestionOverlay.scrollTop = editor.scrollTop;
+    });
+
+    // Initialize UI badges
+    updateUI();
+});