@lazyingart/agintiflow 0.20.166 → 0.20.170

package/docs/npm-publishing.md

@@ -31,6 +31,8 @@ The npm trust setup may require the package to exist before trust can be attache
 4. Push the release commit and create a GitHub Release, or run the publish workflow manually.
 5. Confirm the npm package page shows provenance.
 
+If local token publishing fails with `E401` or `E404`, do not treat that as terminal when Trusted Publishing is configured. Use the GitHub Actions workflow with an account that can dispatch workflows for `lazyingart/AgInTiFlow`, then verify the registry and install the published package. See `references/agintiflow-npm-publication-memory.md` for the 2026-05-20 `0.20.169` publication evidence and the known working command sequence.
+
 ## Local Token Fallback
 
 Trusted Publishing is preferred. A local automation token can be used only for bootstrap or emergency fallback:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.20.166",
+  "version": "0.20.170",
   "type": "module",
   "description": "AgInTiFlow is a project-aware agent workspace for hybrid wet-dry R&D, hardware-aware intelligence, software automation, and industrial workflows.",
   "license": "Apache-2.0",

package/public/app.js

@@ -52,6 +52,7 @@ const translations = {
     goalPlaceholder: "Open a site and summarize it, or use run_command for simple terminal inspection.",
     runDefaultsTitle: "Run defaults",
     runDefaultsHelp: "The chat box is the first goal for a new run. These controls set how that run starts.",
+    runDefaultsFoldHint: "Routing, safety, tool toggles, and key status.",
     scsModeLabel: "SCS",
     scsOnOption: "On",
     scsAutoOption: "Auto",
@@ -64,6 +65,8 @@ const translations = {
     allowedDomainsLabel: "Allowed domains",
     allowedDomainsPlaceholder: "news.ycombinator.com,github.com",
     commandCwdLabel: "Working directory",
+    commandCwdHelp: "Runs start from this working directory.",
+    commandCwdPlaceholder: "/home/user/project",
     maxStepsLabel: "Max steps",
     sandboxModeLabel: "Sandbox mode",
     permissionModeLabel: "Permission shortcut",
@@ -718,6 +721,8 @@ const setupApiKeyField = document.querySelector("#setup-api-key");
 const saveApiKeyButton = document.querySelector("#save-api-key");
 const setupStatusEl = document.querySelector("#setup-status");
 const taskProfileField = document.querySelector("#taskProfile");
+const commandCwdField = document.querySelector("#commandCwd");
+const commandCwdSuggestionsEl = document.querySelector("#command-cwd-suggestions");
 const permissionModeField = document.querySelector("#permissionMode");
 const permissionHintEl = document.querySelector("#permission-hint");
 const sandboxModeField = document.querySelector("#sandboxMode");
@@ -727,6 +732,7 @@ const logsEl = document.querySelector("#logs");
 const runMetaEl = document.querySelector("#run-meta");
 const stopRunButton = document.querySelector("#stop-run");
 const keyStatusEl = document.querySelector("#key-status");
+const keyStatusListEl = document.querySelector("#key-status-list");
 const allowAuxiliaryToolsField = document.querySelector("#allowAuxiliaryTools");
 const allowWebSearchField = document.querySelector("#allowWebSearch");
 const allowMcpToolsField = document.querySelector("#allowMcpTools");
@@ -828,6 +834,7 @@ let selectedArtifactId = "";
 let currentArtifactTab = "canvas";
 let artifactUnreadCount = 0;
 let lastAnnouncedRunKey = "";
+let quickVeniceModeActive = false;
 
 function normalizeLanguage(language) {
   const lower = String(language || "").toLowerCase();
@@ -928,31 +935,99 @@ function setRunStatus(status = "", { sessionId, detail = "", announce = false }
 function renderKeyStatus(status = lastKeyStatus) {
   lastKeyStatus = status;
   if (!status) return;
-  keyStatusEl.textContent = `${t("keysLabel")}: OpenAI ${
-    status.openai ? t("availableLabel") : t("missingLabel")
-  } · DeepSeek ${status.deepseek ? t("availableLabel") : t("missingLabel")} · Qwen ${
-    status.qwen ? t("availableLabel") : t("missingLabel")
-  } · Venice ${
-    status.venice ? t("availableLabel") : t("missingLabel")
-  } · GRS AI ${
-    status.grsai ? t("availableLabel") : t("missingLabel")
-  } · ${t("mockLabel")} ${
-    status.mock ? t("availableLabel") : t("missingLabel")
-  }`;
+  const providers = [
+    ["OpenAI", status.openai],
+    ["DeepSeek", status.deepseek],
+    ["Qwen", status.qwen],
+    ["Venice", status.venice],
+    ["GRS AI", status.grsai],
+    [t("mockLabel"), status.mock],
+  ];
+  const available = providers.filter(([, ready]) => Boolean(ready)).length;
+  if (keyStatusEl) {
+    keyStatusEl.textContent = `${t("keysLabel")} ${available}/${providers.length}`;
+    keyStatusEl.dataset.ready = String(available > 0);
+  }
+  if (keyStatusListEl) {
+    keyStatusListEl.replaceChildren(
+      ...providers.map(([name, ready]) => {
+        const chip = document.createElement("div");
+        chip.className = "key-status-chip";
+        chip.dataset.ready = String(Boolean(ready));
+        const title = document.createElement("strong");
+        title.textContent = name;
+        const value = document.createElement("span");
+        value.textContent = ready ? t("availableLabel") : t("missingLabel");
+        chip.append(title, value);
+        return chip;
+      })
+    );
+  }
   if (setupCardEl) setupCardEl.hidden = Boolean(status.openai || status.deepseek || status.qwen || status.venice);
 }
 
 function renderProjectStatus(info = projectInfo) {
   projectInfo = info;
   if (!projectStatusEl || !info) return;
-  projectStatusEl.textContent = [
-    info.platform?.label ? `os=${info.platform.label}` : "",
-    `root=${info.root || ""}`,
-    `cwd=${info.commandCwd || ""}`,
-    `sessions=${info.sessionsDir || ""}`,
-    `db=${info.sessionDbPath || ""}`,
-    `shared=${info.sharedSessionFolder ? "yes" : "no"}`,
-  ].join(" · ");
+  const rows = [
+    ["OS", info.platform?.label || ""],
+    ["Root", info.root || ""],
+    ["CWD", info.commandCwd || ""],
+    ["Sessions", info.sessionsDir || ""],
+    ["Database", info.sessionDbPath || ""],
+    ["Shared", info.sharedSessionFolder ? "yes" : "no"],
+  ].filter(([, value]) => value !== "");
+  projectStatusEl.replaceChildren(
+    ...rows.map(([label, value]) => {
+      const chip = document.createElement("div");
+      chip.className = "project-status-chip";
+      if (String(value).length > 54) chip.dataset.wide = "true";
+      const title = document.createElement("strong");
+      title.textContent = label;
+      const body = document.createElement("span");
+      body.textContent = value;
+      chip.append(title, body);
+      return chip;
+    })
+  );
+}
+
+function baseDirectorySuggestions(info = projectInfo) {
+  const projectLfsRoot = info?.root?.includes("/ProjectsLFS/")
+    ? `${info.root.split("/ProjectsLFS/")[0]}/ProjectsLFS`
+    : "";
+  const values = [
+    info?.commandCwd,
+    info?.root,
+    info?.sessionsDir ? info.sessionsDir.replace(/\/\.agintiflow\/sessions$/, "") : "",
+    projectLfsRoot,
+  ].filter(Boolean);
+  return [...new Set(values)];
+}
+
+function renderCommandCwdSuggestions(suggestions = []) {
+  if (!commandCwdSuggestionsEl) return;
+  commandCwdSuggestionsEl.replaceChildren(
+    ...suggestions.slice(0, 16).map((value) => {
+      const option = document.createElement("option");
+      option.value = value;
+      return option;
+    })
+  );
+}
+
+async function refreshCommandCwdSuggestions(query = "") {
+  const fallback = baseDirectorySuggestions();
+  renderCommandCwdSuggestions(fallback);
+  try {
+    const response = await fetch(`/api/path-suggestions?q=${encodeURIComponent(query || "")}`);
+    const data = await response.json();
+    if (response.ok && Array.isArray(data.suggestions)) {
+      renderCommandCwdSuggestions([...new Set([...data.suggestions, ...fallback])]);
+    }
+  } catch {
+    renderCommandCwdSuggestions(fallback);
+  }
 }
 
 function renderTaskProfiles(selected = "auto") {
@@ -1192,6 +1267,31 @@ function providerModelOptions(provider = providerField.value) {
   return (modelCatalog[provider] || []).filter((item) => !item.hidden);
 }
 
+function modelIdsForProvider(provider = "") {
+  return new Set(providerModelOptions(provider).map((item) => String(item.id || "")));
+}
+
+function modelDefaultValues() {
+  return new Set(Object.values(defaults).filter(Boolean));
+}
+
+function fallbackModelForProvider(provider = "deepseek", role = "primary") {
+  if (provider === "deepseek" && role === "main") return "deepseek-v4-pro";
+  if (provider === "deepseek") return "deepseek-v4-flash";
+  if (provider === "openai" && role === "spare") return "gpt-5.4";
+  return defaults[provider] || providerModelOptions(provider)[0]?.id || "";
+}
+
+function coerceModelForProvider(provider = "deepseek", currentModel = "", fallbackModel = "") {
+  const current = String(currentModel || "").trim();
+  const fallback = String(fallbackModel || fallbackModelForProvider(provider)).trim();
+  const providerModelIds = modelIdsForProvider(provider);
+  const knownDefault = modelDefaultValues().has(current);
+  const wrongProviderModel = providerModelIds.size > 0 && current && !providerModelIds.has(current);
+  if (!current || knownDefault || wrongProviderModel) return fallback;
+  return current;
+}
+
 function mergeModelOptions(...groups) {
   const seen = new Set();
   const merged = [];
@@ -1253,24 +1353,32 @@ function setSelectOptions(select, options, selectedValue = "", fallbackValue = "
 function refreshModelDropdowns() {
   refreshProviderDropdowns();
   const provider = providerField?.value || "deepseek";
-  setSelectOptions(modelField, providerModelOptions(provider), fieldValue(modelField), defaults[provider]);
+  setSelectOptions(
+    modelField,
+    providerModelOptions(provider),
+    coerceModelForProvider(provider, fieldValue(modelField), fallbackModelForProvider(provider, "primary")),
+    fallbackModelForProvider(provider, "primary")
+  );
+  const routeProvider = routeProviderField?.value || "deepseek";
   setSelectOptions(
     routeModelField,
-    providerModelOptions(routeProviderField?.value || "deepseek"),
-    fieldValue(routeModelField),
-    modelRoles.route?.model || "deepseek-v4-flash"
+    providerModelOptions(routeProvider),
+    coerceModelForProvider(routeProvider, fieldValue(routeModelField), fallbackModelForProvider(routeProvider, "route")),
+    fallbackModelForProvider(routeProvider, "route")
   );
+  const mainProvider = mainProviderField?.value || "deepseek";
   setSelectOptions(
     mainModelField,
-    providerModelOptions(mainProviderField?.value || "deepseek"),
-    fieldValue(mainModelField),
-    modelRoles.main?.model || "deepseek-v4-pro"
+    providerModelOptions(mainProvider),
+    coerceModelForProvider(mainProvider, fieldValue(mainModelField), fallbackModelForProvider(mainProvider, "main")),
+    fallbackModelForProvider(mainProvider, "main")
   );
+  const spareProvider = spareProviderField?.value || "openai";
   setSelectOptions(
     spareModelField,
-    providerModelOptions(spareProviderField?.value || "openai"),
-    fieldValue(spareModelField),
-    modelRoles.spare?.model || "gpt-5.4"
+    providerModelOptions(spareProvider),
+    coerceModelForProvider(spareProvider, fieldValue(spareModelField), fallbackModelForProvider(spareProvider, "spare")),
+    fallbackModelForProvider(spareProvider, "spare")
   );
   setSelectOptions(wrapperModelField, wrapperModelOptions(), fieldValue(wrapperModelField), modelRoles.wrapper?.model || "gpt-5.5");
   setSelectOptions(
@@ -1290,13 +1398,9 @@ function selectedVeniceTextModel() {
   );
 }
 
-function inferVeniceMode() {
-  return [providerField?.value, routeProviderField?.value, mainProviderField?.value].includes("venice");
-}
-
 function syncQuickModeControls() {
   if (aapsModeToggle) aapsModeToggle.checked = (taskProfileField?.value || "auto") === "aaps";
-  if (veniceModeToggle) veniceModeToggle.checked = inferVeniceMode();
+  if (veniceModeToggle) veniceModeToggle.checked = quickVeniceModeActive;
   if (quickModeStatusEl) {
     const scs = enableScsField?.value || "on";
     const profile = taskProfileField?.value || "auto";
@@ -1314,10 +1418,13 @@ function applyAapsMode(enabled) {
 }
 
 function applyVeniceMode(enabled) {
+  quickVeniceModeActive = Boolean(enabled);
   if (enabled) {
     const model = selectedVeniceTextModel();
     routingModeField.value = "smart";
-    providerField.value = "deepseek";
+    providerField.value = "venice";
+    refreshModelDropdowns();
+    if (modelField) setSelectOptions(modelField, providerModelOptions("venice"), model, defaults.venice);
     if (routeProviderField) routeProviderField.value = "venice";
     refreshModelDropdowns();
     if (routeModelField) setSelectOptions(routeModelField, providerModelOptions("venice"), model, defaults.venice);
@@ -1326,10 +1433,13 @@ function applyVeniceMode(enabled) {
     if (mainModelField) setSelectOptions(mainModelField, providerModelOptions("venice"), model, defaults.venice);
   } else {
     routingModeField.value = "smart";
-    providerField.value = "deepseek";
+    if (providerField?.value === "venice") providerField.value = "deepseek";
     if (routeProviderField?.value === "venice") routeProviderField.value = "deepseek";
     if (mainProviderField?.value === "venice") mainProviderField.value = "deepseek";
     refreshModelDropdowns();
+    if (modelField && providerField?.value === "deepseek") {
+      setSelectOptions(modelField, providerModelOptions("deepseek"), "deepseek-v4-flash", "deepseek-v4-flash");
+    }
     if (routeModelField && routeProviderField?.value === "deepseek") {
       setSelectOptions(routeModelField, providerModelOptions("deepseek"), "deepseek-v4-flash", "deepseek-v4-flash");
     }
@@ -1584,7 +1694,7 @@ function formPayload() {
     auxiliaryModel: fieldValue(auxiliaryModelField) || "nano-banana-2",
     startUrl: document.querySelector("#startUrl").value.trim(),
     allowedDomains: document.querySelector("#allowedDomains").value.trim(),
-    commandCwd: document.querySelector("#commandCwd").value.trim(),
+    commandCwd: commandCwdField?.value.trim() || "",
     maxSteps: Number(document.querySelector("#maxSteps").value) || 24,
     permissionMode: permissionModeField?.value || "normal",
     sandboxMode: sandboxModeField.value,
@@ -1599,6 +1709,7 @@ function formPayload() {
     allowParallelScouts: allowParallelScoutsField?.checked ?? true,
     enableScs: enableScsField?.value || "on",
     dynamicSteps: dynamicStepsField?.value || "auto",
+    veniceMode: quickVeniceModeActive,
     parallelScoutCount: Math.min(Math.max(Number(parallelScoutCountField?.value) || 3, 1), 10),
     allowWrapperTools: allowWrapperToolsField.checked,
     preferredWrapper: preferredWrapperField.value,
@@ -3048,16 +3159,8 @@ providerField.addEventListener("change", () => {
     routingModeField.value = "manual";
   }
 
-  if (
-    !fieldValue(modelField) ||
-    modelField.value === defaults.openai ||
-    modelField.value === defaults.deepseek ||
-    modelField.value === defaults.qwen ||
-    modelField.value === defaults.venice ||
-    modelField.value === defaults.mock
-  ) {
-    modelField.value = defaults[providerField.value] || "";
-  }
+  if (providerField.value !== "venice") quickVeniceModeActive = false;
+  refreshModelDropdowns();
   updateRoutingHint();
   syncQuickModeControls();
   schedulePreferenceSave();
@@ -3146,6 +3249,22 @@ saveApiKeyButton?.addEventListener("click", async () => {
 form.addEventListener("input", schedulePreferenceSave);
 form.addEventListener("change", schedulePreferenceSave);
 
+let commandCwdSuggestTimer = null;
+commandCwdField?.addEventListener("focus", () => {
+  refreshCommandCwdSuggestions(commandCwdField.value).catch(() => {});
+});
+commandCwdField?.addEventListener("input", () => {
+  schedulePreferenceSave();
+  clearTimeout(commandCwdSuggestTimer);
+  commandCwdSuggestTimer = setTimeout(() => {
+    refreshCommandCwdSuggestions(commandCwdField.value).catch(() => {});
+  }, 120);
+});
+commandCwdField?.addEventListener("change", () => {
+  schedulePreferenceSave();
+  refreshCommandCwdSuggestions(commandCwdField.value).catch(() => {});
+});
+
 chatInputEl.addEventListener("keydown", (event) => {
   if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
     event.preventDefault();
@@ -3304,6 +3423,7 @@ async function loadConfig() {
   defaults.mock = data.defaults?.mock?.model || defaults.mock;
 
   applyLanguage(prefs.language || normalizeLanguage(navigator.language || "en"), { persist: false });
+  quickVeniceModeActive = prefs.veniceMode === true;
   refreshProviderDropdowns();
 
   routingModeField.value = prefs.routingMode || "smart";
@@ -3314,24 +3434,41 @@ async function loadConfig() {
   if (spareReasoningField) spareReasoningField.value = prefs.spareReasoning || modelRoles.spare?.reasoning || "medium";
   if (wrapperReasoningField) wrapperReasoningField.value = prefs.wrapperReasoning || modelRoles.wrapper?.reasoning || "medium";
   if (auxiliaryProviderField) auxiliaryProviderField.value = prefs.auxiliaryProvider || modelRoles.auxiliary?.provider || "grsai";
-  setSelectOptions(modelField, providerModelOptions(providerField.value), prefs.model || defaults[providerField.value], defaults[providerField.value]);
+  setSelectOptions(
+    modelField,
+    providerModelOptions(providerField.value),
+    coerceModelForProvider(providerField.value, prefs.model, fallbackModelForProvider(providerField.value, "primary")),
+    fallbackModelForProvider(providerField.value, "primary")
+  );
   setSelectOptions(
     routeModelField,
     providerModelOptions(routeProviderField?.value || "deepseek"),
-    prefs.routeModel || modelRoles.route?.model,
-    "deepseek-v4-flash"
+    coerceModelForProvider(
+      routeProviderField?.value || "deepseek",
+      prefs.routeModel || modelRoles.route?.model,
+      fallbackModelForProvider(routeProviderField?.value || "deepseek", "route")
+    ),
+    fallbackModelForProvider(routeProviderField?.value || "deepseek", "route")
   );
   setSelectOptions(
     mainModelField,
     providerModelOptions(mainProviderField?.value || "deepseek"),
-    prefs.mainModel || modelRoles.main?.model,
-    "deepseek-v4-pro"
+    coerceModelForProvider(
+      mainProviderField?.value || "deepseek",
+      prefs.mainModel || modelRoles.main?.model,
+      fallbackModelForProvider(mainProviderField?.value || "deepseek", "main")
+    ),
+    fallbackModelForProvider(mainProviderField?.value || "deepseek", "main")
   );
   setSelectOptions(
     spareModelField,
     providerModelOptions(spareProviderField?.value || "openai"),
-    prefs.spareModel || modelRoles.spare?.model,
-    "gpt-5.4"
+    coerceModelForProvider(
+      spareProviderField?.value || "openai",
+      prefs.spareModel || modelRoles.spare?.model,
+      fallbackModelForProvider(spareProviderField?.value || "openai", "spare")
+    ),
+    fallbackModelForProvider(spareProviderField?.value || "openai", "spare")
   );
   setSelectOptions(wrapperModelField, wrapperModelOptions(), prefs.wrapperModel || modelRoles.wrapper?.model, "gpt-5.5");
   setSelectOptions(
@@ -3343,7 +3480,7 @@ async function loadConfig() {
   renderTaskProfiles(prefs.taskProfile || "auto");
   document.querySelector("#startUrl").value = prefs.startUrl || "";
   document.querySelector("#allowedDomains").value = prefs.allowedDomains || "";
-  document.querySelector("#commandCwd").value = prefs.commandCwd || data.project?.root || "";
+  if (commandCwdField) commandCwdField.value = prefs.commandCwd || data.project?.root || "";
   document.querySelector("#headless").checked = prefs.headless ?? data.defaults.headless;
   document.querySelector("#maxSteps").value = prefs.maxSteps ?? data.defaults.maxSteps;
   if (permissionModeField) permissionModeField.value = prefs.permissionMode || "normal";
@@ -3366,12 +3503,14 @@ async function loadConfig() {
 
   renderKeyStatus(data.keyStatus);
   renderProjectStatus(data.project);
+  await refreshCommandCwdSuggestions(commandCwdField?.value || "");
   renderWrapperStatus(data.wrappers || []);
   refreshProviderDropdowns();
   renderWorkspacePanel(data.workspace, []);
   renderMcpPanel(data.mcp || null);
   await refreshWorkspaceChanges();
   renderSandboxLogs(data.sandbox?.logs || []);
+  if (quickVeniceModeActive) applyVeniceMode(true);
   updateRoutingHint();
   updatePermissionHint();
   updatePackageWarning();

package/public/index.html

@@ -36,13 +36,30 @@
         <p class="subtle" data-i18n="intro">
           Project-aware, low-cost agent for real problems
         </p>
-        <details class="project-card">
-          <summary>
-            <strong data-i18n="projectStatusTitle">Project folder</strong>
-            <span class="project-card-toggle" aria-hidden="true"></span>
-          </summary>
-          <p id="project-status" class="subtle">Loading project context...</p>
-        </details>
+        <section class="workspace-search-card" aria-labelledby="workspace-search-title">
+          <div class="workspace-search-head">
+            <div>
+              <strong id="workspace-search-title" data-i18n="projectStatusTitle">Project folder</strong>
+              <p class="subtle" data-i18n="commandCwdHelp">Runs start from this working directory.</p>
+            </div>
+          </div>
+          <label class="workspace-search-field">
+            <span data-i18n="commandCwdLabel">Working directory</span>
+            <input
+              id="commandCwd"
+              name="commandCwd"
+              type="search"
+              value="/home/lachlan/ProjectsLFS/Agent"
+              list="command-cwd-suggestions"
+              autocomplete="off"
+              spellcheck="false"
+              data-i18n-placeholder="commandCwdPlaceholder"
+              placeholder="/home/lachlan/ProjectsLFS/Agent"
+            />
+            <datalist id="command-cwd-suggestions"></datalist>
+          </label>
+          <div id="project-status" class="project-status-grid" aria-live="polite">Loading project context...</div>
+        </section>
 
         <section id="setup-card" class="setup-card" hidden>
           <div>
@@ -84,14 +101,20 @@
           </div>
         </section>
 
-        <form id="run-form" class="run-defaults-form">
-          <div class="run-defaults-head">
-            <div>
+        <details id="run-defaults-card" class="run-defaults-card">
+          <summary class="run-defaults-summary">
+            <span>
               <strong data-i18n="runDefaultsTitle">Run defaults</strong>
+              <span class="subtle" data-i18n="runDefaultsFoldHint">Routing, safety, tool toggles, and key status.</span>
+            </span>
+            <span id="key-status" class="key-status-summary"></span>
+            <span class="project-card-toggle" aria-hidden="true"></span>
+          </summary>
+          <form id="run-form" class="run-defaults-form">
+            <div class="run-defaults-head">
               <p class="subtle" data-i18n="runDefaultsHelp">The chat box is the first goal for a new run. These controls set how that run starts.</p>
+              <div id="key-status-list" class="key-status-list" aria-live="polite"></div>
             </div>
-            <span id="key-status" class="subtle"></span>
-          </div>
 
           <label>
             <span data-i18n="routingModeLabel">Routing policy</span>
@@ -135,10 +158,6 @@
           </label>
 
           <div class="grid">
-            <label>
-              <span data-i18n="commandCwdLabel">Working directory</span>
-              <input id="commandCwd" name="commandCwd" type="text" value="/home/lachlan/ProjectsLFS/Agent" />
-            </label>
             <label>
               <span data-i18n="maxStepsLabel">Max steps</span>
               <input id="maxSteps" name="maxSteps" type="number" min="1" max="50" value="24" />
@@ -202,7 +221,8 @@
           </div>
 
           <button id="open-settings" type="button" class="secondary settings-button">Advanced settings</button>
-        </form>
+          </form>
+        </details>
       </section>
 
       <section class="stack">