@songsid/agend 2.3.0 → 2.3.2-beta.1

package/dist/ui/search-dialog.js

@@ -11,9 +11,12 @@ import { navigate } from "/assets/app-nav.js";
 import { chatPath, fleetPath } from "/assets/app-route.js";
 import { namesOf, namesStore } from "/assets/instance-nav.js";
 import { Icon } from "/assets/ui-icons.js";
+import { goToSetting, searchSettings, settingLabel } from "./settings-registry.js";
+import "./settings-strings.js";
 
 register("search", {
   en: {
+    settingsGroup: "Settings", settingsWhere: "Settings › {0}",
     label: "Search", placeholder: "Search chats, messages and tasks…", close: "Close", filters: "Filters", filtersOn: "Filters ({0})",
     hint: "Find who you asked about something: a word or two from the chat, a message between agents or a task. Short words (1–2 characters) work too.",
     recent: "Recent searches", clearRecent: "Clear",
@@ -32,6 +35,7 @@ register("search", {
     notFound: "No longer found — it may have been removed.", from: "{0} → {1}", groupCount: "{0} results",
   },
   "zh-TW": {
+    settingsGroup: "設定", settingsWhere: "設定 › {0}",
     label: "搜尋", placeholder: "搜尋聊天、訊息與任務…", close: "關閉", filters: "篩選", filtersOn: "篩選（{0}）",
     hint: "找回某件事當初交給誰：輸入聊天、agent 之間訊息或任務裡的一兩個詞。1–2 個字的短詞也可以。",
     recent: "最近的搜尋", clearRecent: "清除",
@@ -142,6 +146,9 @@ export function jumpToMessage(instance, key, w = window) {
 
 const errorText = (status) => (status === 404 ? t("search.unavailable") : status === 503 ? t("search.busy") : status === 401 ? t("search.signedOut") : t("search.failed"));
 
+/** #2347 §6: how many settings the dialog lists above the messages (the Settings page's own search lists them all). */
+const SETTINGS_SHOWN = 5;
+
 export function SearchDialog({ preset = {}, onClose }) {
   const ref = useRef(null), input = useRef(null), list = useRef(null);
   const app = useStore(appStore);
@@ -211,7 +218,9 @@ export function SearchDialog({ preset = {}, onClose }) {
   const label = (name) => (byName.has(name) ? namesOf(byName.get(name), names.primary).primary : name);
   // While a new query runs, the last answer stays (dimmed) rather than flashing empty.
   const groups = useMemo(() => groupHits(res.hits || []), [res]);
-  const flat = useMemo(() => flatHits(groups), [groups]);
+  // #2347 §6: the settings matching the query, from the page's own registry (no request), above the messages.
+  const settings = useMemo(() => (q.trim() ? searchSettings(q).slice(0, SETTINGS_SHOWN) : []), [q]);
+  const flat = useMemo(() => [...settings.map((entry) => ({ setting: entry })), ...flatHits(groups)], [settings, groups]);
   const activeFilters = (f.instance ? 1 : 0) + (f.team ? 1 : 0) + (f.since !== "any" ? 1 : 0) + (f.sources.length < SOURCES.length ? 1 : 0) + (f.mine ? 1 : 0);
 
   // The active row stays in view.
@@ -222,6 +231,7 @@ export function SearchDialog({ preset = {}, onClose }) {
 
   const open = (hit) => {
     if (!hit) return;
+    if (hit.setting) { rememberSearch(q); onClose(); goToSetting(hit.setting); return; }
     rememberSearch(q); setRecent(readRecent());
     const key = hit.source === "chat" ? messageKeyOf(hit) : null;
     if (key && hit.live) { onClose(); jumpToMessage(hit.instance, key); return; }
@@ -286,31 +296,40 @@ export function SearchDialog({ preset = {}, onClose }) {
       </div>` : null}
       <div class="search-body" ref=${list}>
         ${detail ? html`<${Detail} detail=${detail} q=${q} label=${label} onBack=${() => { setDetail(null); input.current && input.current.focus(); }} onClose=${onClose} />`
-          : html`<${Results} q=${q} res=${res} groups=${groups} active=${active} setActive=${setActive} open=${open} label=${label} filtered=${activeFilters > 0}
+          : html`<${Results} q=${q} res=${res} groups=${groups} settings=${settings} active=${active} setActive=${setActive} open=${open} label=${label} filtered=${activeFilters > 0}
               recent=${recent} pick=${(s) => { recordEdit(input.current); setQ(s); input.current && input.current.focus(); }} clearRecent=${() => { forgetRecent(); setRecent([]); }} />`}
       </div>
       <div class="search-foot" aria-hidden="true">${t("search.keys")}</div>
     </div></dialog>`;
 }
 
-function Results({ q, res, groups, active, setActive, open, label, filtered, recent, pick, clearRecent }) {
+function Results({ q, res, groups, settings = [], active, setActive, open, label, filtered, recent, pick, clearRecent }) {
   if (!q.trim()) {
     return html`<div class="search-empty"><p class="search-hint">${t("search.hint")}</p>
       ${recent.length ? html`<div class="search-recent"><div class="search-recent-head"><span>${t("search.recent")}</span>
         <button type="button" class="chip-btn" onClick=${clearRecent}>${t("search.clearRecent")}</button></div>
         <ul>${recent.map(s => html`<li><button type="button" class="search-recent-item" onClick=${() => pick(s)}><${Icon} name="clock" size=${14} /><span>${s}</span></button></li>`)}</ul></div>` : null}</div>`;
   }
-  if (res.status === "error") return html`<p class="search-status bad" role="alert">${res.error}</p>`;
-  const hits = res.hits || [];
+  // #2383 review: the settings are this page's own — shown (and reachable) whatever the message search answered.
+  const failed = res.status === "error";
+  const hits = failed ? [] : res.hits || [];
   return html`
     ${res.building ? html`<p class="search-note" role="status">${t("search.building")}</p>` : null}
     ${res.limited ? html`<p class="search-note" role="status">${t("search.limited")}</p>` : null}
     ${res.status === "loading" && !hits.length ? html`<p class="search-status" role="status">${t("search.searching")}</p>` : null}
-    ${res.status === "ok" && !hits.length ? html`<p class="search-status" role="status">${filtered ? t("search.noneFiltered") : t("search.none")}</p>` : null}
+    ${failed ? html`<p class="search-status bad" role="alert">${res.error}</p>` : null}
+    ${res.status === "ok" && !hits.length && !settings.length ? html`<p class="search-status" role="status">${filtered ? t("search.noneFiltered") : t("search.none")}</p>` : null}
     <div id="search-results" role="listbox" aria-label=${t("search.results")} class=${`search-results${res.status === "loading" ? " stale" : ""}`}>
+      ${settings.length ? html`<div role="group" class="search-group search-settings" aria-label=${t("search.settingsGroup")}>
+        <div class="search-group-head" aria-hidden="true"><span>${t("search.settingsGroup")}</span><span class="search-count">${t("search.groupCount", settings.length)}</span></div>
+        ${settings.map((entry, i) => html`<div id=${`search-opt-${i}`} role="option" aria-selected=${i === active ? "true" : "false"} class=${`search-row${i === active ? " on" : ""}`}
+          onMouseMove=${i === active ? undefined : () => setActive(i)} onClick=${() => open({ setting: entry })}>
+          <div class="search-row-top"><span class="search-badge setting">${t("search.settingsGroup")}</span><span class="search-who">${t("search.settingsWhere", t(`settings.sec_${entry.section}`))}</span></div>
+          <div class="search-snippet">${settingLabel(entry)}${entry.key ? html` <code class="s-find-key">${entry.key}</code>` : null}</div></div>`)}
+      </div>` : null}
       ${groups.map(g => html`<div role="group" class="search-group" aria-label=${label(g.instance)}>
         <div class="search-group-head" aria-hidden="true"><span>${label(g.instance)}</span><span class="search-count">${t("search.groupCount", g.hits.length)}</span></div>
-        ${g.hits.map(({ hit, index }) => html`<${Row} hit=${hit} index=${index} on=${index === active} label=${label} onHover=${() => setActive(index)} onOpen=${() => open(hit)} />`)}
+        ${g.hits.map(({ hit, index }) => html`<${Row} hit=${hit} index=${index + settings.length} on=${index + settings.length === active} label=${label} onHover=${() => setActive(index + settings.length)} onOpen=${() => open(hit)} />`)}
       </div>`)}
     </div>`;
 }

package/dist/ui/settings-appearance.js

@@ -16,7 +16,8 @@ import { followsReducedMotion, onMotionChange, setFollowsReducedMotion } from "/
 import { CARD_SIZES, cardSizeDefault, cardSizeStore, setCardSizeDefault } from "/assets/identity-card.js";
 import { AgentWidget, checkWidget, fleetBinds, setSidebarWidget, sidebarWidgetRaw, sidebarWidgetStore, widgetProblem } from "/assets/agent-widget.js";
 import { confirmedWrite } from "./settings-confirm.js";
-import { savePref } from "/assets/app-prefs.js";
+import { savePref, withoutHold } from "/assets/app-prefs.js";
+import { DEFAULT_SCHEMA, impactOf, ownChoiceImpact } from "./settings-model.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { colorsOff, defaultPlaces, identityClasses, identityOf, PLACEMENTS, paintIdentity, setColorsOff, setDefaultPlaces, useIdentityColors } from "/assets/identity-color.js";
 import { CardTitle } from "./settings-learn.js";
@@ -52,26 +53,67 @@ function refusal(body) {
   return known.includes(problem) ? tn(`cssError_${problem}`, detail || "") : tn("cssError_other", problem || "?");
 }
 
-export function AppearanceSection() {
+/**
+ * #2347: in Settings, a change here is saved by the bar's Save like every Settings change. The synced preferences are
+ * held by app-prefs while Settings is open (the panel stages them); `stage`/`unstage`/`staged` (the panel's) carry the
+ * rest: this device's own switches and the fleet's Canvas Worker switch. Without them (shown on its own) each control
+ * saves at once, as before.
+ */
+export function AppearanceSection(props = {}) {
+  const part = props.part || "look";
   const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
-  if (publicLink) return html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>`;
+  // #2347 regrouping: Look (the person's own), this device's switches (in Preferences) and the host-wide cards (in Web
+  // dashboard) are drawn where each belongs. None of it is offered over the public link (Look says so).
+  if (publicLink) return part === "look" ? html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>` : null;
+  if (part === "device") return html`<${MotionCard} ...${props} /><${DeviceCard} ...${props} />`;
+  if (part === "dashboard") return html`<${AppIconCard} /><${CardLimitsCard} /><${ExperimentalEffectsCard} ...${props} />`;
   const group = (key) => html`<h2 class="s-ap-group">${tn(key)}</h2>`;
-  return html`${group("groupLook")}<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} /><${AppIconCard} />
+  return html`${group("groupLook")}<${ThemesCard} ...${props} /><${IdentityColorCard} /><${CardSizeCard} />
     ${group("groupLayout")}<${SidebarWidgetCard} />
-    ${group("groupCss")}<${OwnerCssCard} /><${DeviceCard} />
+    ${group("groupCss")}<${OwnerCssCard} />
     ${group("groupMods")}<${ModsCard} /><${EffectsCard} />
-    ${group("groupAdvanced")}<${ExperimentalEffectsCard} /><${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+    <${RestoreDefaultsCard} ...${props} />`;
+}
+
+/** #2347: the staged keys of this device's own switches (Restore defaults sets them, so their staged change goes). */
+const DEVICE_CHOICES = ["device:fx-follow-motion", "device:owner-css-off"];
+/**
+ * #2347: a switch kept on this device only — shown at once; in Settings staged under `key` with what it was before, so
+ * Discard (or leaving Settings) puts that back. Back to that value: no change.
+ */
+function deviceChoice(props, key, label, read, write) {
+  return (value) => {
+    const prev = props.staged && props.staged.get(key);
+    const from = prev ? prev.from : read();
+    write(value);
+    if (!props.stage) return;
+    if (value === from) props.unstage(key);
+    else props.stage(key, { label: tn("youDeviceChoice", label), impact: ownChoiceImpact(props.schema), from, local: { commit: () => {}, revert: () => write(from) } }, true);
+  };
 }
 
 register("experimentalEffects", {
   en: { title: "Experimental: Canvas Worker effects", help: "Enable uploaded Canvas Worker effects. Ambient effects are always available. Saved effects stay intact when this is off.", failed: "Could not change this setting. Try again." },
   "zh-TW": { title: "實驗功能：Canvas Worker 特效", help: "啟用上傳的 Canvas Worker 特效。氛圍特效不受影響；關閉時保留已儲存的特效。", failed: "無法變更此設定，請重試。" },
 });
-function ExperimentalEffectsCard() {
+const CANVAS_WORKER = "fleet:experimental.canvas_worker";
+function ExperimentalEffectsCard(props = {}) {
   const enabled = useCanvasWorker(), [writable, setWritable] = useState(false), [busy, setBusy] = useState(false), [failed, setFailed] = useState(false);
   useEffect(() => { let live = true; Promise.resolve(globalThis.AgendAuth?.trialSession?.()).then(value => { if (live) setWritable(value?.localAdmin === true); }, () => {}); return () => { live = false; }; }, []);
   if (!writable) return null;
+  // #2347: in Settings it is a fleet change like any other — staged here, written by the bar's Save (this page's switch
+  // follows once it applied).
+  const pending = props.staged && props.staged.get(CANVAS_WORKER);
+  const shown = pending ? pending.draft : enabled;
+  const stageIt = (value) => {
+    setFailed(false);
+    if (value === enabled) { props.unstage(CANVAS_WORKER); return; }
+    props.stage(CANVAS_WORKER, { label: t("experimentalEffects.title"), impact: impactOf(props.schema || DEFAULT_SCHEMA, "web.experimental.canvas_worker"), draft: value,
+      request: { method: "PUT", url: "/api/settings/fleet/web", body: { experimental: { canvas_worker: value } } },
+      onResult: (outcome) => { if (outcome && outcome.status === "applied") appStore.set({ canvasWorker: value }); else if (outcome && outcome.status === "failed") setFailed(true); } }, true);
+  };
   const change = async value => {
+    if (props.stage) { stageIt(value); return; }
     setBusy(true); setFailed(false);
     try {
       const result = await confirmedWrite("/api/settings/fleet/web", { method: "PUT", body: { experimental: { canvas_worker: value } }, label: t("experimentalEffects.title") });
@@ -79,7 +121,7 @@ function ExperimentalEffectsCard() {
     } catch { setFailed(true); }
     finally { setBusy(false); }
   };
-  return html`<section class="card s-appearance s-experimental-effects"><label class="check"><input type="checkbox" checked=${enabled} disabled=${busy} onChange=${event => change(event.target.checked)} /><span>${t("experimentalEffects.title")}</span></label><p class="sub">${t("experimentalEffects.help")}</p>${failed ? html`<p role="alert">${t("experimentalEffects.failed")}</p>` : null}</section>`;
+  return html`<section class="card s-appearance s-experimental-effects"><label class="check"><input type="checkbox" checked=${shown} disabled=${busy} onChange=${event => change(event.target.checked)} /><span>${t("experimentalEffects.title")}</span></label><p class="sub">${t("experimentalEffects.help")}</p>${failed ? html`<p role="alert">${t("experimentalEffects.failed")}</p>` : null}</section>`;
 }
 
 /** #2056 B: a sample sidebar row in the host's default colour places, so the choice is seen rather than described. */
@@ -118,23 +160,27 @@ function IdentityColorCard() {
  * fleet's card limits.
  */
 export async function restoreAppearanceDefaults() {
-  setThemesShown(true);
-  setFollowsReducedMotion(false);
-  setCardSizeDefault("m");
-  savePref("card.sizeByInstance", null);
-  setSidebarWidget(null);
-  setDefaultPlaces(null);
-  setColorsOff(false);
-  setOwnerCssOffHere(false);
+  // #2347: a confirmed action — it saves at once, Settings open or not (nothing it sets stays held).
+  withoutHold(() => {
+    setThemesShown(true);
+    setFollowsReducedMotion(false);
+    setCardSizeDefault("m");
+    savePref("card.sizeByInstance", null);
+    setSidebarWidget(null);
+    setDefaultPlaces(null);
+    setColorsOff(false);
+    setOwnerCssOffHere(false);
+  });
   const r = await postJson("/ui/owner-css/restore", { sha: null });
   return r && r.error ? { ok: false, error: r.error } : { ok: true };
 }
-function RestoreDefaultsCard() {
+function RestoreDefaultsCard(props = {}) {
   const [busy, setBusy] = useState(false);
   async function go() {
     if (!(await confirmDialog({ title: tn("restoreTitle"), message: tn("restoreConfirm"), confirmLabel: tn("restoreGo"), danger: true }))) return;
     setBusy(true);
     const r = await restoreAppearanceDefaults();
+    if (props.unstage) for (const key of DEVICE_CHOICES) props.unstage(key);      // saved by the restore itself
     setBusy(false);
     if (r.ok) toast(tn("restoreDone")); else toast(tn("restoreCssFailed", r.error), false);
   }
@@ -148,7 +194,7 @@ function RestoreDefaultsCard() {
 function CardSizeCard() {
   useStore(cardSizeStore);
   const size = cardSizeDefault();
-  return html`<section class="card s-appearance s-synced"><${CardTitle} title=${tn("cardSizeTitle")} topic="cards" />
+  return html`<section class="card s-appearance s-synced s-card-size"><${CardTitle} title=${tn("cardSizeTitle")} topic="cards" />
     <div class="card-size" role="group" aria-label=${tn("cardSizeTitle")}>
       ${CARD_SIZES.map((s) => html`<button key=${s} type="button" class=${`seg-item${s === size ? " active" : ""}`} aria-pressed=${s === size ? "true" : "false"}
         onClick=${() => setCardSizeDefault(s)}>${t(`card.size${s.toUpperCase()}Name`)}</button>`)}
@@ -306,7 +352,7 @@ function CardLimitsCard() {
   };
   useEffect(() => { load(); }, []);
   if (!view) return null;
-  if (view.error) return html`<section class="card s-appearance"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" /><p class="sub">${tn("cardLimitsUnavailable")}</p></section>`;
+  if (view.error) return html`<section class="card s-appearance s-card-limits"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" /><p class="sub">${tn("cardLimitsUnavailable")}</p></section>`;
   const configured = (g, k) => (view.configured && view.configured[g] && typeof view.configured[g][k] === "number" ? view.configured[g][k] : null);
   const save = async () => {
     const body = {};
@@ -345,16 +391,10 @@ function CardLimitsCard() {
 /** #1629 r2 (d): whether this person's screens show agents' themes (and, as they come, effects) — synced. */
 function ThemesCard() {
   const s = useStore(themesStore);
-  // #2117: this device's own switch (not synced): effects play unless it follows the system's reduced-motion setting.
-  const [follow, setFollow] = useState(followsReducedMotion);
-  useEffect(() => onMotionChange(() => setFollow(followsReducedMotion())), []);
-  return html`<section class="card s-appearance s-synced"><${CardTitle} title=${tn("themesTitle")} topic="themes" />
-    <label class="check"><input type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
+  return html`<section class="card s-appearance s-synced s-themes"><${CardTitle} title=${tn("themesTitle")} topic="themes" />
+    <label class="check"><input id="fx-show-themes" type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
       <span>${tn("themesShow")}</span></label>
     <p class="sub">${safeMode() ? tn("themesSafeMode") : tn("themesShowLead")}</p>
-    <label class="check"><input type="checkbox" id="fx-follow-reduced-motion" checked=${follow} onChange=${(e) => setFollowsReducedMotion(e.target.checked)} />
-      <span>${tn("themesFollowMotion")}</span></label>
-    <p class="sub">${tn("themesFollowMotionLead")}</p>
   </section>`;
 }
 
@@ -499,10 +539,23 @@ function OwnerCssCard() {
   </section>`;
 }
 
-function DeviceCard() {
+/** #2117: this device's own switch (not synced): effects play unless it follows the system's reduced-motion setting. */
+function MotionCard(props = {}) {
+  const [follow, setFollow] = useState(followsReducedMotion);
+  useEffect(() => onMotionChange(() => setFollow(followsReducedMotion())), []);
+  const setFollowHere = deviceChoice(props, DEVICE_CHOICES[0], tn("themesFollowMotion"), followsReducedMotion, setFollowsReducedMotion);
+  return html`<section class="card s-appearance s-local s-motion"><h3>${tn("motionTitle")}</h3>
+    <label class="check"><input type="checkbox" id="fx-follow-reduced-motion" checked=${follow} onChange=${(e) => setFollowHere(e.target.checked)} />
+      <span>${tn("themesFollowMotion")}</span></label>
+    <p class="sub">${tn("themesFollowMotionLead")}</p>
+  </section>`;
+}
+
+function DeviceCard(props = {}) {
   const [off, setOff] = useState(ownerCssOffHere());
+  const setOffHere = deviceChoice(props, DEVICE_CHOICES[1], tn("cssDeviceOff"), ownerCssOffHere, (v) => { setOwnerCssOffHere(v); setOff(ownerCssOffHere()); });
   return html`<section class="card s-appearance s-local"><h3>${tn("cssDeviceTitle")}</h3>
-    <label class="check"><input type="checkbox" checked=${off} onChange=${(e) => { setOwnerCssOffHere(e.target.checked); setOff(ownerCssOffHere()); }} />
+    <label class="check"><input id="css-off-here" type="checkbox" checked=${off} onChange=${(e) => setOffHere(e.target.checked)} />
       <span>${tn("cssDeviceOff")}</span></label>
     <p class="sub">${tn("cssSafe")}</p>
   </section>`;

package/dist/ui/settings-apply.js

@@ -13,6 +13,12 @@ import { toast } from "/assets/ui-toast.js";
 import "./settings-strings.js";
 import { api, confirmedWrite, newKey, selfConfirmed } from "./settings-confirm.js";
 
+/**
+ * #2347 (leader's default, for the user to confirm): a Save that needs AgEnD restarted offers Restart now (its card, and
+ * the app-wide banner) and never restarts on its own. true restarts once such a Save settles cleanly.
+ */
+export const AUTO_RESTART_AFTER_SAVE = false;
+
 const WATCH_LIMIT_MS = 10 * 60_000;
 const POST_RETRIES = [1000, 2000, 4000];
 const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
@@ -26,7 +32,8 @@ function view() {
   if (!op) return null;
   return {
     id: op.id, phase: op.phase, error: op.error, job: op.job, lostJob: op.lostJob, restart: op.restart,
-    steps: op.steps.map(({ label, impact, status, error, pendingId, note }) => ({ label, impact, status, error: error || null, pendingId: pendingId || null, ...(note ? { note } : {}) })),
+    // stageKey: which staged change a step is (#2367 review: the panel tells that change's section how it went).
+    steps: op.steps.map(({ label, impact, status, error, pendingId, note, stageKey }) => ({ label, impact, status, error: error || null, pendingId: pendingId || null, ...(note ? { note } : {}), ...(stageKey ? { stageKey } : {}) })),
     leftover: op.leftover,
   };
 }
@@ -199,24 +206,29 @@ async function watch(o, id) {
   const rows = (current && current.targets) || [];
   const failed = rows.some((r) => r.status === "failed"), restart = rows.some((r) => r.status === "restart-required");
   if (!o.lostJob) toast(t(failed ? "settings.applyPartial" : restart ? "settings.applyRestartNeeded" : "settings.changesApplied"), !(failed || restart));
+  if (AUTO_RESTART_AFTER_SAVE && restart && !failed && !o.lostJob && o.restart === "idle") restartFleet();
 }
 
 /**
  * A full AgEnD restart for a job that needs one: its own confirmation (the caller's), its own key, one at a time. The
  * job's fleet row moves to "running" on the server; that job is watched again.
  */
+/** POST /api/settings/restart-fleet for `jobId`, with its own key: { ok, status, body } (a lost answer: status 0). */
+async function postRestart(jobId) {
+  const key = newKey("restart");
+  try {
+    return await api("/api/settings/restart-fleet", { method: "POST", headers: { "Idempotency-Key": key },
+      body: JSON.stringify({ job_id: jobId, confirm: "restart-agend", idempotency_key: key }) });
+  } catch { return { ok: false, status: 0, body: null }; }
+}
+
 export async function restartFleet(forJob) {
   const o = op;
   if (!o || !o.job || o.restart === "busy" || ACTIVE.has(o.phase)) return { ok: false };
   // A confirmation given for one job never restarts for another (the operation was replaced meanwhile).
   if (forJob && (forJob.opId !== o.id || forJob.jobId !== o.job.id)) return { ok: false, stale: true };
   o.restart = "busy"; publish();
-  const key = newKey("restart");
-  let res;
-  try {
-    res = await api("/api/settings/restart-fleet", { method: "POST", headers: { "Idempotency-Key": key },
-      body: JSON.stringify({ job_id: o.job.id, confirm: "restart-agend", idempotency_key: key }) });
-  } catch { res = { ok: false, status: 0, body: null }; }
+  const res = await postRestart(o.job.id);
   if (!mine(o)) return res;
   if (!res.ok) { o.restart = "idle"; publish(); return res; }
   toast(t("settings.restartFleetStarted"));          // when it is accepted; how it ends is said when it settles
@@ -229,6 +241,29 @@ export async function restartFleet(forJob) {
   return res;
 }
 
+/**
+ * #2347: Restart now from the app-wide banner, for the newest Save that needs it (`jobId`, the server's pick). The Save
+ * in hand when it is that job. Otherwise the restart is asked for first, and only once it is accepted does that job
+ * become the operation, so its card and line follow the restart as they follow any other (a refusal leaves the banner
+ * as it was). The caller asked first.
+ */
+export async function restartPendingChanges(jobId) {
+  if (operationActive()) return { ok: false, busy: true };
+  if (op && op.job && op.job.id === jobId) return restartFleet({ opId: op.id, jobId });
+  const res = await postRestart(jobId);
+  if (!res.ok || operationActive()) return res;
+  toast(t("settings.restartFleetStarted"));
+  let fresh = null;
+  try { fresh = await api(`/api/settings/apply/${encodeURIComponent(jobId)}`); } catch { fresh = null; }
+  if (operationActive()) return res;
+  const job = fresh && fresh.ok && fresh.body && fresh.body.id ? fresh.body
+    : { id: jobId, status: "running", targets: [{ target: "fleet", kind: "restart", status: "running" }] };
+  const o = op = { id: ++seq, phase: "watching", error: null, job, lostJob: false, restart: "busy", leftover: [], steps: [] };
+  publish();
+  try { await watch(o, jobId); } finally { if (mine(o)) { o.restart = "idle"; publish(); } }
+  return res;
+}
+
 // Leaving while writes or the POST are still to come would lose them: the browser asks first. Once the job exists,
 // a reload re-attaches nothing but loses nothing either (the job runs on the server).
 if (typeof window !== "undefined") {

package/dist/ui/settings-dialogs.js

@@ -14,6 +14,9 @@ import { api, confirmedWrite, newKey } from "./settings-confirm.js";
 import { adminUserIdError, adminUserIdPattern, botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
 import { DiscordServerPicker } from "./settings-discord.js";
 import { startOperation } from "./settings-apply.js";
+import { goToTarget } from "./settings-registry.js";
+import { sectionPath } from "/assets/app-route.js";
+import { backendLabel } from "/assets/instance-nav.js";
 import "./settings-strings.js";   // its words, wherever a picker of this file is used (#2072: Fleet's create dialog too)
 import { backendChoices, modelChoices, OTHER_MODEL, useBackendRows, useModelCatalog } from "./settings-catalog.js";
 import {
@@ -69,18 +72,45 @@ export function ModelSelect({ value, onChange, disabled, id, backend, instance,
       value=${value} onInput=${(e) => onChange(e.target.value)} />` : null}</div>`;
 }
 export function Impact({ schema, field }) { return html`<span class="impact">${impactText(impactOf(schema, field))}</span>`; }
-export function Label({ text, schema, field, htmlFor }) {
-  return html`<label for=${htmlFor}>${text}${field ? html` <${Impact} schema=${schema} field=${field} />` : null}</label>`;
+export function Label({ text, schema, field, htmlFor, mark }) {
+  return html`<label for=${htmlFor}>${text}${mark ? html` ${mark}` : null}${field ? html` <${Impact} schema=${schema} field=${field} />` : null}</label>`;
 }
+/** #2347 §10: the mark of a value nobody set — what is in effect is the built-in default. */
+export function DefaultMark() {
+  return html`<span class="tag s-default">${tn("defaultMark")}</span>`;
+}
+/** #2347 §10: what an empty field means — the value in effect, in plain text, and where it comes from (the mark, or why). */
+export function InEffect({ text, why }) {
+  return html`<p class="s-effect">${tn("inEffect", text)} ${why ? html`<span class="tag">${why}</span>` : html`<${DefaultMark} />`}</p>`;
+}
+/**
+ * #2347 §10: what an inherited field inherits — its value, marked "default" when nobody set it there either — and a
+ * link to where it is set (Agent defaults; ClassicBot defaults for a room). `from`: { section, target, label }.
+ */
+export function Inherited({ text, builtin, from }) {
+  const go = (e) => { e.preventDefault(); goToTarget(from.section, from.target); };
+  return html`<p class="s-inherited">${tn("inheritedValue", text)}${builtin ? html` <${DefaultMark} />` : null}${from
+    ? html` · <a href=${`${sectionPath(from.section)}${from.target || ""}`} onClick=${go}>${tn(from.label)}</a>` : null}</p>`;
+}
+/** A value as the inherited line says it: on/off, minutes (0 = off), a backend's name; anything else as it is. */
+export function valueText(v, kind) {
+  if (typeof v === "boolean") return tn(v ? "valueOn" : "valueOff");
+  if (kind === "minutes") return Number(v) === 0 ? tn("valueOff") : tn("minutesValue", v);
+  if (kind === "backend") return backendLabel(v);
+  return String(v);
+}
+/** Where an agent's inherited setting is set: Agent defaults, at its field. */
+export const inAgentDefaults = (target) => ({ section: "agent-defaults", target, label: "changeInDefaults" });
 export function Feedback({ error, warning }) {
   if (!error && !warning) return null;
   return html`<p class=${`feedback${error ? " error" : " warning"}`} role=${error ? "alert" : undefined}>${error ? tn(error) : tn(warning)}</p>`;
 }
 /** An override of a default: the control, and "Inherit from defaults" beside it (on: the control shows the default). */
-export function Override({ inherit, onInherit, schema, field, children }) {
+export function Override({ inherit, onInherit, schema, field, inherited, children }) {
   return html`<div class="override">${children}
     <label class="check inherit-row"><input type="checkbox" checked=${inherit} onChange=${(e) => onInherit(e.target.checked)} /><span>${tn("inheritDefault")}</span>
-      ${field ? html`<${Impact} schema=${schema} field=${field} />` : null}</label></div>`;
+      ${field ? html`<${Impact} schema=${schema} field=${field} />` : null}</label>
+    ${inherit && inherited ? html`<${Inherited} ...${inherited} />` : null}</div>`;
 }
 export function Drawer({ title, children, open = false }) {
   return html`<details class="drawer" open=${open}><summary>${title}</summary><div class="drawer-body">${children}</div></details>`;
@@ -253,20 +283,25 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
   };
   // What an override shows while it inherits: the default.
   const shown = (k, own, dflt) => (f.inherit[k] ? dflt : own);
+  // #2347 §10: …and says so — the value, "default" when Agent defaults do not set it either, and where it is set.
+  const dh = defaults.hang_detector || {};
+  const inh = (k, value, target, kind, set = hasOwn(defaults, k)) => ({ text: valueText(value, kind), builtin: !set, from: target ? inAgentDefaults(target) : null });
+  const inheritedBackend = !inst.backend && f.backend === (defaults.backend || "claude-code");
   const L = (text, field, id) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${id} />`;
   return html`<${EditDialog} title=${ctx.shortName(name, inst)} subtitle=${tn("idLine", name)} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${Object.keys(pending()).map((k) => `instance.${k}`)} schema=${schema}>
     <div class="grid2">
       <div class="field">${L(tn("displayName"), "instance.display_name", "ag-dn")}
-        <${Override} inherit=${f.inherit.display_name} onInherit=${setInherit("display_name")}>
+        <${Override} inherit=${f.inherit.display_name} onInherit=${setInherit("display_name")} inherited=${inh("display_name", defaults.display_name || name, null, "", !!defaults.display_name)}>
           <input id="ag-dn" type="text" placeholder=${name} disabled=${f.inherit.display_name} value=${shown("display_name", f.display_name, defaults.display_name || "")} onInput=${(e) => set("display_name")(e.target.value)} /></${Override}></div>
       <div class="field">${L(tn("description"), "instance.description", "ag-desc")}<input id="ag-desc" type="text" value=${f.description} onInput=${(e) => set("description")(e.target.value)} /></div>
-      <div class="field">${L(tn("backend"), "instance.backend", "ag-be")}<${BackendSelect} id="ag-be" value=${f.backend} onChange=${set("backend")} /></div>
+      <div class="field">${L(tn("backend"), "instance.backend", "ag-be")}<${BackendSelect} id="ag-be" value=${f.backend} onChange=${set("backend")} />
+        ${inheritedBackend ? html`<${Inherited} ...${inh("backend", f.backend, "#g-be", "backend")} />` : null}</div>
       <div class="field">${L(tn("model"), "instance.model", "ag-model")}<${ModelSelect} id="ag-model" value=${f.model} onChange=${set("model")}
-        backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("inheritPlaceholder")} /></div>
+        backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("inheritValue", defaults.model || tn("modelCliDefault"))} /></div>
     </div>
     <div class="field">${L(tn("workingDir"), "instance.working_directory", "ag-wd")}<input id="ag-wd" type="text" value=${f.working_directory} onInput=${(e) => set("working_directory")(e.target.value)} /></div>
     <div class="field">${L(`${tn("autoPause")} (${tn("minutes")})`, "instance.auto_pause_after", "ag-auto")}
-      <${Override} inherit=${f.inherit.auto_pause_after} onInherit=${setInherit("auto_pause_after")}>
+      <${Override} inherit=${f.inherit.auto_pause_after} onInherit=${setInherit("auto_pause_after")} inherited=${inh("auto_pause_after", defaults.auto_pause_after ?? 0, "#g-auto", "minutes")}>
         <input id="ag-auto" type="number" min="0" step="1" placeholder=${tn("zeroDisabled")} class=${errors.auto ? "invalid" : ""} disabled=${f.inherit.auto_pause_after}
           value=${shown("auto_pause_after", f.auto_pause_after, String(defaults.auto_pause_after ?? 0))} onInput=${(e) => set("auto_pause_after")(e.target.value)} /></${Override}>
       <${Feedback} error=${errors.auto} /></div>
@@ -274,16 +309,18 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
       <div class="grid2">
         <div class="field">${L(tn("channelBinding"), "instance.topic_id", "ag-ch")}<${Select} id="ag-ch" value=${f.channel_id} onChange=${set("channel_id")} options=${["", ...ids]} /></div>
         <div class="field">${L(`${tn("hangTimeout")} (${tn("minutes")})`, "instance.hang_detector", "ag-hang")}
-          <${Override} inherit=${f.inherit.hang} onInherit=${setInherit("hang")}>
+          <${Override} inherit=${f.inherit.hang} onInherit=${setInherit("hang")}
+            inherited=${inh("hang", dh.timeout_minutes ?? HANG_TIMEOUT_DEFAULT_MINUTES, "#g-hang", "minutes", hasOwn(dh, "timeout_minutes"))}>
             <input id="ag-hang" type="number" min="0.1" step="0.5" class=${errors.hang ? "invalid" : ""} disabled=${f.inherit.hang}
               value=${shown("hang", f.hang, String((defaults.hang_detector && defaults.hang_detector.timeout_minutes) ?? HANG_TIMEOUT_DEFAULT_MINUTES))} onInput=${(e) => set("hang")(e.target.value)} /></${Override}>
           <${Feedback} error=${errors.hang} /></div>
-        ${[["agent_mode", "agentMode", AGENT_MODES, defaults.agent_mode || "mcp"], ["tool_set", "toolSet", TOOL_SETS, toolSetDefault(defaults, inst, name)],
-          ["tool_progress", "toolProgress", TOOL_PROGRESS, defaults.tool_progress ?? "off"],
-          ["cross_instance_visibility", "crossInstanceVisibility", VISIBILITY_MODES, visibilityDefault(defaults)],
-          ["log_level", "logLevel", LOG_LEVELS, defaults.log_level || "info"]].map(([k, label, opts, dflt]) => html`<div key=${k} class="field">
+        ${[["agent_mode", "agentMode", AGENT_MODES, defaults.agent_mode || "mcp", "#g-am"], ["tool_set", "toolSet", TOOL_SETS, toolSetDefault(defaults, inst, name), "#g-ts"],
+          ["tool_progress", "toolProgress", TOOL_PROGRESS, defaults.tool_progress ?? "off", "#g-tp"],
+          ["cross_instance_visibility", "crossInstanceVisibility", VISIBILITY_MODES, visibilityDefault(defaults), "#g-vis"],
+          ["log_level", "logLevel", LOG_LEVELS, defaults.log_level || "info", "#g-ll"]].map(([k, label, opts, dflt, target]) => html`<div key=${k} class="field">
           ${L(tn(label), `instance.${k}`, `ag-${k}`)}
-          <${Override} inherit=${f.inherit[k]} onInherit=${setInherit(k)}>
+          <${Override} inherit=${f.inherit[k]} onInherit=${setInherit(k)}
+            inherited=${inh(k, dflt, target, "", k === "cross_instance_visibility" ? VISIBILITY_MODES.includes(defaults[k]) : hasOwn(defaults, k))}>
             <${Select} id=${`ag-${k}`} value=${shown(k, f[k], dflt)} disabled=${f.inherit[k]} onChange=${set(k)}
               options=${opts.includes(shown(k, f[k], dflt)) || k === "cross_instance_visibility" ? opts : [shown(k, f[k], dflt), ...opts]} /></${Override}>
           ${k === "cross_instance_visibility" ? html`<p class="note">${tn("crossInstanceVisibilityHint")}</p>` : null}</div>`)}
@@ -297,16 +334,17 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
             </select></div>`)}
         </fieldset>
         <div class="field">${L(tn("replyCompletionGuard"), "instance.reply_completion_guard")}
-          <${Override} inherit=${f.inherit.reply_completion_guard} onInherit=${setInherit("reply_completion_guard")}>
+          <${Override} inherit=${f.inherit.reply_completion_guard} onInherit=${setInherit("reply_completion_guard")} inherited=${inh("reply_completion_guard", defaults.reply_completion_guard ?? true, "#g-reply")}>
             <label class="check"><input type="checkbox" disabled=${f.inherit.reply_completion_guard} checked=${shown("reply_completion_guard", f.reply_completion_guard, defaults.reply_completion_guard ?? true)}
               onChange=${(e) => set("reply_completion_guard")(e.target.checked)} /><span>${tn("replyCompletionGuard")}</span></label></${Override}>
           <p class="note">${replyHint(f.backend, f.inherit.agent_mode ? defaults.agent_mode || "mcp" : f.agent_mode, kiroUi)}</p></div>
         <div class="field">${L(tn("lightweight"), "instance.lightweight")}
-          <${Override} inherit=${f.inherit.lightweight} onInherit=${setInherit("lightweight")}>
+          <${Override} inherit=${f.inherit.lightweight} onInherit=${setInherit("lightweight")} inherited=${inh("lightweight", defaults.lightweight ?? false, null)}>
             <label class="check"><input type="checkbox" disabled=${f.inherit.lightweight} checked=${shown("lightweight", f.lightweight, defaults.lightweight ?? false)}
               onChange=${(e) => set("lightweight")(e.target.checked)} /><span>${tn("lightweight")}</span></label></${Override}></div>
         <div class="field">${L(tn("modelFailover"), "instance.model_failover", "ag-fo")}
-          <${Override} inherit=${f.inherit.model_failover} onInherit=${setInherit("model_failover")}>
+          <${Override} inherit=${f.inherit.model_failover} onInherit=${setInherit("model_failover")}
+            inherited=${inh("model_failover", (defaults.model_failover && defaults.model_failover[0]) || tn("modelNone"), null, "", !!(defaults.model_failover && defaults.model_failover.length))}>
             <${ModelSelect} id="ag-fo" disabled=${f.inherit.model_failover} backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("modelNone")}
               value=${shown("model_failover", f.model_failover, (defaults.model_failover && defaults.model_failover[0]) || "")} onChange=${set("model_failover")} /></${Override}>
           <${Feedback} warning=${failoverWarn} /></div>
@@ -642,22 +680,30 @@ export function ClassicDialog({ room, ctx, onClose }) {
     ctx.stageClassic(c, patch);
     onClose();
   };
+  // #2347 §10: what a room inherits, from where — ClassicBot defaults when they set it, else Agent defaults ("default"
+  // when neither does) — with a link there.
+  const roomInh = (k, kind, classicTarget, agentTarget) => {
+    const own = hasOwn(cd, k);
+    return { text: valueText(inherited[k], kind), builtin: !own && !hasOwn(fd, k),
+      from: own ? { section: "chat", target: classicTarget, label: "changeInClassic" } : inAgentDefaults(agentTarget) };
+  };
   const L = (text, field, id) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${id} />`;
   return html`<${EditDialog} title=${c.name || c.instanceName} subtitle=${`${tn("idLine", c.instanceName)} · ${tn(`exec_${runtime.execution}`)}`} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${Object.keys(pending()).map((k) => `classic.${k}`)} schema=${schema}>
     <div class="grid2">
-      <div class="field">${L(tn("backend"), "classic.backend", "cl-be")}<${BackendSelect} id="cl-be" value=${f.backend} onChange=${set("backend")} /></div>
+      <div class="field">${L(tn("backend"), "classic.backend", "cl-be")}<${BackendSelect} id="cl-be" value=${f.backend} onChange=${set("backend")} />
+        ${!c.backend && f.backend === inherited.backend ? html`<${Inherited} ...${roomInh("backend", "backend", "#g-cbe", "#g-be")} />` : null}</div>
       <div class="field">${L(tn("model"), "classic.model", "cl-model")}<${ModelSelect} id="cl-model" value=${f.model} onChange=${set("model")}
-        backend=${f.backend} instance=${c.instanceName} inherit=${inherited.model ? tn("inheritValue", inherited.model) : tn("inheritPlaceholder")} /></div>
+        backend=${f.backend} instance=${c.instanceName} inherit=${tn("inheritValue", inherited.model || tn("modelCliDefault"))} /></div>
       <div class="field">${L(`${tn("autoPause")} (${tn("minutes")})`, "classic.auto_pause_after", "cl-auto")}
-        <${Override} inherit=${f.inherit.auto_pause_after} onInherit=${setInherit("auto_pause_after")}>
+        <${Override} inherit=${f.inherit.auto_pause_after} onInherit=${setInherit("auto_pause_after")} inherited=${roomInh("auto_pause_after", "minutes", "#classicbot", "#g-auto")}>
           <input id="cl-auto" type="number" min="0" step="1" class=${errors.auto ? "invalid" : ""} disabled=${f.inherit.auto_pause_after}
             value=${f.inherit.auto_pause_after ? String(inherited.auto_pause_after) : f.auto_pause_after} onInput=${(e) => set("auto_pause_after")(e.target.value)} /></${Override}>
         <${Feedback} error=${errors.auto} /></div>
       <div class="field">${L(tn("toolProgress"), "classic.tool_progress", "cl-tp")}
-        <${Override} inherit=${f.inherit.tool_progress} onInherit=${setInherit("tool_progress")}>
+        <${Override} inherit=${f.inherit.tool_progress} onInherit=${setInherit("tool_progress")} inherited=${roomInh("tool_progress", "", "#g-ctp", "#g-tp")}>
           <${Select} id="cl-tp" disabled=${f.inherit.tool_progress} value=${f.inherit.tool_progress ? inherited.tool_progress : f.tool_progress} onChange=${set("tool_progress")} options=${TOOL_PROGRESS} /></${Override}></div>
       <div class="field">${L(tn("replyCompletionGuard"), "classic.reply_completion_guard")}
-        <${Override} inherit=${f.inherit.reply_completion_guard} onInherit=${setInherit("reply_completion_guard")}>
+        <${Override} inherit=${f.inherit.reply_completion_guard} onInherit=${setInherit("reply_completion_guard")} inherited=${roomInh("reply_completion_guard", "", "#g-creply", "#g-reply")}>
           <label class="check"><input type="checkbox" disabled=${f.inherit.reply_completion_guard} checked=${f.inherit.reply_completion_guard ? inherited.reply_completion_guard : f.reply_completion_guard}
             onChange=${(e) => set("reply_completion_guard")(e.target.checked)} /><span>${tn("replyCompletionGuard")}</span></label></${Override}>
         <p class="note">${replyHint(f.backend, classicMode, fd.kiro_ui)}</p></div>