@songsid/agend 2.1.0-beta.26 → 2.1.0-beta.28

package/dist/ui/settings.html

@@ -11,7 +11,7 @@
     --accent:#2563eb; --accent-hover:#1d4ed8; --green:#059669; --red:#dc2626; --yellow:#b45309;
     --radius:8px; --radius-sm:6px;
   }
-  body { background: var(--bg); color: var(--fg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; padding-bottom: 60px; }
+  body { background: var(--bg); color: var(--fg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; padding-bottom: 88px; }
   header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 20; }
   header h1 { font-size: 18px; font-weight: 700; }
   .grow { flex: 1; }
@@ -78,6 +78,18 @@
   .inherit-row { display:flex; gap:8px; align-items:center; margin-top:6px; color:var(--muted); font-size:12px; }
   .adv-body { display: none; padding: 14px 16px; }
   .adv-body.open { display: block; }
+  .advanced-only { display:none !important; }
+  body.show-advanced .advanced-only { display:block !important; }
+  .more-menu { position:relative; }
+  .more-menu summary { list-style:none; cursor:pointer; padding:4px 9px; color:var(--muted); }
+  .more-menu summary::-webkit-details-marker { display:none; }
+  .more-menu .menu { position:absolute; right:0; top:30px; z-index:10; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(0,0,0,.12); padding:5px; min-width:130px; }
+  .more-menu .menu button { width:100%; text-align:left; border:0; }
+  .pending-bar { position:fixed; left:0; right:0; bottom:0; display:none; align-items:center; gap:12px; padding:12px max(16px, calc((100vw - 860px) / 2 + 24px)); background:#111827; color:#fff; z-index:35; box-shadow:0 -4px 18px rgba(0,0,0,.18); }
+  .pending-bar.open { display:flex; }
+  .pending-bar .grow { flex:1; }
+  .pending-bar button.primary { background:#fff; color:#111827; border-color:#fff; }
+  .level-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
   .toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
   .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
   .seg button { border: none; border-radius: 0; }
@@ -106,6 +118,9 @@
     .sub { margin-left:0; } .field { padding:10px 12px; }
     #agentSearch { width:130px !important; margin-right:0 !important; }
     button { min-height:36px; } button.sm { min-height:32px; }
+    .pending-bar { padding:10px 12px; flex-wrap:wrap; }
+    .pending-bar .grow { display:none; }
+    .pending-bar button { flex:1; }
   }
 </style>
 </head>
@@ -116,7 +131,7 @@
   <div class="grow"></div>
   <button class="help-btn" id="langBtn" title="Language">🌐</button>
   <button class="help-btn" id="helpBtn" title="Help">ℹ️</button>
-  <button id="reloadBtn" class="primary" data-i18n="reloadFleet" title="Apply saved config to running instances (SIGHUP)">↻ Reload Fleet</button>
+  <button id="advancedToggle" title="Show additional controls">Show advanced</button>
 </header>
 <div class="help-backdrop" id="helpBackdrop"></div>
 <aside class="help-panel" id="helpPanel">
@@ -137,7 +152,7 @@
   </section>
 
   <section>
-    <div class="sec-head"><h2 data-i18n="bots">🔌 Bots</h2><div class="grow"></div><button class="sm" id="newBotBtn" data-i18n="add">+ Add</button></div>
+    <div class="sec-head"><h2>🔌 Connections &amp; Bots</h2><div class="grow"></div><button class="sm advanced-only" id="newBotBtn" data-i18n="add">+ Add</button></div>
     <div id="newBot"></div>
     <div class="card" id="bots"></div>
   </section>
@@ -148,15 +163,18 @@
   </section>
 
   <section>
-    <div class="sec-head"><h2 data-i18n="whatsNew">🆕 What's New</h2><div class="grow"></div><button class="sm" id="wnToggle" data-i18n="expand">▶ Expand</button></div>
-    <div class="card"><div class="adv-body" id="wnBody"></div></div>
-  </section>
-
-  <section>
-    <div class="sec-head"><h2 data-i18n="advanced">📋 Advanced</h2><div class="grow"></div><button class="sm" id="advToggle" data-i18n="expand">▶ Expand</button></div>
+    <div class="level-label">Developer · Level 3</div>
+    <div class="sec-head"><h2>📋 Developer YAML</h2><div class="grow"></div><button class="sm" id="advToggle" data-i18n="expand">▶ Expand</button></div>
     <div class="card"><div class="adv-body" id="advBody"></div></div>
   </section>
 </main>
+<div class="pending-bar" id="pendingBar">
+  <strong id="pendingCount">0 changes not applied</strong>
+  <span id="pendingImpact">⚡ Immediately · 🔄 Restart this Agent · 🔄🔄 Restart AgEnD</span>
+  <span class="grow"></span>
+  <button id="discardChanges">Discard</button>
+  <button class="primary" id="applyChanges">Apply changes</button>
+</div>
 <script>
 (() => {
   "use strict";
@@ -228,7 +246,7 @@
     document.querySelectorAll("[data-i18n]").forEach(e => { e.textContent = t(e.getAttribute("data-i18n")); });
     document.querySelectorAll("[data-i18n-ph]").forEach(e => { e.setAttribute("placeholder", t(e.getAttribute("data-i18n-ph"))); });
     // toggle labels that carry expand/collapse state
-    for (const [id, body] of [["advToggle", "advBody"], ["wnToggle", "wnBody"]]) {
+    for (const [id, body] of [["advToggle", "advBody"]]) {
       const b = $(body); if (b) $(id).textContent = b.classList.contains("open") ? t("collapse") : t("expand");
     }
     renderHelp();
@@ -288,7 +306,7 @@
   }
 
   // ── State ──
-  const state = { fleet: {}, classic: {}, classicStatus: {}, live: {}, fleetUp: false, advFmt: "yaml", advEdit: false, collapsedGroups: new Set(), version: "", newAgentOpen: false, newBotOpen: false };
+  const state = { fleet: {}, classic: {}, classicStatus: {}, live: {}, fleetUp: false, advFmt: "yaml", advEdit: false, collapsedGroups: new Set(), version: "", newAgentOpen: false, newBotOpen: false, pending: new Map() };
   const channels = () => state.fleet.channels || (state.fleet.channel ? [state.fleet.channel] : []);
   const channelIds = () => channels().map(c => c.id || c.type).filter(Boolean);
   const chLabel = (i) => i === 0 ? "primary" : "persona";
@@ -304,7 +322,36 @@
     redraw(); return box;
   }
   function select(value, options) { const s = el("select"); for (const o of options) { const val = typeof o === "string" ? o : o.value; const label = typeof o === "string" ? o : o.label; const opt = el("option", {}, label); opt.value = val; if (val === value) opt.selected = true; s.append(opt); } return s; }
-  const impact = (kind) => el("span", { class: "impact" }, kind === "now" ? "⚡ immediate" : kind === "fleet" ? "🔄🔄 restart fleet" : "🔄 restart instance");
+  const impact = (kind) => el("span", { class: "impact" }, kind === "now" ? "⚡ Immediately" : kind === "fleet" ? "🔄🔄 Restart AgEnD" : "🔄 Restart this Agent");
+  function updatePendingBar() {
+    const n = state.pending.size;
+    $("pendingBar").classList.toggle("open", n > 0);
+    $("pendingCount").textContent = `${n} change${n === 1 ? "" : "s"} not applied`;
+    const kinds = new Set([...state.pending.values()].map(change => change.impact));
+    $("pendingImpact").textContent = [...kinds].map(kind => kind === "now" ? "⚡ Immediately" : kind === "fleet" ? "🔄🔄 Restart AgEnD" : "🔄 Restart this Agent").join(" · ");
+  }
+  function stageChange(key, change) {
+    state.pending.set(key, change);
+    updatePendingBar();
+    showBanner(`Queued: ${change.label}`);
+  }
+  async function applyPendingChanges() {
+    const button = $("applyChanges"); button.disabled = true;
+    for (const [key, change] of [...state.pending]) {
+      let result;
+      try { result = await change.apply(); }
+      catch (error) { result = { ok: false, body: { error: error.message } }; }
+      if (!result?.ok) {
+        showBanner(`${change.label}: ${result?.body?.error || "Apply failed"}`, true);
+        button.disabled = false; return;
+      }
+      state.pending.delete(key); updatePendingBar();
+    }
+    await api("/api/settings/reload", { method: "POST" });
+    await reload();
+    showBanner("✓ Changes applied. AgEnD is reconciling affected Agents.");
+    button.disabled = false;
+  }
   const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj || {}, key);
   function overrideControl(inst, key, input, inheritedValue, impactKind = "instance") {
     const inherited = !hasOwn(inst, key);
@@ -357,7 +404,9 @@
       running ? el("button", { class: "sm", onclick: () => pauseWakeAgent(name, "pause") }, t("pause")) : null,
       paused ? el("button", { class: "sm", onclick: () => pauseWakeAgent(name, "wake") }, t("wake")) : null,
       !paused ? el("button", { class: "sm", onclick: () => toggleAgent(name, running) }, running ? t("stop") : t("start")) : null,
-      el("button", { class: "sm danger del-btn", title: t("close"), onclick: () => delAgent(name) }, "🗑️"),
+      el("details", { class: "more-menu" },
+        el("summary", { title: "More actions" }, "⋯"),
+        el("div", { class: "menu" }, el("button", { class: "sm danger", onclick: () => delAgent(name) }, "Delete Agent"))),
     ));
     if (editing === name) item.append(agentEditForm(name, inst));
     return item;
@@ -443,27 +492,42 @@
         model_failover: failover.toggle.checked ? null : (failover.input.value.trim() ? [failover.input.value.trim()] : []),
         display_name: displayName.toggle.checked ? null : displayName.input.value.trim(),
       };
-      const res = await api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "PATCH", body: JSON.stringify(patch) });
-      resultMsg(msg, res); if (res.ok) { await reload(); showBanner(`✓ ${t("affected")}: ${name} — 🔄 restart instance`); }
+      state.fleet.instances[name] = { ...inst, ...patch };
+      for (const [key, value] of Object.entries(patch)) if (value === null) delete state.fleet.instances[name][key];
+      if (patch.hang_detector?.timeout_minutes === null) {
+        state.fleet.instances[name].hang_detector = { ...(inst.hang_detector || {}) };
+        delete state.fleet.instances[name].hang_detector.timeout_minutes;
+      }
+      stageChange(`agent:${name}`, {
+        label: `Update ${shortName(name, state.fleet.instances[name])}`,
+        impact: "instance",
+        apply: () => api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "PATCH", body: JSON.stringify(patch) }),
+      });
+      editing = null; renderAgents();
     };
     box.append(
       el("div", { class: "sub", style: "margin:0 0 8px" }, "ID: " + name),
-      el("div", { class: "grid2" }, el("div", {}, el("label", {}, t("backend"), impact("instance")), fBackend), el("div", {}, el("label", {}, t("model"), impact("instance")), fModel)),
+      el("div", { class: "grid2" },
+        el("div", {}, el("label", {}, t("displayName"), impact("now")), displayName.row),
+        el("div", {}, el("label", {}, t("description"), impact("now")), fDesc),
+        el("div", {}, el("label", {}, t("backend"), impact("instance")), fBackend),
+        el("div", {}, el("label", {}, t("model"), impact("instance")), fModel)),
       el("label", {}, t("workingDir"), impact("instance")), fWd,
-      el("div", { class: "grid2" }, el("div", {}, el("label", {}, t("channelBinding"), impact("fleet")), fChan), el("div", {}, el("label", {}, t("description"), impact("now")), fDesc)),
-      el("label", {}, t("systemPrompt"), impact("instance")), fSys,
-      el("label", {}, t("tags"), impact("now")), chipList(tags, null, "tag"),
-      el("label", { style: "display:flex;align-items:center;gap:8px;cursor:pointer" }, fGeneral, el("span", {}, t("generalTopicField")), impact("fleet")),
-      el("div", { class: "sub", style: "margin:14px 0 6px;font-weight:600" }, t("runtimeResources")),
       el("div", { class: "grid2" },
-        el("div", {}, el("label", {}, `${t("autoPause")} (${t("minutes")})`), auto.row, autoFeedback),
+        el("div", {}, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("instance")), auto.row, autoFeedback)),
+      el("div", { class: "advanced-only" },
+        el("div", { class: "sub", style: "margin:14px 0 6px;font-weight:600" }, "Advanced Agent settings"),
+        el("div", { class: "grid2" },
+        el("div", {}, el("label", {}, t("channelBinding"), impact("fleet")), fChan),
         el("div", {}, el("label", {}, `${t("hangTimeout")} (${t("minutes")})`), hang.row, hangFeedback),
         el("div", {}, el("label", {}, t("agentMode")), agentMode.row),
         el("div", {}, el("label", {}, t("toolSet")), toolSet.row),
         el("div", {}, el("label", {}, t("logLevel")), logLevel.row),
         el("div", {}, el("label", {}, t("lightweight")), lightweight.row),
-        el("div", {}, el("label", {}, t("modelFailover")), failover.row, failoverFeedback),
-        el("div", {}, el("label", {}, t("displayName")), displayName.row)),
+        el("div", {}, el("label", {}, t("modelFailover")), failover.row, failoverFeedback)),
+        el("label", {}, t("systemPrompt"), impact("instance")), fSys,
+        el("label", {}, t("tags"), impact("now")), chipList(tags, null, "tag"),
+        el("label", { style: "display:flex;align-items:center;gap:8px;cursor:pointer" }, fGeneral, el("span", {}, t("generalTopicField")), impact("fleet"))),
       el("div", { class: "actions" },
         saveBtn,
         el("button", { class: "sm ghost", onclick: () => { editing = null; renderAgents(); } }, t("cancel")),
@@ -483,9 +547,13 @@
     await reloadLive();
   }
   async function delAgent(name) {
-    if (!confirm(`Delete agent "${name}"? (config removed; running daemon stops on next Reload)`)) return;
-    const res = await api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "DELETE" });
-    if (res.ok) await reload(); else alert((res.body && res.body.error) || "Delete failed");
+    if (!confirm(`Delete agent "${name}"? This will be applied only after you confirm the pending changes.`)) return;
+    delete state.fleet.instances[name];
+    stageChange(`agent:${name}`, {
+      label: `Delete ${name}`, impact: "fleet",
+      apply: () => api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "DELETE" }),
+    });
+    renderAgents();
   }
   function renderNewAgent(open) {
     const host = $("newAgent"); host.innerHTML = "";
@@ -520,12 +588,12 @@
       const type = ch.type || "?";
       item.append(el("div", { class: "item-row" },
         el("span", { class: "name" }, type === "telegram" ? "Telegram" : "Discord"),
-        el("span", { class: "tag" + (i === 0 ? "" : " persona") + (type === "telegram" ? " tg" : "") }, chLabel(i)),
-        el("span", { class: "sub", style: "margin:0" }, ch.bot_token_env || "(no token env)"),
+        el("span", { class: "tag" + (i === 0 ? "" : " persona") + (type === "telegram" ? " tg" : "") }, ch.id || chLabel(i)),
+        el("span", { class: "sub advanced-only", style: "margin:0" }, ch.bot_token_env || "(no token env)"),
         el("span", { class: "spacer" }),
-        el("span", { style: "color:var(--green);font-size:13px" }, state.fleetUp ? t("online") : "—"),
-        el("button", { class: "sm ghost", onclick: () => { editingBot = editingBot === i ? null : i; renderBots(); } }, editingBot === i ? t("close") : t("edit")),
-        el("button", { class: "sm danger", onclick: () => delBot(i) }, "🗑️"),
+        el("span", { style: `color:${state.fleetUp ? "var(--green)" : "var(--red)"};font-size:13px` }, state.fleetUp ? "Connected" : "Problem"),
+        el("button", { class: "sm ghost advanced-only", onclick: () => { editingBot = editingBot === i ? null : i; renderBots(); } }, editingBot === i ? t("close") : t("edit")),
+        el("button", { class: "sm danger advanced-only", onclick: () => delBot(i) }, "Delete"),
       ));
       if (editingBot === i) item.append(botEditForm(ch, i));
       host.append(item);
@@ -559,10 +627,10 @@
     return box;
   }
 
-  // ── ClassicBot Channels (read-only; created dynamically via /start /stop) ──
+  // ── ClassicBot Channels ──
   function renderClassic() {
     const host = $("classicList"); if (!host) return; host.innerHTML = "";
-    const chans = Object.values(state.classic?.channels || {});
+    const chans = Object.entries(state.classic?.channels || {}).map(([key, channel]) => ({ key, ...channel }));
     if (!chans.length) { host.className = "card empty"; host.textContent = t("noClassic"); return; }
     const filter = ($("agentSearch")?.value || "").trim().toLowerCase();
     let list = chans;
@@ -576,10 +644,20 @@
     for (const c of list) {
       const st = state.classicStatus[c.instanceName] || "stopped";
       const adapter = c.adapterId || "discord";
+      const backend = select(c.backend || state.classic?.defaults?.backend || "claude-code", BACKENDS.filter(value => value !== "gemini-cli"));
+      backend.style.width = "150px";
+      backend.onchange = () => {
+        const value = backend.value;
+        state.classic.channels[c.key].backend = value;
+        stageChange(`classic:${c.key}`, {
+          label: `Change ${c.name || c.instanceName} backend`, impact: "instance",
+          apply: () => api(`/api/settings/classic/channels/${encodeURIComponent(c.key)}`, { method: "PATCH", body: JSON.stringify({ backend: value }) }),
+        });
+      };
       host.append(el("div", { class: "item" }, el("div", { class: "item-row" },
         el("span", { class: "dot " + st, title: STATUS_TEXT[st] || st }),
         el("span", { class: "name", title: c.instanceName || "" }, c.name || c.instanceName || "?"),
-        el("span", { class: "sub", style: "margin:0" }, c.backend || state.classic?.defaults?.backend || "claude-code"),
+        backend,
         el("span", { class: "tag" + (adapter !== "discord" ? " persona" : "") }, adapter),
         c.collab ? el("span", { class: "tag", style: "background:#ecfdf5;color:#065f46" }, "collab") : null,
       )));
@@ -635,6 +713,7 @@
     c.admin_users = c.admin_users || []; c.allowed_guilds = c.allowed_guilds || [];
 
     const fBackend = select(d.backend || "claude-code", BACKENDS);
+    const fClassicBackend = select(c.backend || d.backend || "claude-code", BACKENDS.filter(value => value !== "gemini-cli"));
     const fModel = el("input", { type: "text", value: d.model || "", placeholder: "e.g. claude-opus-4-8" });
     const fAgentMode = select(d.agent_mode || "mcp", ["mcp", "cli"]);
     const fToolSet = select(d.tool_set || "full", ["full", "standard", "minimal"]);
@@ -665,7 +744,8 @@
     for (const input of [fAutoPause, fHangTimeout, fConcurrency, fStagger]) {
       input.addEventListener("input", validate); input.addEventListener("change", validate);
     }
-    saveBtn.onclick = async () => {
+    saveBtn.textContent = "Review changes";
+    saveBtn.onclick = () => {
       if (!validate()) return;
       const defaultsPatch = {
         backend: fBackend.value,
@@ -678,17 +758,13 @@
         hang_detector: { enabled: fHangEnabled.checked, timeout_minutes: Number(fHangTimeout.value) },
         startup: { concurrency: Number(fConcurrency.value), stagger_delay_ms: Number(fStagger.value) },
       };
-      const r1 = await api("/api/settings/fleet/defaults", { method: "PUT", body: JSON.stringify(defaultsPatch) });
-      let r2 = { ok: true, body: {} };
-      if (primary) r2 = await saveChannels();
-      const r3 = await api("/api/settings/classic/defaults", { method: "PUT", body: JSON.stringify({ backend: c.backend, admin_users: c.admin_users, allowed_guilds: c.allowed_guilds }) });
-      const bad = [r1, r2, r3].find(r => !r.ok);
-      resultMsg(msg, bad || { ok: true, body: { warnings: [...(r1.body?.warnings || []), ...(r3.body?.warnings || [])] } });
-      if (!bad) {
-        const affected = Object.keys(state.fleet.instances || {});
-        await reload();
-        showBanner(`✓ ${t("affected")}: ${affected.length ? affected.join(", ") : "none"} — 🔄 restart instances; startup changes 🔄🔄 restart fleet`);
-      }
+      const classicPatch = { backend: fClassicBackend.value, admin_users: c.admin_users, allowed_guilds: c.allowed_guilds };
+      state.fleet.defaults = { ...d, ...defaultsPatch };
+      state.classic.defaults = { ...c, ...classicPatch };
+      stageChange("defaults:fleet", { label: "Update Agent defaults", impact: "instance", apply: () => api("/api/settings/fleet/defaults", { method: "PUT", body: JSON.stringify(defaultsPatch) }) });
+      if (primary) stageChange("connections:primary", { label: "Update primary connection access", impact: "fleet", apply: () => api("/api/settings/fleet/channels", { method: "PUT", body: JSON.stringify(channels()) }) });
+      stageChange("defaults:classic", { label: "Update ClassicBot defaults and access", impact: "fleet", apply: () => api("/api/settings/classic/defaults", { method: "PUT", body: JSON.stringify(classicPatch) }) });
+      msg.innerHTML = `<span class="s">Ready to apply</span>`;
     };
 
     const section = (title, open, ...children) => {
@@ -697,15 +773,24 @@
       return details;
     };
     host.append(
-      section(t("runtimeResources"), true,
-        el("div", { class: "grid2" },
-          el("div", { class: "field" }, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("instance")), fAutoPause, autoFeedback),
-          el("div", { class: "field" }, el("label", {}, t("toolSet"), impact("instance")), fToolSet),
-          el("div", { class: "field" }, el("label", {}, t("logLevel"), impact("instance")), fLogLevel))),
-      section(t("backendSection"), true,
+      section("Defaults", true,
         el("div", { class: "grid2" },
+          el("div", { class: "field" }, el("label", {}, t("language"), impact("now")), fLocale),
           el("div", { class: "field" }, el("label", {}, t("defaultBackend"), impact("instance")), fBackend),
           el("div", { class: "field" }, el("label", {}, t("defaultModel"), impact("instance")), fModel),
+          el("div", { class: "field" }, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("instance")), fAutoPause, autoFeedback))),
+      section("ClassicBot", true,
+        el("div", { class: "grid2" },
+          el("div", { class: "field" }, el("label", {}, "Classic default backend", impact("instance")), fClassicBackend)),
+        el("div", { class: "field" }, el("strong", {}, "Who can use ClassicBot"),
+          el("div", { class: "grid2" },
+            el("div", {}, el("label", {}, t("classicAdmins"), impact("fleet")), chipList(c.admin_users, null, "user id")),
+            el("div", {}, el("label", {}, t("allowedGuilds"), impact("fleet")), chipList(c.allowed_guilds, null, "guild id"))))),
+      el("div", { class: "advanced-only" },
+      section(t("runtimeResources"), false,
+        el("div", { class: "grid2" },
+          el("div", { class: "field" }, el("label", {}, t("toolSet"), impact("instance")), fToolSet),
+          el("div", { class: "field" }, el("label", {}, t("logLevel"), impact("instance")), fLogLevel),
           el("div", { class: "field" }, el("label", {}, t("agentMode"), impact("instance")), fAgentMode))),
       section(t("detection"), false,
         el("div", { class: "grid2" },
@@ -715,11 +800,8 @@
         el("div", { class: "grid2" },
           el("div", { class: "field" }, el("label", {}, t("concurrency"), impact("fleet")), fConcurrency, concurrencyFeedback),
           el("div", { class: "field" }, el("label", {}, `${t("staggerDelay")} (ms)`, impact("fleet")), fStagger, staggerFeedback))),
-      section(t("advancedSection"), false,
-        el("div", { class: "field" }, el("label", {}, t("language"), impact("now")), fLocale),
-        el("div", { class: "field" }, el("label", {}, t("allowedUsers"), impact("fleet")), chipList(allowedUsers, null, "user id")),
-        el("div", { class: "field" }, el("label", {}, t("classicAdmins"), impact("fleet")), chipList(c.admin_users, null, "user id")),
-        el("div", { class: "field" }, el("label", {}, t("allowedGuilds"), impact("fleet")), chipList(c.allowed_guilds, null, "guild id"))),
+      section("Advanced & Access", false,
+        el("div", { class: "field" }, el("label", {}, t("allowedUsers"), impact("fleet")), chipList(allowedUsers, null, "user id")))),
       el("div", { class: "field" }, el("div", { class: "actions" }, saveBtn, msg)),
     );
     validate();
@@ -786,7 +868,7 @@
   }
 
   // ── Load / render ──
-  function renderAll() { renderAgents(); renderClassic(); renderBots(); renderGeneral(); renderWhatsNew(); renderAdvanced(); applyStaticI18n(); }
+  function renderAll() { renderAgents(); renderClassic(); renderBots(); renderGeneral(); renderAdvanced(); applyStaticI18n(); }
   async function reloadLive() {
     const f = await api("/api/fleet");
     state.fleetUp = f.ok;
@@ -813,13 +895,22 @@
   $("helpClose").onclick = () => setHelp(false);
   $("helpBackdrop").onclick = () => setHelp(false);
   $("langBtn").onclick = () => { lang = lang === "en" ? "zh-TW" : "en"; localStorage.setItem("agend_lang", lang); renderAll(); };
-  $("verBadge").onclick = () => { const b = $("wnBody"); b.classList.add("open"); $("wnToggle").textContent = t("collapse"); b.scrollIntoView({ behavior: "smooth" }); };
+  $("verBadge").onclick = () => window.open("https://github.com/songsid/AgEnD/releases/latest", "_blank", "noopener");
   $("agentSearch").oninput = () => { renderAgents(); renderClassic(); };
   $("newAgentBtn").onclick = () => { state.newAgentOpen = !state.newAgentOpen; $("newAgentBtn").textContent = state.newAgentOpen ? t("cancel") : t("new"); renderNewAgent(state.newAgentOpen); };
   $("newBotBtn").onclick = () => { state.newBotOpen = !state.newBotOpen; $("newBotBtn").textContent = state.newBotOpen ? t("cancel") : t("add"); renderNewBot(state.newBotOpen); };
   $("advToggle").onclick = () => { const b = $("advBody"); const open = !b.classList.contains("open"); b.classList.toggle("open", open); $("advToggle").textContent = open ? t("collapse") : t("expand"); };
-  $("wnToggle").onclick = () => { const b = $("wnBody"); const open = !b.classList.contains("open"); b.classList.toggle("open", open); $("wnToggle").textContent = open ? t("collapse") : t("expand"); };
-  $("reloadBtn").onclick = async () => { const r = await api("/api/settings/reload", { method: "POST" }); const b = $("banner"); b.style.display = "block"; b.style.background = "#ecfdf5"; b.style.color = "var(--green)"; b.textContent = r.ok ? "✓ Reload signal sent — instances reconciling." : "Reload failed."; setTimeout(() => b.style.display = "none", 4000); setTimeout(reloadLive, 1500); };
+  const advancedEnabled = localStorage.getItem("agend_settings_advanced") === "true";
+  document.body.classList.toggle("show-advanced", advancedEnabled);
+  $("advancedToggle").textContent = advancedEnabled ? "Hide advanced" : "Show advanced";
+  $("advancedToggle").onclick = () => {
+    const enabled = !document.body.classList.contains("show-advanced");
+    document.body.classList.toggle("show-advanced", enabled);
+    localStorage.setItem("agend_settings_advanced", String(enabled));
+    $("advancedToggle").textContent = enabled ? "Hide advanced" : "Show advanced";
+  };
+  $("applyChanges").onclick = applyPendingChanges;
+  $("discardChanges").onclick = async () => { state.pending.clear(); updatePendingBar(); await reload(); };
 
   reload();
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@songsid/agend",
-  "version": "2.1.0-beta.26",
+  "version": "2.1.0-beta.28",
   "description": "Multi-agent fleet daemon — run any coding CLI (Claude, Gemini, Codex, OpenCode) from Telegram",
   "type": "module",
   "bin": {