Upload 8 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/icon.png filter=lfs diff=lfs merge=lfs -text
+static/orbit.png filter=lfs diff=lfs merge=lfs -text

static/js/script.js

@@ -0,0 +1,642 @@
+/**
+ * ORBIT – SaaS Client Logic
+ * Settings & API key live on the server (DB-backed).
+ * Chat sessions stored in localStorage, keyed per user.
+ */
+
+// ─────────────────────────────────────
+// Constants
+// ─────────────────────────────────────
+const PROVIDER_URLS = {
+  "OpenRouter":    "https://openrouter.ai/api/v1/chat/completions",
+  "Nvidia NIM":    "https://integrate.api.nvidia.com/v1/chat/completions",
+  "Google Gemini": "https://generativelanguage.googleapis.com/v1beta/models/",
+  "AgentRouter":   "https://agentrouter.org/v1/chat/completions",
+  "Custom OpenAI": "https://api.openai.com/v1/chat/completions",
+};
+
+// ─────────────────────────────────────
+// State
+// ─────────────────────────────────────
+let currentUser  = null;
+let appSettings  = null;
+let sessions     = {};
+let currentSid   = null;
+let attachment   = null;   // { text, filename, wordCount }
+let isBusy       = false;
+let sessionsKey  = "orbit_sessions";
+
+// ─────────────────────────────────────
+// DOM
+// ─────────────────────────────────────
+const $ = id => document.getElementById(id);
+const chatMessages  = $("chat-messages");
+const chatTextarea  = $("chat-textarea");
+const btnSend       = $("btn-send");
+const sendIcon      = $("send-icon");
+const loadingIcon   = $("loading-icon");
+const welcomeScreen = $("welcome-screen");
+const attachBadge   = $("attach-badge");
+const attachNameEl  = $("attach-name");
+const modelSelect   = $("model-select");
+const historyList   = $("history-list");
+const chatTitle     = $("chat-title");
+
+// ─────────────────────────────────────
+// LocalStorage
+// ─────────────────────────────────────
+function saveSessions() {
+  try { localStorage.setItem(sessionsKey, JSON.stringify(sessions)); } catch (_) {}
+}
+function loadSessions() {
+  try { sessions = JSON.parse(localStorage.getItem(sessionsKey) || "{}"); }
+  catch (_) { sessions = {}; }
+}
+
+// ─────────────────────────────────────
+// Session Management
+// ─────────────────────────────────────
+function newSession() {
+  const id = String(Date.now());
+  sessions[id] = { title: "New Chat", messages: [] };
+  currentSid   = id;
+  saveSessions();
+  return id;
+}
+function getMessages() {
+  if (!currentSid || !sessions[currentSid]) newSession();
+  return sessions[currentSid].messages;
+}
+function appendMessage(role, content) {
+  const msgs = getMessages();
+  msgs.push({ role, content });
+  if (role === "user" && msgs.filter(m => m.role === "user").length === 1) {
+    sessions[currentSid].title = content.split(" ").slice(0, 7).join(" ") + "…";
+    chatTitle.textContent = sessions[currentSid].title;
+    renderSidebar();
+  }
+  saveSessions();
+}
+
+// ─────────────────────────────────────
+// Sidebar
+// ─────────────────────────────────────
+function renderSidebar() {
+  historyList.innerHTML = "";
+  const entries = Object.entries(sessions).sort(([a], [b]) => Number(b) - Number(a));
+  entries.forEach(([id, s]) => {
+    const btn = document.createElement("button");
+    const isActive = id === currentSid;
+    btn.className = `sidebar-item w-full text-left px-3 py-2 rounded-xl text-xs truncate transition-all ${
+      isActive
+        ? "bg-accent-light text-accent font-semibold"
+        : "text-gray-600 hover:bg-white hover:shadow-sm font-medium"
+    }`;
+    btn.textContent = s.title || "New Chat";
+    btn.addEventListener("click", () => loadSession(id));
+    historyList.appendChild(btn);
+  });
+}
+
+function loadSession(id) {
+  currentSid = id;
+  clearChatView();
+  const msgs = sessions[id]?.messages || [];
+  if (msgs.length) {
+    hideWelcome();
+    msgs.forEach(m => renderBubble(m.role, m.content, false));
+    scrollBottom();
+  } else {
+    showWelcome();
+  }
+  chatTitle.textContent = sessions[id]?.title || "New Chat";
+  renderSidebar();
+}
+
+// ─────────────────────────────────────
+// Model Dropdown — Dynamic by Provider
+// ─────────────────────────────────────
+function populateModelSelect() {
+  if (!appSettings) return;
+  const list = appSettings.provider === "Nvidia NIM"
+    ? (appSettings.models_nvidia || [])
+    : (appSettings.models_openrouter || []);
+
+  modelSelect.innerHTML = "";
+  list.forEach(m => {
+    const opt = document.createElement("option");
+    opt.value = m;
+    opt.textContent = m.length > 30 ? m.slice(0, 28) + "…" : m;
+    if (m === appSettings.current_model) opt.selected = true;
+    modelSelect.appendChild(opt);
+  });
+  // fallback: if current_model not in list, select first
+  if (modelSelect.options.length && !modelSelect.value) {
+    modelSelect.selectedIndex = 0;
+  }
+}
+
+modelSelect.addEventListener("change", async () => {
+  if (!appSettings) return;
+  appSettings.current_model = modelSelect.value;
+  try {
+    await fetch("/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ current_model: modelSelect.value }),
+    });
+  } catch (_) {}
+});
+
+// ─────────────────────────────────────
+// Chat UI Helpers
+// ─────────────────────────────────────
+function showWelcome() {
+  welcomeScreen.style.display = "";
+  welcomeScreen.style.opacity = "1";
+}
+function hideWelcome() {
+  welcomeScreen.style.display = "none";
+}
+function clearChatView() {
+  chatMessages.innerHTML = "";
+}
+function scrollBottom() {
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function simpleMarkdown(text) {
+  let h = text
+    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  // code blocks
+  h = h.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, c) =>
+    `<pre><code>${c.trim()}</code></pre>`);
+  // inline code
+  h = h.replace(/`([^`\n]+)`/g, "<code>$1</code>");
+  // bold / italic
+  h = h.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
+  h = h.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  h = h.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  // headings
+  h = h.replace(/^### (.+)$/gm, "<h3>$1</h3>");
+  h = h.replace(/^## (.+)$/gm,  "<h2>$1</h2>");
+  h = h.replace(/^# (.+)$/gm,   "<h1>$1</h1>");
+  // blockquote
+  h = h.replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>");
+  // lists
+  h = h.replace(/^\s*[-*] (.+)/gm, "<li>$1</li>");
+  h = h.replace(/(<li>.*<\/li>\n?)+/g, m => `<ul>${m}</ul>`);
+  // paragraphs
+  h = h.split(/\n{2,}/).map(p =>
+    /^<(h[1-3]|ul|li|pre|blockquote)/.test(p.trim())
+      ? p : `<p>${p.replace(/\n/g, "<br>")}</p>`
+  ).join("\n");
+  return h;
+}
+
+function renderBubble(role, content, animate = true) {
+  const isUser = role === "user";
+  const wrap = document.createElement("div");
+  wrap.className = `flex ${isUser ? "justify-end" : "justify-start"} px-4 md:px-16 py-2${animate ? " " + (isUser ? "bubble-user" : "bubble-ai") : ""}`;
+
+  const col = document.createElement("div");
+  col.className = isUser ? "flex flex-col items-end" : "flex flex-col items-start";
+
+  const label = document.createElement("p");
+  label.className = `text-[10px] font-semibold mb-1 ${isUser ? "text-accent text-right" : "text-gray-400"}`;
+  label.textContent = isUser ? "You" : "ORBIT";
+
+  const bub = document.createElement("div");
+  bub.className = isUser
+    ? "max-w-xl bg-accent-light text-gray-800 rounded-2xl rounded-br-sm px-4 py-2.5 text-sm leading-relaxed"
+    : "max-w-2xl bg-[#F8F9FA] text-gray-800 rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm prose-orbit";
+
+  if (isUser) bub.textContent = content;
+  else bub.innerHTML = simpleMarkdown(content);
+
+  col.appendChild(label);
+  col.appendChild(bub);
+  wrap.appendChild(col);
+  chatMessages.appendChild(wrap);
+  if (animate) scrollBottom();
+}
+
+function renderTyping() {
+  const w = document.createElement("div");
+  w.id = "typing-indicator";
+  w.className = "flex justify-start px-4 md:px-16 py-2 bubble-ai";
+  w.innerHTML = `<div class="bg-[#F8F9FA] rounded-2xl rounded-bl-sm px-4 py-3 flex items-center gap-1.5">
+    <span class="typing-dot w-2 h-2 rounded-full bg-gray-400 inline-block"></span>
+    <span class="typing-dot w-2 h-2 rounded-full bg-gray-400 inline-block"></span>
+    <span class="typing-dot w-2 h-2 rounded-full bg-gray-400 inline-block"></span>
+  </div>`;
+  chatMessages.appendChild(w);
+  scrollBottom();
+}
+function removeTyping() {
+  const e = $("typing-indicator");
+  if (e) e.remove();
+}
+
+function renderSys(text, isErr = false) {
+  const d = document.createElement("div");
+  d.className = "flex justify-center px-4 py-2";
+  d.innerHTML = `<span class="text-[11px] px-3 py-1.5 rounded-full ${
+    isErr ? "bg-red-50 text-red-500" : "bg-gray-100 text-gray-500"
+  }">${text}</span>`;
+  chatMessages.appendChild(d);
+  scrollBottom();
+}
+
+// ─────────────────────────────────────
+// Busy State
+// ─────────────────────────────────────
+function setBusy(busy) {
+  isBusy = busy;
+  btnSend.disabled      = busy;
+  chatTextarea.disabled = busy;
+  sendIcon.classList.toggle("hidden", busy);
+  loadingIcon.classList.toggle("hidden", !busy);
+}
+
+// ─────────────────────────────────────
+// Send Chat
+// ─────────────────────────────────────
+async function sendChat() {
+  if (isBusy) return;
+  const raw = chatTextarea.value.trim();
+  if (!raw) return;
+
+  let fullPrompt = raw;
+  if (attachment) {
+    fullPrompt = `Document Context:\n${attachment.text}\n\nUser Question: ${raw}`;
+    clearAttachment();
+  }
+
+  chatTextarea.value = "";
+  autoResize();
+  hideWelcome();
+  setBusy(true);
+
+  renderBubble("user", raw);
+  appendMessage("user", fullPrompt);
+  renderTyping();
+
+  try {
+    const res  = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        prompt:   fullPrompt,
+        model:    modelSelect.value || appSettings?.current_model || "",
+        messages: getMessages().slice(0, -1),
+      }),
+    });
+    const data = await res.json();
+    removeTyping();
+    if (!res.ok || data.error) {
+      renderSys(data.error || "Unknown error.", true);
+    } else {
+      renderBubble("assistant", data.reply);
+      appendMessage("assistant", data.reply);
+    }
+  } catch (err) {
+    removeTyping();
+    renderSys(`Network error: ${err.message}`, true);
+  } finally {
+    setBusy(false);
+    chatTextarea.focus();
+  }
+}
+
+// ─────────────────────────────────────
+// Textarea Auto-resize
+// ─────────────────────────────────────
+function autoResize() {
+  chatTextarea.style.height = "auto";
+  chatTextarea.style.height = Math.min(chatTextarea.scrollHeight, 160) + "px";
+}
+chatTextarea.addEventListener("input", autoResize);
+chatTextarea.addEventListener("keydown", e => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
+});
+btnSend.addEventListener("click", sendChat);
+
+// ─────────────────────────────────────
+// PDF Attachment
+// ─────────────────────────────────────
+function clearAttachment() {
+  attachment = null;
+  attachBadge.classList.add("hidden");
+  attachNameEl.textContent = "";
+}
+
+$("btn-attach").addEventListener("click", () => $("pdf-input").click());
+$("btn-remove-attach").addEventListener("click", clearAttachment);
+
+$("pdf-input").addEventListener("change", async e => {
+  const file = e.target.files[0];
+  if (!file) return;
+  e.target.value = "";
+  if (!file.name.toLowerCase().endsWith(".pdf")) {
+    renderSys("Only PDF files are supported.", true);
+    return;
+  }
+  const fd = new FormData();
+  fd.append("file", file);
+  renderSys(`Uploading "${file.name}"…`);
+  try {
+    const res  = await fetch("/api/upload_pdf", { method: "POST", body: fd });
+    const data = await res.json();
+    if (!res.ok || data.error) { renderSys(data.error, true); return; }
+    attachment = { text: data.text, filename: data.filename, wordCount: data.word_count };
+    attachNameEl.textContent = `${data.filename} · ${data.word_count} words`;
+    attachBadge.classList.remove("hidden");
+    renderSys(`"${data.filename}" attached — ${data.word_count} words extracted.`);
+  } catch (err) {
+    renderSys(`Upload failed: ${err.message}`, true);
+  }
+});
+
+// ─────────────────────────────────────
+// DOI Modal
+// ─────────────────────────────────────
+$("btn-doi").addEventListener("click", () => {
+  $("doi-modal").classList.remove("hidden");
+  $("doi-input").focus();
+});
+$("btn-close-doi").addEventListener("click", () => $("doi-modal").classList.add("hidden"));
+$("doi-modal").addEventListener("click", e => {
+  if (e.target === $("doi-modal")) $("doi-modal").classList.add("hidden");
+});
+$("doi-input").addEventListener("keydown", e => {
+  if (e.key === "Enter") $("btn-validate-doi").click();
+});
+
+$("btn-validate-doi").addEventListener("click", async () => {
+  const doi = $("doi-input").value.trim();
+  if (!doi) return;
+  $("doi-spinner").classList.remove("hidden");
+  $("doi-btn-text").textContent = "Validating…";
+  $("btn-validate-doi").disabled = true;
+  $("doi-result").classList.add("hidden");
+
+  try {
+    const res  = await fetch("/api/validate_doi", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ doi }),
+    });
+    const data = await res.json();
+    $("doi-result").classList.remove("hidden");
+    if (!res.ok || data.error) {
+      $("doi-result").innerHTML = `<p class="text-red-500">${data.error}</p>`;
+    } else {
+      $("doi-result").innerHTML = `
+        <div class="space-y-2">
+          <div><p class="text-[10px] font-semibold text-gray-400 uppercase">Title</p>
+               <p class="font-medium text-gray-800 text-sm">${data.title}</p></div>
+          <div><p class="text-[10px] font-semibold text-gray-400 uppercase">Authors</p>
+               <p class="text-sm text-gray-700">${data.authors}</p></div>
+          <div class="flex gap-6">
+            <div><p class="text-[10px] font-semibold text-gray-400 uppercase">Year</p>
+                 <p class="text-sm text-gray-700">${data.year}</p></div>
+            <div><p class="text-[10px] font-semibold text-gray-400 uppercase">Type</p>
+                 <p class="text-sm text-gray-700">${data.type}</p></div>
+          </div>
+          <div><p class="text-[10px] font-semibold text-gray-400 uppercase">Source</p>
+               <p class="text-sm text-gray-700">${data.journal}</p></div>
+          <div><p class="text-[10px] font-semibold text-gray-400 uppercase">DOI</p>
+               <p><a href="https://doi.org/${data.doi}" target="_blank" class="text-accent hover:underline text-sm">${data.doi}</a></p></div>
+        </div>`;
+      renderSys(`DOI validated: ${data.title} (${data.year})`);
+    }
+  } catch (err) {
+    $("doi-result").classList.remove("hidden");
+    $("doi-result").innerHTML = `<p class="text-red-500">${err.message}</p>`;
+  } finally {
+    $("doi-spinner").classList.add("hidden");
+    $("doi-btn-text").textContent = "Validate";
+    $("btn-validate-doi").disabled = false;
+  }
+});
+
+// ─────────────────────────────────────
+// Settings Modal
+// ─────────────────────────────────────
+function renderModelList(containerId, models, provider) {
+  const list = $(containerId);
+  list.innerHTML = "";
+  (models || []).forEach((m, i) => {
+    const row = document.createElement("div");
+    row.className = "flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white group transition-colors";
+    row.innerHTML = `
+      <span class="text-xs text-gray-700 truncate flex-1">${m}</span>
+      <button data-i="${i}" data-prov="${provider}"
+        class="btn-del-model text-gray-300 hover:text-red-400 ml-2 text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity">✕</button>`;
+    list.appendChild(row);
+  });
+  list.querySelectorAll(".btn-del-model").forEach(btn => {
+    btn.addEventListener("click", () => {
+      const idx  = Number(btn.dataset.i);
+      const prov = btn.dataset.prov;
+      if (prov === "OpenRouter") {
+        appSettings.models_openrouter.splice(idx, 1);
+        renderModelList("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
+      } else {
+        appSettings.models_nvidia.splice(idx, 1);
+        renderModelList("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
+      }
+    });
+  });
+}
+
+function openSettings() {
+  if (!appSettings) return;
+  $("settings-provider").value = appSettings.provider;
+  $("settings-url").value      = appSettings.base_url || "";
+  $("settings-apikey").value   = appSettings.api_key  || "";
+  renderModelList("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
+  renderModelList("models-list-nvidia",     appSettings.models_nvidia,     "Nvidia NIM");
+  $("settings-modal").classList.remove("hidden");
+}
+function closeSettings() {
+  $("settings-modal").classList.add("hidden");
+}
+
+$("settings-provider").addEventListener("change", () => {
+  const prov = $("settings-provider").value;
+  if (PROVIDER_URLS[prov]) $("settings-url").value = PROVIDER_URLS[prov];
+});
+
+$("btn-toggle-key").addEventListener("click", () => {
+  const inp = $("settings-apikey");
+  inp.type = inp.type === "password" ? "text" : "password";
+});
+
+// Add-model handlers
+function addModelHandler(inputId, listKey, containerId, provLabel, btnSuffix) {
+  function doAdd() {
+    const val = $(inputId).value.trim();
+    if (!val || !appSettings) return;
+    if (!appSettings[listKey].includes(val)) {
+      appSettings[listKey].push(val);
+      $(inputId).value = "";
+      renderModelList(containerId, appSettings[listKey], provLabel);
+    }
+  }
+  $(`btn-add-model-${btnSuffix}`).addEventListener("click", doAdd);
+  $(inputId).addEventListener("keydown", e => { if (e.key === "Enter") { e.preventDefault(); doAdd(); } });
+}
+addModelHandler("new-model-or", "models_openrouter", "models-list-openrouter", "OpenRouter", "or");
+addModelHandler("new-model-nv", "models_nvidia",     "models-list-nvidia",     "Nvidia NIM", "nv");
+
+$("btn-save-settings").addEventListener("click", async () => {
+  const payload = {
+    provider:          $("settings-provider").value,
+    base_url:          $("settings-url").value.trim(),
+    api_key:           $("settings-apikey").value.trim(),
+    models_openrouter: appSettings.models_openrouter,
+    models_nvidia:     appSettings.models_nvidia,
+  };
+  try {
+    const res = await fetch("/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    appSettings = await res.json();
+    populateModelSelect();
+    closeSettings();
+    renderSys("Settings saved successfully.");
+  } catch (err) {
+    renderSys(`Could not save settings: ${err.message}`, true);
+  }
+});
+
+$("btn-settings").addEventListener("click", openSettings);
+$("btn-close-settings").addEventListener("click", closeSettings);
+$("btn-cancel-settings").addEventListener("click", closeSettings);
+$("settings-modal").addEventListener("click", e => {
+  if (e.target === $("settings-modal")) closeSettings();
+});
+
+// ─────────────────────────────────────
+// Sidebar / Nav Buttons
+// ─────────────────────────────────────
+$("btn-new-chat").addEventListener("click", () => {
+  newSession();
+  clearChatView();
+  showWelcome();
+  clearAttachment();
+  chatTitle.textContent = "New Chat";
+  renderSidebar();
+  chatTextarea.focus();
+});
+
+$("btn-clear-chat").addEventListener("click", handleClear);
+$("btn-clear-chat-mobile").addEventListener("click", handleClear);
+
+function handleClear() {
+  if (!currentSid) return;
+  sessions[currentSid].messages = [];
+  sessions[currentSid].title    = "New Chat";
+  saveSessions();
+  clearChatView();
+  showWelcome();
+  chatTitle.textContent = "New Chat";
+  renderSidebar();
+}
+
+function toggleSidebar() {
+  const sidebar = $("sidebar");
+  const overlay = $("sidebar-overlay");
+  
+  // Mobile behavior
+  if (window.innerWidth < 768) {
+    if (sidebar.classList.contains("-translate-x-full")) {
+      sidebar.classList.remove("-translate-x-full");
+      overlay.classList.remove("hidden");
+    } else {
+      sidebar.classList.add("-translate-x-full");
+      overlay.classList.add("hidden");
+    }
+  } else {
+    // Desktop behavior (hide completely)
+    sidebar.classList.toggle("hidden");
+  }
+}
+
+$("btn-toggle-sidebar").addEventListener("click", toggleSidebar);
+$("btn-hamburger").addEventListener("click", toggleSidebar);
+$("sidebar-overlay").addEventListener("click", toggleSidebar);
+
+// ─────────────────────────────────────
+// PWA Service Worker
+// ─────────────────────────────────────
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/static/js/sw.js")
+    .catch(e => console.warn("[ORBIT] SW:", e));
+}
+
+// ─────────────────────────────────────
+// Boot
+// ─────────────────────────────────────
+async function init() {
+  try {
+    // 1. Load current user
+    const meRes = await fetch("/api/me");
+    if (meRes.status === 401) { window.location.href = "/login"; return; }
+    currentUser = await meRes.json();
+
+    // 2. Populate sidebar profile
+    const avatar = $("user-avatar");
+    if (currentUser.picture) {
+      avatar.src = currentUser.picture;
+      avatar.alt = currentUser.name;
+    } else {
+      avatar.style.background = "#1a73e8";
+    }
+    $("user-name").textContent = currentUser.name || currentUser.email || "User";
+
+    // 3. Scope sessions to user
+    sessionsKey = `orbit_sessions_${currentUser.id}`;
+    loadSessions();
+
+    // 4. Load server settings
+    const setRes = await fetch("/api/settings");
+    if (!setRes.ok) throw new Error("Failed to load settings");
+    appSettings = await setRes.json();
+    populateModelSelect();
+
+    // 5. Restore or create chat session
+    const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
+    if (ids.length) {
+      currentSid = ids[0];
+      const msgs = sessions[currentSid]?.messages || [];
+      if (msgs.length) {
+        hideWelcome();
+        msgs.forEach(m => renderBubble(m.role, m.content, false));
+        const t = sessions[currentSid]?.title || "New Chat";
+        chatTitle.textContent = t;
+        scrollBottom();
+      } else {
+        showWelcome();
+      }
+    } else {
+      newSession();
+      showWelcome();
+    }
+    renderSidebar();
+
+    // 6. First-run hint if no API key
+    if (!appSettings.api_key) {
+      setTimeout(() => renderSys("Welcome to ORBIT! Open Settings to add your API key."), 500);
+    }
+  } catch (err) {
+    renderSys(`Startup error: ${err.message}`, true);
+  }
+  chatTextarea.focus();
+}
+
+init();

static/js/sw.js

@@ -0,0 +1,77 @@
+// ─────────────────────────────────────────────
+// ORBIT Service Worker — sw.js
+// Caches the app shell for offline/PWA support.
+// ─────────────────────────────────────────────
+
+const CACHE_NAME = "orbit-v1";
+const APP_SHELL = [
+  "/",
+  "/static/js/script.js",
+  "/static/manifest.json",
+  // Tailwind & Google Fonts are network-first; listed here for fallback
+];
+
+// Install: pre-cache shell assets
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(APP_SHELL).catch((err) => {
+        console.warn("[SW] Pre-cache partial failure:", err);
+      });
+    })
+  );
+  self.skipWaiting();
+});
+
+// Activate: purge old caches
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((k) => k !== CACHE_NAME)
+          .map((k) => caches.delete(k))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+// Fetch: Network-first for API calls, Cache-first for static assets
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+
+  // Never cache API endpoints — always go to network
+  if (url.pathname.startsWith("/api/")) {
+    event.respondWith(fetch(event.request));
+    return;
+  }
+
+  // Cache-first strategy for static assets
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      if (cached) return cached;
+      return fetch(event.request)
+        .then((networkResponse) => {
+          // Cache successful GET responses for the shell
+          if (
+            networkResponse.ok &&
+            event.request.method === "GET" &&
+            (url.origin === self.location.origin ||
+              url.hostname.includes("googleapis.com") ||
+              url.hostname.includes("tailwindcss.com"))
+          ) {
+            const clone = networkResponse.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+          }
+          return networkResponse;
+        })
+        .catch(() => {
+          // Offline fallback: return cached root if page navigation fails
+          if (event.request.mode === "navigate") {
+            return caches.match("/");
+          }
+        });
+    })
+  );
+});

static/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "ORBIT - Educational Research Assistant",
+  "short_name": "ORBIT",
+  "description": "Your AI-powered educational research assistant. Chat, analyze PDFs, and validate DOIs.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#FFFFFF",
+  "theme_color": "#1a73e8",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/static/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["education", "productivity"],
+  "screenshots": []
+}

templates/index.html

@@ -0,0 +1,542 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ORBIT – Educational Research Assistant</title>
+  <link rel="icon" type="image/png" href="/static/icon.png" />
+  <meta name="description" content="ORBIT AI-powered educational research assistant." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'sans-serif'] },
+          colors: {
+            accent: { DEFAULT: '#1a73e8', hover: '#1557b0', light: '#e8f0fe' }
+          },
+        },
+      },
+    };
+  </script>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', sans-serif;
+    }
+
+    ::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #d1d5db;
+      border-radius: 99px;
+    }
+
+    #chat-textarea {
+      resize: none;
+      min-height: 24px;
+      max-height: 160px;
+      overflow-y: auto;
+      line-height: 1.5;
+    }
+
+    .bubble-ai {
+      animation: fadeUp .25s ease both;
+    }
+
+    .bubble-user {
+      animation: fadeUp .20s ease both;
+    }
+
+    @keyframes fadeUp {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .typing-dot {
+      animation: blink 1.2s infinite;
+    }
+
+    .typing-dot:nth-child(2) {
+      animation-delay: .2s;
+    }
+
+    .typing-dot:nth-child(3) {
+      animation-delay: .4s;
+    }
+
+    @keyframes blink {
+
+      0%,
+      80%,
+      100% {
+        opacity: .2;
+      }
+
+      40% {
+        opacity: 1;
+      }
+    }
+
+    .sidebar-item {
+      transition: background .13s, color .13s;
+    }
+
+    .modal-back {
+      animation: fadeIn .18s ease;
+    }
+
+    .modal-box {
+      animation: scaleIn .22s cubic-bezier(.34, 1.56, .64, 1);
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes scaleIn {
+      from {
+        opacity: 0;
+        transform: scale(.95);
+      }
+
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    /* Markdown */
+    .prose-orbit h1,
+    .prose-orbit h2,
+    .prose-orbit h3 {
+      font-weight: 600;
+      margin: .6em 0 .3em;
+    }
+
+    .prose-orbit p {
+      margin: .25em 0;
+      line-height: 1.7;
+    }
+
+    .prose-orbit ul {
+      list-style: disc;
+      padding-left: 1.4em;
+      margin: .3em 0;
+    }
+
+    .prose-orbit ol {
+      list-style: decimal;
+      padding-left: 1.4em;
+      margin: .3em 0;
+    }
+
+    .prose-orbit li {
+      margin: .2em 0;
+    }
+
+    .prose-orbit code {
+      background: #f0f4f9;
+      padding: .1em .35em;
+      border-radius: 4px;
+      font-size: .87em;
+      font-family: monospace;
+    }
+
+    .prose-orbit pre {
+      background: #f0f4f9;
+      border-radius: 8px;
+      padding: 1em;
+      overflow-x: auto;
+      margin: .5em 0;
+    }
+
+    .prose-orbit pre code {
+      background: none;
+      padding: 0;
+    }
+
+    .prose-orbit strong {
+      font-weight: 600;
+    }
+
+    .prose-orbit a {
+      color: #1a73e8;
+      text-decoration: underline;
+    }
+
+    .prose-orbit blockquote {
+      border-left: 3px solid #e0e0e0;
+      padding-left: .75em;
+      color: #6b7280;
+    }
+
+    /* Input pill shadow */
+    .pill-shadow {
+      box-shadow: 0 4px 28px rgba(26, 115, 232, 0.10), 0 1px 6px rgba(0, 0, 0, 0.07);
+    }
+
+    /* Sidebar slide transition */
+    #sidebar {
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* iOS safe-area bottom padding */
+    .safe-bottom {
+      padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
+    }
+  </style>
+</head>
+
+<body class="flex flex-col md:flex-row h-screen overflow-hidden bg-white text-gray-800 antialiased">
+
+  <!-- ═══════════════════════════════════
+     MOBILE TOP NAVBAR (hidden on md+)
+═══════════════════════════════════ -->
+  <nav class="md:hidden flex items-center px-4 h-14 bg-white border-b border-gray-100 shrink-0 z-40 relative">
+    <button id="btn-hamburger" class="p-2 rounded-lg hover:bg-gray-100 transition-colors mr-3" aria-label="Open menu">
+      <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
+    <div class="flex items-center gap-2">
+      <div class="w-7 h-7 rounded-full flex items-center justify-center shadow-sm overflow-hidden bg-white">
+        <img src="/static/icon.png" alt="ORBIT Logo" class="w-full h-full object-cover" />
+      </div>
+      <span class="font-bold text-base text-accent tracking-tight">ORBIT</span>
+    </div>
+    <!-- Mobile Clear Chat Button -->
+    <button id="btn-clear-chat-mobile" class="ml-auto p-2 text-gray-400 hover:text-red-400 transition-colors"
+      title="Clear Chat">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+      </svg>
+    </button>
+  </nav>
+
+  <!-- Mobile overlay backdrop -->
+  <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" aria-hidden="true"></div>
+
+  <!-- ═══════════════════════════════════
+     SIDEBAR
+═══════════════════════════════════ -->
+  <aside id="sidebar"
+    class="fixed md:relative flex flex-col w-64 min-w-[256px] bg-[#F8F9FA] border-r border-gray-100 h-full md:h-screen z-50 shrink-0 -translate-x-full md:translate-x-0">
+
+    <!-- Logo -->
+    <div class="flex items-center gap-2.5 px-5 pt-6 pb-4">
+      <div class="w-8 h-8 rounded-full flex items-center justify-center shadow-sm overflow-hidden bg-white">
+        <img src="/static/icon.png" alt="ORBIT Logo" class="w-full h-full object-cover" />
+      </div>
+      <span class="font-bold text-[17px] text-accent tracking-tight">ORBIT</span>
+    </div>
+
+    <!-- New Chat -->
+    <div class="px-3 pb-3">
+      <button id="btn-new-chat"
+        class="w-full flex items-center justify-center gap-2 bg-accent hover:bg-accent-hover text-white font-semibold text-sm rounded-xl h-9 shadow-sm transition-colors">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+          <path d="M12 5v14M5 12h14" />
+        </svg>
+        New Chat
+      </button>
+    </div>
+
+    <!-- History label -->
+    <div class="px-4 pb-1">
+      <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">Recent</p>
+    </div>
+
+    <!-- History list -->
+    <div id="history-list" class="flex-1 overflow-y-auto px-3 space-y-0.5 pb-2"></div>
+
+    <!-- Bottom nav -->
+    <div class="border-t border-gray-200 pt-2 px-3 space-y-0.5 pb-1">
+      <button id="btn-doi"
+        class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm">
+        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path
+            d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+        </svg>
+        Validate DOI
+      </button>
+      <a id="btn-howto" href="/static/docs/dokumen.pdf" target="_blank"
+        class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm">
+        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        How To
+      </a>
+      <button id="btn-settings"
+        class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm">
+        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path
+            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+        Settings
+      </button>
+    </div>
+
+    <!-- User Profile -->
+    <div class="border-t border-gray-100 px-4 py-3 flex items-center gap-3">
+      <img id="user-avatar" src="" alt="Profile"
+        class="w-8 h-8 rounded-full object-cover bg-accent-light ring-1 ring-gray-200 shrink-0" />
+      <div class="flex-1 min-w-0">
+        <p id="user-name" class="text-xs font-semibold text-gray-700 truncate">Loading…</p>
+        <a href="/auth/logout" class="text-[10px] text-gray-400 hover:text-red-400 transition-colors">Sign out</a>
+      </div>
+    </div>
+  </aside>
+
+  <!-- ═══════════════════════════════════
+     MAIN CONTENT
+═══════════════════════════════════ -->
+  <main class="flex-1 flex flex-col h-screen md:h-screen overflow-hidden bg-white relative w-full min-w-0">
+
+    <!-- Desktop Top bar (hidden on mobile — mobile has its own navbar above) -->
+    <header class="hidden md:flex items-center justify-between px-5 py-3 border-b border-gray-100 shrink-0">
+      <button id="btn-toggle-sidebar" class="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+        title="Toggle Sidebar">
+        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+      <span id="chat-title" class="text-sm font-medium text-gray-400">New Chat</span>
+      <button id="btn-clear-chat"
+        class="text-xs text-gray-400 hover:text-red-400 transition-colors px-2 py-1 rounded-lg hover:bg-red-50">Clear</button>
+    </header>
+
+    <!-- Welcome screen (shown when chat is empty) -->
+    <div id="welcome-screen"
+      class="absolute inset-0 top-[40px] md:top-[53px] bottom-[96px] flex flex-col items-center justify-center pointer-events-none z-10">
+      <div class="text-center select-none">
+        <div class="w-20 h-20 mx-auto mb-4 drop-shadow-md">
+          <img src="/static/orbit.png" alt="ORBIT" class="w-full h-full object-contain" />
+        </div>
+        <h1 class="text-2xl font-bold text-gray-800 mb-1.5 tracking-tight">Welcome to ORBIT</h1>
+        <p class="text-sm text-gray-400 font-medium">Your Educational Research Assistant</p>
+      </div>
+    </div>
+
+    <!-- Chat messages -->
+    <div id="chat-messages" class="flex-1 overflow-y-auto relative z-0 pb-2"></div>
+
+    <!-- Attachment badge -->
+    <div id="attach-badge" class="hidden shrink-0 mx-auto w-full max-w-2xl px-5 pb-1">
+      <div
+        class="inline-flex items-center gap-2 bg-accent-light text-accent text-xs font-semibold px-3 py-1.5 rounded-full">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round"
+            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+        </svg>
+        <span id="attach-name">document.pdf</span>
+        <button id="btn-remove-attach"
+          class="ml-0.5 opacity-60 hover:opacity-100 transition-opacity font-bold">✕</button>
+      </div>
+    </div>
+
+    <!-- ── Floating Pill Input Bar (ALWAYS VISIBLE) ── -->
+    <div class="shrink-0 px-3 md:px-4 pt-2 pb-2 safe-bottom relative z-20">
+      <div class="max-w-2xl mx-auto flex items-center justify-between px-2 pb-2">
+        <select id="model-select"
+          class="bg-transparent border-none text-[11px] text-gray-400 font-medium focus:outline-none cursor-pointer max-w-[170px] px-1 hover:text-gray-600 transition-colors appearance-none">
+        </select>
+        <p class="hidden md:block text-[10px] text-gray-300">ORBIT may make errors. Verify important academic
+          information.</p>
+      </div>
+
+      <div id="input-pill"
+        class="w-full max-w-2xl mx-auto bg-[#F8F9FA] rounded-[26px] pill-shadow flex flex-col px-2 py-2 border border-gray-200/70">
+
+        <!-- Main row -->
+        <div class="flex items-end gap-1.5">
+
+          <!-- Attach PDF button -->
+          <button id="btn-attach" title="Attach PDF"
+            class="shrink-0 w-9 h-9 flex items-center justify-center rounded-full hover:bg-white transition-colors text-gray-400 hover:text-accent">
+            <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+            </svg>
+          </button>
+          <input id="pdf-input" type="file" accept=".pdf" class="hidden" />
+
+          <!-- Textarea -->
+          <textarea id="chat-textarea" rows="1" placeholder="Ask ORBIT anything…"
+            class="flex-1 bg-transparent border-none outline-none resize-none text-sm text-gray-800 placeholder-gray-400 py-1.5 leading-relaxed"></textarea>
+
+          <!-- Send button -->
+          <button id="btn-send"
+            class="shrink-0 w-9 h-9 flex items-center justify-center rounded-full bg-accent hover:bg-accent-hover text-white transition-all shadow-sm disabled:opacity-40 disabled:cursor-not-allowed">
+            <svg id="send-icon" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5"
+              viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
+            </svg>
+            <svg id="loading-icon" class="w-4 h-4 animate-spin hidden" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- ═══════════════════════════════════
+     SETTINGS MODAL
+═══════════════════════════════════ -->
+  <div id="settings-modal"
+    class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-black/30 backdrop-blur-sm">
+    <div class="modal-box bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
+      <div class="flex items-center justify-between px-6 pt-6 pb-4 border-b border-gray-100">
+        <h2 class="text-base font-bold text-gray-800">Settings</h2>
+        <button id="btn-close-settings"
+          class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="px-6 py-5 space-y-5">
+
+        <!-- Provider -->
+        <div>
+          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Provider</label>
+          <select id="settings-provider"
+            class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]">
+            <option value="OpenRouter">OpenRouter</option>
+            <option value="Nvidia NIM">Nvidia NIM</option>
+            <option value="Google Gemini">Google Gemini</option>
+            <option value="AgentRouter">AgentRouter</option>
+            <option value="Custom OpenAI">Custom OpenAI-Compatible</option>
+          </select>
+        </div>
+
+        <!-- Base URL -->
+        <div>
+          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Base URL</label>
+          <input id="settings-url" type="text"
+            class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
+        </div>
+
+        <!-- API Key -->
+        <div>
+          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">API Key</label>
+          <div class="relative">
+            <input id="settings-apikey" type="password" placeholder="sk-or-v1-…"
+              class="w-full border border-gray-200 rounded-xl px-3 py-2.5 pr-10 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
+            <button id="btn-toggle-key"
+              class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path
+                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- OpenRouter Models -->
+        <div id="section-models-openrouter">
+          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">OpenRouter
+            Models</label>
+          <div id="models-list-openrouter"
+            class="bg-[#f8f9fa] border border-gray-200 rounded-xl p-2 max-h-32 overflow-y-auto space-y-1 mb-2"></div>
+          <div class="flex gap-2">
+            <input id="new-model-or" type="text" placeholder="model-id (OpenRouter)"
+              class="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
+            <button id="btn-add-model-or"
+              class="px-4 py-2 bg-accent hover:bg-accent-hover text-white text-sm font-semibold rounded-xl transition-colors">Add</button>
+          </div>
+        </div>
+
+        <!-- Nvidia NIM Models -->
+        <div id="section-models-nvidia">
+          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Nvidia NIM
+            Models</label>
+          <div id="models-list-nvidia"
+            class="bg-[#f8f9fa] border border-gray-200 rounded-xl p-2 max-h-32 overflow-y-auto space-y-1 mb-2"></div>
+          <div class="flex gap-2">
+            <input id="new-model-nv" type="text" placeholder="model-id (Nvidia NIM)"
+              class="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
+            <button id="btn-add-model-nv"
+              class="px-4 py-2 bg-accent hover:bg-accent-hover text-white text-sm font-semibold rounded-xl transition-colors">Add</button>
+          </div>
+        </div>
+
+      </div>
+      <div class="px-6 pb-6 flex gap-3 justify-end border-t border-gray-100 pt-4">
+        <button id="btn-cancel-settings"
+          class="px-5 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-xl transition-colors">Cancel</button>
+        <button id="btn-save-settings"
+          class="px-5 py-2.5 text-sm font-semibold bg-accent hover:bg-accent-hover text-white rounded-xl shadow-sm transition-colors">Save
+          Settings</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══════════════════════════════════
+     DOI MODAL
+═══════════════════════════════════ -->
+  <div id="doi-modal"
+    class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-black/30 backdrop-blur-sm">
+    <div class="modal-box bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4">
+      <div class="flex items-center justify-between px-6 pt-6 pb-4 border-b border-gray-100">
+        <h2 class="text-base font-bold text-gray-800">Validate DOI</h2>
+        <button id="btn-close-doi"
+          class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="px-6 py-5 space-y-4">
+        <input id="doi-input" type="text" placeholder="e.g. 10.1000/xyz123 or https://doi.org/…"
+          class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
+        <button id="btn-validate-doi"
+          class="w-full py-2.5 bg-accent hover:bg-accent-hover text-white text-sm font-semibold rounded-xl shadow-sm transition-colors flex items-center justify-center gap-2">
+          <span id="doi-btn-text">Validate</span>
+          <svg id="doi-spinner" class="w-4 h-4 animate-spin hidden" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+          </svg>
+        </button>
+        <div id="doi-result" class="hidden bg-[#f8f9fa] border border-gray-200 rounded-xl p-4 text-sm text-gray-700">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="/static/js/script.js"></script>
+</body>
+
+</html>

templates/login.html

@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ORBIT – Sign In</title>
+  <link rel="icon" type="image/png" href="/static/icon.png" />
+  <meta name="description" content="Sign in to ORBIT, your AI-powered educational research assistant." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --accent:       #1a73e8;
+      --accent-dark:  #1557b0;
+      --accent-light: #e8f0fe;
+      --bg:           #f0f4f9;
+      --white:        #ffffff;
+      --gray-100:     #f1f3f5;
+      --gray-200:     #e2e6ea;
+      --gray-400:     #9aa0a6;
+      --gray-700:     #3c4043;
+      --gray-800:     #202124;
+    }
+
+    html, body {
+      height: 100%;
+      font-family: 'Inter', system-ui, sans-serif;
+      background: linear-gradient(135deg, #e8f0fe 0%, #f0f4f9 40%, #dce8fb 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    /* ── Animated background blobs ── */
+    .bg-blob {
+      position: fixed;
+      border-radius: 50%;
+      filter: blur(80px);
+      opacity: 0.25;
+      pointer-events: none;
+    }
+    .bg-blob-1 {
+      width: 500px; height: 500px;
+      background: #1a73e8;
+      top: -150px; right: -150px;
+      animation: blobFloat 18s ease-in-out infinite alternate;
+    }
+    .bg-blob-2 {
+      width: 400px; height: 400px;
+      background: #4285f4;
+      bottom: -120px; left: -120px;
+      animation: blobFloat 22s ease-in-out infinite alternate-reverse;
+    }
+    .bg-blob-3 {
+      width: 250px; height: 250px;
+      background: #34a853;
+      top: 60%; left: 60%;
+      opacity: 0.10;
+      animation: blobFloat 14s ease-in-out infinite;
+    }
+    @keyframes blobFloat {
+      from { transform: translate(0, 0) scale(1); }
+      to   { transform: translate(30px, 20px) scale(1.08); }
+    }
+
+    /* ── Card ── */
+    .card {
+      position: relative;
+      background: rgba(255, 255, 255, 0.82);
+      backdrop-filter: blur(24px) saturate(180%);
+      -webkit-backdrop-filter: blur(24px) saturate(180%);
+      border: 1px solid rgba(255, 255, 255, 0.70);
+      border-radius: 28px;
+      box-shadow:
+        0 32px 80px rgba(26, 115, 232, 0.12),
+        0 8px 24px rgba(0, 0, 0, 0.07),
+        inset 0 1px 0 rgba(255,255,255,0.9);
+      width: 100%;
+      max-width: 380px;
+      padding: 48px 40px 40px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      z-index: 10;
+    }
+
+    /* ── Logo ── */
+    .logo-wrap {
+      position: relative;
+      width: 120px; height: 120px;
+      margin-bottom: 28px;
+    }
+    .logo-ring {
+      position: absolute;
+      inset: -8px;
+      border-radius: 50%;
+      border: 2px dashed rgba(26, 115, 232, 0.35);
+      animation: spin 14s linear infinite;
+    }
+    .logo-ring-inner {
+      position: absolute;
+      inset: -14px;
+      border-radius: 50%;
+      border: 1.5px dashed rgba(26, 115, 232, 0.15);
+      animation: spin 22s linear infinite reverse;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .logo-circle {
+      width: 72px; height: 72px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #1a73e8, #4285f4);
+      box-shadow: 0 8px 24px rgba(26, 115, 232, 0.40), 0 2px 8px rgba(26,115,232,0.20);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .logo-circle svg {
+      width: 32px; height: 32px;
+      color: #fff;
+    }
+
+    /* ── Typography ── */
+    .title {
+      font-size: 26px;
+      font-weight: 700;
+      color: var(--gray-800);
+      letter-spacing: -0.4px;
+      margin-bottom: 6px;
+    }
+    .subtitle {
+      font-size: 13.5px;
+      color: var(--gray-400);
+      font-weight: 400;
+      margin-bottom: 36px;
+      line-height: 1.5;
+    }
+
+    /* ── Divider ── */
+    .divider {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .divider-line {
+      flex: 1;
+      height: 1px;
+      background: var(--gray-200);
+    }
+    .divider-text {
+      font-size: 11px;
+      color: var(--gray-400);
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    /* ── Google Button ── */
+    .google-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      padding: 13px 20px;
+      background: var(--white);
+      border: 1.5px solid var(--gray-200);
+      border-radius: 16px;
+      font-family: 'Inter', sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--gray-700);
+      cursor: pointer;
+      text-decoration: none;
+      transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+      position: relative;
+      overflow: hidden;
+    }
+    .google-btn::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, transparent, rgba(26,115,232,0.04));
+      opacity: 0;
+      transition: opacity 0.18s;
+    }
+    .google-btn:hover {
+      border-color: #aac4ef;
+      box-shadow: 0 6px 20px rgba(26, 115, 232, 0.16);
+      transform: translateY(-1px);
+      color: var(--accent);
+    }
+    .google-btn:hover::before { opacity: 1; }
+    .google-btn:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    }
+    .google-btn svg { flex-shrink: 0; }
+
+    /* ── Footer note ── */
+    .footer-note {
+      font-size: 11px;
+      color: #bcc5d0;
+      margin-top: 24px;
+      line-height: 1.65;
+    }
+
+    /* ── Beta badge ── */
+    .beta-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      background: linear-gradient(135deg, #e8f0fe, #dce8fb);
+      color: var(--accent);
+      font-size: 10.5px;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      padding: 4px 10px;
+      border-radius: 99px;
+      border: 1px solid rgba(26,115,232,0.18);
+      margin-bottom: 14px;
+    }
+    .beta-badge span { opacity: 0.7; }
+
+    /* ── Responsive ── */
+    @media (max-width: 480px) {
+      .card { margin: 16px; padding: 36px 24px 32px; }
+      .title { font-size: 22px; }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Background blobs -->
+  <div class="bg-blob bg-blob-1" aria-hidden="true"></div>
+  <div class="bg-blob bg-blob-2" aria-hidden="true"></div>
+  <div class="bg-blob bg-blob-3" aria-hidden="true"></div>
+
+  <!-- Login Card -->
+  <main class="card" role="main">
+
+    <!-- Logo -->
+    <div class="logo-wrap" aria-hidden="true">
+      <div class="logo-ring-inner"></div>
+      <div class="logo-ring"></div>
+      <img src="/static/orbit.png" alt="ORBIT Logo" style="width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 10;" />
+    </div>
+
+    <!-- Beta badge -->
+    <div class="beta-badge">
+      <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true"><circle cx="4" cy="4" r="4"/></svg>
+      <span>Beta</span>
+    </div>
+
+    <h1 class="title">Welcome to ORBIT</h1>
+    <p class="subtitle">Your AI-powered Educational<br>Research Assistant</p>
+
+    <div class="divider" aria-hidden="true">
+      <div class="divider-line"></div>
+      <span class="divider-text">Sign in to continue</span>
+      <div class="divider-line"></div>
+    </div>
+
+    <!-- Google Sign-In -->
+    <a id="btn-google-signin" href="/auth/login" class="google-btn" role="button" aria-label="Continue with Google">
+      <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+      </svg>
+      Continue with Google
+    </a>
+
+    <p class="footer-note">
+      By signing in you agree to use this service responsibly.<br>
+      Your API keys are stored securely and never shared.
+    </p>
+  </main>
+
+</body>
+</html>