@songsid/agend 2.3.1 → 2.3.2-beta.10

package/dist/ui/settings-web-authority.js

@@ -1,7 +1,7 @@
 // #1939 S2a: Settings → Web → Web authority — whether a signed-in admin's web messages carry their account's authority
 // in delivery receipts (docs/design/1939-verified-web-sessions.md §0, §0.1, §3, §10): the server switch (on by default),
 // "Only this computer can authorize", how long a session's authorization lasts, the sessions authorized now, and "Revoke
-// web authority". Changes go through Review changes → Apply like every Settings edit, and apply at once (§0.1: none of
+// web authority". #2347: an edit is unsaved at once and saved by the Settings bar's Save like every Settings edit, and applies at once (§0.1: none of
 // them grants anything by itself — a session still needs its account's Confirm in Discord or Telegram).
 import { html, useEffect, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
@@ -9,8 +9,9 @@ import { useTypedText } from "/assets/text-undo.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { api } from "./settings-confirm.js";
-import { Feedback } from "./settings-dialogs.js";
-import { DEFAULT_SCHEMA, impactOf } from "./settings-model.js";
+import { Feedback, InEffect } from "./settings-dialogs.js";
+import { DEFAULT_SCHEMA, impactOf, sameValue } from "./settings-model.js";
+import { editsOf, keepDraft, syncStage } from "./settings-draft.js";
 import { resetWebAuthorization } from "/assets/web-authorize.js";
 import "./settings-strings.js";
 
@@ -24,12 +25,14 @@ export function verifiedAuthorityBody(original, f) {
   if (f.hours !== original.hours) out.max_session_hours = f.hours === null ? null : f.hours;
   // #2453 (§0.2): off by default; turning it on is confirmed in a General or on the host.
   if (f.namedLink !== original.namedLink) out.named_link = f.namedLink ? true : null;
+  // §0.3: off by default (the user's decision); turning it on is confirmed in a General or on the host.
+  if (f.quickLink !== original.quickLink) out.quick_link = f.quickLink ? true : null;
   return Object.keys(out).length ? out : null;
 }
 
 export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   const [overview, setOverview] = useState(null), [failed, setFailed] = useState(false);
-  const [original, setOriginal] = useState(null), [f, setF] = useState(null), [msg, setMsg] = useState(null);
+  const [original, setOriginal] = useState(null), [f, setF] = useState(null);
   // #2342: the hours box keeps what was typed ("01", "1.50"; its undo history); the form gets the number.
   const [hoursText, onHoursText] = useTypedText(f ? f.hours : null, (v) => (v.trim() === "" ? null : Number(v)));
   const load = async () => {
@@ -42,12 +45,24 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
     if (!o || typeof o !== "object" || !o.state || !o.hours || !Array.isArray(o.lanHosts) || !Array.isArray(o.authorized)) { setFailed(true); return; }
     const c = o.configured || {};
     const orig = { enabled: c.enabled !== false, loopbackOnly: c.loopback_only === true, hours: typeof c.max_session_hours === "number" ? c.max_session_hours : null,
-      namedLink: c.named_link === true };
+      namedLink: c.named_link === true, quickLink: c.quick_link === true };
     setOverview(o); setFailed(false);
     setOriginal((prev) => prev || orig);
-    setF((prev) => prev || { ...orig });
+    // #2347: a draft kept from before this card was last shown (still unsaved) comes back over what is saved now — only
+    // its edited fields (#2367 review: a field never touched follows the configuration, another admin's change too).
+    setF((prev) => prev || { ...orig, ...((ctx.drafts && ctx.drafts.get("verified_authority")) || {}) });
   };
   useEffect(() => { load(); }, []);
+  // #2347: every edit is unsaved at once — kept as the draft and staged (an invalid hours box: Save waits for it).
+  useEffect(() => {
+    if (!f || !original || !overview || disabled) return;
+    keepDraft(ctx, "verified_authority", editsOf(f, original), f);
+    const bad = f.hours !== null && (!Number.isFinite(f.hours) || f.hours < overview.hours.min || f.hours > overview.hours.max);
+    if (bad) { syncStage(ctx, "verified_authority", { label: tn("vaTitle"), invalid: tn("vaHoursRange"), section: "access", target: "#vaHours" }); return; }
+    const body = verifiedAuthorityBody(original, f);
+    syncStage(ctx, "verified_authority", body ? { label: tn("vaTitle"), count: Object.keys(body).length,
+      impact: impactOf(ctx.schema || DEFAULT_SCHEMA, "web.verified_authority"), request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } } : null);
+  }, [f, original, overview]);
   const card = (body) => html`<section class="card s-web-authority"><h3>${tn("vaTitle")}</h3><p class="note">${tn("vaHint")}</p>${body}</section>`;
   if (failed) return card(html`<p class="note" role="status">${tn("vaLoadFailed")} <button type="button" class="btn btn-sm" onClick=${load}>${t("app.retry")}</button></p>`);
   if (!overview || !f) return card(html`<p class="note">${t("app.loading")}</p>`);
@@ -58,13 +73,7 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   const warnHosts = !f.loopbackOnly && overview.lanHosts.length > 0;
   const when = (ms) => new Date(ms).toLocaleString();
 
-  const review = () => {
-    if (hoursError) return;
-    const body = verifiedAuthorityBody(original, f);
-    if (body) ctx.stage("verified_authority", { label: tn("vaTitle"), impact: impactOf(ctx.schema || DEFAULT_SCHEMA, "web.verified_authority"), request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } });
-    else if (staged.has("verified_authority")) ctx.unstage("verified_authority");
-    setMsg(tn("readyApply"));
-  };
+  const fc = (cls, key) => `${cls}${!sameValue(f[key], original[key]) ? " s-dirty" : ""}`;
   const revoke = async () => {
     const yes = await confirmDialog({ title: tn("vaRevokeTitle"), message: tn("vaRevokeConfirm"), confirmLabel: tn("vaRevoke"), danger: true });
     if (!yes) return;
@@ -76,24 +85,26 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
 
   return card(html`<fieldset class="s-va-fields" disabled=${disabled}>
       ${stuckOff ? html`<p class="note s-va-warn" role="status" id="vaStuckOff">${tn("vaStuckOff")}</p>` : null}
-      <label class="check"><input id="vaEnabled" type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /><span>${tn("vaEnabled")}</span></label>
+      <label class=${fc("check", "enabled")}><input id="vaEnabled" type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /><span>${tn("vaEnabled")}</span></label>
       <p class="note">${tn("vaEnabledHint")}</p>
-      <label class="check"><input id="vaLoopbackOnly" type="checkbox" checked=${f.loopbackOnly} onChange=${(e) => set({ loopbackOnly: e.target.checked })} /><span>${tn("vaLoopbackOnly")}</span></label>
+      <label class=${fc("check", "loopbackOnly")}><input id="vaLoopbackOnly" type="checkbox" checked=${f.loopbackOnly} onChange=${(e) => set({ loopbackOnly: e.target.checked })} /><span>${tn("vaLoopbackOnly")}</span></label>
       <p class="note">${tn("vaLoopbackOnlyHint")}</p>
       ${warnHosts ? html`<p class="note s-va-warn" role="status" id="vaLanWarning">${tn("vaLanWarning", overview.lanHosts.join(", "))}</p>` : null}
-      ${overview.namedHost || original.namedLink ? html`<label class="check"><input id="vaNamedLink" type="checkbox" checked=${f.namedLink} onChange=${(e) => set({ namedLink: e.target.checked })} /><span>${tn("vaNamedLink", overview.namedHost || "—")}</span></label>
+      ${overview.namedHost || original.namedLink ? html`<label class=${fc("check", "namedLink")}><input id="vaNamedLink" type="checkbox" checked=${f.namedLink} onChange=${(e) => set({ namedLink: e.target.checked })} /><span>${tn("vaNamedLink", overview.namedHost || "—")}</span></label>
       <p class="note">${tn("vaNamedLinkHint")}</p>` : null}
-      <div class="field"><label for="vaHours">${tn("vaHours", overview.hours.min, overview.hours.max)}</label>
-        <input id="vaHours" type="number" min=${overview.hours.min} max=${overview.hours.max} step="any" placeholder=${tn("defaultHours", overview.hours.default)}
+      ${/* §0.3: always shown — any fleet can open the temporary public link with /web. */ ""}
+      <label class=${fc("check", "quickLink")}><input id="vaQuickLink" type="checkbox" checked=${f.quickLink} onChange=${(e) => set({ quickLink: e.target.checked })} /><span>${tn("vaQuickLink")}</span></label>
+      <p class="note">${tn("vaQuickLinkHint")}</p>
+      <div class=${fc("field", "hours")}><label for="vaHours">${tn("vaHours", overview.hours.min, overview.hours.max)}</label>
+        <input id="vaHours" type="number" min=${overview.hours.min} max=${overview.hours.max} step="any"
           class=${hoursError ? "invalid" : ""} value=${hoursText} onInput=${(e) => set({ hours: onHoursText(e.target.value) })} />
-        <${Feedback} error=${hoursError} /></div>
+        <${Feedback} error=${hoursError} />
+        ${hoursText.trim() === "" ? html`<${InEffect} text=${tn("hoursValue", overview.hours.default)} />` : null}</div>
       <h4>${tn("vaSessionsTitle")}</h4>
       ${overview.authorized.length
         ? html`<ul class="s-va-sessions" id="vaSessions">${overview.authorized.map((a) => html`<li key=${a.handle} data-handle=${a.handle}>
-            <strong>${a.label}</strong> <span class="note">${a.account}</span>${a.named ? html` <span class="note s-va-named">${tn("vaSessionNamed")}</span>` : null}<br /><span class="note">${tn("vaSessionUntil", when(a.authorizedAt), when(a.until))}</span></li>`)}</ul>`
+            <strong>${a.label}</strong> <span class="note">${a.account}</span>${a.named ? html` <span class="note s-va-named">${tn("vaSessionNamed")}</span>` : null}${a.quick ? html` <span class="note s-va-named s-va-quick">${tn("vaSessionQuick")}</span>` : null}<br /><span class="note">${tn("vaSessionUntil", when(a.authorizedAt), when(a.until))}</span></li>`)}</ul>`
         : html`<p class="note" id="vaSessionsNone">${tn("vaSessionsNone")}</p>`}
     </fieldset>
-    <div class="save-row"><button type="button" class="btn btn-primary" id="vaReview" disabled=${disabled || !!hoursError} onClick=${review}>${tn("vaReview")}</button>
-      <button type="button" class="btn btn-danger" id="vaRevoke" disabled=${disabled} onClick=${revoke}>${tn("vaRevoke")}</button>
-      ${msg ? html`<span class="note" role="status">${msg}</span>` : null}</div>`);
+    <div class="save-row"><button type="button" class="btn btn-danger" id="vaRevoke" disabled=${disabled} onClick=${revoke}>${tn("vaRevoke")}</button></div>`);
 }

package/dist/ui/shared/app-i18n.js

@@ -51,6 +51,12 @@ export function setLang(next, opts = {}) {
 }
 export function onLang(fn) { listeners.add(fn); return () => listeners.delete(fn); }
 
+/** #2347: a string in a given language (settings search matches the labels of both), English when it has none. */
+export function tIn(language, key) {
+  const table = tables[language] || tables.en;
+  return table[key] ?? tables.en[key] ?? key;
+}
+
 /** "{0} is working…" with its values filled in. Text only: callers render it as text, never as markup. */
 export function t(key, ...values) {
   let s = tables[current][key] ?? tables.en[key] ?? key;
@@ -87,14 +93,19 @@ register("app", {
     opWriting: "Applying settings… {0}/{1}", opWaiting: "Settings: waiting for confirmation in chat", opApplying: "Applying settings…",
     opDone: "Settings applied", opRestart: "Settings saved — AgEnD needs a restart to use them", opPartial: "Some settings were not applied",
     opFailed: "Settings were not applied", openSettings: "Open Settings",
+    restartWaiting: "{0} saved change(s) take effect after AgEnD restarts", restartNow: "Restart now", restartLater: "Later",
+    restartConfirm: "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.",
+    restartOnHost: "Run agend restart on the host to use them.",
+    restartRefused: "Restart refused: {0}",
     pendingSent: "Sent for confirmation — a fleet admin confirms it in chat.",
     pendingSelfSent: "Confirmed by your account (this browser is web-verified) — applying.",
     needsNav: "Needs you", needsTab: "Needs you", needsCount: "{0} waiting",
     // #2293: global search — chats, cross-instance messages and tasks (not the sidebar's filter of agents).
     search: "Search", searchTitle: "Search chats, messages between agents and tasks ({0})",
     confirmTitle: "Please confirm", confirmOk: "Continue", cancel: "Cancel",
+    sidePanelLeave: "Leave {0} without saving? Your changes there will be lost.", sidePanelDiscard: "Discard changes",
     // The server's own wording (src/locale.ts needs.reason.*), so the web says what Discord says.
-    needs_reason_hang: "Not responding", needs_reason_exited: "Exited", needs_reason_assist: "Waiting at its terminal", needs_reason_permission: "Permission needed", needs_reason_dangerous_command: "Dangerous command waiting", needs_reason_login: "Sign-in needed", needs_reason_dialog: "Waiting at a dialog", needs_reason_terminal_input: "May be waiting for input", needs_reason_auth_paused: "Paused: sign-in needed", needs_reason_crashed: "Crashed", needs_reason_delivery_uncertain: "Could not confirm delivery", needs_reason_delivery_failed: "Delivery failed", needs_reason_task_review: "Waiting for your confirmation", needs_reason_task_blocked: "Blocked: asks you",
+    needs_reason_hang: "Not responding", needs_reason_exited: "Exited", needs_reason_assist: "Waiting at its terminal", needs_reason_permission: "Permission needed", needs_reason_dangerous_command: "Dangerous command waiting", needs_reason_login: "Sign-in needed", needs_reason_dialog: "Waiting at a dialog", needs_reason_terminal_input: "May be waiting for input", needs_reason_auth_paused: "Paused: sign-in needed", needs_reason_backend_signin: "Backend sign-in needed", needs_reason_crashed: "Crashed", needs_reason_delivery_uncertain: "Could not confirm delivery", needs_reason_delivery_failed: "Delivery failed", needs_reason_task_review: "Waiting for your confirmation", needs_reason_task_blocked: "Blocked: asks you",
   },
   "zh-TW": {
     brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance", newAgent: "新增 Agent",
@@ -124,11 +135,16 @@ register("app", {
     opWriting: "正在套用設定… {0}/{1}", opWaiting: "設定：等待在聊天中確認", opApplying: "正在套用設定…",
     opDone: "設定已套用", opRestart: "設定已儲存——需要重新啟動 AgEnD 才會生效", opPartial: "部分設定沒有套用",
     opFailed: "設定沒有套用", openSettings: "開啟設定",
+    restartWaiting: "{0} 項已儲存的變更要在 AgEnD 重新啟動後才會生效", restartNow: "立即重新啟動", restartLater: "稍後",
+    restartConfirm: "現在重新啟動 AgEnD？\n\n所有 agent 都會停止再啟動，進行中的工作會被中斷，面板會有最多約一分鐘無法連線。聊天頻道會收到一則通知。",
+    restartOnHost: "請在主機上執行 agend restart 讓它們生效。",
+    restartRefused: "重新啟動被拒絕：{0}",
     pendingSent: "已送出確認——由 fleet 管理員在聊天中確認。",
     pendingSelfSent: "已由你的帳號確認（這個瀏覽器已通過網頁驗證）——套用中。",
     needsNav: "等你處理", needsTab: "待處理", needsCount: "{0} 件待處理",
     search: "搜尋", searchTitle: "搜尋聊天、agent 之間的訊息與任務（{0}）",
     confirmTitle: "請確認", confirmOk: "繼續", cancel: "取消",
-    needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗", needs_reason_task_review: "等你確認", needs_reason_task_blocked: "卡住，在問你",
+    sidePanelLeave: "不儲存就離開「{0}」？你在那裡的修改會遺失。", sidePanelDiscard: "捨棄修改",
+    needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_backend_signin: "後端需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗", needs_reason_task_review: "等你確認", needs_reason_task_blocked: "卡住，在問你",
   },
 });

package/dist/ui/shared/app-nav.js

@@ -5,7 +5,7 @@
 // can no longer land.
 // A panel with work that leaving would lose (Settings' staged changes, §5) sets a leave guard: every navigation of
 // the app asks it first, Back/Forward included (the address bar is put back when it says no).
-import { parseRoute, legacyHashTarget } from "./app-route.js";
+import { parseRoute, legacyHashTarget, legacySettingsTarget } from "./app-route.js";
 import { createStore } from "./app-store.js";
 
 export const navStore = createStore({ route: null, seq: 0 });
@@ -28,7 +28,9 @@ const mayLeave = (route, path) => !guard || guard(route, path) !== false;
 /** Start following the address bar. An old /ui#instance=<name> link becomes /ui/chat/<name> before the first render. */
 export function startRouter(w = window) {
   win = w;
-  const legacy = legacyHashTarget(w.location.pathname, w.location.hash);
+  let legacy = legacyHashTarget(w.location.pathname, w.location.hash) || legacySettingsTarget(w.location.pathname);
+  // An old Settings address with a place of its own (/settings/web#guests) keeps it when its new one names none.
+  if (legacy && w.location.hash && !legacy.includes("#") && legacySettingsTarget(w.location.pathname)) legacy += w.location.hash;
   if (legacy) w.history.replaceState(null, "", legacy);
   here = w.location.pathname + w.location.search;
   navStore.set({ route: parseRoute(w.location.pathname), seq: 1 });
@@ -44,12 +46,15 @@ export function startRouter(w = window) {
 
 /** Go to `path`. A path that is not a route of the app is a full load. `force` skips the leave guard (it said yes). */
 export function navigate(path, opts = {}) {
-  const url = new URL(path, win.location.href);
+  let url = new URL(path, win.location.href);
+  // #2347: an old Settings address goes to its section's new one.
+  const moved = url.origin === win.location.origin ? legacySettingsTarget(url.pathname) : null;
+  if (moved) { const hash = url.hash; url = new URL(moved, win.location.href); if (!url.hash && hash) url.hash = hash; }
   const route = parseRoute(url.pathname);
   if (!route || url.origin !== win.location.origin) { win.location.assign(url.href); return; }
   if (!opts.force && !mayLeave(route, url.pathname + url.search)) return;
-  if (url.pathname + url.search !== win.location.pathname + win.location.search) {
-    win.history[opts.replace ? "replaceState" : "pushState"](null, "", url.pathname + url.search);
+  if (url.pathname + url.search !== win.location.pathname + win.location.search || (url.hash && url.hash !== win.location.hash)) {
+    win.history[opts.replace ? "replaceState" : "pushState"](null, "", url.pathname + url.search + url.hash);
   }
   here = url.pathname + url.search;
   navStore.set(s => ({ route, seq: s.seq + 1 }));

package/dist/ui/shared/app-prefs.js

@@ -81,6 +81,16 @@ const inflight = new Map();    // key → writes sent and not answered yet
 let flushTimer = null;
 let writes = Promise.resolve();   // one write at a time, in the order they were made
 const listeners = new Set();
+// #2347: the "You" group's preferences (Settings → Preferences, Look) are saved by the Settings bar's Save like
+// every Settings change. While Settings is open (holdPrefs), a choice there is shown on this page at once (cached, and
+// this page's own in prefInForce) but not sent: `held` keeps it until savePrefsHeld sends them all, or discardHeldPrefs
+// puts back what the host has (the same path as another device's change: apply and onPrefsChanged).
+// Only keys Settings itself changes (a card's own size, card.sizeByInstance, is set from the card, outside Settings).
+export const HELD_KEYS = Object.freeze(new Set(["theme", "lang", "names.primary", "preview.optIn", "fx.show", "color.show", "color.off", "card.size"]));
+let holding = 0;
+const held = new Map();        // key → value chosen in Settings, shown here, not saved yet
+const heldFrom = new Map();    // key → its cached form before it was held (a choice back to it is no change)
+const heldListeners = new Set();
 // #2193: whether the signed-in person has a personal effect slot chosen (their fx.* keys: in the page's data-prefs and
 // in every host read, never in this host cache). The effects runtime is loaded only when there is something to play.
 const ownerEffectsIn = (values) => !!values && OWNER_EFFECT_PREF_KEYS.some((k) => own(values, k) && values[k] != null && values[k] !== "");
@@ -141,6 +151,7 @@ function take(body) {
  */
 export function savePref(key, value) {
   if (!hostKey(key)) return;
+  if (holding && HELD_KEYS.has(key)) { hold(key, value); return; }
   cache(key, value);
   if (!prefsWritable()) return;
   pending.set(key, value);
@@ -149,6 +160,72 @@ export function savePref(key, value) {
   flushTimer = setTimeout(flush, 400);
 }
 
+function hold(key, value) {
+  const k = SYNCED[key];
+  // What was in force before, as cached: never read back from this browser's copy, which the caller may have written
+  // already (theme.js stores the theme as it sets it).
+  if (!heldFrom.has(key)) { const f = prefInForce(key); heldFrom.set(key, f ? (f.value == null ? null : k.toLocal(f.value)) : readLocal(k.ls)); }
+  cache(key, value);
+  if ((value == null ? null : k.toLocal(value)) === heldFrom.get(key)) {          // back to what it was: no change
+    held.delete(key); heldFrom.delete(key);
+    if (!pending.has(key) && !inflight.has(key)) mine.delete(key);
+  } else { held.set(key, value); mine.set(key, value); }
+  notifyHeld();
+}
+function notifyHeld() { for (const fn of [...heldListeners]) { try { fn(held.size); } catch { /* the rest still hear */ } } }
+
+/**
+ * #2347: Settings is open — a "You" preference chosen now is held (shown, not saved) until savePrefsHeld or
+ * discardHeldPrefs. Returns the release; held choices left when the last hold goes (Settings closed without either) are
+ * put back.
+ */
+export function holdPrefs() {
+  holding++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    holding--;
+    // A panel shown again at once (a language switch remounts it) holds again before this runs.
+    setTimeout(() => { if (!holding && held.size) discardHeldPrefs(); }, 0);
+  };
+}
+/** How many "You" preferences are chosen and not saved yet. */
+export function heldPrefsCount() { return held.size; }
+/** Called with that count whenever it changes. Returns the unsubscribe. */
+export function onHeldPrefs(fn) { heldListeners.add(fn); return () => heldListeners.delete(fn); }
+/**
+ * Save every held choice (one write). Resolves when it has been answered; rejects when the host did not take it (what
+ * the host has is shown again). Not writable (the public link): this browser only, as before.
+ */
+export async function savePrefsHeld() {
+  const keys = [...held.keys()];
+  for (const key of keys) { if (prefsWritable()) pending.set(key, held.get(key)); else mine.delete(key); }
+  held.clear(); heldFrom.clear();
+  notifyHeld();
+  if (!keys.length || !prefsWritable()) return;
+  clearTimeout(flushTimer);
+  if ((await flush()) === false) throw new Error("preferences not saved");
+}
+/** Put back what the host has for every held choice, on this page (theme, language, … and every onPrefsChanged reader). */
+export function discardHeldPrefs() {
+  const keys = [...held.keys()];
+  held.clear(); heldFrom.clear();
+  for (const key of keys) if (!pending.has(key) && !inflight.has(key)) mine.delete(key);
+  notifyHeld();
+  if (keys.length) align(keys, { force: true });
+}
+/** Run `fn` with nothing held (a confirmed action, such as Restore defaults, saves at once); its keys are held no more. */
+export function withoutHold(fn) {
+  const h = holding;
+  holding = 0;
+  try { return fn(); } finally {
+    holding = h;
+    for (const key of [...held.keys()]) if (pending.has(key)) { held.delete(key); heldFrom.delete(key); }
+    notifyHeld();
+  }
+}
+
 /** One write. ok: the host took it (its answer is a view; an older one than this page has is not taken). */
 async function post(set, onlyIfUnset) {
   const res = await fetch("/ui/prefs", { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" },
@@ -173,7 +250,7 @@ function flush() {
     for (const k of keys) {
       const n = (inflight.get(k) || 1) - 1;
       if (n) inflight.set(k, n); else inflight.delete(k);
-      if (!n && !pending.has(k)) { mine.delete(k); released.add(k); }
+      if (!n && !pending.has(k) && !held.has(k)) { mine.delete(k); released.add(k); }
     }
     // Each key whose last write this was, and not changed here again since, now shows the newest host view this page
     // has — usually its own value; another device's newer one if that arrived while the write was out (held back then,
@@ -182,6 +259,7 @@ function flush() {
     // the host (a storage that refused the choice) says nothing about the screen.
     if (!ok) await refresh();
     align(released, { force: true });
+    return ok;
   });
   return writes;
 }
@@ -214,7 +292,7 @@ function align(keys, opts = {}) {
   const changed = new Set();
   for (const key of keys) {
     if (!hostKey(key)) continue;
-    if (pending.has(key) || inflight.has(key)) continue;
+    if (pending.has(key) || inflight.has(key) || held.has(key)) continue;
     const k = SYNCED[key];
     const want = own(host, key) ? k.toLocal(host[key]) : null;
     const copyDiffers = readLocal(k.ls) !== want;

package/dist/ui/shared/app-route.js

@@ -1,8 +1,17 @@
 // #1408 §3: the app's routes on the client. The same table as the server's classifier (src/web-shell-routes.ts;
 // a test runs both over one list of cases). Pure: no DOM, no history.
 
-export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "usage", "config"];
-export const SETTINGS_SECTIONS = ["device", "appearance", "agents", "bots", "classic", "general", "web", "advanced"];   // #1604: device first
+// #2347 §10: Config is gone from Fleet — each of its settings has one home in Settings (/ui/fleet/config leads there).
+export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "usage"];
+// #2347: two groups — "You" changes only you or this browser; "Fleet" changes AgEnD for everyone.
+export const SETTINGS_GROUPS = Object.freeze([
+  Object.freeze({ id: "you", sections: Object.freeze(["preferences", "look"]) }),
+  Object.freeze({ id: "fleet", sections: Object.freeze(["agents", "agent-defaults", "chat", "web-dashboard", "access", "advanced"]) }),
+]);
+export const SETTINGS_SECTIONS = Object.freeze(SETTINGS_GROUPS.flatMap((g) => g.sections));
+/** #2347: the sections' names before the regrouping (links and bookmarks keep working) and where each one went. */
+export const LEGACY_SETTINGS = Object.freeze({ device: "preferences", appearance: "look", general: "agent-defaults", bots: "chat", classic: "chat#classicbot", web: "access" });
+const legacySection = (name) => (Object.prototype.hasOwnProperty.call(LEGACY_SETTINGS, name) ? LEGACY_SETTINGS[name] : null);
 const MAX_INSTANCE_NAME = 128;
 const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;
 
@@ -25,7 +34,7 @@ export function parseRoute(pathname) {
   let m = /^\/ui\/fleet\/agent\/([^/]+)$/.exec(pathname);
   if (m) return named("details", m[1]);
   m = /^\/ui\/fleet\/([^/]+)$/.exec(pathname);
-  if (m) return FLEET_TABS.includes(m[1]) ? { panel: "fleet", tab: m[1] } : null;
+  if (m) return FLEET_TABS.includes(m[1]) ? { panel: "fleet", tab: m[1] } : m[1] === "config" ? { panel: "settings", section: "agent-defaults" } : null;
   m = /^\/ui\/chat\/([^/]+)$/.exec(pathname);
   if (m) return named("chat", m[1]);
   // #1218: one instance's Log.
@@ -36,7 +45,11 @@ export function parseRoute(pathname) {
   if (m) return named("view", m[1]);
   if (pathname === "/settings") return { panel: "settings", section: "agents" };
   m = /^\/settings\/([^/]+)$/.exec(pathname);
-  if (m) return SETTINGS_SECTIONS.includes(m[1]) ? { panel: "settings", section: m[1] } : null;
+  if (m) {
+    if (SETTINGS_SECTIONS.includes(m[1])) return { panel: "settings", section: m[1] };
+    const moved = legacySection(m[1]);
+    return moved ? { panel: "settings", section: moved.split("#")[0] } : null;
+  }
   return null;
 }
 function named(panel, segment) {
@@ -69,7 +82,28 @@ export function rememberFleetTab(tab) {
   try { localStorage.setItem(LAST_FLEET_TAB_KEY, tab); } catch { /* this page only */ }
 }
 export const NEEDS_PATH = "/ui/needs";
-export function settingsPath(section) { return section && section !== "agents" ? `/settings/${section}` : "/settings"; }
+/** A section's address; an old name gives its new one (and the place in it: `chat#classicbot`). */
+export function settingsPath(name) {
+  const section = (name && legacySection(name)) || name;
+  return section && section !== "agents" ? `/settings/${section}` : "/settings";
+}
+/**
+ * #2347 §7: a section's own address, always with its name (`/settings/agents` too). On a phone `/settings` is the list of
+ * sections, so going *to a section* (the nav, search, a field to fix, "Edit in Settings") uses this; `settingsPath()` is
+ * Settings itself (the app's menu and tabs).
+ */
+export function sectionPath(name) {
+  const path = settingsPath(name);
+  return path === "/settings" ? "/settings/agents" : path;
+}
+/** #2347: an old /settings/<name> address as its new one (with the place in it), or null. */
+export function legacySettingsTarget(pathname) {
+  // #2347 §10: Fleet → Config's settings live in Settings now; its project folders are in Agent defaults.
+  if (pathname === "/ui/fleet/config") return "/settings/agent-defaults#project-roots";
+  const m = /^\/settings\/([^/]+)$/.exec(pathname || "");
+  const moved = m && legacySection(m[1]);
+  return moved ? settingsPath(moved) : null;
+}
 export function routePath(route) {
   if (!route) return "/ui";
   if (route.panel === "fleet") return fleetPath(route.tab);

package/dist/ui/shared/app-shell.js

@@ -4,7 +4,7 @@
 import { html, useEffect, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { Toasts } from "./ui-toast.js";
-import { ConfirmHost } from "./ui-confirm.js";
+import { ConfirmHost, confirmDialog } from "./ui-confirm.js";
 import { ColorDialogHost } from "./identity-color.js";
 import { t, lang, setLang, onLang } from "./app-i18n.js";
 import { appStore, createStore, guestBadge, guestPage, useStore } from "./app-store.js";
@@ -16,7 +16,8 @@ import { onPrefsChanged, savePref } from "./app-prefs.js";
 import { applyPageTheme, pageNow, resolvedMode, themesStore } from "./app-themes.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
 import { InstanceNav, RosterNav, namesStore, setNamesPrimary } from "./instance-nav.js";
-import { UsageRail, usageRailStore } from "./header-tools.js";
+import { usageRailStore } from "./header-tools.js";
+import { RightRail, sidePanelStore } from "./side-panel.js";
 import { OwnerCssKeepBar } from "./owner-css.js";
 import { AgentWidget, fleetBinds, sidebarWidget, sidebarWidgetStore } from "./agent-widget.js";
 
@@ -89,14 +90,17 @@ export function openSearch(preset = {}) {
 }
 /**
  * Ctrl+K (⌘K) anywhere opens search; Ctrl+F (⌘F) in an agent's chat opens it narrowed to that agent — elsewhere the
- * browser's own find stays. Not while another dialog is open (search, open already, has its input focused).
+ * browser's own find stays. Not while another dialog is open (search, open already, has its input focused); a docked
+ * side panel (#2585) is not one.
  */
 export function handleSearchKey(e) {
   if (!searchOffered(true)) return;
   if (e.isComposing || e.altKey || e.shiftKey || !(isMacLike() ? e.metaKey : e.ctrlKey)) return;
   const key = (e.key || "").toLowerCase();
   if (key !== "k" && key !== "f") return;
-  if (typeof document !== "undefined" && document.querySelector("dialog[open]")) return;
+  // #2585: a docked side panel is not modal — the page beside it is in use, so search is too (a result that leaves
+  // the page asks first when the panel holds changes: side-panel.js).
+  if (typeof document !== "undefined" && document.querySelector("dialog[open]:not(.side-panel)")) return;
   const route = navStore.get().route;
   if (key === "f" && !(route && route.panel === "chat" && route.instance)) return;
   e.preventDefault();
@@ -127,7 +131,7 @@ export const sidebarWidthStore = createStore({ width: null });
 function mainBudget() {
   const vw = viewportWidth();
   if (vw < 1200 || typeof document === "undefined") return vw;
-  const rail = document.querySelector(".u-rail");
+  const rail = document.querySelector(".shell > .u-rail, .shell > .side-panel");   // #2585: a docked panel in its place
   if (!rail) return vw;
   const w = Math.round(rail.getBoundingClientRect ? rail.getBoundingClientRect().width : 0) || RAIL_W;
   return vw - w;
@@ -181,11 +185,15 @@ function SidebarResize() {
     // once the page has drawn its change.
     const again = () => afterPaint(applyKeptSidebarWidth);
     const offRail = usageRailStore.subscribe(again);
+    // #2585: a docked panel in the rail's place (it is published on every render of its editor: only its coming and
+    // going changes the room).
+    let docked = !!sidePanelStore.get().panel;
+    const offPanel = sidePanelStore.subscribe(() => { const now = !!sidePanelStore.get().panel; if (now !== docked) { docked = now; again(); } });
     const offNav = navStore.subscribe(again);
     const w = win();
     if (w && typeof w.addEventListener === "function") w.addEventListener("resize", applyKeptSidebarWidth);
     return () => {
-      offRail(); offNav();
+      offRail(); offPanel(); offNav();
       if (w && typeof w.removeEventListener === "function") w.removeEventListener("resize", applyKeptSidebarWidth);
       if (activeDrag) activeDrag.end(false);   // unmounted mid-drag: nothing kept, nothing left behind
     };
@@ -415,13 +423,13 @@ export function DevicePrefs({ labels = false } = {}) {
   useEffect(() => onLang(setL), []);
   return html`<div class=${`prefs${labels ? " labelled" : ""}`}>
     <label class="pref"><${Icon} name="sun" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.theme")}</span>
-      <select value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); savePref("theme", e.target.value); }}>
+      <select id=${labels ? "pref-theme" : undefined} value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); savePref("theme", e.target.value); }}>
         <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>
     <label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
-      <select value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); savePref("lang", e.target.value); }}>
+      <select id=${labels ? "pref-lang" : undefined} value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); savePref("lang", e.target.value); }}>
         <option value="en">English</option><option value="zh-TW">中文</option></select></label>
     <label class="pref"><${Icon} name="user" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.names")}</span>
-      <select value=${names.primary} aria-label=${t("app.names")} onChange=${(e) => setNamesPrimary(e.target.value)}>
+      <select id=${labels ? "pref-names" : undefined} value=${names.primary} aria-label=${t("app.names")} onChange=${(e) => setNamesPrimary(e.target.value)}>
         <option value="nickname">${t("app.namesNickname")}</option><option value="instance">${t("app.namesInstance")}</option></select></label>
   </div>`;
 }
@@ -586,6 +594,60 @@ function OperationLine({ route }) {
     <span>${text}</span> <a class="btn btn-sm" href=${settingsPath()}>${t("app.openSettings")}</a></div>`;
 }
 
+/**
+ * #2347: saved changes that wait for an AgEnD restart, as the server says (GET /api/settings/restart-pending), into
+ * appStore.restartPending ({ keys, jobId } or null). A failed read keeps what was known.
+ */
+export async function refreshRestartPending() {
+  let body;
+  try {
+    const r = await fetch("/api/settings/restart-pending");
+    if (!r.ok) return;
+    body = await r.json();
+  } catch { return; }
+  const keys = body && Array.isArray(body.keys) ? body.keys.filter((k) => typeof k === "string") : [];
+  appStore.set({ restartPending: body && body.pending === true
+    ? { keys, jobId: typeof body.job_id === "string" && body.job_id ? body.job_id : null } : null });
+}
+
+/**
+ * #2347: the app-wide line for saved changes that wait for an AgEnD restart — in every panel, until AgEnD restarts.
+ * Restart now asks first and is never automatic (the leader's default: a Save that restarted on its own once took 33
+ * agents down at once). Asked again whenever a Save or a restart settles. Left to the Save in hand while it runs or offers
+ * its own restart (Settings' card, or the line above in another panel). Over a temporary public link it says so and
+ * offers nothing; with no Settings job to carry the restart (a hand edit), it says how to restart on the host.
+ */
+function RestartLine() {
+  const { restartPending: pending, settingsOp: op, restartRunner } = useStore(appStore);
+  const [later, setLater] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const settled = !op || (!["writing", "posting", "watching"].includes(op.phase) && op.restart !== "busy");
+  useEffect(() => { if (settled) refreshRestartPending(); }, [op ? `${op.id}:${op.phase}:${op.restart}` : "none"]);
+  if (!pending || !settled) return null;
+  if (op && op.job && op.job.targets && op.job.targets.some((r) => r.target === "fleet" && r.status === "restart-required")) return null;
+  const seen = `${pending.jobId}|${pending.keys.join(",")}`;
+  if (later === seen) return null;
+  const canRestart = !!pending.jobId && typeof restartRunner === "function";
+  const restart = async () => {
+    if (!(await confirmDialog({ title: t("app.restartNow"), message: t("app.restartConfirm"), confirmLabel: t("app.restartNow"), danger: true }))) return;
+    setBusy(true);
+    let res;
+    try { res = await restartRunner(pending.jobId); } catch { res = { ok: false }; }
+    setBusy(false);
+    if (res && !res.ok && !res.stale && !res.busy) {
+      toast(t("app.restartRefused", (res.body && res.body.error) || t("app.failed")), false);
+      // #2378 review: a refusal may mean it is done already (restarted from another tab or the host): ask again.
+      refreshRestartPending();
+    }
+  };
+  return html`<div data-trust="status" class="conn restart-line lbar" role="status">
+    <span>${t("app.restartWaiting", Math.max(1, pending.keys.length))}</span>
+    ${pending.keys.length ? html`<span class="muted restart-keys">${pending.keys.join(", ")}</span>` : null}
+    ${!pending.jobId ? html`<span class="muted">${t("app.restartOnHost")}</span>` : null}
+    ${canRestart ? html`<button type="button" class="btn btn-sm btn-primary" disabled=${busy} onClick=${restart}>${t("app.restartNow")}</button>` : null}
+    <button type="button" class="btn btn-sm" onClick=${() => setLater(seen)}>${t("app.restartLater")}</button></div>`;
+}
+
 /**
  * A module loader that can be tried again: a failed attempt is forgotten (the next call loads afresh) and `attempt`
  * counts, so a retry can ask for a new URL — a browser may keep a failed module import cached under the old one.
@@ -729,10 +791,11 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
       <${ConnectionLine} />
       <${StartupLine} />
       ${viewOnly || guest ? null : html`<${OperationLine} route=${nav.route} />`}
+      ${viewOnly || guest ? null : html`<${RestartLine} />`}
       ${viewOnly || guest || !shell.banner ? null : html`<${shell.banner} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
-    ${guest ? null : html`<${UsageRail} route=${nav.route} />`}
+    ${guest ? null : html`<${RightRail} route=${nav.route} />`}
     <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
     ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
     ${viewOnly || guest || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}

package/dist/ui/shared/app-stream.js

@@ -35,7 +35,9 @@
 // #2233: backend_login — a dashboard sign-in started, moved or ended (no details: the page reads its own view).
 // tasks — the task board changed: the card numbers a write touched (SSE only: the board reads again when it is shown).
 // offices — the stored offices changed ({ rev }; SSE only: the Office view reads /ui/offices again).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices"];
+// office_skins — a skin pack was uploaded or deleted ({ rev }; SSE only: the Office view reads /ui/office-skins again).
+// office_acts — the agents' live acts in the Office view changed ({ acts }, #2578; a poll page reads /ui/office-acts).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices", "office_skins", "office_acts"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed