reworked UI, moved environment selection to tasks

2026-01-17 17:36:44 -05:00
parent e3c7cbba95
commit df80aee8eb
6 changed files with 467 additions and 118 deletions
--- a/wwcompanion-extension/background.js
+++ b/wwcompanion-extension/background.js
@@ -242,6 +242,30 @@ chrome.runtime.onInstalled.addListener(async () => {
    }
  }

+  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);
  }
--- a/wwcompanion-extension/popup.css
+++ b/wwcompanion-extension/popup.css
@@ -127,28 +127,33 @@ select {
  font-size: 12px;
 }

-.button-row {
-  display: grid;
-  grid-template-columns: minmax(64px, 0.8fr) minmax(0, 1.4fr) minmax(64px, 0.8fr);
+.env-row {
+  display: flex;
+  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 {
-  white-space: nowrap;
+.task-row button {
+  padding: 6px 15px;
 }

-.button-row .primary {
-  padding: 6px 8px;
+.task-row .task-field {
+  flex: 1;
+  margin: 0;
 }

-.stop-row {
-  display: flex;
-  justify-content: stretch;
-  margin-top: 4px;
-}
-
-.stop-row button {
-  width: 100%;
+.task-row select {
+  min-width: 0;
 }

 .hidden {
@@ -192,7 +197,7 @@ button:active {
  border: 1px solid var(--border);
 }

-.stop-row .ghost {
+.stop-btn {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff6f2;
--- a/wwcompanion-extension/popup.html
+++ b/wwcompanion-extension/popup.html
@@ -17,17 +17,19 @@
    <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 class="env-row">
+            <div class="field inline-field env-field">
+              <label for="envSelect">Environment</label>
+              <select id="envSelect"></select>
+            </div>
          </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 class="task-row">
+            <div class="field inline-field task-field">
+              <label for="taskSelect">Task</label>
+              <select id="taskSelect"></select>
+            </div>
+            <button id="runBtn" class="accent">Run</button>
+            <button id="abortBtn" class="ghost stop-btn hidden" disabled>Stop</button>
          </div>
        </div>
      </div>
--- a/wwcompanion-extension/popup.js
+++ b/wwcompanion-extension/popup.js
@@ -1,10 +1,7 @@
-const extractBtn = document.getElementById("extractBtn");
-const analyzeBtn = document.getElementById("analyzeBtn");
+const runBtn = document.getElementById("runBtn");
 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;
-  extractRunBtn.disabled = isAnalyzing;
-  if (buttonRow && stopRow) {
-    buttonRow.classList.toggle("hidden", isAnalyzing);
-    stopRow.classList.toggle("hidden", !isAnalyzing);
-  }
+  runBtn.classList.toggle("hidden", isAnalyzing);
+  abortBtn.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() {
-  const { tasks = [] } = await getStorage(["tasks"]);
+async function loadConfig() {
+  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();
 }

@@ -434,7 +528,6 @@ async function handleAnalyze() {
    apiConfigs = [],
    activeApiConfigId = "",
    envConfigs = [],
-    activeEnvConfigId = "",
    apiBaseUrl,
    apiKeyHeader,
    apiKeyPrefix,
@@ -447,7 +540,6 @@ async function handleAnalyze() {
    "apiConfigs",
    "activeApiConfigId",
    "envConfigs",
-    "activeEnvConfigId",
    "apiBaseUrl",
    "apiKeyHeader",
    "apiKeyPrefix",
@@ -458,13 +550,18 @@ async function handleAnalyze() {

  const resolvedConfigs = Array.isArray(apiConfigs) ? apiConfigs : [];
  const resolvedEnvs = Array.isArray(envConfigs) ? envConfigs : [];
+  const selectedEnvId = envSelect.value;
  const activeEnv =
-    resolvedEnvs.find((entry) => entry.id === activeEnvConfigId) ||
+    resolvedEnvs.find((entry) => entry.id === selectedEnvId) ||
    resolvedEnvs[0];
+  if (!activeEnv) {
+    setStatus("Add an environment in Settings.");
+    return;
+  }
  const resolvedSystemPrompt =
-    activeEnv?.systemPrompt ?? systemPrompt ?? "";
+    activeEnv.systemPrompt ?? systemPrompt ?? "";
  const resolvedApiConfigId =
-    activeEnv?.apiConfigId || activeApiConfigId || resolvedConfigs[0]?.id || "";
+    activeEnv.apiConfigId || activeApiConfigId || resolvedConfigs[0]?.id || "";
  const activeConfig =
    resolvedConfigs.find((entry) => entry.id === resolvedApiConfigId) ||
    resolvedConfigs[0];
@@ -593,20 +690,26 @@ function handleCopyRaw() {
  void copyTextToClipboard(text, "Markdown");
 }

-extractBtn.addEventListener("click", handleExtract);
-analyzeBtn.addEventListener("click", handleAnalyze);
-extractRunBtn.addEventListener("click", handleExtractAndAnalyze);
+runBtn.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() {
@@ -628,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();
 }
--- a/wwcompanion-extension/settings.html
+++ b/wwcompanion-extension/settings.html
@@ -78,17 +78,16 @@
          <span class="caret-closed">▸</span>
          <span class="caret-open">▾</span>
        </span>
-        <h2>Environment</h2>
+        <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 class="field">
-          <label for="activeEnvConfigSelect">Active environment</label>
-          <select id="activeEnvConfigSelect"></select>
-        </div>
        <div id="envConfigs" class="env-configs"></div>
      </div>
    </details>
@@ -99,7 +98,10 @@
          <span class="caret-closed">▸</span>
          <span class="caret-open">▾</span>
        </span>
-        <h2>Resume</h2>
+        <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>
--- a/wwcompanion-extension/settings.js
+++ b/wwcompanion-extension/settings.js
@@ -6,7 +6,6 @@ const addApiKeyBtn = document.getElementById("addApiKeyBtn");
 const apiKeysContainer = document.getElementById("apiKeys");
 const addEnvConfigBtn = document.getElementById("addEnvConfigBtn");
 const envConfigsContainer = document.getElementById("envConfigs");
-const activeEnvConfigSelect = document.getElementById("activeEnvConfigSelect");
 const addTaskBtn = document.getElementById("addTaskBtn");
 const tasksContainer = document.getElementById("tasks");
 const statusEl = document.getElementById("status");
@@ -91,6 +90,10 @@ function ensureUniqueName(desired, existingNames) {
  return buildUniqueDefaultName(existingNames);
 }

+function getTopEnvId() {
+  return collectEnvConfigs()[0]?.id || "";
+}
+
 function setApiConfigAdvanced(card, isAdvanced) {
  card.classList.toggle("is-advanced", isAdvanced);
  card.dataset.mode = isAdvanced ? "advanced" : "basic";
@@ -250,6 +253,46 @@ function buildApiConfigCard(config) {

  const actions = document.createElement("div");
  actions.className = "api-config-actions";
+  const moveTopBtn = document.createElement("button");
+  moveTopBtn.type = "button";
+  moveTopBtn.className = "ghost move-top";
+  moveTopBtn.textContent = "Top";
+  const moveUpBtn = document.createElement("button");
+  moveUpBtn.type = "button";
+  moveUpBtn.className = "ghost move-up";
+  moveUpBtn.textContent = "Up";
+  const moveDownBtn = document.createElement("button");
+  moveDownBtn.type = "button";
+  moveDownBtn.className = "ghost move-down";
+  moveDownBtn.textContent = "Down";
+
+  moveTopBtn.addEventListener("click", () => {
+    const first = apiConfigsContainer.firstElementChild;
+    if (!first || first === card) return;
+    apiConfigsContainer.insertBefore(card, first);
+    updateApiConfigControls();
+    updateEnvApiOptions();
+  });
+
+  moveUpBtn.addEventListener("click", () => {
+    const previous = card.previousElementSibling;
+    if (!previous) return;
+    apiConfigsContainer.insertBefore(card, previous);
+    updateApiConfigControls();
+    updateEnvApiOptions();
+  });
+
+  moveDownBtn.addEventListener("click", () => {
+    const next = card.nextElementSibling;
+    if (!next) return;
+    apiConfigsContainer.insertBefore(card, next.nextElementSibling);
+    updateApiConfigControls();
+    updateEnvApiOptions();
+  });
+
+  actions.appendChild(moveTopBtn);
+  actions.appendChild(moveUpBtn);
+  actions.appendChild(moveDownBtn);
  const advancedBtn = document.createElement("button");
  advancedBtn.type = "button";
  advancedBtn.className = "ghost advanced-toggle";
@@ -312,6 +355,7 @@ function buildApiConfigCard(config) {
  deleteBtn.addEventListener("click", () => {
    card.remove();
    updateEnvApiOptions();
+    updateApiConfigControls();
  });
  actions.appendChild(deleteBtn);

@@ -344,6 +388,18 @@ function collectApiConfigs() {
  return cards.map((card) => readApiConfigFromCard(card));
 }

+function updateApiConfigControls() {
+  const cards = [...apiConfigsContainer.querySelectorAll(".api-config-card")];
+  cards.forEach((card, index) => {
+    const moveTopBtn = card.querySelector(".move-top");
+    const moveUpBtn = card.querySelector(".move-up");
+    const moveDownBtn = card.querySelector(".move-down");
+    if (moveTopBtn) moveTopBtn.disabled = index === 0;
+    if (moveUpBtn) moveUpBtn.disabled = index === 0;
+    if (moveDownBtn) moveDownBtn.disabled = index === cards.length - 1;
+  });
+}
+
 function buildApiKeyCard(entry) {
  const card = document.createElement("div");
  card.className = "api-key-card";
@@ -388,6 +444,46 @@ function buildApiKeyCard(entry) {

  const actions = document.createElement("div");
  actions.className = "api-key-actions";
+  const moveTopBtn = document.createElement("button");
+  moveTopBtn.type = "button";
+  moveTopBtn.className = "ghost move-top";
+  moveTopBtn.textContent = "Top";
+  const moveUpBtn = document.createElement("button");
+  moveUpBtn.type = "button";
+  moveUpBtn.className = "ghost move-up";
+  moveUpBtn.textContent = "Up";
+  const moveDownBtn = document.createElement("button");
+  moveDownBtn.type = "button";
+  moveDownBtn.className = "ghost move-down";
+  moveDownBtn.textContent = "Down";
+
+  moveTopBtn.addEventListener("click", () => {
+    const first = apiKeysContainer.firstElementChild;
+    if (!first || first === card) return;
+    apiKeysContainer.insertBefore(card, first);
+    updateApiKeyControls();
+    updateApiConfigKeyOptions();
+  });
+
+  moveUpBtn.addEventListener("click", () => {
+    const previous = card.previousElementSibling;
+    if (!previous) return;
+    apiKeysContainer.insertBefore(card, previous);
+    updateApiKeyControls();
+    updateApiConfigKeyOptions();
+  });
+
+  moveDownBtn.addEventListener("click", () => {
+    const next = card.nextElementSibling;
+    if (!next) return;
+    apiKeysContainer.insertBefore(card, next.nextElementSibling);
+    updateApiKeyControls();
+    updateApiConfigKeyOptions();
+  });
+
+  actions.appendChild(moveTopBtn);
+  actions.appendChild(moveUpBtn);
+  actions.appendChild(moveDownBtn);
  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
@@ -395,6 +491,7 @@ function buildApiKeyCard(entry) {
  deleteBtn.addEventListener("click", () => {
    card.remove();
    updateApiConfigKeyOptions();
+    updateApiKeyControls();
  });
  actions.appendChild(deleteBtn);

@@ -422,6 +519,18 @@ function collectApiKeys() {
  });
 }

+function updateApiKeyControls() {
+  const cards = [...apiKeysContainer.querySelectorAll(".api-key-card")];
+  cards.forEach((card, index) => {
+    const moveTopBtn = card.querySelector(".move-top");
+    const moveUpBtn = card.querySelector(".move-up");
+    const moveDownBtn = card.querySelector(".move-down");
+    if (moveTopBtn) moveTopBtn.disabled = index === 0;
+    if (moveUpBtn) moveUpBtn.disabled = index === 0;
+    if (moveDownBtn) moveDownBtn.disabled = index === cards.length - 1;
+  });
+}
+
 function updateApiConfigKeyOptions() {
  const keys = collectApiKeys();
  const selects = apiConfigsContainer.querySelectorAll(".api-config-key-select");
@@ -494,6 +603,46 @@ function buildEnvConfigCard(config) {

  const actions = document.createElement("div");
  actions.className = "env-config-actions";
+  const moveTopBtn = document.createElement("button");
+  moveTopBtn.type = "button";
+  moveTopBtn.className = "ghost move-top";
+  moveTopBtn.textContent = "Top";
+  const moveUpBtn = document.createElement("button");
+  moveUpBtn.type = "button";
+  moveUpBtn.className = "ghost move-up";
+  moveUpBtn.textContent = "Up";
+  const moveDownBtn = document.createElement("button");
+  moveDownBtn.type = "button";
+  moveDownBtn.className = "ghost move-down";
+  moveDownBtn.textContent = "Down";
+
+  moveTopBtn.addEventListener("click", () => {
+    const first = envConfigsContainer.firstElementChild;
+    if (!first || first === card) return;
+    envConfigsContainer.insertBefore(card, first);
+    updateEnvControls();
+    updateTaskEnvOptions();
+  });
+
+  moveUpBtn.addEventListener("click", () => {
+    const previous = card.previousElementSibling;
+    if (!previous) return;
+    envConfigsContainer.insertBefore(card, previous);
+    updateEnvControls();
+    updateTaskEnvOptions();
+  });
+
+  moveDownBtn.addEventListener("click", () => {
+    const next = card.nextElementSibling;
+    if (!next) return;
+    envConfigsContainer.insertBefore(card, next.nextElementSibling);
+    updateEnvControls();
+    updateTaskEnvOptions();
+  });
+
+  actions.appendChild(moveTopBtn);
+  actions.appendChild(moveUpBtn);
+  actions.appendChild(moveDownBtn);

  const duplicateBtn = document.createElement("button");
  duplicateBtn.type = "button";
@@ -515,7 +664,8 @@ function buildEnvConfigCard(config) {
    });
    card.insertAdjacentElement("afterend", newCard);
    updateEnvApiOptions();
-    updateEnvConfigSelect(newCard.dataset.id);
+    updateEnvControls();
+    updateTaskEnvOptions();
  });

  const deleteBtn = document.createElement("button");
@@ -524,15 +674,13 @@ function buildEnvConfigCard(config) {
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    card.remove();
-    updateEnvConfigSelect(activeEnvConfigSelect.value);
+    updateEnvControls();
+    updateTaskEnvOptions();
  });

  actions.appendChild(duplicateBtn);
  actions.appendChild(deleteBtn);
-
-  nameInput.addEventListener("input", () =>
-    updateEnvConfigSelect(activeEnvConfigSelect.value)
-  );
+  nameInput.addEventListener("input", () => updateEnvApiOptions());

  card.appendChild(nameField);
  card.appendChild(apiField);
@@ -542,6 +690,51 @@ function buildEnvConfigCard(config) {
  return card;
 }

+function updateEnvControls() {
+  const cards = [...envConfigsContainer.querySelectorAll(".env-config-card")];
+  cards.forEach((card, index) => {
+    const moveTopBtn = card.querySelector(".move-top");
+    const moveUpBtn = card.querySelector(".move-up");
+    const moveDownBtn = card.querySelector(".move-down");
+    if (moveTopBtn) moveTopBtn.disabled = index === 0;
+    if (moveUpBtn) moveUpBtn.disabled = index === 0;
+    if (moveDownBtn) moveDownBtn.disabled = index === cards.length - 1;
+  });
+}
+
+function updateTaskEnvOptions() {
+  const envs = collectEnvConfigs();
+  const selects = tasksContainer.querySelectorAll(".task-env-select");
+  selects.forEach((select) => {
+    const preferred = select.dataset.preferred || select.value;
+    select.innerHTML = "";
+    if (!envs.length) {
+      const option = document.createElement("option");
+      option.value = "";
+      option.textContent = "No environments configured";
+      select.appendChild(option);
+      select.disabled = true;
+      return;
+    }
+
+    select.disabled = false;
+    for (const env of envs) {
+      const option = document.createElement("option");
+      option.value = env.id;
+      option.textContent = env.name || "Default";
+      select.appendChild(option);
+    }
+
+    if (preferred && envs.some((env) => env.id === preferred)) {
+      select.value = preferred;
+    } else {
+      select.value = envs[0].id;
+    }
+
+    select.dataset.preferred = select.value;
+  });
+}
+
 function collectEnvConfigs() {
  const cards = [...envConfigsContainer.querySelectorAll(".env-config-card")];
  return cards.map((card) => {
@@ -557,35 +750,6 @@ function collectEnvConfigs() {
  });
 }

-function updateEnvConfigSelect(preferredId) {
-  const configs = collectEnvConfigs();
-  activeEnvConfigSelect.innerHTML = "";
-
-  if (!configs.length) {
-    const option = document.createElement("option");
-    option.value = "";
-    option.textContent = "No environments configured";
-    activeEnvConfigSelect.appendChild(option);
-    activeEnvConfigSelect.disabled = true;
-    return;
-  }
-
-  activeEnvConfigSelect.disabled = false;
-  const selectedId =
-    preferredId && configs.some((config) => config.id === preferredId)
-      ? preferredId
-      : configs[0].id;
-
-  for (const config of configs) {
-    const option = document.createElement("option");
-    option.value = config.id;
-    option.textContent = config.name || "Default";
-    activeEnvConfigSelect.appendChild(option);
-  }
-
-  activeEnvConfigSelect.value = selectedId;
-}
-
 function updateEnvApiOptions() {
  const apiConfigs = collectApiConfigs();
  const selects = envConfigsContainer.querySelectorAll(".env-config-api-select");
@@ -617,6 +781,7 @@ function updateEnvApiOptions() {

    select.dataset.preferred = select.value;
  });
+  updateTaskEnvOptions();
 }

 function buildTaskCard(task) {
@@ -635,6 +800,16 @@ function buildTaskCard(task) {
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

+  const envField = document.createElement("div");
+  envField.className = "field";
+  const envLabel = document.createElement("label");
+  envLabel.textContent = "Default environment";
+  const envSelect = document.createElement("select");
+  envSelect.className = "task-env-select";
+  envSelect.dataset.preferred = task.defaultEnvId || "";
+  envField.appendChild(envLabel);
+  envField.appendChild(envSelect);
+
  const textField = document.createElement("div");
  textField.className = "field";
  const textLabel = document.createElement("label");
@@ -710,9 +885,15 @@ function buildTaskCard(task) {
    const name = buildUniqueDefaultName(
      collectNames(tasksContainer, ".task-name")
    );
-    const newCard = buildTaskCard({ id: newTaskId(), name, text: "" });
+    const newCard = buildTaskCard({
+      id: newTaskId(),
+      name,
+      text: "",
+      defaultEnvId: getTopEnvId()
+    });
    card.insertAdjacentElement("afterend", newCard);
    updateTaskControls();
+    updateTaskEnvOptions();
  });

  duplicateBtn.addEventListener("click", () => {
@@ -722,11 +903,13 @@ function buildTaskCard(task) {
        `${nameInput.value || "Untitled"} Copy`,
        collectNames(tasksContainer, ".task-name")
      ),
-      text: textArea.value
+      text: textArea.value,
+      defaultEnvId: envSelect.value || ""
    };
    const newCard = buildTaskCard(copy);
    card.insertAdjacentElement("afterend", newCard);
    updateTaskControls();
+    updateTaskEnvOptions();
  });

  deleteBtn.addEventListener("click", () => {
@@ -742,6 +925,7 @@ function buildTaskCard(task) {
  actions.appendChild(deleteBtn);

  card.appendChild(nameField);
+  card.appendChild(envField);
  card.appendChild(textField);
  card.appendChild(actions);

@@ -765,10 +949,12 @@ function collectTasks() {
  return cards.map((card) => {
    const nameInput = card.querySelector(".task-name");
    const textArea = card.querySelector(".task-text");
+    const envSelect = card.querySelector(".task-env-select");
    return {
      id: card.dataset.id || newTaskId(),
      name: (nameInput?.value || "Untitled Task").trim(),
-      text: (textArea?.value || "").trim()
+      text: (textArea?.value || "").trim(),
+      defaultEnvId: envSelect?.value || ""
    };
  });
 }
@@ -841,6 +1027,7 @@ async function loadSettings() {
      apiKeysContainer.appendChild(buildApiKeyCard(entry));
    }
  }
+  updateApiKeyControls();

  let resolvedConfigs = Array.isArray(apiConfigs) ? apiConfigs : [];
  let resolvedActiveConfigId = activeApiConfigId;
@@ -891,9 +1078,9 @@ async function loadSettings() {
    apiConfigsContainer.appendChild(buildApiConfigCard(config));
  }
  updateApiConfigKeyOptions();
+  updateApiConfigControls();

  let resolvedEnvConfigs = Array.isArray(envConfigs) ? envConfigs : [];
-  let resolvedActiveEnvId = activeEnvConfigId;
  const fallbackApiConfigId =
    resolvedActiveConfigId || resolvedConfigs[0]?.id || "";

@@ -905,10 +1092,9 @@ async function loadSettings() {
      systemPrompt: systemPrompt || DEFAULT_SYSTEM_PROMPT
    };
    resolvedEnvConfigs = [migrated];
-    resolvedActiveEnvId = migrated.id;
    await chrome.storage.local.set({
      envConfigs: resolvedEnvConfigs,
-      activeEnvConfigId: resolvedActiveEnvId
+      activeEnvConfigId: migrated.id
    });
  } else {
    const withDefaults = resolvedEnvConfigs.map((config) => ({
@@ -928,11 +1114,12 @@ async function loadSettings() {
      await chrome.storage.local.set({ envConfigs: resolvedEnvConfigs });
    }
    const hasActive = resolvedEnvConfigs.some(
-      (config) => config.id === resolvedActiveEnvId
+      (config) => config.id === activeEnvConfigId
    );
-    if (!hasActive) {
-      resolvedActiveEnvId = resolvedEnvConfigs[0].id;
-      await chrome.storage.local.set({ activeEnvConfigId: resolvedActiveEnvId });
+    if (!hasActive && resolvedEnvConfigs.length) {
+      await chrome.storage.local.set({
+        activeEnvConfigId: resolvedEnvConfigs[0].id
+      });
    }
  }

@@ -941,21 +1128,44 @@ async function loadSettings() {
    envConfigsContainer.appendChild(buildEnvConfigCard(config));
  }
  updateEnvApiOptions();
-  updateEnvConfigSelect(resolvedActiveEnvId);
+  updateEnvControls();

  tasksContainer.innerHTML = "";
-  if (!tasks.length) {
+  const defaultEnvId = resolvedEnvConfigs[0]?.id || "";
+  const normalizedTasks = Array.isArray(tasks)
+    ? tasks.map((task) => ({
+        ...task,
+        defaultEnvId: task.defaultEnvId || defaultEnvId
+      }))
+    : [];
+  if (
+    normalizedTasks.length &&
+    normalizedTasks.some(
+      (task, index) => task.defaultEnvId !== tasks[index]?.defaultEnvId
+    )
+  ) {
+    await chrome.storage.local.set({ tasks: normalizedTasks });
+  }
+
+  if (!normalizedTasks.length) {
    tasksContainer.appendChild(
-      buildTaskCard({ id: newTaskId(), name: "", text: "" })
+      buildTaskCard({
+        id: newTaskId(),
+        name: "",
+        text: "",
+        defaultEnvId
+      })
    );
    updateTaskControls();
+    updateTaskEnvOptions();
    return;
  }

-  for (const task of tasks) {
+  for (const task of normalizedTasks) {
    tasksContainer.appendChild(buildTaskCard(task));
  }
  updateTaskControls();
+  updateTaskEnvOptions();
 }

 async function saveSettings() {
@@ -963,11 +1173,8 @@ async function saveSettings() {
  const apiKeys = collectApiKeys();
  const apiConfigs = collectApiConfigs();
  const envConfigs = collectEnvConfigs();
-  const activeEnvConfigId =
-    envConfigs.find((entry) => entry.id === activeEnvConfigSelect.value)?.id ||
-    envConfigs[0]?.id ||
-    "";
-  const activeEnv = envConfigs.find((entry) => entry.id === activeEnvConfigId);
+  const activeEnvConfigId = envConfigs[0]?.id || "";
+  const activeEnv = envConfigs[0];
  const activeApiConfigId =
    activeEnv?.apiConfigId || apiConfigs[0]?.id || "";
  const activeConfig = apiConfigs.find((entry) => entry.id === activeApiConfigId);
@@ -995,7 +1202,12 @@ addTaskBtn.addEventListener("click", () => {
  const name = buildUniqueDefaultName(
    collectNames(tasksContainer, ".task-name")
  );
-  const newCard = buildTaskCard({ id: newTaskId(), name, text: "" });
+  const newCard = buildTaskCard({
+    id: newTaskId(),
+    name,
+    text: "",
+    defaultEnvId: getTopEnvId()
+  });
  const first = tasksContainer.firstElementChild;
  if (first) {
    tasksContainer.insertBefore(newCard, first);
@@ -1003,6 +1215,7 @@ addTaskBtn.addEventListener("click", () => {
    tasksContainer.appendChild(newCard);
  }
  updateTaskControls();
+  updateTaskEnvOptions();
 });

 addApiKeyBtn.addEventListener("click", () => {
@@ -1017,6 +1230,7 @@ addApiKeyBtn.addEventListener("click", () => {
    apiKeysContainer.appendChild(newCard);
  }
  updateApiConfigKeyOptions();
+  updateApiKeyControls();
 });

 addApiConfigBtn.addEventListener("click", () => {
@@ -1042,6 +1256,7 @@ addApiConfigBtn.addEventListener("click", () => {
  }
  updateApiConfigKeyOptions();
  updateEnvApiOptions();
+  updateApiConfigControls();
 });

 addEnvConfigBtn.addEventListener("click", () => {
@@ -1062,11 +1277,8 @@ addEnvConfigBtn.addEventListener("click", () => {
    envConfigsContainer.appendChild(newCard);
  }
  updateEnvApiOptions();
-  updateEnvConfigSelect(newCard.dataset.id);
-});
-
-activeEnvConfigSelect.addEventListener("change", () => {
-  updateEnvConfigSelect(activeEnvConfigSelect.value);
+  updateEnvControls();
+  updateTaskEnvOptions();
 });

 themeSelect.addEventListener("change", () => applyTheme(themeSelect.value));