I want you to modify or extend this project with the following features:

---

### 🔐 1. Simple Authentication
- Add a clean, minimal login/register modal using TailwindCSS.
- Users can create an account (username + password) or log in with an existing one.
- When a user logs in successfully, show a welcome message like “Welcome back, <username>”.
- Store the current logged-in user in `localStorage` as `chatRouterUser`.

---

### 💬 2. Chat History Per User
- Each logged-in user should have their own chat history stored in `localStorage` using a key like `chatHistory_<username>`.
- When they log in, their past conversations should load automatically.
- Modify the `addMessage()` function so every message (user + assistant) is saved in that user’s chat history.
- Add a **“New Chat”** button (beside Settings) that clears only the current chat for that user and shows a system message “🆕 New chat started.”

---

### ⚠️ 3. Handle Paid Model Errors Gracefully
- When the selected OpenRouter model requires payment (like Claude or GPT-4), it currently throws a JSON error.
- Instead of showing a raw error, display a friendly message:
> “⚠️ This model requires a paid OpenRouter plan. Please select a free model to continue.”
- Detect this by checking if the error message includes “payment” or “unauthorized”.

---

### 🎨 4. Small UI Touches
- Add a login/logout button in the header.
- When logged out, disable message sending and show a system message “Please log in to start chatting.”
- Keep the theme, settings modal, and layout the same as the original ChatRouter design.

---

### ⚙️ 5. Behavior Summary
- If no user is logged in → show login modal first.
- After login → load their history and enable full chat.
- When a new chat starts → only clear the conversation UI and the stored history for that user.
- On logout → clear only the session (keep users stored).

---

### 🚀 Expected Output
Generate the complete updated `index.html` (or equivalent) with all these features implemented and explained with clean, well-commented code.

Make sure everything runs locally without a backend — just using `localStorage`, TailwindCSS, and JS.

---

### 💡 Important
Do not alter the original API integration logic with OpenRouter or the existing visual style — only extend it with the above features.

index.html

@@ -48,14 +48,50 @@
                 <i data-feather="cpu" class="w-8 h-8 text-indigo-300"></i>
                 <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 to-purple-300">ChatRouter</h1>
             </div>
-            <button id="settingsBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
-                <i data-feather="settings" class="w-5 h-5"></i>
-                <span>Settings</span>
-            </button>
+            <div class="flex items-center space-x-2">
+                <button id="newChatBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
+                    <i data-feather="plus" class="w-5 h-5"></i>
+                    <span>New Chat</span>
+                </button>
+                <button id="settingsBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
+                    <i data-feather="settings" class="w-5 h-5"></i>
+                    <span>Settings</span>
+                </button>
+                <button id="authBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
+                    <i data-feather="user" class="w-5 h-5"></i>
+                    <span>Login</span>
+                </button>
+            </div>
         </header>
+        <!-- Auth Modal -->
+        <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-bold" id="authModalTitle">Login</h2>
+                    <button id="closeAuth" class="text-gray-400 hover:text-white">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+                <div id="authForm" class="space-y-4">
+                    <div id="registerFields" class="hidden">
+                        <label class="block text-sm font-medium mb-1">Username</label>
+                        <input type="text" id="regUsername" placeholder="Choose a username" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1">Password</label>
+                        <input type="password" id="authPassword" placeholder="Enter your password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <button id="authActionBtn" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg transition-colors">Login</button>
+                    <div class="text-center text-sm">
+                        <span id="authToggleText">Don't have an account? </span>
+                        <button id="authToggleBtn" class="text-indigo-400 hover:text-indigo-300">Register</button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <!-- Settings Modal -->
-        <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
             <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
                 <div class="flex justify-between items-center mb-4">
                     <h2 class="text-xl font-bold">Chat Settings</h2>
@@ -133,9 +169,19 @@
 
     <script>
         feather.replace();
-        
         // DOM Elements
-        const settingsBtn = document.getElementById('settingsBtn');
+        const authBtn = document.getElementById('authBtn');
+        const authModal = document.getElementById('authModal');
+        const authModalTitle = document.getElementById('authModalTitle');
+        const closeAuth = document.getElementById('closeAuth');
+        const regUsername = document.getElementById('regUsername');
+        const authPassword = document.getElementById('authPassword');
+        const authActionBtn = document.getElementById('authActionBtn');
+        const authToggleBtn = document.getElementById('authToggleBtn');
+        const authToggleText = document.getElementById('authToggleText');
+        const registerFields = document.getElementById('registerFields');
+        const newChatBtn = document.getElementById('newChatBtn');
+const settingsBtn = document.getElementById('settingsBtn');
         const settingsModal = document.getElementById('settingsModal');
         const closeSettings = document.getElementById('closeSettings');
         const apiKeyInput = document.getElementById('apiKeyInput');
@@ -147,8 +193,84 @@
         const typingIndicator = document.getElementById('typingIndicator');
         const modelIndicator = document.getElementById('modelIndicator');
         const themeBtns = document.querySelectorAll('.theme-btn');
+        // User management
+        let isRegistering = false;
+
+        function updateAuthUI() {
+            const loggedInUser = localStorage.getItem('chatRouterUser');
+            if (loggedInUser) {
+                authBtn.innerHTML = `<i data-feather="log-out" class="w-5 h-5"></i><span>Logout</span>`;
+                authBtn.dataset.state = 'logout';
+                document.querySelector('#newChatBtn').disabled = false;
+                document.querySelector('#settingsBtn').disabled = false;
+                sendBtn.disabled = false;
+            } else {
+                authBtn.innerHTML = `<i data-feather="user" class="w-5 h-5"></i><span>Login</span>`;
+                authBtn.dataset.state = 'login';
+                document.querySelector('#newChatBtn').disabled = true;
+                document.querySelector('#settingsBtn').disabled = true;
+                sendBtn.disabled = true;
+                showAuthModal();
+            }
+            feather.replace();
+        }
+
+        function showAuthModal(register = false) {
+            isRegistering = register;
+            authModalTitle.textContent = register ? 'Register' : 'Login';
+            authActionBtn.textContent = register ? 'Register' : 'Login';
+            authToggleText.textContent = register ? 'Already have an account? ' : 'Don\'t have an account? ';
+            authToggleBtn.textContent = register ? 'Login' : 'Register';
+            registerFields.classList.toggle('hidden', !register);
+            authModal.classList.remove('hidden');
+        }
+
+        function loginUser(username, password) {
+            // Simple auth - store user in localStorage
+            localStorage.setItem('chatRouterUser', username);
+            localStorage.setItem(`chatRouterPass_${username}`, password); // Not secure for production!
+            updateAuthUI();
+            
+            // Load user's chat history
+            loadChatHistory(username);
+            
+            // Show welcome message
+            addMessage('system', `Welcome back, ${username}!`);
+        }
+
+        function logoutUser() {
+            const username = localStorage.getItem('chatRouterUser');
+            localStorage.removeItem('chatRouterUser');
+            updateAuthUI();
+            
+            // Clear current chat
+            chatContainer.innerHTML = '';
+            addMessage('system', 'Please log in to start chatting.');
+        }
+
+        function loadChatHistory(username) {
+            const history = localStorage.getItem(`chatHistory_${username}`);
+            if (history) {
+                chatContainer.innerHTML = history;
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+        }
+
+        function saveChatHistory(username) {
+            localStorage.setItem(`chatHistory_${username}`, chatContainer.innerHTML);
+        }
+
+        function clearCurrentChat() {
+            const username = localStorage.getItem('chatRouterUser');
+            if (username) {
+                chatContainer.innerHTML = '';
+                addMessage('system', '🆕 New chat started.');
+                saveChatHistory(username);
+            }
+        }
+
         // Load saved settings
-        async function loadSettings() {
+async function loadSettings() {
             const savedApiKey = localStorage.getItem('chatRouterApiKey');
             const savedModel = localStorage.getItem('chatRouterModel');
             const savedTheme = localStorage.getItem('chatRouterTheme') || 'indigo';
@@ -279,7 +401,6 @@
             messageInput.style.height = 'auto';
             messageInput.style.height = (messageInput.scrollHeight) + 'px';
         });
-
         // Add message to chat
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
@@ -292,10 +413,25 @@
             messageDiv.appendChild(bubble);
             chatContainer.appendChild(messageDiv);
             chatContainer.scrollTop = chatContainer.scrollHeight;
+
+            // Save to user's chat history
+            const username = localStorage.getItem('chatRouterUser');
+            if (username) {
+                saveChatHistory(username);
+            }
+        }
+        // Handle API errors gracefully
+        function handleApiError(error) {
+            const errorMsg = error.message.toLowerCase();
+            if (errorMsg.includes('payment') || errorMsg.includes('unauthorized')) {
+                addMessage('system', '⚠️ This model requires a paid OpenRouter plan. Please select a free model to continue.');
+            } else {
+                addMessage('system', `Error: ${error.message}`);
+            }
         }
 
         // Send message to OpenRouter
-        async function sendMessage() {
+async function sendMessage() {
             const message = messageInput.value.trim();
             if (!message) return;
             
@@ -342,9 +478,56 @@
                 typingIndicator.classList.add('hidden');
             }
         }
-
         // Event listeners
-        messageInput.addEventListener('keydown', (e) => {
+        authBtn.addEventListener('click', () => {
+            if (authBtn.dataset.state === 'logout') {
+                logoutUser();
+            } else {
+                showAuthModal();
+            }
+        });
+
+        closeAuth.addEventListener('click', () => {
+            authModal.classList.add('hidden');
+        });
+
+        authToggleBtn.addEventListener('click', () => {
+            showAuthModal(!isRegistering);
+        });
+
+        authActionBtn.addEventListener('click', () => {
+            if (isRegistering) {
+                const username = regUsername.value.trim();
+                const password = authPassword.value.trim();
+                
+                if (!username || !password) {
+                    alert('Please enter both username and password');
+                    return;
+                }
+                
+                if (localStorage.getItem(`chatRouterPass_${username}`)) {
+                    alert('Username already exists');
+                    return;
+                }
+                
+                loginUser(username, password);
+            } else {
+                const username = regUsername.value.trim();
+                const password = authPassword.value.trim();
+                const storedPass = localStorage.getItem(`chatRouterPass_${username}`);
+                
+                if (!storedPass || storedPass !== password) {
+                    alert('Invalid username or password');
+                    return;
+                }
+                
+                loginUser(username, password);
+            }
+            authModal.classList.add('hidden');
+        });
+
+        newChatBtn.addEventListener('click', clearCurrentChat);
+messageInput.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 sendMessage();
@@ -352,16 +535,17 @@
         });
 
         sendBtn.addEventListener('click', sendMessage);
-
         // Initialize
         loadSettings();
-
+        updateAuthUI();
         // Welcome message
         setTimeout(() => {
-            if (!localStorage.getItem('chatRouterApiKey')) {
-                addMessage('system', 'Welcome to ChatRouter! Please enter your OpenRouter API key in settings to begin.');
+            if (!localStorage.getItem('chatRouterUser')) {
+                addMessage('system', 'Welcome to ChatRouter! Please log in to start chatting.');
+            } else if (!localStorage.getItem('chatRouterApiKey')) {
+                addMessage('system', 'Please enter your OpenRouter API key in settings to begin.');
             }
         }, 1000);
-    </script>
+</script>
 </body>
 </html>