Upload 15 files

assets/css/styles.css

@@ -1075,6 +1075,7 @@ body {
 .input-container {
     border-top: 1px solid var(--color-border);
     padding: 16px 24px;
+    padding-bottom: 56px; /* Account for fixed footer */
     background-color: var(--color-surface);
 }
 
@@ -1561,6 +1562,16 @@ body {
     background: var(--color-border-hover);
 }
 
+/* Firefox scrollbar styling */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+}
+
+*:hover {
+    scrollbar-color: var(--color-border-hover) transparent;
+}
+
 /* Collapsible Sidebar Sections */
 .section-collapsible {
     border: 1px solid var(--color-border);
@@ -1626,7 +1637,7 @@ body {
     text-align: center;
     font-size: 12px;
     color: var(--color-text-tertiary);
-    z-index: 100;
+    z-index: 50;
 }
 
 .app-footer a {
@@ -1647,7 +1658,7 @@ body {
 
 /* Adjust main content to account for footer */
 .main-content {
-    padding-bottom: 40px;
+    /* Footer space handled by input-container padding-bottom */
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -1802,3 +1813,133 @@ body {
 .reset-cost-btn:active {
     transform: translateY(0);
 }
+/* ========================================
+   Scroll to Bottom Button
+   ======================================== */
+.scroll-to-bottom-btn {
+    position: absolute;
+    bottom: 100px;
+    right: 24px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: all 0.2s ease;
+    z-index: 20;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.scroll-to-bottom-btn:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.scroll-to-bottom-btn.hidden {
+    opacity: 0;
+    transform: translateY(20px);
+    pointer-events: none;
+}
+
+/* Midnight theme */
+[data-theme="midnight"] .scroll-to-bottom-btn {
+    background: #1a0f28;
+    border-color: #2a1a3d;
+    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2);
+}
+
+[data-theme="midnight"] .scroll-to-bottom-btn:hover {
+    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
+    border-color: #a855f7;
+}
+
+/* ========================================
+   Focus Mode — Hide Sidebar on Desktop
+   ======================================== */
+.focus-mode-btn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 10;
+    display: none; /* Hidden on mobile by default */
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    background-color: var(--color-surface);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.focus-mode-btn:hover {
+    background-color: var(--color-surface-secondary);
+    color: var(--color-text);
+}
+
+.focus-mode-btn .icon-collapse {
+    display: none;
+}
+
+.focus-mode-btn .icon-expand {
+    display: block;
+}
+
+/* When focus mode is active */
+body.focus-mode .focus-mode-btn .icon-expand {
+    display: none;
+}
+
+body.focus-mode .focus-mode-btn .icon-collapse {
+    display: block;
+}
+
+body.focus-mode .focus-mode-btn {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+}
+
+/* Desktop: Show focus button and handle sidebar hiding */
+@media (min-width: 1025px) {
+    .focus-mode-btn {
+        display: flex;
+    }
+
+    body.focus-mode .sidebar {
+        transform: translateX(-100%);
+        position: absolute;
+    }
+
+    body.focus-mode .main-content {
+        margin-left: 0;
+    }
+
+    /* Smooth transition for sidebar */
+    .sidebar {
+        transition: transform 0.3s var(--transition-timing);
+    }
+}
+
+/* Midnight theme focus button */
+[data-theme="midnight"] .focus-mode-btn:hover {
+    background: linear-gradient(135deg, #1a0f28 0%, #2a1a3d 100%);
+    border-color: #a855f7;
+}
+
+[data-theme="midnight"] body.focus-mode .focus-mode-btn {
+    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
+    border-color: #a855f7;
+}

assets/js/script.js

@@ -70,7 +70,10 @@ const elements = {
     presValue: document.getElementById("presValue"),
     autoShowReasoningInput: document.getElementById("autoShowReasoning"),
     contextLimitInput: document.getElementById("contextLimit"),
-    messageCounter: document.getElementById("messageCounter")
+    messageCounter: document.getElementById("messageCounter"),
+    // New UI elements
+    scrollToBottomBtn: document.getElementById("scrollToBottomBtn"),
+    focusModeBtn: document.getElementById("focusModeBtn")
 };
 
 // NOTE: escapeHtml is defined in utils.js - use that global function
@@ -133,6 +136,11 @@ async function importConversation() {
 
 // Load a conversation into the UI (called by onConversationChange callback)
 function loadConversationIntoUI(conversation, messages) {
+    // Reset session cost when switching conversations
+    state.totalCost = 0;
+    state.lastUsage = null;
+    updateTokenCounter(false);
+
     // Clear and load messages
     elements.chatMessages.innerHTML = "";
 
@@ -160,7 +168,7 @@ function loadConversationIntoUI(conversation, messages) {
 
     updateMessageCounter();
 
-    // ONLY place that refreshes conversation list
+    // Refresh conversation list to update active state (single call)
     conversationsUI.refresh();
 
     // Show notification when switching conversations (but not on initial load)
@@ -203,6 +211,7 @@ async function init() {
     updateModelSelection();
     updateReasoningSection();
     checkApiKey();
+    restoreFocusMode(); // Restore focus mode preference
     conversationsUI.init();
     await initializeConversations();
 }
@@ -448,18 +457,102 @@ function setupEventListeners() {
                 sendMessage();
             }
         }
+        // Ctrl/Cmd + B: Toggle focus mode
+        if ((e.ctrlKey || e.metaKey) && e.key === "b") {
+            e.preventDefault();
+            toggleFocusMode();
+        }
+    });
+
+    // Focus mode button
+    if (elements.focusModeBtn) {
+        elements.focusModeBtn.addEventListener("click", toggleFocusMode);
+    }
+
+    // Scroll to bottom button
+    if (elements.scrollToBottomBtn) {
+        elements.scrollToBottomBtn.addEventListener("click", scrollToBottom);
+    }
+
+    // Show/hide scroll-to-bottom button based on scroll position
+    elements.chatMessages.addEventListener("scroll", handleChatScroll);
+
+    // Warn user before closing tab if streaming is in progress
+    window.addEventListener("beforeunload", e => {
+        if (state.isStreaming) {
+            e.preventDefault();
+            e.returnValue = "A response is currently being generated. Are you sure you want to leave?";
+            return e.returnValue;
+        }
     });
 }
 
+// Debounce helper for performance
+let resizeTimeout = null;
+
 // Handle input change
 function handleInputChange() {
-    // Auto-resize textarea
-    elements.messageInput.style.height = "auto";
-    elements.messageInput.style.height = elements.messageInput.scrollHeight + "px";
+    // Debounced auto-resize textarea
+    if (resizeTimeout) clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+        elements.messageInput.style.height = "auto";
+        elements.messageInput.style.height = elements.messageInput.scrollHeight + "px";
+    }, 16); // ~60fps
 
     updateSendButton();
 }
 
+// ========================================
+// Scroll to Bottom & Focus Mode
+// ========================================
+
+// Scroll to bottom of chat
+function scrollToBottom() {
+    elements.chatMessages.scrollTo({
+        top: elements.chatMessages.scrollHeight,
+        behavior: "smooth"
+    });
+}
+
+// Handle chat scroll - show/hide scroll-to-bottom button
+let scrollTimeout = null;
+function handleChatScroll() {
+    if (scrollTimeout) clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(() => {
+        const { scrollTop, scrollHeight, clientHeight } = elements.chatMessages;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+
+        // Show button if user has scrolled up more than 200px from bottom
+        if (elements.scrollToBottomBtn) {
+            if (distanceFromBottom > 200) {
+                elements.scrollToBottomBtn.classList.remove("hidden");
+            } else {
+                elements.scrollToBottomBtn.classList.add("hidden");
+            }
+        }
+    }, 100);
+}
+
+// Toggle focus mode (hide/show sidebar on desktop)
+function toggleFocusMode() {
+    document.body.classList.toggle("focus-mode");
+    const isFocusMode = document.body.classList.contains("focus-mode");
+
+    // Save preference
+    localStorage.setItem("focusMode", isFocusMode ? "true" : "false");
+
+    // Show notification
+    showNotification(isFocusMode ? "Focus mode enabled (Ctrl+B to exit)" : "Focus mode disabled", "info");
+}
+
+// Restore focus mode on load
+function restoreFocusMode() {
+    const savedFocusMode = localStorage.getItem("focusMode");
+    if (savedFocusMode === "true") {
+        document.body.classList.add("focus-mode");
+    }
+}
+
 // Check API key
 function checkApiKey() {
     if (!state.apiKey) {
@@ -790,10 +883,19 @@ function addMessage(role, content, reasoning = null, timestamp = null, messageId
 
 // Delete a message from UI, state, and database
 async function deleteMessage(messageDiv, content, role) {
-    // Find and remove from state.messages
-    const msgIndex = state.messages.findIndex(m => m.role === role && m.content === content);
-    if (msgIndex !== -1) {
-        state.messages.splice(msgIndex, 1);
+    // Get the index of this message in the DOM to find correct state index
+    const allMessages = Array.from(elements.chatMessages.querySelectorAll(".message"));
+    const domIndex = allMessages.indexOf(messageDiv);
+
+    // Find and remove from state.messages using index (more reliable than content matching)
+    if (domIndex !== -1 && domIndex < state.messages.length) {
+        state.messages.splice(domIndex, 1);
+    } else {
+        // Fallback to content matching if index fails
+        const msgIndex = state.messages.findIndex(m => m.role === role && m.content === content);
+        if (msgIndex !== -1) {
+            state.messages.splice(msgIndex, 1);
+        }
     }
 
     // Remove from database if we have a messageId
@@ -985,6 +1087,11 @@ async function regenerateResponse(messageDiv) {
             );
             state.messages.push({ role: "assistant", content: fullContent });
 
+            // Add cost for this regenerated response
+            if (state.lastUsage) {
+                updateTokenCounter(true);
+            }
+
             try {
                 await saveMessageToDB("assistant", fullContent, reasoning);
             } catch (error) {}
@@ -1179,6 +1286,12 @@ function finalizeStreamingMessage(messageDiv, textDiv, contentDiv, content, reas
     footerDiv.innerHTML = `
         <span class="message-time">${timeStr}</span>
         <div class="message-actions">
+            <button class="msg-action-btn" data-action="regenerate" title="Regenerate">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="23 4 23 10 17 10"></polyline>
+                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                </svg>
+            </button>
             <button class="msg-action-btn" data-action="copy" title="Copy">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
@@ -1194,6 +1307,11 @@ function finalizeStreamingMessage(messageDiv, textDiv, contentDiv, content, reas
         </div>
     `;
 
+    // Regenerate button handler
+    footerDiv.querySelector('[data-action="regenerate"]').addEventListener("click", async () => {
+        await regenerateResponse(messageDiv);
+    });
+
     footerDiv.querySelector('[data-action="copy"]').addEventListener("click", () => {
         navigator.clipboard
             .writeText(content)
@@ -1267,10 +1385,10 @@ async function sendMessage() {
             if (chunk.reasoning) {
                 reasoning = chunk.reasoning;
             }
-            // Handle usage stats
+            // Handle usage stats (display only, don't add cost yet)
             if (chunk.usage) {
                 state.lastUsage = chunk.usage;
-                updateTokenCounter();
+                updateTokenCounter(false);
             }
         });
 
@@ -1279,6 +1397,11 @@ async function sendMessage() {
             finalizeStreamingMessage(messageDiv, textDiv, contentDiv, fullContent, reasoning, new Date().toISOString());
             state.messages.push({ role: "assistant", content: fullContent });
 
+            // Now add the cost for this complete response
+            if (state.lastUsage) {
+                updateTokenCounter(true);
+            }
+
             // Save to database
             try {
                 await saveMessageToDB("assistant", fullContent, reasoning);
@@ -1347,15 +1470,19 @@ function updateSendButton() {
 }
 
 // Update token counter display
-function updateTokenCounter() {
+function updateTokenCounter(addCost = false) {
     const sessionCostEl = document.getElementById("sessionCostDisplay");
     const tokenUsageEl = document.getElementById("tokenUsageDisplay");
 
     if (state.lastUsage) {
         const input = state.lastUsage.prompt_tokens || 0;
         const output = state.lastUsage.completion_tokens || 0;
-        const lastCost = calculateCost(state.lastUsage, state.selectedModel);
-        state.totalCost += lastCost;
+
+        // Only add cost when explicitly requested (after a complete response)
+        if (addCost) {
+            const lastCost = calculateCost(state.lastUsage, state.selectedModel);
+            state.totalCost += lastCost;
+        }
 
         const costStr =
             state.totalCost < 0.01 ? `${(state.totalCost * 100).toFixed(2)}¢` : `$${state.totalCost.toFixed(4)}`;

assets/js/utils.js

@@ -147,9 +147,25 @@ function showImportFilePicker() {
                 const text = await file.text();
                 const data = JSON.parse(text);
 
-                // Validate structure
+                // Validate basic structure
                 if (!data.conversation || !data.messages || !Array.isArray(data.messages)) {
-                    throw new Error("Invalid file format");
+                    throw new Error("Invalid file format: missing conversation or messages");
+                }
+
+                // Validate conversation object
+                if (!data.conversation.title || typeof data.conversation.title !== "string") {
+                    throw new Error("Invalid file format: missing or invalid conversation title");
+                }
+
+                // Validate messages structure
+                for (let i = 0; i < data.messages.length; i++) {
+                    const msg = data.messages[i];
+                    if (!msg.role || !msg.content) {
+                        throw new Error(`Invalid message at index ${i}: missing role or content`);
+                    }
+                    if (msg.role !== "user" && msg.role !== "assistant") {
+                        throw new Error(`Invalid message role at index ${i}: must be 'user' or 'assistant'`);
+                    }
                 }
 
                 resolve(data);
@@ -166,6 +182,7 @@ function showImportFilePicker() {
 // Export for use in other scripts
 if (typeof window !== "undefined") {
     window.escapeHtml = escapeHtml;
+    window.wrapTablesForScroll = wrapTablesForScroll;
     window.downloadFile = downloadFile;
     window.sanitizeFilename = sanitizeFilename;
     window.showExportFormatModal = showExportFormatModal;

index.html

@@ -63,17 +63,18 @@
 
                 <!-- New Chat Button -->
                 <div class="section">
-                    <button id="newChatBtn" class="btn-primary w-full">
+                    <button id="newChatBtn" class="btn-primary w-full" aria-label="Start a new chat">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                            stroke-width="2">
+                            stroke-width="2" aria-hidden="true">
                             <line x1="12" y1="5" x2="12" y2="19"></line>
                             <line x1="5" y1="12" x2="19" y2="12"></line>
                         </svg>
                         <span>New Chat</span>
                     </button>
-                    <button id="importConversationBtn" class="btn-secondary w-full" style="margin-top: 8px;">
+                    <button id="importConversationBtn" class="btn-secondary w-full" style="margin-top: 8px;"
+                        aria-label="Import a chat from JSON file">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                            stroke-width="2">
+                            stroke-width="2" aria-hidden="true">
                             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                             <polyline points="17 8 12 3 7 8"></polyline>
                             <line x1="12" y1="3" x2="12" y2="15"></line>
@@ -251,14 +252,34 @@
         <!-- Main Content -->
         <main class="main-content">
             <!-- Toggle Sidebar Button (Mobile) -->
-            <button id="toggleSidebar" class="toggle-sidebar-btn">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <button id="toggleSidebar" class="toggle-sidebar-btn" aria-label="Toggle sidebar">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    aria-hidden="true">
                     <line x1="3" y1="12" x2="21" y2="12"></line>
                     <line x1="3" y1="6" x2="21" y2="6"></line>
                     <line x1="3" y1="18" x2="21" y2="18"></line>
                 </svg>
             </button>
 
+            <!-- Focus Mode Toggle (Desktop) -->
+            <button id="focusModeBtn" class="focus-mode-btn" aria-label="Toggle focus mode"
+                title="Toggle Focus Mode (Ctrl+B)">
+                <svg class="icon-expand" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                    stroke-width="2" aria-hidden="true">
+                    <polyline points="15 3 21 3 21 9"></polyline>
+                    <polyline points="9 21 3 21 3 15"></polyline>
+                    <line x1="21" y1="3" x2="14" y2="10"></line>
+                    <line x1="3" y1="21" x2="10" y2="14"></line>
+                </svg>
+                <svg class="icon-collapse" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                    stroke-width="2" aria-hidden="true">
+                    <polyline points="4 14 10 14 10 20"></polyline>
+                    <polyline points="20 10 14 10 14 4"></polyline>
+                    <line x1="14" y1="10" x2="21" y2="3"></line>
+                    <line x1="3" y1="21" x2="10" y2="14"></line>
+                </svg>
+            </button>
+
             <!-- Chat Container -->
             <div class="chat-container">
                 <div id="chatMessages" class="chat-messages">
@@ -269,14 +290,22 @@
                     </div>
                 </div>
 
+                <!-- Scroll to Bottom Button -->
+                <button id="scrollToBottomBtn" class="scroll-to-bottom-btn hidden" aria-label="Scroll to bottom">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        aria-hidden="true">
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                </button>
+
                 <!-- Input Area -->
                 <div class="input-container">
                     <div class="input-wrapper">
-                        <textarea id="messageInput" class="message-input" placeholder="Type your message..."
-                            rows="2"></textarea>
-                        <button id="sendBtn" class="send-btn">
+                        <textarea id="messageInput" class="message-input" placeholder="Type your message..." rows="2"
+                            aria-label="Message input"></textarea>
+                        <button id="sendBtn" class="send-btn" aria-label="Send message">
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                stroke-width="2">
+                                stroke-width="2" aria-hidden="true">
                                 <line x1="22" y1="2" x2="11" y2="13"></line>
                                 <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                             </svg>