dev-multi-env: modularized environments (#1)

Reviewed-on: #1

wwcompanion-extension/background.js

@@ -15,6 +15,12 @@ const DEFAULT_TASKS = [
 
 const DEFAULT_SETTINGS = {
   apiKey: "",
+  apiKeys: [],
+  activeApiKeyId: "",
+  apiConfigs: [],
+  activeApiConfigId: "",
+  envConfigs: [],
+  activeEnvConfigId: "",
   apiBaseUrl: "https://api.openai.com/v1",
   apiKeyHeader: "Authorization",
   apiKeyPrefix: "Bearer ",
@@ -80,6 +86,186 @@ chrome.runtime.onInstalled.addListener(async () => {
     if (missing) updates[key] = value;
   }
 
+  const hasApiKeys =
+    Array.isArray(stored.apiKeys) && stored.apiKeys.length > 0;
+
+  if (!hasApiKeys && stored.apiKey) {
+    const id = crypto?.randomUUID
+      ? crypto.randomUUID()
+      : `key-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+    updates.apiKeys = [{ id, name: "Default", key: stored.apiKey }];
+    updates.activeApiKeyId = id;
+  } else if (hasApiKeys && stored.activeApiKeyId) {
+    const exists = stored.apiKeys.some((key) => key.id === stored.activeApiKeyId);
+    if (!exists) {
+      updates.activeApiKeyId = stored.apiKeys[0].id;
+    }
+  } else if (hasApiKeys && !stored.activeApiKeyId) {
+    updates.activeApiKeyId = stored.apiKeys[0].id;
+  }
+
+  const hasApiConfigs =
+    Array.isArray(stored.apiConfigs) && stored.apiConfigs.length > 0;
+
+  if (!hasApiConfigs) {
+    const fallbackKeyId =
+      updates.activeApiKeyId ||
+      stored.activeApiKeyId ||
+      stored.apiKeys?.[0]?.id ||
+      "";
+    const id = crypto?.randomUUID
+      ? crypto.randomUUID()
+      : `config-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+    updates.apiConfigs = [
+      {
+        id,
+        name: "Default",
+        apiBaseUrl: stored.apiBaseUrl || DEFAULT_SETTINGS.apiBaseUrl,
+        apiKeyHeader: stored.apiKeyHeader || DEFAULT_SETTINGS.apiKeyHeader,
+        apiKeyPrefix: stored.apiKeyPrefix || DEFAULT_SETTINGS.apiKeyPrefix,
+        model: stored.model || DEFAULT_SETTINGS.model,
+        apiKeyId: fallbackKeyId,
+        apiUrl: "",
+        requestTemplate: "",
+        advanced: false
+      }
+    ];
+    updates.activeApiConfigId = id;
+  } else if (stored.activeApiConfigId) {
+    const exists = stored.apiConfigs.some(
+      (config) => config.id === stored.activeApiConfigId
+    );
+    if (!exists) {
+      updates.activeApiConfigId = stored.apiConfigs[0].id;
+    }
+    const fallbackKeyId =
+      updates.activeApiKeyId ||
+      stored.activeApiKeyId ||
+      stored.apiKeys?.[0]?.id ||
+      "";
+    const normalizedConfigs = stored.apiConfigs.map((config) => ({
+      ...config,
+      apiKeyId: config.apiKeyId || fallbackKeyId,
+      apiUrl: config.apiUrl || "",
+      requestTemplate: config.requestTemplate || "",
+      advanced: Boolean(config.advanced)
+    }));
+    const needsUpdate = normalizedConfigs.some((config, index) => {
+      const original = stored.apiConfigs[index];
+      return (
+        config.apiKeyId !== original.apiKeyId ||
+        (config.apiUrl || "") !== (original.apiUrl || "") ||
+        (config.requestTemplate || "") !== (original.requestTemplate || "") ||
+        Boolean(config.advanced) !== Boolean(original.advanced)
+      );
+    });
+    if (needsUpdate) {
+      updates.apiConfigs = normalizedConfigs;
+    }
+  } else {
+    updates.activeApiConfigId = stored.apiConfigs[0].id;
+    const fallbackKeyId =
+      updates.activeApiKeyId ||
+      stored.activeApiKeyId ||
+      stored.apiKeys?.[0]?.id ||
+      "";
+    const normalizedConfigs = stored.apiConfigs.map((config) => ({
+      ...config,
+      apiKeyId: config.apiKeyId || fallbackKeyId,
+      apiUrl: config.apiUrl || "",
+      requestTemplate: config.requestTemplate || "",
+      advanced: Boolean(config.advanced)
+    }));
+    const needsUpdate = normalizedConfigs.some((config, index) => {
+      const original = stored.apiConfigs[index];
+      return (
+        config.apiKeyId !== original.apiKeyId ||
+        (config.apiUrl || "") !== (original.apiUrl || "") ||
+        (config.requestTemplate || "") !== (original.requestTemplate || "") ||
+        Boolean(config.advanced) !== Boolean(original.advanced)
+      );
+    });
+    if (needsUpdate) {
+      updates.apiConfigs = normalizedConfigs;
+    }
+  }
+
+  const resolvedApiConfigs = updates.apiConfigs || stored.apiConfigs || [];
+  const resolvedActiveApiConfigId =
+    updates.activeApiConfigId ||
+    stored.activeApiConfigId ||
+    resolvedApiConfigs[0]?.id ||
+    "";
+  const hasEnvConfigs =
+    Array.isArray(stored.envConfigs) && stored.envConfigs.length > 0;
+
+  if (!hasEnvConfigs) {
+    const id = crypto?.randomUUID
+      ? crypto.randomUUID()
+      : `env-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+    updates.envConfigs = [
+      {
+        id,
+        name: "Default",
+        apiConfigId: resolvedActiveApiConfigId,
+        systemPrompt: stored.systemPrompt || DEFAULT_SETTINGS.systemPrompt
+      }
+    ];
+    updates.activeEnvConfigId = id;
+  } else {
+    const normalizedEnvs = stored.envConfigs.map((config) => ({
+      ...config,
+      apiConfigId: config.apiConfigId || resolvedActiveApiConfigId,
+      systemPrompt: config.systemPrompt ?? ""
+    }));
+    const envNeedsUpdate = normalizedEnvs.some((config, index) => {
+      const original = stored.envConfigs[index];
+      return (
+        config.apiConfigId !== original.apiConfigId ||
+        (config.systemPrompt || "") !== (original.systemPrompt || "")
+      );
+    });
+    if (envNeedsUpdate) {
+      updates.envConfigs = normalizedEnvs;
+    }
+
+    const envActiveId = updates.activeEnvConfigId || stored.activeEnvConfigId;
+    if (envActiveId) {
+      const exists = stored.envConfigs.some(
+        (config) => config.id === envActiveId
+      );
+      if (!exists) {
+        updates.activeEnvConfigId = stored.envConfigs[0].id;
+      }
+    } else {
+      updates.activeEnvConfigId = stored.envConfigs[0].id;
+    }
+  }
+
+  const resolvedEnvConfigs = updates.envConfigs || stored.envConfigs || [];
+  const defaultEnvId =
+    resolvedEnvConfigs[0]?.id ||
+    updates.activeEnvConfigId ||
+    stored.activeEnvConfigId ||
+    "";
+  const taskSource = Array.isArray(updates.tasks)
+    ? updates.tasks
+    : Array.isArray(stored.tasks)
+      ? stored.tasks
+      : [];
+  if (taskSource.length) {
+    const normalizedTasks = taskSource.map((task) => ({
+      ...task,
+      defaultEnvId: task.defaultEnvId || defaultEnvId
+    }));
+    const needsTaskUpdate = normalizedTasks.some(
+      (task, index) => task.defaultEnvId !== taskSource[index]?.defaultEnvId
+    );
+    if (needsTaskUpdate) {
+      updates.tasks = normalizedTasks;
+    }
+  }
+
   if (Object.keys(updates).length) {
     await chrome.storage.local.set(updates);
   }
@@ -175,6 +361,9 @@ async function handleAnalysisRequest(port, payload, signal) {
 
   const {
     apiKey,
+    apiMode,
+    apiUrl,
+    requestTemplate,
     apiBaseUrl,
     apiKeyHeader,
     apiKeyPrefix,
@@ -186,19 +375,35 @@ async function handleAnalysisRequest(port, payload, signal) {
     tabId
   } = payload || {};
 
-  if (!apiBaseUrl) {
+  const isAdvanced = apiMode === "advanced";
-    safePost(port, { type: "ERROR", message: "Missing API base URL." });
+  if (isAdvanced) {
-    return;
+    if (!apiUrl) {
-  }
+      safePost(port, { type: "ERROR", message: "Missing API URL." });
+      return;
+    }
+    if (!requestTemplate) {
+      safePost(port, { type: "ERROR", message: "Missing request template." });
+      return;
+    }
+    if (apiKeyHeader && !apiKey) {
+      safePost(port, { type: "ERROR", message: "Missing API key." });
+      return;
+    }
+  } else {
+    if (!apiBaseUrl) {
+      safePost(port, { type: "ERROR", message: "Missing API base URL." });
+      return;
+    }
 
-  if (apiKeyHeader && !apiKey) {
+    if (apiKeyHeader && !apiKey) {
-    safePost(port, { type: "ERROR", message: "Missing API key." });
+      safePost(port, { type: "ERROR", message: "Missing API key." });
-    return;
+      return;
-  }
+    }
 
-  if (!model) {
+    if (!model) {
-    safePost(port, { type: "ERROR", message: "Missing model name." });
+      safePost(port, { type: "ERROR", message: "Missing model name." });
-    return;
+      return;
+    }
   }
 
   if (!postingText) {
@@ -217,20 +422,39 @@ async function handleAnalysisRequest(port, payload, signal) {
   openKeepalive(tabId);
 
   try {
-    await streamChatCompletion({
+    if (isAdvanced) {
-      apiKey,
+      await streamCustomCompletion({
-      apiBaseUrl,
+        apiKey,
-      apiKeyHeader,
+        apiUrl,
-      apiKeyPrefix,
+        requestTemplate,
-      model,
+        apiKeyHeader,
-      systemPrompt: systemPrompt || "",
+        apiKeyPrefix,
-      userMessage,
+        apiBaseUrl,
-      signal,
+        model,
-      onDelta: (text) => {
+        systemPrompt: systemPrompt || "",
-        streamState.outputText += text;
+        userMessage,
-        broadcast({ type: "DELTA", text });
+        signal,
-      }
+        onDelta: (text) => {
-    });
+          streamState.outputText += text;
+          broadcast({ type: "DELTA", text });
+        }
+      });
+    } else {
+      await streamChatCompletion({
+        apiKey,
+        apiBaseUrl,
+        apiKeyHeader,
+        apiKeyPrefix,
+        model,
+        systemPrompt: systemPrompt || "",
+        userMessage,
+        signal,
+        onDelta: (text) => {
+          streamState.outputText += text;
+          broadcast({ type: "DELTA", text });
+        }
+      });
+    }
 
     broadcast({ type: "DONE" });
   } finally {
@@ -255,6 +479,73 @@ function buildAuthHeader(apiKeyHeader, apiKeyPrefix, apiKey) {
   };
 }
 
+function replaceQuotedToken(template, token, value) {
+  const quoted = `"${token}"`;
+  const jsonValue = JSON.stringify(value ?? "");
+  return template.split(quoted).join(jsonValue);
+}
+
+function replaceTemplateTokens(template, replacements) {
+  let output = template || "";
+  for (const [token, value] of Object.entries(replacements)) {
+    output = replaceQuotedToken(output, token, value ?? "");
+    output = output.split(token).join(value ?? "");
+  }
+  return output;
+}
+
+function replaceUrlTokens(url, replacements) {
+  let output = url || "";
+  for (const [token, value] of Object.entries(replacements)) {
+    output = output.split(token).join(encodeURIComponent(value ?? ""));
+  }
+  return output;
+}
+
+function buildTemplateBody(template, replacements) {
+  const filled = replaceTemplateTokens(template, replacements);
+  try {
+    return JSON.parse(filled);
+  } catch {
+    throw new Error("Invalid request template JSON.");
+  }
+}
+
+async function readSseStream(response, onDelta) {
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  // OpenAI-compatible SSE stream; 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);
+    }
+  }
+}
+
 async function streamChatCompletion({
   apiKey,
   apiBaseUrl,
@@ -296,39 +587,54 @@ async function streamChatCompletion({
 
   if (!response.ok) {
     const errorText = await response.text();
-    throw new Error(`OpenAI API error ${response.status}: ${errorText}`);
+    throw new Error(`API error ${response.status}: ${errorText}`);
   }
 
-  const reader = response.body.getReader();
+  await readSseStream(response, onDelta);
-  const decoder = new TextDecoder();
+}
-  let buffer = "";
+
-
+async function streamCustomCompletion({
-  // OpenAI streams Server-Sent Events; parse incremental deltas from data lines.
+  apiKey,
-  while (true) {
+  apiUrl,
-    const { value, done } = await reader.read();
+  requestTemplate,
-    if (done) break;
+  apiKeyHeader,
-
+  apiKeyPrefix,
-    buffer += decoder.decode(value, { stream: true });
+  apiBaseUrl,
-    const lines = buffer.split("\n");
+  model,
-    buffer = lines.pop() || "";
+  systemPrompt,
-
+  userMessage,
-    for (const line of lines) {
+  signal,
-      const trimmed = line.trim();
+  onDelta
-      if (!trimmed.startsWith("data:")) continue;
+}) {
-
+  const replacements = {
-      const data = trimmed.slice(5).trim();
+    PROMPT_GOES_HERE: userMessage,
-      if (!data) continue;
+    SYSTEM_PROMPT_GOES_HERE: systemPrompt,
-      if (data === "[DONE]") return;
+    API_KEY_GOES_HERE: apiKey,
-
+    MODEL_GOES_HERE: model || "",
-      let parsed;
+    API_BASE_URL_GOES_HERE: apiBaseUrl || ""
-      try {
+  };
-        parsed = JSON.parse(data);
+  const resolvedUrl = replaceUrlTokens(apiUrl, replacements);
-      } catch {
+  const body = buildTemplateBody(requestTemplate, replacements);
-        continue;
+
-      }
+  const headers = {
-
+    "Content-Type": "application/json"
-      const delta = parsed?.choices?.[0]?.delta?.content;
+  };
-      if (delta) onDelta(delta);
+  const authHeader = buildAuthHeader(apiKeyHeader, apiKeyPrefix, apiKey);
-    }
+  if (authHeader) {
-  }
+    headers[authHeader.name] = authHeader.value;
+  }
+
+  const response = await fetch(resolvedUrl, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(body),
+    signal
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`API error ${response.status}: ${errorText}`);
+  }
+
+  await readSseStream(response, onDelta);
 }

wwcompanion-extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "WWCompanion",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "AI companion for WaterlooWorks job postings.",
   "permissions": ["storage", "activeTab"],
   "host_permissions": ["https://waterlooworks.uwaterloo.ca/*"],

wwcompanion-extension/popup.css

@@ -127,28 +127,33 @@ select {
   font-size: 12px;
 }
 
-.button-row {
+.env-row {
-  display: grid;
+  display: flex;
-  grid-template-columns: minmax(64px, 0.8fr) minmax(0, 1.4fr) minmax(64px, 0.8fr);
+  align-items: flex-end;
+}
+
+.env-row .env-field {
+  flex: 1;
+  margin: 0;
+}
+
+.task-row {
+  display: flex;
+  align-items: flex-end;
   gap: 8px;
 }
 
-.button-row button {
+.task-row button {
-  white-space: nowrap;
+  padding: 6px 15px;
 }
 
-.button-row .primary {
+.task-row .task-field {
-  padding: 6px 8px;
+  flex: 1;
+  margin: 0;
 }
 
-.stop-row {
+.task-row select {
-  display: flex;
+  min-width: 0;
-  justify-content: stretch;
-  margin-top: 4px;
-}
-
-.stop-row button {
-  width: 100%;
 }
 
 .hidden {
@@ -192,7 +197,7 @@ button:active {
   border: 1px solid var(--border);
 }
 
-.stop-row .ghost {
+.stop-btn {
   background: #c0392b;
   border-color: #c0392b;
   color: #fff6f2;

wwcompanion-extension/popup.html

@@ -17,17 +17,19 @@
     <section class="panel">
       <div class="controls-block">
         <div class="config-block">
-          <div class="field inline-field">
+          <div class="env-row">
-            <label for="taskSelect">Task</label>
+            <div class="field inline-field env-field">
-            <select id="taskSelect"></select>
+              <label for="envSelect">Environment</label>
+              <select id="envSelect"></select>
+            </div>
           </div>
-          <div class="button-row">
+          <div class="task-row">
-            <button id="extractBtn" class="primary">Extract</button>
+            <div class="field inline-field task-field">
-            <button id="extractRunBtn" class="accent">Extract &amp; Run</button>
+              <label for="taskSelect">Task</label>
-            <button id="analyzeBtn" class="ghost">Run Task</button>
+              <select id="taskSelect"></select>
-          </div>
+            </div>
-          <div id="stopRow" class="stop-row hidden">
+            <button id="runBtn" class="accent">Run</button>
-            <button id="abortBtn" class="ghost" disabled>Stop</button>
+            <button id="abortBtn" class="ghost stop-btn hidden" disabled>Stop</button>
           </div>
         </div>
       </div>

wwcompanion-extension/popup.js

@@ -1,10 +1,7 @@
-const extractBtn = document.getElementById("extractBtn");
+const runBtn = document.getElementById("runBtn");
-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 envSelect = document.getElementById("envSelect");
 const outputEl = document.getElementById("output");
 const statusEl = document.getElementById("status");
 const postingCountEl = document.getElementById("postingCount");
@@ -16,14 +13,19 @@ const clearOutputBtn = document.getElementById("clearOutputBtn");
 
 const OUTPUT_STORAGE_KEY = "lastOutput";
 const AUTO_RUN_KEY = "autoRunDefaultTask";
+const LAST_TASK_KEY = "lastSelectedTaskId";
+const LAST_ENV_KEY = "lastSelectedEnvId";
 
 const state = {
   postingText: "",
   tasks: [],
+  envs: [],
   port: null,
   isAnalyzing: false,
   outputRaw: "",
-  autoRunPending: false
+  autoRunPending: false,
+  selectedTaskId: "",
+  selectedEnvId: ""
 };
 
 function getStorage(keys) {
@@ -245,15 +247,12 @@ function applyTheme(theme) {
 
 function setAnalyzing(isAnalyzing) {
   state.isAnalyzing = isAnalyzing;
-  analyzeBtn.disabled = isAnalyzing;
+  runBtn.disabled = isAnalyzing;
   abortBtn.disabled = !isAnalyzing;
-  extractBtn.disabled = isAnalyzing;
+  runBtn.classList.toggle("hidden", isAnalyzing);
-  extractRunBtn.disabled = isAnalyzing;
+  abortBtn.classList.toggle("hidden", !isAnalyzing);
-  if (buttonRow && stopRow) {
-    buttonRow.classList.toggle("hidden", isAnalyzing);
-    stopRow.classList.toggle("hidden", !isAnalyzing);
-  }
   updateTaskSelectState();
+  updateEnvSelectState();
 }
 
 function updatePostingCount() {
@@ -286,11 +285,70 @@ function renderTasks(tasks) {
   updateTaskSelectState();
 }
 
+function renderEnvironments(envs) {
+  state.envs = envs;
+  envSelect.innerHTML = "";
+
+  if (!envs.length) {
+    const option = document.createElement("option");
+    option.textContent = "No environments configured";
+    option.value = "";
+    envSelect.appendChild(option);
+    updateEnvSelectState();
+    return;
+  }
+
+  for (const env of envs) {
+    const option = document.createElement("option");
+    option.value = env.id;
+    option.textContent = env.name || "Default";
+    envSelect.appendChild(option);
+  }
+  updateEnvSelectState();
+}
+
 function updateTaskSelectState() {
   const hasTasks = state.tasks.length > 0;
   taskSelect.disabled = state.isAnalyzing || !hasTasks;
 }
 
+function updateEnvSelectState() {
+  const hasEnvs = state.envs.length > 0;
+  envSelect.disabled = state.isAnalyzing || !hasEnvs;
+}
+
+function getTaskDefaultEnvId(task) {
+  return task?.defaultEnvId || state.envs[0]?.id || "";
+}
+
+function setEnvironmentSelection(envId) {
+  const target =
+    envId && state.envs.some((env) => env.id === envId)
+      ? envId
+      : state.envs[0]?.id || "";
+  if (target) {
+    envSelect.value = target;
+  }
+  state.selectedEnvId = target;
+}
+
+function selectTask(taskId, { resetEnv } = { resetEnv: false }) {
+  if (!taskId) return;
+  taskSelect.value = taskId;
+  state.selectedTaskId = taskId;
+  const task = state.tasks.find((item) => item.id === taskId);
+  if (resetEnv) {
+    setEnvironmentSelection(getTaskDefaultEnvId(task));
+  }
+}
+
+async function persistSelections() {
+  await chrome.storage.local.set({
+    [LAST_TASK_KEY]: state.selectedTaskId,
+    [LAST_ENV_KEY]: state.selectedEnvId
+  });
+}
+
 function isWaterlooWorksUrl(url) {
   try {
     return new URL(url).hostname === "waterlooworks.uwaterloo.ca";
@@ -377,9 +435,45 @@ function ensurePort() {
   return port;
 }
 
-async function loadTasks() {
+async function loadConfig() {
-  const { tasks = [] } = await getStorage(["tasks"]);
+  const stored = await getStorage([
+    "tasks",
+    "envConfigs",
+    LAST_TASK_KEY,
+    LAST_ENV_KEY
+  ]);
+  const tasks = Array.isArray(stored.tasks) ? stored.tasks : [];
+  const envs = Array.isArray(stored.envConfigs) ? stored.envConfigs : [];
   renderTasks(tasks);
+  renderEnvironments(envs);
+
+  if (!tasks.length) {
+    state.selectedTaskId = "";
+    state.selectedEnvId = envs[0]?.id || "";
+    return;
+  }
+
+  const storedTaskId = stored[LAST_TASK_KEY];
+  const storedEnvId = stored[LAST_ENV_KEY];
+  const initialTaskId = tasks.some((task) => task.id === storedTaskId)
+    ? storedTaskId
+    : tasks[0].id;
+  selectTask(initialTaskId, { resetEnv: false });
+
+  const task = tasks.find((item) => item.id === initialTaskId);
+  if (storedEnvId && envs.some((env) => env.id === storedEnvId)) {
+    setEnvironmentSelection(storedEnvId);
+  } else {
+    setEnvironmentSelection(getTaskDefaultEnvId(task));
+  }
+
+  if (
+    storedTaskId !== state.selectedTaskId ||
+    storedEnvId !== state.selectedEnvId
+  ) {
+    await persistSelections();
+  }
+
   maybeRunDefaultTask();
 }
 
@@ -428,30 +522,96 @@ async function handleAnalyze() {
     return;
   }
 
-  const { apiKey, apiBaseUrl, apiKeyHeader, apiKeyPrefix, model, systemPrompt, resume } =
+  const {
-    await getStorage([
+    apiKeys = [],
-      "apiKey",
+    activeApiKeyId = "",
-      "apiBaseUrl",
+    apiConfigs = [],
-      "apiKeyHeader",
+    activeApiConfigId = "",
-      "apiKeyPrefix",
+    envConfigs = [],
-      "model",
+    apiBaseUrl,
-      "systemPrompt",
+    apiKeyHeader,
-      "resume"
+    apiKeyPrefix,
-    ]);
+    model,
+    systemPrompt,
+    resume
+  } = await getStorage([
+    "apiKeys",
+    "activeApiKeyId",
+    "apiConfigs",
+    "activeApiConfigId",
+    "envConfigs",
+    "apiBaseUrl",
+    "apiKeyHeader",
+    "apiKeyPrefix",
+    "model",
+    "systemPrompt",
+    "resume"
+  ]);
 
-  if (!apiBaseUrl) {
+  const resolvedConfigs = Array.isArray(apiConfigs) ? apiConfigs : [];
-    setStatus("Set an API base URL in Settings.");
+  const resolvedEnvs = Array.isArray(envConfigs) ? envConfigs : [];
+  const selectedEnvId = envSelect.value;
+  const activeEnv =
+    resolvedEnvs.find((entry) => entry.id === selectedEnvId) ||
+    resolvedEnvs[0];
+  if (!activeEnv) {
+    setStatus("Add an environment in Settings.");
     return;
   }
-
+  const resolvedSystemPrompt =
-  if (apiKeyHeader && !apiKey) {
+    activeEnv.systemPrompt ?? systemPrompt ?? "";
-    setStatus("Add your API key in Settings.");
+  const resolvedApiConfigId =
+    activeEnv.apiConfigId || activeApiConfigId || resolvedConfigs[0]?.id || "";
+  const activeConfig =
+    resolvedConfigs.find((entry) => entry.id === resolvedApiConfigId) ||
+    resolvedConfigs[0];
+  if (!activeConfig) {
+    setStatus("Add an API configuration in Settings.");
     return;
   }
+  const isAdvanced = Boolean(activeConfig?.advanced);
+  const resolvedApiUrl = activeConfig?.apiUrl || "";
+  const resolvedTemplate = activeConfig?.requestTemplate || "";
+  const resolvedApiBaseUrl = activeConfig?.apiBaseUrl || apiBaseUrl || "";
+  const resolvedApiKeyHeader = activeConfig?.apiKeyHeader ?? apiKeyHeader ?? "";
+  const resolvedApiKeyPrefix = activeConfig?.apiKeyPrefix ?? apiKeyPrefix ?? "";
+  const resolvedModel = activeConfig?.model || model || "";
 
-  if (!model) {
+  const resolvedKeys = Array.isArray(apiKeys) ? apiKeys : [];
-    setStatus("Set a model name in Settings.");
+  const resolvedKeyId =
-    return;
+    activeConfig?.apiKeyId || activeApiKeyId || resolvedKeys[0]?.id || "";
+  const activeKey = resolvedKeys.find((entry) => entry.id === resolvedKeyId);
+  const apiKey = activeKey?.key || "";
+
+  if (isAdvanced) {
+    if (!resolvedApiUrl) {
+      setStatus("Set an API URL in Settings.");
+      return;
+    }
+    if (!resolvedTemplate) {
+      setStatus("Set a request template in Settings.");
+      return;
+    }
+    const needsKey =
+      Boolean(resolvedApiKeyHeader) ||
+      resolvedTemplate.includes("API_KEY_GOES_HERE");
+    if (needsKey && !apiKey) {
+      setStatus("Add an API key in Settings.");
+      return;
+    }
+  } else {
+    if (!resolvedApiBaseUrl) {
+      setStatus("Set an API base URL in Settings.");
+      return;
+    }
+    if (resolvedApiKeyHeader && !apiKey) {
+      setStatus("Add an API key in Settings.");
+      return;
+    }
+    if (!resolvedModel) {
+      setStatus("Set a model name in Settings.");
+      return;
+    }
   }
 
   const promptText = buildUserMessage(resume || "", task.text || "", state.postingText);
@@ -467,11 +627,14 @@ async function handleAnalyze() {
     type: "START_ANALYSIS",
     payload: {
       apiKey,
-      apiBaseUrl,
+      apiMode: isAdvanced ? "advanced" : "basic",
-      apiKeyHeader,
+      apiUrl: resolvedApiUrl,
-      apiKeyPrefix,
+      requestTemplate: resolvedTemplate,
-      model,
+      apiBaseUrl: resolvedApiBaseUrl,
-      systemPrompt: systemPrompt || "",
+      apiKeyHeader: resolvedApiKeyHeader,
+      apiKeyPrefix: resolvedApiKeyPrefix,
+      model: resolvedModel,
+      systemPrompt: resolvedSystemPrompt,
       resume: resume || "",
       taskText: task.text || "",
       postingText: state.postingText,
@@ -527,20 +690,26 @@ function handleCopyRaw() {
   void copyTextToClipboard(text, "Markdown");
 }
 
-extractBtn.addEventListener("click", handleExtract);
+runBtn.addEventListener("click", handleExtractAndAnalyze);
-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());
+taskSelect.addEventListener("change", () => {
+  selectTask(taskSelect.value, { resetEnv: true });
+  void persistSelections();
+});
+envSelect.addEventListener("change", () => {
+  setEnvironmentSelection(envSelect.value);
+  void persistSelections();
+});
 
 updatePostingCount();
 updatePromptCount(0);
 renderOutput();
 setAnalyzing(false);
-loadTasks();
+loadConfig();
 loadTheme();
 
 async function loadSavedOutput() {
@@ -562,7 +731,8 @@ function maybeRunDefaultTask() {
   if (!state.autoRunPending) return;
   if (state.isAnalyzing) return;
   if (!state.tasks.length) return;
-  taskSelect.value = state.tasks[0].id;
+  selectTask(state.tasks[0].id, { resetEnv: true });
+  void persistSelections();
   state.autoRunPending = false;
   void handleExtractAndAnalyze();
 }

wwcompanion-extension/settings.css

@@ -124,6 +124,11 @@ body {
   margin-bottom: 12px;
 }
 
+.row-actions {
+  display: flex;
+  gap: 8px;
+}
+
 .row-title {
   display: flex;
   align-items: baseline;
@@ -229,6 +234,83 @@ button:active {
   gap: 8px;
 }
 
+.api-keys {
+  display: grid;
+  gap: 12px;
+}
+
+.api-key-card {
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  display: grid;
+  gap: 8px;
+}
+
+.api-key-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.api-key-actions .delete,
+.api-config-actions .delete,
+.env-config-actions .delete,
+.task-actions .delete {
+  background: #c0392b;
+  border-color: #c0392b;
+  color: #fff6f2;
+}
+
+.api-configs {
+  display: grid;
+  gap: 12px;
+}
+
+.api-config-card {
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  display: grid;
+  gap: 8px;
+}
+
+.api-config-card.is-advanced .basic-only {
+  display: none;
+}
+
+.api-config-card:not(.is-advanced) .advanced-only {
+  display: none;
+}
+
+.api-config-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.env-configs {
+  display: grid;
+  gap: 12px;
+}
+
+.env-config-card {
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  display: grid;
+  gap: 8px;
+}
+
+.env-config-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]),
   :root[data-theme="system"] {
@@ -251,7 +333,3 @@ button:active {
   gap: 6px;
   justify-content: flex-end;
 }
-
-.task-actions .delete {
-  color: #c0392b;
-}

wwcompanion-extension/settings.html

@@ -16,49 +16,6 @@
       <button id="saveBtn" class="accent">Save Settings</button>
     </div>
 
-    <details class="panel">
-      <summary class="panel-summary">
-        <span class="panel-caret" aria-hidden="true">
-          <span class="caret-closed">▸</span>
-          <span class="caret-open">▾</span>
-        </span>
-        <h2>API</h2>
-      </summary>
-      <div class="panel-body">
-        <div class="row">
-          <div></div>
-          <button id="resetApiBtn" class="ghost" type="button">Reset to OpenAI</button>
-        </div>
-        <div class="field">
-          <label for="apiKey">API Key</label>
-          <div class="inline">
-            <input id="apiKey" type="password" autocomplete="off" placeholder="sk-..." />
-            <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>
-    </details>
-
     <details class="panel">
       <summary class="panel-summary">
         <span class="panel-caret" aria-hidden="true">
@@ -85,14 +42,14 @@
           <span class="caret-closed">▸</span>
           <span class="caret-open">▾</span>
         </span>
-        <h2>System Prompt</h2>
+        <h2>API KEYS</h2>
       </summary>
       <div class="panel-body">
-        <textarea
+        <div class="row">
-          id="systemPrompt"
+          <div></div>
-          rows="8"
+          <button id="addApiKeyBtn" class="ghost" type="button">Add Key</button>
-          placeholder="Define tone and standards..."
+        </div>
-        ></textarea>
+        <div id="apiKeys" class="api-keys"></div>
       </div>
     </details>
 
@@ -102,7 +59,49 @@
           <span class="caret-closed">▸</span>
           <span class="caret-open">▾</span>
         </span>
-        <h2>Resume</h2>
+        <h2>API</h2>
+      </summary>
+      <div class="panel-body">
+        <div class="row">
+          <div></div>
+          <div class="row-actions">
+            <button id="addApiConfigBtn" class="ghost" type="button">Add Config</button>
+          </div>
+        </div>
+        <div id="apiConfigs" class="api-configs"></div>
+      </div>
+    </details>
+
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
+        <div class="row-title">
+          <h2>Environment</h2>
+          <span class="hint hint-accent">API configuration and system prompt go here</span>
+        </div>
+      </summary>
+      <div class="panel-body">
+        <div class="row">
+          <div></div>
+          <button id="addEnvConfigBtn" class="ghost" type="button">Add Config</button>
+        </div>
+        <div id="envConfigs" class="env-configs"></div>
+      </div>
+    </details>
+
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
+        <div class="row-title">
+          <h2>Resume</h2>
+          <span class="hint hint-accent">Text to your profile goes here</span>
+        </div>
       </summary>
       <div class="panel-body">
         <textarea id="resume" rows="10" placeholder="Paste your resume text..."></textarea>