reworked UI, moved environment selection to tasks

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();
 }