@songsid/agend 2.1.5 → 2.1.6-beta.10

package/dist/ui/settings.html

@@ -49,7 +49,7 @@
   button.danger:hover { background: #fef2f2; }
   button.sm { padding: 4px 9px; font-size: 12px; }
   label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin: 10px 0 4px; }
-  input[type=text], input[type=number], select { width: 100%; font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--fg); }
+  input[type=text], input[type=password], input[type=number], select { width: 100%; font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--fg); }
   input:focus, select:focus { outline: 2px solid #bfdbfe; border-color: var(--accent); }
   .edit { padding: 14px 16px; background: #fff; border-top: 1px solid var(--border); }
   .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@@ -78,8 +78,24 @@
   .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; }
+  /* One expandable drawer instead of a hidden third level: nothing is removed,
+     everything is one click away. */
+  .drawer { border:1px solid var(--border); border-radius:var(--radius-sm); margin-top:12px; background:var(--card); }
+  .drawer > summary { cursor:pointer; padding:10px 12px; font-weight:600; font-size:13px; list-style:none; }
+  .drawer > summary::-webkit-details-marker { display:none; }
+  .drawer > summary::before { content:"▶ "; color:var(--muted); }
+  .drawer[open] > summary::before { content:"▼ "; }
+  .drawer > .drawer-body { padding:0 12px 12px; }
+  .modal-backdrop { position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:40; display:none; }
+  .modal-backdrop.open { display:block; }
+  .modal { position:fixed; z-index:41; inset:0; display:none; align-items:center; justify-content:center; padding:16px; }
+  .modal.open { display:flex; }
+  .modal-panel { background:var(--bg); border-radius:var(--radius); width:min(720px, 100%); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 18px 48px rgba(0,0,0,.22); }
+  .modal-head { display:flex; align-items:baseline; gap:10px; padding:16px 20px 8px; border-bottom:1px solid var(--border); }
+  .modal-head h3 { font-size:16px; }
+  .modal-body { padding:16px 20px; overflow:auto; }
+  .modal-foot { display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--border); flex-wrap:wrap; }
+  .modal-foot .grow { flex:1; }
   .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; }
@@ -87,6 +103,13 @@
   .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; }
+  .apply-panel { position:fixed; left:0; right:0; bottom:0; display:none; flex-direction:column; gap:8px; padding:14px max(16px, calc((100vw - 860px) / 2 + 24px)); background:#111827; color:#fff; z-index:36; box-shadow:0 -4px 18px rgba(0,0,0,.18); max-height:60vh; overflow:auto; }
+  .apply-panel.open { display:flex; }
+  .apply-panel .apply-head { display:flex; align-items:baseline; gap:10px; }
+  .apply-panel .sub { color:#9ca3af; }
+  .apply-row { display:flex; align-items:center; gap:10px; font-size:13px; }
+  .apply-row .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .apply-row .err { color:#fca5a5; }
   .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; }
@@ -131,7 +154,8 @@
   <div class="grow"></div>
   <button class="help-btn" id="langBtn" data-i18n-title="languageButton" title="Language">🌐</button>
   <button class="help-btn" id="helpBtn" data-i18n-title="helpButton" title="Help">ℹ️</button>
-  <button id="advancedToggle" data-i18n-title="showAdditional" title="Show additional controls">Show advanced</button>
+  <button class="sm" id="wizardBtn" data-i18n="wizardButton">🧭 Setup wizard</button>
+  <input type="text" id="agentSearch" data-i18n-ph="searchPh" placeholder="🔍 Search agents, bots, channels…" style="width:220px;margin-right:8px">
 </header>
 <div class="help-backdrop" id="helpBackdrop"></div>
 <aside class="help-panel" id="helpPanel">
@@ -139,9 +163,23 @@
   <div id="helpContent"></div>
 </aside>
 <div class="banner" id="banner"></div>
+<div class="modal-backdrop" id="modalBackdrop"></div>
+<div class="modal" id="modal" role="dialog" aria-modal="true">
+  <div class="modal-panel">
+    <div class="modal-head"><h3 id="modalTitle"></h3><span class="sub" id="modalSubtitle"></span></div>
+    <div class="modal-body" id="modalBody"></div>
+    <div class="modal-foot">
+      <span class="sub" id="modalImpact"></span>
+      <span class="grow"></span>
+      <span id="modalActions"></span>
+      <button id="modalCancel" data-i18n="cancel">Cancel</button>
+      <button class="primary" id="modalDone" data-i18n="modalDone">Stage change</button>
+    </div>
+  </div>
+</div>
 <main>
   <section>
-    <div class="sec-head"><h2 data-i18n="myAgents">🤖 My Agents</h2><div class="grow"></div><input type="text" id="agentSearch" data-i18n-ph="searchPh" placeholder="🔍 Search…" style="width:180px;margin-right:8px"><button class="sm" id="newAgentBtn" data-i18n="new">+ New</button></div>
+    <div class="sec-head"><h2 data-i18n="myAgents">🤖 My Agents</h2><div class="grow"></div><button class="sm" id="newAgentBtn" data-i18n="new">+ New</button></div>
     <div id="newAgent"></div>
     <div class="card" id="agents"></div>
   </section>
@@ -152,9 +190,10 @@
   </section>
 
   <section>
-    <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 class="sec-head"><h2>🔌 Connections &amp; Bots</h2><div class="grow"></div><button class="sm" id="newBotBtn" data-i18n="add">+ Add</button></div>
     <div id="newBot"></div>
     <div class="card" id="bots"></div>
+    <div class="card" id="providerSecrets" style="margin-top:12px"></div>
   </section>
 
   <section>
@@ -168,6 +207,10 @@
     <div class="card"><div class="adv-body" id="advBody"></div></div>
   </section>
 </main>
+<div class="apply-panel" id="applyPanel">
+  <div class="apply-head"><strong id="applyTitle">Applying changes…</strong><span id="applyNote" class="sub"></span></div>
+  <div id="applyRows"></div>
+</div>
 <div class="pending-bar" id="pendingBar">
   <strong id="pendingCount">0 changes not applied</strong>
   <span id="pendingImpact">⚡ Immediately · 🔄 Restart this Agent · 🔄🔄 Restart AgEnD</span>
@@ -178,7 +221,8 @@
 <script>
 (() => {
   "use strict";
-  const token = new URLSearchParams(location.search).get("token") || "";
+  // No token in the URL: the gate redeemed it for an HttpOnly session cookie,
+  // which the browser attaches to these same-origin requests on its own.
   const $ = (id) => document.getElementById(id);
   const el = (tag, attrs = {}, ...kids) => { const e = document.createElement(tag); for (const k in attrs) { if (k === "class") e.className = attrs[k]; else if (k === "html") e.innerHTML = attrs[k]; else if (k.startsWith("on")) e.addEventListener(k.slice(2), attrs[k]); else e.setAttribute(k, attrs[k]); } for (const c of kids) if (c != null) e.append(c); return e; };
   const esc = (s) => String(s).replace(/[&<>]/g, c => ({ "&":"&amp;","<":"&lt;",">":"&gt;" }[c]));
@@ -204,7 +248,36 @@
       helpTitle: "📖 Help", tipReload: "💡 Click [↻ Reload Fleet] after changes to apply them.",
       wnIntro: "Recent highlights:", releaseNotes: "📄 View full Release Notes →", languageButton: "Language", helpButton: "Help", showAdditional: "Show additional controls", hideAdvanced: "Hide advanced", showAdvanced: "Show advanced",
       saved: "Saved", failed: "Failed", actionFailed: "{0} failed", noAgentMatch: "No agents match \"{0}\".", deleteAgent: "Delete agent \"{0}\"? This will be applied only after you confirm the pending changes.", nameRequired: "name required", tokenEnvRequired: "token env required", removeBot: "Remove bot \"{0}\"? (the token in .env is left untouched)",
-      changesPending: "{0} change(s) not applied", impactNow: "⚡ Immediately", impactAgent: "🔄 Restart this Agent", impactFleet: "🔄🔄 Restart AgEnD", queued: "Queued: {0}", applyFailed: "Apply failed", changesApplied: "✓ Changes applied. AgEnD is reconciling affected Agents.", reviewChanges: "Review changes", readyApply: "Ready to apply", copied: "Copied", expectedMapping: "expected a mapping", configLoadFailed: "Failed to load config — check the token in the URL.",
+      applying: "Applying changes…", applyDone: "✓ Changes applied", applyPartial: "⚠️ Some changes failed", applyClose: "Close",
+      settingsButton: "Settings", modalDone: "Stage change", advancedSection: "Advanced",
+      wizardButton: "🧭 Setup wizard", wizardTitle: "Set up AgEnD", wizardStep: "Step {0} of {1}",
+      wizardRerun: "A fleet is already configured — finishing replaces the connection that uses the same token variable.",
+      wizardBack: "Back", wizardNext: "Next", wizardFinish: "Create and start",
+      wizardBackend: "Backend", wizardBackendFound: "Found on this host: {0}", wizardBackendNone: "No backend CLI found on this host — install one first.",
+      wizardAgentName: "First agent name", wizardNeedDir: "Enter an absolute working directory.",
+      wizardTelegramHint: "Create a bot with @BotFather, then add it to a group.",
+      wizardDiscordHint: "Create an application in the Discord developer portal and invite the bot to your server.",
+      wizardToken: "Bot token", wizardTokenTelegram: "From @BotFather. It is written to ~/.agend/.env and never shown again.",
+      wizardTokenDiscord: "From the Bot tab of your application. It is written to ~/.agend/.env and never shown again.",
+      wizardVerify: "Verify", wizardVerifying: "Asking the provider…",
+      wizardDetect: "Detect from a message", wizardDetectHint: "Or post any message in the group and press Detect.",
+      wizardWaitingStart: "Waiting for a message in the group…", wizardNoStartYet: "No group message yet — post one and press Detect again.",
+      wizardGeneralChannel: "General channel id", wizardAdminUser: "Your user id (becomes the first allowed user)",
+      wizardNeedVerify: "Verify the token before continuing.",
+      wizardPlanLoading: "Building the plan…", wizardWillWrite: "This will be written:", wizardEnvKeys: "And into ~/.agend/.env: {0}",
+      wizardEnvPerms: "⚠️ ~/.agend/.env is readable by other users on this host.",
+      guildIdField: "Guild id", groupIdField: "Group id", notSet: "(not set)", deleteBot: "Delete this bot", noAllowedUsers: "no allowed users",
+      searchAll: "🔍 Search agents, bots, channels…", accessMovedHint: "Who may use the bot is set on the connection itself — open Settings on \"{0}\" under Connections & Bots.",
+      applyRestartNeeded: "Saved — restart AgEnD to apply", applyNoChange: "no change needed",
+      applyRestartHint: "This change needs AgEnD itself restarted. You can restart it here, or run /restart in your chat channel.",
+      applyBusy: "AgEnD is already reloading its configuration. Your changes are saved — try Apply again in a moment.",
+      restartFleetButton: "Restart AgEnD", restartFleetConfirm: "Restart AgEnD now?\n\nEvery agent stops and starts again, work in progress is interrupted, and the panel is unreachable for up to a minute. A notice is posted to your chat channel.",
+      restartFleetStarted: "Restarting AgEnD — this page keeps checking.", restartFleetRefused: "Restart refused: {0}",
+      restartFleetRateLimited: "Restart refused: {0} (try again in about {1} minutes)",
+      signatureMismatch: "fleet.yaml and the running configuration disagree on: {0}. Restarting will not clear this — check fleet.log first.",
+      applyStillWorking: "Still restarting ({0}s) — AgEnD is still working; this page keeps checking.",
+      applyLostJob: "Lost track of this apply (the fleet may have restarted). Reload the page to see the current state.",
+      changesPending: "{0} change(s) not applied", impactNow: "⚡ Immediately", impactAgent: "🔄 Restart this Agent", impactFleet: "🔄🔄 Restart AgEnD", queued: "Queued: {0}", applyFailed: "Apply failed", changesApplied: "✓ Changes applied. AgEnD is reconciling affected Agents.", reviewChanges: "Review changes", readyApply: "Ready to apply", copied: "Copied", expectedMapping: "expected a mapping", configLoadFailed: "Failed to load config — open the Settings link again.",
       confirmOpenAccess: "Open access allows anyone in this channel to operate the bot. Continue?", confirmLockedEmpty: "Locked access has no allowed users. This may leave nobody able to administer the bot. Continue?", accessLockedEmpty: "Locked mode has no allowed users; add at least one administrator to avoid lockout.", accessChangeCancelled: "Access mode change cancelled",
       mustNonNegative: "Must be 0 or greater", mustPositive: "Must be greater than 0", nonnegativeInteger: "Must be a non-negative integer", failoverEmpty: "Empty list disables failover", concurrencyRange: "Must be an integer from 1 to 20", concurrencyWarning: "May exceed CPU capacity on smaller hosts", staggerRange: "Must be between 0 and 30000", staggerWarning: "Very low values can cause startup spikes",
     },
@@ -226,7 +299,36 @@
       helpTitle: "📖 使用說明", tipReload: "💡 修改後點 [↻ 重新載入] 讓設定生效。",
       wnIntro: "近期更新重點：", releaseNotes: "📄 查看完整 Release Notes →", languageButton: "語言", helpButton: "使用說明", showAdditional: "顯示更多控制項", hideAdvanced: "隱藏進階設定", showAdvanced: "顯示進階設定",
       saved: "已儲存", failed: "失敗", actionFailed: "{0}失敗", noAgentMatch: "沒有符合「{0}」的 Agent。", deleteAgent: "確定刪除 Agent「{0}」嗎？只有在確認套用待處理變更後才會生效。", nameRequired: "必須填寫名稱", tokenEnvRequired: "必須填寫 token 環境變數", removeBot: "確定移除機器人「{0}」嗎？（.env 中的 token 會保留）",
-      changesPending: "有 {0} 項變更尚未套用", impactNow: "⚡ 立即生效", impactAgent: "🔄 重新啟動此 Agent", impactFleet: "🔄🔄 重新啟動 AgEnD", queued: "已加入待套用：{0}", applyFailed: "套用失敗", changesApplied: "✓ 變更已套用，AgEnD 正在協調受影響的 Agent。", reviewChanges: "檢查變更", readyApply: "可套用變更", copied: "已複製", expectedMapping: "預期為 mapping", configLoadFailed: "載入設定失敗 — 請檢查網址中的 token。",
+      applying: "正在套用變更…", applyDone: "✓ 變更已套用", applyPartial: "⚠️ 有部分變更失敗", applyClose: "關閉",
+      settingsButton: "設定", modalDone: "加入待套用", advancedSection: "進階",
+      wizardButton: "🧭 設定精靈", wizardTitle: "設定 AgEnD", wizardStep: "第 {0} 步，共 {1} 步",
+      wizardRerun: "已經有設定好的 fleet —— 完成後會取代使用相同 token 變數的那個連線。",
+      wizardBack: "上一步", wizardNext: "下一步", wizardFinish: "建立並啟動",
+      wizardBackend: "後端", wizardBackendFound: "在這台主機上找到：{0}", wizardBackendNone: "這台主機上找不到任何後端 CLI —— 請先安裝一個。",
+      wizardAgentName: "第一個 agent 名稱", wizardNeedDir: "請輸入絕對路徑的工作目錄。",
+      wizardTelegramHint: "用 @BotFather 建立 bot，然後把它加進一個群組。",
+      wizardDiscordHint: "在 Discord 開發者後台建立應用程式，並把 bot 邀請到你的伺服器。",
+      wizardToken: "Bot token", wizardTokenTelegram: "來自 @BotFather。會寫入 ~/.agend/.env，之後不會再顯示。",
+      wizardTokenDiscord: "來自應用程式的 Bot 分頁。會寫入 ~/.agend/.env，之後不會再顯示。",
+      wizardVerify: "驗證", wizardVerifying: "正在向平台確認…",
+      wizardDetect: "從訊息偵測", wizardDetectHint: "或在群組裡發任一則訊息，然後按「從訊息偵測」。",
+      wizardWaitingStart: "等待群組訊息中…", wizardNoStartYet: "還沒收到群組訊息 —— 發一則之後再按一次。",
+      wizardGeneralChannel: "General 頻道 id", wizardAdminUser: "你的 user id（會成為第一個允許使用者）",
+      wizardNeedVerify: "請先驗證 token 再繼續。",
+      wizardPlanLoading: "正在產生方案…", wizardWillWrite: "將寫入：", wizardEnvKeys: "以及寫入 ~/.agend/.env：{0}",
+      wizardEnvPerms: "⚠️ ~/.agend/.env 目前其他使用者也讀得到。",
+      guildIdField: "Guild id", groupIdField: "群組 id", notSet: "（未設定）", deleteBot: "刪除這個機器人", noAllowedUsers: "沒有允許的使用者",
+      searchAll: "🔍 搜尋 agent、機器人、頻道…", accessMovedHint: "誰可以使用 bot 是在連線本身設定 —— 請到「連線與機器人」開啟「{0}」的設定。",
+      applyRestartNeeded: "已儲存 —— 需要重新啟動 AgEnD 才會生效", applyNoChange: "無需變更",
+      applyRestartHint: "此變更需要重新啟動 AgEnD 本身。可以在這裡重新啟動，或在聊天頻道執行 /restart。",
+      applyBusy: "AgEnD 正在重新載入設定。你的變更已儲存，請稍候再按一次套用。",
+      restartFleetButton: "重新啟動 AgEnD", restartFleetConfirm: "現在重新啟動 AgEnD？\n\n所有 agent 都會停止再啟動，進行中的工作會被中斷，面板會有最多約一分鐘無法連線。聊天頻道會收到一則通知。",
+      restartFleetStarted: "AgEnD 重新啟動中 —— 此頁面會持續確認。", restartFleetRefused: "重新啟動被拒絕：{0}",
+      restartFleetRateLimited: "重新啟動被拒絕：{0}（約 {1} 分鐘後可再試）",
+      signatureMismatch: "fleet.yaml 與執行中的設定在這些項目上不一致：{0}。重新啟動無法解決，請先查看 fleet.log。",
+      applyStillWorking: "仍在重啟中（{0} 秒）—— AgEnD 還在處理，此頁面會持續確認。",
+      applyLostJob: "已追蹤不到這次套用（AgEnD 可能重啟過）。請重新整理頁面查看目前狀態。",
+      changesPending: "有 {0} 項變更尚未套用", impactNow: "⚡ 立即生效", impactAgent: "🔄 重新啟動此 Agent", impactFleet: "🔄🔄 重新啟動 AgEnD", queued: "已加入待套用：{0}", applyFailed: "套用失敗", changesApplied: "✓ 變更已套用，AgEnD 正在協調受影響的 Agent。", reviewChanges: "檢查變更", readyApply: "可套用變更", copied: "已複製", expectedMapping: "預期為 mapping", configLoadFailed: "載入設定失敗 — 請重新開啟 Settings 連結。",
       confirmOpenAccess: "Open 模式會允許此頻道中的所有人操作 bot，確定要繼續嗎？", confirmLockedEmpty: "Locked 模式目前沒有允許的使用者，可能導致沒有人能管理 bot，確定要繼續嗎？", accessLockedEmpty: "Locked 模式沒有允許的使用者；建議至少加入一位管理員，避免無法操作。", accessChangeCancelled: "已取消 Access Mode 變更",
       mustNonNegative: "必須為 0 或更大的數值", mustPositive: "必須大於 0", nonnegativeInteger: "必須是非負整數", failoverEmpty: "空白清單會停用模型備援", concurrencyRange: "必須是 1 到 20 的整數", concurrencyWarning: "在較小的主機上可能超出 CPU 負荷", staggerRange: "必須介於 0 到 30000", staggerWarning: "數值太低可能造成啟動尖峰",
     },
@@ -292,7 +394,7 @@
 
   // ── API ──
   async function api(path, opts = {}) {
-    const headers = Object.assign({ "X-Agend-Token": token }, opts.headers || {});
+    const headers = Object.assign({}, opts.headers || {});
     if (opts.body) headers["Content-Type"] = "application/json";
     const r = await fetch(path, Object.assign({}, opts, { headers }));
     let body = null; try { body = await r.json(); } catch {}
@@ -316,7 +418,7 @@
   }
 
   // ── State ──
-  const state = { fleet: {}, classic: {}, classicStatus: {}, classicLive: {}, live: {}, fleetUp: false, advFmt: "yaml", advEdit: false, collapsedGroups: new Set(), version: "", newAgentOpen: false, newBotOpen: false, pending: new Map() };
+  const state = { schema: { impacts: {}, order: ["now", "instance", "fleet"] }, fleet: {}, classic: {}, classicStatus: {}, classicLive: {}, live: {}, connections: [], providerSecrets: [], 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";
@@ -333,7 +435,250 @@
   }
   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 impactText = (kind) => t(kind === "now" ? "impactNow" : kind === "fleet" ? "impactFleet" : "impactAgent");
-  const impact = (kind) => el("span", { class: "impact" }, impactText(kind));
+  // The server derives every field's impact from HOT_INSTANCE_CONFIG_KEYS and
+  // hands it over at /api/settings/schema, so this page never decides it.
+  const impactOf = (field) => state.schema.impacts[field] || "instance";
+  const impact = (field) => el("span", { class: "impact" }, impactText(impactOf(field)));
+  // A batch costs as much as its worst member, in the order the server ships.
+  const batchImpact = (keys, impactFor) => {
+    const order = state.schema.order;
+    return order[keys.reduce((worst, k) => Math.max(worst, order.indexOf(impactFor(k))), 0)];
+  };
+  /** One expandable drawer. Advanced settings are collapsed, never removed. */
+  function drawer(title, ...children) {
+    const box = el("details", { class: "drawer" });
+    box.append(el("summary", {}, title), el("div", { class: "drawer-body" }, ...children));
+    return box;
+  }
+
+  /**
+   * One modal edits one object, and closing it stages a change — it never
+   * writes. Applying stays where it was: the Apply button on the pending bar.
+   */
+  let modalState = null;
+  function openModal({ title, subtitle, body, impacts, stage, doneLabel, actions }) {
+    modalState = { stage };
+    $("modalActions").innerHTML = "";
+    // A wizard drives its own footer; an editor uses the standard Cancel/Done.
+    $("modalDone").style.display = actions ? "none" : "";
+    if (actions) $("modalActions").append(...actions);
+    $("modalTitle").textContent = title;
+    $("modalSubtitle").textContent = subtitle || "";
+    $("modalBody").innerHTML = "";
+    $("modalBody").append(body);
+    // The footer says what the whole modal will cost, so the impact per field
+    // does not have to be added up by eye.
+    const kinds = [...new Set((impacts || []).map(impactOf))];
+    $("modalImpact").textContent = kinds.length ? kinds.map(impactText).join(" · ") : "";
+    $("modalDone").textContent = doneLabel || t("modalDone");
+    $("modal").classList.add("open");
+    $("modalBackdrop").classList.add("open");
+  }
+  function closeModal() {
+    modalState = null;
+    $("modal").classList.remove("open");
+    $("modalBackdrop").classList.remove("open");
+    $("modalBody").innerHTML = "";
+  }
+
+  // ── Setup wizard ──────────────────────────────────────────────────────────
+  //
+  // The same four steps as `agend quickstart`. There is no second flow for
+  // "a fleet already exists": the wizard is one modal that pre-fills from the
+  // running configuration and, when it finishes, hands over to the ordinary
+  // apply job — the same progress, deadline and restart recovery as every other
+  // change the panel makes.
+  const WIZARD_STEPS = 4;
+  let wiz = null;
+
+  function wizardField(labelText, input, hint) {
+    return el("div", { class: "field" }, el("label", {}, labelText), input,
+      hint ? el("div", { class: "sub" }, hint) : null);
+  }
+
+  async function openWizard() {
+    const envRes = await api("/api/settings/quickstart/environment");
+    wiz = {
+      step: 1,
+      env: envRes.body || { backends: [], channels: [], has_fleet: false },
+      backend: (envRes.body?.backends || [])[0] || "claude-code",
+      working_directory: "",
+      instance_name: "agent-1",
+      platform: "telegram",
+      token: "",
+      token_env: "AGEND_BOT_TOKEN",
+      group_id: "",
+      guild_id: "",
+      general_channel_id: "",
+      admin_user_id: "",
+      identity: null,
+      guilds: [],
+      plan: null,
+      busy: "",
+    };
+    renderWizard();
+  }
+
+  function renderWizard() {
+    const body = el("div", {});
+    body.append(el("div", { class: "sub" }, tf("wizardStep", wiz.step, WIZARD_STEPS)));
+    body.append(wizardStepBody());
+    if (wiz.busy) body.append(el("div", { class: "sub" }, wiz.busy));
+
+    const back = el("button", { onclick: () => { wiz.step--; renderWizard(); } }, t("wizardBack"));
+    back.disabled = wiz.step === 1;
+    const next = el("button", { class: "primary", onclick: () => advanceWizard() },
+      wiz.step === WIZARD_STEPS ? t("wizardFinish") : t("wizardNext"));
+    openModal({
+      title: t("wizardTitle"),
+      subtitle: wiz.env.has_fleet ? t("wizardRerun") : "",
+      body,
+      actions: [back, next],
+    });
+  }
+
+  function wizardStepBody() {
+    if (wiz.step === 1) {
+      const fBackend = select(wiz.backend, wiz.env.backends.length ? wiz.env.backends : BACKENDS);
+      fBackend.onchange = () => { wiz.backend = fBackend.value; };
+      const fDir = el("input", { type: "text", value: wiz.working_directory, placeholder: "/home/you/projects/app" });
+      fDir.oninput = () => { wiz.working_directory = fDir.value.trim(); };
+      const fName = el("input", { type: "text", value: wiz.instance_name });
+      fName.oninput = () => { wiz.instance_name = fName.value.trim(); };
+      return el("div", {},
+        wizardField(t("wizardBackend"), fBackend,
+          wiz.env.backends.length ? tf("wizardBackendFound", wiz.env.backends.join(", ")) : t("wizardBackendNone")),
+        wizardField(t("workingDir"), fDir),
+        wizardField(t("wizardAgentName"), fName));
+    }
+    if (wiz.step === 2) {
+      const pick = (platform) => el("button", { class: wiz.platform === platform ? "primary" : "", onclick: () => { wiz.platform = platform; renderWizard(); } },
+        platform === "telegram" ? "Telegram" : "Discord");
+      return el("div", {}, el("div", { class: "actions" }, pick("telegram"), pick("discord")),
+        el("div", { class: "sub" }, wiz.platform === "telegram" ? t("wizardTelegramHint") : t("wizardDiscordHint")));
+    }
+    if (wiz.step === 3) return wizardCredentialsStep();
+    return wizardReviewStep();
+  }
+
+  function wizardCredentialsStep() {
+    const fToken = el("input", { type: "password", value: wiz.token, placeholder: "123456:ABC-DEF…" });
+    fToken.oninput = () => { wiz.token = fToken.value.trim(); wiz.identity = null; };
+    const fEnv = el("input", { type: "text", value: wiz.token_env });
+    fEnv.oninput = () => { wiz.token_env = fEnv.value.trim(); };
+    const verify = el("button", { onclick: async () => {
+      wiz.busy = t("wizardVerifying"); renderWizard();
+      const res = await api("/api/settings/quickstart/probe", { method: "POST", body: JSON.stringify({ action: "verify", platform: wiz.platform, token: wiz.token }) });
+      wiz.identity = res.body?.identity || { valid: false };
+      wiz.busy = "";
+      if (wiz.identity.valid && wiz.platform === "discord") {
+        const guilds = await api("/api/settings/quickstart/probe", { method: "POST", body: JSON.stringify({ action: "guilds", token: wiz.token }) });
+        wiz.guilds = guilds.body?.guilds || [];
+      }
+      renderWizard();
+    } }, t("wizardVerify"));
+
+    const rows = [
+      wizardField(t("wizardToken"), fToken, wiz.platform === "telegram" ? t("wizardTokenTelegram") : t("wizardTokenDiscord")),
+      wizardField(t("tokenEnv"), fEnv),
+      el("div", { class: "actions" }, verify,
+        wiz.identity ? el("span", { class: wiz.identity.valid ? "s" : "e" },
+          wiz.identity.valid ? `✓ ${wiz.identity.username || ""}` : `✗ ${wiz.identity.reason || ""}`) : null),
+    ];
+
+    // Only the ids that platform actually has.
+    if (wiz.platform === "discord") {
+      const fGuild = select(wiz.guild_id, ["", ...wiz.guilds.map(g => ({ value: g.id, label: `${g.name} (${g.id})` }))]);
+      fGuild.onchange = () => { wiz.guild_id = fGuild.value; };
+      const fGeneral = el("input", { type: "text", value: wiz.general_channel_id, placeholder: "General channel id" });
+      fGeneral.oninput = () => { wiz.general_channel_id = fGeneral.value.trim(); };
+      const fUser = el("input", { type: "text", value: wiz.admin_user_id, placeholder: "your Discord user id" });
+      fUser.oninput = () => { wiz.admin_user_id = fUser.value.trim(); };
+      rows.push(wizardField(t("guildIdField"), fGuild), wizardField(t("wizardGeneralChannel"), fGeneral), wizardField(t("wizardAdminUser"), fUser));
+    } else {
+      const fGroup = el("input", { type: "text", value: wiz.group_id, placeholder: "-1001234567890" });
+      fGroup.oninput = () => { wiz.group_id = fGroup.value.trim(); };
+      const detect = el("button", { onclick: async () => {
+        wiz.busy = t("wizardWaitingStart"); renderWizard();
+        const res = await api("/api/settings/quickstart/probe", { method: "POST", body: JSON.stringify({ action: "await-telegram-start", token: wiz.token, offset: wiz.offset || 0 }) });
+        wiz.busy = "";
+        if (!res.ok) { showBanner(res.body?.error || t("applyFailed"), true); renderWizard(); return; }
+        wiz.offset = res.body.offset;
+        if (res.body.found) {
+          wiz.group_id = String(res.body.found.groupId);
+          wiz.admin_user_id = String(res.body.found.userId);
+        } else showBanner(t("wizardNoStartYet"), true);
+        renderWizard();
+      } }, t("wizardDetect"));
+      const fUser = el("input", { type: "text", value: wiz.admin_user_id, placeholder: "your Telegram user id" });
+      fUser.oninput = () => { wiz.admin_user_id = fUser.value.trim(); };
+      rows.push(wizardField(t("groupIdField"), fGroup, t("wizardDetectHint")),
+        el("div", { class: "actions" }, detect), wizardField(t("wizardAdminUser"), fUser));
+    }
+    return el("div", {}, ...rows);
+  }
+
+  function wizardReviewStep() {
+    const box = el("div", {});
+    if (!wiz.plan) { box.append(el("div", { class: "sub" }, t("wizardPlanLoading"))); return box; }
+    box.append(
+      el("div", { class: "field" }, el("strong", {}, t("wizardWillWrite"))),
+      el("pre", { class: "yaml" }, toYaml({ channels: [wiz.plan.channel], instances: { [wiz.plan.instance.name]: { working_directory: wiz.plan.instance.working_directory, backend: wiz.plan.instance.backend } } })),
+      el("div", { class: "field" }, el("div", { class: "sub" }, tf("wizardEnvKeys", wiz.plan.env_keys.join(", ")))),
+    );
+    for (const warning of wiz.plan.warnings || []) box.append(el("div", { class: "field hint" }, "⚠️ " + warning));
+    return box;
+  }
+
+  async function advanceWizard() {
+    if (wiz.step === 1) {
+      if (!wiz.working_directory.startsWith("/")) { showBanner(t("wizardNeedDir"), true); return; }
+      wiz.step = 2; renderWizard(); return;
+    }
+    if (wiz.step === 2) { wiz.step = 3; renderWizard(); return; }
+    if (wiz.step === 3) {
+      if (!wiz.identity?.valid) { showBanner(t("wizardNeedVerify"), true); return; }
+      const res = await api("/api/settings/quickstart/plan", { method: "POST", body: JSON.stringify(wizardInput()) });
+      if (!res.ok) { showBanner(res.body?.error || t("applyFailed"), true); return; }
+      wiz.plan = res.body; wiz.step = 4; renderWizard(); return;
+    }
+    await finishWizard();
+  }
+
+  function wizardInput() {
+    return {
+      platform: wiz.platform, token_env: wiz.token_env, backend: wiz.backend,
+      working_directory: wiz.working_directory, instance_name: wiz.instance_name,
+      group_id: wiz.group_id || undefined, guild_id: wiz.guild_id || undefined,
+      general_channel_id: wiz.general_channel_id || undefined,
+      admin_user_id: wiz.admin_user_id || undefined,
+    };
+  }
+
+  /**
+   * Write the files, then start an ordinary apply job.
+   *
+   * The wizard does not apply anything itself — "create and start" is the same
+   * job the Apply button produces, so it has progress, a deadline and recovery
+   * across the restart it may cause instead of a silent spinner.
+   */
+  async function finishWizard() {
+    const commit = await api("/api/settings/quickstart/commit", { method: "POST", body: JSON.stringify({ ...wizardInput(), token: wiz.token }) });
+    if (!commit.ok) { showBanner(commit.body?.error || t("applyFailed"), true); return; }
+    if (commit.body?.secret_mode_ok === false) showBanner(t("wizardEnvPerms"), true);
+    closeModal();
+    const key = (crypto.randomUUID ? crypto.randomUUID() : `w-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    const started = await api("/api/settings/apply", {
+      method: "POST",
+      headers: { "Idempotency-Key": key },
+      body: JSON.stringify({ idempotency_key: key }),
+    });
+    if (started.status === 409) { showBanner(t("applyBusy"), true); return; }
+    if (!started.ok || !started.body?.id) { showBanner(started.body?.error || t("applyFailed"), true); return; }
+    await watchApplyJob(started.body);
+    await reload();
+  }
+
   function updatePendingBar() {
     const n = state.pending.size;
     $("pendingBar").classList.toggle("open", n > 0);
@@ -363,22 +708,132 @@
       catch (error) { result = { ok: false, body: { error: error.message } }; }
       if (!result?.ok) {
         showBanner(`${change.label}: ${result?.body?.error || t("applyFailed")}`, true);
+        change.cleanup?.();
         button.disabled = false; return;
       }
+      change.cleanup?.();
       state.pending.delete(key); updatePendingBar();
     }
-    await api("/api/settings/reload", { method: "POST" });
+    // The key is generated here, before the first attempt, and reused by every
+    // retry: a POST whose response is lost on a phone must rejoin the same job
+    // instead of applying everything twice.
+    const key = (crypto.randomUUID ? crypto.randomUUID() : `k-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    const started = await api("/api/settings/apply", {
+      method: "POST",
+      headers: { "Idempotency-Key": key },
+      body: JSON.stringify({ idempotency_key: key }),
+    });
+    if (started.status === 409) {
+      // One reconcile at a time. The writes above already landed, so re-applying
+      // later is safe and idempotent.
+      showBanner(t("applyBusy"), true);
+      button.disabled = false;
+      return;
+    }
+    if (!started.ok || !started.body?.id) {
+      showBanner(started.body?.error || t("applyFailed"), true);
+      button.disabled = false;
+      return;
+    }
+    await watchApplyJob(started.body);
     await reload();
-    showBanner(t("changesApplied"));
     button.disabled = false;
   }
+
+  function applyRow(row) {
+    const icon = row.status === "done" ? "✓"
+      : row.status === "failed" ? "✗"
+      : row.status === "restart-required" ? "🔄🔄"
+      : row.status === "running" ? "…" : "·";
+    // restart-required is terminal and is NOT success: the value is saved and a
+    // running AgEnD cannot adopt it.
+    const note = row.status === "restart-required" ? t("applyRestartNeeded")
+      : row.settled_by === "no-change" ? t("applyNoChange")
+      : row.settled_by === "fleet-restart" ? "(restart)"
+      : row.kind === "hot" ? t("impactNow") : t("impactAgent");
+    return el("div", { class: "apply-row" },
+      el("span", {}, icon),
+      el("span", { class: "name" }, row.target === "fleet" ? "AgEnD" : shortName(row.target, {})),
+      el("span", { class: "sub" }, note),
+      row.error ? el("span", { class: "err" }, row.error) : null);
+  }
+
+  async function restartFleet(job) {
+    // Its own confirmation, its own key. A single Apply must never be able to
+    // carry a full-fleet restart along with it.
+    if (!confirm(t("restartFleetConfirm"))) return;
+    const key = (crypto.randomUUID ? crypto.randomUUID() : `r-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    const res = await api("/api/settings/restart-fleet", {
+      method: "POST",
+      headers: { "Idempotency-Key": key },
+      body: JSON.stringify({ job_id: job.id, confirm: "restart-agend", idempotency_key: key }),
+    });
+    if (!res.ok) {
+      const secs = res.body?.retry_after_seconds;
+      showBanner(secs
+        ? tf("restartFleetRateLimited", res.body?.error || "", Math.ceil(secs / 60))
+        : tf("restartFleetRefused", res.body?.error || t("applyFailed")), true);
+      return;
+    }
+    showBanner(t("restartFleetStarted"));
+    await watchApplyJob(job);
+  }
+
+  function renderApplyJob(job) {
+    $("applyPanel").classList.add("open");
+    $("applyTitle").textContent = job.status === "done"
+      ? (job.targets.some(r => r.status === "failed") ? t("applyPartial") : t("applyDone"))
+      : job.status === "failed" ? t("applyPartial") : t("applying");
+    const needsRestart = job.targets.some(row => row.status === "restart-required");
+    const mismatch = state.schema.fleet_signature_mismatch;
+    $("applyNote").textContent = job.overdue
+      ? tf("applyStillWorking", Math.round(job.elapsed_ms / 1000))
+      : mismatch && needsRestart ? tf("signatureMismatch", mismatch.join(", "))
+      : needsRestart ? t("applyRestartHint") : "";
+    const rows = $("applyRows"); rows.innerHTML = "";
+    for (const row of job.targets) rows.append(applyRow(row));
+    // A restart that cannot clear the mismatch is worse than no button at all.
+    if (needsRestart && !mismatch) {
+      rows.append(el("div", { class: "apply-row" },
+        el("button", { class: "primary", onclick: () => restartFleet(job) }, t("restartFleetButton"))));
+    }
+    if (job.error) rows.append(el("div", { class: "apply-row err" }, job.error));
+  }
+
+  /**
+   * GET is the authority. The SSE stream carries no event id, so a reconnect
+   * cannot replay missed frames; it only shortens the wait between polls.
+   */
+  async function watchApplyJob(job) {
+    renderApplyJob(job);
+    const deadline = Date.now() + 10 * 60_000;
+    let current = job;
+    while (current.status === "running" && Date.now() < deadline) {
+      await new Promise(r => setTimeout(r, 1000));
+      const res = await api(`/api/settings/apply/${encodeURIComponent(job.id)}`);
+      if (res.status === 404) {
+        // The job outlives the process that made it, so a 404 means it aged out
+        // of the store — not that it never happened.
+        $("applyNote").textContent = t("applyLostJob");
+        return;
+      }
+      if (!res.ok || !res.body?.id) continue;
+      current = res.body;
+      renderApplyJob(current);
+    }
+    const failed = current.targets.some(r => r.status === "failed");
+    const needsRestart = current.targets.some(r => r.status === "restart-required");
+    showBanner(failed ? t("applyPartial") : needsRestart ? t("applyRestartNeeded") : t("changesApplied"),
+      failed || needsRestart);
+    // A restart reminder has to stay on screen; a clean apply can fade.
+    if (!needsRestart) setTimeout(() => $("applyPanel").classList.remove("open"), 4000);
+  }
   const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj || {}, key);
-  const HOT_FIELDS = new Set(["tool_progress", "reply_completion_guard", "mcp_proxy_reply", "auto_pause_after", "warm_cap", "display_name", "description", "tags", "log_level"]);
   const sameValue = (a, b) => JSON.stringify(a) === JSON.stringify(b);
   function changedFields(next, baseline) {
     return Object.fromEntries(Object.entries(next).filter(([key, value]) => !sameValue(value, baseline[key])));
   }
-  function overrideControl(inst, key, input, inheritedValue, impactKind = "instance") {
+  function overrideControl(inst, key, input, inheritedValue, impactField = `instance.${key}`) {
     const inherited = !hasOwn(inst, key);
     const toggle = el("input", { type: "checkbox" }); toggle.checked = inherited;
     input.disabled = inherited;
@@ -387,7 +842,7 @@
       else input.value = inheritedValue;
     }
     toggle.onchange = () => { input.disabled = toggle.checked; };
-    return { input, toggle, row: el("div", {}, input, el("label", { class: "inherit-row" }, toggle, el("span", {}, t("inheritDefault")), impact(impactKind))) };
+    return { input, toggle, row: el("div", {}, input, el("label", { class: "inherit-row" }, toggle, el("span", {}, t("inheritDefault")), impact(impactField))) };
   }
   const replyGuardSupported = (backend, mode) => backend === "claude-code" && mode === "mcp";
   const replyGuardHint = (backend, mode) => el(
@@ -412,7 +867,6 @@
   }
 
   // ── My Agents ──
-  let editing = null;
   function agentChannelLabel(inst) {
     if (inst.general_topic) return "general";
     if (!inst.channel_id) return "";
@@ -453,7 +907,10 @@
       el("span", { class: "tag" }, `effort: ${summary.effort}`),
       chTag ? el("span", { class: "tag" + (chTag.includes("persona") ? " persona" : chTag.includes("telegram") ? " tg" : "") }, chTag) : null,
       el("span", { class: "spacer" }),
-      el("button", { class: "sm ghost", onclick: () => { editing = editing === name ? null : name; renderAgents(); } }, editing === name ? t("close") : t("edit")),
+      el("button", { class: "sm ghost", onclick: () => {
+        const form = agentEditForm(name, inst);
+        openModal({ title: shortName(name, inst), subtitle: "ID: " + name, body: form.box, impacts: form.impacts, stage: form.stage });
+      } }, t("settingsButton")),
       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,
@@ -461,7 +918,6 @@
         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;
   }
   function renderAgents() {
@@ -504,13 +960,13 @@
     const auto = overrideControl(inst, "auto_pause_after", el("input", { type: "number", min: "0", step: "1", value: inst.auto_pause_after ?? defaults.auto_pause_after ?? 0, placeholder: "0 = disabled" }), defaults.auto_pause_after ?? 0);
     const hangRaw = inst.hang_detector || {};
     const hangHolder = hasOwn(hangRaw, "timeout_minutes") ? { value: hangRaw.timeout_minutes } : {};
-    const hang = overrideControl(hangHolder, "value", el("input", { type: "number", min: "0.1", step: "0.5", value: hangRaw.timeout_minutes ?? defaults.hang_detector?.timeout_minutes ?? 15 }), defaults.hang_detector?.timeout_minutes ?? 15);
+    const hang = overrideControl(hangHolder, "value", el("input", { type: "number", min: "0.1", step: "0.5", value: hangRaw.timeout_minutes ?? defaults.hang_detector?.timeout_minutes ?? 15 }), defaults.hang_detector?.timeout_minutes ?? 15, "instance.hang_detector");
     const agentMode = overrideControl(inst, "agent_mode", select(inst.agent_mode || defaults.agent_mode || "mcp", ["mcp", "cli"]), defaults.agent_mode || "mcp");
     const toolSet = overrideControl(inst, "tool_set", select(inst.tool_set || defaults.tool_set || "full", ["full", "standard", "minimal"]), defaults.tool_set || "full");
-    const toolProgress = overrideControl(inst, "tool_progress", select(inst.tool_progress ?? defaults.tool_progress ?? "off", ["off", "standard", "verbose"]), defaults.tool_progress ?? "off", "now");
+    const toolProgress = overrideControl(inst, "tool_progress", select(inst.tool_progress ?? defaults.tool_progress ?? "off", ["off", "standard", "verbose"]), defaults.tool_progress ?? "off");
     const fReplyGuard = el("input", { type: "checkbox" });
     fReplyGuard.checked = inst.reply_completion_guard ?? defaults.reply_completion_guard ?? true;
-    const replyGuard = overrideControl(inst, "reply_completion_guard", fReplyGuard, defaults.reply_completion_guard ?? true, "now");
+    const replyGuard = overrideControl(inst, "reply_completion_guard", fReplyGuard, defaults.reply_completion_guard ?? true);
     const replyHint = replyGuardHint(fBackend.value, agentMode.input.value);
     const refreshReplyHint = () => {
       const supported = replyGuardSupported(fBackend.value, agentMode.input.value);
@@ -528,7 +984,10 @@
     const hangFeedback = el("div", { class: "feedback" });
     const failoverFeedback = el("div", { class: "feedback" });
     const msg = el("span", { class: "msg" });
-    const saveBtn = el("button", { class: "primary sm" }, t("save"));
+    // Never rendered: it carries the validation state and the submit handler
+    // that the modal footer triggers through stage(). The form has no button
+    // of its own, so nothing here can write on its own.
+    const saveBtn = el("button", { hidden: "hidden" });
     const validate = () => {
       const autoValue = Number(auto.input.value), hangValue = Number(hang.input.value);
       const validAuto = setValidation(auto.input, autoFeedback, !auto.toggle.checked && (!Number.isFinite(autoValue) || autoValue < 0) ? t("mustNonNegative") : "");
@@ -586,44 +1045,56 @@
       }
       stageChange(`agent:${name}`, {
         label: `Update ${shortName(name, state.fleet.instances[name])}`,
-        impact: Object.keys(patch).every(key => HOT_FIELDS.has(key)) ? "now" : "instance",
+        impact: batchImpact(Object.keys(patch), key => impactOf(`instance.${key}`)),
         apply: () => api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "PATCH", body: JSON.stringify(patch) }),
       });
-      editing = null; renderAgents();
+      renderAgents();
     };
     box.append(
       el("div", { class: "sub", style: "margin:0 0 8px" }, "ID: " + name),
       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", {}, el("label", {}, t("displayName"), impact("instance.display_name")), displayName.row),
+        el("div", {}, el("label", {}, t("description"), impact("instance.description")), fDesc),
+        el("div", {}, el("label", {}, t("backend"), impact("instance.backend")), fBackend),
+        el("div", {}, el("label", {}, t("model"), impact("instance.model")), fModel)),
+      el("label", {}, t("workingDir"), impact("instance.working_directory")), fWd,
       el("div", { class: "grid2" },
-        el("div", {}, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("now")), 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", {}, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("instance.auto_pause_after")), auto.row, autoFeedback)),
+      drawer(t("advancedSection"),
         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("toolProgress"), impact("now")), toolProgress.row),
-        el("div", {}, el("label", {}, t("replyCompletionGuard"), impact("now")), replyGuard.row, replyHint),
-        el("div", {}, el("label", {}, t("logLevel"), impact("now")), logLevel.row),
-        el("div", {}, el("label", {}, t("lightweight")), lightweight.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")),
-        msg),
+        el("div", {}, el("label", {}, t("channelBinding"), impact("instance.topic_id")), fChan),
+        el("div", {}, el("label", {}, `${t("hangTimeout")} (${t("minutes")})`, impact("instance.hang_detector")), hang.row, hangFeedback),
+        el("div", {}, el("label", {}, t("agentMode"), impact("instance.agent_mode")), agentMode.row),
+        el("div", {}, el("label", {}, t("toolSet"), impact("instance.tool_set")), toolSet.row),
+        el("div", {}, el("label", {}, t("toolProgress"), impact("instance.tool_progress")), toolProgress.row),
+        el("div", {}, el("label", {}, t("replyCompletionGuard"), impact("instance.reply_completion_guard")), replyGuard.row, replyHint),
+        el("div", {}, el("label", {}, t("logLevel"), impact("instance.log_level")), logLevel.row),
+        el("div", {}, el("label", {}, t("lightweight"), impact("instance.lightweight")), lightweight.row),
+        el("div", {}, el("label", {}, t("modelFailover"), impact("instance.model_failover")), failover.row, failoverFeedback)),
+        el("label", {}, t("systemPrompt"), impact("instance.systemPrompt")), fSys,
+        el("label", {}, t("tags"), impact("instance.tags")), chipList(tags, null, "tag"),
+        el("label", { style: "display:flex;align-items:center;gap:8px;cursor:pointer" }, fGeneral, el("span", {}, t("generalTopicField")), impact("instance.general_topic"))),
+      el("div", { class: "actions" }, msg),
     );
     validate();
-    return box;
+    return {
+      box,
+      // The modal's footer drives this; nothing in the form submits by itself.
+      stage: () => { if (saveBtn.disabled) return false; saveBtn.onclick(); return true; },
+      impacts: AGENT_MODAL_FIELDS,
+    };
   }
+
+  /** Every field the agent modal shows, for the footer's impact summary. */
+  const AGENT_MODAL_FIELDS = [
+    "instance.display_name", "instance.description", "instance.backend",
+    "instance.model", "instance.working_directory", "instance.auto_pause_after",
+    "instance.topic_id", "instance.hang_detector", "instance.agent_mode",
+    "instance.tool_set", "instance.tool_progress",
+    "instance.reply_completion_guard", "instance.log_level",
+    "instance.lightweight", "instance.model_failover", "instance.systemPrompt",
+    "instance.tags", "instance.general_topic",
+  ];
   async function toggleAgent(name, running) {
     if (running) await api(`/stop/${encodeURIComponent(name)}`, { method: "POST" });
     else await api(`/api/instance/${encodeURIComponent(name)}/start`, { method: "POST" });
@@ -638,7 +1109,7 @@
     if (!confirm(tf("deleteAgent", name))) return;
     delete state.fleet.instances[name];
     stageChange(`agent:${name}`, {
-      label: `Delete ${name}`, impact: "fleet",
+      label: `Delete ${name}`, impact: impactOf("instance.delete"),
       apply: () => api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "DELETE" }),
     });
     renderAgents();
@@ -666,10 +1137,13 @@
   }
 
   // ── Bots ──
-  let editingBot = null;
   function renderBots() {
-    const host = $("bots"); host.innerHTML = ""; const chs = channels();
-    if (!chs.length) { host.className = "card empty"; host.textContent = t("noBots"); return; }
+    const host = $("bots"); host.innerHTML = ""; let chs = channels();
+    // One search box for the whole page.
+    const filter = ($("agentSearch")?.value || "").trim().toLowerCase();
+    if (filter) chs = chs.filter(ch => [ch.id, ch.type, ch.group_id, ch.bot_token_env]
+      .some(v => String(v ?? "").toLowerCase().includes(filter)));
+    if (!chs.length) { host.className = "card empty"; host.textContent = filter ? tf("noAgentMatch", filter) : t("noBots"); return; }
     host.className = "card";
     chs.forEach((ch, i) => {
       const item = el("div", { class: "item" });
@@ -677,52 +1151,232 @@
       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" : "") }, ch.id || chLabel(i)),
-        el("span", { class: "sub advanced-only", style: "margin:0" }, ch.bot_token_env || "(no token env)"),
+        el("span", { class: "sub", style: "margin:0" }, ch.bot_token_env || "(no token env)"),
+        ch.group_id ? el("span", { class: "tag" }, `${type === "telegram" ? "group" : "guild"} ${ch.group_id}`) : null,
+        el("span", { class: "tag" }, `${t("accessMode")}: ${ch.access?.mode || "locked"}`),
+        el("span", { class: "sub", style: "margin:0" },
+          (ch.access?.allowed_users || []).length
+            ? (ch.access.allowed_users).slice(0, 3).join(", ") + ((ch.access.allowed_users).length > 3 ? ` +${(ch.access.allowed_users).length - 3}` : "")
+            : t("noAllowedUsers")),
         el("span", { class: "spacer" }),
+        el("span", { class: "tag", title: "secret status" }, state.connections.find(c => (c.id || c.type) === (ch.id || ch.type))?.token_present ? "Token configured" : "Token missing"),
         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"),
+        el("button", { class: "sm ghost", onclick: () => {
+          const form = botEditForm(ch, i);
+          openModal({ title: type === "telegram" ? "Telegram" : "Discord", subtitle: ch.id || chLabel(i), body: form.box, impacts: form.impacts, stage: form.stage });
+        } }, t("settingsButton")),
       ));
-      if (editingBot === i) item.append(botEditForm(ch, i));
       host.append(item);
     });
   }
 
+  // Provider API keys use a separate registry endpoint. Unsupported providers
+  // are intentionally rendered without an input: a key that cannot be
+  // positively verified must never be accepted as an "unverified" write.
+  function providerSecretInputAllowed(spec) { return spec?.verifier === "available"; }
+  function renderProviderSecrets() {
+    const host = $("providerSecrets"); if (!host) return;
+    host.innerHTML = "";
+    const rows = Array.isArray(state.providerSecrets) ? state.providerSecrets : [];
+    if (!rows.length) { host.className = "card empty"; host.textContent = "No provider API-key verifiers available."; return; }
+    host.className = "card";
+    rows.forEach(spec => {
+      const row = el("div", { class: "item" });
+      const feedback = el("div", { class: "feedback" });
+      const present = spec.token_present ? "Key configured" : "Not configured";
+      if (!providerSecretInputAllowed(spec)) {
+        row.append(el("div", { class: "item-row" }, el("span", { class: "name" }, spec.display_name), el("span", { class: "tag" }, "Unsupported verifier")), el("div", { class: "hint" }, "This provider cannot be safely verified here; no key input is offered."));
+        host.append(row); return;
+      }
+      const input = el("input", { type: "password", autocomplete: "new-password", placeholder: present });
+      const button = el("button", { class: "sm primary" }, "Verify & apply");
+      button.onclick = async () => {
+        const secret = input.value;
+        if (!secret) { feedback.className = "feedback error"; feedback.textContent = "Enter a key first."; return; }
+        button.disabled = true; feedback.className = "feedback"; feedback.textContent = "Verifying…";
+        const key = crypto.randomUUID ? crypto.randomUUID() : `provider-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        try {
+          const verified = await api(`/api/settings/secrets/${encodeURIComponent(spec.id)}/verify`, { method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify({ secret, idempotency_key: key }) });
+          if (!verified.ok) { feedback.className = "feedback error"; feedback.textContent = `✗ ${verified.body?.error || "verification failed"}`; return; }
+          feedback.textContent = "Applying…";
+          let result = await api(`/api/settings/secrets/${encodeURIComponent(spec.id)}/apply`, { method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify({ verification_id: verified.body?.verification_id, idempotency_key: key }) });
+          let body = result.body || {};
+          for (let n = 0; result.ok && body.job_id && body.result === "applying" && n < 60; n++) {
+            await new Promise(resolve => setTimeout(resolve, 250));
+            const status = await api(`/api/settings/secrets/${encodeURIComponent(spec.id)}/apply/${encodeURIComponent(body.job_id)}`);
+            if (status.ok) body = status.body || body;
+          }
+          const labels = { applied_next_use: "✓ Saved — new processes will use it", reloaded: "✓ Applied", rolled_back: "↩ Rolled back", rollback_failed: "✗ Rollback failed" };
+          const ok = body.result === "applied_next_use" || body.result === "reloaded";
+          feedback.className = `feedback ${ok ? "" : "error"}`;
+          feedback.textContent = labels[body.result] || `✗ ${body.error || "Apply failed"}`;
+          if (ok) { input.value = ""; await reload(); }
+        } finally { input.value = ""; button.disabled = false; }
+      };
+      row.append(el("div", { class: "item-row" }, el("span", { class: "name" }, spec.display_name), el("span", { class: "tag" }, present), el("span", { class: "spacer" }, input), button), feedback);
+      host.append(row);
+    });
+  }
+
+  // Secret rotation is staged through the same Apply bar as every other
+  // Settings mutation. The token is held only in this short-lived closure and
+  // is cleared by the caller after the request settles; it never enters
+  // localStorage, the URL, a label, or the staged change's display text.
+  async function applyConnectionSecret(connectionId, secret, feedback) {
+    const key = crypto.randomUUID ? crypto.randomUUID() : `secret-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    feedback.className = "feedback"; feedback.textContent = "Verifying…";
+    const verified = await api(`/api/settings/connections/${encodeURIComponent(connectionId)}/secret/verify`, {
+      method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify({ secret, idempotency_key: key }),
+    });
+    if (!verified.ok) { feedback.className = "feedback error"; feedback.textContent = `✗ ${verified.body?.error || "verification failed"}`; return verified; }
+    feedback.textContent = "Applying…";
+    const applied = await api(`/api/settings/connections/${encodeURIComponent(connectionId)}/secret/apply`, {
+      method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify({ verification_id: verified.body?.verification_id, idempotency_key: key }),
+    });
+    if (!applied.ok && applied.status !== 409) { feedback.className = "feedback error"; feedback.textContent = `✗ ${applied.body?.error || "apply failed"}`; return applied; }
+    let result = applied.body || {};
+    if (result.job_id && result.result === "applying") {
+      for (let n = 0; n < 60; n++) {
+        await new Promise(resolve => setTimeout(resolve, 250));
+        const status = await api(`/api/settings/connections/${encodeURIComponent(connectionId)}/secret/apply/${encodeURIComponent(result.job_id)}`);
+        if (status.ok) { result = status.body || result; if (result.result !== "applying") break; }
+      }
+    }
+    const labels = { applying: "…Still applying — check status", applied: "✓ Applied", restart_required: "↻ Saved — restart required", rolled_back: "↩ Rolled back", rollback_failed: "✗ Rollback failed" };
+    feedback.className = `feedback ${result.result === "applied" || result.result === "restart_required" ? "" : "error"}`;
+    feedback.textContent = labels[result.result] || "✗ Unknown apply result";
+    return { ok: result.result === "applied" || result.result === "restart_required", status: result.result === "applied" ? 200 : 409, body: result };
+  }
+
+  // Binding changes use a separate verified challenge. They never go through
+  // PUT /fleet/channels: the provider probe proves the target first, and the
+  // apply job updates only group/general coordinates after the replacement
+  // adapter is ready.
+  async function verifyAndApplyConnectionBinding(connectionId, groupId, generalChannelId, feedback) {
+    const key = crypto.randomUUID ? crypto.randomUUID() : `binding-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const binding = { group_id: String(groupId).trim(), general_channel_id: String(generalChannelId || "").trim() || null };
+    feedback.className = "feedback"; feedback.textContent = "Verifying target…";
+    const verified = await api(`/api/settings/connections/${encodeURIComponent(connectionId)}/binding/verify`, {
+      method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify({ ...binding, idempotency_key: key }),
+    });
+    if (!verified.ok) { feedback.className = "feedback error"; feedback.textContent = `✗ ${verified.body?.error || "binding verification failed"}`; return verified; }
+    const probe = verified.body?.probe || {};
+    const target = [probe.group_name || binding.group_id, probe.channel_name || probe.channel_id].filter(Boolean).join(" / ");
+    const perms = [probe.can_view ? "view" : null, probe.can_send ? "send" : null, probe.can_manage_topics ? "topics" : null].filter(Boolean).join(", ");
+    feedback.textContent = `✓ Verified ${target}${perms ? ` (${perms})` : ""}`;
+    if (!window.confirm(`Rebind this connection to ${target || binding.group_id}?`)) {
+      feedback.textContent = "Verified; not applied.";
+      return { ok: false, status: 409, body: { result: "verified" } };
+    }
+    feedback.textContent = "Applying binding…";
+    const applied = await api(`/api/settings/connections/${encodeURIComponent(connectionId)}/binding/apply`, {
+      method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify({ verification_id: verified.body?.verification_id, idempotency_key: key }),
+    });
+    if (!applied.ok && applied.status !== 409) { feedback.className = "feedback error"; feedback.textContent = `✗ ${applied.body?.error || "binding apply failed"}`; return applied; }
+    let result = applied.body || {};
+    if (result.job_id && result.result === "applying") {
+      for (let n = 0; n < 60; n++) {
+        await new Promise(resolve => setTimeout(resolve, 250));
+        const status = await api(`/api/settings/connections/${encodeURIComponent(connectionId)}/binding/apply/${encodeURIComponent(result.job_id)}`);
+        if (status.ok) { result = status.body || result; if (result.result !== "applying") break; }
+      }
+    }
+    const labels = { applied: "✓ Binding applied", rolled_back: "↩ Binding rolled back", rollback_failed: "✗ Binding rollback failed", applying: "…Still applying — check status" };
+    const ok = result.result === "applied";
+    feedback.className = `feedback ${ok ? "" : "error"}`;
+    feedback.textContent = labels[result.result] || "✗ Unknown binding result";
+    if (ok) await reload();
+    return { ok, status: ok ? 200 : 409, body: result };
+  }
+
   function botEditForm(ch, i) {
     ch.access = ch.access || { mode: "locked", allowed_users: [] };
     ch.access.allowed_users = ch.access.allowed_users || [];
     const previousAccess = structuredClone(ch.access);
+    const type = ch.type || "telegram";
     const box = el("div", { class: "edit" });
     const fMode = select(ch.access.mode || "locked", ["open", "locked", "pairing"]);
     const users = [...ch.access.allowed_users];
-    const msg = el("span", { class: "msg" });
     const accessFeedback = el("div", { class: "feedback" });
+    const tokenInput = el("input", { type: "password", autocomplete: "new-password", placeholder: "Paste a new bot token to rotate it" });
+    const secretFeedback = el("div", { class: "feedback" });
+    const bindingFeedback = el("div", { class: "feedback" });
+    const fGroup = el("input", { type: "text", value: ch.group_id != null ? String(ch.group_id) : "", autocomplete: "off" });
+    const fGeneral = el("input", { type: "text", value: ch.options?.general_channel_id != null ? String(ch.options.general_channel_id) : "", autocomplete: "off", placeholder: type === "discord" ? "General channel id (optional)" : "Forum topic id (optional)" });
+    const bindingVerify = el("button", { class: "sm primary", onclick: async () => {
+      if (!fGroup.value.trim()) { bindingFeedback.className = "feedback error"; bindingFeedback.textContent = "✗ group/guild id required"; return; }
+      await verifyAndApplyConnectionBinding(connectionId, fGroup.value, fGeneral.value, bindingFeedback);
+    } }, "Verify new binding → Confirm rebind");
+    const connectionId = ch.id || ch.type || chLabel(i);
+    let pendingSecret = "";
+    const stageSecret = () => {
+      const secret = tokenInput.value;
+      if (!secret) { secretFeedback.className = "feedback error"; secretFeedback.textContent = "✗ token required"; return; }
+      pendingSecret = secret;
+      tokenInput.value = "";
+      stageChange(`secret:${connectionId}`, {
+        // Secret rotation is an immediate adapter operation. Use the server's
+        // published impact ordering rather than duplicating an impact literal
+        // in this page (hot/cold parity guards reject such copies).
+        label: `Rotate ${type} token`, impact: state.schema.order[0],
+        apply: async () => {
+          const value = pendingSecret; pendingSecret = "";
+          try { return await applyConnectionSecret(connectionId, value, secretFeedback); }
+          finally { pendingSecret = ""; }
+        },
+        cleanup: () => { pendingSecret = ""; },
+      });
+      secretFeedback.className = "feedback"; secretFeedback.textContent = "Queued — click Apply changes.";
+    };
     const validateAccess = () => setValidation(fMode, accessFeedback, "", fMode.value === "locked" && users.length === 0 ? t("accessLockedEmpty") : "");
     fMode.addEventListener("change", validateAccess);
     box.append(
       el("div", { class: "grid2" },
-        el("div", {}, el("label", {}, t("accessMode"), impact("fleet")), fMode, accessFeedback),
-        el("div", {}, el("label", {}, t("allowedUsers"), impact("fleet")), chipList(users, validateAccess, "user id"))),
-      el("div", { class: "actions" },
-        el("button", { class: "primary sm", onclick: async () => {
-          if (!confirmAccessChange(previousAccess, fMode.value, users)) return;
-          const chs = channels();
-          chs[i] = { ...chs[i], access: { ...chs[i].access, mode: fMode.value, allowed_users: users } };
-          const res = await saveChannels(msg);
-          if (res.ok) {
-            const affected = Object.keys(state.fleet.instances || {});
-            editingBot = null; await reload();
-            showBanner(`✓ ${t("affected")}: ${affected.length ? affected.join(", ") : chLabel(i) + " bot"} — 🔄🔄 restart fleet`);
-          }
-        } }, t("save")),
-        el("button", { class: "sm ghost", onclick: () => { editingBot = null; renderBots(); } }, t("cancel")), msg),
+        el("div", {}, el("label", {}, t("accessMode"), impact("fleet.channel.access.mode")), fMode, accessFeedback),
+        el("div", {}, el("label", {}, t("allowedUsers"), impact("fleet.channel.access.allowed_users")), chipList(users, validateAccess, "user id"))),
+      el("div", { class: "field" },
+        el("label", {}, type === "discord" ? t("guildIdField") : t("groupIdField"), impact("fleet.channels")),
+        fGroup,
+        el("label", {}, type === "discord" ? "General channel id" : "Forum topic id"), fGeneral,
+        el("div", { class: "hint" }, "The target is checked with the existing bot token before any binding is changed."),
+        el("div", { class: "actions" }, bindingVerify, bindingFeedback)),
+      drawer(t("advancedSection"),
+        el("div", { class: "field" }, el("label", {}, t("tokenEnv")), el("div", { class: "sub" }, ch.bot_token_env || "(no token env)")),
+        el("div", { class: "field" },
+          el("label", {}, "Bot token (never stored in the browser)"), tokenInput,
+          el("div", { class: "hint" }, "The token is verified by AgEnD, then applied by replacing the running adapter. It is never echoed."),
+          el("div", { class: "actions" }, el("button", { class: "sm primary", onclick: stageSecret }, "Verify & apply token"), secretFeedback)),
+        el("div", { class: "actions" },
+          el("button", { class: "sm danger", onclick: () => { closeModal(); delBot(i); } }, t("deleteBot")))),
     );
     validateAccess();
-    return box;
+    return {
+      box,
+      impacts: ["fleet.channel.access.mode", "fleet.channel.access.allowed_users", "fleet.channels"],
+      // Staged, not saved: the old form wrote channels straight to the API from
+      // inside the editor, which is the one thing a modal must not do.
+      stage: () => {
+        const originalChannels = structuredClone(channels());
+        const stagedAccessMode = fMode.value;
+        const stagedAllowedUsers = [...users];
+        const nextChannels = structuredClone(originalChannels);
+        nextChannels[i] = { ...nextChannels[i], access: { ...nextChannels[i].access, mode: stagedAccessMode, allowed_users: stagedAllowedUsers } };
+        if (sameValue(nextChannels, originalChannels)) return true;
+        stageChange(`connections:${ch.id || chLabel(i)}`, {
+          label: `Update ${ch.id || chLabel(i)} access`,
+          impact: impactOf("fleet.channels"),
+          // Confirm the immutable staged snapshot, not live form controls
+          // that the user may edit again before pressing global Apply.
+          confirm: () => confirmAccessChange(previousAccess, stagedAccessMode, stagedAllowedUsers),
+          cancelMessage: t("accessChangeCancelled"),
+          apply: () => api("/api/settings/fleet/channels", { method: "PUT", body: JSON.stringify(nextChannels) }),
+        });
+        return true;
+      },
+    };
   }
 
   // ── ClassicBot Channels ──
-  let editingClassic = null;
   function classicRuntime(instanceName) {
     const live = state.classicLive[instanceName] || {};
     const status = live.status || state.classicStatus[instanceName] || "stopped";
@@ -741,11 +1395,11 @@
     const runtime = classicRuntime(c.instanceName);
     const fBackend = select(c.backend || inheritedBackend, BACKENDS.filter(value => value !== "gemini-cli"));
     const fModel = el("input", { type: "text", value: c.model || "", placeholder: inheritedModel || "(inherit default)" });
-    const auto = overrideControl(c, "auto_pause_after", el("input", { type: "number", min: "0", step: "1", value: c.auto_pause_after ?? inheritedAutoPause, placeholder: "0 = disabled" }), inheritedAutoPause);
-    const toolProgress = overrideControl(c, "tool_progress", select(c.tool_progress ?? inheritedToolProgress, ["off", "standard", "verbose"]), inheritedToolProgress, "now");
+    const auto = overrideControl(c, "auto_pause_after", el("input", { type: "number", min: "0", step: "1", value: c.auto_pause_after ?? inheritedAutoPause, placeholder: "0 = disabled" }), inheritedAutoPause, "classic.auto_pause_after");
+    const toolProgress = overrideControl(c, "tool_progress", select(c.tool_progress ?? inheritedToolProgress, ["off", "standard", "verbose"]), inheritedToolProgress, "classic.tool_progress");
     const fReplyGuard = el("input", { type: "checkbox" });
     fReplyGuard.checked = c.reply_completion_guard ?? inheritedReplyGuard;
-    const replyGuard = overrideControl(c, "reply_completion_guard", fReplyGuard, inheritedReplyGuard, "now");
+    const replyGuard = overrideControl(c, "reply_completion_guard", fReplyGuard, inheritedReplyGuard, "classic.reply_completion_guard");
     const classicMode = fleetDefaults.agent_mode ?? "mcp";
     const replyHint = replyGuardHint(fBackend.value, classicMode);
     fBackend.addEventListener("change", () => {
@@ -756,7 +1410,10 @@
     const fContext = el("input", { type: "number", min: "0", step: "1", value: c.context_lines ?? classicDefaults.context_lines ?? 5 });
     const autoFeedback = el("div", { class: "feedback" });
     const contextFeedback = el("div", { class: "feedback" });
-    const saveBtn = el("button", { class: "primary sm" }, t("save"));
+    // Never rendered: it carries the validation state and the submit handler
+    // that the modal footer triggers through stage(). The form has no button
+    // of its own, so nothing here can write on its own.
+    const saveBtn = el("button", { hidden: "hidden" });
     const validate = () => {
       const autoValue = Number(auto.input.value);
       const contextValue = Number(fContext.value);
@@ -788,40 +1445,45 @@
         collab: !!c.collab,
         context_lines: c.context_lines ?? classicDefaults.context_lines ?? 5,
       });
-      if (Object.keys(patch).length === 0) { editingClassic = null; renderClassic(); return; }
+      if (Object.keys(patch).length === 0) { renderClassic(); return; }
       state.classic.channels[c.key] = { ...state.classic.channels[c.key], ...patch };
       if (patch.model === null) delete state.classic.channels[c.key].model;
       if (patch.auto_pause_after === null) delete state.classic.channels[c.key].auto_pause_after;
       if (patch.tool_progress === null) delete state.classic.channels[c.key].tool_progress;
       if (patch.reply_completion_guard === null) delete state.classic.channels[c.key].reply_completion_guard;
-      const hotOnly = Object.keys(patch).every(key => key === "tool_progress" || key === "reply_completion_guard");
+      const hotOnly = Object.keys(patch).every(key => impactOf(`classic.${key}`) === "now");
       stageChange(`classic:${c.key}`, {
         label: `Update ${c.name || c.instanceName}`,
         impact: hotOnly ? "now" : "instance",
         apply: () => api(`/api/settings/classic/channels/${encodeURIComponent(c.key)}`, { method: "PATCH", body: JSON.stringify(patch) }),
       });
-      editingClassic = null;
       renderClassic();
     };
     box.append(
       el("div", { class: "sub", style: "margin:0 0 8px" }, `ID: ${c.instanceName} · ${EXECUTION_TEXT[runtime.execution] || runtime.execution}`),
       el("div", { class: "grid2" },
-        el("div", {}, el("label", {}, t("backend"), impact("instance")), fBackend),
-        el("div", {}, el("label", {}, t("model"), impact("instance")), fModel),
-        el("div", {}, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("instance")), auto.row, autoFeedback),
-        el("div", {}, el("label", {}, t("toolProgress"), impact("now")), toolProgress.row),
-        el("div", {}, el("label", {}, t("replyCompletionGuard"), impact("now")), replyGuard.row, replyHint),
-        el("div", {}, el("label", { style: "display:flex;align-items:center;gap:8px;cursor:pointer;margin-top:28px" }, fCollab, el("span", {}, "Collaboration mode"), impact("instance")))),
-      el("div", { class: "advanced-only" },
-        el("label", {}, "Context lines", impact("instance")), fContext, contextFeedback),
-      el("div", { class: "actions" },
-        saveBtn,
-        runtime.status === "running" ? el("button", { class: "sm", onclick: () => pauseWakeAgent(c.instanceName, "pause") }, t("pause")) : null,
-        runtime.status === "paused" ? el("button", { class: "sm", onclick: () => pauseWakeAgent(c.instanceName, "wake") }, t("wake")) : null,
-        el("button", { class: "sm ghost", onclick: () => { editingClassic = null; renderClassic(); } }, t("cancel"))),
+        el("div", {}, el("label", {}, t("backend"), impact("classic.backend")), fBackend),
+        el("div", {}, el("label", {}, t("model"), impact("classic.model")), fModel),
+        el("div", {}, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("classic.auto_pause_after")), auto.row, autoFeedback),
+        el("div", {}, el("label", {}, t("toolProgress"), impact("classic.tool_progress")), toolProgress.row),
+        el("div", {}, el("label", {}, t("replyCompletionGuard"), impact("classic.reply_completion_guard")), replyGuard.row, replyHint),
+        el("div", {}, el("label", { style: "display:flex;align-items:center;gap:8px;cursor:pointer;margin-top:28px" }, fCollab, el("span", {}, "Collaboration mode"), impact("classic.collab")))),
+      drawer(t("advancedSection"),
+        el("label", {}, "Context lines", impact("classic.context_lines")), fContext, contextFeedback,
+        el("div", { class: "actions" },
+          runtime.status === "running" ? el("button", { class: "sm", onclick: () => { closeModal(); pauseWakeAgent(c.instanceName, "pause"); } }, t("pause")) : null,
+          runtime.status === "paused" ? el("button", { class: "sm", onclick: () => { closeModal(); pauseWakeAgent(c.instanceName, "wake"); } }, t("wake")) : null)),
     );
     validate();
-    return box;
+    return {
+      box,
+      stage: () => { if (saveBtn.disabled) return false; saveBtn.onclick(); return true; },
+      impacts: [
+        "classic.backend", "classic.model", "classic.auto_pause_after",
+        "classic.tool_progress", "classic.reply_completion_guard",
+        "classic.collab", "classic.context_lines",
+      ],
+    };
   }
   function renderClassic() {
     const host = $("classicList"); if (!host) return; host.innerHTML = "";
@@ -853,11 +1515,13 @@
         c.collab ? el("span", { class: "tag", style: "background:#ecfdf5;color:#065f46" }, "collab") : null,
         el("span", { class: "spacer" }),
         el("span", { class: "tag", title: STATUS_TEXT[st] || st }, EXECUTION_TEXT[runtime.execution] || runtime.execution),
-        el("button", { class: "sm ghost", onclick: () => { editingClassic = editingClassic === c.key ? null : c.key; renderClassic(); } }, editingClassic === c.key ? t("close") : t("edit")),
+        el("button", { class: "sm ghost", onclick: () => {
+          const form = classicEditForm(c);
+          openModal({ title: c.name || c.instanceName, subtitle: c.instanceName, body: form.box, impacts: form.impacts, stage: form.stage });
+        } }, t("settingsButton")),
         st === "running" ? el("button", { class: "sm", onclick: () => pauseWakeAgent(c.instanceName, "pause") }, t("pause")) : null,
         st === "paused" ? el("button", { class: "sm", onclick: () => pauseWakeAgent(c.instanceName, "wake") }, t("wake")) : null,
       ));
-      if (editingClassic === c.key) item.append(classicEditForm(c));
       host.append(item);
     }
   }
@@ -922,9 +1586,9 @@
     const fToolSet = select(d.tool_set || "full", ["full", "standard", "minimal"]);
     const fToolProgress = select(d.tool_progress ?? "off", ["off", "standard", "verbose"]);
     const fReplyGuard = el("input", { type: "checkbox" }); fReplyGuard.checked = d.reply_completion_guard ?? true;
-    const fClassicToolProgress = overrideControl(c, "tool_progress", select(c.tool_progress ?? d.tool_progress ?? "off", ["off", "standard", "verbose"]), d.tool_progress ?? "off", "now");
+    const fClassicToolProgress = overrideControl(c, "tool_progress", select(c.tool_progress ?? d.tool_progress ?? "off", ["off", "standard", "verbose"]), d.tool_progress ?? "off", "classic_defaults.tool_progress");
     const fClassicReplyInput = el("input", { type: "checkbox" }); fClassicReplyInput.checked = c.reply_completion_guard ?? d.reply_completion_guard ?? true;
-    const fClassicReplyGuard = overrideControl(c, "reply_completion_guard", fClassicReplyInput, d.reply_completion_guard ?? true, "now");
+    const fClassicReplyGuard = overrideControl(c, "reply_completion_guard", fClassicReplyInput, d.reply_completion_guard ?? true, "classic_defaults.reply_completion_guard");
     const fAccessMode = select(originalPrimaryAccess.mode || "locked", ["locked", "open", "pairing"]);
     const fLogLevel = select(d.log_level || "info", ["trace", "debug", "info", "warn", "error"]);
     const fLocale = el("select");
@@ -1016,27 +1680,10 @@
       state.classic.defaults = { ...c, ...classicPatch };
       for (const [key, value] of Object.entries(classicPatch)) if (value === null) delete state.classic.defaults[key];
       if (Object.keys(defaultsPatch).length > 0) {
-        stageChange("defaults:fleet", { label: "Update Agent defaults", impact: Object.keys(defaultsPatch).every(key => HOT_FIELDS.has(key)) ? "now" : "instance", apply: () => api("/api/settings/fleet/defaults", { method: "PUT", body: JSON.stringify(defaultsPatch) }) });
-      }
-      if (primary) {
-        const stagedAccessMode = fAccessMode.value;
-        const stagedAllowedUsers = [...allowedUsers];
-        const nextChannels = structuredClone(originalChannels);
-        nextChannels[0] = { ...nextChannels[0], access: { ...nextChannels[0].access, mode: stagedAccessMode, allowed_users: stagedAllowedUsers } };
-        if (!sameValue(nextChannels, originalChannels)) {
-          stageChange("connections:primary", {
-            label: "Update primary connection access",
-            impact: "fleet",
-            // Confirm the immutable staged snapshot, not live form controls
-            // that the user may edit again before pressing global Apply.
-            confirm: () => confirmAccessChange(originalPrimaryAccess, stagedAccessMode, stagedAllowedUsers),
-            cancelMessage: t("accessChangeCancelled"),
-            apply: () => api("/api/settings/fleet/channels", { method: "PUT", body: JSON.stringify(nextChannels) }),
-          });
-        }
+        stageChange("defaults:fleet", { label: "Update Agent defaults", impact: batchImpact(Object.keys(defaultsPatch), key => impactOf(`defaults.${key}`)), apply: () => api("/api/settings/fleet/defaults", { method: "PUT", body: JSON.stringify(defaultsPatch) }) });
       }
       if (Object.keys(classicPatch).length > 0) {
-        const classicHotOnly = Object.keys(classicPatch).every(key => key === "tool_progress" || key === "reply_completion_guard");
+        const classicHotOnly = Object.keys(classicPatch).every(key => impactOf(`classic_defaults.${key}`) === "now");
         stageChange("defaults:classic", { label: "Update ClassicBot defaults and access", impact: classicHotOnly ? "now" : "fleet", apply: () => api("/api/settings/classic/defaults", { method: "PUT", body: JSON.stringify(classicPatch) }) });
       }
       msg.innerHTML = `<span class="s">${esc(t("readyApply"))}</span>`;
@@ -1050,40 +1697,40 @@
     host.append(
       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("now")), fAutoPause, autoFeedback),
-          el("div", { class: "field" }, el("label", {}, t("toolProgress"), impact("now")), fToolProgress),
-          el("div", { class: "field" }, el("label", { style: "display:flex;align-items:center;gap:8px" }, fReplyGuard, el("span", {}, t("replyCompletionGuard")), impact("now")), defaultReplyHint))),
+          el("div", { class: "field" }, el("label", {}, t("language"), impact("defaults.locale")), fLocale),
+          el("div", { class: "field" }, el("label", {}, t("defaultBackend"), impact("defaults.backend")), fBackend),
+          el("div", { class: "field" }, el("label", {}, t("defaultModel"), impact("defaults.model")), fModel),
+          el("div", { class: "field" }, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("defaults.auto_pause_after")), fAutoPause, autoFeedback),
+          el("div", { class: "field" }, el("label", {}, t("toolProgress"), impact("defaults.tool_progress")), fToolProgress),
+          el("div", { class: "field" }, el("label", { style: "display:flex;align-items:center;gap:8px" }, fReplyGuard, el("span", {}, t("replyCompletionGuard")), impact("defaults.reply_completion_guard")), defaultReplyHint))),
       section("ClassicBot", true,
         el("div", { class: "grid2" },
-          el("div", { class: "field" }, el("label", {}, "Classic default backend", impact("instance")), fClassicBackend),
-          el("div", { class: "field" }, el("label", {}, t("toolProgress"), impact("now")), fClassicToolProgress.row),
-          el("div", { class: "field" }, el("label", {}, t("replyCompletionGuard"), impact("now")), fClassicReplyGuard.row, classicReplyHint)),
+          el("div", { class: "field" }, el("label", {}, "Classic default backend", impact("classic_defaults.backend")), fClassicBackend),
+          el("div", { class: "field" }, el("label", {}, t("toolProgress"), impact("classic_defaults.tool_progress")), fClassicToolProgress.row),
+          el("div", { class: "field" }, el("label", {}, t("replyCompletionGuard"), impact("classic_defaults.reply_completion_guard")), fClassicReplyGuard.row, classicReplyHint)),
         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" },
+            el("div", {}, el("label", {}, t("classicAdmins"), impact("classic.admin_users")), chipList(c.admin_users, null, "user id")),
+            el("div", {}, el("label", {}, t("allowedGuilds"), impact("classic.allowed_guilds")), chipList(c.allowed_guilds, null, "guild id"))))),
+      drawer(t("advancedSection"),
       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("now")), fLogLevel),
-          el("div", { class: "field" }, el("label", {}, t("agentMode"), impact("instance")), fAgentMode))),
+          el("div", { class: "field" }, el("label", {}, t("toolSet"), impact("defaults.tool_set")), fToolSet),
+          el("div", { class: "field" }, el("label", {}, t("logLevel"), impact("defaults.log_level")), fLogLevel),
+          el("div", { class: "field" }, el("label", {}, t("agentMode"), impact("defaults.agent_mode")), fAgentMode))),
       section(t("detection"), false,
         el("div", { class: "grid2" },
-          el("div", { class: "field" }, el("label", { style: "display:flex;align-items:center;gap:8px" }, fHangEnabled, el("span", {}, t("hangEnabled")), impact("instance"))),
-          el("div", { class: "field" }, el("label", {}, `${t("hangTimeout")} (${t("minutes")})`, impact("instance")), fHangTimeout, hangFeedback))),
+          el("div", { class: "field" }, el("label", { style: "display:flex;align-items:center;gap:8px" }, fHangEnabled, el("span", {}, t("hangEnabled")), impact("defaults.hang_detector"))),
+          el("div", { class: "field" }, el("label", {}, `${t("hangTimeout")} (${t("minutes")})`, impact("defaults.hang_detector")), fHangTimeout, hangFeedback))),
       section(t("startup"), false,
         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("Advanced & Access", false,
+          el("div", { class: "field" }, el("label", {}, t("concurrency"), impact("fleet.spawn_concurrency")), fConcurrency, concurrencyFeedback),
+          el("div", { class: "field" }, el("label", {}, `${t("staggerDelay")} (ms)`, impact("fleet.spawn_stagger_ms")), fStagger, staggerFeedback))),
+      section("Access", false,
+        // Access belongs to a connection, and one modal edits one object — so
+        // it is edited there, and this is only a pointer to it.
         primary
-          ? el("div", { class: "grid2" },
-              el("div", { class: "field" }, el("label", {}, t("accessMode"), impact("fleet")), fAccessMode, accessFeedback),
-              el("div", { class: "field" }, el("label", {}, t("allowedUsers"), impact("fleet")), chipList(allowedUsers, validate, "user id")))
+          ? el("div", { class: "field hint" }, tf("accessMovedHint", primary.id || chLabel(0)))
           : el("div", { class: "field hint" }, t("noBots")))),
       el("div", { class: "field" }, el("div", { class: "actions" }, saveBtn, msg)),
     );
@@ -1151,7 +1798,7 @@
   }
 
   // ── Load / render ──
-  function renderAll() { renderAgents(); renderClassic(); renderBots(); renderGeneral(); renderAdvanced(); applyStaticI18n(); }
+  function renderAll() { renderAgents(); renderClassic(); renderBots(); renderProviderSecrets(); renderGeneral(); renderAdvanced(); applyStaticI18n(); }
   async function reloadLive() {
     const f = await api("/api/fleet");
     state.fleetUp = f.ok;
@@ -1177,10 +1824,18 @@
   }
   async function reload() {
     // Forms edit the user-authored config, not defaults-expanded runtime values.
+    const schema = await api("/api/settings/schema");
+    if (schema.ok && schema.body) state.schema = schema.body;
     const f = await api("/api/settings/fleet/raw");
     if (!f.ok) { $("banner").style.display = "block"; $("banner").style.background = "#fef2f2"; $("banner").style.color = "var(--red)"; $("banner").textContent = t("configLoadFailed"); return; }
     state.fleet = f.body || {};
     const c = await api("/api/settings/classic"); state.classic = c.body || {};
+    const connections = await api("/api/settings/connections");
+    state.connections = connections.ok && Array.isArray(connections.body) ? connections.body : [];
+    const providerSecrets = await api("/api/settings/provider-secrets");
+    const providerHost = $("providerSecrets");
+    if (providerHost) providerHost.style.display = providerSecrets.ok ? "" : "none";
+    state.providerSecrets = providerSecrets.ok && Array.isArray(providerSecrets.body) ? providerSecrets.body : [];
     await reloadLive();
     renderAll();
   }
@@ -1191,21 +1846,18 @@
   $("helpBackdrop").onclick = () => setHelp(false);
   $("langBtn").onclick = () => { lang = lang === "en" ? "zh-TW" : "en"; localStorage.setItem("agend_lang", lang); renderAll(); };
   $("verBadge").onclick = () => window.open("https://github.com/songsid/AgEnD/releases/latest", "_blank", "noopener");
-  $("agentSearch").oninput = () => { renderAgents(); renderClassic(); };
+  $("agentSearch").oninput = () => { renderAgents(); renderClassic(); renderBots(); };
   $("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"); };
-  const advancedEnabled = localStorage.getItem("agend_settings_advanced") === "true";
-  document.body.classList.toggle("show-advanced", advancedEnabled);
-  $("advancedToggle").textContent = advancedEnabled ? t("hideAdvanced") : t("showAdvanced");
-  $("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 ? t("hideAdvanced") : t("showAdvanced");
-  };
+  // Closing stages; cancelling discards. Neither writes anything.
+  $("modalDone").onclick = () => { if (modalState?.stage() !== false) closeModal(); };
+  $("modalCancel").onclick = () => closeModal();
+  $("modalBackdrop").onclick = () => closeModal();
+  document.addEventListener("keydown", e => { if (e.key === "Escape" && modalState) closeModal(); });
+  $("wizardBtn").onclick = () => openWizard();
   $("applyChanges").onclick = applyPendingChanges;
-  $("discardChanges").onclick = async () => { state.pending.clear(); updatePendingBar(); await reload(); };
+  $("discardChanges").onclick = async () => { for (const change of state.pending.values()) change.cleanup?.(); state.pending.clear(); updatePendingBar(); await reload(); };
 
   reload();
 })();