@songsid/agend 2.1.0-beta.3 → 2.1.0-beta.30

package/dist/ui/settings.html

@@ -8,10 +8,10 @@
   * { margin: 0; padding: 0; box-sizing: border-box; }
   :root {
     --bg:#ffffff; --card:#f9fafb; --border:#e5e7eb; --fg:#111827; --muted:#6b7280;
-    --accent:#2563eb; --accent-hover:#1d4ed8; --green:#059669; --red:#dc2626;
+    --accent:#2563eb; --accent-hover:#1d4ed8; --green:#059669; --red:#dc2626; --yellow:#b45309;
     --radius:8px; --radius-sm:6px;
   }
-  body { background: var(--bg); color: var(--fg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; padding-bottom: 60px; }
+  body { background: var(--bg); color: var(--fg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; padding-bottom: 88px; }
   header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 20; }
   header h1 { font-size: 18px; font-weight: 700; }
   .grow { flex: 1; }
@@ -32,7 +32,7 @@
   .item .del-btn { visibility: hidden; }
   .item:hover .del-btn { visibility: visible; }
   .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: #9ca3af; }
-  .dot.running { background: var(--green); } .dot.crashed { background: var(--red); } .dot.stopped { background: #9ca3af; }
+  .dot.running, .dot.idle { background: var(--green); } .dot.working { background:var(--accent); } .dot.paused { background:#f59e0b; } .dot.crashed, .dot.stuck { background: var(--red); } .dot.stopped { background: #9ca3af; }
   .name { font-weight: 600; }
   .tag { font-size: 12px; color: var(--muted); background: #eef2ff; color: #3730a3; padding: 1px 7px; border-radius: 10px; }
   .tag.persona { background: #fdf2f8; color: #9d174d; }
@@ -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], 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=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; }
@@ -63,8 +63,33 @@
   .msg { font-size: 12px; margin-left: 4px; }
   .msg .e { color: var(--red); } .msg .w { color: #b45309; } .msg .s { color: var(--green); }
   .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
+  .impact { display:inline-block; font-size:11px; color:var(--muted); margin-left:6px; font-weight:400; }
+  .feedback { min-height:17px; font-size:12px; margin-top:3px; }
+  .feedback.error { color:var(--red); } .feedback.warning { color:var(--yellow); }
+  input.invalid, select.invalid { border-color:var(--red); background:#fef2f2; }
+  button:disabled { opacity:.5; cursor:not-allowed; }
+  .settings-section { border-bottom:1px solid var(--border); background:#fff; }
+  .settings-section:last-child { border-bottom:none; }
+  .settings-section > summary { cursor:pointer; list-style:none; padding:12px 16px; font-weight:650; background:#f9fafb; }
+  .settings-section > summary::-webkit-details-marker { display:none; }
+  .settings-section > summary::before { content:"▶"; display:inline-block; width:18px; color:var(--muted); font-size:10px; }
+  .settings-section[open] > summary::before { content:"▼"; }
+  .section-body { padding:0 0 2px; }
+  .inherit-row { display:flex; gap:8px; align-items:center; margin-top:6px; color:var(--muted); font-size:12px; }
   .adv-body { display: none; padding: 14px 16px; }
   .adv-body.open { display: block; }
+  .advanced-only { display:none !important; }
+  body.show-advanced .advanced-only { display:block !important; }
+  .more-menu { position:relative; }
+  .more-menu summary { list-style:none; cursor:pointer; padding:4px 9px; color:var(--muted); }
+  .more-menu summary::-webkit-details-marker { display:none; }
+  .more-menu .menu { position:absolute; right:0; top:30px; z-index:10; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(0,0,0,.12); padding:5px; min-width:130px; }
+  .more-menu .menu button { width:100%; text-align:left; border:0; }
+  .pending-bar { position:fixed; left:0; right:0; bottom:0; display:none; align-items:center; gap:12px; padding:12px max(16px, calc((100vw - 860px) / 2 + 24px)); background:#111827; color:#fff; z-index:35; box-shadow:0 -4px 18px rgba(0,0,0,.18); }
+  .pending-bar.open { display:flex; }
+  .pending-bar .grow { flex:1; }
+  .pending-bar button.primary { background:#fff; color:#111827; border-color:#fff; }
+  .level-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
   .toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
   .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
   .seg button { border: none; border-radius: 0; }
@@ -84,6 +109,19 @@
   .help-panel li { font-size: 13px; margin: 3px 0; }
   .help-panel .close { position: absolute; top: 14px; right: 16px; cursor: pointer; color: var(--muted); font-size: 22px; line-height: 1; background: none; border: none; }
   .help-panel .tip { margin-top: 16px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
+  @media (max-width: 640px) {
+    header { padding:10px 12px; flex-wrap:wrap; } header h1 { font-size:16px; }
+    main { padding:12px 10px; } section { margin-bottom:18px; }
+    .grid2 { grid-template-columns:1fr; gap:0; }
+    .item { padding:9px 10px; } .item-row { flex-wrap:wrap; }
+    .item-row .spacer { flex-basis:100%; height:0; }
+    .sub { margin-left:0; } .field { padding:10px 12px; }
+    #agentSearch { width:130px !important; margin-right:0 !important; }
+    button { min-height:36px; } button.sm { min-height:32px; }
+    .pending-bar { padding:10px 12px; flex-wrap:wrap; }
+    .pending-bar .grow { display:none; }
+    .pending-bar button { flex:1; }
+  }
 </style>
 </head>
 <body>
@@ -93,7 +131,7 @@
   <div class="grow"></div>
   <button class="help-btn" id="langBtn" title="Language">🌐</button>
   <button class="help-btn" id="helpBtn" title="Help">ℹ️</button>
-  <button id="reloadBtn" class="primary" data-i18n="reloadFleet" title="Apply saved config to running instances (SIGHUP)">↻ Reload Fleet</button>
+  <button id="advancedToggle" title="Show additional controls">Show advanced</button>
 </header>
 <div class="help-backdrop" id="helpBackdrop"></div>
 <aside class="help-panel" id="helpPanel">
@@ -114,7 +152,7 @@
   </section>
 
   <section>
-    <div class="sec-head"><h2 data-i18n="bots">🔌 Bots</h2><div class="grow"></div><button class="sm" id="newBotBtn" data-i18n="add">+ Add</button></div>
+    <div class="sec-head"><h2>🔌 Connections &amp; Bots</h2><div class="grow"></div><button class="sm advanced-only" id="newBotBtn" data-i18n="add">+ Add</button></div>
     <div id="newBot"></div>
     <div class="card" id="bots"></div>
   </section>
@@ -125,15 +163,18 @@
   </section>
 
   <section>
-    <div class="sec-head"><h2 data-i18n="whatsNew">🆕 What's New</h2><div class="grow"></div><button class="sm" id="wnToggle" data-i18n="expand">▶ Expand</button></div>
-    <div class="card"><div class="adv-body" id="wnBody"></div></div>
-  </section>
-
-  <section>
-    <div class="sec-head"><h2 data-i18n="advanced">📋 Advanced</h2><div class="grow"></div><button class="sm" id="advToggle" data-i18n="expand">▶ Expand</button></div>
+    <div class="level-label">Developer · Level 3</div>
+    <div class="sec-head"><h2>📋 Developer YAML</h2><div class="grow"></div><button class="sm" id="advToggle" data-i18n="expand">▶ Expand</button></div>
     <div class="card"><div class="adv-body" id="advBody"></div></div>
   </section>
 </main>
+<div class="pending-bar" id="pendingBar">
+  <strong id="pendingCount">0 changes not applied</strong>
+  <span id="pendingImpact">⚡ Immediately · 🔄 Restart this Agent · 🔄🔄 Restart AgEnD</span>
+  <span class="grow"></span>
+  <button id="discardChanges">Discard</button>
+  <button class="primary" id="applyChanges">Apply changes</button>
+</div>
 <script>
 (() => {
   "use strict";
@@ -141,7 +182,7 @@
   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]));
-  const BACKENDS = ["claude-code", "kiro-cli", "codex", "opencode", "gemini-cli", "antigravity"];
+  const BACKENDS = ["claude-code", "kiro-cli", "codex", "opencode", "gemini-cli", "antigravity", "grok"];
 
   // ── i18n ──
   const I18N = {
@@ -152,6 +193,8 @@
       edit: "Edit", close: "Close", save: "Save", cancel: "Cancel", create: "Create", start: "Start", stop: "Stop",
       backend: "Backend", model: "Model", workingDir: "Working directory", channelBinding: "Channel binding",
       description: "Description", systemPrompt: "System prompt", tags: "Tags", generalTopicField: "General topic (fleet dispatcher)",
+      runtimeResources: "Runtime & Resources", autoPause: "Auto-pause after", minutes: "minutes", inheritDefault: "Inherit from defaults",
+      detection: "Detection", startup: "Startup", backendSection: "Backend", advancedSection: "Advanced & Access", hangEnabled: "Hang detector enabled", hangTimeout: "Stuck timeout", agentMode: "Agent mode", toolSet: "Tool set", logLevel: "Log level", concurrency: "Startup concurrency", staggerDelay: "Stagger delay", lightweight: "Lightweight mode", modelFailover: "Fallback model", displayName: "Display name", pause: "Pause", wake: "Wake", accessMode: "Access mode", affected: "Affected instances",
       language: "Language (bot replies)", defaultBackend: "Default backend", defaultModel: "Default model", allowedUsers: "Allowed users (primary bot)",
       classicAdmins: "ClassicBot admins", allowedGuilds: "Allowed guilds", type: "Type", adapterId: "Adapter id",
       tokenEnv: "Bot token env var", groupId: "Group / guild id", nameField: "Name",
@@ -168,6 +211,8 @@
       edit: "編輯", close: "關閉", save: "儲存", cancel: "取消", create: "建立", start: "啟動", stop: "停止",
       backend: "後端", model: "模型", workingDir: "工作目錄", channelBinding: "頻道綁定",
       description: "描述", systemPrompt: "System prompt", tags: "標籤", generalTopicField: "General topic（fleet 分派器）",
+      runtimeResources: "執行環境與資源", autoPause: "閒置後自動暫停", minutes: "分鐘", inheritDefault: "沿用全域預設值",
+      detection: "偵測", startup: "啟動", backendSection: "後端", advancedSection: "進階與存取", hangEnabled: "啟用卡住偵測", hangTimeout: "卡住逾時", agentMode: "Agent 模式", toolSet: "工具集", logLevel: "Log 等級", concurrency: "啟動併發數", staggerDelay: "錯開延遲", lightweight: "輕量模式", modelFailover: "備援模型", displayName: "顯示名稱", pause: "暫停", wake: "喚醒", accessMode: "存取模式", affected: "受影響 instances",
       language: "語言（bot 回覆）", defaultBackend: "預設後端", defaultModel: "預設模型", allowedUsers: "允許使用者（主 bot）",
       classicAdmins: "ClassicBot 管理員", allowedGuilds: "允許的伺服器", type: "類型", adapterId: "Adapter id",
       tokenEnv: "Bot token 環境變數", groupId: "群組 / guild id", nameField: "名稱",
@@ -201,7 +246,7 @@
     document.querySelectorAll("[data-i18n]").forEach(e => { e.textContent = t(e.getAttribute("data-i18n")); });
     document.querySelectorAll("[data-i18n-ph]").forEach(e => { e.setAttribute("placeholder", t(e.getAttribute("data-i18n-ph"))); });
     // toggle labels that carry expand/collapse state
-    for (const [id, body] of [["advToggle", "advBody"], ["wnToggle", "wnBody"]]) {
+    for (const [id, body] of [["advToggle", "advBody"]]) {
       const b = $(body); if (b) $(id).textContent = b.classList.contains("open") ? t("collapse") : t("expand");
     }
     renderHelp();
@@ -251,9 +296,17 @@
     else if (!html) html = `<span class="e">✗ ${esc((b && b.error) || ("HTTP " + res.status))}</span>`;
     elm.innerHTML = html;
   }
+  function showBanner(text, error = false) {
+    const b = $("banner");
+    b.style.display = "block";
+    b.style.background = error ? "#fef2f2" : "#ecfdf5";
+    b.style.color = error ? "var(--red)" : "var(--green)";
+    b.textContent = text;
+    setTimeout(() => { b.style.display = "none"; }, 6000);
+  }
 
   // ── State ──
-  const state = { fleet: {}, classic: {}, classicStatus: {}, live: {}, fleetUp: false, advFmt: "yaml", advEdit: false, collapsedGroups: new Set(), version: "", newAgentOpen: false, newBotOpen: false };
+  const state = { fleet: {}, classic: {}, classicStatus: {}, classicLive: {}, live: {}, fleetUp: false, advFmt: "yaml", advEdit: false, collapsedGroups: new Set(), version: "", newAgentOpen: false, newBotOpen: false, pending: new Map() };
   const channels = () => state.fleet.channels || (state.fleet.channel ? [state.fleet.channel] : []);
   const channelIds = () => channels().map(c => c.id || c.type).filter(Boolean);
   const chLabel = (i) => i === 0 ? "primary" : "persona";
@@ -268,7 +321,55 @@
     box.append(chips, el("div", { class: "chip-add" }, inp, el("button", { class: "sm", onclick: add }, "+ Add")));
     redraw(); return box;
   }
-  function select(value, options) { const s = el("select"); for (const o of options) { const opt = el("option", {}, o); opt.value = o; if (o === value) opt.selected = true; s.append(opt); } return s; }
+  function select(value, options) { const s = el("select"); for (const o of options) { const val = typeof o === "string" ? o : o.value; const label = typeof o === "string" ? o : o.label; const opt = el("option", {}, label); opt.value = val; if (val === value) opt.selected = true; s.append(opt); } return s; }
+  const impact = (kind) => el("span", { class: "impact" }, kind === "now" ? "⚡ Immediately" : kind === "fleet" ? "🔄🔄 Restart AgEnD" : "🔄 Restart this Agent");
+  function updatePendingBar() {
+    const n = state.pending.size;
+    $("pendingBar").classList.toggle("open", n > 0);
+    $("pendingCount").textContent = `${n} change${n === 1 ? "" : "s"} not applied`;
+    const kinds = new Set([...state.pending.values()].map(change => change.impact));
+    $("pendingImpact").textContent = [...kinds].map(kind => kind === "now" ? "⚡ Immediately" : kind === "fleet" ? "🔄🔄 Restart AgEnD" : "🔄 Restart this Agent").join(" · ");
+  }
+  function stageChange(key, change) {
+    state.pending.set(key, change);
+    updatePendingBar();
+    showBanner(`Queued: ${change.label}`);
+  }
+  async function applyPendingChanges() {
+    const button = $("applyChanges"); button.disabled = true;
+    for (const [key, change] of [...state.pending]) {
+      let result;
+      try { result = await change.apply(); }
+      catch (error) { result = { ok: false, body: { error: error.message } }; }
+      if (!result?.ok) {
+        showBanner(`${change.label}: ${result?.body?.error || "Apply failed"}`, true);
+        button.disabled = false; return;
+      }
+      state.pending.delete(key); updatePendingBar();
+    }
+    await api("/api/settings/reload", { method: "POST" });
+    await reload();
+    showBanner("✓ Changes applied. AgEnD is reconciling affected Agents.");
+    button.disabled = false;
+  }
+  const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj || {}, key);
+  function overrideControl(inst, key, input, inheritedValue, impactKind = "instance") {
+    const inherited = !hasOwn(inst, key);
+    const toggle = el("input", { type: "checkbox" }); toggle.checked = inherited;
+    input.disabled = inherited;
+    if (inherited && inheritedValue !== undefined) {
+      if (input.type === "checkbox") input.checked = !!inheritedValue;
+      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))) };
+  }
+  function setValidation(input, feedback, error, warning) {
+    input.classList.toggle("invalid", !!error);
+    feedback.className = "feedback" + (error ? " error" : warning ? " warning" : "");
+    feedback.textContent = error ? `✗ ${error}` : warning ? `⚠ ${warning}` : "";
+    return !error;
+  }
 
   // ── My Agents ──
   let editing = null;
@@ -281,12 +382,14 @@
   }
   // Display name: profile display_name → else strip the -t<topicId> suffix.
   const shortName = (name, inst) => (inst && inst.display_name) || name.replace(/-t\d+$/, "");
-  const STATUS_TEXT = { running: "🟢 Running", crashed: "🔴 Crashed", stopped: "⚪ Stopped" };
-  const STATUS_ORDER = { running: 0, crashed: 1, stopped: 2 };
+  const STATUS_TEXT = { running: "🟢 Running", paused: "⏸ Paused", crashed: "🔴 Crashed", stopped: "⚪ Stopped" };
+  const EXECUTION_TEXT = { idle: "🟢 Idle", working: "🔵 Working", stuck: "🔴 Stuck", paused: "⏸ Paused", crashed: "🔴 Crashed", stopped: "⚪ Stopped", running: "🟢 Running" };
+  const STATUS_ORDER = { running: 0, paused: 1, crashed: 2, stopped: 3 };
   const groupOf = (inst) => (inst.tags && inst.tags[0]) || "Other";
   function compactRow(name, inst) {
     const st = state.live[name]?.status || "stopped";
     const running = st === "running";
+    const paused = st === "paused";
     const short = shortName(name, inst);
     const chTag = agentChannelLabel(inst);
     const item = el("div", { class: "item" });
@@ -299,8 +402,12 @@
       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", onclick: () => toggleAgent(name, running) }, running ? t("stop") : t("start")),
-      el("button", { class: "sm danger del-btn", title: t("close"), onclick: () => delAgent(name) }, "🗑️"),
+      running ? el("button", { class: "sm", onclick: () => pauseWakeAgent(name, "pause") }, t("pause")) : null,
+      paused ? el("button", { class: "sm", onclick: () => pauseWakeAgent(name, "wake") }, t("wake")) : null,
+      !paused ? el("button", { class: "sm", onclick: () => toggleAgent(name, running) }, running ? t("stop") : t("start")) : null,
+      el("details", { class: "more-menu" },
+        el("summary", { title: "More actions" }, "⋯"),
+        el("div", { class: "menu" }, el("button", { class: "sm danger", onclick: () => delAgent(name) }, "Delete Agent"))),
     ));
     if (editing === name) item.append(agentEditForm(name, inst));
     return item;
@@ -333,6 +440,7 @@
   }
   function agentEditForm(name, inst) {
     const box = el("div", { class: "edit" });
+    const defaults = state.fleet.defaults || {};
     const fBackend = select(inst.backend || state.fleet.defaults?.backend || "claude-code", BACKENDS);
     const fModel = el("input", { type: "text", value: inst.model || "", placeholder: "(inherit default)" });
     const fWd = el("input", { type: "text", value: inst.working_directory || "" });
@@ -341,29 +449,92 @@
     const fSys = el("input", { type: "text", value: inst.systemPrompt || "", placeholder: "e.g. file:prompts/dev.md" });
     const tags = [...(inst.tags || [])];
     const fGeneral = el("input", { type: "checkbox" }); fGeneral.checked = !!inst.general_topic;
+    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 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 logLevel = overrideControl(inst, "log_level", select(inst.log_level || defaults.log_level || "info", ["trace", "debug", "info", "warn", "error"]), defaults.log_level || "info");
+    const fLightweight = el("input", { type: "checkbox" }); fLightweight.checked = inst.lightweight ?? defaults.lightweight ?? false;
+    const lightweight = overrideControl(inst, "lightweight", fLightweight, defaults.lightweight ?? false);
+    const fallbackValue = Array.isArray(inst.model_failover) ? (inst.model_failover[0] || "") : (defaults.model_failover?.[0] || "");
+    const failover = overrideControl(inst, "model_failover", el("input", { type: "text", value: fallbackValue, placeholder: "e.g. sonnet" }), defaults.model_failover?.[0] || "");
+    const displayName = overrideControl(inst, "display_name", el("input", { type: "text", value: inst.display_name ?? defaults.display_name ?? "", placeholder: name }), defaults.display_name || "");
+    const autoFeedback = el("div", { class: "feedback" });
+    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"));
+    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) ? "Must be 0 or greater" : "");
+      const validHang = setValidation(hang.input, hangFeedback, !hang.toggle.checked && (!Number.isFinite(hangValue) || hangValue <= 0) ? "Must be greater than 0" : "");
+      setValidation(failover.input, failoverFeedback, "", !failover.toggle.checked && !failover.input.value.trim() ? "Empty list disables failover" : "");
+      saveBtn.disabled = !(validAuto && validHang);
+      return !saveBtn.disabled;
+    };
+    for (const ctl of [auto, hang, agentMode, toolSet, logLevel, lightweight, failover, displayName]) {
+      ctl.input.addEventListener("input", validate); ctl.input.addEventListener("change", validate); ctl.toggle.addEventListener("change", validate);
+    }
+    saveBtn.onclick = async () => {
+      if (!validate()) return;
+      const patch = {
+        backend: fBackend.value, model: fModel.value || undefined,
+        working_directory: fWd.value, channel_id: fChan.value || undefined,
+        description: fDesc.value || undefined, systemPrompt: fSys.value || undefined,
+        tags: tags.length ? tags : undefined, general_topic: fGeneral.checked,
+        auto_pause_after: auto.toggle.checked ? null : Number(auto.input.value),
+        hang_detector: { timeout_minutes: hang.toggle.checked ? null : Number(hang.input.value) },
+        agent_mode: agentMode.toggle.checked ? null : agentMode.input.value,
+        tool_set: toolSet.toggle.checked ? null : toolSet.input.value,
+        log_level: logLevel.toggle.checked ? null : logLevel.input.value,
+        lightweight: lightweight.toggle.checked ? null : lightweight.input.checked,
+        model_failover: failover.toggle.checked ? null : (failover.input.value.trim() ? [failover.input.value.trim()] : []),
+        display_name: displayName.toggle.checked ? null : displayName.input.value.trim(),
+      };
+      state.fleet.instances[name] = { ...inst, ...patch };
+      for (const [key, value] of Object.entries(patch)) if (value === null) delete state.fleet.instances[name][key];
+      if (patch.hang_detector?.timeout_minutes === null) {
+        state.fleet.instances[name].hang_detector = { ...(inst.hang_detector || {}) };
+        delete state.fleet.instances[name].hang_detector.timeout_minutes;
+      }
+      stageChange(`agent:${name}`, {
+        label: `Update ${shortName(name, state.fleet.instances[name])}`,
+        impact: "instance",
+        apply: () => api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "PATCH", body: JSON.stringify(patch) }),
+      });
+      editing = null; renderAgents();
+    };
     box.append(
       el("div", { class: "sub", style: "margin:0 0 8px" }, "ID: " + name),
-      el("div", { class: "grid2" }, el("div", {}, el("label", {}, t("backend")), fBackend), el("div", {}, el("label", {}, t("model")), fModel)),
-      el("label", {}, t("workingDir")), fWd,
-      el("div", { class: "grid2" }, el("div", {}, el("label", {}, t("channelBinding")), fChan), el("div", {}, el("label", {}, t("description")), fDesc)),
-      el("label", {}, t("systemPrompt")), fSys,
-      el("label", {}, t("tags")), chipList(tags, null, "tag"),
-      el("label", { style: "display:flex;align-items:center;gap:8px;cursor:pointer" }, fGeneral, el("span", {}, t("generalTopicField"))),
+      el("div", { class: "grid2" },
+        el("div", {}, el("label", {}, t("displayName"), impact("now")), displayName.row),
+        el("div", {}, el("label", {}, t("description"), impact("now")), fDesc),
+        el("div", {}, el("label", {}, t("backend"), impact("instance")), fBackend),
+        el("div", {}, el("label", {}, t("model"), impact("instance")), fModel)),
+      el("label", {}, t("workingDir"), impact("instance")), fWd,
+      el("div", { class: "grid2" },
+        el("div", {}, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("instance")), auto.row, autoFeedback)),
+      el("div", { class: "advanced-only" },
+        el("div", { class: "sub", style: "margin:14px 0 6px;font-weight:600" }, "Advanced Agent settings"),
+        el("div", { class: "grid2" },
+        el("div", {}, el("label", {}, t("channelBinding"), impact("fleet")), fChan),
+        el("div", {}, el("label", {}, `${t("hangTimeout")} (${t("minutes")})`), hang.row, hangFeedback),
+        el("div", {}, el("label", {}, t("agentMode")), agentMode.row),
+        el("div", {}, el("label", {}, t("toolSet")), toolSet.row),
+        el("div", {}, el("label", {}, t("logLevel")), logLevel.row),
+        el("div", {}, el("label", {}, t("lightweight")), lightweight.row),
+        el("div", {}, el("label", {}, t("modelFailover")), failover.row, failoverFeedback)),
+        el("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" },
-        el("button", { class: "primary sm", onclick: async () => {
-          const patch = {
-            backend: fBackend.value, model: fModel.value || undefined,
-            working_directory: fWd.value, channel_id: fChan.value || undefined,
-            description: fDesc.value || undefined, systemPrompt: fSys.value || undefined,
-            tags: tags.length ? tags : undefined, general_topic: fGeneral.checked,
-          };
-          const res = await api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "PATCH", body: JSON.stringify(patch) });
-          resultMsg(msg, res); if (res.ok) await reload();
-        } }, t("save")),
+        saveBtn,
         el("button", { class: "sm ghost", onclick: () => { editing = null; renderAgents(); } }, t("cancel")),
         msg),
     );
+    validate();
     return box;
   }
   async function toggleAgent(name, running) {
@@ -371,10 +542,19 @@
     else await api(`/api/instance/${encodeURIComponent(name)}/start`, { method: "POST" });
     setTimeout(reloadLive, 800);
   }
+  async function pauseWakeAgent(name, action) {
+    const res = await api(`/api/settings/instances/${encodeURIComponent(name)}/${action}`, { method: "POST" });
+    if (!res.ok) alert(res.body?.error || `${action} failed`);
+    await reloadLive();
+  }
   async function delAgent(name) {
-    if (!confirm(`Delete agent "${name}"? (config removed; running daemon stops on next Reload)`)) return;
-    const res = await api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "DELETE" });
-    if (res.ok) await reload(); else alert((res.body && res.body.error) || "Delete failed");
+    if (!confirm(`Delete agent "${name}"? This will be applied only after you confirm the pending changes.`)) return;
+    delete state.fleet.instances[name];
+    stageChange(`agent:${name}`, {
+      label: `Delete ${name}`, impact: "fleet",
+      apply: () => api(`/api/settings/fleet/instances/${encodeURIComponent(name)}`, { method: "DELETE" }),
+    });
+    renderAgents();
   }
   function renderNewAgent(open) {
     const host = $("newAgent"); host.innerHTML = "";
@@ -399,6 +579,7 @@
   }
 
   // ── 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; }
@@ -408,20 +589,121 @@
       const type = ch.type || "?";
       item.append(el("div", { class: "item-row" },
         el("span", { class: "name" }, type === "telegram" ? "Telegram" : "Discord"),
-        el("span", { class: "tag" + (i === 0 ? "" : " persona") + (type === "telegram" ? " tg" : "") }, chLabel(i)),
-        el("span", { class: "sub", style: "margin:0" }, ch.bot_token_env || "(no token env)"),
+        el("span", { class: "tag" + (i === 0 ? "" : " persona") + (type === "telegram" ? " tg" : "") }, ch.id || chLabel(i)),
+        el("span", { class: "sub advanced-only", style: "margin:0" }, ch.bot_token_env || "(no token env)"),
         el("span", { class: "spacer" }),
-        el("span", { style: "color:var(--green);font-size:13px" }, state.fleetUp ? t("online") : "—"),
-        el("button", { class: "sm danger", onclick: () => delBot(i) }, "🗑️"),
+        el("span", { style: `color:${state.fleetUp ? "var(--green)" : "var(--red)"};font-size:13px` }, state.fleetUp ? "Connected" : "Problem"),
+        el("button", { class: "sm ghost advanced-only", onclick: () => { editingBot = editingBot === i ? null : i; renderBots(); } }, editingBot === i ? t("close") : t("edit")),
+        el("button", { class: "sm danger advanced-only", onclick: () => delBot(i) }, "Delete"),
       ));
+      if (editingBot === i) item.append(botEditForm(ch, i));
       host.append(item);
     });
   }
 
-  // ── ClassicBot Channels (read-only; created dynamically via /start /stop) ──
+  function botEditForm(ch, i) {
+    ch.access = ch.access || { mode: "locked", allowed_users: [] };
+    ch.access.allowed_users = ch.access.allowed_users || [];
+    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" });
+    box.append(
+      el("div", { class: "grid2" },
+        el("div", {}, el("label", {}, t("accessMode"), impact("fleet")), fMode),
+        el("div", {}, el("label", {}, t("allowedUsers"), impact("fleet")), chipList(users, null, "user id"))),
+      el("div", { class: "actions" },
+        el("button", { class: "primary sm", onclick: async () => {
+          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),
+    );
+    return box;
+  }
+
+  // ── ClassicBot Channels ──
+  let editingClassic = null;
+  function classicRuntime(instanceName) {
+    const live = state.classicLive[instanceName] || {};
+    const status = live.status || state.classicStatus[instanceName] || "stopped";
+    const execution = status === "paused" ? "paused" : (live.state || status);
+    return { status, execution };
+  }
+  function classicEditForm(c) {
+    const box = el("div", { class: "edit" });
+    const classicDefaults = state.classic?.defaults || {};
+    const fleetDefaults = state.fleet?.defaults || {};
+    const inheritedBackend = classicDefaults.backend || fleetDefaults.backend || "claude-code";
+    const inheritedModel = classicDefaults.model || fleetDefaults.model || "";
+    const inheritedAutoPause = classicDefaults.auto_pause_after ?? fleetDefaults.auto_pause_after ?? 0;
+    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 fCollab = el("input", { type: "checkbox" }); fCollab.checked = !!c.collab;
+    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"));
+    const validate = () => {
+      const autoValue = Number(auto.input.value);
+      const contextValue = Number(fContext.value);
+      const validAuto = setValidation(auto.input, autoFeedback, !auto.toggle.checked && (!Number.isFinite(autoValue) || autoValue < 0) ? "Must be 0 or greater" : "");
+      const validContext = setValidation(fContext, contextFeedback, !Number.isInteger(contextValue) || contextValue < 0 ? "Must be a non-negative integer" : "");
+      saveBtn.disabled = !(validAuto && validContext);
+      return !saveBtn.disabled;
+    };
+    for (const input of [fBackend, fModel, auto.input, auto.toggle, fCollab, fContext]) {
+      input.addEventListener("input", validate); input.addEventListener("change", validate);
+    }
+    saveBtn.onclick = () => {
+      if (!validate()) return;
+      const patch = {
+        backend: fBackend.value,
+        model: fModel.value.trim() || null,
+        auto_pause_after: auto.toggle.checked ? null : Number(auto.input.value),
+        collab: fCollab.checked,
+        context_lines: Number(fContext.value),
+      };
+      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;
+      stageChange(`classic:${c.key}`, {
+        label: `Update ${c.name || c.instanceName}`,
+        impact: "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", { 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"))),
+    );
+    validate();
+    return box;
+  }
   function renderClassic() {
     const host = $("classicList"); if (!host) return; host.innerHTML = "";
-    const chans = Object.values(state.classic?.channels || {});
+    const chans = Object.entries(state.classic?.channels || {}).map(([key, channel]) => ({ key, ...channel }));
     if (!chans.length) { host.className = "card empty"; host.textContent = t("noClassic"); return; }
     const filter = ($("agentSearch")?.value || "").trim().toLowerCase();
     let list = chans;
@@ -429,19 +711,29 @@
     if (!list.length) { host.className = "card empty"; host.textContent = "—"; return; }
     host.className = "card";
     list.sort((a, b) => {
-      const sa = STATUS_ORDER[state.classicStatus[a.instanceName] || "stopped"], sb = STATUS_ORDER[state.classicStatus[b.instanceName] || "stopped"];
+      const sa = STATUS_ORDER[classicRuntime(a.instanceName).status] ?? 9;
+      const sb = STATUS_ORDER[classicRuntime(b.instanceName).status] ?? 9;
       return sa !== sb ? sa - sb : String(a.name || "").localeCompare(String(b.name || ""));
     });
     for (const c of list) {
-      const st = state.classicStatus[c.instanceName] || "stopped";
+      const runtime = classicRuntime(c.instanceName);
+      const st = runtime.status;
       const adapter = c.adapterId || "discord";
-      host.append(el("div", { class: "item" }, el("div", { class: "item-row" },
-        el("span", { class: "dot " + st, title: STATUS_TEXT[st] || st }),
+      const item = el("div", { class: "item" });
+      item.append(el("div", { class: "item-row" },
+        el("span", { class: "dot " + runtime.execution, title: EXECUTION_TEXT[runtime.execution] || runtime.execution }),
         el("span", { class: "name", title: c.instanceName || "" }, c.name || c.instanceName || "?"),
-        el("span", { class: "sub", style: "margin:0" }, c.backend || state.classic?.defaults?.backend || "claude-code"),
+        el("span", { class: "sub", style: "margin:0" }, c.backend || state.classic?.defaults?.backend || state.fleet?.defaults?.backend || "claude-code"),
         el("span", { class: "tag" + (adapter !== "discord" ? " persona" : "") }, adapter),
         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")),
+        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);
     }
   }
 
@@ -486,33 +778,106 @@
     state.fleet.defaults = state.fleet.defaults || {};
     state.classic.defaults = state.classic.defaults || {};
     const d = state.fleet.defaults, c = state.classic.defaults;
+    const hang = d.hang_detector || {};
+    const startup = d.startup || {};
     const primary = channels()[0];
     if (primary) primary.access = primary.access || { mode: "locked", allowed_users: [] };
     const allowedUsers = primary ? (primary.access.allowed_users = primary.access.allowed_users || []) : [];
     c.admin_users = c.admin_users || []; c.allowed_guilds = c.allowed_guilds || [];
 
     const fBackend = select(d.backend || "claude-code", BACKENDS);
+    const fClassicBackend = select(c.backend || d.backend || "claude-code", BACKENDS.filter(value => value !== "gemini-cli"));
     const fModel = el("input", { type: "text", value: d.model || "", placeholder: "e.g. claude-opus-4-8" });
+    const fAgentMode = select(d.agent_mode || "mcp", ["mcp", "cli"]);
+    const fToolSet = select(d.tool_set || "full", ["full", "standard", "minimal"]);
+    const fLogLevel = select(d.log_level || "info", ["trace", "debug", "info", "warn", "error"]);
     const fLocale = el("select");
+    const fAutoPause = el("input", { type: "number", min: "0", step: "1", value: d.auto_pause_after ?? 0, placeholder: "0 = disabled" });
+    const fHangEnabled = el("input", { type: "checkbox" }); fHangEnabled.checked = hang.enabled !== false;
+    const fHangTimeout = el("input", { type: "number", min: "0.1", step: "0.5", value: hang.timeout_minutes ?? 15 });
+    const fConcurrency = el("input", { type: "number", min: "1", max: "20", step: "1", value: startup.concurrency ?? 10 });
+    const fStagger = el("input", { type: "number", min: "0", max: "30000", step: "100", value: startup.stagger_delay_ms ?? 500 });
     [["en", "English"], ["zh-TW", "繁體中文 (zh-TW)"]].forEach(([v, lbl]) => { const o = el("option", {}, lbl); o.value = v; if ((d.locale || "") === v) o.selected = true; fLocale.append(o); });
     const msg = el("span", { class: "msg" });
+    const autoFeedback = el("div", { class: "feedback" });
+    const hangFeedback = el("div", { class: "feedback" });
+    const concurrencyFeedback = el("div", { class: "feedback" });
+    const staggerFeedback = el("div", { class: "feedback" });
+    const saveBtn = el("button", { class: "primary" }, t("save"));
+    const validate = () => {
+      const auto = Number(fAutoPause.value), timeout = Number(fHangTimeout.value);
+      const concurrency = Number(fConcurrency.value), stagger = Number(fStagger.value);
+      const validAuto = setValidation(fAutoPause, autoFeedback, !Number.isFinite(auto) || auto < 0 ? "Must be 0 or greater" : "");
+      const validHang = setValidation(fHangTimeout, hangFeedback, !Number.isFinite(timeout) || timeout <= 0 ? "Must be greater than 0" : "");
+      const validConcurrency = setValidation(fConcurrency, concurrencyFeedback, !Number.isInteger(concurrency) || concurrency < 1 || concurrency > 20 ? "Must be an integer from 1 to 20" : "", concurrency > 4 ? "May exceed CPU capacity on smaller hosts" : "");
+      const validStagger = setValidation(fStagger, staggerFeedback, !Number.isFinite(stagger) || stagger < 0 || stagger > 30000 ? "Must be between 0 and 30000" : "", stagger < 100 ? "Very low values can cause startup spikes" : "");
+      saveBtn.disabled = !(validAuto && validHang && validConcurrency && validStagger);
+      return !saveBtn.disabled;
+    };
+    for (const input of [fAutoPause, fHangTimeout, fConcurrency, fStagger]) {
+      input.addEventListener("input", validate); input.addEventListener("change", validate);
+    }
+    saveBtn.textContent = "Review changes";
+    saveBtn.onclick = () => {
+      if (!validate()) return;
+      const defaultsPatch = {
+        backend: fBackend.value,
+        model: fModel.value || undefined,
+        locale: fLocale.value,
+        auto_pause_after: Number(fAutoPause.value),
+        agent_mode: fAgentMode.value,
+        tool_set: fToolSet.value,
+        log_level: fLogLevel.value,
+        hang_detector: { enabled: fHangEnabled.checked, timeout_minutes: Number(fHangTimeout.value) },
+        startup: { concurrency: Number(fConcurrency.value), stagger_delay_ms: Number(fStagger.value) },
+      };
+      const classicPatch = { backend: fClassicBackend.value, admin_users: c.admin_users, allowed_guilds: c.allowed_guilds };
+      state.fleet.defaults = { ...d, ...defaultsPatch };
+      state.classic.defaults = { ...c, ...classicPatch };
+      stageChange("defaults:fleet", { label: "Update Agent defaults", impact: "instance", apply: () => api("/api/settings/fleet/defaults", { method: "PUT", body: JSON.stringify(defaultsPatch) }) });
+      if (primary) stageChange("connections:primary", { label: "Update primary connection access", impact: "fleet", apply: () => api("/api/settings/fleet/channels", { method: "PUT", body: JSON.stringify(channels()) }) });
+      stageChange("defaults:classic", { label: "Update ClassicBot defaults and access", impact: "fleet", apply: () => api("/api/settings/classic/defaults", { method: "PUT", body: JSON.stringify(classicPatch) }) });
+      msg.innerHTML = `<span class="s">Ready to apply</span>`;
+    };
+
+    const section = (title, open, ...children) => {
+      const details = el("details", { class: "settings-section" }); details.open = open;
+      details.append(el("summary", {}, title), el("div", { class: "section-body" }, ...children));
+      return details;
+    };
     host.append(
-      el("div", { class: "field" }, el("label", {}, t("language")), fLocale),
-      el("div", { class: "field" }, el("label", {}, t("defaultBackend")), fBackend),
-      el("div", { class: "field" }, el("label", {}, t("defaultModel")), fModel),
-      el("div", { class: "field" }, el("label", {}, t("allowedUsers")), chipList(allowedUsers, null, "user id")),
-      el("div", { class: "field" }, el("label", {}, t("classicAdmins")), chipList(c.admin_users, null, "user id")),
-      el("div", { class: "field" }, el("label", {}, t("allowedGuilds")), chipList(c.allowed_guilds, null, "guild id")),
-      el("div", { class: "field" }, el("div", { class: "actions" }, el("button", { class: "primary", onclick: async () => {
-        d.backend = fBackend.value; d.model = fModel.value || undefined; d.locale = fLocale.value;
-        const r1 = await api("/api/settings/fleet/defaults", { method: "PUT", body: JSON.stringify({ backend: d.backend, model: d.model, locale: d.locale }) });
-        let r2 = { ok: true, body: {} };
-        if (primary) r2 = await saveChannels();
-        const r3 = await api("/api/settings/classic/defaults", { method: "PUT", body: JSON.stringify({ backend: c.backend, admin_users: c.admin_users, allowed_guilds: c.allowed_guilds }) });
-        const bad = [r1, r2, r3].find(r => !r.ok);
-        resultMsg(msg, bad || { ok: true, body: { warnings: [...(r1.body?.warnings || []), ...(r3.body?.warnings || [])] } });
-      } }, t("save")), msg)),
+      section("Defaults", true,
+        el("div", { class: "grid2" },
+          el("div", { class: "field" }, el("label", {}, t("language"), impact("now")), fLocale),
+          el("div", { class: "field" }, el("label", {}, t("defaultBackend"), impact("instance")), fBackend),
+          el("div", { class: "field" }, el("label", {}, t("defaultModel"), impact("instance")), fModel),
+          el("div", { class: "field" }, el("label", {}, `${t("autoPause")} (${t("minutes")})`, impact("instance")), fAutoPause, autoFeedback))),
+      section("ClassicBot", true,
+        el("div", { class: "grid2" },
+          el("div", { class: "field" }, el("label", {}, "Classic default backend", impact("instance")), fClassicBackend)),
+        el("div", { class: "field" }, el("strong", {}, "Who can use ClassicBot"),
+          el("div", { class: "grid2" },
+            el("div", {}, el("label", {}, t("classicAdmins"), impact("fleet")), chipList(c.admin_users, null, "user id")),
+            el("div", {}, el("label", {}, t("allowedGuilds"), impact("fleet")), chipList(c.allowed_guilds, null, "guild id"))))),
+      el("div", { class: "advanced-only" },
+      section(t("runtimeResources"), false,
+        el("div", { class: "grid2" },
+          el("div", { class: "field" }, el("label", {}, t("toolSet"), impact("instance")), fToolSet),
+          el("div", { class: "field" }, el("label", {}, t("logLevel"), impact("instance")), fLogLevel),
+          el("div", { class: "field" }, el("label", {}, t("agentMode"), impact("instance")), fAgentMode))),
+      section(t("detection"), false,
+        el("div", { class: "grid2" },
+          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))),
+      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("allowedUsers"), impact("fleet")), chipList(allowedUsers, null, "user id")))),
+      el("div", { class: "field" }, el("div", { class: "actions" }, saveBtn, msg)),
     );
+    validate();
   }
 
   // ── What's New ──
@@ -576,20 +941,25 @@
   }
 
   // ── Load / render ──
-  function renderAll() { renderAgents(); renderClassic(); renderBots(); renderGeneral(); renderWhatsNew(); renderAdvanced(); applyStaticI18n(); }
+  function renderAll() { renderAgents(); renderClassic(); renderBots(); renderGeneral(); renderAdvanced(); applyStaticI18n(); }
   async function reloadLive() {
     const f = await api("/api/fleet");
     state.fleetUp = f.ok;
-    state.live = {}; if (f.ok && f.body?.instances) for (const i of f.body.instances) state.live[i.name] = { status: i.status };
-    // /api/fleet is fleet-config only; classic instance statuses come from the
-    // merged roster (/api/profiles, open GET).
+    state.live = {}; state.classicLive = {};
+    if (f.ok && f.body?.instances) for (const i of f.body.instances) {
+      state.live[i.name] = { status: i.status, state: i.state };
+      if (i.classic) state.classicLive[i.name] = { status: i.status, state: i.state };
+    }
+    // /api/fleet carries live tri-state for Classic instances. Profiles remain
+    // a fallback roster for a daemon that has not yet appeared in live status.
     const pr = await api("/api/profiles");
     state.classicStatus = {}; if (pr.ok && Array.isArray(pr.body)) for (const r of pr.body) state.classicStatus[r.instance_name] = r.status;
     if (f.ok && f.body?.version) { state.version = f.body.version; $("verBadge").textContent = "v" + state.version; }
     renderAgents(); renderBots(); renderClassic();
   }
   async function reload() {
-    const f = await api("/api/settings/fleet");
+    // Forms edit the user-authored config, not defaults-expanded runtime values.
+    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 = "Failed to load config — check the token in the URL."; return; }
     state.fleet = f.body || {};
     const c = await api("/api/settings/classic"); state.classic = c.body || {};
@@ -602,13 +972,22 @@
   $("helpClose").onclick = () => setHelp(false);
   $("helpBackdrop").onclick = () => setHelp(false);
   $("langBtn").onclick = () => { lang = lang === "en" ? "zh-TW" : "en"; localStorage.setItem("agend_lang", lang); renderAll(); };
-  $("verBadge").onclick = () => { const b = $("wnBody"); b.classList.add("open"); $("wnToggle").textContent = t("collapse"); b.scrollIntoView({ behavior: "smooth" }); };
+  $("verBadge").onclick = () => window.open("https://github.com/songsid/AgEnD/releases/latest", "_blank", "noopener");
   $("agentSearch").oninput = () => { renderAgents(); renderClassic(); };
   $("newAgentBtn").onclick = () => { state.newAgentOpen = !state.newAgentOpen; $("newAgentBtn").textContent = state.newAgentOpen ? t("cancel") : t("new"); renderNewAgent(state.newAgentOpen); };
   $("newBotBtn").onclick = () => { state.newBotOpen = !state.newBotOpen; $("newBotBtn").textContent = state.newBotOpen ? t("cancel") : t("add"); renderNewBot(state.newBotOpen); };
   $("advToggle").onclick = () => { const b = $("advBody"); const open = !b.classList.contains("open"); b.classList.toggle("open", open); $("advToggle").textContent = open ? t("collapse") : t("expand"); };
-  $("wnToggle").onclick = () => { const b = $("wnBody"); const open = !b.classList.contains("open"); b.classList.toggle("open", open); $("wnToggle").textContent = open ? t("collapse") : t("expand"); };
-  $("reloadBtn").onclick = async () => { const r = await api("/api/settings/reload", { method: "POST" }); const b = $("banner"); b.style.display = "block"; b.style.background = "#ecfdf5"; b.style.color = "var(--green)"; b.textContent = r.ok ? "✓ Reload signal sent — instances reconciling." : "Reload failed."; setTimeout(() => b.style.display = "none", 4000); setTimeout(reloadLive, 1500); };
+  const advancedEnabled = localStorage.getItem("agend_settings_advanced") === "true";
+  document.body.classList.toggle("show-advanced", advancedEnabled);
+  $("advancedToggle").textContent = advancedEnabled ? "Hide advanced" : "Show advanced";
+  $("advancedToggle").onclick = () => {
+    const enabled = !document.body.classList.contains("show-advanced");
+    document.body.classList.toggle("show-advanced", enabled);
+    localStorage.setItem("agend_settings_advanced", String(enabled));
+    $("advancedToggle").textContent = enabled ? "Hide advanced" : "Show advanced";
+  };
+  $("applyChanges").onclick = applyPendingChanges;
+  $("discardChanges").onclick = async () => { state.pending.clear(); updatePendingBar(); await reload(); };
 
   reload();
 })();