Update app.js

app.js

@@ -51,6 +51,18 @@ const userPlan = document.getElementById('user-plan');
 const upgradeBtn = document.getElementById('upgrade-btn');
 const syncStatus = document.getElementById('sync-status');
 
+// Model Switcher Elements
+const modelSelectBtn = document.getElementById('model-select-btn');
+const modelDropdown = document.getElementById('model-dropdown');
+const currentModelDisplay = document.getElementById('current-model-display');
+const selectOrki = document.getElementById('select-orki');
+const selectOkafwr = document.getElementById('select-okafwr');
+const okafwrLockIcon = document.getElementById('okafwr-lock-icon');
+
+// Quota / Usage Elements
+const usageCountText = document.getElementById('usage-count-text');
+const usageProgressBar = document.getElementById('usage-progress-bar');
+
 // Upgrade Modal Elements
 const upgradeModal = document.getElementById('upgrade-modal');
 const closeUpgrade = document.getElementById('close-upgrade');
@@ -71,82 +83,7 @@ const optRom = document.getElementById('opt-rom');
 const personaInput = document.getElementById('persona-input');
 const saveSettingsBtn = document.getElementById('save-settings');
 
-// Model Selector Elements
-const modelSelectBtn = document.getElementById('model-select-btn');
-const modelDropdown = document.getElementById('model-dropdown');
-const currentModelDisplay = document.getElementById('current-model-display');
-const selectOrki = document.getElementById('select-orki');
-const selectOkafwr = document.getElementById('select-okafwr');
-const okafwrLockIcon = document.getElementById('okafwr-lock-icon');
-
-let selectedModel = 'orki-3.0';
-
-// Auto-expand textarea & handle Enter to submit
-if (input) {
-  input.addEventListener('input', function () {
-    this.style.height = 'auto';
-    this.style.height = Math.min(this.scrollHeight, 112) + 'px';
-  });
-
-  input.addEventListener('keydown', function (e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  });
-}
-
-
-
-// Toggle Dropdown
-if (modelSelectBtn) {
-  modelSelectBtn.onclick = (e) => {
-    e.stopPropagation();
-    modelDropdown.classList.toggle('hidden');
-  };
-}
-
-document.addEventListener('click', () => {
-  if (modelDropdown && !modelDropdown.classList.contains('hidden')) {
-    modelDropdown.classList.add('hidden');
-  }
-});
-
-// Select Orki 3.0
-if (selectOrki) {
-  selectOrki.onclick = () => {
-    selectedModel = 'orki-3.0';
-    currentModelDisplay.textContent = 'Orki 3.0';
-    currentModelDisplay.className = 'text-zinc-200';
-    modelDropdown.classList.add('hidden');
-  };
-}
-
-// Select Okafwr 2.1 (Triggers upgrade modal if not Pro)
-if (selectOkafwr) {
-  selectOkafwr.onclick = () => {
-    if (currentPlan !== 'Pro') {
-      modelDropdown.classList.add('hidden');
-      upgradeModal.classList.remove('hidden');
-      alert("Okafwr 2.1 requires an active Pro subscription.");
-      return;
-    }
-    selectedModel = 'okafwr-2.1';
-    currentModelDisplay.textContent = 'Okafwr 2.1 ⚡';
-    currentModelDisplay.className = 'text-amber-400 font-bold';
-    modelDropdown.classList.add('hidden');
-  };
-}
-
-// Update lock icon when plan state changes
-function updateModelLockUI() {
-  if (okafwrLockIcon) {
-    okafwrLockIcon.textContent = currentPlan === 'Pro' ? '✓' : '🔒';
-    okafwrLockIcon.className = currentPlan === 'Pro' ? 'text-amber-400 text-xs font-bold' : 'text-zinc-500 text-xs';
-  }
-}
-
-
+// State Storage Helpers
 function safeGet(key, fallback) {
   try { return localStorage.getItem(key) || fallback; } catch (e) { return fallback; }
 }
@@ -154,18 +91,32 @@ function safeSet(key, val) {
   try { localStorage.setItem(key, val); } catch (e) {}
 }
 
+function getTodayString() {
+  return new Date().toISOString().split('T')[0];
+}
+
+// App State
 let currentScript = safeGet('arki_script', 'deva');
 let userPersona = safeGet('arki_persona', '');
 let currentUser = null;
 let currentPlan = "Free";
+let selectedModel = 'orki-3.0';
+let currentDailyUsage = 0;
 let isAuthRegister = false;
 let abortController = null;
 let isGenerating = false;
 let currentChatId = null;
 let currentChatMessages = [];
 let selectedCycle = 'monthly';
+let cachedThreads = [];
+
+// Tier Limits & Pricing
+const DAILY_LIMITS = {
+  Free: 10,
+  Plus: 100,
+  Pro: Infinity
+};
 
-// Pricing Matrix
 const PRICING = {
   weekly: { plus: 29, pro: 59, plusPaise: 2900, proPaise: 5900, label: '/wk' },
   monthly: { plus: 99, pro: 199, plusPaise: 9900, proPaise: 19900, label: '/mo' },
@@ -181,8 +132,10 @@ function renderMarkdown(text) {
   return text.replace(/\n/g, '<br>');
 }
 
+// UI State Management
 function setGeneratingState(generating) {
   isGenerating = generating;
+  if (!sendBtn) return;
   if (generating) {
     sendBtn.classList.remove('bg-emerald-600', 'hover:bg-emerald-500');
     sendBtn.classList.add('bg-red-600', 'hover:bg-red-500');
@@ -202,14 +155,53 @@ function setGeneratingState(generating) {
   }
 }
 
+function updateUsageUI() {
+  if (!usageCountText || !usageProgressBar) return;
+  const limit = DAILY_LIMITS[currentPlan] || 10;
+
+  if (limit === Infinity) {
+    usageCountText.textContent = "Unlimited";
+    usageCountText.className = "text-[10px] font-bold text-amber-400";
+    usageProgressBar.style.width = "100%";
+    usageProgressBar.className = "h-full bg-amber-400 rounded-full";
+    return;
+  }
+
+  const pct = Math.min(100, Math.round((currentDailyUsage / limit) * 100));
+  usageCountText.textContent = `${currentDailyUsage} / ${limit}`;
+  usageCountText.className = pct >= 100 ? "text-[10px] font-bold text-red-400" : "text-[10px] font-medium text-zinc-400";
+  usageProgressBar.style.width = `${pct}%`;
+
+  if (pct >= 90) {
+    usageProgressBar.className = "h-full bg-red-500 rounded-full transition-all duration-300";
+  } else if (pct >= 70) {
+    usageProgressBar.className = "h-full bg-amber-500 rounded-full transition-all duration-300";
+  } else {
+    usageProgressBar.className = "h-full bg-emerald-500 rounded-full transition-all duration-300";
+  }
+}
+
+function updateModelLockUI() {
+  if (!okafwrLockIcon) return;
+  if (currentPlan === 'Pro') {
+    okafwrLockIcon.textContent = '✓';
+    okafwrLockIcon.className = 'text-amber-400 text-xs font-bold';
+  } else {
+    okafwrLockIcon.textContent = '🔒';
+    okafwrLockIcon.className = 'text-zinc-500 text-xs';
+  }
+}
+
+// Drawer Controls
 function toggleDrawer(open) {
+  if (!drawer || !drawerBackdrop) return;
   drawer.style.transform = open ? 'translateX(0%)' : 'translateX(-100%)';
   drawerBackdrop.classList.toggle('hidden', !open);
 }
 
-menuBtn.onclick = () => toggleDrawer(true);
-closeDrawer.onclick = () => toggleDrawer(false);
-drawerBackdrop.onclick = () => toggleDrawer(false);
+if (menuBtn) menuBtn.onclick = () => toggleDrawer(true);
+if (closeDrawer) closeDrawer.onclick = () => toggleDrawer(false);
+if (drawerBackdrop) drawerBackdrop.onclick = () => toggleDrawer(false);
 
 function createWelcomeScreen() {
   const div = document.createElement('div');
@@ -226,14 +218,74 @@ function startNewChat() {
   if (isGenerating && abortController) abortController.abort();
   currentChatId = null;
   currentChatMessages = [];
-  chat.innerHTML = '';
-  chat.appendChild(createWelcomeScreen());
+  if (chat) {
+    chat.innerHTML = '';
+    chat.appendChild(createWelcomeScreen());
+  }
   toggleDrawer(false);
   renderHistorySidebar();
 }
 
-newChatBtn.onclick = startNewChat;
+if (newChatBtn) newChatBtn.onclick = startNewChat;
+
+// Model Switcher Logic
+if (modelSelectBtn && modelDropdown) {
+  modelSelectBtn.onclick = (e) => {
+    e.stopPropagation();
+    modelDropdown.classList.toggle('hidden');
+  };
+}
 
+document.addEventListener('click', () => {
+  if (modelDropdown && !modelDropdown.classList.contains('hidden')) {
+    modelDropdown.classList.add('hidden');
+  }
+});
+
+if (selectOrki) {
+  selectOrki.onclick = () => {
+    selectedModel = 'orki-3.0';
+    if (currentModelDisplay) {
+      currentModelDisplay.textContent = 'Orki 3.0';
+      currentModelDisplay.className = 'text-zinc-200';
+    }
+    if (modelDropdown) modelDropdown.classList.add('hidden');
+  };
+}
+
+if (selectOkafwr) {
+  selectOkafwr.onclick = () => {
+    if (currentPlan !== 'Pro') {
+      if (modelDropdown) modelDropdown.classList.add('hidden');
+      if (upgradeModal) upgradeModal.classList.remove('hidden');
+      alert("Okafwr 2.1 requires an active Pro subscription.");
+      return;
+    }
+    selectedModel = 'okafwr-2.1';
+    if (currentModelDisplay) {
+      currentModelDisplay.textContent = 'Okafwr 2.1 ⚡';
+      currentModelDisplay.className = 'text-amber-400 font-bold';
+    }
+    if (modelDropdown) modelDropdown.classList.add('hidden');
+  };
+}
+
+// Textarea Auto-expand & Enter Key Handling
+if (input) {
+  input.addEventListener('input', function () {
+    this.style.height = 'auto';
+    this.style.height = Math.min(this.scrollHeight, 112) + 'px';
+  });
+
+  input.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  });
+}
+
+// Pricing Selector UI
 function updatePricingUI() {
   const p = PRICING[selectedCycle];
   if (plusPriceText) plusPriceText.innerHTML = `₹${p.plus}<span class="text-xs text-zinc-500 font-normal">${p.label}</span>`;
@@ -251,11 +303,13 @@ if (cycleWeekly) cycleWeekly.onclick = () => { selectedCycle = 'weekly'; updateP
 if (cycleMonthly) cycleMonthly.onclick = () => { selectedCycle = 'monthly'; updatePricingUI(); };
 if (cycleYearly) cycleYearly.onclick = () => { selectedCycle = 'yearly'; updatePricingUI(); };
 
-upgradeBtn.onclick = () => {
-  if (!currentUser) return;
-  if (upgradeModal) upgradeModal.classList.remove('hidden');
-  toggleDrawer(false);
-};
+if (upgradeBtn) {
+  upgradeBtn.onclick = () => {
+    if (!currentUser) return;
+    if (upgradeModal) upgradeModal.classList.remove('hidden');
+    toggleDrawer(false);
+  };
+}
 
 if (closeUpgrade) closeUpgrade.onclick = () => upgradeModal.classList.add('hidden');
 
@@ -268,7 +322,7 @@ function initiatePayment(planTier, amountPaise) {
     currency: "INR",
     name: "Orki AI",
     description: `${planTier} Plan (${selectedCycle})`,
-    prefill: { email: currentUser.email, contact: "9999999999" },
+    prefill: { email: currentUser ? currentUser.email : "", contact: "9999999999" },
     theme: { color: planTier === "Pro" ? "#f59e0b" : "#059669" },
     handler: async function (res) {
       try {
@@ -291,6 +345,8 @@ function initiatePayment(planTier, amountPaise) {
         userPlan.className = planTier === "Pro" ? "text-[11px] font-semibold text-amber-400" : "text-[11px] font-semibold text-emerald-400";
         upgradeBtn.textContent = `${planTier} Active`;
         upgradeBtn.disabled = true;
+        updateModelLockUI();
+        updateUsageUI();
         alert(`Success! You are now subscribed to ${planTier} until ${expiresAt.toLocaleDateString()}.`);
       } catch (err) {
         alert("Activation failed: " + err.message);
@@ -306,15 +362,19 @@ if (buyPlusBtn) buyPlusBtn.onclick = () => initiatePayment("Plus", PRICING[selec
 if (buyProBtn) buyProBtn.onclick = () => initiatePayment("Pro", PRICING[selectedCycle].proPaise);
 
 // Settings Controls
-openSettingsBtn.onclick = () => {
-  toggleDrawer(false);
-  personaInput.value = userPersona;
-  updateScriptUI();
-  settingsModal.classList.remove('hidden');
-};
-closeSettingsBtn.onclick = () => settingsModal.classList.add('hidden');
+if (openSettingsBtn) {
+  openSettingsBtn.onclick = () => {
+    toggleDrawer(false);
+    if (personaInput) personaInput.value = userPersona;
+    updateScriptUI();
+    if (settingsModal) settingsModal.classList.remove('hidden');
+  };
+}
+
+if (closeSettingsBtn) closeSettingsBtn.onclick = () => settingsModal.classList.add('hidden');
 
 function updateScriptUI() {
+  if (!optDeva || !optRom) return;
   if (currentScript === 'deva') {
     optDeva.className = "py-2 rounded-lg text-xs font-semibold bg-emerald-600 text-white transition cursor-pointer";
     optRom.className = "py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white transition cursor-pointer";
@@ -324,16 +384,19 @@ function updateScriptUI() {
   }
 }
 
-optDeva.onclick = () => { currentScript = 'deva'; updateScriptUI(); };
-optRom.onclick = () => { currentScript = 'roman'; updateScriptUI(); };
+if (optDeva) optDeva.onclick = () => { currentScript = 'deva'; updateScriptUI(); };
+if (optRom) optRom.onclick = () => { currentScript = 'roman'; updateScriptUI(); };
 
-saveSettingsBtn.onclick = () => {
-  userPersona = personaInput.value.trim();
-  safeSet('arki_script', currentScript);
-  safeSet('arki_persona', userPersona);
-  settingsModal.classList.add('hidden');
-};
+if (saveSettingsBtn) {
+  saveSettingsBtn.onclick = () => {
+    userPersona = personaInput ? personaInput.value.trim() : '';
+    safeSet('arki_script', currentScript);
+    safeSet('arki_persona', userPersona);
+    if (settingsModal) settingsModal.classList.add('hidden');
+  };
+}
 
+// Chat Bubbles (Forced Text Wrapping)
 function createBubbleElement(role) {
   const wrapper = document.createElement('div');
   wrapper.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;
@@ -342,16 +405,17 @@ function createBubbleElement(role) {
     ? 'bg-emerald-600 text-white rounded-2xl rounded-tr-xs px-4 py-2.5 max-w-[85%] text-[15px] whitespace-pre-wrap leading-relaxed shadow-sm break-words [overflow-wrap:anywhere]'
     : 'bg-[#242427] border border-zinc-700/40 text-zinc-100 rounded-2xl rounded-tl-xs px-4 py-2.5 max-w-[85%] text-[15px] shadow-sm leading-relaxed prose-custom break-words [overflow-wrap:anywhere]';
   wrapper.appendChild(bubble);
-  chat.appendChild(wrapper);
-  chat.scrollTop = chat.scrollHeight;
+  if (chat) {
+    chat.appendChild(wrapper);
+    chat.scrollTop = chat.scrollHeight;
+  }
   return bubble;
 }
 
-
 function appendMessage(role, text) {
   const bubble = createBubbleElement(role);
   bubble.innerHTML = role === 'user' ? text : renderMarkdown(text);
-  chat.scrollTop = chat.scrollHeight;
+  if (chat) chat.scrollTop = chat.scrollHeight;
 }
 
 // Audio Recording
@@ -359,10 +423,12 @@ let mediaRecorder = null;
 let audioChunks = [];
 let isRecording = false;
 
-micBtn.onclick = () => {
-  if (isRecording) stopRecording();
-  else startRecording();
-};
+if (micBtn) {
+  micBtn.onclick = () => {
+    if (isRecording) stopRecording();
+    else startRecording();
+  };
+}
 
 async function startRecording() {
   if (isGenerating) return;
@@ -395,8 +461,10 @@ async function startRecording() {
 function stopRecording() {
   if (mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop();
   isRecording = false;
-  micBtn.classList.remove('bg-red-600', 'text-white', 'animate-pulse');
-  micBtn.classList.add('bg-zinc-800', 'text-zinc-300');
+  if (micBtn) {
+    micBtn.classList.remove('bg-red-600', 'text-white', 'animate-pulse');
+    micBtn.classList.add('bg-zinc-800', 'text-zinc-300');
+  }
 }
 
 function blobToBase64(blob) {
@@ -408,8 +476,33 @@ function blobToBase64(blob) {
   });
 }
 
+async function persistUsageIncrement() {
+  currentDailyUsage++;
+  updateUsageUI();
+  const today = getTodayString();
+  if (currentUser && db) {
+    try {
+      await db.collection("users").doc(currentUser.uid).set({
+        dailyUsage: { date: today, count: currentDailyUsage }
+      }, { merge: true });
+    } catch (e) {
+      console.warn("Usage sync error:", e);
+    }
+  } else {
+    safeSet('arki_guest_usage', JSON.stringify({ date: today, count: currentDailyUsage }));
+  }
+}
+
 async function handleAudioSend(audioBlob, mimeType) {
   if (isGenerating) return;
+
+  const limit = DAILY_LIMITS[currentPlan] || 10;
+  if (currentDailyUsage >= limit) {
+    alert(`You reached your daily limit of ${limit} messages. Upgrade to get higher limits.`);
+    if (upgradeModal) upgradeModal.classList.remove('hidden');
+    return;
+  }
+
   const welcome = document.getElementById('welcome-screen');
   if (welcome) welcome.remove();
 
@@ -417,7 +510,7 @@ async function handleAudioSend(audioBlob, mimeType) {
   userBubble.textContent = '🎙️ Transcribing...';
   currentChatMessages.push({ role: 'user', text: '[Voice Note]' });
   setGeneratingState(true);
-  thinking.classList.remove('hidden');
+  if (thinking) thinking.classList.remove('hidden');
 
   const base64Audio = await blobToBase64(audioBlob);
   const scriptConstraint = currentScript === 'roman'
@@ -447,15 +540,16 @@ async function handleAudioSend(audioBlob, mimeType) {
       signal: abortController.signal,
       body: JSON.stringify({
         plan: currentPlan,
+        model: selectedModel,
         script: currentScript,
         userPersona: userPersona,
         contents: apiHistory,
-        generationConfig: { temperature: 0.4, maxOutputTokens: 2000 }
+        generationConfig: { temperature: 0.4, maxOutputTokens: selectedModel === 'okafwr-2.1' ? 4000 : 1500 }
       })
     });
 
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    thinking.classList.add('hidden');
+    if (thinking) thinking.classList.add('hidden');
     const aiBubble = createBubbleElement('model');
     const reader = res.body.getReader();
     const decoder = new TextDecoder('utf-8');
@@ -490,7 +584,7 @@ async function handleAudioSend(audioBlob, mimeType) {
               } else {
                 aiBubble.innerHTML = renderMarkdown(fullAiText);
               }
-              chat.scrollTop = chat.scrollHeight;
+              if (chat) chat.scrollTop = chat.scrollHeight;
             }
           } catch (e) {}
         }
@@ -502,18 +596,20 @@ async function handleAudioSend(audioBlob, mimeType) {
       currentChatMessages[currentChatMessages.length - 1].text = parts[0].replace('TRANSCRIPTION:', '').trim() || '[Voice Note]';
       currentChatMessages.push({ role: 'model', text: parts.slice(1).join('RESPONSE:').trim() });
       await saveCurrentThreadToCloud();
+      await persistUsageIncrement();
     } else if (fullAiText.trim()) {
       currentChatMessages.push({ role: 'model', text: fullAiText.trim() });
       await saveCurrentThreadToCloud();
+      await persistUsageIncrement();
     }
   } catch (err) {
     if (err.name !== 'AbortError') {
-      thinking.classList.add('hidden');
+      if (thinking) thinking.classList.add('hidden');
       userBubble.textContent = '🎙️ [Failed Voice Note]';
       appendMessage('model', `Voice processing error: ${err.message}`);
     }
   } finally {
-    thinking.classList.add('hidden');
+    if (thinking) thinking.classList.add('hidden');
     setGeneratingState(false);
     abortController = null;
   }
@@ -521,25 +617,32 @@ async function handleAudioSend(audioBlob, mimeType) {
 
 // Text Send
 async function handleSend() {
-  
   if (isGenerating) {
     if (abortController) abortController.abort();
     return;
   }
 
-  const userText = input.value.trim();
+  const limit = DAILY_LIMITS[currentPlan] || 10;
+  if (currentDailyUsage >= limit) {
+    alert(`You reached your daily limit of ${limit} messages. Upgrade to get higher limits.`);
+    if (upgradeModal) upgradeModal.classList.remove('hidden');
+    return;
+  }
+
+  const userText = input ? input.value.trim() : '';
   if (!userText) return;
 
   const welcome = document.getElementById('welcome-screen');
   if (welcome) welcome.remove();
-  
-  
+
   appendMessage('user', userText);
   currentChatMessages.push({ role: 'user', text: userText });
+
   input.value = '';
-  input.style.height = 'auto'; // Resets textarea back to a single line
+  input.style.height = 'auto'; // Reset auto-expanded height
+
   setGeneratingState(true);
-  thinking.classList.remove('hidden');
+  if (thinking) thinking.classList.remove('hidden');
 
   const scriptConstraint = currentScript === 'roman'
     ? "\n[Constraint: Reply ONLY in Romanized Bodo ending in 'i' not 'y'. No Devanagari.]"
@@ -560,20 +663,20 @@ async function handleSend() {
       signal: abortController.signal,
       body: JSON.stringify({
         plan: currentPlan,
-        script: currentScript,
         model: selectedModel,
+        script: currentScript,
         userPersona: userPersona,
         contents: apiHistory,
-        generationConfig: { temperature: 0.5, maxOutputTokens: 2000 }
+        generationConfig: { temperature: 0.5, maxOutputTokens: selectedModel === 'okafwr-2.1' ? 4000 : 1500 }
       })
     });
 
     if (!res.ok) {
       const errData = await res.json().catch(() => ({}));
-      throw new Error(errData.error?.message || `HTTP ${res.status}`);
+      throw new Error(errData.error || `HTTP ${res.status}`);
     }
 
-    thinking.classList.add('hidden');
+    if (thinking) thinking.classList.add('hidden');
     const aiBubble = createBubbleElement('model');
     const reader = res.body.getReader();
     const decoder = new TextDecoder('utf-8');
@@ -597,7 +700,7 @@ async function handleSend() {
             if (chunk) {
               fullAiText += chunk;
               aiBubble.innerHTML = renderMarkdown(fullAiText);
-              chat.scrollTop = chat.scrollHeight;
+              if (chat) chat.scrollTop = chat.scrollHeight;
             }
           } catch (e) {}
         }
@@ -607,30 +710,35 @@ async function handleSend() {
     if (fullAiText.trim()) {
       currentChatMessages.push({ role: 'model', text: fullAiText.trim() });
       await saveCurrentThreadToCloud();
+      await persistUsageIncrement();
     }
   } catch (err) {
     if (err.name === 'AbortError') {
       if (fullAiText.trim()) {
         currentChatMessages.push({ role: 'model', text: fullAiText.trim() });
         await saveCurrentThreadToCloud();
+        await persistUsageIncrement();
       }
     } else {
-      thinking.classList.add('hidden');
+      if (thinking) thinking.classList.add('hidden');
       appendMessage('model', err.message.includes('429') ? 'Rate limit hit (5 req/min). 15s नेनानै फिन लिर।' : `Error: ${err.message}`);
     }
   } finally {
-    thinking.classList.add('hidden');
+    if (thinking) thinking.classList.add('hidden');
     setGeneratingState(false);
     abortController = null;
-    input.focus();
+    if (input) input.focus();
   }
 }
 
-form.onsubmit = (e) => { e.preventDefault(); handleSend(); };
+if (form) {
+  form.onsubmit = (e) => {
+    e.preventDefault();
+    handleSend();
+  };
+}
 
 // Cloud Firestore Threads
-let cachedThreads = [];
-
 async function saveCurrentThreadToCloud() {
   if (!currentUser || !db || currentChatMessages.length === 0) return;
   const firstPrompt = currentChatMessages.find(m => m.role === 'user')?.text || "New Conversation";
@@ -670,18 +778,19 @@ async function loadUserThreads(uid) {
 }
 
 function renderHistorySidebar() {
+  if (!historyList) return;
   if (!currentUser) {
     historyList.innerHTML = `<p class="text-zinc-500 px-2 py-2 text-[11px]">Sign in to sync history</p>`;
-    clearAllBtn.classList.add('hidden');
+    if (clearAllBtn) clearAllBtn.classList.add('hidden');
     return;
   }
   if (cachedThreads.length === 0) {
     historyList.innerHTML = `<p class="text-zinc-500 px-2 py-2 text-[11px]">No conversations yet</p>`;
-    clearAllBtn.classList.add('hidden');
+    if (clearAllBtn) clearAllBtn.classList.add('hidden');
     return;
   }
 
-  clearAllBtn.classList.remove('hidden');
+  if (clearAllBtn) clearAllBtn.classList.remove('hidden');
   historyList.innerHTML = '';
 
   cachedThreads.forEach((thread) => {
@@ -725,24 +834,28 @@ function openThread(thread) {
   if (isGenerating && abortController) abortController.abort();
   currentChatId = thread.id;
   currentChatMessages = Array.isArray(thread.messages) ? [...thread.messages] : [];
-  chat.innerHTML = '';
-  if (currentChatMessages.length === 0) chat.appendChild(createWelcomeScreen());
-  else currentChatMessages.forEach(msg => appendMessage(msg.role, msg.text));
+  if (chat) {
+    chat.innerHTML = '';
+    if (currentChatMessages.length === 0) chat.appendChild(createWelcomeScreen());
+    else currentChatMessages.forEach(msg => appendMessage(msg.role, msg.text));
+  }
   renderHistorySidebar();
   toggleDrawer(false);
 }
 
-clearAllBtn.onclick = async () => {
-  if (!currentUser || !db || !confirm("Clear all conversations?")) return;
-  try {
-    const snap = await db.collection("users").doc(currentUser.uid).collection("threads").get();
-    await Promise.all(snap.docs.map(d => d.ref.delete()));
-    startNewChat();
-    await loadUserThreads(currentUser.uid);
-  } catch (err) {
-    console.error("Clear all failed:", err);
-  }
-};
+if (clearAllBtn) {
+  clearAllBtn.onclick = async () => {
+    if (!currentUser || !db || !confirm("Clear all conversations?")) return;
+    try {
+      const snap = await db.collection("users").doc(currentUser.uid).collection("threads").get();
+      await Promise.all(snap.docs.map(d => d.ref.delete()));
+      startNewChat();
+      await loadUserThreads(currentUser.uid);
+    } catch (err) {
+      console.error("Clear all failed:", err);
+    }
+  };
+}
 
 // Firebase Auth & Firestore Initialization
 let auth = null;
@@ -756,11 +869,13 @@ try {
 
     auth.onAuthStateChanged(async (user) => {
       currentUser = user;
+      const today = getTodayString();
+
       if (user) {
-        userDisplay.textContent = user.email.split('@')[0];
-        syncStatus.textContent = "Synced to Cloud";
-        authActionBtn.textContent = "Logout";
-        upgradeBtn.classList.remove('hidden');
+        if (userDisplay) userDisplay.textContent = user.email.split('@')[0];
+        if (syncStatus) syncStatus.textContent = "Synced to Cloud";
+        if (authActionBtn) authActionBtn.textContent = "Logout";
+        if (upgradeBtn) upgradeBtn.classList.remove('hidden');
 
         try {
           const doc = await db.collection("users").doc(user.uid).get();
@@ -775,36 +890,79 @@ try {
             } else {
               currentPlan = data.plan || "Free";
             }
+
+            // Sync daily usage count
+            const usageData = data.dailyUsage || {};
+            if (usageData.date !== today) {
+              currentDailyUsage = 0;
+              await db.collection("users").doc(user.uid).set({
+                dailyUsage: { date: today, count: 0 }
+              }, { merge: true });
+            } else {
+              currentDailyUsage = usageData.count || 0;
+            }
           } else {
             currentPlan = "Free";
+            currentDailyUsage = 0;
           }
         } catch (e) {
           currentPlan = "Free";
+          currentDailyUsage = 0;
         }
 
-        userPlan.textContent = `Plan: ${currentPlan}`;
-        if (currentPlan === "Pro") {
-          userPlan.className = "text-[11px] font-semibold text-amber-400";
-          upgradeBtn.textContent = "Pro Active";
-          upgradeBtn.disabled = true;
-        } else if (currentPlan === "Plus") {
-          userPlan.className = "text-[11px] font-semibold text-emerald-400";
-          upgradeBtn.textContent = "Plus Active";
-          upgradeBtn.disabled = false;
-        } else {
-          userPlan.className = "text-[11px] font-semibold text-emerald-400";
-          upgradeBtn.textContent = "Upgrade";
-          upgradeBtn.disabled = false;
+        if (userPlan) {
+          userPlan.textContent = `Plan: ${currentPlan}`;
+          if (currentPlan === "Pro") {
+            userPlan.className = "text-[11px] font-semibold text-amber-400";
+            if (upgradeBtn) {
+              upgradeBtn.textContent = "Pro Active";
+              upgradeBtn.disabled = true;
+            }
+          } else if (currentPlan === "Plus") {
+            userPlan.className = "text-[11px] font-semibold text-emerald-400";
+            if (upgradeBtn) {
+              upgradeBtn.textContent = "Plus Active";
+              upgradeBtn.disabled = false;
+            }
+          } else {
+            userPlan.className = "text-[11px] font-semibold text-emerald-400";
+            if (upgradeBtn) {
+              upgradeBtn.textContent = "Upgrade";
+              upgradeBtn.disabled = false;
+            }
+          }
         }
 
+        updateModelLockUI();
+        updateUsageUI();
         loadUserThreads(user.uid);
       } else {
-        userDisplay.textContent = "Guest User";
-        syncStatus.textContent = "Local Session";
-        authActionBtn.textContent = "Login";
-        userPlan.textContent = "Plan: Free";
-        userPlan.className = "text-[11px] font-semibold text-emerald-400";
-        upgradeBtn.classList.add('hidden');
+        if (userDisplay) userDisplay.textContent = "Guest User";
+        if (syncStatus) syncStatus.textContent = "Local Session";
+        if (authActionBtn) authActionBtn.textContent = "Login";
+        if (userPlan) {
+          userPlan.textContent = "Plan: Free";
+          userPlan.className = "text-[11px] font-semibold text-emerald-400";
+        }
+        if (upgradeBtn) upgradeBtn.classList.add('hidden');
+
+        // Restore guest usage count
+        try {
+          const guestUsage = JSON.parse(safeGet('arki_guest_usage', 'null')) || {};
+          currentDailyUsage = (guestUsage.date === today) ? (guestUsage.count || 0) : 0;
+        } catch (e) {
+          currentDailyUsage = 0;
+        }
+
+        currentPlan = "Free";
+        selectedModel = 'orki-3.0';
+        if (currentModelDisplay) {
+          currentModelDisplay.textContent = 'Orki 3.0';
+          currentModelDisplay.className = 'text-zinc-200';
+        }
+
+        updateModelLockUI();
+        updateUsageUI();
         cachedThreads = [];
         renderHistorySidebar();
       }
@@ -814,46 +972,62 @@ try {
   console.warn("Firebase restricted:", e);
 }
 
-authActionBtn.onclick = () => {
-  if (currentUser && auth) {
-    auth.signOut();
-  } else {
-    authError.classList.add('hidden');
-    authModal.classList.remove('hidden');
-    toggleDrawer(false);
-  }
-};
-closeAuth.onclick = () => authModal.classList.add('hidden');
+// Auth Actions
+if (authActionBtn) {
+  authActionBtn.onclick = () => {
+    if (currentUser && auth) {
+      auth.signOut();
+    } else {
+      if (authError) authError.classList.add('hidden');
+      if (authModal) authModal.classList.remove('hidden');
+      toggleDrawer(false);
+    }
+  };
+}
 
-authToggleMode.onclick = () => {
-  isAuthRegister = !isAuthRegister;
-  document.getElementById('auth-modal-title').textContent = isAuthRegister ? "Create Account" : "Account Login";
-  authSubmitBtn.textContent = isAuthRegister ? "Register" : "Sign In";
-  authToggleMode.textContent = isAuthRegister ? "Already have an account? Sign In" : "Need an account? Register";
-};
+if (closeAuth) closeAuth.onclick = () => authModal.classList.add('hidden');
 
-authSubmitBtn.onclick = async () => {
-  if (!auth) return;
-  const email = authEmail.value.trim();
-  const pass = authPassword.value.trim();
-  authError.classList.add('hidden');
-  if (!email || pass.length < 6) {
-    authError.textContent = "Valid email & 6+ char password required.";
-    authError.classList.remove('hidden');
-    return;
-  }
-  try {
-    if (isAuthRegister) {
-      await auth.createUserWithEmailAndPassword(email, pass);
-    } else {
-      await auth.signInWithEmailAndPassword(email, pass);
+if (authToggleMode) {
+  authToggleMode.onclick = () => {
+    isAuthRegister = !isAuthRegister;
+    document.getElementById('auth-modal-title').textContent = isAuthRegister ? "Create Account" : "Account Login";
+    authSubmitBtn.textContent = isAuthRegister ? "Register" : "Sign In";
+    authToggleMode.textContent = isAuthRegister ? "Already have an account? Sign In" : "Need an account? Register";
+  };
+}
+
+if (authSubmitBtn) {
+  authSubmitBtn.onclick = async () => {
+    if (!auth) return;
+    const email = authEmail.value.trim();
+    const pass = authPassword.value.trim();
+    if (authError) authError.classList.add('hidden');
+
+    if (!email || pass.length < 6) {
+      if (authError) {
+        authError.textContent = "Valid email & 6+ char password required.";
+        authError.classList.remove('hidden');
+      }
+      return;
     }
-    authModal.classList.add('hidden');
-  } catch (err) {
-    authError.textContent = err.message.replace("Firebase: ", "");
-    authError.classList.remove('hidden');
-  }
-};
 
+    try {
+      if (isAuthRegister) {
+        await auth.createUserWithEmailAndPassword(email, pass);
+      } else {
+        await auth.signInWithEmailAndPassword(email, pass);
+      }
+      if (authModal) authModal.classList.add('hidden');
+    } catch (err) {
+      if (authError) {
+        authError.textContent = err.message.replace("Firebase: ", "");
+        authError.classList.remove('hidden');
+      }
+    }
+  };
+}
+
+// Initial UI Calls
 updateScriptUI();
 updatePricingUI();
+updateUsageUI();