minor improvements; fixes.. x2

static/app.js

@@ -474,12 +474,14 @@ if (overlaySettingsBtn) overlaySettingsBtn.addEventListener('click', () => {
 
 
 if (overlayLogoutBtn) overlayLogoutBtn.addEventListener('click', () => {
-    if (confirm('Do you want to log out?')) {
-        localStorage.removeItem('stemcopilot_user');
-        localStorage.removeItem('stemcopilot_username');
-        currentUser = null;
-        location.reload();
-    }
+    pwaConfirm('Do you want to log out?').then(yes => {
+        if (yes) {
+            localStorage.removeItem('stemcopilot_user');
+            localStorage.removeItem('stemcopilot_username');
+            currentUser = null;
+            location.reload();
+        }
+    });
 });
 
 function _renderOverlayHistory() {
@@ -498,46 +500,71 @@ function _renderOverlayHistory() {
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                 <span class="overlay-history-title">${escapeHtml(thread.title)}</span>
             </div>
-            <div class="overlay-history-actions">
-                <button class="overlay-action-btn" data-action="rename" title="Rename">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+            <button class="overlay-kebab-btn" title="Options">&#8942;</button>
+            <div class="overlay-ctx-menu">
+                <button class="overlay-ctx-option" data-action="rename">
+                    <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+                    Rename
                 </button>
-                <button class="overlay-action-btn overlay-action-delete" data-action="delete" title="Delete">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                <button class="overlay-ctx-option danger" data-action="delete">
+                    <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    Delete
                 </button>
             </div>
         `;
+        // Load thread on main area click
         item.querySelector('.overlay-history-main').addEventListener('click', () => {
             _closeAllOverlays();
             loadThread(thread.id);
         });
+        // Kebab toggle
+        const kebab = item.querySelector('.overlay-kebab-btn');
+        const ctx = item.querySelector('.overlay-ctx-menu');
+        kebab.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const wasOpen = ctx.classList.contains('show');
+            _closeAllCtxMenus();
+            if (!wasOpen) ctx.classList.add('show');
+        });
+        // Rename
         item.querySelector('[data-action="rename"]').addEventListener('click', (e) => {
             e.stopPropagation();
-            const newTitle = prompt('Rename chat:', thread.title);
-            if (newTitle && newTitle.trim()) {
-                fetch('/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ thread_id: thread.id, title: newTitle.trim() }) })
-                    .then(() => { thread.title = newTitle.trim(); _renderOverlayHistory(); renderHistory(); })
-                    .catch(() => showToast('Failed to rename.', 'error'));
-            }
+            ctx.classList.remove('show');
+            pwaPrompt('Rename chat:', thread.title).then(newTitle => {
+                if (newTitle && newTitle.trim()) {
+                    fetch('/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ thread_id: thread.id, title: newTitle.trim() }) })
+                        .then(() => { thread.title = newTitle.trim(); _renderOverlayHistory(); renderHistory(); })
+                        .catch(() => showToast('Failed to rename.', 'error'));
+                }
+            });
         });
+        // Delete
         item.querySelector('[data-action="delete"]').addEventListener('click', (e) => {
             e.stopPropagation();
-            if (confirm('Delete this chat?')) {
-                fetch('/thread/' + thread.id, { method: 'DELETE' })
-                    .then(() => {
-                        const idx = threads.findIndex(t => t.id === thread.id);
-                        if (idx !== -1) threads.splice(idx, 1);
-                        if (thread.id === currentThreadId) startNewChat();
-                        _renderOverlayHistory();
-                        renderHistory();
-                    })
-                    .catch(() => showToast('Failed to delete.', 'error'));
-            }
+            ctx.classList.remove('show');
+            pwaConfirm('Delete this chat?').then(yes => {
+                if (yes) {
+                    fetch('/thread/' + thread.id, { method: 'DELETE' })
+                        .then(() => {
+                            const idx = threads.findIndex(t => t.id === thread.id);
+                            if (idx !== -1) threads.splice(idx, 1);
+                            if (thread.id === currentThreadId) startNewChat();
+                            _renderOverlayHistory();
+                            renderHistory();
+                        })
+                        .catch(() => showToast('Failed to delete.', 'error'));
+                }
+            });
         });
         overlayHistoryList.appendChild(item);
     });
 }
 
+function _closeAllCtxMenus() {
+    document.querySelectorAll('.overlay-ctx-menu.show').forEach(m => m.classList.remove('show'));
+}
+document.addEventListener('click', () => _closeAllCtxMenus());
+
 
 /* ── Create Welcome Screen (Dynamic) ───────────────────────── */
 
@@ -793,7 +820,7 @@ if (userProfileBtn) userProfileBtn.addEventListener('click', (e) => { e.stopProp
 if (openSettingsBtn) openSettingsBtn.addEventListener('click', () => { userMenu.classList.remove('show'); settingsOverlay.classList.add('show'); });
 if (settingsCloseBtn) settingsCloseBtn.addEventListener('click', () => settingsOverlay.classList.remove('show'));
 if (settingsOverlay) settingsOverlay.addEventListener('click', (e) => { if (e.target === settingsOverlay) settingsOverlay.classList.remove('show'); });
-if (logoutBtn) logoutBtn.addEventListener('click', () => { if (confirm('Do you want to log out?')) { localStorage.removeItem('stemcopilot_user'); localStorage.removeItem('stemcopilot_username'); currentUser = null; location.reload(); } });
+if (logoutBtn) logoutBtn.addEventListener('click', () => { pwaConfirm('Do you want to log out?').then(yes => { if (yes) { localStorage.removeItem('stemcopilot_user'); localStorage.removeItem('stemcopilot_username'); currentUser = null; location.reload(); } }); });
 
 document.querySelectorAll('.settings-nav-btn').forEach(btn => {
     btn.addEventListener('click', () => {
@@ -1381,3 +1408,63 @@ function _closeAllCustomSelects() {
     document.querySelectorAll('.custom-select-btn.open').forEach(b => b.classList.remove('open'));
 }
 
+
+/* ── PWA Modal Utilities ───────────────────────────────────── */
+
+function pwaConfirm(message) {
+    return new Promise(resolve => {
+        const overlay = document.getElementById('pwaConfirmOverlay');
+        const msgEl = document.getElementById('pwaConfirmMessage');
+        const okBtn = document.getElementById('pwaConfirmOk');
+        const cancelBtn = document.getElementById('pwaConfirmCancel');
+        msgEl.textContent = message;
+        overlay.classList.add('show');
+
+        function cleanup(result) {
+            overlay.classList.remove('show');
+            okBtn.removeEventListener('click', onOk);
+            cancelBtn.removeEventListener('click', onCancel);
+            overlay.removeEventListener('click', onBg);
+            resolve(result);
+        }
+        function onOk() { cleanup(true); }
+        function onCancel() { cleanup(false); }
+        function onBg(e) { if (e.target === overlay) cleanup(false); }
+
+        okBtn.addEventListener('click', onOk);
+        cancelBtn.addEventListener('click', onCancel);
+        overlay.addEventListener('click', onBg);
+    });
+}
+
+function pwaPrompt(message, defaultValue) {
+    return new Promise(resolve => {
+        const overlay = document.getElementById('pwaPromptOverlay');
+        const msgEl = document.getElementById('pwaPromptMessage');
+        const input = document.getElementById('pwaPromptInput');
+        const okBtn = document.getElementById('pwaPromptOk');
+        const cancelBtn = document.getElementById('pwaPromptCancel');
+        msgEl.textContent = message;
+        input.value = defaultValue || '';
+        overlay.classList.add('show');
+        setTimeout(() => input.focus(), 50);
+
+        function cleanup(result) {
+            overlay.classList.remove('show');
+            okBtn.removeEventListener('click', onOk);
+            cancelBtn.removeEventListener('click', onCancel);
+            overlay.removeEventListener('click', onBg);
+            input.removeEventListener('keydown', onKey);
+            resolve(result);
+        }
+        function onOk() { cleanup(input.value); }
+        function onCancel() { cleanup(null); }
+        function onBg(e) { if (e.target === overlay) cleanup(null); }
+        function onKey(e) { if (e.key === 'Enter') { e.preventDefault(); cleanup(input.value); } }
+
+        okBtn.addEventListener('click', onOk);
+        cancelBtn.addEventListener('click', onCancel);
+        overlay.addEventListener('click', onBg);
+        input.addEventListener('keydown', onKey);
+    });
+}

static/index.html

@@ -562,6 +562,29 @@
         </div><!-- /settings-modal -->
     </div><!-- /settingsOverlay -->
 
+    <!-- ==================== PWA CONFIRM MODAL ==================== -->
+    <div class="pwa-modal-overlay" id="pwaConfirmOverlay">
+        <div class="pwa-modal">
+            <p class="pwa-modal-message" id="pwaConfirmMessage">Are you sure?</p>
+            <div class="pwa-modal-actions">
+                <button class="pwa-modal-btn pwa-modal-cancel" id="pwaConfirmCancel">No</button>
+                <button class="pwa-modal-btn pwa-modal-ok" id="pwaConfirmOk">Yes</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ==================== PWA PROMPT MODAL ==================== -->
+    <div class="pwa-modal-overlay" id="pwaPromptOverlay">
+        <div class="pwa-modal">
+            <p class="pwa-modal-message" id="pwaPromptMessage">Enter value:</p>
+            <input type="text" class="pwa-modal-input" id="pwaPromptInput" autocomplete="off" spellcheck="false">
+            <div class="pwa-modal-actions">
+                <button class="pwa-modal-btn pwa-modal-cancel" id="pwaPromptCancel">Cancel</button>
+                <button class="pwa-modal-btn pwa-modal-ok" id="pwaPromptOk">Save</button>
+            </div>
+        </div>
+    </div>
+
     <!-- Dependencies -->
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>

static/style.css

@@ -610,6 +610,7 @@ textarea, input, select {
     width: 100%;
     text-align: left;
     font-family: inherit;
+    position: relative;
 }
 
 .overlay-history-main {
@@ -621,38 +622,80 @@ textarea, input, select {
     cursor: pointer;
 }
 
-.overlay-history-actions {
-    display: flex;
-    gap: 4px;
-    flex-shrink: 0;
-    opacity: 0.5;
-    transition: opacity 0.2s;
-}
-
-.overlay-history-item:hover .overlay-history-actions { opacity: 1; }
-
-.overlay-action-btn {
+/* Kebab ⋮ menu trigger — always visible */
+.overlay-kebab-btn {
     background: none;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
-    padding: 4px;
+    padding: 4px 6px;
     border-radius: 6px;
+    font-size: 18px;
+    line-height: 1;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s, color 0.2s;
 }
 
-.overlay-action-btn:hover {
+.overlay-kebab-btn:hover {
     background: var(--bg-hover);
     color: var(--text-primary);
 }
 
-.overlay-action-delete:hover {
+/* Context menu that appears below the kebab */
+.overlay-ctx-menu {
+    display: none;
+    position: absolute;
+    right: 8px;
+    top: calc(100% + 2px);
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
+    z-index: 210;
+    min-width: 140px;
+    overflow: hidden;
+    animation: fadeIn 0.12s ease-out;
+}
+
+.overlay-ctx-menu.show { display: block; }
+
+.overlay-ctx-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 11px 16px;
+    font-size: 14px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    border: none;
+    background: none;
+    width: 100%;
+    font-family: inherit;
+    text-align: left;
+}
+
+.overlay-ctx-option:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.overlay-ctx-option.danger:hover {
     color: #ff4a4a;
 }
 
+.overlay-ctx-option svg {
+    width: 14px;
+    height: 14px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    flex-shrink: 0;
+}
+
 .overlay-history-item:hover,
 .overlay-history-item:active {
     background: var(--bg-hover);
@@ -660,14 +703,10 @@ textarea, input, select {
 }
 
 .overlay-history-item.active {
-    background: rgba(236, 100, 43, 0.08);
+    background: var(--bg-hover);
     color: var(--text-primary);
 }
 
-[data-theme="light"] .overlay-history-item.active {
-    background: rgba(44, 40, 114, 0.08);
-}
-
 .overlay-history-item svg {
     flex-shrink: 0;
     opacity: 0.4;
@@ -1995,6 +2034,96 @@ textarea, input, select {
 .custom-select-option.active { background: var(--brand-glow); color: var(--brand); font-weight: 600; }
 
 
+/* ============================================================
+   PWA MODAL DIALOGS (replaces Chrome confirm/prompt)
+   ============================================================ */
+
+.pwa-modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.55);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+    animation: fadeIn 0.15s ease-out;
+}
+
+.pwa-modal-overlay.show {
+    display: flex;
+}
+
+.pwa-modal {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 24px;
+    width: 90vw;
+    max-width: 340px;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+    animation: fadeIn 0.2s ease-out;
+}
+
+.pwa-modal-message {
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin: 0 0 18px;
+    line-height: 1.5;
+    text-align: center;
+}
+
+.pwa-modal-input {
+    width: 100%;
+    padding: 11px 14px;
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 14px;
+    margin-bottom: 18px;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+}
+
+.pwa-modal-input:focus {
+    border-color: var(--brand);
+}
+
+.pwa-modal-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.pwa-modal-btn {
+    flex: 1;
+    padding: 11px 0;
+    border: none;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s, opacity 0.2s;
+}
+
+.pwa-modal-cancel {
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+}
+
+.pwa-modal-cancel:hover { opacity: 0.8; }
+
+.pwa-modal-ok {
+    background: var(--brand);
+    color: #fff;
+}
+
+.pwa-modal-ok:hover { background: var(--brand-hover); }
+
+
 /* ============================================================
    SIDEBAR OVERLAY (mobile edge-swipe)
    ============================================================ */