added sidebar for ergonomics and error display of the configuration

wwcompanion-extension/popup.js

@@ -2,6 +2,7 @@ const runBtn = document.getElementById("runBtn");
 const abortBtn = document.getElementById("abortBtn");
 const taskSelect = document.getElementById("taskSelect");
 const envSelect = document.getElementById("envSelect");
+const profileSelect = document.getElementById("profileSelect");
 const outputEl = document.getElementById("output");
 const statusEl = document.getElementById("status");
 const postingCountEl = document.getElementById("postingCount");
@@ -15,26 +16,30 @@ const OUTPUT_STORAGE_KEY = "lastOutput";
 const AUTO_RUN_KEY = "autoRunDefaultTask";
 const LAST_TASK_KEY = "lastSelectedTaskId";
 const LAST_ENV_KEY = "lastSelectedEnvId";
+const LAST_PROFILE_KEY = "lastSelectedProfileId";
 
 const state = {
   postingText: "",
   tasks: [],
   envs: [],
+  profiles: [],
   port: null,
   isAnalyzing: false,
   outputRaw: "",
   autoRunPending: false,
   selectedTaskId: "",
-  selectedEnvId: ""
+  selectedEnvId: "",
+  selectedProfileId: ""
 };
 
 function getStorage(keys) {
   return new Promise((resolve) => chrome.storage.local.get(keys, resolve));
 }
 
-function buildUserMessage(resume, task, posting) {
+function buildUserMessage(resume, resumeType, task, posting) {
+  const header = resumeType === "Profile" ? "=== PROFILE ===" : "=== RESUME ===";
   return [
-    "=== RESUME ===",
+    header,
     resume || "",
     "",
     "=== TASK ===",
@@ -253,6 +258,7 @@ function setAnalyzing(isAnalyzing) {
   abortBtn.classList.toggle("hidden", !isAnalyzing);
   updateTaskSelectState();
   updateEnvSelectState();
+  updateProfileSelectState();
 }
 
 function updatePostingCount() {
@@ -317,10 +323,41 @@ function updateEnvSelectState() {
   envSelect.disabled = state.isAnalyzing || !hasEnvs;
 }
 
+function renderProfiles(profiles) {
+  state.profiles = profiles;
+  profileSelect.innerHTML = "";
+
+  if (!profiles.length) {
+    const option = document.createElement("option");
+    option.textContent = "No profiles configured";
+    option.value = "";
+    profileSelect.appendChild(option);
+    updateProfileSelectState();
+    return;
+  }
+
+  for (const profile of profiles) {
+    const option = document.createElement("option");
+    option.value = profile.id;
+    option.textContent = profile.name || "Default";
+    profileSelect.appendChild(option);
+  }
+  updateProfileSelectState();
+}
+
+function updateProfileSelectState() {
+  const hasProfiles = state.profiles.length > 0;
+  profileSelect.disabled = state.isAnalyzing || !hasProfiles;
+}
+
 function getTaskDefaultEnvId(task) {
   return task?.defaultEnvId || state.envs[0]?.id || "";
 }
 
+function getTaskDefaultProfileId(task) {
+  return task?.defaultProfileId || state.profiles[0]?.id || "";
+}
+
 function setEnvironmentSelection(envId) {
   const target =
     envId && state.envs.some((env) => env.id === envId)
@@ -332,6 +369,17 @@ function setEnvironmentSelection(envId) {
   state.selectedEnvId = target;
 }
 
+function setProfileSelection(profileId) {
+  const target =
+    profileId && state.profiles.some((profile) => profile.id === profileId)
+      ? profileId
+      : state.profiles[0]?.id || "";
+  if (target) {
+    profileSelect.value = target;
+  }
+  state.selectedProfileId = target;
+}
+
 function selectTask(taskId, { resetEnv } = { resetEnv: false }) {
   if (!taskId) return;
   taskSelect.value = taskId;
@@ -339,13 +387,15 @@ function selectTask(taskId, { resetEnv } = { resetEnv: false }) {
   const task = state.tasks.find((item) => item.id === taskId);
   if (resetEnv) {
     setEnvironmentSelection(getTaskDefaultEnvId(task));
+    setProfileSelection(getTaskDefaultProfileId(task));
   }
 }
 
 async function persistSelections() {
   await chrome.storage.local.set({
     [LAST_TASK_KEY]: state.selectedTaskId,
-    [LAST_ENV_KEY]: state.selectedEnvId
+    [LAST_ENV_KEY]: state.selectedEnvId,
+    [LAST_PROFILE_KEY]: state.selectedProfileId
   });
 }
 
@@ -439,22 +489,28 @@ async function loadConfig() {
   const stored = await getStorage([
     "tasks",
     "envConfigs",
+    "profiles",
     LAST_TASK_KEY,
-    LAST_ENV_KEY
+    LAST_ENV_KEY,
+    LAST_PROFILE_KEY
   ]);
   const tasks = Array.isArray(stored.tasks) ? stored.tasks : [];
   const envs = Array.isArray(stored.envConfigs) ? stored.envConfigs : [];
+  const profiles = Array.isArray(stored.profiles) ? stored.profiles : [];
   renderTasks(tasks);
   renderEnvironments(envs);
+  renderProfiles(profiles);
 
   if (!tasks.length) {
     state.selectedTaskId = "";
-    state.selectedEnvId = envs[0]?.id || "";
+    setEnvironmentSelection(envs[0]?.id || "");
+    setProfileSelection(profiles[0]?.id || "");
     return;
   }
 
   const storedTaskId = stored[LAST_TASK_KEY];
   const storedEnvId = stored[LAST_ENV_KEY];
+  const storedProfileId = stored[LAST_PROFILE_KEY];
   const initialTaskId = tasks.some((task) => task.id === storedTaskId)
     ? storedTaskId
     : tasks[0].id;
@@ -467,9 +523,16 @@ async function loadConfig() {
     setEnvironmentSelection(getTaskDefaultEnvId(task));
   }
 
+  if (storedProfileId && profiles.some((profile) => profile.id === storedProfileId)) {
+    setProfileSelection(storedProfileId);
+  } else {
+    setProfileSelection(getTaskDefaultProfileId(task));
+  }
+
   if (
     storedTaskId !== state.selectedTaskId ||
-    storedEnvId !== state.selectedEnvId
+    storedEnvId !== state.selectedEnvId ||
+    storedProfileId !== state.selectedProfileId
   ) {
     await persistSelections();
   }
@@ -528,6 +591,7 @@ async function handleAnalyze() {
     apiConfigs = [],
     activeApiConfigId = "",
     envConfigs = [],
+    profiles = [],
     apiBaseUrl,
     apiKeyHeader,
     apiKeyPrefix,
@@ -540,6 +604,7 @@ async function handleAnalyze() {
     "apiConfigs",
     "activeApiConfigId",
     "envConfigs",
+    "profiles",
     "apiBaseUrl",
     "apiKeyHeader",
     "apiKeyPrefix",
@@ -550,6 +615,7 @@ async function handleAnalyze() {
 
   const resolvedConfigs = Array.isArray(apiConfigs) ? apiConfigs : [];
   const resolvedEnvs = Array.isArray(envConfigs) ? envConfigs : [];
+  const resolvedProfiles = Array.isArray(profiles) ? profiles : [];
   const selectedEnvId = envSelect.value;
   const activeEnv =
     resolvedEnvs.find((entry) => entry.id === selectedEnvId) ||
@@ -569,6 +635,13 @@ async function handleAnalyze() {
     setStatus("Add an API configuration in Settings.");
     return;
   }
+
+  const selectedProfileId = profileSelect.value;
+  const activeProfile =
+    resolvedProfiles.find((entry) => entry.id === selectedProfileId) ||
+    resolvedProfiles[0];
+  const resumeText = activeProfile?.text || resume || "";
+  const resumeType = activeProfile?.type || "Resume";
   const isAdvanced = Boolean(activeConfig?.advanced);
   const resolvedApiUrl = activeConfig?.apiUrl || "";
   const resolvedTemplate = activeConfig?.requestTemplate || "";
@@ -614,7 +687,12 @@ async function handleAnalyze() {
     }
   }
 
-  const promptText = buildUserMessage(resume || "", task.text || "", state.postingText);
+  const promptText = buildUserMessage(
+    resumeText,
+    resumeType,
+    task.text || "",
+    state.postingText
+  );
   updatePromptCount(promptText.length);
 
   state.outputRaw = "";
@@ -635,7 +713,8 @@ async function handleAnalyze() {
       apiKeyPrefix: resolvedApiKeyPrefix,
       model: resolvedModel,
       systemPrompt: resolvedSystemPrompt,
-      resume: resume || "",
+      resume: resumeText,
+      resumeType,
       taskText: task.text || "",
       postingText: state.postingText,
       tabId: tab.id
@@ -704,6 +783,10 @@ envSelect.addEventListener("change", () => {
   setEnvironmentSelection(envSelect.value);
   void persistSelections();
 });
+profileSelect.addEventListener("change", () => {
+  setProfileSelection(profileSelect.value);
+  void persistSelections();
+});
 
 updatePostingCount();
 updatePromptCount(0);