const saveBtnSidebar = document.getElementById("saveBtnSidebar");
const addApiConfigBtn = document.getElementById("addApiConfigBtn");
const apiConfigsContainer = document.getElementById("apiConfigs");
const addApiKeyBtn = document.getElementById("addApiKeyBtn");
const apiKeysContainer = document.getElementById("apiKeys");
const addEnvConfigBtn = document.getElementById("addEnvConfigBtn");
const envConfigsContainer = document.getElementById("envConfigs");
const addTaskBtn = document.getElementById("addTaskBtn");
const tasksContainer = document.getElementById("tasks");
const addProfileBtn = document.getElementById("addProfileBtn");
const profilesContainer = document.getElementById("profiles");
const addWorkspaceBtn = document.getElementById("addWorkspaceBtn");
const workspacesContainer = document.getElementById("workspaces");
const addSiteBtn = document.getElementById("addSiteBtn");
const sitesContainer = document.getElementById("sites");
const addShortcutBtn = document.getElementById("addShortcutBtn");
const shortcutsContainer = document.getElementById("shortcuts");
const statusSidebarEl = document.getElementById("statusSidebar");
const sidebarErrorsEl = document.getElementById("sidebarErrors");
const themeSelect = document.getElementById("themeSelect");
const toolbarPositionSelect = document.getElementById("toolbarPositionSelect");
const toolbarAutoHide = document.getElementById("toolbarAutoHide");
const globalSitesContainer = document.getElementById("globalSites");
const toc = document.querySelector(".toc");
const tocResizer = document.getElementById("tocResizer");

const OPENAI_DEFAULTS = {
  apiBaseUrl: "https://api.openai.com/v1",
  apiKeyHeader: "Authorization",
  apiKeyPrefix: "Bearer "
};
const DEFAULT_MODEL = "gpt-4o-mini";
const DEFAULT_SYSTEM_PROMPT =
  "You are a precise, honest assistant. Be concise and avoid inventing details, be critical about evaluations. You should put in a small summary of all the sections at the end. You should answer in no longer than 3 sections including the summary. And remember to bold or italicize key points.";
const SIDEBAR_WIDTH_KEY = "sidebarWidth";

function getSidebarWidthLimits() {
  const min = 160;
  const max = Math.max(min, Math.min(360, window.innerWidth - 240));
  return { min, max };
}

function applySidebarWidth(width) {
  if (!toc) return;
  const { min, max } = getSidebarWidthLimits();
  if (!Number.isFinite(width)) {
    toc.style.width = "";
    toc.style.flex = "";
    return;
  }
  const clamped = Math.min(Math.max(width, min), max);
  toc.style.width = `${clamped}px`;
  toc.style.flex = `0 0 ${clamped}px`;
}

function initSidebarResize() {
  if (!toc || !tocResizer) return;
  let startX = 0;
  let startWidth = 0;

  const onMouseMove = (event) => {
    const delta = event.clientX - startX;
    applySidebarWidth(startWidth + delta);
  };

  const onMouseUp = () => {
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
    document.body.classList.remove("is-resizing");
    const width = toc.getBoundingClientRect().width;
    void chrome.storage.local.set({ [SIDEBAR_WIDTH_KEY]: Math.round(width) });
  };

  tocResizer.addEventListener("mousedown", (event) => {
    event.preventDefault();
    startX = event.clientX;
    startWidth = toc.getBoundingClientRect().width;
    document.body.classList.add("is-resizing");
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
  });
}

function getStorage(keys) {
  return new Promise((resolve) => chrome.storage.local.get(keys, resolve));
}

function setStatus(message) {
  if (statusSidebarEl) statusSidebarEl.textContent = message;
  if (!message) return;
  setTimeout(() => {
    if (statusSidebarEl?.textContent === message) statusSidebarEl.textContent = "";
  }, 2000);
}

let sidebarErrorFrame = null;
function scheduleSidebarErrors() {
  if (!sidebarErrorsEl) return;
  if (sidebarErrorFrame) return;
  sidebarErrorFrame = requestAnimationFrame(() => {
    sidebarErrorFrame = null;
    updateSidebarErrors();
  });
}

function renderGlobalSitesList(sites) {
  if (!globalSitesContainer) return;
  globalSitesContainer.innerHTML = "";
  const globalSites = (sites || []).filter(
    (site) => (site.workspaceId || "global") === "global"
  );
  if (!globalSites.length) {
    const empty = document.createElement("div");
    empty.textContent = "No sites inherit from global.";
    empty.className = "hint";
    globalSitesContainer.appendChild(empty);
    return;
  }
  for (const site of globalSites) {
    const link = document.createElement("a");
    link.href = "#";
    link.textContent = site.name || site.urlPattern || "Untitled Site";
    link.addEventListener("click", (e) => {
      e.preventDefault();
      const card = document.querySelector(`.site-card[data-id="${site.id}"]`);
      if (card) {
        card.scrollIntoView({ behavior: "smooth", block: "center" });
        openDetailsChain(document.getElementById("sites-panel"));
      }
    });
    globalSitesContainer.appendChild(link);
  }
}

function renderWorkspaceSitesList(list, workspaceId, sites) {
  if (!list) return;
  const ownedSites = (sites || []).filter(
    (site) => (site.workspaceId || "global") === workspaceId
  );
  list.innerHTML = "";
  if (!ownedSites.length) {
    const empty = document.createElement("div");
    empty.className = "hint";
    empty.textContent = "No sites inherit from this workspace.";
    list.appendChild(empty);
    return;
  }
  for (const site of ownedSites) {
    const link = document.createElement("a");
    link.href = "#";
    link.textContent = site.name || site.urlPattern || "Untitled Site";
    link.addEventListener("click", (e) => {
      e.preventDefault();
      const siteCard = document.querySelector(
        `.site-card[data-id="${site.id}"]`
      );
      if (siteCard) {
        siteCard.scrollIntoView({ behavior: "smooth", block: "center" });
        openDetailsChain(document.getElementById("sites-panel"));
      }
    });
    list.appendChild(link);
  }
}

function applyTheme(theme) {
  const value = theme || "system";
  document.documentElement.dataset.theme = value;
}

function newTaskId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `task-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function newApiKeyId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `key-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function newApiConfigId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `config-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function newEnvConfigId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `env-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function newProfileId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `profile-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function newWorkspaceId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `ws-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function newSiteId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `site-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function newShortcutId() {
  if (crypto?.randomUUID) return crypto.randomUUID();
  return `shortcut-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}

function buildChatUrlFromBase(baseUrl) {
  const trimmed = (baseUrl || "").trim().replace(/\/+$/, "");
  if (!trimmed) return "";
  if (trimmed.endsWith("/chat/completions")) return trimmed;
  return `${trimmed}/chat/completions`;
}

function collectNames(container, selector) {
  if (!container) return [];
  return [...container.querySelectorAll(selector)]
    .map((input) => (input.value || "").trim())
    .filter(Boolean);
}

function buildUniqueDefaultName(names) {
  const lower = new Set(names.map((name) => name.toLowerCase()));
  if (!lower.has("default")) return "Default";
  let index = 2;
  while (lower.has(`default-${index}`)) {
    index += 1;
  }
  return `Default-${index}`;
}

function ensureUniqueName(desired, existingNames) {
  const trimmed = (desired || "").trim();
  const lowerNames = existingNames.map((name) => name.toLowerCase());
  if (trimmed && !lowerNames.includes(trimmed.toLowerCase())) {
    return trimmed;
  }
  return buildUniqueDefaultName(existingNames);
}

function isEnabled(value) {
  return value !== false;
}

function populateSelect(select, items, emptyLabel) {
  const preferred = select.dataset.preferred || select.value;
  select.innerHTML = "";
  if (!items.length) {
    const option = document.createElement("option");
    option.value = "";
    option.textContent = emptyLabel;
    select.appendChild(option);
    select.disabled = true;
    return;
  }

  select.disabled = false;
  for (const item of items) {
    const option = document.createElement("option");
    option.value = item.id;
    option.textContent = item.name || "Default";
    select.appendChild(option);
  }

  if (preferred && items.some((item) => item.id === preferred)) {
    select.value = preferred;
  } else {
    select.value = items[0]?.id || "";
  }

  select.dataset.preferred = select.value;
}

function normalizeConfigList(list) {
  return Array.isArray(list)
    ? list.map((item) => ({ ...item, enabled: item.enabled !== false }))
    : [];
}

function normalizeDisabledInherited(source) {
  const data = source && typeof source === "object" ? source : {};
  return {
    envs: Array.isArray(data.envs) ? data.envs : [],
    profiles: Array.isArray(data.profiles) ? data.profiles : [],
    tasks: Array.isArray(data.tasks) ? data.tasks : [],
    shortcuts: Array.isArray(data.shortcuts) ? data.shortcuts : [],
    apiConfigs: Array.isArray(data.apiConfigs) ? data.apiConfigs : []
  };
}

function getTopEnvId() {
  return collectEnvConfigs().find((env) => isEnabled(env.enabled))?.id || "";
}

function getTopProfileId() {
  return collectProfiles().find((profile) => isEnabled(profile.enabled))?.id || "";
}

function setApiConfigAdvanced(card, isAdvanced) {
  card.classList.toggle("is-advanced", isAdvanced);
  card.dataset.mode = isAdvanced ? "advanced" : "basic";

  const basicFields = card.querySelectorAll(
    ".basic-only input, .basic-only textarea"
  );
  const advancedFields = card.querySelectorAll(
    ".advanced-only input, .advanced-only textarea"
  );
  basicFields.forEach((field) => {
    field.disabled = isAdvanced;
  });
  advancedFields.forEach((field) => {
    field.disabled = !isAdvanced;
  });

  const resetBtn = card.querySelector(".reset-openai");
  if (resetBtn) resetBtn.disabled = false;

  const advancedBtn = card.querySelector(".advanced-toggle");
  if (advancedBtn) advancedBtn.disabled = isAdvanced;
}

function readApiConfigFromCard(card) {
  const nameInput = card.querySelector(".api-config-name");
  const keySelect = card.querySelector(".api-config-key-select");
  const baseInput = card.querySelector(".api-config-base");
  const headerInput = card.querySelector(".api-config-header");
  const prefixInput = card.querySelector(".api-config-prefix");
  const modelInput = card.querySelector(".api-config-model");
  const urlInput = card.querySelector(".api-config-url");
  const templateInput = card.querySelector(".api-config-template");
  const enabledInput = card.querySelector(".config-enabled");
  const isAdvanced = card.classList.contains("is-advanced");

  return {
    id: card.dataset.id || newApiConfigId(),
    name: (nameInput?.value || "Default").trim(),
    apiKeyId: keySelect?.value || "",
    apiBaseUrl: (baseInput?.value || "").trim(),
    apiKeyHeader: (headerInput?.value || "").trim(),
    apiKeyPrefix: prefixInput?.value || "",
    model: (modelInput?.value || "").trim(),
    apiUrl: (urlInput?.value || "").trim(),
    requestTemplate: (templateInput?.value || "").trim(),
    advanced: isAdvanced,
    enabled: enabledInput ? enabledInput.checked : true
  };
}

function buildApiConfigCard(config) {
  const card = document.createElement("div");
  card.className = "api-config-card";
  card.dataset.id = config.id || newApiConfigId();
  const isAdvanced = Boolean(config.advanced);

  const enabledLabel = document.createElement("label");
  enabledLabel.className = "toggle-label";
  const enabledInput = document.createElement("input");
  enabledInput.type = "checkbox";
  enabledInput.className = "config-enabled";
  enabledInput.checked = config.enabled !== false;
  enabledInput.addEventListener("change", () => {
    updateTaskEnvOptions();
  });
  enabledLabel.appendChild(enabledInput);
  enabledLabel.appendChild(document.createTextNode("Enabled"));

  const nameField = document.createElement("div");
  nameField.className = "field";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = config.name || "";
  nameInput.className = "api-config-name";
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

  const keyField = document.createElement("div");
  keyField.className = "field";
  const keyLabel = document.createElement("label");
  keyLabel.textContent = "API Key";
  const keySelect = document.createElement("select");
  keySelect.className = "api-config-key-select";
  keySelect.dataset.preferred = config.apiKeyId || "";
  keyField.appendChild(keyLabel);
  keyField.appendChild(keySelect);

  const baseField = document.createElement("div");
  baseField.className = "field basic-only";
  const baseLabel = document.createElement("label");
  baseLabel.textContent = "API Base URL";
  const baseInput = document.createElement("input");
  baseInput.type = "text";
  baseInput.placeholder = OPENAI_DEFAULTS.apiBaseUrl;
  baseInput.value = config.apiBaseUrl || "";
  baseInput.className = "api-config-base";
  baseField.appendChild(baseLabel);
  baseField.appendChild(baseInput);

  const headerField = document.createElement("div");
  headerField.className = "field advanced-only";
  const headerLabel = document.createElement("label");
  headerLabel.textContent = "API Key Header";
  const headerInput = document.createElement("input");
  headerInput.type = "text";
  headerInput.placeholder = OPENAI_DEFAULTS.apiKeyHeader;
  headerInput.value = config.apiKeyHeader || "";
  headerInput.className = "api-config-header";
  headerField.appendChild(headerLabel);
  headerField.appendChild(headerInput);

  const prefixField = document.createElement("div");
  prefixField.className = "field advanced-only";
  const prefixLabel = document.createElement("label");
  prefixLabel.textContent = "API Key Prefix";
  const prefixInput = document.createElement("input");
  prefixInput.type = "text";
  prefixInput.placeholder = OPENAI_DEFAULTS.apiKeyPrefix;
  prefixInput.value = config.apiKeyPrefix || "";
  prefixInput.className = "api-config-prefix";
  prefixField.appendChild(prefixLabel);
  prefixField.appendChild(prefixInput);

  const modelField = document.createElement("div");
  modelField.className = "field basic-only";
  const modelLabel = document.createElement("label");
  modelLabel.textContent = "Model name";
  const modelInput = document.createElement("input");
  modelInput.type = "text";
  modelInput.placeholder = DEFAULT_MODEL;
  modelInput.value = config.model || "";
  modelInput.className = "api-config-model";
  modelField.appendChild(modelLabel);
  modelField.appendChild(modelInput);

  const urlField = document.createElement("div");
  urlField.className = "field advanced-only";
  const urlLabel = document.createElement("label");
  urlLabel.textContent = "API URL";
  const urlInput = document.createElement("input");
  urlInput.type = "text";
  urlInput.placeholder = "https://api.example.com/v1/chat/completions";
  urlInput.value = config.apiUrl || "";
  urlInput.className = "api-config-url";
  urlField.appendChild(urlLabel);
  urlField.appendChild(urlInput);

  const templateField = document.createElement("div");
  templateField.className = "field advanced-only";
  const templateLabel = document.createElement("label");
  templateLabel.textContent = "Request JSON template";
  const templateInput = document.createElement("textarea");
  templateInput.rows = 8;
  templateInput.placeholder = [
    "{",
    "  \"stream\": true,",
    "  \"messages\": [",
    "    { \"role\": \"system\", \"content\": \"SYSTEM_PROMPT_GOES_HERE\" },",
    "    { \"role\": \"user\", \"content\": \"PROMPT_GOES_HERE\" }",
    "  ],",
    "  \"api_key\": \"API_KEY_GOES_HERE\"",
    "}"
  ].join("\n");
  templateInput.value = config.requestTemplate || "";
  templateInput.className = "api-config-template";
  templateField.appendChild(templateLabel);
  templateField.appendChild(templateInput);

  const actions = document.createElement("div");
  actions.className = "api-config-actions";
  const leftActions = document.createElement("div");
  leftActions.className = "api-config-actions-left";
  const rightActions = document.createElement("div");
  rightActions.className = "api-config-actions-right";
  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";
  const addBelowBtn = document.createElement("button");
  addBelowBtn.type = "button";
  addBelowBtn.className = "ghost add-below";
  addBelowBtn.textContent = "Add";

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

  addBelowBtn.addEventListener("click", () => {
    const name = buildUniqueDefaultName(
      collectNames(apiConfigsContainer, ".api-config-name")
    );
    const newCard = buildApiConfigCard({
      id: newApiConfigId(),
      name,
      apiBaseUrl: OPENAI_DEFAULTS.apiBaseUrl,
      apiKeyHeader: OPENAI_DEFAULTS.apiKeyHeader,
      apiKeyPrefix: OPENAI_DEFAULTS.apiKeyPrefix,
      model: DEFAULT_MODEL,
      apiUrl: "",
      requestTemplate: "",
      advanced: false
    });
    card.insertAdjacentElement("afterend", newCard);
    updateApiConfigKeyOptions();
    updateEnvApiOptions();
    updateApiConfigControls();
  });

  const advancedBtn = document.createElement("button");
  advancedBtn.type = "button";
  advancedBtn.className = "ghost advanced-toggle";
  advancedBtn.textContent = "Advanced Mode";
  advancedBtn.addEventListener("click", () => {
    if (card.classList.contains("is-advanced")) return;
    urlInput.value = buildChatUrlFromBase(baseInput.value);
    templateInput.value = [
      "{",
      `  \"model\": \"${modelInput.value || DEFAULT_MODEL}\",`,
      "  \"stream\": true,",
      "  \"messages\": [",
      "    { \"role\": \"system\", \"content\": \"SYSTEM_PROMPT_GOES_HERE\" },",
      "    { \"role\": \"user\", \"content\": \"PROMPT_GOES_HERE\" }",
      "  ],",
      "  \"api_key\": \"API_KEY_GOES_HERE\"",
      "}"
    ].join("\n");
    setApiConfigAdvanced(card, true);
    updateEnvApiOptions();
  });
  const resetBtn = document.createElement("button");
  resetBtn.type = "button";
  resetBtn.className = "ghost reset-openai";
  resetBtn.textContent = "Reset to OpenAI";
  resetBtn.addEventListener("click", () => {
    baseInput.value = OPENAI_DEFAULTS.apiBaseUrl;
    headerInput.value = OPENAI_DEFAULTS.apiKeyHeader;
    prefixInput.value = OPENAI_DEFAULTS.apiKeyPrefix;
    modelInput.value = DEFAULT_MODEL;
    urlInput.value = "";
    templateInput.value = "";
    setApiConfigAdvanced(card, false);
    updateEnvApiOptions();
  });
  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    card.remove();
    updateEnvApiOptions();
    updateApiConfigControls();
  });

  const updateSelect = () => updateEnvApiOptions();
  nameInput.addEventListener("input", updateSelect);
  baseInput.addEventListener("input", updateSelect);
  headerInput.addEventListener("input", updateSelect);
  prefixInput.addEventListener("input", updateSelect);
  modelInput.addEventListener("input", updateSelect);
  urlInput.addEventListener("input", updateSelect);
  templateInput.addEventListener("input", updateSelect);

  rightActions.appendChild(moveTopBtn);
  rightActions.appendChild(moveUpBtn);
  rightActions.appendChild(moveDownBtn);
  rightActions.appendChild(addBelowBtn);
  rightActions.appendChild(deleteBtn);

  leftActions.appendChild(advancedBtn);
  leftActions.appendChild(resetBtn);

  actions.appendChild(leftActions);
  actions.appendChild(rightActions);

  card.appendChild(enabledLabel);
  card.appendChild(nameField);
  card.appendChild(keyField);
  card.appendChild(baseField);
  card.appendChild(headerField);
  card.appendChild(prefixField);
  card.appendChild(modelField);
  card.appendChild(urlField);
  card.appendChild(templateField);
  card.appendChild(actions);

  setApiConfigAdvanced(card, isAdvanced);

  return card;
}

function collectApiConfigs() {
  const cards = [...apiConfigsContainer.querySelectorAll(".api-config-card")];
  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;
  });
  scheduleSidebarErrors();
}

function buildApiKeyCard(entry) {
  const card = document.createElement("div");
  card.className = "api-key-card";
  card.dataset.id = entry.id || newApiKeyId();

  const enabledLabel = document.createElement("label");
  enabledLabel.className = "toggle-label";
  const enabledInput = document.createElement("input");
  enabledInput.type = "checkbox";
  enabledInput.className = "config-enabled";
  enabledInput.checked = entry.enabled !== false;
  enabledInput.addEventListener("change", () => {
    updateApiConfigKeyOptions();
  });
  enabledLabel.appendChild(enabledInput);
  enabledLabel.appendChild(document.createTextNode("Enabled"));

  const nameField = document.createElement("div");
  nameField.className = "field";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = entry.name || "";
  nameInput.className = "api-key-name";
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

  const keyField = document.createElement("div");
  keyField.className = "field";
  const keyLabel = document.createElement("label");
  keyLabel.textContent = "Key";
  const keyInline = document.createElement("div");
  keyInline.className = "inline";
  const keyInput = document.createElement("input");
  keyInput.type = "password";
  keyInput.autocomplete = "off";
  keyInput.placeholder = "sk-...";
  keyInput.value = entry.key || "";
  keyInput.className = "api-key-value";
  const showBtn = document.createElement("button");
  showBtn.type = "button";
  showBtn.className = "ghost";
  showBtn.textContent = "Show";
  showBtn.addEventListener("click", () => {
    const isPassword = keyInput.type === "password";
    keyInput.type = isPassword ? "text" : "password";
    showBtn.textContent = isPassword ? "Hide" : "Show";
  });
  keyInline.appendChild(keyInput);
  keyInline.appendChild(showBtn);
  keyField.appendChild(keyLabel);
  keyField.appendChild(keyInline);

  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";
  const addBelowBtn = document.createElement("button");
  addBelowBtn.type = "button";
  addBelowBtn.className = "ghost add-below";
  addBelowBtn.textContent = "Add";

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

  addBelowBtn.addEventListener("click", () => {
    const name = buildUniqueDefaultName(
      collectNames(apiKeysContainer, ".api-key-name")
    );
    const newCard = buildApiKeyCard({ id: newApiKeyId(), name, key: "" });
    card.insertAdjacentElement("afterend", newCard);
    updateApiConfigKeyOptions();
    updateApiKeyControls();
  });

  actions.appendChild(moveTopBtn);
  actions.appendChild(moveUpBtn);
  actions.appendChild(moveDownBtn);
  actions.appendChild(addBelowBtn);
  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    card.remove();
    updateApiConfigKeyOptions();
    updateApiKeyControls();
  });
  actions.appendChild(deleteBtn);

  const updateSelect = () => updateApiConfigKeyOptions();
  nameInput.addEventListener("input", updateSelect);
  keyInput.addEventListener("input", updateSelect);

  card.appendChild(enabledLabel);
  card.appendChild(nameField);
  card.appendChild(keyField);
  card.appendChild(actions);

  return card;
}

function collectApiKeys() {
  const cards = [...apiKeysContainer.querySelectorAll(".api-key-card")];
  return cards.map((card) => {
    const nameInput = card.querySelector(".api-key-name");
    const keyInput = card.querySelector(".api-key-value");
    const enabledInput = card.querySelector(".config-enabled");
    return {
      id: card.dataset.id || newApiKeyId(),
      name: (nameInput?.value || "Default").trim(),
      key: (keyInput?.value || "").trim(),
      enabled: enabledInput ? enabledInput.checked : true
    };
  });
}

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

function updateApiConfigKeyOptions() {
  const keys = collectApiKeys().filter((key) => isEnabled(key.enabled));
  const selects = apiConfigsContainer.querySelectorAll(".api-config-key-select");
  selects.forEach((select) => {
    const preferred = select.dataset.preferred || select.value;
    select.innerHTML = "";
    if (!keys.length) {
      const option = document.createElement("option");
      option.value = "";
      option.textContent = "No keys configured";
      select.appendChild(option);
      select.disabled = true;
      return;
    }

    select.disabled = false;
    for (const key of keys) {
      const option = document.createElement("option");
      option.value = key.id;
      option.textContent = key.name || "Default";
      select.appendChild(option);
    }

    if (preferred && keys.some((key) => key.id === preferred)) {
      select.value = preferred;
    } else {
      select.value = keys[0].id;
    }

    select.dataset.preferred = select.value;
  });
}

function buildEnvConfigCard(config, container = envConfigsContainer) {
  const card = document.createElement("div");
  card.className = "env-config-card";
  card.dataset.id = config.id || newEnvConfigId();

  const enabledLabel = document.createElement("label");
  enabledLabel.className = "toggle-label";
  const enabledInput = document.createElement("input");
  enabledInput.type = "checkbox";
  enabledInput.className = "config-enabled";
  enabledInput.checked = config.enabled !== false;
  enabledInput.addEventListener("change", () => {
    updateEnvApiOptions();
  });
  enabledLabel.appendChild(enabledInput);
  enabledLabel.appendChild(document.createTextNode("Enabled"));

  const nameField = document.createElement("div");
  nameField.className = "field";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = config.name || "";
  nameInput.className = "env-config-name";
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

  const apiField = document.createElement("div");
  apiField.className = "field";
  const apiLabel = document.createElement("label");
  apiLabel.textContent = "API config";
  const apiSelect = document.createElement("select");
  apiSelect.className = "env-config-api-select";
  apiSelect.dataset.preferred = config.apiConfigId || "";
  apiField.appendChild(apiLabel);
  apiField.appendChild(apiSelect);

  const promptField = document.createElement("div");
  promptField.className = "field";
  const promptLabel = document.createElement("label");
  promptLabel.textContent = "System prompt";
  const promptInput = document.createElement("textarea");
  promptInput.rows = 8;
  promptInput.value = config.systemPrompt || "";
  promptInput.className = "env-config-prompt";
  promptField.appendChild(promptLabel);
  promptField.appendChild(promptInput);

  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";
  const addBelowBtn = document.createElement("button");
  addBelowBtn.type = "button";
  addBelowBtn.className = "ghost add-below";
  addBelowBtn.textContent = "Add";

  moveTopBtn.addEventListener("click", () => {
    const first = container.firstElementChild;
    if (!first || first === card) return;
    container.insertBefore(card, first);
    updateEnvControls(container);
    updateTaskEnvOptions();
  });

  moveUpBtn.addEventListener("click", () => {
    const previous = card.previousElementSibling;
    if (!previous) return;
    container.insertBefore(card, previous);
    updateEnvControls(container);
    updateTaskEnvOptions();
  });

  moveDownBtn.addEventListener("click", () => {
    const next = card.nextElementSibling;
    if (!next) return;
    container.insertBefore(card, next.nextElementSibling);
    updateEnvControls(container);
    updateTaskEnvOptions();
  });

  actions.appendChild(moveTopBtn);
  actions.appendChild(moveUpBtn);
  actions.appendChild(moveDownBtn);
  actions.appendChild(addBelowBtn);

  addBelowBtn.addEventListener("click", () => {
    const name = buildUniqueDefaultName(
      collectNames(container, ".env-config-name")
    );
    const fallbackApiConfigId = getApiConfigsForEnvContainer(container)[0]?.id || "";
    const newCard = buildEnvConfigCard({
      id: newEnvConfigId(),
      name,
      apiConfigId: fallbackApiConfigId,
      systemPrompt: DEFAULT_SYSTEM_PROMPT
    }, container);
    card.insertAdjacentElement("afterend", newCard);
    updateEnvApiOptions();
    updateEnvControls(container);
    updateTaskEnvOptions();
  });

  const duplicateControls = buildDuplicateControls("envs", () => ({
    id: card.dataset.id,
    name: nameInput.value || "Default",
    apiConfigId: apiSelect.value || "",
    systemPrompt: promptInput.value || "",
    enabled: enabledInput.checked
  }));

  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    card.remove();
    updateEnvControls(container);
    updateTaskEnvOptions();
  });

  actions.appendChild(duplicateControls);
  actions.appendChild(deleteBtn);
  nameInput.addEventListener("input", () => updateEnvApiOptions());

  card.appendChild(enabledLabel);
  card.appendChild(nameField);
  card.appendChild(apiField);
  card.appendChild(promptField);
  card.appendChild(actions);

  return card;
}

function updateEnvControls(container = envConfigsContainer) {
  const cards = [...container.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;
  });
  scheduleSidebarErrors();
}

function updateTaskEnvOptionsForContainer(container, envs) {
  if (!container) return;
  const selects = container.querySelectorAll(".task-env-select");
  selects.forEach((select) => {
    populateSelect(select, envs, "No environments configured");
  });
}

function updateTaskEnvOptions() {
  const envs = collectEnvConfigs().filter((env) => isEnabled(env.enabled));
  updateTaskEnvOptionsForContainer(tasksContainer, envs);

  const workspaceCards = document.querySelectorAll(".workspace-card");
  workspaceCards.forEach((card) => {
    const scope = getWorkspaceScopeData(card);
    updateTaskEnvOptionsForContainer(
      card.querySelector(".workspace-tasks"),
      scope.envs
    );
  });

  const siteCards = document.querySelectorAll(".site-card");
  siteCards.forEach((card) => {
    const scope = getSiteScopeData(card);
    updateTaskEnvOptionsForContainer(
      card.querySelector(".site-tasks"),
      scope.envs
    );
  });

  updateShortcutOptions();
  refreshWorkspaceInheritedLists();
  refreshSiteInheritedLists();
  scheduleSidebarErrors();
}

function buildProfileCard(profile, container = profilesContainer) {
  const card = document.createElement("div");
  card.className = "profile-card";
  card.dataset.id = profile.id || newProfileId();

  const enabledLabel = document.createElement("label");
  enabledLabel.className = "toggle-label";
  const enabledInput = document.createElement("input");
  enabledInput.type = "checkbox";
  enabledInput.className = "config-enabled";
  enabledInput.checked = profile.enabled !== false;
  enabledInput.addEventListener("change", () => {
    updateTaskProfileOptions();
  });
  enabledLabel.appendChild(enabledInput);
  enabledLabel.appendChild(document.createTextNode("Enabled"));

  const nameField = document.createElement("div");
  nameField.className = "field";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = profile.name || "";
  nameInput.className = "profile-name";
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

  const textField = document.createElement("div");
  textField.className = "field";
  const textLabel = document.createElement("label");
  textLabel.textContent = "Profile text";
  const textArea = document.createElement("textarea");
  textArea.rows = 8;
  textArea.value = profile.text || "";
  textArea.className = "profile-text";
  textField.appendChild(textLabel);
  textField.appendChild(textArea);

  const actions = document.createElement("div");
  actions.className = "profile-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";
  const addBelowBtn = document.createElement("button");
  addBelowBtn.type = "button";
  addBelowBtn.className = "ghost add-below";
  addBelowBtn.textContent = "Add";

  moveTopBtn.addEventListener("click", () => {
    const first = container.firstElementChild;
    if (!first || first === card) return;
    container.insertBefore(card, first);
    updateProfileControls(container);
    updateTaskProfileOptions();
  });

  moveUpBtn.addEventListener("click", () => {
    const previous = card.previousElementSibling;
    if (!previous) return;
    container.insertBefore(card, previous);
    updateProfileControls(container);
    updateTaskProfileOptions();
  });

  moveDownBtn.addEventListener("click", () => {
    const next = card.nextElementSibling;
    if (!next) return;
    container.insertBefore(card, next.nextElementSibling);
    updateProfileControls(container);
    updateTaskProfileOptions();
  });

  addBelowBtn.addEventListener("click", () => {
    const name = buildUniqueDefaultName(
      collectNames(container, ".profile-name")
    );
    const newCard = buildProfileCard({
      id: newProfileId(),
      name,
      text: ""
    }, container);
    card.insertAdjacentElement("afterend", newCard);
    updateProfileControls(container);
    updateTaskProfileOptions();
  });

  const duplicateControls = buildDuplicateControls("profiles", () => ({
    id: card.dataset.id,
    name: nameInput.value || "Default",
    text: textArea.value || "",
    enabled: enabledInput.checked
  }));

  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    card.remove();
    updateProfileControls(container);
    updateTaskProfileOptions();
  });

  actions.appendChild(moveTopBtn);
  actions.appendChild(moveUpBtn);
  actions.appendChild(moveDownBtn);
  actions.appendChild(addBelowBtn);
  actions.appendChild(duplicateControls);
  actions.appendChild(deleteBtn);

  nameInput.addEventListener("input", () => updateTaskProfileOptions());

  card.appendChild(enabledLabel);
  card.appendChild(nameField);
  card.appendChild(textField);
  card.appendChild(actions);

  return card;
}

function collectProfiles(container = profilesContainer) {
  if (!container) return [];
  const cards = [...container.querySelectorAll(".profile-card")];
  return cards.map((card) => {
    const nameInput = card.querySelector(".profile-name");
    const textArea = card.querySelector(".profile-text");
    const enabledInput = card.querySelector(".config-enabled");
    return {
      id: card.dataset.id || newProfileId(),
      name: (nameInput?.value || "Default").trim(),
      text: (textArea?.value || "").trim(),
      enabled: enabledInput ? enabledInput.checked : true
    };
  });
}

function updateProfileControls(container = profilesContainer) {
  const cards = [...container.querySelectorAll(".profile-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;
  });
  scheduleSidebarErrors();
}

function updateTaskProfileOptionsForContainer(container, profiles) {
  if (!container) return;
  const selects = container.querySelectorAll(".task-profile-select");
  selects.forEach((select) => {
    populateSelect(select, profiles, "No profiles configured");
  });
}

function updateTaskProfileOptions() {
  const profiles = collectProfiles().filter((profile) => isEnabled(profile.enabled));
  updateTaskProfileOptionsForContainer(tasksContainer, profiles);

  const workspaceCards = document.querySelectorAll(".workspace-card");
  workspaceCards.forEach((card) => {
    const scope = getWorkspaceScopeData(card);
    updateTaskProfileOptionsForContainer(
      card.querySelector(".workspace-tasks"),
      scope.profiles
    );
  });

  const siteCards = document.querySelectorAll(".site-card");
  siteCards.forEach((card) => {
    const scope = getSiteScopeData(card);
    updateTaskProfileOptionsForContainer(
      card.querySelector(".site-tasks"),
      scope.profiles
    );
  });

  updateShortcutOptions();
  refreshWorkspaceInheritedLists();
  refreshSiteInheritedLists();
  scheduleSidebarErrors();
}

function updateEnvApiOptionsForContainer(container, apiConfigs) {
  if (!container) return;
  const selects = container.querySelectorAll(".env-config-api-select");
  selects.forEach((select) => {
    select.dataset.preferred = select.value;
    populateSelect(select, apiConfigs, "No API configs configured");
  });
}

function refreshWorkspaceApiConfigLists() {
  const apiConfigs = collectApiConfigs().filter((config) => isEnabled(config.enabled));
  const workspaceCards = document.querySelectorAll(".workspace-card");
  workspaceCards.forEach((card) => {
    const list = card.querySelector('.inherited-list[data-module="apiConfigs"]');
    if (!list) return;
    const disabled = collectDisabledInherited(list);
    const nextList = buildApiConfigToggleList(apiConfigs, disabled);
    nextList.dataset.module = "apiConfigs";
    list.replaceWith(nextList);
  });
}

function refreshSiteApiConfigLists() {
  const siteCards = document.querySelectorAll(".site-card");
  siteCards.forEach((card) => {
    const list = card.querySelector('.inherited-list[data-module="apiConfigs"]');
    if (!list) return;
    const disabled = collectDisabledInherited(list);
    const scopedConfigs = getSiteApiConfigs(card);
    const nextList = buildApiConfigToggleList(scopedConfigs, disabled);
    nextList.dataset.module = "apiConfigs";
    list.replaceWith(nextList);
  });
}

function refreshWorkspaceInheritedLists() {
  const workspaceCards = document.querySelectorAll(".workspace-card");
  workspaceCards.forEach((card) => {
    const sections = [
      {
        key: "envs",
        parent: () => collectEnvConfigs(),
        container: card.querySelector(".workspace-envs")
      },
      {
        key: "profiles",
        parent: () => collectProfiles(),
        container: card.querySelector(".workspace-profiles")
      },
      {
        key: "tasks",
        parent: () => collectTasks(),
        container: card.querySelector(".workspace-tasks")
      },
      {
        key: "shortcuts",
        parent: () => collectShortcuts(),
        container: card.querySelector(".workspace-shortcuts")
      }
    ];
    sections.forEach((section) => {
      const list = card.querySelector(
        `.inherited-list[data-module="${section.key}"]`
      );
      if (!list) return;
      replaceInheritedList(
        list,
        section.key,
        section.parent,
        section.container
      );
    });
  });
}

function refreshSiteInheritedLists() {
  const siteCards = document.querySelectorAll(".site-card");
  siteCards.forEach((card) => {
    const workspaceId = card.querySelector(".site-workspace")?.value || "global";
    const workspaceCard = document.querySelector(
      `.workspace-card[data-id="${workspaceId}"]`
    );
    const workspaceScope = workspaceCard
      ? getWorkspaceScopeData(workspaceCard)
      : {
          envs: collectEnvConfigs(),
          profiles: collectProfiles(),
          tasks: collectTasks(),
          shortcuts: collectShortcuts()
        };
    const sections = [
      {
        key: "envs",
        parent: workspaceScope.envs,
        container: card.querySelector(".site-envs")
      },
      {
        key: "profiles",
        parent: workspaceScope.profiles,
        container: card.querySelector(".site-profiles")
      },
      {
        key: "tasks",
        parent: workspaceScope.tasks,
        container: card.querySelector(".site-tasks")
      },
      {
        key: "shortcuts",
        parent: workspaceScope.shortcuts,
        container: card.querySelector(".site-shortcuts")
      }
    ];
    sections.forEach((section) => {
      const list = card.querySelector(
        `.inherited-list[data-module="${section.key}"]`
      );
      if (!list) return;
      replaceInheritedList(list, section.key, section.parent, section.container);
    });
  });
}

function getWorkspaceApiConfigs(workspaceCard) {
  const apiConfigs = collectApiConfigs().filter((config) => isEnabled(config.enabled));
  if (!workspaceCard) return apiConfigs;
  const disabled = collectDisabledInherited(
    workspaceCard.querySelector('.inherited-list[data-module="apiConfigs"]')
  );
  return apiConfigs.filter((config) => !disabled.includes(config.id));
}

function getSiteApiConfigs(siteCard) {
  const apiConfigs = collectApiConfigs().filter((config) => isEnabled(config.enabled));
  if (!siteCard) return apiConfigs;
  const workspaceId =
    siteCard.querySelector(".site-workspace")?.value || "global";
  const workspaceCard = document.querySelector(
    `.workspace-card[data-id="${workspaceId}"]`
  );
  const workspaceDisabled = collectDisabledInherited(
    workspaceCard?.querySelector('.inherited-list[data-module="apiConfigs"]')
  );
  const siteDisabled = collectDisabledInherited(
    siteCard.querySelector('.inherited-list[data-module="apiConfigs"]')
  );
  return apiConfigs.filter(
    (config) =>
      !workspaceDisabled.includes(config.id) &&
      !siteDisabled.includes(config.id)
  );
}

function getApiConfigsForEnvContainer(container) {
  if (!container) {
    return collectApiConfigs().filter((config) => isEnabled(config.enabled));
  }
  const workspaceCard = container.closest(".workspace-card");
  if (workspaceCard) {
    return getWorkspaceApiConfigs(workspaceCard);
  }
  const siteCard = container.closest(".site-card");
  if (siteCard) {
    return getSiteApiConfigs(siteCard);
  }
  return collectApiConfigs().filter((config) => isEnabled(config.enabled));
}

function getTaskScopeForContainer(container) {
  if (!container) {
    return {
      envs: collectEnvConfigs().filter((env) => isEnabled(env.enabled)),
      profiles: collectProfiles().filter((profile) => isEnabled(profile.enabled))
    };
  }
  const siteCard = container.closest(".site-card");
  if (siteCard) {
    const scope = getSiteScopeData(siteCard);
    return { envs: scope.envs, profiles: scope.profiles };
  }
  const workspaceCard = container.closest(".workspace-card");
  if (workspaceCard) {
    const scope = getWorkspaceScopeData(workspaceCard);
    return { envs: scope.envs, profiles: scope.profiles };
  }
  return {
    envs: collectEnvConfigs().filter((env) => isEnabled(env.enabled)),
    profiles: collectProfiles().filter((profile) => isEnabled(profile.enabled))
  };
}

function updateEnvApiOptions() {
  refreshWorkspaceApiConfigLists();
  refreshSiteApiConfigLists();

  const apiConfigs = collectApiConfigs().filter((config) => isEnabled(config.enabled));
  updateEnvApiOptionsForContainer(envConfigsContainer, apiConfigs);

  const workspaceCards = document.querySelectorAll(".workspace-card");
  workspaceCards.forEach((card) => {
    const scopedConfigs = getWorkspaceApiConfigs(card);
    updateEnvApiOptionsForContainer(
      card.querySelector(".workspace-envs"),
      scopedConfigs
    );
  });

  const siteCards = document.querySelectorAll(".site-card");
  siteCards.forEach((card) => {
    const scopedConfigs = getSiteApiConfigs(card);
    updateEnvApiOptionsForContainer(
      card.querySelector(".site-envs"),
      scopedConfigs
    );
  });

  updateTaskEnvOptions();
  refreshWorkspaceInheritedLists();
  refreshSiteInheritedLists();
}

function updateShortcutOptionsForContainer(container, options = {}) {
  if (!container) return;
  const envs = options.envs || [];
  const profiles = options.profiles || [];
  const tasks = options.tasks || [];
  const cards = container.querySelectorAll(".shortcut-card");
  cards.forEach((card) => {
    const envSelect = card.querySelector(".shortcut-env");
    const profileSelect = card.querySelector(".shortcut-profile");
    const taskSelect = card.querySelector(".shortcut-task");
    if (envSelect) {
      envSelect.dataset.preferred = envSelect.value;
      populateSelect(envSelect, envs, "No environments configured");
    }
    if (profileSelect) {
      profileSelect.dataset.preferred = profileSelect.value;
      populateSelect(profileSelect, profiles, "No profiles configured");
    }
    if (taskSelect) {
      taskSelect.dataset.preferred = taskSelect.value;
      populateSelect(taskSelect, tasks, "No tasks configured");
    }
  });
}

function updateShortcutOptions() {
  const envs = collectEnvConfigs().filter((env) => isEnabled(env.enabled));
  const profiles = collectProfiles().filter((profile) => isEnabled(profile.enabled));
  const tasks = collectTasks().filter((task) => isEnabled(task.enabled));
  updateShortcutOptionsForContainer(shortcutsContainer, { envs, profiles, tasks });

  const workspaceCards = document.querySelectorAll(".workspace-card");
  workspaceCards.forEach((card) => {
    const scope = getWorkspaceScopeData(card);
    updateShortcutOptionsForContainer(card.querySelector(".workspace-shortcuts"), {
      envs: scope.envs,
      profiles: scope.profiles,
      tasks: scope.tasks
    });
  });

  const siteCards = document.querySelectorAll(".site-card");
  siteCards.forEach((card) => {
    const scope = getSiteScopeData(card);
    updateShortcutOptionsForContainer(card.querySelector(".site-shortcuts"), {
      envs: scope.envs,
      profiles: scope.profiles,
      tasks: scope.tasks
    });
  });
  refreshWorkspaceInheritedLists();
  refreshSiteInheritedLists();
  scheduleSidebarErrors();
}

function collectWorkspaces() {
  const cards = [...workspacesContainer.querySelectorAll(".workspace-card")];
  return cards.map((card) => {
    const nameInput = card.querySelector(".workspace-name");
    const themeSelect = card.querySelector(".appearance-theme");
    const toolbarSelect = card.querySelector(".appearance-toolbar-position");
    
    // Collect nested resources
    const envsContainer = card.querySelector(".workspace-envs");
    const profilesContainer = card.querySelector(".workspace-profiles");
    const tasksContainer = card.querySelector(".workspace-tasks");
    const shortcutsContainer = card.querySelector(".workspace-shortcuts");
    const envsInherited = card.querySelector('.inherited-list[data-module="envs"]');
    const profilesInherited = card.querySelector('.inherited-list[data-module="profiles"]');
    const tasksInherited = card.querySelector('.inherited-list[data-module="tasks"]');
    const shortcutsInherited = card.querySelector('.inherited-list[data-module="shortcuts"]');
    const apiConfigsInherited = card.querySelector('.inherited-list[data-module="apiConfigs"]');

    // We can reuse collect functions if they accept a container!
    // But collectEnvConfigs currently returns objects with flat IDs. 
    // We'll need to ensure we don't lose the nested nature or we handle it during save.
    
    // Actually, saveSettings stores workspaces array. If we put the resources inside, it works.
    
    return {
      id: card.dataset.id || newWorkspaceId(),
      name: (nameInput?.value || "Untitled Workspace").trim(),
      theme: themeSelect?.value || "inherit",
      toolbarPosition: toolbarSelect?.value || "inherit",
      envConfigs: envsContainer ? collectEnvConfigs(envsContainer) : [],
      profiles: profilesContainer ? collectProfiles(profilesContainer) : [],
      tasks: tasksContainer ? collectTasks(tasksContainer) : [],
      shortcuts: shortcutsContainer ? collectShortcuts(shortcutsContainer) : [],
      disabledInherited: {
        envs: collectDisabledInherited(envsInherited),
        profiles: collectDisabledInherited(profilesInherited),
        tasks: collectDisabledInherited(tasksInherited),
        shortcuts: collectDisabledInherited(shortcutsInherited),
        apiConfigs: collectDisabledInherited(apiConfigsInherited)
      }
    };
  });
}

function collectShortcuts(container = shortcutsContainer) {
  if (!container) return [];
  const cards = [...container.querySelectorAll(".shortcut-card")];
  return cards.map((card) => {
    const nameInput = card.querySelector(".shortcut-name");
    const envSelect = card.querySelector(".shortcut-env");
    const profileSelect = card.querySelector(".shortcut-profile");
    const taskSelect = card.querySelector(".shortcut-task");
    const enabledInput = card.querySelector(".config-enabled");
    return {
      id: card.dataset.id || newShortcutId(),
      name: (nameInput?.value || "Untitled Shortcut").trim(),
      envId: envSelect?.value || "",
      profileId: profileSelect?.value || "",
      taskId: taskSelect?.value || "",
      enabled: enabledInput ? enabledInput.checked : true
    };
  });
}

function collectEnvConfigs(container = envConfigsContainer) {
  if (!container) return [];
  const cards = [...container.querySelectorAll(".env-config-card")];
  return cards.map((card) => {
    const nameInput = card.querySelector(".env-config-name");
    const apiSelect = card.querySelector(".env-config-api-select");
    const promptInput = card.querySelector(".env-config-prompt");
    const enabledInput = card.querySelector(".config-enabled");
    return {
      id: card.dataset.id || newEnvConfigId(),
      name: (nameInput?.value || "Default").trim(),
      apiConfigId: apiSelect?.value || "",
      systemPrompt: (promptInput?.value || "").trim(),
      enabled: enabledInput ? enabledInput.checked : true
    };
  });
}

function renderWorkspaceSection(title, containerClass, items, builder, newItemFactory) {
  const details = document.createElement("details");
  details.className = "panel sub-panel";
  details.style.marginTop = "10px";
  details.style.border = "1px solid var(--border)";
  details.style.borderRadius = "8px";
  details.style.padding = "8px";
  
  const summary = document.createElement("summary");
  summary.className = "panel-summary";
  summary.style.cursor = "pointer";
  summary.innerHTML = `<h3 style="display:inline; font-size: 13px; font-weight: 600; margin:0;">${title}</h3>`;
  details.appendChild(summary);

  const body = document.createElement("div");
  body.className = "panel-body panel-body-inherited";
  body.style.paddingTop = "10px";
  
  const listContainer = document.createElement("div");
  listContainer.className = containerClass;
  
  if (items && Array.isArray(items)) {
    for (const item of items) {
      listContainer.appendChild(builder(item, listContainer));
    }
  }

  const row = document.createElement("div");
  row.className = "row";
  row.style.marginTop = "8px";
  
  const addBtn = document.createElement("button");
  addBtn.className = "ghost";
  addBtn.type = "button";
  addBtn.textContent = "Add";
  addBtn.addEventListener("click", () => {
    const newItem = newItemFactory(listContainer);
    const newCard = builder(newItem, listContainer);
    listContainer.appendChild(newCard);
    scheduleSidebarErrors();
  });
  
  row.appendChild(addBtn);
  body.appendChild(row);
  body.appendChild(listContainer);
  details.appendChild(body);
  
  return details;
}

function buildAppearanceSection({ theme = "inherit", toolbarPosition = "inherit" } = {}) {
  const details = document.createElement("details");
  details.className = "panel sub-panel";

  const summary = document.createElement("summary");
  summary.className = "panel-summary";
  summary.innerHTML =
    '<h3 style="display:inline; font-size: 13px; font-weight: 600; margin:0;">Appearance</h3>';
  details.appendChild(summary);

  const body = document.createElement("div");
  body.className = "panel-body";

  const themeField = document.createElement("div");
  themeField.className = "field";
  const themeLabel = document.createElement("label");
  themeLabel.textContent = "Theme";
  const themeSelect = document.createElement("select");
  themeSelect.className = "appearance-theme";
  const themes = ["inherit", "system", "light", "dark"];
  for (const t of themes) {
    const opt = document.createElement("option");
    opt.value = t;
    opt.textContent = t.charAt(0).toUpperCase() + t.slice(1);
    themeSelect.appendChild(opt);
  }
  themeSelect.value = theme || "inherit";
  themeField.appendChild(themeLabel);
  themeField.appendChild(themeSelect);

  const toolbarField = document.createElement("div");
  toolbarField.className = "field";
  const toolbarLabel = document.createElement("label");
  toolbarLabel.textContent = "Toolbar position";
  const toolbarSelect = document.createElement("select");
  toolbarSelect.className = "appearance-toolbar-position";
  const positions = [
    "inherit",
    "bottom-right",
    "bottom-left",
    "top-right",
    "top-left",
    "bottom-center"
  ];
  const positionLabels = {
    inherit: "Inherit",
    "bottom-right": "Bottom Right",
    "bottom-left": "Bottom Left",
    "top-right": "Top Right",
    "top-left": "Top Left",
    "bottom-center": "Bottom Center"
  };
  for (const pos of positions) {
    const opt = document.createElement("option");
    opt.value = pos;
    opt.textContent = positionLabels[pos] || pos;
    toolbarSelect.appendChild(opt);
  }
  toolbarSelect.value = toolbarPosition || "inherit";
  toolbarField.appendChild(toolbarLabel);
  toolbarField.appendChild(toolbarSelect);

  body.appendChild(themeField);
  body.appendChild(toolbarField);
  details.appendChild(body);

  return details;
}

function normalizeName(value) {
  return (value || "").trim().toLowerCase();
}

function resolveScopedItems(parentItems, localItems, disabledNames) {
  const parent = Array.isArray(parentItems) ? parentItems : [];
  const local = Array.isArray(localItems) ? localItems : [];
  const disabledSet = new Set(
    (disabledNames || []).map((name) => normalizeName(name)).filter(Boolean)
  );
  const localNameSet = new Set(
    local.map((item) => normalizeName(item.name)).filter(Boolean)
  );
  const inherited = parent.filter((item) => {
    if (!isEnabled(item.enabled)) return false;
    const key = normalizeName(item.name);
    if (!key) return false;
    if (localNameSet.has(key)) return false;
    if (disabledSet.has(key)) return false;
    return true;
  });
  const effective = [
    ...inherited,
    ...local.filter((item) => isEnabled(item.enabled))
  ];
  return { inherited, effective, localNameSet, disabledSet };
}

function buildInheritedList(parentItems, localItems, disabledNames) {
  const container = document.createElement("div");
  container.className = "inherited-list";
  const parent = Array.isArray(parentItems) ? parentItems : [];
  const local = Array.isArray(localItems) ? localItems : [];
  const localNameSet = new Set(
    local.map((item) => normalizeName(item.name)).filter(Boolean)
  );
  const disabledSet = new Set(
    (disabledNames || []).map((name) => normalizeName(name)).filter(Boolean)
  );

  const enabledParents = parent.filter((item) => isEnabled(item.enabled));
  if (!enabledParents.length) {
    const empty = document.createElement("div");
    empty.className = "hint";
    empty.textContent = "No inherited items.";
    container.appendChild(empty);
    return container;
  }

  for (const item of enabledParents) {
    const key = normalizeName(item.name);
    if (!key) continue;
    const overridden = localNameSet.has(key);
    const disabled = overridden || disabledSet.has(key);
    const row = document.createElement("div");
    row.className = "inherited-item";
    row.dataset.key = key;
    row.dataset.overridden = overridden ? "true" : "false";
    row.classList.toggle("is-enabled", !disabled);
    row.classList.toggle("is-disabled", disabled);

    const label = document.createElement("label");
    label.className = "inherited-button";
    const toggle = document.createElement("input");
    toggle.type = "checkbox";
    toggle.className = "inherited-toggle";
    toggle.checked = !disabled;
    toggle.disabled = overridden;
    toggle.addEventListener("change", () => {
      const enabled = toggle.checked;
      row.classList.toggle("is-enabled", enabled);
      row.classList.toggle("is-disabled", !enabled);
    });
    label.appendChild(toggle);
    label.appendChild(document.createTextNode(item.name || "Untitled"));
    row.appendChild(label);

    if (overridden) {
      const helper = document.createElement("div");
      helper.className = "hint";
      helper.textContent = "Overridden by a local config.";
      row.appendChild(helper);
    }

    container.appendChild(row);
  }

  return container;
}

function buildApiConfigToggleList(apiConfigs, disabledIds) {
  const container = document.createElement("div");
  container.className = "inherited-list";
  const configs = (apiConfigs || []).filter((config) => isEnabled(config.enabled));
  const disabledSet = new Set(disabledIds || []);
  if (!configs.length) {
    const empty = document.createElement("div");
    empty.className = "hint";
    empty.textContent = "No API configs available.";
    container.appendChild(empty);
    return container;
  }

  for (const config of configs) {
    const row = document.createElement("div");
    row.className = "inherited-item";
    row.dataset.key = config.id;
    const enabled = !disabledSet.has(config.id);
    row.classList.toggle("is-enabled", enabled);
    row.classList.toggle("is-disabled", !enabled);
    const label = document.createElement("label");
    label.className = "inherited-button";
    const toggle = document.createElement("input");
    toggle.type = "checkbox";
    toggle.className = "inherited-toggle";
    toggle.checked = enabled;
    toggle.addEventListener("change", () => {
      row.classList.toggle("is-enabled", toggle.checked);
      row.classList.toggle("is-disabled", !toggle.checked);
      updateEnvApiOptions();
      scheduleSidebarErrors();
    });
    label.appendChild(toggle);
    label.appendChild(document.createTextNode(config.name || "Default"));
    row.appendChild(label);
    container.appendChild(row);
  }

  return container;
}

function buildScopeGroup(title, content) {
  const wrapper = document.createElement("div");
  wrapper.className = "scope-group";
  const heading = document.createElement("div");
  heading.className = "scope-title hint-accent";
  heading.textContent = title;
  wrapper.appendChild(heading);
  wrapper.appendChild(content);
  return wrapper;
}

function wireInheritedListHandlers(list, module) {
  list.addEventListener("change", (event) => {
    if (!event.target.classList.contains("inherited-toggle")) return;
    if (module === "envs") {
      updateTaskEnvOptions();
      updateShortcutOptions();
    } else if (module === "profiles") {
      updateTaskProfileOptions();
      updateShortcutOptions();
    } else if (module === "tasks") {
      updateShortcutOptions();
    }
    scheduleSidebarErrors();
  });
}

function replaceInheritedList(list, module, parentItems, localContainer) {
  const disabled = collectDisabledInherited(list);
  const resolvedParents =
    typeof parentItems === "function" ? parentItems() : parentItems;
  const locals = collectLocalItemsForModule(module, localContainer);
  const nextList = buildInheritedList(resolvedParents, locals, disabled);
  nextList.dataset.module = module;
  wireInheritedListHandlers(nextList, module);
  list.replaceWith(nextList);
  return nextList;
}

function collectLocalItemsForModule(module, container) {
  if (!container) return [];
  if (module === "envs") return collectEnvConfigs(container);
  if (module === "profiles") return collectProfiles(container);
  if (module === "tasks") return collectTasks(container);
  if (module === "shortcuts") return collectShortcuts(container);
  return [];
}

function buildScopedModuleSection({
  title,
  module,
  parentItems,
  localItems,
  disabledNames,
  localLabel,
  localContainerClass,
  buildCard,
  newItemFactory,
  cardOptions
}) {
  const details = document.createElement("details");
  details.className = "panel sub-panel";
  const summary = document.createElement("summary");
  summary.className = "panel-summary";
  summary.innerHTML = `<h3 style="display:inline; font-size: 13px; font-weight: 600; margin:0;">${title}</h3>`;
  details.appendChild(summary);

  const body = document.createElement("div");
  body.className = "panel-body";

  const resolvedParents =
    typeof parentItems === "function" ? parentItems() : parentItems;
  let inheritedList = buildInheritedList(
    resolvedParents,
    localItems,
    disabledNames
  );
  inheritedList.dataset.module = module;
  wireInheritedListHandlers(inheritedList, module);

  const refreshInherited = () => {
    inheritedList = replaceInheritedList(
      inheritedList,
      module,
      parentItems,
      localContainer
    );
  };

  const inheritedGroup = buildScopeGroup("Inherited", inheritedList);
  inheritedGroup.classList.add("scope-group-inherited");
  body.appendChild(inheritedGroup);

  const localContainer = document.createElement("div");
  localContainer.className = localContainerClass;
  const items = Array.isArray(localItems) ? localItems : [];
  for (const item of items) {
    const options =
      typeof cardOptions === "function" ? cardOptions() : cardOptions;
    localContainer.appendChild(buildCard(item, localContainer, options));
  }

  const localActions = document.createElement("div");
  localActions.className = "row";
  const spacer = document.createElement("div");
  const addBtn = document.createElement("button");
  addBtn.type = "button";
  addBtn.className = "ghost";
  addBtn.textContent = "Add";
  addBtn.addEventListener("click", () => {
    const newItem = newItemFactory(localContainer);
    const options =
      typeof cardOptions === "function" ? cardOptions() : cardOptions;
    const newCard = buildCard(newItem, localContainer, options);
    const first = localContainer.firstElementChild;
    if (first) {
      localContainer.insertBefore(newCard, first);
    } else {
      localContainer.appendChild(newCard);
    }
    if (module === "envs") {
      updateEnvApiOptions();
    } else if (module === "profiles") {
      updateTaskProfileOptions();
    } else if (module === "tasks") {
      updateShortcutOptions();
    }
    refreshInherited();
    scheduleSidebarErrors();
  });
  localActions.appendChild(spacer);
  localActions.appendChild(addBtn);

  const localWrapper = document.createElement("div");
  localWrapper.appendChild(localActions);
  localWrapper.appendChild(localContainer);
  body.appendChild(buildScopeGroup(localLabel, localWrapper));

  const nameSelector = {
    envs: ".env-config-name",
    profiles: ".profile-name",
    tasks: ".task-name",
    shortcuts: ".shortcut-name"
  }[module];
  if (nameSelector) {
    localContainer.addEventListener("input", (event) => {
      if (event.target.matches(nameSelector)) {
        refreshInherited();
      }
    });
  }
  localContainer.addEventListener("click", (event) => {
    if (event.target.closest(".delete")) {
      setTimeout(refreshInherited, 0);
    }
  });

  refreshInherited();

  details.appendChild(body);
  return { details, localContainer };
}

function collectDisabledInherited(listContainer) {
  if (!listContainer) return [];
  const disabled = [];
  const items = listContainer.querySelectorAll(".inherited-item");
  items.forEach((item) => {
    if (item.dataset.overridden === "true") return;
    const toggle = item.querySelector(".inherited-toggle");
    if (toggle && !toggle.checked) {
      disabled.push(item.dataset.key);
    }
  });
  return disabled;
}

function listWorkspaceTargets() {
  return [...workspacesContainer.querySelectorAll(".workspace-card")].map(
    (card) => ({
      id: card.dataset.id || "",
      name: card.querySelector(".workspace-name")?.value || "Untitled Workspace"
    })
  );
}

function listSiteTargets() {
  return [...sitesContainer.querySelectorAll(".site-card")].map((card) => ({
    id: card.dataset.id || "",
    name:
      card.querySelector(".site-name")?.value ||
      card.querySelector(".site-pattern")?.value ||
      "Untitled Site"
  }));
}

function fillTargetSelect(select, options, placeholder) {
  select.innerHTML = "";
  const initial = document.createElement("option");
  initial.value = "";
  initial.textContent = placeholder;
  select.appendChild(initial);
  for (const option of options) {
    const opt = document.createElement("option");
    opt.value = option.id;
    opt.textContent = option.name;
    select.appendChild(opt);
  }
}

function getWorkspaceScopeData(workspaceCard) {
  const globalEnvs = collectEnvConfigs();
  const globalProfiles = collectProfiles();
  const globalTasks = collectTasks();
  const globalShortcuts = collectShortcuts();
  const envs = collectEnvConfigs(
    workspaceCard.querySelector(".workspace-envs")
  );
  const profiles = collectProfiles(
    workspaceCard.querySelector(".workspace-profiles")
  );
  const tasks = collectTasks(workspaceCard.querySelector(".workspace-tasks"));
  const shortcuts = collectShortcuts(
    workspaceCard.querySelector(".workspace-shortcuts")
  );
  const envDisabled = collectDisabledInherited(
    workspaceCard.querySelector('.inherited-list[data-module="envs"]')
  );
  const profileDisabled = collectDisabledInherited(
    workspaceCard.querySelector('.inherited-list[data-module="profiles"]')
  );
  const taskDisabled = collectDisabledInherited(
    workspaceCard.querySelector('.inherited-list[data-module="tasks"]')
  );
  const shortcutDisabled = collectDisabledInherited(
    workspaceCard.querySelector('.inherited-list[data-module="shortcuts"]')
  );

  const envScope = resolveScopedItems(globalEnvs, envs, envDisabled);
  const profileScope = resolveScopedItems(
    globalProfiles,
    profiles,
    profileDisabled
  );
  const taskScope = resolveScopedItems(globalTasks, tasks, taskDisabled);
  const shortcutScope = resolveScopedItems(
    globalShortcuts,
    shortcuts,
    shortcutDisabled
  );
  return {
    envs: envScope.effective,
    profiles: profileScope.effective,
    tasks: taskScope.effective,
    shortcuts: shortcutScope.effective
  };
}

function getSiteScopeData(siteCard) {
  const workspaceId = siteCard.querySelector(".site-workspace")?.value || "global";
  const workspaceCard = document.querySelector(
    `.workspace-card[data-id="${workspaceId}"]`
  );
  const workspaceScope = workspaceCard
    ? getWorkspaceScopeData(workspaceCard)
    : {
        envs: collectEnvConfigs(),
        profiles: collectProfiles(),
        tasks: collectTasks(),
        shortcuts: collectShortcuts()
      };

  const envs = collectEnvConfigs(siteCard.querySelector(".site-envs"));
  const profiles = collectProfiles(siteCard.querySelector(".site-profiles"));
  const tasks = collectTasks(siteCard.querySelector(".site-tasks"));
  const shortcuts = collectShortcuts(siteCard.querySelector(".site-shortcuts"));
  const envDisabled = collectDisabledInherited(
    siteCard.querySelector('.inherited-list[data-module="envs"]')
  );
  const profileDisabled = collectDisabledInherited(
    siteCard.querySelector('.inherited-list[data-module="profiles"]')
  );
  const taskDisabled = collectDisabledInherited(
    siteCard.querySelector('.inherited-list[data-module="tasks"]')
  );
  const shortcutDisabled = collectDisabledInherited(
    siteCard.querySelector('.inherited-list[data-module="shortcuts"]')
  );

  const envScope = resolveScopedItems(
    workspaceScope.envs,
    envs,
    envDisabled
  );
  const profileScope = resolveScopedItems(
    workspaceScope.profiles,
    profiles,
    profileDisabled
  );
  const taskScope = resolveScopedItems(
    workspaceScope.tasks,
    tasks,
    taskDisabled
  );
  const shortcutScope = resolveScopedItems(
    workspaceScope.shortcuts || [],
    shortcuts,
    shortcutDisabled
  );

  return {
    envs: envScope.effective,
    profiles: profileScope.effective,
    tasks: taskScope.effective,
    shortcuts: shortcutScope.effective
  };
}

function buildDuplicateCard(module, source, container, options) {
  const nameValue = source.name || "Untitled";
  if (module === "envs") {
    const names = collectNames(container, ".env-config-name");
    const copy = {
      ...source,
      id: newEnvConfigId(),
      name: ensureUniqueName(`${nameValue} Copy`, names),
      enabled: source.enabled !== false
    };
    return buildEnvConfigCard(copy, container);
  }
  if (module === "profiles") {
    const names = collectNames(container, ".profile-name");
    const copy = {
      ...source,
      id: newProfileId(),
      name: ensureUniqueName(`${nameValue} Copy`, names),
      enabled: source.enabled !== false
    };
    return buildProfileCard(copy, container);
  }
  if (module === "tasks") {
    const names = collectNames(container, ".task-name");
    const envs = options?.envs || [];
    const profiles = options?.profiles || [];
    const copy = {
      ...source,
      id: newTaskId(),
      name: ensureUniqueName(`${nameValue} Copy`, names),
      enabled: source.enabled !== false,
      defaultEnvId: envs.some((env) => env.id === source.defaultEnvId)
        ? source.defaultEnvId
        : envs[0]?.id || "",
      defaultProfileId: profiles.some(
        (profile) => profile.id === source.defaultProfileId
      )
        ? source.defaultProfileId
        : profiles[0]?.id || ""
    };
    return buildTaskCard(copy, container, { envs, profiles });
  }
  if (module === "shortcuts") {
    const names = collectNames(container, ".shortcut-name");
    const envs = options?.envs || [];
    const profiles = options?.profiles || [];
    const tasks = options?.tasks || [];
    const copy = {
      ...source,
      id: newShortcutId(),
      name: ensureUniqueName(`${nameValue} Copy`, names),
      enabled: source.enabled !== false,
      envId: envs.some((env) => env.id === source.envId)
        ? source.envId
        : envs[0]?.id || "",
      profileId: profiles.some((profile) => profile.id === source.profileId)
        ? source.profileId
        : profiles[0]?.id || "",
      taskId: tasks.some((task) => task.id === source.taskId)
        ? source.taskId
        : tasks[0]?.id || ""
    };
    return buildShortcutCard(copy, container, { envs, profiles, tasks });
  }
  return null;
}

function duplicateToWorkspace(module, source, workspaceId) {
  const workspaceCard = document.querySelector(
    `.workspace-card[data-id="${workspaceId}"]`
  );
  if (!workspaceCard) return;
  const container = workspaceCard.querySelector(`.workspace-${module}`);
  if (!container) return;
  const scope = getWorkspaceScopeData(workspaceCard);
  const card = buildDuplicateCard(module, source, container, scope);
  if (card) {
    container.appendChild(card);
    scheduleSidebarErrors();
  }
}

function duplicateToSite(module, source, siteId) {
  const siteCard = document.querySelector(`.site-card[data-id="${siteId}"]`);
  if (!siteCard) return;
  const container = siteCard.querySelector(`.site-${module}`);
  if (!container) return;
  const scope = getSiteScopeData(siteCard);
  const card = buildDuplicateCard(module, source, container, scope);
  if (card) {
    container.appendChild(card);
    scheduleSidebarErrors();
  }
}

function buildDuplicateControls(module, getSourceData) {
  const wrapper = document.createElement("div");
  wrapper.className = "dup-controls";

  const workspaceBtn = document.createElement("button");
  workspaceBtn.type = "button";
  workspaceBtn.className = "ghost";
  workspaceBtn.textContent = "Duplicate to Workspace";
  const workspaceSelect = document.createElement("select");
  workspaceSelect.className = "dup-select hidden";

  workspaceBtn.addEventListener("click", () => {
    const targets = listWorkspaceTargets();
    fillTargetSelect(workspaceSelect, targets, "Select workspace");
    workspaceSelect.classList.toggle("hidden");
    workspaceSelect.focus();
  });

  workspaceSelect.addEventListener("change", () => {
    if (!workspaceSelect.value) return;
    duplicateToWorkspace(module, getSourceData(), workspaceSelect.value);
    workspaceSelect.value = "";
    workspaceSelect.classList.add("hidden");
  });

  const siteBtn = document.createElement("button");
  siteBtn.type = "button";
  siteBtn.className = "ghost";
  siteBtn.textContent = "Duplicate to Site";
  const siteSelect = document.createElement("select");
  siteSelect.className = "dup-select hidden";

  siteBtn.addEventListener("click", () => {
    const targets = listSiteTargets();
    fillTargetSelect(siteSelect, targets, "Select site");
    siteSelect.classList.toggle("hidden");
    siteSelect.focus();
  });

  siteSelect.addEventListener("change", () => {
    if (!siteSelect.value) return;
    duplicateToSite(module, getSourceData(), siteSelect.value);
    siteSelect.value = "";
    siteSelect.classList.add("hidden");
  });

  wrapper.appendChild(workspaceBtn);
  wrapper.appendChild(workspaceSelect);
  wrapper.appendChild(siteBtn);
  wrapper.appendChild(siteSelect);
  return wrapper;
}

function buildWorkspaceCard(ws, allWorkspaces = [], allSites = []) {
  const card = document.createElement("div");
  card.className = "workspace-card panel";
  card.dataset.id = ws.id || newWorkspaceId();

  const header = document.createElement("div");
  header.className = "row workspace-header";
  header.style.alignItems = "flex-end";

  const nameField = document.createElement("div");
  nameField.className = "field";
  nameField.style.flex = "1";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Workspace name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = ws.name || "";
  nameInput.className = "workspace-name";
  nameInput.placeholder = "Workspace Name";
  nameInput.addEventListener("input", () => {
    updateToc(collectWorkspaces(), collectSites());
    scheduleSidebarErrors();
  });
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    if (confirm(`Delete workspace "${ws.name}"? All items will move to global.`)) {
      card.remove();
      scheduleSidebarErrors();
      updateToc(collectWorkspaces(), collectSites());
    }
  });

  header.appendChild(nameField);
  header.appendChild(deleteBtn);
  card.appendChild(header);

  const appearanceSection = buildAppearanceSection({
    theme: ws.theme || "inherit",
    toolbarPosition: ws.toolbarPosition || "inherit"
  });
  card.appendChild(appearanceSection);

  const disabledInherited = ws.disabledInherited || {};
  const globalApiConfigs = collectApiConfigs();
  const apiConfigSection = document.createElement("details");
  apiConfigSection.className = "panel sub-panel";
  const apiSummary = document.createElement("summary");
  apiSummary.className = "panel-summary";
  apiSummary.innerHTML =
    '<h3 style="display:inline; font-size: 13px; font-weight: 600; margin:0;">API Configurations</h3>';
  apiConfigSection.appendChild(apiSummary);
  const apiBody = document.createElement("div");
  apiBody.className = "panel-body";
  const apiList = buildApiConfigToggleList(
    globalApiConfigs,
    disabledInherited.apiConfigs || []
  );
  apiList.dataset.module = "apiConfigs";
  apiBody.appendChild(apiList);
  apiConfigSection.appendChild(apiBody);
  card.appendChild(apiConfigSection);

  const envSection = buildScopedModuleSection({
    title: "Environments",
    module: "envs",
    parentItems: () => collectEnvConfigs(),
    localItems: ws.envConfigs || [],
    disabledNames: disabledInherited.envs,
    localLabel: "Workspace-specific",
    localContainerClass: "workspace-envs",
    buildCard: buildEnvConfigCard,
    newItemFactory: (container) => ({
      id: newEnvConfigId(),
      name: buildUniqueDefaultName(collectNames(container, ".env-config-name")),
      apiConfigId: getWorkspaceApiConfigs(card)[0]?.id || "",
      systemPrompt: DEFAULT_SYSTEM_PROMPT,
      enabled: true
    })
  });
  card.appendChild(envSection.details);

  const profileSection = buildScopedModuleSection({
    title: "Profiles",
    module: "profiles",
    parentItems: () => collectProfiles(),
    localItems: ws.profiles || [],
    disabledNames: disabledInherited.profiles,
    localLabel: "Workspace-specific",
    localContainerClass: "workspace-profiles",
    buildCard: buildProfileCard,
    newItemFactory: (container) => ({
      id: newProfileId(),
      name: buildUniqueDefaultName(collectNames(container, ".profile-name")),
      text: "",
      enabled: true
    })
  });
  card.appendChild(profileSection.details);

  const taskSection = buildScopedModuleSection({
    title: "Tasks",
    module: "tasks",
    parentItems: () => collectTasks(),
    localItems: ws.tasks || [],
    disabledNames: disabledInherited.tasks,
    localLabel: "Workspace-specific",
    localContainerClass: "workspace-tasks",
    buildCard: buildTaskCard,
    cardOptions: () => {
      const scope = getWorkspaceScopeData(card);
      return { envs: scope.envs, profiles: scope.profiles };
    },
    newItemFactory: (container) => {
      const scope = getWorkspaceScopeData(card);
      return {
        id: newTaskId(),
        name: buildUniqueDefaultName(collectNames(container, ".task-name")),
        text: "",
        defaultEnvId: scope.envs[0]?.id || "",
        defaultProfileId: scope.profiles[0]?.id || "",
        enabled: true
      };
    }
  });
  card.appendChild(taskSection.details);

  const shortcutSection = buildScopedModuleSection({
    title: "Toolbar Shortcuts",
    module: "shortcuts",
    parentItems: () => collectShortcuts(),
    localItems: ws.shortcuts || [],
    disabledNames: disabledInherited.shortcuts,
    localLabel: "Workspace-specific",
    localContainerClass: "workspace-shortcuts",
    buildCard: buildShortcutCard,
    cardOptions: () => {
      const scope = getWorkspaceScopeData(card);
      return { envs: scope.envs, profiles: scope.profiles, tasks: scope.tasks };
    },
    newItemFactory: (container) => {
      const scope = getWorkspaceScopeData(card);
      return {
        id: newShortcutId(),
        name: "New Shortcut",
        envId: scope.envs[0]?.id || "",
        profileId: scope.profiles[0]?.id || "",
        taskId: scope.tasks[0]?.id || "",
        enabled: true
      };
    }
  });
  card.appendChild(shortcutSection.details);

  const sitesSection = document.createElement("details");
  sitesSection.className = "panel sub-panel";
  const sitesSummary = document.createElement("summary");
  sitesSummary.className = "panel-summary";
  sitesSummary.innerHTML =
    '<h3 style="display:inline; font-size: 13px; font-weight: 600; margin:0;">Sites</h3>';
  sitesSection.appendChild(sitesSummary);
  const sitesBody = document.createElement("div");
  sitesBody.className = "panel-body";
  const siteList = document.createElement("div");
  siteList.className = "sites-list workspace-sites-list";
  siteList.dataset.workspaceId = card.dataset.id;
  renderWorkspaceSitesList(siteList, card.dataset.id, allSites);
  sitesBody.appendChild(siteList);
  sitesSection.appendChild(sitesBody);
  card.appendChild(sitesSection);

  return card;
}

function collectSites() {
  const cards = [...sitesContainer.querySelectorAll(".site-card")];
  return cards.map((card) => {
    const nameInput = card.querySelector(".site-name");
    const patternInput = card.querySelector(".site-pattern");
    const workspaceSelect = card.querySelector(".site-workspace");
    const extractInput = card.querySelector(".site-extract-selector");
    const themeSelect = card.querySelector(".appearance-theme");
    const toolbarSelect = card.querySelector(".appearance-toolbar-position");
    const envsContainer = card.querySelector(".site-envs");
    const profilesContainer = card.querySelector(".site-profiles");
    const tasksContainer = card.querySelector(".site-tasks");
    const shortcutsContainer = card.querySelector(".site-shortcuts");
    const envsInherited = card.querySelector('.inherited-list[data-module="envs"]');
    const profilesInherited = card.querySelector('.inherited-list[data-module="profiles"]');
    const tasksInherited = card.querySelector('.inherited-list[data-module="tasks"]');
    const shortcutsInherited = card.querySelector('.inherited-list[data-module="shortcuts"]');
    const apiConfigsInherited = card.querySelector('.inherited-list[data-module="apiConfigs"]');
    return {
      id: card.dataset.id || newSiteId(),
      name: (nameInput?.value || "").trim(),
      urlPattern: (patternInput?.value || "").trim(),
      workspaceId: workspaceSelect?.value || "global",
      extractSelector: (extractInput?.value || "").trim(),
      theme: themeSelect?.value || "inherit",
      toolbarPosition: toolbarSelect?.value || "inherit",
      envConfigs: envsContainer ? collectEnvConfigs(envsContainer) : [],
      profiles: profilesContainer ? collectProfiles(profilesContainer) : [],
      tasks: tasksContainer ? collectTasks(tasksContainer) : [],
      shortcuts: shortcutsContainer ? collectShortcuts(shortcutsContainer) : [],
      disabledInherited: {
        envs: collectDisabledInherited(envsInherited),
        profiles: collectDisabledInherited(profilesInherited),
        tasks: collectDisabledInherited(tasksInherited),
        shortcuts: collectDisabledInherited(shortcutsInherited),
        apiConfigs: collectDisabledInherited(apiConfigsInherited)
      }
    };
  });
}

function buildSiteCard(site, allWorkspaces = []) {
  const card = document.createElement("div");
  card.className = "site-card panel";
  card.dataset.id = site.id || newSiteId();

  const row = document.createElement("div");
  row.className = "row site-header";
  row.style.alignItems = "flex-end";

  const nameField = document.createElement("div");
  nameField.className = "field";
  nameField.style.flex = "0.6";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Site name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = site.name || "";
  nameInput.className = "site-name";
  nameInput.placeholder = "Site Name";
  nameInput.addEventListener("input", () => {
    updateToc(collectWorkspaces(), collectSites());
    scheduleSidebarErrors();
  });
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

  const patternField = document.createElement("div");
  patternField.className = "field";
  patternField.style.flex = "1";
  const patternLabel = document.createElement("label");
  patternLabel.textContent = "URL Pattern";
  const patternInput = document.createElement("input");
  patternInput.type = "text";
  patternInput.value = site.urlPattern || "";
  patternInput.className = "site-pattern";
  patternInput.placeholder = "example.com/*";
  patternInput.addEventListener("input", () => {
    updateToc(collectWorkspaces(), collectSites());
    scheduleSidebarErrors();
  });
  patternField.appendChild(patternLabel);
  patternField.appendChild(patternInput);

  const wsField = document.createElement("div");
  wsField.className = "field";
  const wsLabel = document.createElement("label");
  wsLabel.textContent = "Workspace";
  const wsSelect = document.createElement("select");
  wsSelect.className = "site-workspace";
  const globalOpt = document.createElement("option");
  globalOpt.value = "global";
  globalOpt.textContent = "Global";
  wsSelect.appendChild(globalOpt);
  for (const ws of allWorkspaces) {
    const opt = document.createElement("option");
    opt.value = ws.id;
    opt.textContent = ws.name || "Untitled Workspace";
    wsSelect.appendChild(opt);
  }
  wsSelect.value = site.workspaceId || "global";
  wsField.appendChild(wsLabel);
  wsField.appendChild(wsSelect);

  wsSelect.addEventListener("change", () => {
    const currentSites = collectSites();
    const current = currentSites.find((entry) => entry.id === card.dataset.id);
    if (!current) return;
    const refreshed = {
      ...current,
      workspaceId: wsSelect.value || "global",
      disabledInherited: normalizeDisabledInherited()
    };
    const replacement = buildSiteCard(refreshed, collectWorkspaces());
    card.replaceWith(replacement);
    scheduleSidebarErrors();
    updateEnvApiOptions();
    updateTaskEnvOptions();
    updateTaskProfileOptions();
    updateShortcutOptions();
    updateToc(collectWorkspaces(), collectSites());
  });

  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    card.remove();
    scheduleSidebarErrors();
    updateToc(collectWorkspaces(), collectSites());
  });

  row.appendChild(nameField);
  row.appendChild(patternField);
  row.appendChild(wsField);
  row.appendChild(deleteBtn);
  card.appendChild(row);

  const extractField = document.createElement("div");
  extractField.className = "field";
  const extractLabel = document.createElement("label");
  extractLabel.textContent = "Site Text Selector";
  const extractInput = document.createElement("input");
  extractInput.type = "text";
  extractInput.value = site.extractSelector || "";
  extractInput.className = "site-extract-selector";
  extractInput.placeholder = "body";
  extractInput.addEventListener("input", () => {
    scheduleSidebarErrors();
  });
  extractField.appendChild(extractLabel);
  extractField.appendChild(extractInput);
  card.appendChild(extractField);

  const appearanceSection = buildAppearanceSection({
    theme: site.theme || "inherit",
    toolbarPosition: site.toolbarPosition || "inherit"
  });
  card.appendChild(appearanceSection);

  const disabledInherited = site.disabledInherited || {};
  const globalApiConfigs = collectApiConfigs();
  const workspace =
    allWorkspaces.find((ws) => ws.id === wsSelect.value) || null;
  const workspaceDisabled = workspace?.disabledInherited || {};

  const apiConfigSection = document.createElement("details");
  apiConfigSection.className = "panel sub-panel";
  const apiSummary = document.createElement("summary");
  apiSummary.className = "panel-summary";
  apiSummary.innerHTML =
    '<h3 style="display:inline; font-size: 13px; font-weight: 600; margin:0;">API Configurations</h3>';
  apiConfigSection.appendChild(apiSummary);
  const apiBody = document.createElement("div");
  apiBody.className = "panel-body";
  const workspaceApiEnabled = globalApiConfigs.filter(
    (config) =>
      isEnabled(config.enabled) &&
      !(workspaceDisabled.apiConfigs || []).includes(config.id)
  );
  const apiList = buildApiConfigToggleList(
    workspaceApiEnabled,
    disabledInherited.apiConfigs || []
  );
  apiList.dataset.module = "apiConfigs";
  apiBody.appendChild(apiList);
  apiConfigSection.appendChild(apiBody);
  card.appendChild(apiConfigSection);

  const resolveWorkspaceScope = () => {
    const selectedWorkspaceId = wsSelect.value || "global";
    const workspaceCard = document.querySelector(
      `.workspace-card[data-id="${selectedWorkspaceId}"]`
    );
    if (workspaceCard) {
      return getWorkspaceScopeData(workspaceCard);
    }
    return {
      envs: collectEnvConfigs(),
      profiles: collectProfiles(),
      tasks: collectTasks(),
      shortcuts: collectShortcuts()
    };
  };

  const envSection = buildScopedModuleSection({
    title: "Environments",
    module: "envs",
    parentItems: () => resolveWorkspaceScope().envs,
    localItems: site.envConfigs || [],
    disabledNames: disabledInherited.envs,
    localLabel: "Site-specific",
    localContainerClass: "site-envs",
    buildCard: buildEnvConfigCard,
    newItemFactory: (container) => ({
      id: newEnvConfigId(),
      name: buildUniqueDefaultName(collectNames(container, ".env-config-name")),
      apiConfigId: getSiteApiConfigs(card)[0]?.id || "",
      systemPrompt: DEFAULT_SYSTEM_PROMPT,
      enabled: true
    })
  });
  card.appendChild(envSection.details);

  const profileSection = buildScopedModuleSection({
    title: "Profiles",
    module: "profiles",
    parentItems: () => resolveWorkspaceScope().profiles,
    localItems: site.profiles || [],
    disabledNames: disabledInherited.profiles,
    localLabel: "Site-specific",
    localContainerClass: "site-profiles",
    buildCard: buildProfileCard,
    newItemFactory: (container) => ({
      id: newProfileId(),
      name: buildUniqueDefaultName(collectNames(container, ".profile-name")),
      text: "",
      enabled: true
    })
  });
  card.appendChild(profileSection.details);

  const taskSection = buildScopedModuleSection({
    title: "Tasks",
    module: "tasks",
    parentItems: () => resolveWorkspaceScope().tasks,
    localItems: site.tasks || [],
    disabledNames: disabledInherited.tasks,
    localLabel: "Site-specific",
    localContainerClass: "site-tasks",
    buildCard: buildTaskCard,
    cardOptions: () => {
      const scope = getSiteScopeData(card);
      return { envs: scope.envs, profiles: scope.profiles };
    },
    newItemFactory: (container) => {
      const scope = getSiteScopeData(card);
      return {
        id: newTaskId(),
        name: buildUniqueDefaultName(collectNames(container, ".task-name")),
        text: "",
        defaultEnvId: scope.envs[0]?.id || "",
        defaultProfileId: scope.profiles[0]?.id || "",
        enabled: true
      };
    }
  });
  card.appendChild(taskSection.details);

  const shortcutSection = buildScopedModuleSection({
    title: "Toolbar Shortcuts",
    module: "shortcuts",
    parentItems: () => resolveWorkspaceScope().shortcuts,
    localItems: site.shortcuts || [],
    disabledNames: disabledInherited.shortcuts,
    localLabel: "Site-specific",
    localContainerClass: "site-shortcuts",
    buildCard: buildShortcutCard,
    cardOptions: () => {
      const scope = getSiteScopeData(card);
      return { envs: scope.envs, profiles: scope.profiles, tasks: scope.tasks };
    },
    newItemFactory: (container) => {
      const scope = getSiteScopeData(card);
      return {
        id: newShortcutId(),
        name: "New Shortcut",
        envId: scope.envs[0]?.id || "",
        profileId: scope.profiles[0]?.id || "",
        taskId: scope.tasks[0]?.id || "",
        enabled: true
      };
    }
  });
  card.appendChild(shortcutSection.details);

  return card;
}

function buildTaskCard(task, container = tasksContainer, options = {}) {
  const card = document.createElement("div");
  card.className = "task-card";
  card.dataset.id = task.id || newTaskId();

  const enabledLabel = document.createElement("label");
  enabledLabel.className = "toggle-label";
  const enabledInput = document.createElement("input");
  enabledInput.type = "checkbox";
  enabledInput.className = "config-enabled";
  enabledInput.checked = task.enabled !== false;
  enabledInput.addEventListener("change", () => {
    updateShortcutOptions();
    scheduleSidebarErrors();
  });
  enabledLabel.appendChild(enabledInput);
  enabledLabel.appendChild(document.createTextNode("Enabled"));

  const nameField = document.createElement("div");
  nameField.className = "field";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = task.name || "";
  nameInput.className = "task-name";
  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 profileField = document.createElement("div");
  profileField.className = "field";
  const profileLabel = document.createElement("label");
  profileLabel.textContent = "Default profile";
  const profileSelect = document.createElement("select");
  profileSelect.className = "task-profile-select";
  profileSelect.dataset.preferred = task.defaultProfileId || "";
  profileField.appendChild(profileLabel);
  profileField.appendChild(profileSelect);

  const textField = document.createElement("div");
  textField.className = "field";
  const textLabel = document.createElement("label");
  textLabel.textContent = "Task template";
  const textArea = document.createElement("textarea");
  textArea.rows = 6;
  textArea.value = task.text || "";
  textArea.className = "task-text";
  textField.appendChild(textLabel);
  textField.appendChild(textArea);

  const envOptions = options.envs
    ? options.envs
    : collectEnvConfigs().filter((env) => isEnabled(env.enabled));
  const profileOptions = options.profiles
    ? options.profiles
    : collectProfiles().filter((profile) => isEnabled(profile.enabled));
  populateSelect(envSelect, envOptions, "No environments configured");
  populateSelect(profileSelect, profileOptions, "No profiles configured");

  const actions = document.createElement("div");
  actions.className = "task-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";
  const addBelowBtn = document.createElement("button");
  addBelowBtn.type = "button";
  addBelowBtn.className = "ghost add-below";
  addBelowBtn.textContent = "Add";
  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";

  moveTopBtn.addEventListener("click", () => {
    const first = container.firstElementChild;
    if (!first || first === card) return;
    container.insertBefore(card, first);
    updateTaskControls(container);
  });

  moveUpBtn.addEventListener("click", () => {
    const previous = card.previousElementSibling;
    if (!previous) return;
    container.insertBefore(card, previous);
    updateTaskControls(container);
  });

  moveDownBtn.addEventListener("click", () => {
    const next = card.nextElementSibling;
    if (!next) return;
    container.insertBefore(card, next.nextElementSibling);
    updateTaskControls(container);
  });

  addBelowBtn.addEventListener("click", () => {
    const name = buildUniqueDefaultName(
      collectNames(container, ".task-name")
    );
    const defaultEnvId =
      envSelect.value || envSelect.options[0]?.value || "";
    const defaultProfileId =
      profileSelect.value || profileSelect.options[0]?.value || "";
    const scope = getTaskScopeForContainer(container);
    const newCard = buildTaskCard({
      id: newTaskId(),
      name,
      text: "",
      defaultEnvId,
      defaultProfileId
    }, container, scope);
    card.insertAdjacentElement("afterend", newCard);
    updateTaskControls(container);
    updateTaskEnvOptions();
    updateTaskProfileOptions();
  });

  const duplicateControls = buildDuplicateControls("tasks", () => ({
    id: card.dataset.id,
    name: nameInput.value || "Untitled",
    text: textArea.value,
    defaultEnvId: envSelect.value || "",
    defaultProfileId: profileSelect.value || "",
    enabled: enabledInput.checked
  }));

  deleteBtn.addEventListener("click", () => {
    card.remove();
    updateTaskControls(container);
    updateShortcutOptions();
  });

  actions.appendChild(moveTopBtn);
  actions.appendChild(moveUpBtn);
  actions.appendChild(moveDownBtn);
  actions.appendChild(addBelowBtn);
  actions.appendChild(duplicateControls);
  actions.appendChild(deleteBtn);

  card.appendChild(enabledLabel);
  card.appendChild(nameField);
  card.appendChild(envField);
  card.appendChild(profileField);
  card.appendChild(textField);
  card.appendChild(actions);

  nameInput.addEventListener("input", () => updateShortcutOptions());

  return card;
}

function buildShortcutCard(shortcut, _container, options = {}) {
  const card = document.createElement("div");
  card.className = "shortcut-card";
  card.dataset.id = shortcut.id || newShortcutId();

  const enabledLabel = document.createElement("label");
  enabledLabel.className = "toggle-label";
  const enabledInput = document.createElement("input");
  enabledInput.type = "checkbox";
  enabledInput.className = "config-enabled";
  enabledInput.checked = shortcut.enabled !== false;
  enabledInput.addEventListener("change", () => {
    scheduleSidebarErrors();
  });
  enabledLabel.appendChild(enabledInput);
  enabledLabel.appendChild(document.createTextNode("Enabled"));

  const nameField = document.createElement("div");
  nameField.className = "field";
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "Name";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = shortcut.name || "";
  nameInput.className = "shortcut-name";
  nameInput.addEventListener("input", () => scheduleSidebarErrors());
  nameField.appendChild(nameLabel);
  nameField.appendChild(nameInput);

  const envField = document.createElement("div");
  envField.className = "field";
  const envLabel = document.createElement("label");
  envLabel.textContent = "Environment";
  const envSelect = document.createElement("select");
  envSelect.className = "shortcut-env";
  const envs = (options.envs || collectEnvConfigs()).filter((env) =>
    isEnabled(env.enabled)
  );
  for (const env of envs) {
    const opt = document.createElement("option");
    opt.value = env.id;
    opt.textContent = env.name;
    envSelect.appendChild(opt);
  }
  envSelect.value = shortcut.envId || (envs[0]?.id || "");
  envField.appendChild(envLabel);
  envField.appendChild(envSelect);

  const profileField = document.createElement("div");
  profileField.className = "field";
  const profileLabel = document.createElement("label");
  profileLabel.textContent = "Profile";
  const profileSelect = document.createElement("select");
  profileSelect.className = "shortcut-profile";
  const profiles = (options.profiles || collectProfiles()).filter((profile) =>
    isEnabled(profile.enabled)
  );
  for (const p of profiles) {
    const opt = document.createElement("option");
    opt.value = p.id;
    opt.textContent = p.name;
    profileSelect.appendChild(opt);
  }
  profileSelect.value = shortcut.profileId || (profiles[0]?.id || "");
  profileField.appendChild(profileLabel);
  profileField.appendChild(profileSelect);

  const taskField = document.createElement("div");
  taskField.className = "field";
  const taskLabel = document.createElement("label");
  taskLabel.textContent = "Task";
  const taskSelect = document.createElement("select");
  taskSelect.className = "shortcut-task";
  const tasks = (options.tasks || collectTasks()).filter((task) =>
    isEnabled(task.enabled)
  );
  for (const t of tasks) {
    const opt = document.createElement("option");
    opt.value = t.id;
    opt.textContent = t.name;
    taskSelect.appendChild(opt);
  }
  taskSelect.value = shortcut.taskId || (tasks[0]?.id || "");
  taskField.appendChild(taskLabel);
  taskField.appendChild(taskSelect);

  const actions = document.createElement("div");
  actions.className = "shortcut-actions";

  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.className = "ghost delete";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => {
    card.remove();
    scheduleSidebarErrors();
  });

  card.appendChild(enabledLabel);
  card.appendChild(nameField);
  card.appendChild(envField);
  card.appendChild(profileField);
  card.appendChild(taskField);
  actions.appendChild(
    buildDuplicateControls("shortcuts", () => ({
      id: card.dataset.id,
      name: nameInput.value || "Untitled Shortcut",
      envId: envSelect.value || "",
      profileId: profileSelect.value || "",
      taskId: taskSelect.value || "",
      enabled: enabledInput.checked
    }))
  );
  actions.appendChild(deleteBtn);
  card.appendChild(actions);

  return card;
}

function updateTaskControls(container = tasksContainer) {
  const cards = [...container.querySelectorAll(".task-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;
  });
  scheduleSidebarErrors();
}

function collectTasks(container = tasksContainer) {
  if (!container) return [];
  const cards = [...container.querySelectorAll(".task-card")];
  return cards.map((card) => {
    const nameInput = card.querySelector(".task-name");
    const textArea = card.querySelector(".task-text");
    const envSelect = card.querySelector(".task-env-select");
    const profileSelect = card.querySelector(".task-profile-select");
    const enabledInput = card.querySelector(".config-enabled");
    return {
      id: card.dataset.id || newTaskId(),
      name: (nameInput?.value || "Untitled Task").trim(),
      text: (textArea?.value || "").trim(),
      defaultEnvId: envSelect?.value || "",
      defaultProfileId: profileSelect?.value || "",
      enabled: enabledInput ? enabledInput.checked : true
    };
  });
}

function updateSidebarErrors() {
  if (!sidebarErrorsEl) return;
  const errors = [];

  const tasks = collectTasks();
  const envs = collectEnvConfigs();
  const profiles = collectProfiles();
  const apiConfigs = collectApiConfigs();
  const apiKeys = collectApiKeys();
  const enabledTasks = tasks.filter((task) => isEnabled(task.enabled));
  const enabledEnvs = envs.filter((env) => isEnabled(env.enabled));
  const enabledProfiles = profiles.filter((profile) => isEnabled(profile.enabled));
  const enabledApiConfigs = apiConfigs.filter((config) => isEnabled(config.enabled));
  const enabledApiKeys = apiKeys.filter((key) => isEnabled(key.enabled));

  const checkNameInputs = (container, selector, label) => {
    if (!container) return;
    const inputs = [...container.querySelectorAll(selector)];
    if (!inputs.length) return;
    const seen = new Map();
    let hasEmpty = false;
    for (const input of inputs) {
      const card = input.closest(
        ".task-card, .env-config-card, .profile-card, .api-config-card, .api-key-card, .shortcut-card"
      );
      const enabledToggle = card?.querySelector(".config-enabled");
      if (enabledToggle && !enabledToggle.checked) {
        continue;
      }
      const name = (input.value || "").trim();
      if (!name) {
        hasEmpty = true;
        continue;
      }
      const lower = name.toLowerCase();
      seen.set(lower, (seen.get(lower) || 0) + 1);
    }
    if (hasEmpty) {
      errors.push(`${label} has empty names.`);
    }
    for (const [name, count] of seen.entries()) {
      if (count > 1) {
        errors.push(`${label} has duplicate name: ${name}.`);
      }
    }
  };

  checkNameInputs(tasksContainer, ".task-name", "Tasks");
  checkNameInputs(envConfigsContainer, ".env-config-name", "Environments");
  checkNameInputs(profilesContainer, ".profile-name", "Profiles");
  checkNameInputs(shortcutsContainer, ".shortcut-name", "Toolbar shortcuts");
  checkNameInputs(apiConfigsContainer, ".api-config-name", "API configs");
  checkNameInputs(apiKeysContainer, ".api-key-name", "API keys");
  checkNameInputs(workspacesContainer, ".workspace-name", "Workspaces");

  const workspaceCards = [
    ...workspacesContainer.querySelectorAll(".workspace-card")
  ];
  workspaceCards.forEach((card) => {
    const name = card.querySelector(".workspace-name")?.value || "Workspace";
    checkNameInputs(
      card.querySelector(".workspace-envs"),
      ".env-config-name",
      `${name} environments`
    );
    checkNameInputs(
      card.querySelector(".workspace-profiles"),
      ".profile-name",
      `${name} profiles`
    );
    checkNameInputs(
      card.querySelector(".workspace-tasks"),
      ".task-name",
      `${name} tasks`
    );
    checkNameInputs(
      card.querySelector(".workspace-shortcuts"),
      ".shortcut-name",
      `${name} shortcuts`
    );
  });

  const siteCards = [...sitesContainer.querySelectorAll(".site-card")];
  siteCards.forEach((card) => {
    const label =
      card.querySelector(".site-name")?.value ||
      card.querySelector(".site-pattern")?.value ||
      "Site";
    checkNameInputs(
      card.querySelector(".site-envs"),
      ".env-config-name",
      `${label} environments`
    );
    checkNameInputs(
      card.querySelector(".site-profiles"),
      ".profile-name",
      `${label} profiles`
    );
    checkNameInputs(
      card.querySelector(".site-tasks"),
      ".task-name",
      `${label} tasks`
    );
    checkNameInputs(
      card.querySelector(".site-shortcuts"),
      ".shortcut-name",
      `${label} shortcuts`
    );
  });

  checkNameInputs(sitesContainer, ".site-name", "Sites");

  if (!enabledTasks.length) errors.push("No tasks enabled.");
  if (!enabledEnvs.length) errors.push("No environments enabled.");
  if (!enabledProfiles.length) errors.push("No profiles enabled.");
  if (!enabledApiConfigs.length) errors.push("No API configs enabled.");
  if (!enabledApiKeys.length) errors.push("No API keys enabled.");

  if (enabledTasks.length) {
    const defaultTask = enabledTasks[0];
    if (!defaultTask.text) errors.push("Default task prompt is empty.");

    const defaultEnv =
      enabledEnvs.find((env) => env.id === defaultTask.defaultEnvId) ||
      enabledEnvs[0];
    if (!defaultEnv) {
      errors.push("Default task environment is missing.");
    }

    const defaultProfile =
      enabledProfiles.find((profile) => profile.id === defaultTask.defaultProfileId) ||
      enabledProfiles[0];
    if (!defaultProfile) {
      errors.push("Default task profile is missing.");
    } else if (!defaultProfile.text) {
      errors.push("Default profile text is empty.");
    }

    const defaultApiConfig = defaultEnv
      ? enabledApiConfigs.find((config) => config.id === defaultEnv.apiConfigId)
      : null;
    if (!defaultApiConfig) {
      errors.push("Default environment is missing an API config.");
    } else if (defaultApiConfig.advanced) {
      if (!defaultApiConfig.apiUrl) {
        errors.push("Default API config is missing an API URL.");
      }
      if (!defaultApiConfig.requestTemplate) {
        errors.push("Default API config is missing a request template.");
      }
    } else {
      if (!defaultApiConfig.apiBaseUrl) {
        errors.push("Default API config is missing a base URL.");
      }
      if (!defaultApiConfig.model) {
        errors.push("Default API config is missing a model name.");
      }
    }

    const needsKey =
      Boolean(defaultApiConfig?.apiKeyHeader) ||
      Boolean(
        defaultApiConfig?.requestTemplate?.includes("API_KEY_GOES_HERE")
      );
    if (needsKey) {
      const key = enabledApiKeys.find(
        (entry) => entry.id === defaultApiConfig?.apiKeyId
      );
      if (!key || !key.key) {
        errors.push("Default API config is missing an API key.");
      }
    }
  }

  const sites = collectSites();
  const patterns = siteCards
    .map((card) => (card.querySelector(".site-pattern")?.value || "").trim())
    .filter(Boolean);
  for (let i = 0; i < patterns.length; i += 1) {
    for (let j = 0; j < patterns.length; j += 1) {
      if (i === j) continue;
      if (patterns[j].includes(patterns[i])) {
        errors.push(
          `Site URL pattern "${patterns[i]}" is a substring of "${patterns[j]}".`
        );
        break;
      }
    }
  }

  workspaceCards.forEach((card) => {
    const list = card.querySelector(".workspace-sites-list");
    if (!list) return;
    renderWorkspaceSitesList(list, card.dataset.id, sites);
  });

  if (!errors.length) {
    sidebarErrorsEl.classList.add("hidden");
    sidebarErrorsEl.textContent = "";
    renderGlobalSitesList(sites);
    return;
  }

  sidebarErrorsEl.textContent = errors.map((error) => `- ${error}`).join("\n");
  sidebarErrorsEl.classList.remove("hidden");
  renderGlobalSitesList(sites);
}

async function loadSettings() {
  let {
    apiKey = "",
    apiKeys = [],
    activeApiKeyId = "",
    apiConfigs = [],
    activeApiConfigId = "",
    envConfigs = [],
    activeEnvConfigId = "",
    profiles = [],
    apiBaseUrl = "",
    apiKeyHeader = "",
    apiKeyPrefix = "",
    model = "",
    systemPrompt = "",
    resume = "",
    tasks = [],
    shortcuts = [],
    presets: legacyPresets = [],
    theme = "system",
    workspaces = [],
    sites = [],
    toolbarPosition = "bottom-right",
    toolbarAutoHide: storedToolbarAutoHide = true,
    sidebarWidth
  } = await getStorage([
    "apiKey",
    "apiKeys",
    "activeApiKeyId",
    "apiConfigs",
    "activeApiConfigId",
    "envConfigs",
    "activeEnvConfigId",
    "profiles",
    "apiBaseUrl",
    "apiKeyHeader",
    "apiKeyPrefix",
    "model",
    "systemPrompt",
    "resume",
    "tasks",
    "shortcuts",
    "presets",
    "theme",
    "workspaces",
    "sites",
    "toolbarPosition",
    "toolbarAutoHide",
    SIDEBAR_WIDTH_KEY
  ]);

  themeSelect.value = theme;
  applyTheme(theme);
  
  if (toolbarPositionSelect) {
    toolbarPositionSelect.value = toolbarPosition;
  }
  if (toolbarAutoHide) {
    toolbarAutoHide.checked = Boolean(storedToolbarAutoHide);
  }
  if (Number.isFinite(sidebarWidth)) {
    applySidebarWidth(sidebarWidth);
  }

  if (!shortcuts.length && Array.isArray(legacyPresets) && legacyPresets.length) {
    shortcuts = legacyPresets;
    await chrome.storage.local.set({ shortcuts });
    await chrome.storage.local.remove("presets");
  }

  if (Array.isArray(workspaces)) {
    let needsWorkspaceUpdate = false;
    const normalizedWorkspaces = workspaces.map((workspace) => {
      if (!workspace || typeof workspace !== "object") return workspace;
      const { presets, shortcuts: wsShortcuts, ...rest } = workspace;
      const resolvedShortcuts =
        Array.isArray(wsShortcuts) && wsShortcuts.length
          ? wsShortcuts
          : Array.isArray(presets)
            ? presets
            : [];
      if (presets !== undefined || wsShortcuts === undefined) {
        needsWorkspaceUpdate = true;
      }
      return { ...rest, shortcuts: resolvedShortcuts };
    });
    if (needsWorkspaceUpdate) {
      await chrome.storage.local.set({ workspaces: normalizedWorkspaces });
    }
    workspaces = normalizedWorkspaces.map((workspace) => {
      if (!workspace || typeof workspace !== "object") return workspace;
      return {
        ...workspace,
        theme: workspace.theme || "inherit",
        toolbarPosition: workspace.toolbarPosition || "inherit",
        envConfigs: normalizeConfigList(workspace.envConfigs),
        profiles: normalizeConfigList(workspace.profiles),
        tasks: normalizeConfigList(workspace.tasks),
        shortcuts: normalizeConfigList(workspace.shortcuts),
        disabledInherited: normalizeDisabledInherited(workspace.disabledInherited)
      };
    });
  }

  if (Array.isArray(sites)) {
    sites = sites.map((site) => {
      if (!site || typeof site !== "object") return site;
      return {
        ...site,
        name: site.name || site.urlPattern || "",
        workspaceId: site.workspaceId || "global",
        extractSelector: typeof site.extractSelector === "string" ? site.extractSelector : "",
        theme: site.theme || "inherit",
        toolbarPosition: site.toolbarPosition || "inherit",
        envConfigs: normalizeConfigList(site.envConfigs),
        profiles: normalizeConfigList(site.profiles),
        tasks: normalizeConfigList(site.tasks),
        shortcuts: normalizeConfigList(site.shortcuts),
        disabledInherited: normalizeDisabledInherited(site.disabledInherited)
      };
    });
  }

  // Load basic resources first so they are available for shortcuts/workspaces
  envConfigsContainer.innerHTML = "";
  // ... (existing logic handles this later)

  // Wait, I need to make sure collectEnvConfigs etc work. 
  // loadSettings currently renders cards later in the function.
  // I need to ensure render order.
  
  // Actually, loadSettings renders cards in order. I should just add shortcuts rendering at the end.
  
  // I'll render shortcuts after tasks are rendered.
  
  let resolvedKeys = Array.isArray(apiKeys) ? apiKeys : [];
  let resolvedActiveId = activeApiKeyId;

  if (!resolvedKeys.length && apiKey) {
    const migrated = {
      id: newApiKeyId(),
      name: "Default",
      key: apiKey,
      enabled: true
    };
    resolvedKeys = [migrated];
    resolvedActiveId = migrated.id;
    await chrome.storage.local.set({
      apiKeys: resolvedKeys,
      activeApiKeyId: resolvedActiveId
    });
  } else if (resolvedKeys.length) {
    const normalized = resolvedKeys.map((entry) => ({
      ...entry,
      enabled: entry.enabled !== false
    }));
    if (normalized.some((entry, index) => entry.enabled !== resolvedKeys[index]?.enabled)) {
      resolvedKeys = normalized;
      await chrome.storage.local.set({ apiKeys: resolvedKeys });
    } else {
      resolvedKeys = normalized;
    }
    const hasActive = resolvedKeys.some((entry) => entry.id === resolvedActiveId);
    if (!hasActive) {
      resolvedActiveId = resolvedKeys[0].id;
      await chrome.storage.local.set({ activeApiKeyId: resolvedActiveId });
    }
  }

  apiKeysContainer.innerHTML = "";
  if (!resolvedKeys.length) {
    apiKeysContainer.appendChild(
      buildApiKeyCard({ id: newApiKeyId(), name: "", key: "" })
    );
  } else {
    for (const entry of resolvedKeys) {
      apiKeysContainer.appendChild(buildApiKeyCard(entry));
    }
  }
  updateApiKeyControls();

  let resolvedConfigs = Array.isArray(apiConfigs) ? apiConfigs : [];
  let resolvedActiveConfigId = activeApiConfigId;

  if (!resolvedConfigs.length) {
    const migrated = {
      id: newApiConfigId(),
      name: "Default",
      apiBaseUrl: apiBaseUrl || OPENAI_DEFAULTS.apiBaseUrl,
      apiKeyHeader: apiKeyHeader || OPENAI_DEFAULTS.apiKeyHeader,
      apiKeyPrefix: apiKeyPrefix || OPENAI_DEFAULTS.apiKeyPrefix,
      model: model || DEFAULT_MODEL,
      apiKeyId: resolvedActiveId || resolvedKeys[0]?.id || "",
      apiUrl: "",
      requestTemplate: "",
      advanced: false,
      enabled: true
    };
    resolvedConfigs = [migrated];
    resolvedActiveConfigId = migrated.id;
    await chrome.storage.local.set({
      apiConfigs: resolvedConfigs,
      activeApiConfigId: resolvedActiveConfigId
    });
  } else {
    const fallbackKeyId = resolvedActiveId || resolvedKeys[0]?.id || "";
    const withKeys = resolvedConfigs.map((config) => ({
      ...config,
      apiKeyId: config.apiKeyId || fallbackKeyId,
      apiUrl: config.apiUrl || "",
      requestTemplate: config.requestTemplate || "",
      advanced: Boolean(config.advanced),
      enabled: config.enabled !== false
    }));
    if (
      withKeys.some(
        (config, index) =>
          config.apiKeyId !== resolvedConfigs[index].apiKeyId ||
          config.enabled !== resolvedConfigs[index].enabled
      )
    ) {
      resolvedConfigs = withKeys;
      await chrome.storage.local.set({ apiConfigs: resolvedConfigs });
    }
    const hasActive = resolvedConfigs.some(
      (config) => config.id === resolvedActiveConfigId
    );
    if (!hasActive) {
      resolvedActiveConfigId = resolvedConfigs[0].id;
      await chrome.storage.local.set({ activeApiConfigId: resolvedActiveConfigId });
    }
  }

  apiConfigsContainer.innerHTML = "";
  for (const config of resolvedConfigs) {
    apiConfigsContainer.appendChild(buildApiConfigCard(config));
  }
  updateApiConfigKeyOptions();
  updateApiConfigControls();

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

  if (!resolvedEnvConfigs.length) {
    const migrated = {
      id: newEnvConfigId(),
      name: "Default",
      apiConfigId: fallbackApiConfigId,
      systemPrompt: systemPrompt || DEFAULT_SYSTEM_PROMPT,
      enabled: true
    };
    resolvedEnvConfigs = [migrated];
    await chrome.storage.local.set({
      envConfigs: resolvedEnvConfigs,
      activeEnvConfigId: migrated.id
    });
  } else {
    const withDefaults = resolvedEnvConfigs.map((config) => ({
      ...config,
      apiConfigId: config.apiConfigId || fallbackApiConfigId,
      systemPrompt: config.systemPrompt ?? "",
      enabled: config.enabled !== false
    }));
    const needsUpdate = withDefaults.some((config, index) => {
      const original = resolvedEnvConfigs[index];
      return (
        config.apiConfigId !== original.apiConfigId ||
        (config.systemPrompt || "") !== (original.systemPrompt || "") ||
        config.enabled !== original.enabled
      );
    });
    if (needsUpdate) {
      resolvedEnvConfigs = withDefaults;
      await chrome.storage.local.set({ envConfigs: resolvedEnvConfigs });
    }
    const hasActive = resolvedEnvConfigs.some(
      (config) => config.id === activeEnvConfigId
    );
    if (!hasActive && resolvedEnvConfigs.length) {
      await chrome.storage.local.set({
        activeEnvConfigId: resolvedEnvConfigs[0].id
      });
    }
  }

  envConfigsContainer.innerHTML = "";
  for (const config of resolvedEnvConfigs) {
    envConfigsContainer.appendChild(buildEnvConfigCard(config));
  }
  updateEnvApiOptions();
  updateEnvControls();

  let resolvedProfiles = Array.isArray(profiles) ? profiles : [];
  if (!resolvedProfiles.length) {
    const migrated = {
      id: newProfileId(),
      name: "Default",
      text: resume || "",
      type: "Resume",
      enabled: true
    };
    resolvedProfiles = [migrated];
    await chrome.storage.local.set({ profiles: resolvedProfiles });
  } else {
    const normalized = resolvedProfiles.map((profile) => ({
      ...profile,
      text: profile.text ?? "",
      type: profile.type === "Profile" ? "Profile" : "Resume",
      enabled: profile.enabled !== false
    }));
    const needsUpdate = normalized.some(
      (profile, index) =>
        (profile.text || "") !== (resolvedProfiles[index]?.text || "") ||
        (profile.type || "Resume") !== (resolvedProfiles[index]?.type || "Resume") ||
        profile.enabled !== resolvedProfiles[index]?.enabled
    );
    if (needsUpdate) {
      resolvedProfiles = normalized;
      await chrome.storage.local.set({ profiles: resolvedProfiles });
    }
  }

  profilesContainer.innerHTML = "";
  for (const profile of resolvedProfiles) {
    profilesContainer.appendChild(buildProfileCard(profile));
  }
  updateProfileControls();

  tasksContainer.innerHTML = "";
  const defaultEnvId = resolvedEnvConfigs[0]?.id || "";
  const defaultProfileId = resolvedProfiles[0]?.id || "";
  const normalizedTasks = Array.isArray(tasks)
    ? tasks.map((task) => ({
        ...task,
        defaultEnvId: task.defaultEnvId || defaultEnvId,
        defaultProfileId: task.defaultProfileId || defaultProfileId,
        enabled: task.enabled !== false
      }))
    : [];
  if (
    normalizedTasks.length &&
    normalizedTasks.some(
      (task, index) =>
        task.defaultEnvId !== tasks[index]?.defaultEnvId ||
        task.defaultProfileId !== tasks[index]?.defaultProfileId ||
        task.enabled !== tasks[index]?.enabled
    )
  ) {
    await chrome.storage.local.set({ tasks: normalizedTasks });
  }

  if (!normalizedTasks.length) {
    tasksContainer.appendChild(
      buildTaskCard({
        id: newTaskId(),
        name: "",
        text: "",
        defaultEnvId,
        defaultProfileId
      })
    );
    updateTaskControls();
    updateTaskEnvOptions();
    updateTaskProfileOptions();
    return;
  }

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

  const normalizedShortcuts = Array.isArray(shortcuts)
    ? shortcuts.map((shortcut) => ({
        ...shortcut,
        enabled: shortcut.enabled !== false
      }))
    : [];
  shortcuts = normalizedShortcuts;
  if (
    normalizedShortcuts.length &&
    normalizedShortcuts.some(
      (shortcut, index) => shortcut.enabled !== shortcuts[index]?.enabled
    )
  ) {
    await chrome.storage.local.set({ shortcuts: normalizedShortcuts });
  }

  shortcutsContainer.innerHTML = "";
  for (const shortcut of normalizedShortcuts) {
    shortcutsContainer.appendChild(buildShortcutCard(shortcut));
  }

  workspacesContainer.innerHTML = "";
  for (const ws of workspaces) {
    workspacesContainer.appendChild(buildWorkspaceCard(ws, workspaces, sites));
  }

  sitesContainer.innerHTML = "";
  for (const site of sites) {
    sitesContainer.appendChild(buildSiteCard(site, workspaces));
  }

  updateEnvApiOptions();
  refreshWorkspaceInheritedLists();
  refreshSiteInheritedLists();
  updateSidebarErrors();
  updateToc(workspaces, sites);
  renderGlobalSitesList(sites);
}

async function saveSettings() {
  try {
    const tasks = collectTasks();
    const shortcuts = collectShortcuts();
    const apiKeys = collectApiKeys();
    const apiConfigs = collectApiConfigs();
    const envConfigs = collectEnvConfigs();
    const profiles = collectProfiles();
    const workspaces = collectWorkspaces();
    const sites = collectSites();
    const activeEnvConfigId = envConfigs[0]?.id || "";
    const activeEnv = envConfigs[0];
    const activeApiConfigId =
      activeEnv?.apiConfigId || apiConfigs[0]?.id || "";
    const activeConfig = apiConfigs.find(
      (entry) => entry.id === activeApiConfigId
    );
    const activeApiKeyId =
      activeConfig?.apiKeyId ||
      apiKeys[0]?.id ||
      "";
    await chrome.storage.local.set({
      apiKeys,
      activeApiKeyId,
      apiConfigs,
      activeApiConfigId,
      envConfigs,
      activeEnvConfigId,
      systemPrompt: activeEnv?.systemPrompt || "",
      profiles,
      tasks,
      shortcuts,
      theme: themeSelect.value,
      toolbarPosition: toolbarPositionSelect
        ? toolbarPositionSelect.value
        : "bottom-right",
      toolbarAutoHide: toolbarAutoHide ? toolbarAutoHide.checked : true,
      workspaces,
      sites
    });
    await chrome.storage.local.remove("presets");
    setStatus("Saved.");
  } catch (error) {
    console.error("Save failed:", error);
    setStatus("Save failed. Check console.");
  }
}

if (saveBtnSidebar) {
  saveBtnSidebar.addEventListener("click", () => void saveSettings());
}
addTaskBtn.addEventListener("click", () => {
  const name = buildUniqueDefaultName(
    collectNames(tasksContainer, ".task-name")
  );
  const newCard = buildTaskCard({
    id: newTaskId(),
    name,
    text: "",
    defaultEnvId: getTopEnvId(),
    defaultProfileId: getTopProfileId()
  }, tasksContainer);
  const first = tasksContainer.firstElementChild;
  if (first) {
    tasksContainer.insertBefore(newCard, first);
  } else {
    tasksContainer.appendChild(newCard);
  }
  updateTaskControls(tasksContainer);
  updateTaskEnvOptions();
  updateTaskProfileOptions();
});

addApiKeyBtn.addEventListener("click", () => {
  const name = buildUniqueDefaultName(
    collectNames(apiKeysContainer, ".api-key-name")
  );
  const newCard = buildApiKeyCard({ id: newApiKeyId(), name, key: "" });
  const first = apiKeysContainer.firstElementChild;
  if (first) {
    apiKeysContainer.insertBefore(newCard, first);
  } else {
    apiKeysContainer.appendChild(newCard);
  }
  updateApiConfigKeyOptions();
  updateApiKeyControls();
});

addApiConfigBtn.addEventListener("click", () => {
  const name = buildUniqueDefaultName(
    collectNames(apiConfigsContainer, ".api-config-name")
  );
  const newCard = buildApiConfigCard({
    id: newApiConfigId(),
    name,
    apiBaseUrl: OPENAI_DEFAULTS.apiBaseUrl,
    apiKeyHeader: OPENAI_DEFAULTS.apiKeyHeader,
    apiKeyPrefix: OPENAI_DEFAULTS.apiKeyPrefix,
    model: DEFAULT_MODEL,
    apiUrl: "",
    requestTemplate: "",
    advanced: false
  });
  const first = apiConfigsContainer.firstElementChild;
  if (first) {
    apiConfigsContainer.insertBefore(newCard, first);
  } else {
    apiConfigsContainer.appendChild(newCard);
  }
  updateApiConfigKeyOptions();
  updateEnvApiOptions();
  updateApiConfigControls();
});

addEnvConfigBtn.addEventListener("click", () => {
  const name = buildUniqueDefaultName(
    collectNames(envConfigsContainer, ".env-config-name")
  );
  const fallbackApiConfigId =
    getApiConfigsForEnvContainer(envConfigsContainer)[0]?.id || "";
  const newCard = buildEnvConfigCard({
    id: newEnvConfigId(),
    name,
    apiConfigId: fallbackApiConfigId,
    systemPrompt: DEFAULT_SYSTEM_PROMPT
  });
  const first = envConfigsContainer.firstElementChild;
  if (first) {
    envConfigsContainer.insertBefore(newCard, first);
  } else {
    envConfigsContainer.appendChild(newCard);
  }
  updateEnvApiOptions();
  updateEnvControls();
  updateTaskEnvOptions();
});

addProfileBtn.addEventListener("click", () => {
  const name = buildUniqueDefaultName(
    collectNames(profilesContainer, ".profile-name")
  );
  const newCard = buildProfileCard({
    id: newProfileId(),
    name,
    text: ""
  }, profilesContainer);
  const first = profilesContainer.firstElementChild;
  if (first) {
    profilesContainer.insertBefore(newCard, first);
  } else {
    profilesContainer.appendChild(newCard);
  }
  updateProfileControls(profilesContainer);
  updateTaskProfileOptions();
});

addWorkspaceBtn.addEventListener("click", () => {
  const newCard = buildWorkspaceCard({
    id: newWorkspaceId(),
    name: "New Workspace",
    theme: "inherit",
    toolbarPosition: "inherit",
    envConfigs: [],
    profiles: [],
    tasks: [],
    shortcuts: [],
    disabledInherited: normalizeDisabledInherited()
  }, collectWorkspaces(), collectSites());
  const first = workspacesContainer.firstElementChild;
  if (first) {
    workspacesContainer.insertBefore(newCard, first);
  } else {
    workspacesContainer.appendChild(newCard);
  }
  refreshWorkspaceInheritedLists();
  scheduleSidebarErrors();
  updateToc(collectWorkspaces(), collectSites());
});

addSiteBtn.addEventListener("click", () => {
  const newCard = buildSiteCard({
    id: newSiteId(),
    name: "",
    urlPattern: "",
    workspaceId: "global",
    theme: "inherit",
    toolbarPosition: "inherit",
    envConfigs: [],
    profiles: [],
    tasks: [],
    shortcuts: [],
    disabledInherited: normalizeDisabledInherited()
  }, collectWorkspaces());
  const first = sitesContainer.firstElementChild;
  if (first) {
    sitesContainer.insertBefore(newCard, first);
  } else {
    sitesContainer.appendChild(newCard);
  }
  refreshSiteInheritedLists();
  scheduleSidebarErrors();
  updateToc(collectWorkspaces(), collectSites());
});

addShortcutBtn.addEventListener("click", () => {
  const newCard = buildShortcutCard({
    id: newShortcutId(),
    name: "New Shortcut",
    envId: "",
    profileId: "",
    taskId: ""
  });
  const first = shortcutsContainer.firstElementChild;
  if (first) {
    shortcutsContainer.insertBefore(newCard, first);
  } else {
    shortcutsContainer.appendChild(newCard);
  }
  scheduleSidebarErrors();
});

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

loadSettings();

function openDetailsChain(target) {
  let node = target;
  while (node) {
    if (node.tagName === "DETAILS") {
      node.open = true;
    }
    node = node.parentElement?.closest("details");
  }
}

function updateToc(workspaces, sites) {
  const wsList = document.getElementById("toc-workspaces-list");
  if (!wsList) return;
  
  wsList.innerHTML = "";
  for (const ws of workspaces) {
    const li = document.createElement("li");
    const details = document.createElement("details");
    details.className = "toc-group toc-workspace";
    const summary = document.createElement("summary");
    const a = document.createElement("a");
    a.href = "#";
    a.textContent = ws.name || "Untitled";
    summary.appendChild(a);
    details.appendChild(summary);

    const subUl = document.createElement("ul");
    subUl.className = "toc-sub";
    
    const sections = [
      "Appearance",
      "API Configurations",
      "Environments",
      "Profiles",
      "Tasks",
      "Toolbar Shortcuts",
      "Sites"
    ];
    for (const section of sections) {
        const subLi = document.createElement("li");
        const subA = document.createElement("a");
        subA.textContent = section;
        subA.href = "#";
        subA.addEventListener("click", (e) => {
            e.preventDefault();
            e.stopPropagation();
            const card = document.querySelector(`.workspace-card[data-id="${ws.id}"]`);
            if (card) {
                // Find details with summary text containing section name
                const details = [...card.querySelectorAll("details")].find(d => 
                  d.querySelector(".panel-summary").textContent.includes(section)
                );
                if (details) {
                    openDetailsChain(details);
                    details.scrollIntoView({ behavior: "smooth", block: "start" });
                } else {
                    card.scrollIntoView({ behavior: "smooth", block: "start" });
                    openDetailsChain(document.getElementById("workspaces-panel"));
                }
            }
        });
        subLi.appendChild(subA);
        subUl.appendChild(subLi);
    }
    
    a.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      const card = document.querySelector(`.workspace-card[data-id="${ws.id}"]`);
      if (card) {
        card.scrollIntoView({ behavior: "smooth", block: "start" });
        openDetailsChain(document.getElementById("workspaces-panel"));
      }
      details.open = true;
    });

    details.appendChild(subUl);
    li.appendChild(details);
    wsList.appendChild(li);
  }
  
  const sitesList = document.getElementById("toc-sites-list");
  if (sitesList) {
    sitesList.innerHTML = "";
    for (const site of sites) {
        const li = document.createElement("li");
        const a = document.createElement("a");
        a.textContent = site.name || site.urlPattern || "Untitled Site";
        a.href = "#";
        a.addEventListener("click", (e) => {
            e.preventDefault();
            e.stopPropagation();
            const card = document.querySelector(`.site-card[data-id="${site.id}"]`);
            if (card) {
                card.scrollIntoView({ behavior: "smooth", block: "center" });
                openDetailsChain(document.getElementById("sites-panel"));
            }
        });
        li.appendChild(a);
        sitesList.appendChild(li);
    }
  }

  const workspaceCards = document.querySelectorAll(".workspace-card");
  workspaceCards.forEach((card) => {
    const list = card.querySelector(".workspace-sites-list");
    if (!list) return;
    renderWorkspaceSitesList(list, card.dataset.id, sites);
  });
}

function initToc() {
  const links = document.querySelectorAll(".toc-links a[href^=\"#\"]");
  links.forEach((link) => {
    const href = link.getAttribute("href");
    if (!href || href === "#") return;
    const isSummaryLink = Boolean(link.closest("summary"));
    link.addEventListener("click", (e) => {
      const target = document.querySelector(href);
      if (target) {
        openDetailsChain(target);
        if (!isSummaryLink) {
          target.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      }
      if (!isSummaryLink) {
        e.preventDefault();
        e.stopPropagation();
      }
    });
  });
}

document.addEventListener("DOMContentLoaded", initToc);

document.addEventListener("input", scheduleSidebarErrors);
document.addEventListener("change", scheduleSidebarErrors);