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/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));