UI/UX changes, added feature to switch to other LLM APIs

popup.js

@@ -1,6 +1,9 @@
 const extractBtn = document.getElementById("extractBtn");
 const analyzeBtn = document.getElementById("analyzeBtn");
 const abortBtn = document.getElementById("abortBtn");
+const extractRunBtn = document.getElementById("extractRunBtn");
+const stopRow = document.getElementById("stopRow");
+const buttonRow = document.querySelector(".button-row");
 const taskSelect = document.getElementById("taskSelect");
 const outputEl = document.getElementById("output");
 const statusEl = document.getElementById("status");
@@ -226,6 +229,11 @@ function setAnalyzing(isAnalyzing) {
   analyzeBtn.disabled = isAnalyzing;
   abortBtn.disabled = !isAnalyzing;
   extractBtn.disabled = isAnalyzing;
+  extractRunBtn.disabled = isAnalyzing;
+  if (buttonRow && stopRow) {
+    buttonRow.classList.toggle("hidden", isAnalyzing);
+    stopRow.classList.toggle("hidden", !isAnalyzing);
+  }
 }
 
 function updatePostingCount() {
@@ -333,15 +341,17 @@ async function handleExtract() {
     const response = await sendToActiveTab({ type: "EXTRACT_POSTING" });
     if (!response?.ok) {
       setStatus(response?.error || "No posting detected.");
-      return;
+      return false;
     }
 
     state.postingText = response.sanitized || "";
     updatePostingCount();
     updatePromptCount(0);
     setStatus("Posting extracted.");
+    return true;
   } catch (error) {
     setStatus(error.message || "Unable to extract posting.");
+    return false;
   }
 }
 
@@ -358,15 +368,24 @@ async function handleAnalyze() {
     return;
   }
 
-  const { apiKey, model, systemPrompt, resume } = await getStorage([
-    "apiKey",
-    "model",
-    "systemPrompt",
-    "resume"
-  ]);
+  const { apiKey, apiBaseUrl, apiKeyHeader, apiKeyPrefix, model, systemPrompt, resume } =
+    await getStorage([
+      "apiKey",
+      "apiBaseUrl",
+      "apiKeyHeader",
+      "apiKeyPrefix",
+      "model",
+      "systemPrompt",
+      "resume"
+    ]);
 
-  if (!apiKey) {
-    setStatus("Add your OpenAI API key in Settings.");
+  if (!apiBaseUrl) {
+    setStatus("Set an API base URL in Settings.");
+    return;
+  }
+
+  if (apiKeyHeader && !apiKey) {
+    setStatus("Add your API key in Settings.");
     return;
   }
 
@@ -388,6 +407,9 @@ async function handleAnalyze() {
     type: "START_ANALYSIS",
     payload: {
       apiKey,
+      apiBaseUrl,
+      apiKeyHeader,
+      apiKeyPrefix,
       model,
       systemPrompt: systemPrompt || "",
       resume: resume || "",
@@ -397,6 +419,12 @@ async function handleAnalyze() {
   });
 }
 
+async function handleExtractAndAnalyze() {
+  const extracted = await handleExtract();
+  if (!extracted) return;
+  await handleAnalyze();
+}
+
 function handleAbort() {
   if (!state.port) return;
   state.port.postMessage({ type: "ABORT_ANALYSIS" });
@@ -406,12 +434,14 @@ function handleAbort() {
 
 extractBtn.addEventListener("click", handleExtract);
 analyzeBtn.addEventListener("click", handleAnalyze);
+extractRunBtn.addEventListener("click", handleExtractAndAnalyze);
 abortBtn.addEventListener("click", handleAbort);
 settingsBtn.addEventListener("click", () => chrome.runtime.openOptionsPage());
 
 updatePostingCount();
 updatePromptCount(0);
 renderOutput();
+setAnalyzing(false);
 loadTasks();
 loadTheme();