update .gitignore to ignore crx and pem files

.gitignore

@@ -1 +1,3 @@
 AGENTS.md
+**/*.crx
+**/*.pem

README.md

@@ -0,0 +1,61 @@
+# WWCompanion
+
+WWCompanion is a manual, user-triggered browser extension for
+LLM-enabled AI companionship with WaterlooWorks job postings.
+
+## Table of Contents
+
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [Example prompts](#example-prompts)
+  - [Example system prompt (default if not configured)](#example-system-prompt-default-if-not-configured)
+  - [Example task prompt: Generic Fit](#example-task-prompt-generic-fit)
+  - [Example task prompt: Ratings Only](#example-task-prompt-ratings-only)
+
+## Usage
+
+- Load the extension into a Chromium-based browser (root directory at [wwcompanion-extension](wwcompanion-extension/))
+- Configure API settings, prompts, and tasks in **Settings**.
+- Open a WaterlooWorks job posting modal.
+- Click **Extract** or **Extract & Run** in the popup.
+- Review the streamed response, then copy or clear it as needed.
+
+## Configuration
+
+- Open **Settings** from the popup.
+- Add your API key, base URL, and model (defaults target
+  OpenAI-compatible APIs).
+- Set your system prompt and resume text.
+- Customize task presets; the top task is used as the default.
+
+## Example prompts
+
+### Example system prompt (default if not configured)
+
+Concise, critical evaluation style with a short summary and emphasized
+key points.
+
+```
+You are a precise, honest assistant. Be concise and avoid inventing details, be critical about evaluations. You should put in a small summary of all the sections at the end. You should answer in no longer than 3 sections including the summary. And remember to bold or italicize key points.
+```
+
+### Example task prompt: Generic Fit
+
+Single-section fit assessment tuned for compact output without
+interview prep.
+
+```
+You should evaluate for my fit to the job. You don't need to suggest interview prep, we'll leave those for later. a bit of tuning to your answers: please keep things more compact, a single section for the evaluation is enough, you don't need to analyze every bullet point in the posting.
+```
+
+### Example task prompt: Ratings Only
+
+Structured numeric ratings with headings and no extra commentary.
+
+```
+Give ratings out of 10 with headings and do not include any other text.
+
+1. Fit evaluation: my fit to the role.
+2. Company status: how well this company offers career development for me.
+3. Pay: use $25 CAD per hour as a baseline; rate the compensation.
+```

background.js

@@ -1,189 +0,0 @@
-const DEFAULT_TASKS = [
-  {
-    id: "task-fit-summary",
-    name: "Fit Summary",
-    text:
-      "Summarize the role, highlight key requirements, and assess my fit using the resume. Note any gaps and what to emphasize."
-  }
-];
-
-const DEFAULT_SETTINGS = {
-  apiKey: "",
-  model: "gpt-4o-mini",
-  systemPrompt:
-    "You are a precise, honest assistant. Be concise, highlight uncertainties, and avoid inventing details.",
-  resume: "",
-  tasks: DEFAULT_TASKS
-};
-
-chrome.runtime.onInstalled.addListener(async () => {
-  const stored = await chrome.storage.local.get(Object.keys(DEFAULT_SETTINGS));
-  const updates = {};
-
-  for (const [key, value] of Object.entries(DEFAULT_SETTINGS)) {
-    const existing = stored[key];
-    const missing =
-      existing === undefined ||
-      existing === null ||
-      (key === "tasks" && !Array.isArray(existing));
-
-    if (missing) updates[key] = value;
-  }
-
-  if (Object.keys(updates).length) {
-    await chrome.storage.local.set(updates);
-  }
-});
-
-chrome.runtime.onConnect.addListener((port) => {
-  if (port.name !== "analysis") return;
-
-  let abortController = null;
-
-  const resetAbort = () => {
-    if (abortController) abortController.abort();
-    abortController = null;
-  };
-
-  port.onMessage.addListener((message) => {
-    if (message?.type === "START_ANALYSIS") {
-      resetAbort();
-      abortController = new AbortController();
-      void handleAnalysisRequest(port, message.payload, abortController.signal).catch(
-        (error) => {
-          if (error?.name === "AbortError") {
-            port.postMessage({ type: "ABORTED" });
-            return;
-          }
-          port.postMessage({
-            type: "ERROR",
-            message: error?.message || "Unknown error during analysis."
-          });
-        }
-      );
-      return;
-    }
-
-    if (message?.type === "ABORT_ANALYSIS") {
-      resetAbort();
-    }
-  });
-
-  port.onDisconnect.addListener(() => {
-    resetAbort();
-  });
-});
-
-function buildUserMessage(resume, task, posting) {
-  return [
-    "=== RESUME ===",
-    resume || "",
-    "",
-    "=== TASK ===",
-    task || "",
-    "",
-    "=== JOB POSTING ===",
-    posting || ""
-  ].join("\n");
-}
-
-async function handleAnalysisRequest(port, payload, signal) {
-  const { apiKey, model, systemPrompt, resume, taskText, postingText } = payload || {};
-
-  if (!apiKey) {
-    port.postMessage({ type: "ERROR", message: "Missing OpenAI API key." });
-    return;
-  }
-
-  if (!model) {
-    port.postMessage({ type: "ERROR", message: "Missing model name." });
-    return;
-  }
-
-  if (!postingText) {
-    port.postMessage({ type: "ERROR", message: "No job posting text provided." });
-    return;
-  }
-
-  if (!taskText) {
-    port.postMessage({ type: "ERROR", message: "No task prompt selected." });
-    return;
-  }
-
-  const userMessage = buildUserMessage(resume, taskText, postingText);
-
-  await streamChatCompletion({
-    apiKey,
-    model,
-    systemPrompt: systemPrompt || "",
-    userMessage,
-    signal,
-    onDelta: (text) => port.postMessage({ type: "DELTA", text })
-  });
-
-  port.postMessage({ type: "DONE" });
-}
-
-async function streamChatCompletion({
-  apiKey,
-  model,
-  systemPrompt,
-  userMessage,
-  signal,
-  onDelta
-}) {
-  const response = await fetch("https://api.openai.com/v1/chat/completions", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${apiKey}`
-    },
-    body: JSON.stringify({
-      model,
-      stream: true,
-      messages: [
-        { role: "system", content: systemPrompt },
-        { role: "user", content: userMessage }
-      ]
-    }),
-    signal
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    throw new Error(`OpenAI API error ${response.status}: ${errorText}`);
-  }
-
-  const reader = response.body.getReader();
-  const decoder = new TextDecoder();
-  let buffer = "";
-
-  // OpenAI streams Server-Sent Events; parse incremental deltas from data lines.
-  while (true) {
-    const { value, done } = await reader.read();
-    if (done) break;
-
-    buffer += decoder.decode(value, { stream: true });
-    const lines = buffer.split("\n");
-    buffer = lines.pop() || "";
-
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (!trimmed.startsWith("data:")) continue;
-
-      const data = trimmed.slice(5).trim();
-      if (!data) continue;
-      if (data === "[DONE]") return;
-
-      let parsed;
-      try {
-        parsed = JSON.parse(data);
-      } catch {
-        continue;
-      }
-
-      const delta = parsed?.choices?.[0]?.delta?.content;
-      if (delta) onDelta(delta);
-    }
-  }
-}

content.js

@@ -1,48 +0,0 @@
-const HEADER_LINES = new Set([
-  "OVERVIEW",
-  "PRE-SCREENING",
-  "WORK TERM RATINGS",
-  "JOB POSTING INFORMATION",
-  "APPLICATION INFORMATION",
-  "COMPANY INFORMATION",
-  "SERVICE TEAM"
-]);
-
-function sanitizePostingText(text) {
-  let cleaned = text.replaceAll("fiber_manual_record", "");
-  const lines = cleaned.split(/\r?\n/);
-  const filtered = lines.filter((line) => {
-    const trimmed = line.trim();
-    if (!trimmed) return true;
-    return !HEADER_LINES.has(trimmed.toUpperCase());
-  });
-
-  cleaned = filtered.join("\n");
-  cleaned = cleaned.replace(/[ \t]+/g, " ");
-  cleaned = cleaned.replace(/\n{3,}/g, "\n\n");
-  return cleaned.trim();
-}
-
-function extractPostingText() {
-  const contents = [...document.getElementsByClassName("modal__content")];
-  if (!contents.length) {
-    return { ok: false, error: "No modal content found on this page." };
-  }
-
-  // WaterlooWorks renders multiple modal containers; choose the longest visible text block.
-  const el = contents.reduce((best, cur) =>
-    cur.innerText.length > best.innerText.length ? cur : best
-  );
-
-  const rawText = el.innerText;
-  const sanitized = sanitizePostingText(rawText);
-
-  return { ok: true, rawText, sanitized };
-}
-
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-  if (message?.type !== "EXTRACT_POSTING") return;
-
-  const result = extractPostingText();
-  sendResponse(result);
-});

popup.css

@@ -1,161 +0,0 @@
-:root {
-  --ink: #1f1a17;
-  --muted: #6b5f55;
-  --accent: #b14d2b;
-  --accent-deep: #7d321b;
-  --panel: #fff7ec;
-  --border: #e4d6c5;
-  --glow: rgba(177, 77, 43, 0.18);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 16px;
-  width: 360px;
-  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
-    "Times New Roman", serif;
-  color: var(--ink);
-  background: radial-gradient(circle at top, #fdf2df, #f7ead6 60%, #f1dcc6 100%);
-}
-
-.title-block {
-  margin-bottom: 12px;
-}
-
-.title {
-  font-size: 20px;
-  font-weight: 700;
-  letter-spacing: 0.3px;
-}
-
-.subtitle {
-  font-size: 12px;
-  color: var(--muted);
-}
-
-.panel {
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  background: var(--panel);
-  box-shadow: 0 12px 30px rgba(122, 80, 47, 0.12);
-}
-
-.field {
-  margin-top: 10px;
-  display: grid;
-  gap: 6px;
-}
-
-label {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--muted);
-}
-
-select {
-  width: 100%;
-  padding: 8px 10px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: #fffdf9;
-  font-size: 13px;
-}
-
-.actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-button {
-  font-family: inherit;
-  border: none;
-  border-radius: 10px;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-button:active {
-  transform: translateY(1px);
-}
-
-.primary {
-  width: 100%;
-  background: #fffdf9;
-  border: 1px solid var(--border);
-  box-shadow: 0 6px 16px rgba(120, 85, 55, 0.12);
-}
-
-.accent {
-  background: var(--accent);
-  color: #fff9f3;
-  box-shadow: 0 8px 20px var(--glow);
-}
-
-.ghost {
-  background: transparent;
-  border: 1px solid var(--border);
-}
-
-.meta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: var(--muted);
-  margin-top: 10px;
-}
-
-.status {
-  margin-top: 10px;
-  font-size: 12px;
-  color: var(--accent-deep);
-}
-
-.output {
-  margin-top: 12px;
-  border: 1px dashed var(--border);
-  border-radius: 12px;
-  padding: 10px;
-  background: rgba(255, 255, 255, 0.7);
-  min-height: 160px;
-  max-height: 240px;
-  overflow: hidden;
-}
-
-pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 220px;
-  overflow-y: auto;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-}
-
-.link {
-  padding: 4px 6px;
-  background: none;
-  border-radius: 8px;
-  color: var(--accent-deep);
-  font-size: 12px;
-}

popup.html

@@ -1,42 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>WWCompanion</title>
-    <link rel="stylesheet" href="popup.css" />
-  </head>
-  <body>
-    <header class="title-block">
-      <div class="title">WWCompanion</div>
-      <div class="subtitle">Manual reasoning for WaterlooWorks</div>
-    </header>
-
-    <section class="panel">
-      <button id="extractBtn" class="primary">Extract Posting</button>
-      <div class="field">
-        <label for="taskSelect">Task</label>
-        <select id="taskSelect"></select>
-      </div>
-      <div class="actions">
-        <button id="analyzeBtn" class="accent">Analyze</button>
-        <button id="abortBtn" class="ghost" disabled>Stop</button>
-      </div>
-      <div class="meta">
-        <span id="postingCount">Posting: 0 chars</span>
-        <span id="promptCount">Prompt: 0 chars</span>
-      </div>
-      <div id="status" class="status">Idle</div>
-    </section>
-
-    <section class="output">
-      <pre id="output" aria-live="polite"></pre>
-    </section>
-
-    <footer class="footer">
-      <button id="settingsBtn" class="link">Open Settings</button>
-    </footer>
-
-    <script src="popup.js"></script>
-  </body>
-</html>

popup.js

@@ -1,223 +0,0 @@
-const extractBtn = document.getElementById("extractBtn");
-const analyzeBtn = document.getElementById("analyzeBtn");
-const abortBtn = document.getElementById("abortBtn");
-const taskSelect = document.getElementById("taskSelect");
-const outputEl = document.getElementById("output");
-const statusEl = document.getElementById("status");
-const postingCountEl = document.getElementById("postingCount");
-const promptCountEl = document.getElementById("promptCount");
-const settingsBtn = document.getElementById("settingsBtn");
-
-const state = {
-  postingText: "",
-  tasks: [],
-  port: null,
-  isAnalyzing: false
-};
-
-function getStorage(keys) {
-  return new Promise((resolve) => chrome.storage.local.get(keys, resolve));
-}
-
-function buildUserMessage(resume, task, posting) {
-  return [
-    "=== RESUME ===",
-    resume || "",
-    "",
-    "=== TASK ===",
-    task || "",
-    "",
-    "=== JOB POSTING ===",
-    posting || ""
-  ].join("\n");
-}
-
-function setStatus(message) {
-  statusEl.textContent = message;
-}
-
-function setAnalyzing(isAnalyzing) {
-  state.isAnalyzing = isAnalyzing;
-  analyzeBtn.disabled = isAnalyzing;
-  abortBtn.disabled = !isAnalyzing;
-  extractBtn.disabled = isAnalyzing;
-}
-
-function updatePostingCount() {
-  postingCountEl.textContent = `Posting: ${state.postingText.length} chars`;
-}
-
-function updatePromptCount(count) {
-  promptCountEl.textContent = `Prompt: ${count} chars`;
-}
-
-function renderTasks(tasks) {
-  state.tasks = tasks;
-  taskSelect.innerHTML = "";
-
-  if (!tasks.length) {
-    const option = document.createElement("option");
-    option.textContent = "No tasks configured";
-    option.value = "";
-    taskSelect.appendChild(option);
-    taskSelect.disabled = true;
-    return;
-  }
-
-  taskSelect.disabled = false;
-  for (const task of tasks) {
-    const option = document.createElement("option");
-    option.value = task.id;
-    option.textContent = task.name || "Untitled task";
-    taskSelect.appendChild(option);
-  }
-}
-
-function sendToActiveTab(message) {
-  return new Promise((resolve, reject) => {
-    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-      const tab = tabs[0];
-      if (!tab?.id) {
-        reject(new Error("No active tab found."));
-        return;
-      }
-
-      chrome.tabs.sendMessage(tab.id, message, (response) => {
-        const error = chrome.runtime.lastError;
-        if (error) {
-          reject(new Error(error.message));
-          return;
-        }
-        resolve(response);
-      });
-    });
-  });
-}
-
-function ensurePort() {
-  if (state.port) return state.port;
-
-  const port = chrome.runtime.connect({ name: "analysis" });
-  port.onMessage.addListener((message) => {
-    if (message?.type === "DELTA") {
-      outputEl.textContent += message.text;
-      outputEl.scrollTop = outputEl.scrollHeight;
-      return;
-    }
-
-    if (message?.type === "DONE") {
-      setAnalyzing(false);
-      setStatus("Done");
-      return;
-    }
-
-    if (message?.type === "ABORTED") {
-      setAnalyzing(false);
-      setStatus("Aborted.");
-      return;
-    }
-
-    if (message?.type === "ERROR") {
-      setAnalyzing(false);
-      setStatus(message.message || "Error during analysis.");
-    }
-  });
-
-  port.onDisconnect.addListener(() => {
-    state.port = null;
-    setAnalyzing(false);
-  });
-
-  state.port = port;
-  return port;
-}
-
-async function loadTasks() {
-  const { tasks = [] } = await getStorage(["tasks"]);
-  renderTasks(tasks);
-}
-
-async function handleExtract() {
-  setStatus("Extracting...");
-  try {
-    const response = await sendToActiveTab({ type: "EXTRACT_POSTING" });
-    if (!response?.ok) {
-      setStatus(response?.error || "No posting detected.");
-      return;
-    }
-
-    state.postingText = response.sanitized || "";
-    updatePostingCount();
-    updatePromptCount(0);
-    setStatus("Posting extracted.");
-  } catch (error) {
-    setStatus(error.message || "Unable to extract posting.");
-  }
-}
-
-async function handleAnalyze() {
-  if (!state.postingText) {
-    setStatus("Extract a job posting first.");
-    return;
-  }
-
-  const taskId = taskSelect.value;
-  const task = state.tasks.find((item) => item.id === taskId);
-  if (!task) {
-    setStatus("Select a task prompt.");
-    return;
-  }
-
-  const { apiKey, model, systemPrompt, resume } = await getStorage([
-    "apiKey",
-    "model",
-    "systemPrompt",
-    "resume"
-  ]);
-
-  if (!apiKey) {
-    setStatus("Add your OpenAI API key in Settings.");
-    return;
-  }
-
-  if (!model) {
-    setStatus("Set a model name in Settings.");
-    return;
-  }
-
-  const promptText = buildUserMessage(resume || "", task.text || "", state.postingText);
-  updatePromptCount(promptText.length);
-
-  outputEl.textContent = "";
-  setAnalyzing(true);
-  setStatus("Analyzing...");
-
-  const port = ensurePort();
-  port.postMessage({
-    type: "START_ANALYSIS",
-    payload: {
-      apiKey,
-      model,
-      systemPrompt: systemPrompt || "",
-      resume: resume || "",
-      taskText: task.text || "",
-      postingText: state.postingText
-    }
-  });
-}
-
-function handleAbort() {
-  if (!state.port) return;
-  state.port.postMessage({ type: "ABORT_ANALYSIS" });
-  setAnalyzing(false);
-  setStatus("Aborted.");
-}
-
-extractBtn.addEventListener("click", handleExtract);
-analyzeBtn.addEventListener("click", handleAnalyze);
-abortBtn.addEventListener("click", handleAbort);
-settingsBtn.addEventListener("click", () => chrome.runtime.openOptionsPage());
-
-updatePostingCount();
-updatePromptCount(0);
-loadTasks();

wwcompanion-extension/background.js

@@ -0,0 +1,334 @@
+const DEFAULT_TASKS = [
+  {
+    id: "task-generic-fit",
+    name: "Generic Fit",
+    text:
+      "You should evaluate for my fit to the job. You don't need to suggest interview prep, we'll leave those for later. a bit of tuning to your answers: please keep things more compact, a single section for the evaluation is enough, you don't need to analyze every bullet point in the posting."
+  },
+  {
+    id: "task-ratings-only",
+    name: "Ratings Only",
+    text:
+      "Give ratings out of 10 with headings and do not include any other text.\n\n1. Fit evaluation: my fit to the role.\n2. Company status: how well this company offers career development for me.\n3. Pay: use $25 CAD per hour as a baseline; rate the compensation."
+  }
+];
+
+const DEFAULT_SETTINGS = {
+  apiKey: "",
+  apiBaseUrl: "https://api.openai.com/v1",
+  apiKeyHeader: "Authorization",
+  apiKeyPrefix: "Bearer ",
+  model: "gpt-4o-mini",
+  systemPrompt:
+    "You are a precise, honest assistant. Be concise and avoid inventing details, be critical about evaluations. You should put in a small summary of all the sections at the end. You should answer in no longer than 3 sections including the summary. And remember to bold or italicize key points.",
+  resume: "",
+  tasks: DEFAULT_TASKS,
+  theme: "system"
+};
+
+const OUTPUT_STORAGE_KEY = "lastOutput";
+const AUTO_RUN_KEY = "autoRunDefaultTask";
+let activeAbortController = null;
+let keepalivePort = null;
+const streamState = {
+  active: false,
+  outputText: "",
+  subscribers: new Set()
+};
+
+function resetAbort() {
+  if (activeAbortController) {
+    activeAbortController.abort();
+    activeAbortController = null;
+  }
+  closeKeepalive();
+}
+
+function openKeepalive(tabId) {
+  if (!tabId || keepalivePort) return;
+  try {
+    keepalivePort = chrome.tabs.connect(tabId, { name: "wwcompanion-keepalive" });
+    keepalivePort.onDisconnect.addListener(() => {
+      keepalivePort = null;
+    });
+  } catch {
+    keepalivePort = null;
+  }
+}
+
+function closeKeepalive() {
+  if (!keepalivePort) return;
+  try {
+    keepalivePort.disconnect();
+  } catch {
+    // Ignore disconnect failures.
+  }
+  keepalivePort = null;
+}
+
+chrome.runtime.onInstalled.addListener(async () => {
+  const stored = await chrome.storage.local.get(Object.keys(DEFAULT_SETTINGS));
+  const updates = {};
+
+  for (const [key, value] of Object.entries(DEFAULT_SETTINGS)) {
+    const existing = stored[key];
+    const missing =
+      existing === undefined ||
+      existing === null ||
+      (key === "tasks" && !Array.isArray(existing));
+
+    if (missing) updates[key] = value;
+  }
+
+  if (Object.keys(updates).length) {
+    await chrome.storage.local.set(updates);
+  }
+});
+
+chrome.runtime.onConnect.addListener((port) => {
+  if (port.name !== "analysis") return;
+
+  streamState.subscribers.add(port);
+  port.onDisconnect.addListener(() => {
+    streamState.subscribers.delete(port);
+  });
+
+  if (streamState.active) {
+    safePost(port, {
+      type: "SYNC",
+      text: streamState.outputText,
+      streaming: true
+    });
+  }
+
+  port.onMessage.addListener((message) => {
+    if (message?.type === "START_ANALYSIS") {
+      streamState.outputText = "";
+      resetAbort();
+      const controller = new AbortController();
+      activeAbortController = controller;
+      const request = handleAnalysisRequest(port, message.payload, controller.signal);
+      void request
+        .catch((error) => {
+          if (error?.name === "AbortError") {
+            safePost(port, { type: "ABORTED" });
+            return;
+          }
+          safePost(port, {
+            type: "ERROR",
+            message: error?.message || "Unknown error during analysis."
+          });
+        })
+        .finally(() => {
+          if (activeAbortController === controller) {
+            activeAbortController = null;
+          }
+        });
+      return;
+    }
+
+    if (message?.type === "ABORT_ANALYSIS") {
+      resetAbort();
+    }
+  });
+
+});
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (message?.type !== "RUN_DEFAULT_TASK") return;
+  void chrome.storage.local.set({ [AUTO_RUN_KEY]: Date.now() });
+  if (chrome.action?.openPopup) {
+    void chrome.action.openPopup().catch(() => {});
+  }
+});
+
+function buildUserMessage(resume, task, posting) {
+  return [
+    "=== RESUME ===",
+    resume || "",
+    "",
+    "=== TASK ===",
+    task || "",
+    "",
+    "=== JOB POSTING ===",
+    posting || ""
+  ].join("\n");
+}
+
+function safePost(port, message) {
+  try {
+    port.postMessage(message);
+  } catch {
+    // Port can disconnect when the popup closes; ignore post failures.
+  }
+}
+
+function broadcast(message) {
+  for (const port of streamState.subscribers) {
+    safePost(port, message);
+  }
+}
+
+async function handleAnalysisRequest(port, payload, signal) {
+  streamState.outputText = "";
+  streamState.active = true;
+
+  const {
+    apiKey,
+    apiBaseUrl,
+    apiKeyHeader,
+    apiKeyPrefix,
+    model,
+    systemPrompt,
+    resume,
+    taskText,
+    postingText,
+    tabId
+  } = payload || {};
+
+  if (!apiBaseUrl) {
+    safePost(port, { type: "ERROR", message: "Missing API base URL." });
+    return;
+  }
+
+  if (apiKeyHeader && !apiKey) {
+    safePost(port, { type: "ERROR", message: "Missing API key." });
+    return;
+  }
+
+  if (!model) {
+    safePost(port, { type: "ERROR", message: "Missing model name." });
+    return;
+  }
+
+  if (!postingText) {
+    safePost(port, { type: "ERROR", message: "No job posting text provided." });
+    return;
+  }
+
+  if (!taskText) {
+    safePost(port, { type: "ERROR", message: "No task prompt selected." });
+    return;
+  }
+
+  const userMessage = buildUserMessage(resume, taskText, postingText);
+
+  await chrome.storage.local.set({ [OUTPUT_STORAGE_KEY]: "" });
+  openKeepalive(tabId);
+
+  try {
+    await streamChatCompletion({
+      apiKey,
+      apiBaseUrl,
+      apiKeyHeader,
+      apiKeyPrefix,
+      model,
+      systemPrompt: systemPrompt || "",
+      userMessage,
+      signal,
+      onDelta: (text) => {
+        streamState.outputText += text;
+        broadcast({ type: "DELTA", text });
+      }
+    });
+
+    broadcast({ type: "DONE" });
+  } finally {
+    streamState.active = false;
+    await chrome.storage.local.set({ [OUTPUT_STORAGE_KEY]: streamState.outputText });
+    closeKeepalive();
+  }
+}
+
+function buildChatUrl(apiBaseUrl) {
+  const trimmed = (apiBaseUrl || "").trim().replace(/\/+$/, "");
+  if (!trimmed) return "";
+  if (trimmed.endsWith("/chat/completions")) return trimmed;
+  return `${trimmed}/chat/completions`;
+}
+
+function buildAuthHeader(apiKeyHeader, apiKeyPrefix, apiKey) {
+  if (!apiKeyHeader) return null;
+  return {
+    name: apiKeyHeader,
+    value: `${apiKeyPrefix || ""}${apiKey || ""}`
+  };
+}
+
+async function streamChatCompletion({
+  apiKey,
+  apiBaseUrl,
+  apiKeyHeader,
+  apiKeyPrefix,
+  model,
+  systemPrompt,
+  userMessage,
+  signal,
+  onDelta
+}) {
+  const chatUrl = buildChatUrl(apiBaseUrl);
+  if (!chatUrl) {
+    throw new Error("Invalid API base URL.");
+  }
+
+  const headers = {
+    "Content-Type": "application/json"
+  };
+
+  const authHeader = buildAuthHeader(apiKeyHeader, apiKeyPrefix, apiKey);
+  if (authHeader) {
+    headers[authHeader.name] = authHeader.value;
+  }
+
+  const response = await fetch(chatUrl, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      model,
+      stream: true,
+      messages: [
+        { role: "system", content: systemPrompt },
+        { role: "user", content: userMessage }
+      ]
+    }),
+    signal
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`OpenAI API error ${response.status}: ${errorText}`);
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  // OpenAI streams Server-Sent Events; parse incremental deltas from data lines.
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() || "";
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed.startsWith("data:")) continue;
+
+      const data = trimmed.slice(5).trim();
+      if (!data) continue;
+      if (data === "[DONE]") return;
+
+      let parsed;
+      try {
+        parsed = JSON.parse(data);
+      } catch {
+        continue;
+      }
+
+      const delta = parsed?.choices?.[0]?.delta?.content;
+      if (delta) onDelta(delta);
+    }
+  }
+}

wwcompanion-extension/content.js

@@ -0,0 +1,140 @@
+const HEADER_LINES = new Set([
+  "OVERVIEW",
+  "PRE-SCREENING",
+  "WORK TERM RATINGS",
+  "JOB POSTING INFORMATION",
+  "APPLICATION INFORMATION",
+  "COMPANY INFORMATION",
+  "SERVICE TEAM"
+]);
+
+const ACTION_BAR_SELECTOR = "nav.floating--action-bar";
+const INJECTED_ATTR = "data-wwcompanion-default-task";
+const DEFAULT_TASK_LABEL = "Default WWCompanion Task";
+
+function isJobPostingOpen() {
+  return document.getElementsByClassName("modal__content").length > 0;
+}
+
+function sanitizePostingText(text) {
+  let cleaned = text.replaceAll("fiber_manual_record", "");
+  const lines = cleaned.split(/\r?\n/);
+  const filtered = lines.filter((line) => {
+    const trimmed = line.trim();
+    if (!trimmed) return true;
+    return !HEADER_LINES.has(trimmed.toUpperCase());
+  });
+
+  cleaned = filtered.join("\n");
+  cleaned = cleaned.replace(/[ \t]+/g, " ");
+  cleaned = cleaned.replace(/\n{3,}/g, "\n\n");
+  return cleaned.trim();
+}
+
+function buildDefaultTaskButton(templateButton) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.textContent = DEFAULT_TASK_LABEL;
+  button.className = templateButton.className;
+  button.setAttribute(INJECTED_ATTR, "true");
+  button.setAttribute("aria-label", DEFAULT_TASK_LABEL);
+  button.addEventListener("click", () => {
+    document.dispatchEvent(new CustomEvent("WWCOMPANION_RUN_DEFAULT_TASK"));
+    chrome.runtime.sendMessage({ type: "RUN_DEFAULT_TASK" });
+  });
+  return button;
+}
+
+function getActionBars() {
+  return [...document.querySelectorAll(ACTION_BAR_SELECTOR)];
+}
+
+function getActionBarButtonCount(bar) {
+  return bar.querySelectorAll(`button:not([${INJECTED_ATTR}])`).length;
+}
+
+function selectTargetActionBar(bars) {
+  if (!bars.length) return null;
+  let best = bars[0];
+  let bestCount = getActionBarButtonCount(best);
+  for (const bar of bars.slice(1)) {
+    const count = getActionBarButtonCount(bar);
+    if (count > bestCount) {
+      best = bar;
+      bestCount = count;
+    }
+  }
+  return best;
+}
+
+function ensureDefaultTaskButton() {
+  const bars = getActionBars();
+  if (!bars.length) return;
+
+  if (!isJobPostingOpen()) {
+    for (const bar of bars) {
+      const injected = bar.querySelector(`[${INJECTED_ATTR}]`);
+      if (injected) injected.remove();
+    }
+    return;
+  }
+
+  const toolbar = selectTargetActionBar(bars);
+  if (!toolbar) return;
+
+  for (const bar of bars) {
+    if (bar === toolbar) continue;
+    const injected = bar.querySelector(`[${INJECTED_ATTR}]`);
+    if (injected) injected.remove();
+  }
+
+  const existing = toolbar.querySelector(`[${INJECTED_ATTR}]`);
+  if (existing) return;
+
+  const templateButton = toolbar.querySelector("button");
+  if (!templateButton) return;
+
+  const button = buildDefaultTaskButton(templateButton);
+  const firstChild = toolbar.firstElementChild;
+  if (firstChild) {
+    toolbar.insertBefore(button, firstChild);
+  } else {
+    toolbar.appendChild(button);
+  }
+}
+
+function extractPostingText() {
+  const contents = [...document.getElementsByClassName("modal__content")];
+  if (!contents.length) {
+    return { ok: false, error: "No modal content found on this page." };
+  }
+
+  // WaterlooWorks renders multiple modal containers; choose the longest visible text block.
+  const el = contents.reduce((best, cur) =>
+    cur.innerText.length > best.innerText.length ? cur : best
+  );
+
+  const rawText = el.innerText;
+  const sanitized = sanitizePostingText(rawText);
+
+  return { ok: true, rawText, sanitized };
+}
+
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message?.type !== "EXTRACT_POSTING") return;
+
+  const result = extractPostingText();
+  sendResponse(result);
+});
+
+chrome.runtime.onConnect.addListener((port) => {
+  if (port.name !== "wwcompanion-keepalive") return;
+  port.onDisconnect.addListener(() => {});
+});
+
+const observer = new MutationObserver(() => {
+  ensureDefaultTaskButton();
+});
+
+observer.observe(document.documentElement, { childList: true, subtree: true });
+ensureDefaultTaskButton();

wwcompanion-extension/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "WWCompanion",
-  "version": "0.1.0",
-  "description": "Manual reasoning companion for WaterlooWorks job postings.",
+  "version": "0.2.2",
+  "description": "AI companion for WaterlooWorks job postings.",
   "permissions": ["storage", "activeTab"],
   "host_permissions": ["https://waterlooworks.uwaterloo.ca/*"],
   "action": {

wwcompanion-extension/popup.css

@@ -0,0 +1,333 @@
+:root {
+  --ink: #1f1a17;
+  --muted: #6b5f55;
+  --accent: #b14d2b;
+  --accent-deep: #7d321b;
+  --panel: #fff7ec;
+  --border: #e4d6c5;
+  --glow: rgba(177, 77, 43, 0.18);
+  --output-bg: rgba(255, 255, 255, 0.7);
+  --code-bg: #f4e7d2;
+  --page-bg: radial-gradient(circle at top, #fdf2df, #f7ead6 60%, #f1dcc6 100%);
+  --input-bg: #fffdf9;
+  --input-fg: var(--ink);
+  --panel-shadow: 0 12px 30px rgba(122, 80, 47, 0.12);
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --ink: #abb2bf;
+  --muted: #8b93a5;
+  --accent: #61afef;
+  --accent-deep: #56b6c2;
+  --panel: #2f343f;
+  --border: #3e4451;
+  --glow: rgba(97, 175, 239, 0.2);
+  --output-bg: rgba(47, 52, 63, 0.85);
+  --code-bg: #3a3f4b;
+  --page-bg: radial-gradient(circle at top, #2a2f3a, #21252b 60%, #1b1f25 100%);
+  --input-bg: #2b303b;
+  --input-fg: var(--ink);
+  --panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 12px;
+  width: 360px;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--ink);
+  background: var(--page-bg);
+}
+
+.title-block {
+  margin-bottom: 6px;
+}
+
+.title-line {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.subtitle {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.panel {
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--panel);
+  box-shadow: var(--panel-shadow);
+}
+
+.controls-block {
+  display: grid;
+  gap: 8px;
+}
+
+.config-block {
+  display: grid;
+  gap: 8px;
+}
+
+.field {
+  margin-top: 8px;
+  display: grid;
+  gap: 4px;
+}
+
+.inline-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.inline-field label {
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+.inline-field select {
+  flex: 1;
+}
+
+label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--muted);
+}
+
+select {
+  width: 100%;
+  padding: 6px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--input-bg);
+  color: var(--input-fg);
+  font-size: 12px;
+}
+
+.button-row {
+  display: grid;
+  grid-template-columns: minmax(64px, 0.8fr) minmax(0, 1.4fr) minmax(64px, 0.8fr);
+  gap: 8px;
+}
+
+.button-row button {
+  white-space: nowrap;
+}
+
+.button-row .primary {
+  padding: 6px 8px;
+}
+
+.stop-row {
+  display: flex;
+  justify-content: stretch;
+  margin-top: 4px;
+}
+
+.stop-row button {
+  width: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+button {
+  font-family: inherit;
+  border: none;
+  border-radius: 10px;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+.primary {
+  width: 100%;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  box-shadow: 0 6px 16px rgba(120, 85, 55, 0.12);
+}
+
+.accent {
+  background: var(--accent);
+  color: #fff9f3;
+  box-shadow: 0 8px 20px var(--glow);
+}
+
+.ghost {
+  background: transparent;
+  border: 1px solid var(--border);
+}
+
+.stop-row .ghost {
+  background: #c0392b;
+  border-color: #c0392b;
+  color: #fff6f2;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 8px;
+}
+
+.status {
+  font-size: 11px;
+  color: var(--accent-deep);
+}
+
+.output {
+  margin-top: 8px;
+  border: 1px dashed var(--border);
+  border-radius: 12px;
+  padding: 8px;
+  background: var(--output-bg);
+  min-height: 210px;
+  max-height: 360px;
+  overflow: hidden;
+}
+
+.output-body {
+  margin: 0;
+  word-break: break-word;
+  max-height: 340px;
+  overflow-y: auto;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.output-body h1,
+.output-body h2,
+.output-body h3,
+.output-body h4 {
+  margin: 0 0 6px;
+  font-size: 13px;
+  letter-spacing: 0.3px;
+}
+
+.output-body p {
+  margin: 0 0 8px;
+}
+
+.output-body ul,
+.output-body ol {
+  margin: 0 0 8px 18px;
+  padding: 0;
+}
+
+.output-body li {
+  margin-bottom: 4px;
+}
+
+.output-body blockquote {
+  margin: 0 0 8px;
+  padding-left: 10px;
+  border-left: 2px solid var(--border);
+  color: var(--muted);
+}
+
+.output-body hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 8px 0;
+}
+
+.output-body pre {
+  margin: 0 0 10px;
+  padding: 8px;
+  border-radius: 10px;
+  background: var(--code-bg);
+  overflow-x: auto;
+}
+
+.output-body code {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+  background: var(--code-bg);
+  padding: 1px 4px;
+  border-radius: 6px;
+}
+
+.output-body a {
+  color: var(--accent-deep);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :root[data-theme="system"] {
+    --ink: #abb2bf;
+    --muted: #8b93a5;
+    --accent: #61afef;
+    --accent-deep: #56b6c2;
+    --panel: #2f343f;
+    --border: #3e4451;
+    --glow: rgba(97, 175, 239, 0.2);
+    --output-bg: rgba(47, 52, 63, 0.85);
+    --code-bg: #3a3f4b;
+    --page-bg: radial-gradient(circle at top, #2a2f3a, #21252b 60%, #1b1f25 100%);
+    --input-bg: #2b303b;
+    --input-fg: var(--ink);
+    --panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+    color-scheme: dark;
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 6px;
+  gap: 8px;
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.link {
+  padding: 4px 6px;
+  background: none;
+  border-radius: 8px;
+  color: var(--accent-deep);
+  font-size: 11px;
+}

wwcompanion-extension/popup.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>WWCompanion</title>
+    <link rel="stylesheet" href="popup.css" />
+  </head>
+  <body>
+    <header class="title-block">
+      <div class="title-line">
+        <span class="title">WWCompanion</span>
+        <span class="subtitle">AI companion for WaterlooWorks.</span>
+      </div>
+    </header>
+
+    <section class="panel">
+      <div class="controls-block">
+        <div class="config-block">
+          <div class="field inline-field">
+            <label for="taskSelect">Task</label>
+            <select id="taskSelect"></select>
+          </div>
+          <div class="button-row">
+            <button id="extractBtn" class="primary">Extract</button>
+            <button id="extractRunBtn" class="accent">Extract &amp; Run</button>
+            <button id="analyzeBtn" class="ghost">Run Task</button>
+          </div>
+          <div id="stopRow" class="stop-row hidden">
+            <button id="abortBtn" class="ghost" disabled>Stop</button>
+          </div>
+        </div>
+      </div>
+      <div class="meta">
+        <span id="postingCount">Posting: 0 chars</span>
+        <span id="promptCount">Prompt: 0 chars</span>
+        <span id="status" class="status">Idle</span>
+      </div>
+    </section>
+
+    <section class="output">
+      <div id="output" class="output-body" aria-live="polite"></div>
+    </section>
+
+    <footer class="footer">
+      <div class="footer-left">
+        <button id="copyRenderedBtn" class="ghost" type="button">Copy</button>
+        <button id="copyRawBtn" class="ghost" type="button">Copy Markdown</button>
+        <button id="clearOutputBtn" class="ghost" type="button">Clear</button>
+      </div>
+      <button id="settingsBtn" class="link">Open Settings</button>
+    </footer>
+
+    <script src="popup.js"></script>
+  </body>
+</html>

wwcompanion-extension/popup.js

@@ -0,0 +1,591 @@
+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");
+const postingCountEl = document.getElementById("postingCount");
+const promptCountEl = document.getElementById("promptCount");
+const settingsBtn = document.getElementById("settingsBtn");
+const copyRenderedBtn = document.getElementById("copyRenderedBtn");
+const copyRawBtn = document.getElementById("copyRawBtn");
+const clearOutputBtn = document.getElementById("clearOutputBtn");
+
+const OUTPUT_STORAGE_KEY = "lastOutput";
+const AUTO_RUN_KEY = "autoRunDefaultTask";
+
+const state = {
+  postingText: "",
+  tasks: [],
+  port: null,
+  isAnalyzing: false,
+  outputRaw: "",
+  autoRunPending: false
+};
+
+function getStorage(keys) {
+  return new Promise((resolve) => chrome.storage.local.get(keys, resolve));
+}
+
+function buildUserMessage(resume, task, posting) {
+  return [
+    "=== RESUME ===",
+    resume || "",
+    "",
+    "=== TASK ===",
+    task || "",
+    "",
+    "=== JOB POSTING ===",
+    posting || ""
+  ].join("\n");
+}
+
+function escapeHtml(text) {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function escapeAttribute(text) {
+  return text.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+
+function sanitizeUrl(url) {
+  const trimmed = url.trim().replace(/&amp;/g, "&");
+  if (/^https?:\/\//i.test(trimmed)) return trimmed;
+  return "";
+}
+
+function applyInline(text) {
+  if (!text) return "";
+  const codeSpans = [];
+  let output = text.replace(/`([^`]+)`/g, (_match, code) => {
+    const id = codeSpans.length;
+    codeSpans.push(code);
+    return `@@CODESPAN${id}@@`;
+  });
+
+  output = output.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, url) => {
+    const safeUrl = sanitizeUrl(url);
+    if (!safeUrl) return label;
+    return `<a href="${escapeAttribute(
+      safeUrl
+    )}" target="_blank" rel="noreferrer">${label}</a>`;
+  });
+
+  output = output.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  output = output.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+  output = output.replace(/_([^_]+)_/g, "<em>$1</em>");
+
+  output = output.replace(/@@CODESPAN(\d+)@@/g, (_match, id) => {
+    const code = codeSpans[Number(id)] || "";
+    return `<code>${code}</code>`;
+  });
+
+  return output;
+}
+
+function renderMarkdown(rawText) {
+  const { text, blocks } = (() => {
+    const escaped = escapeHtml(rawText || "");
+    const codeBlocks = [];
+    const replaced = escaped.replace(/```([\s\S]*?)```/g, (_match, code) => {
+      let content = code;
+      if (content.startsWith("\n")) content = content.slice(1);
+      const firstLine = content.split("\n")[0] || "";
+      if (/^[a-z0-9+.#-]+$/i.test(firstLine.trim()) && content.includes("\n")) {
+        content = content.split("\n").slice(1).join("\n");
+      }
+      const id = codeBlocks.length;
+      codeBlocks.push(content);
+      return `@@CODEBLOCK${id}@@`;
+    });
+    return { text: replaced, blocks: codeBlocks };
+  })();
+
+  const lines = text.split(/\r?\n/);
+  const result = [];
+  let paragraph = [];
+  let listType = null;
+  let inBlockquote = false;
+  let quoteLines = [];
+
+  const flushParagraph = () => {
+    if (!paragraph.length) return;
+    result.push(`<p>${applyInline(paragraph.join("<br>"))}</p>`);
+    paragraph = [];
+  };
+
+  const closeList = () => {
+    if (!listType) return;
+    result.push(`</${listType}>`);
+    listType = null;
+  };
+
+  const openList = (type) => {
+    if (listType === type) return;
+    if (listType) result.push(`</${listType}>`);
+    listType = type;
+    result.push(`<${type}>`);
+  };
+
+  const closeBlockquote = () => {
+    if (!inBlockquote) return;
+    result.push(`<blockquote>${applyInline(quoteLines.join("<br>"))}</blockquote>`);
+    inBlockquote = false;
+    quoteLines = [];
+  };
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    const isQuoteLine = /^\s*>\s?/.test(line);
+
+    if (trimmed === "") {
+      flushParagraph();
+      closeList();
+      closeBlockquote();
+      continue;
+    }
+
+    if (inBlockquote && !isQuoteLine) {
+      closeBlockquote();
+    }
+
+    if (/^@@CODEBLOCK\d+@@$/.test(trimmed)) {
+      flushParagraph();
+      closeList();
+      closeBlockquote();
+      result.push(trimmed);
+      continue;
+    }
+
+    const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
+    if (headingMatch) {
+      flushParagraph();
+      closeList();
+      closeBlockquote();
+      const level = headingMatch[1].length;
+      result.push(`<h${level}>${applyInline(headingMatch[2])}</h${level}>`);
+      continue;
+    }
+
+    if (/^(\s*[-*_])\1{2,}\s*$/.test(line)) {
+      flushParagraph();
+      closeList();
+      closeBlockquote();
+      result.push("<hr>");
+      continue;
+    }
+
+    if (isQuoteLine) {
+      if (!inBlockquote) {
+        flushParagraph();
+        closeList();
+        inBlockquote = true;
+        quoteLines = [];
+      }
+      quoteLines.push(line.replace(/^\s*>\s?/, ""));
+      continue;
+    }
+
+    const unorderedMatch = line.match(/^[-*+]\s+(.+)$/);
+    if (unorderedMatch) {
+      flushParagraph();
+      closeBlockquote();
+      openList("ul");
+      result.push(`<li>${applyInline(unorderedMatch[1])}</li>`);
+      continue;
+    }
+
+    const orderedMatch = line.match(/^\d+\.\s+(.+)$/);
+    if (orderedMatch) {
+      flushParagraph();
+      closeBlockquote();
+      openList("ol");
+      result.push(`<li>${applyInline(orderedMatch[1])}</li>`);
+      continue;
+    }
+
+    paragraph.push(line);
+  }
+
+  flushParagraph();
+  closeList();
+  closeBlockquote();
+
+  return result
+    .join("\n")
+    .replace(/@@CODEBLOCK(\d+)@@/g, (_match, id) => {
+      const code = blocks[Number(id)] || "";
+      return `<pre><code>${code}</code></pre>`;
+    });
+}
+
+function renderOutput() {
+  outputEl.innerHTML = renderMarkdown(state.outputRaw);
+  outputEl.scrollTop = outputEl.scrollHeight;
+}
+
+function persistOutputNow() {
+  return chrome.storage.local.set({ [OUTPUT_STORAGE_KEY]: state.outputRaw });
+}
+
+function setStatus(message) {
+  statusEl.textContent = message;
+}
+
+function applyTheme(theme) {
+  const value = theme || "system";
+  document.documentElement.dataset.theme = value;
+}
+
+function setAnalyzing(isAnalyzing) {
+  state.isAnalyzing = 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);
+  }
+  updateTaskSelectState();
+}
+
+function updatePostingCount() {
+  postingCountEl.textContent = `Posting: ${state.postingText.length} chars`;
+}
+
+function updatePromptCount(count) {
+  promptCountEl.textContent = `Prompt: ${count} chars`;
+}
+
+function renderTasks(tasks) {
+  state.tasks = tasks;
+  taskSelect.innerHTML = "";
+
+  if (!tasks.length) {
+    const option = document.createElement("option");
+    option.textContent = "No tasks configured";
+    option.value = "";
+    taskSelect.appendChild(option);
+    updateTaskSelectState();
+    return;
+  }
+
+  for (const task of tasks) {
+    const option = document.createElement("option");
+    option.value = task.id;
+    option.textContent = task.name || "Untitled task";
+    taskSelect.appendChild(option);
+  }
+  updateTaskSelectState();
+}
+
+function updateTaskSelectState() {
+  const hasTasks = state.tasks.length > 0;
+  taskSelect.disabled = state.isAnalyzing || !hasTasks;
+}
+
+function isWaterlooWorksUrl(url) {
+  try {
+    return new URL(url).hostname === "waterlooworks.uwaterloo.ca";
+  } catch {
+    return false;
+  }
+}
+
+function sendToActiveTab(message) {
+  return new Promise((resolve, reject) => {
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      const tab = tabs[0];
+      if (!tab?.id) {
+        reject(new Error("No active tab found."));
+        return;
+      }
+
+      if (!isWaterlooWorksUrl(tab.url || "")) {
+        reject(new Error("Open waterlooworks.uwaterloo.ca to use this."));
+        return;
+      }
+
+      chrome.tabs.sendMessage(tab.id, message, (response) => {
+        const error = chrome.runtime.lastError;
+        if (error) {
+          const msg =
+            error.message && error.message.includes("Receiving end does not exist")
+              ? "Couldn't reach the page. Try refreshing WaterlooWorks and retry."
+              : error.message;
+          reject(new Error(msg));
+          return;
+        }
+        resolve(response);
+      });
+    });
+  });
+}
+
+function ensurePort() {
+  if (state.port) return state.port;
+
+  const port = chrome.runtime.connect({ name: "analysis" });
+  port.onMessage.addListener((message) => {
+    if (message?.type === "DELTA") {
+      state.outputRaw += message.text;
+      renderOutput();
+      return;
+    }
+
+    if (message?.type === "SYNC") {
+      state.outputRaw = message.text || "";
+      renderOutput();
+      if (message.streaming) {
+        setAnalyzing(true);
+        setStatus("Analyzing...");
+      }
+      return;
+    }
+
+    if (message?.type === "DONE") {
+      setAnalyzing(false);
+      setStatus("Done");
+      return;
+    }
+
+    if (message?.type === "ABORTED") {
+      setAnalyzing(false);
+      setStatus("Aborted.");
+      return;
+    }
+
+    if (message?.type === "ERROR") {
+      setAnalyzing(false);
+      setStatus(message.message || "Error during analysis.");
+    }
+  });
+
+  port.onDisconnect.addListener(() => {
+    state.port = null;
+    setAnalyzing(false);
+  });
+
+  state.port = port;
+  return port;
+}
+
+async function loadTasks() {
+  const { tasks = [] } = await getStorage(["tasks"]);
+  renderTasks(tasks);
+  maybeRunDefaultTask();
+}
+
+async function loadTheme() {
+  const { theme = "system" } = await getStorage(["theme"]);
+  applyTheme(theme);
+}
+
+async function handleExtract() {
+  setStatus("Extracting...");
+  try {
+    const response = await sendToActiveTab({ type: "EXTRACT_POSTING" });
+    if (!response?.ok) {
+      setStatus(response?.error || "No posting detected.");
+      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;
+  }
+}
+
+async function handleAnalyze() {
+  if (!state.postingText) {
+    setStatus("Extract a job posting first.");
+    return;
+  }
+
+  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  const tab = tabs[0];
+  if (!tab?.url || !isWaterlooWorksUrl(tab.url)) {
+    setStatus("Open waterlooworks.uwaterloo.ca to run tasks.");
+    return;
+  }
+
+  const taskId = taskSelect.value;
+  const task = state.tasks.find((item) => item.id === taskId);
+  if (!task) {
+    setStatus("Select a task prompt.");
+    return;
+  }
+
+  const { apiKey, apiBaseUrl, apiKeyHeader, apiKeyPrefix, model, systemPrompt, resume } =
+    await getStorage([
+      "apiKey",
+      "apiBaseUrl",
+      "apiKeyHeader",
+      "apiKeyPrefix",
+      "model",
+      "systemPrompt",
+      "resume"
+    ]);
+
+  if (!apiBaseUrl) {
+    setStatus("Set an API base URL in Settings.");
+    return;
+  }
+
+  if (apiKeyHeader && !apiKey) {
+    setStatus("Add your API key in Settings.");
+    return;
+  }
+
+  if (!model) {
+    setStatus("Set a model name in Settings.");
+    return;
+  }
+
+  const promptText = buildUserMessage(resume || "", task.text || "", state.postingText);
+  updatePromptCount(promptText.length);
+
+  state.outputRaw = "";
+  renderOutput();
+  setAnalyzing(true);
+  setStatus("Analyzing...");
+
+  const port = ensurePort();
+  port.postMessage({
+    type: "START_ANALYSIS",
+    payload: {
+      apiKey,
+      apiBaseUrl,
+      apiKeyHeader,
+      apiKeyPrefix,
+      model,
+      systemPrompt: systemPrompt || "",
+      resume: resume || "",
+      taskText: task.text || "",
+      postingText: state.postingText,
+      tabId: tab.id
+    }
+  });
+}
+
+async function handleExtractAndAnalyze() {
+  const extracted = await handleExtract();
+  if (!extracted) return;
+  await handleAnalyze();
+}
+
+function handleAbort() {
+  if (!state.port) return;
+  state.port.postMessage({ type: "ABORT_ANALYSIS" });
+  setAnalyzing(false);
+  setStatus("Aborted.");
+}
+
+async function handleClearOutput() {
+  state.outputRaw = "";
+  renderOutput();
+  await persistOutputNow();
+  setStatus("Output cleared.");
+}
+
+async function copyTextToClipboard(text, label) {
+  try {
+    await navigator.clipboard.writeText(text);
+    setStatus(`${label} copied.`);
+  } catch (error) {
+    setStatus(`Unable to copy ${label.toLowerCase()}.`);
+  }
+}
+
+function handleCopyRendered() {
+  const text = outputEl.innerText || "";
+  if (!text.trim()) {
+    setStatus("Nothing to copy.");
+    return;
+  }
+  void copyTextToClipboard(text, "Output");
+}
+
+function handleCopyRaw() {
+  const text = state.outputRaw || "";
+  if (!text.trim()) {
+    setStatus("Nothing to copy.");
+    return;
+  }
+  void copyTextToClipboard(text, "Markdown");
+}
+
+extractBtn.addEventListener("click", handleExtract);
+analyzeBtn.addEventListener("click", handleAnalyze);
+extractRunBtn.addEventListener("click", handleExtractAndAnalyze);
+abortBtn.addEventListener("click", handleAbort);
+settingsBtn.addEventListener("click", () => chrome.runtime.openOptionsPage());
+copyRenderedBtn.addEventListener("click", handleCopyRendered);
+copyRawBtn.addEventListener("click", handleCopyRaw);
+clearOutputBtn.addEventListener("click", () => void handleClearOutput());
+
+updatePostingCount();
+updatePromptCount(0);
+renderOutput();
+setAnalyzing(false);
+loadTasks();
+loadTheme();
+
+async function loadSavedOutput() {
+  const stored = await getStorage([OUTPUT_STORAGE_KEY]);
+  state.outputRaw = stored[OUTPUT_STORAGE_KEY] || "";
+  renderOutput();
+}
+
+async function loadAutoRunRequest() {
+  const stored = await getStorage([AUTO_RUN_KEY]);
+  if (stored[AUTO_RUN_KEY]) {
+    state.autoRunPending = true;
+    await chrome.storage.local.remove(AUTO_RUN_KEY);
+  }
+  maybeRunDefaultTask();
+}
+
+function maybeRunDefaultTask() {
+  if (!state.autoRunPending) return;
+  if (state.isAnalyzing) return;
+  if (!state.tasks.length) return;
+  taskSelect.value = state.tasks[0].id;
+  state.autoRunPending = false;
+  void handleExtractAndAnalyze();
+}
+
+loadSavedOutput();
+loadAutoRunRequest();
+ensurePort();
+
+chrome.storage.onChanged.addListener((changes) => {
+  if (changes[AUTO_RUN_KEY]?.newValue) {
+    state.autoRunPending = true;
+    void chrome.storage.local.remove(AUTO_RUN_KEY);
+    maybeRunDefaultTask();
+  }
+
+  if (changes[OUTPUT_STORAGE_KEY]?.newValue !== undefined) {
+    if (!state.isAnalyzing || !state.port) {
+      state.outputRaw = changes[OUTPUT_STORAGE_KEY].newValue || "";
+      renderOutput();
+    }
+  }
+
+  if (changes.theme) {
+    applyTheme(changes.theme.newValue || "system");
+  }
+});

wwcompanion-extension/settings.css

@@ -5,6 +5,29 @@
   --panel: #fffaf1;
   --border: #eadbc8;
   --bg: #f5ead7;
+  --input-bg: #fffdf9;
+  --input-fg: var(--ink);
+  --card-bg: #fffefb;
+  --panel-shadow: 0 18px 40px rgba(120, 85, 55, 0.12);
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --ink: #abb2bf;
+  --muted: #8b93a5;
+  --accent: #61afef;
+  --panel: #2f343f;
+  --border: #3e4451;
+  --bg: linear-gradient(160deg, #2a2f3a, #1f232b);
+  --input-bg: #2b303b;
+  --input-fg: var(--ink);
+  --card-bg: #2b303b;
+  --panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
 }
 
 * {
@@ -14,16 +37,23 @@
 body {
   margin: 0;
   padding: 24px;
-  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
-    "Times New Roman", serif;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
   color: var(--ink);
-  background: linear-gradient(160deg, #f8efe1, #efe0c9);
+  background: var(--bg);
 }
 
 .title-block {
   margin-bottom: 16px;
 }
 
+.page-bar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
 .title {
   font-size: 26px;
   font-weight: 700;
@@ -40,7 +70,7 @@ body {
   border-radius: 16px;
   padding: 16px;
   margin-bottom: 16px;
-  box-shadow: 0 18px 40px rgba(120, 85, 55, 0.12);
+  box-shadow: var(--panel-shadow);
 }
 
 .row {
@@ -51,6 +81,13 @@ body {
   margin-bottom: 12px;
 }
 
+.row-title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 h2 {
   margin: 0;
   font-size: 16px;
@@ -59,6 +96,17 @@ h2 {
   color: var(--muted);
 }
 
+.hint {
+  font-size: 12px;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--muted);
+}
+
+.hint-accent {
+  color: var(--accent);
+}
+
 .field {
   display: grid;
   gap: 6px;
@@ -73,12 +121,14 @@ label {
 }
 
 input,
-textarea {
+textarea,
+select {
   width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
-  background: #fffdf9;
+  background: var(--input-bg);
+  color: var(--input-fg);
   font-family: inherit;
   font-size: 13px;
 }
@@ -131,13 +181,41 @@ button:active {
   padding: 12px;
   border-radius: 12px;
   border: 1px solid var(--border);
-  background: #fffefb;
+  background: var(--card-bg);
   display: grid;
   gap: 8px;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :root[data-theme="system"] {
+    --ink: #abb2bf;
+    --muted: #8b93a5;
+    --accent: #61afef;
+    --panel: #2f343f;
+    --border: #3e4451;
+    --bg: linear-gradient(160deg, #2a2f3a, #1f232b);
+    --input-bg: #2b303b;
+    --input-fg: var(--ink);
+    --card-bg: #2b303b;
+    --panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+    color-scheme: dark;
+  }
+}
+
 .task-actions {
   display: flex;
-  gap: 8px;
+  gap: 6px;
   justify-content: flex-end;
 }
+
+.icon-btn {
+  width: 34px;
+  padding: 6px 0;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.icon-btn.delete {
+  color: #c0392b;
+}

wwcompanion-extension/settings.html

@@ -11,11 +11,15 @@
       <div class="title">WWCompanion Settings</div>
       <div class="subtitle">Configure prompts, resume, and API access</div>
     </header>
+    <div class="page-bar">
+      <div id="status" class="status"></div>
+      <button id="saveBtn" class="accent">Save Settings</button>
+    </div>
 
     <section class="panel">
       <div class="row">
-        <h2>OpenAI</h2>
-        <button id="saveBtn" class="accent">Save Settings</button>
+        <h2>API</h2>
+        <button id="resetApiBtn" class="ghost" type="button">Reset to OpenAI</button>
       </div>
       <div class="field">
         <label for="apiKey">API Key</label>
@@ -24,11 +28,38 @@
           <button id="toggleKey" class="ghost" type="button">Show</button>
         </div>
       </div>
+      <div class="field">
+        <label for="apiBaseUrl">API Base URL</label>
+        <input
+          id="apiBaseUrl"
+          type="text"
+          placeholder="https://api.openai.com/v1"
+        />
+      </div>
+      <div class="field">
+        <label for="apiKeyHeader">API Key Header</label>
+        <input id="apiKeyHeader" type="text" placeholder="Authorization" />
+      </div>
+      <div class="field">
+        <label for="apiKeyPrefix">API Key Prefix</label>
+        <input id="apiKeyPrefix" type="text" placeholder="Bearer " />
+      </div>
       <div class="field">
         <label for="model">Model name</label>
         <input id="model" type="text" placeholder="gpt-4o-mini" />
       </div>
-      <div id="status" class="status"></div>
+    </section>
+
+    <section class="panel">
+      <h2>Appearance</h2>
+      <div class="field">
+        <label for="themeSelect">Theme</label>
+        <select id="themeSelect">
+          <option value="system">System</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </div>
     </section>
 
     <section class="panel">
@@ -43,7 +74,10 @@
 
     <section class="panel">
       <div class="row">
+        <div class="row-title">
           <h2>Task Presets</h2>
+          <span class="hint hint-accent">Top task is the default</span>
+        </div>
         <button id="addTaskBtn" class="ghost" type="button">Add Task</button>
       </div>
       <div id="tasks" class="tasks"></div>

wwcompanion-extension/settings.js

@@ -1,4 +1,7 @@
 const apiKeyInput = document.getElementById("apiKey");
+const apiBaseUrlInput = document.getElementById("apiBaseUrl");
+const apiKeyHeaderInput = document.getElementById("apiKeyHeader");
+const apiKeyPrefixInput = document.getElementById("apiKeyPrefix");
 const modelInput = document.getElementById("model");
 const systemPromptInput = document.getElementById("systemPrompt");
 const resumeInput = document.getElementById("resume");
@@ -7,6 +10,14 @@ const addTaskBtn = document.getElementById("addTaskBtn");
 const tasksContainer = document.getElementById("tasks");
 const statusEl = document.getElementById("status");
 const toggleKeyBtn = document.getElementById("toggleKey");
+const themeSelect = document.getElementById("themeSelect");
+const resetApiBtn = document.getElementById("resetApiBtn");
+
+const OPENAI_DEFAULTS = {
+  apiBaseUrl: "https://api.openai.com/v1",
+  apiKeyHeader: "Authorization",
+  apiKeyPrefix: "Bearer "
+};
 
 function getStorage(keys) {
   return new Promise((resolve) => chrome.storage.local.get(keys, resolve));
@@ -20,6 +31,11 @@ function setStatus(message) {
   }, 2000);
 }
 
+function applyTheme(theme) {
+  const value = theme || "system";
+  document.documentElement.dataset.theme = value;
+}
+
 function newTaskId() {
   if (crypto?.randomUUID) return crypto.randomUUID();
   return `task-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
@@ -54,14 +70,56 @@ function buildTaskCard(task) {
 
   const actions = document.createElement("div");
   actions.className = "task-actions";
+  const moveUpBtn = document.createElement("button");
+  moveUpBtn.type = "button";
+  moveUpBtn.className = "ghost icon-btn move-up";
+  moveUpBtn.textContent = "↑";
+  moveUpBtn.setAttribute("aria-label", "Move task up");
+  moveUpBtn.setAttribute("title", "Move up");
+  const moveDownBtn = document.createElement("button");
+  moveDownBtn.type = "button";
+  moveDownBtn.className = "ghost icon-btn move-down";
+  moveDownBtn.textContent = "↓";
+  moveDownBtn.setAttribute("aria-label", "Move task down");
+  moveDownBtn.setAttribute("title", "Move down");
+  const addBelowBtn = document.createElement("button");
+  addBelowBtn.type = "button";
+  addBelowBtn.className = "ghost icon-btn add-below";
+  addBelowBtn.textContent = "＋";
+  addBelowBtn.setAttribute("aria-label", "Add task below");
+  addBelowBtn.setAttribute("title", "Add below");
   const duplicateBtn = document.createElement("button");
   duplicateBtn.type = "button";
-  duplicateBtn.className = "ghost";
+  duplicateBtn.className = "ghost duplicate";
   duplicateBtn.textContent = "Duplicate";
+  duplicateBtn.setAttribute("aria-label", "Duplicate task");
+  duplicateBtn.setAttribute("title", "Duplicate");
   const deleteBtn = document.createElement("button");
   deleteBtn.type = "button";
-  deleteBtn.className = "ghost";
-  deleteBtn.textContent = "Delete";
+  deleteBtn.className = "ghost icon-btn delete";
+  deleteBtn.textContent = "🗑";
+  deleteBtn.setAttribute("aria-label", "Delete task");
+  deleteBtn.setAttribute("title", "Delete");
+
+  moveUpBtn.addEventListener("click", () => {
+    const previous = card.previousElementSibling;
+    if (!previous) return;
+    tasksContainer.insertBefore(card, previous);
+    updateTaskControls();
+  });
+
+  moveDownBtn.addEventListener("click", () => {
+    const next = card.nextElementSibling;
+    if (!next) return;
+    tasksContainer.insertBefore(card, next.nextElementSibling);
+    updateTaskControls();
+  });
+
+  addBelowBtn.addEventListener("click", () => {
+    const newCard = buildTaskCard({ id: newTaskId(), name: "", text: "" });
+    card.insertAdjacentElement("afterend", newCard);
+    updateTaskControls();
+  });
 
   duplicateBtn.addEventListener("click", () => {
     const copy = {
@@ -71,12 +129,17 @@ function buildTaskCard(task) {
     };
     const newCard = buildTaskCard(copy);
     card.insertAdjacentElement("afterend", newCard);
+    updateTaskControls();
   });
 
   deleteBtn.addEventListener("click", () => {
     card.remove();
+    updateTaskControls();
   });
 
+  actions.appendChild(moveUpBtn);
+  actions.appendChild(moveDownBtn);
+  actions.appendChild(addBelowBtn);
   actions.appendChild(duplicateBtn);
   actions.appendChild(deleteBtn);
 
@@ -87,6 +150,16 @@ function buildTaskCard(task) {
   return card;
 }
 
+function updateTaskControls() {
+  const cards = [...tasksContainer.querySelectorAll(".task-card")];
+  cards.forEach((card, index) => {
+    const moveUpBtn = card.querySelector(".move-up");
+    const moveDownBtn = card.querySelector(".move-down");
+    if (moveUpBtn) moveUpBtn.disabled = index === 0;
+    if (moveDownBtn) moveDownBtn.disabled = index === cards.length - 1;
+  });
+}
+
 function collectTasks() {
   const cards = [...tasksContainer.querySelectorAll(".task-card")];
   return cards.map((card) => {
@@ -101,35 +174,65 @@ function collectTasks() {
 }
 
 async function loadSettings() {
-  const { apiKey = "", model = "", systemPrompt = "", resume = "", tasks = [] } =
-    await getStorage(["apiKey", "model", "systemPrompt", "resume", "tasks"]);
+  const {
+    apiKey = "",
+    apiBaseUrl = "",
+    apiKeyHeader = "",
+    apiKeyPrefix = "",
+    model = "",
+    systemPrompt = "",
+    resume = "",
+    tasks = [],
+    theme = "system"
+  } = await getStorage([
+    "apiKey",
+    "apiBaseUrl",
+    "apiKeyHeader",
+    "apiKeyPrefix",
+    "model",
+    "systemPrompt",
+    "resume",
+    "tasks",
+    "theme"
+  ]);
 
   apiKeyInput.value = apiKey;
+  apiBaseUrlInput.value = apiBaseUrl;
+  apiKeyHeaderInput.value = apiKeyHeader;
+  apiKeyPrefixInput.value = apiKeyPrefix;
   modelInput.value = model;
   systemPromptInput.value = systemPrompt;
   resumeInput.value = resume;
+  themeSelect.value = theme;
+  applyTheme(theme);
 
   tasksContainer.innerHTML = "";
   if (!tasks.length) {
     tasksContainer.appendChild(
       buildTaskCard({ id: newTaskId(), name: "", text: "" })
     );
+    updateTaskControls();
     return;
   }
 
   for (const task of tasks) {
     tasksContainer.appendChild(buildTaskCard(task));
   }
+  updateTaskControls();
 }
 
 async function saveSettings() {
   const tasks = collectTasks();
   await chrome.storage.local.set({
     apiKey: apiKeyInput.value.trim(),
+    apiBaseUrl: apiBaseUrlInput.value.trim(),
+    apiKeyHeader: apiKeyHeaderInput.value.trim(),
+    apiKeyPrefix: apiKeyPrefixInput.value,
     model: modelInput.value.trim(),
     systemPrompt: systemPromptInput.value,
     resume: resumeInput.value,
-    tasks
+    tasks,
+    theme: themeSelect.value
   });
   setStatus("Saved.");
 }
@@ -137,6 +240,7 @@ async function saveSettings() {
 saveBtn.addEventListener("click", () => void saveSettings());
 addTaskBtn.addEventListener("click", () => {
   tasksContainer.appendChild(buildTaskCard({ id: newTaskId(), name: "", text: "" }));
+  updateTaskControls();
 });
 
 toggleKeyBtn.addEventListener("click", () => {
@@ -145,4 +249,17 @@ toggleKeyBtn.addEventListener("click", () => {
   toggleKeyBtn.textContent = isPassword ? "Hide" : "Show";
 });
 
+themeSelect.addEventListener("change", () => applyTheme(themeSelect.value));
+resetApiBtn.addEventListener("click", async () => {
+  apiBaseUrlInput.value = OPENAI_DEFAULTS.apiBaseUrl;
+  apiKeyHeaderInput.value = OPENAI_DEFAULTS.apiKeyHeader;
+  apiKeyPrefixInput.value = OPENAI_DEFAULTS.apiKeyPrefix;
+  await chrome.storage.local.set({
+    apiBaseUrl: OPENAI_DEFAULTS.apiBaseUrl,
+    apiKeyHeader: OPENAI_DEFAULTS.apiKeyHeader,
+    apiKeyPrefix: OPENAI_DEFAULTS.apiKeyPrefix
+  });
+  setStatus("OpenAI defaults restored.");
+});
+
 loadSettings();