Upload folder using huggingface_hub

web/app.py

@@ -19,6 +19,14 @@ Prerequisites:
 =============================================================
 """
 
+import os
+import sys
+from pathlib import Path
+
+ROOT_DIR = Path(__file__).resolve().parent.parent
+if str(ROOT_DIR) not in sys.path:
+    sys.path.insert(0, str(ROOT_DIR))
+
 # Import routes module to register all routes
 from routes import pages, auth, health, chat
 

web/js/api.js

@@ -1,17 +1,12 @@
+import { SESSION_ID, quotaInfo } from './state.js';
+
+export { SESSION_ID };
 export const API_BASE = window.location.origin + '/api';
-export const SESSION_ID = 'session_' + Math.random().toString(36).slice(2, 9);
 
 const fingerprintPromise = import('/vendor/fingerprintjs/fp.esm.js').then((FingerprintJS) =>
   FingerprintJS.load({ monitoring: false })
 );
 
-export const quotaInfo = {
-  daily_used: 0,
-  minute_used: 0,
-  daily_limit: 40,
-  minute_limit: 5,
-};
-
 let cachedFingerprint = '';
 
 export function setQuotaFromStatus(data) {

web/js/chat.js

@@ -1,287 +1,36 @@
-import { API_BASE, SESSION_ID, apiFetch, buildApiHeaders, loadAuthStatus, quotaInfo, setQuotaFromStatus } from './api.js';
+import { API_BASE, buildApiHeaders, loadAuthStatus } from './api.js';
+import { SESSION_ID, appState, quotaInfo } from './state.js';
+import {
+  appendMessage,
+  appendTypingIndicator,
+  scrollToBottom,
+  showCongestionNotice,
+  showLimitNotice,
+  showModelFallbackNotice,
+} from './ui.js';
+import { createFeedbackBar } from './feedback.js';
+import { formatText, stripReasoningText } from './utils.js';
 
-const messagesEl = document.getElementById('messages');
 const inputEl = document.getElementById('user-input');
 const sendBtn = document.getElementById('send-btn');
 const charCount = document.getElementById('char-count');
-const noticeLayer = document.getElementById('notice-layer');
-
-let isStreaming = false;
-let lastQuestionIndex = null;
-let limitNoticeVisible = false;
-let congestionNoticeVisible = false;
-const notifiedFallbackModels = new Set();
-
-function scrollToBottom() {
-  if (messagesEl) {
-    messagesEl.scrollTop = messagesEl.scrollHeight;
-  }
-}
 
 function updateQuotaDisplay() {
   const dailyRemaining = Math.max(quotaInfo.daily_limit - quotaInfo.daily_used, 0);
   const minuteRemaining = Math.max(quotaInfo.minute_limit - quotaInfo.minute_used, 0);
 
   if (dailyRemaining <= 10 || minuteRemaining <= 1) {
-    showLimitNotice(dailyRemaining);
-  }
-}
-
-function showLimitNotice(remaining = null) {
-  if (!noticeLayer || limitNoticeVisible) return;
-
-  limitNoticeVisible = true;
-  noticeLayer.innerHTML = '';
-
-  const pill = document.createElement('div');
-  pill.className = 'notice-pill';
-  const countText = Number.isFinite(remaining) ? ` ${remaining} günlük hakkın kaldı.` : '';
-  pill.innerHTML = `
-    <span>Hakkın az kaldı.${countText}</span>
-    <button class="notice-close" type="button" aria-label="Kapat">×</button>
-  `;
-
-  pill.querySelector('.notice-close')?.addEventListener('click', () => {
-    limitNoticeVisible = false;
-    pill.remove();
-  });
-
-  noticeLayer.appendChild(pill);
-}
-
-function showCongestionNotice() {
-  if (!noticeLayer || congestionNoticeVisible) return;
-
-  congestionNoticeVisible = true;
-  const pill = document.createElement('div');
-  pill.className = 'notice-pill';
-  pill.innerHTML = `
-    <span>⚠️ Şu anda yoğunluk var, yanıtlar normalden geç gelebilir.</span>
-    <button class="notice-close" type="button" aria-label="Kapat">×</button>
-  `;
-
-  pill.querySelector('.notice-close')?.addEventListener('click', () => {
-    congestionNoticeVisible = false;
-    pill.remove();
-  });
-
-  noticeLayer.appendChild(pill);
-}
-
-function hideCongestionNotice() {
-  if (!noticeLayer || !congestionNoticeVisible) return;
-
-  congestionNoticeVisible = false;
-  const pills = noticeLayer.querySelectorAll('.notice-pill');
-  pills.forEach((pill) => {
-    if (pill.textContent.includes('yoğunluk')) pill.remove();
-  });
-}
-
-function showModelFallbackNotice(notice) {
-  if (!noticeLayer) return;
-
-  const targetModel = notice?.to_model || 'unknown';
-  if (notifiedFallbackModels.has(targetModel)) return;
-  notifiedFallbackModels.add(targetModel);
-
-  const pill = document.createElement('div');
-  pill.className = 'notice-pill';
-  pill.innerHTML = `
-    <span>Yoğunluk nedeniyle farklı bir model kullanılıyor.</span>
-    <button class="notice-close" type="button" aria-label="Kapat">×</button>
-  `;
-
-  noticeLayer.appendChild(pill);
-}
-
-export function appendMessage(role, text) {
-  document.getElementById('welcome-msg')?.remove();
-
-  const wrap = document.createElement('div');
-  wrap.className = `msg-wrap ${role}`;
-
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble';
-  bubble.innerHTML = formatText(text);
-
-  wrap.appendChild(bubble);
-  messagesEl?.appendChild(wrap);
-  scrollToBottom();
-  return bubble;
-}
-
-function appendTypingIndicator() {
-  document.getElementById('welcome-msg')?.remove();
-
-  const wrap = document.createElement('div');
-  wrap.className = 'msg-wrap bot';
-  wrap.id = 'typing-wrap';
-
-  const indicator = document.createElement('div');
-  indicator.className = 'typing-indicator';
-  indicator.innerHTML = '<span></span><span></span><span></span>';
-
-  wrap.appendChild(indicator);
-  messagesEl?.appendChild(wrap);
-  scrollToBottom();
-  return wrap;
-}
-
-function formatText(text) {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/`(.+?)`/g, '<code>$1</code>')
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
-    .replace(/^#{1,3}\s+(.+)$/gm, '<strong>$1</strong>')
-    .replace(/^[-•]\s+(.+)$/gm, '• $1')
-    .replace(/\n\n/g, '</p><p>')
-    .replace(/\n/g, '<br>')
-    .replace(/^/, '<p>')
-    .replace(/$/, '</p>');
-}
-
-function stripReasoningText(text) {
-  return text
-    .replace(/<think\b[^>]*>[\s\S]*?<\/think>/gi, '')
-    .replace(/<thinking\b[^>]*>[\s\S]*?<\/thinking>/gi, '')
-    .replace(/<think\b[^>]*>[\s\S]*$/gi, '')
-    .replace(/<thinking\b[^>]*>[\s\S]*$/gi, '')
-    .trim();
-}
-
-function sendFeedback(questionIndex, type) {
-  const btns = document.querySelectorAll(`[data-qidx="${questionIndex}"] .fb-btn`);
-  btns.forEach((button) => {
-    const feedbackType = button.dataset.fbType;
-    button.classList.toggle('fb-active', feedbackType === type);
-  });
-
-  fetch(`${API_BASE}/chat/feedback`, {
-    method: 'POST',
-    credentials: 'same-origin',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ question_index: questionIndex, feedback: type }),
-  }).catch(() => {});
-}
-
-function toggleFeedbackBox(questionIndex) {
-  const box = document.querySelector(`[data-qidx="${questionIndex}"] .fb-text-box`);
-  if (!box) return;
-
-  const isVisible = box.style.display === 'flex';
-  box.style.display = isVisible ? 'none' : 'flex';
-
-  if (!isVisible) {
-    const textarea = box.querySelector('textarea');
-    if (textarea) {
-      textarea.value = '';
-      textarea.focus();
-    }
+    showLimitNotice(dailyRemaining, appState);
   }
 }
 
-function submitFeedbackText(questionIndex) {
-  const box = document.querySelector(`[data-qidx="${questionIndex}"] .fb-text-box`);
-  if (!box) return;
-
-  const textarea = box.querySelector('textarea');
-  const text = textarea ? textarea.value.trim() : '';
-  if (!text) {
-    toggleFeedbackBox(questionIndex);
-    return;
-  }
-
-  fetch(`${API_BASE}/chat/feedback`, {
-    method: 'POST',
-    credentials: 'same-origin',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ question_index: questionIndex, feedback_text: text }),
-  }).catch(() => {});
-
-  box.style.display = 'none';
-
-  const bar = box.closest('.fb-bar');
-  if (bar) {
-    const existing = bar.querySelector('.fb-thanks');
-    if (existing) existing.remove();
-
-    const thanks = document.createElement('div');
-    thanks.className = 'fb-thanks';
-    thanks.textContent = 'Geri bildiriminiz için teşekkür ederiz.';
-    bar.appendChild(thanks);
-    setTimeout(() => {
-      thanks.remove();
-    }, 2500);
-  }
-}
-
-function createFeedbackBar(questionIndex) {
-  const bar = document.createElement('div');
-  bar.className = 'fb-bar';
-  bar.dataset.qidx = questionIndex;
-
-  const likeBtn = document.createElement('button');
-  likeBtn.className = 'fb-btn';
-  likeBtn.dataset.fbType = 'like';
-  likeBtn.title = 'Yararlı';
-  likeBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>`;
-  likeBtn.addEventListener('click', () => sendFeedback(questionIndex, 'like'));
-
-  const dislikeBtn = document.createElement('button');
-  dislikeBtn.className = 'fb-btn';
-  dislikeBtn.dataset.fbType = 'dislike';
-  dislikeBtn.title = 'Yanlış veya yetersiz';
-  dislikeBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V7H7.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10zM17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>`;
-  dislikeBtn.addEventListener('click', () => sendFeedback(questionIndex, 'dislike'));
-
-  const chatBtn = document.createElement('button');
-  chatBtn.className = 'fb-btn';
-  chatBtn.title = 'Geri bildirim yaz';
-  chatBtn.innerHTML = `<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>`;
-  chatBtn.addEventListener('click', () => toggleFeedbackBox(questionIndex));
-
-  bar.appendChild(likeBtn);
-  bar.appendChild(dislikeBtn);
-  bar.appendChild(chatBtn);
-
-  const textBox = document.createElement('div');
-  textBox.className = 'fb-text-box';
-  textBox.style.display = 'none';
-  textBox.innerHTML = `
-    <textarea class="fb-textarea" placeholder="Geri bildiriminizi yazın..." rows="2" maxlength="500"></textarea>
-    <div class="fb-text-actions">
-      <button class="fb-text-cancel" type="button">İptal</button>
-      <button class="fb-text-send" type="button">Gönder</button>
-    </div>
-  `;
-
-  textBox.querySelector('.fb-text-send')?.addEventListener('click', () => submitFeedbackText(questionIndex));
-  textBox.querySelector('.fb-text-cancel')?.addEventListener('click', () => {
-    textBox.style.display = 'none';
-  });
-  textBox.querySelector('textarea')?.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      submitFeedbackText(questionIndex);
-    }
-  });
-
-  bar.appendChild(textBox);
-  return bar;
-}
-
 export async function sendMessage() {
   if (!inputEl || !sendBtn || !charCount) return;
 
   const message = inputEl.value.trim();
-  if (!message || isStreaming) return;
+  if (!message || appState.isStreaming) return;
 
-  isStreaming = true;
+  appState.isStreaming = true;
   sendBtn.disabled = true;
   inputEl.value = '';
   inputEl.style.height = 'auto';
@@ -300,7 +49,7 @@ export async function sendMessage() {
 
     if (!response.ok) {
       const data = await response.json().catch(() => ({}));
-      if (data.near_limit) showLimitNotice();
+      if (data.near_limit) showLimitNotice(null, appState);
       const errorType = data.error_type || 'technical';
       const userMsg = errorType === 'quota' ? (data.error || 'Limit aşıldı.') : 'Teknik bir sorun oluştu. Lütfen daha sonra tekrar deneyin.';
       throw new Error(userMsg);
@@ -317,9 +66,12 @@ export async function sendMessage() {
     bubble.innerHTML = '<p></p>';
 
     wrap.appendChild(bubble);
+    const messagesEl = document.getElementById('messages');
     messagesEl?.appendChild(wrap);
 
-    const reader = response.body.getReader();
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error('Akış yanıtı desteklenmiyor.');
+
     const decoder = new TextDecoder();
     let rawText = '';
     let sseBuffer = '';
@@ -346,17 +98,16 @@ export async function sendMessage() {
         }
 
         if (data.congestion) {
-          showCongestionNotice();
+          showCongestionNotice(appState);
         }
 
         if (data.model_fallback) {
-          showModelFallbackNotice(data.model_fallback);
+          showModelFallbackNotice(data.model_fallback, appState);
         }
 
         if (data.done && data.question_index) {
-          lastQuestionIndex = data.question_index;
-          const feedbackBar = createFeedbackBar(lastQuestionIndex);
-          wrap.appendChild(feedbackBar);
+          appState.lastQuestionIndex = data.question_index;
+          wrap.appendChild(createFeedbackBar(appState.lastQuestionIndex));
         }
       } catch {
         // Ignore incomplete or malformed SSE fragments.
@@ -383,7 +134,6 @@ export async function sendMessage() {
 
     if (!sseHadError) {
       await loadAuthStatus();
-      setQuotaFromStatus(quotaInfo);
       updateQuotaDisplay();
     }
   } catch (err) {
@@ -392,7 +142,7 @@ export async function sendMessage() {
     appendMessage('bot', errorText);
   }
 
-  isStreaming = false;
+  appState.isStreaming = false;
   sendBtn.disabled = false;
   inputEl?.focus();
   scrollToBottom();
@@ -438,6 +188,7 @@ export async function clearChat() {
     // Continue silently even if the reset request fails.
   }
 
+  const messagesEl = document.getElementById('messages');
   if (messagesEl) {
     messagesEl.innerHTML = welcomeMarkup(
       'Sohbet sıfırlandı',

web/js/entry-gate.js

@@ -0,0 +1,60 @@
+const ENTRY_ACCEPTED_KEY = 'bal_asistan_entry_accepted_v1';
+
+export function initializeEntryGate() {
+  const gateTabs = document.querySelectorAll('.gate-tab');
+  const gateSections = document.querySelectorAll('.gate-section');
+  const gateAgree = document.getElementById('gate-agree');
+  const gateContinue = document.getElementById('gate-continue');
+  const gateStatus = document.getElementById('gate-status');
+  const inputEl = document.getElementById('user-input');
+
+  const visitedGateTabs = {
+    terms: true,
+    about: false,
+  };
+
+  function openGateTab(tabName) {
+    visitedGateTabs[tabName] = true;
+
+    gateTabs.forEach((tab) => {
+      const isActive = tab.dataset.tab === tabName;
+      tab.classList.toggle('active', isActive);
+      tab.classList.toggle('visited', visitedGateTabs[tab.dataset.tab]);
+      tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+    });
+
+    gateSections.forEach((section) => {
+      section.classList.toggle('active', section.id === `panel-${tabName}`);
+    });
+
+    updateGateContinueState();
+  }
+
+  function updateGateContinueState() {
+    if (!gateAgree || !gateContinue || !gateStatus) return;
+
+    const canContinue = gateAgree.checked;
+    gateContinue.disabled = !canContinue;
+    gateStatus.textContent = canContinue
+      ? 'Hazır. Devam ederek BAL Asistanı açabilirsin.'
+      : 'Devam etmek için onay kutusunu işaretle.';
+  }
+
+  function enterChat() {
+    document.body.classList.remove('gate-active');
+    inputEl?.focus();
+  }
+
+  localStorage.removeItem(ENTRY_ACCEPTED_KEY);
+
+  gateTabs.forEach((tab) => {
+    tab.addEventListener('click', () => openGateTab(tab.dataset.tab));
+  });
+
+  gateAgree?.addEventListener('change', updateGateContinueState);
+  gateContinue?.addEventListener('click', () => {
+    if (!gateContinue.disabled) enterChat();
+  });
+
+  updateGateContinueState();
+}

web/js/feedback.js

@@ -0,0 +1,122 @@
+import { API_BASE } from './api.js';
+
+export function sendFeedback(questionIndex, type) {
+  const btns = document.querySelectorAll(`[data-qidx="${questionIndex}"] .fb-btn`);
+  btns.forEach((button) => {
+    const feedbackType = button.dataset.fbType;
+    button.classList.toggle('fb-active', feedbackType === type);
+  });
+
+  fetch(`${API_BASE}/chat/feedback`, {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ question_index: questionIndex, feedback: type }),
+  }).catch(() => {});
+}
+
+export function toggleFeedbackBox(questionIndex) {
+  const box = document.querySelector(`[data-qidx="${questionIndex}"] .fb-text-box`);
+  if (!box) return;
+
+  const isVisible = box.style.display === 'flex';
+  box.style.display = isVisible ? 'none' : 'flex';
+
+  if (!isVisible) {
+    const textarea = box.querySelector('textarea');
+    if (textarea) {
+      textarea.value = '';
+      textarea.focus();
+    }
+  }
+}
+
+export function submitFeedbackText(questionIndex) {
+  const box = document.querySelector(`[data-qidx="${questionIndex}"] .fb-text-box`);
+  if (!box) return;
+
+  const textarea = box.querySelector('textarea');
+  const text = textarea ? textarea.value.trim() : '';
+  if (!text) {
+    toggleFeedbackBox(questionIndex);
+    return;
+  }
+
+  fetch(`${API_BASE}/chat/feedback`, {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ question_index: questionIndex, feedback_text: text }),
+  }).catch(() => {});
+
+  box.style.display = 'none';
+
+  const bar = box.closest('.fb-bar');
+  if (bar) {
+    const existing = bar.querySelector('.fb-thanks');
+    if (existing) existing.remove();
+
+    const thanks = document.createElement('div');
+    thanks.className = 'fb-thanks';
+    thanks.textContent = 'Geri bildiriminiz için teşekkür ederiz.';
+    bar.appendChild(thanks);
+    setTimeout(() => {
+      thanks.remove();
+    }, 2500);
+  }
+}
+
+export function createFeedbackBar(questionIndex) {
+  const bar = document.createElement('div');
+  bar.className = 'fb-bar';
+  bar.dataset.qidx = questionIndex;
+
+  const likeBtn = document.createElement('button');
+  likeBtn.className = 'fb-btn';
+  likeBtn.dataset.fbType = 'like';
+  likeBtn.title = 'Yararlı';
+  likeBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>`;
+  likeBtn.addEventListener('click', () => sendFeedback(questionIndex, 'like'));
+
+  const dislikeBtn = document.createElement('button');
+  dislikeBtn.className = 'fb-btn';
+  dislikeBtn.dataset.fbType = 'dislike';
+  dislikeBtn.title = 'Yanlış veya yetersiz';
+  dislikeBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V7H7.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10zM17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>`;
+  dislikeBtn.addEventListener('click', () => sendFeedback(questionIndex, 'dislike'));
+
+  const chatBtn = document.createElement('button');
+  chatBtn.className = 'fb-btn';
+  chatBtn.title = 'Geri bildirim yaz';
+  chatBtn.innerHTML = `<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>`;
+  chatBtn.addEventListener('click', () => toggleFeedbackBox(questionIndex));
+
+  bar.appendChild(likeBtn);
+  bar.appendChild(dislikeBtn);
+  bar.appendChild(chatBtn);
+
+  const textBox = document.createElement('div');
+  textBox.className = 'fb-text-box';
+  textBox.style.display = 'none';
+  textBox.innerHTML = `
+    <textarea class="fb-textarea" placeholder="Geri bildiriminizi yazın..." rows="2" maxlength="500"></textarea>
+    <div class="fb-text-actions">
+      <button class="fb-text-cancel" type="button">İptal</button>
+      <button class="fb-text-send" type="button">Gönder</button>
+    </div>
+  `;
+
+  textBox.querySelector('.fb-text-send')?.addEventListener('click', () => submitFeedbackText(questionIndex));
+  textBox.querySelector('.fb-text-cancel')?.addEventListener('click', () => {
+    textBox.style.display = 'none';
+  });
+  textBox.querySelector('textarea')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      submitFeedbackText(questionIndex);
+    }
+  });
+
+  bar.appendChild(textBox);
+  return bar;
+}

web/js/main.js

@@ -1,68 +1,9 @@
 import { checkHealth, loadAuthStatus } from './api.js';
 import { clearChat, initializeChatApp, sendMessage, sendSuggestion } from './chat.js';
-
-const ENTRY_ACCEPTED_KEY = 'bal_asistan_entry_accepted_v1';
-const gateTabs = document.querySelectorAll('.gate-tab');
-const gateSections = document.querySelectorAll('.gate-section');
-const gateAgree = document.getElementById('gate-agree');
-const gateContinue = document.getElementById('gate-continue');
-const gateStatus = document.getElementById('gate-status');
-const inputEl = document.getElementById('user-input');
-
-const visitedGateTabs = {
-  terms: true,
-  about: false,
-};
-
-function openGateTab(tabName) {
-  visitedGateTabs[tabName] = true;
-
-  gateTabs.forEach((tab) => {
-    const isActive = tab.dataset.tab === tabName;
-    tab.classList.toggle('active', isActive);
-    tab.classList.toggle('visited', visitedGateTabs[tab.dataset.tab]);
-    tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
-  });
-
-  gateSections.forEach((section) => {
-    section.classList.toggle('active', section.id === `panel-${tabName}`);
-  });
-
-  updateGateContinueState();
-}
-
-function updateGateContinueState() {
-  if (!gateAgree || !gateContinue || !gateStatus) return;
-
-  const canContinue = gateAgree.checked;
-  gateContinue.disabled = !canContinue;
-  gateStatus.textContent = canContinue
-    ? 'Hazır. Devam ederek BAL Asistanı açabilirsin.'
-    : 'Devam etmek için onay kutusunu işaretle.';
-}
-
-function enterChat() {
-  document.body.classList.remove('gate-active');
-  inputEl?.focus();
-}
-
-function initEntryGate() {
-  localStorage.removeItem(ENTRY_ACCEPTED_KEY);
-
-  gateTabs.forEach((tab) => {
-    tab.addEventListener('click', () => openGateTab(tab.dataset.tab));
-  });
-
-  gateAgree?.addEventListener('change', updateGateContinueState);
-  gateContinue?.addEventListener('click', () => {
-    if (!gateContinue.disabled) enterChat();
-  });
-
-  updateGateContinueState();
-}
+import { initializeEntryGate } from './entry-gate.js';
 
 function bootstrap() {
-  initEntryGate();
+  initializeEntryGate();
   initializeChatApp();
 
   window.sendSuggestion = sendSuggestion;

web/js/state.js

@@ -0,0 +1,16 @@
+export const SESSION_ID = 'session_' + Math.random().toString(36).slice(2, 9);
+
+export const quotaInfo = {
+  daily_used: 0,
+  minute_used: 0,
+  daily_limit: 40,
+  minute_limit: 5,
+};
+
+export const appState = {
+  isStreaming: false,
+  lastQuestionIndex: null,
+  limitNoticeVisible: false,
+  congestionNoticeVisible: false,
+  notifiedFallbackModels: new Set(),
+};

web/js/ui.js

@@ -0,0 +1,111 @@
+import { formatText } from './utils.js';
+
+const messagesEl = document.getElementById('messages');
+const noticeLayer = document.getElementById('notice-layer');
+
+export function scrollToBottom() {
+  if (messagesEl) {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  }
+}
+
+export function appendMessage(role, text) {
+  document.getElementById('welcome-msg')?.remove();
+
+  const wrap = document.createElement('div');
+  wrap.className = `msg-wrap ${role}`;
+
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble';
+  bubble.innerHTML = formatText(text);
+
+  wrap.appendChild(bubble);
+  messagesEl?.appendChild(wrap);
+  scrollToBottom();
+  return bubble;
+}
+
+export function appendTypingIndicator() {
+  document.getElementById('welcome-msg')?.remove();
+
+  const wrap = document.createElement('div');
+  wrap.className = 'msg-wrap bot';
+  wrap.id = 'typing-wrap';
+
+  const indicator = document.createElement('div');
+  indicator.className = 'typing-indicator';
+  indicator.innerHTML = '<span></span><span></span><span></span>';
+
+  wrap.appendChild(indicator);
+  messagesEl?.appendChild(wrap);
+  scrollToBottom();
+  return wrap;
+}
+
+export function showLimitNotice(remaining = null, stateRef) {
+  if (!noticeLayer || stateRef.limitNoticeVisible) return;
+
+  stateRef.limitNoticeVisible = true;
+  noticeLayer.innerHTML = '';
+
+  const pill = document.createElement('div');
+  pill.className = 'notice-pill';
+  const countText = Number.isFinite(remaining) ? ` ${remaining} günlük hakkın kaldı.` : '';
+  pill.innerHTML = `
+    <span>Hakkın az kaldı.${countText}</span>
+    <button class="notice-close" type="button" aria-label="Kapat">×</button>
+  `;
+
+  pill.querySelector('.notice-close')?.addEventListener('click', () => {
+    stateRef.limitNoticeVisible = false;
+    pill.remove();
+  });
+
+  noticeLayer.appendChild(pill);
+}
+
+export function showCongestionNotice(stateRef) {
+  if (!noticeLayer || stateRef.congestionNoticeVisible) return;
+
+  stateRef.congestionNoticeVisible = true;
+  const pill = document.createElement('div');
+  pill.className = 'notice-pill';
+  pill.innerHTML = `
+    <span>⚠️ Şu anda yoğunluk var, yanıtlar normalden geç gelebilir.</span>
+    <button class="notice-close" type="button" aria-label="Kapat">×</button>
+  `;
+
+  pill.querySelector('.notice-close')?.addEventListener('click', () => {
+    stateRef.congestionNoticeVisible = false;
+    pill.remove();
+  });
+
+  noticeLayer.appendChild(pill);
+}
+
+export function hideCongestionNotice(stateRef) {
+  if (!noticeLayer || !stateRef.congestionNoticeVisible) return;
+
+  stateRef.congestionNoticeVisible = false;
+  const pills = noticeLayer.querySelectorAll('.notice-pill');
+  pills.forEach((pill) => {
+    if (pill.textContent.includes('yoğunluk')) pill.remove();
+  });
+}
+
+export function showModelFallbackNotice(notice, stateRef) {
+  if (!noticeLayer) return;
+
+  const targetModel = notice?.to_model || 'unknown';
+  if (stateRef.notifiedFallbackModels.has(targetModel)) return;
+  stateRef.notifiedFallbackModels.add(targetModel);
+
+  const pill = document.createElement('div');
+  pill.className = 'notice-pill';
+  pill.innerHTML = `
+    <span>Yoğunluk nedeniyle farklı bir model kullanılıyor.</span>
+    <button class="notice-close" type="button" aria-label="Kapat">×</button>
+  `;
+
+  noticeLayer.appendChild(pill);
+}

web/js/utils.js

@@ -0,0 +1,25 @@
+export function formatText(text) {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/`(.+?)`/g, '<code>$1</code>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
+    .replace(/^#{1,3}\s+(.+)$/gm, '<strong>$1</strong>')
+    .replace(/^[-•]\s+(.+)$/gm, '• $1')
+    .replace(/\n\n/g, '</p><p>')
+    .replace(/\n/g, '<br>')
+    .replace(/^/, '<p>')
+    .replace(/$/, '</p>');
+}
+
+export function stripReasoningText(text) {
+  return text
+    .replace(/<think\b[^>]*>[\s\S]*?<\/think>/gi, '')
+    .replace(/<thinking\b[^>]*>[\s\S]*?<\/thinking>/gi, '')
+    .replace(/<think\b[^>]*>[\s\S]*$/gi, '')
+    .replace(/<thinking\b[^>]*>[\s\S]*$/gi, '')
+    .trim();
+}