@songsid/agend 2.2.0-beta.2 → 2.2.0-beta.4

package/dist/ui/panel-settings.js

@@ -258,9 +258,10 @@ export function SettingsPanel({ route, navKey }) {
 }
 
 /**
- * #1604: what this browser chooses for itself — moved here from the sidebar footer, each with the storage it always had:
- * theme (theme.js), language (app-i18n.js), HTML previews on this device (preview.js, through the app's confirm), and
- * the chat tour (replayed on the chat it points at).
+ * #1604, #1665: Preferences. Synced across the person's devices (kept on the host, app-prefs.js): theme (theme.js),
+ * language (app-i18n.js) and HTML previews (preview.js, through the app's confirm). On the public link they are
+ * read-only: a change there stays in that browser, and it says so. This device only: the chat tour (replayed on the
+ * chat it points at), and the layout choices named there (their controls are where they always were).
  */
 export function DeviceSection() {
   const P = () => globalThis.AgendPreview;
@@ -291,11 +292,15 @@ export function DeviceSection() {
     };
     setTimeout(go, 0);
   };
-  return html`<section class="card s-device"><h3>${tn("sec_device")}</h3>
-    <p class="sub">${tn("deviceLead")}</p>
+  const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
+  return html`<section class="card s-device s-synced"><h3>${tn("syncedTitle")}</h3>
+    <p class="sub">${publicLink ? tn("syncedPublicLink") : tn("syncedLead")}</p>
     <${DevicePrefs} labels=${true} />
     ${P() ? html`<label class="check"><input type="checkbox" checked=${on} onChange=${(e) => { const want = e.target.checked; setPreviewOptIn(want).then(setOn); }} />
       <span>${t("chat.previews")}</span></label>` : null}
+  </section>
+  <section class="card s-device s-local"><h3>${tn("deviceTitle")}</h3>
+    <p class="sub">${tn("deviceLead")}</p>
     <div class="s-device-row"><button type="button" id="tourBtn" class="btn" title=${t("chat.tourBtnTitle")} onClick=${replay}><${Icon} name="info" size=${16} />${t("chat.tour")}</button></div>
   </section>`;
 }
@@ -367,11 +372,13 @@ function makeCtx(data, setData, stage, unstage, reload, reloadLive, alive) {
     async pauseWake(name, action) {
       const res = await api(`/api/settings/instances/${encodeURIComponent(name)}/${action}`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
       if (!res.ok) toast((res.body && res.body.error) || tn("actionFailed", action), false);
+      else if (res.body && res.body.held) toast(res.body.message);
       await reloadLive();
     },
     async startStop(name, running) {
       const res = await api(running ? `/stop/${encodeURIComponent(name)}` : `/api/instance/${encodeURIComponent(name)}/start`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
       if (!res.ok) toast(`${tn("actionFailed", running ? tn("stop") : tn("start"))}: ${(res.body && res.body.error) || res.status || ""}`, false);
+      else if (res.body && res.body.held) toast(res.body.message);
       await new Promise((r) => setTimeout(r, 800));
       await reloadLive();
     },
@@ -726,7 +733,9 @@ function WebSection({ ctx, staged }) {
   // Empty = the default (null in the write: the key is removed from fleet.yaml).
   const value = (v) => (v.trim() === "" ? null : Number(v));
   const hours = (v) => { const n = value(v); return n !== null && (!Number.isFinite(n) || n < 1 || n > 720) ? "sessionRange" : ""; };
-  const abs = value(f.abs) ?? 12, idle = value(f.idle) ?? 2;
+  // The defaults (#1670: 48 h / 48 h, DEFAULT_SESSION_POLICY); an idle time left blank follows a shorter session, as
+  // the store and the validator apply it — so only an idle time that is typed can exceed the session length.
+  const abs = value(f.abs) ?? 48, idle = value(f.idle) ?? Math.min(48, abs);
   const errors = {
     ttl: !Number.isInteger(Number(f.ttl)) || Number(f.ttl) < 1 || Number(f.ttl) > 480 ? "publicTtl" : "",
     abs: hours(f.abs),
@@ -771,9 +780,9 @@ function WebSection({ ctx, staged }) {
     <section class="card"><h3>${tn("webSessionTitle")}</h3>
       <p class="note">${tn("webSessionHint")}</p>
       <div class="grid2">
-        <div class="field"><label for="webSessionAbsolute">${tn("sessionAbsolute")}</label><input id="webSessionAbsolute" type="number" min="1" max="720" step="any" placeholder=${tn("defaultHours", 12)}
+        <div class="field"><label for="webSessionAbsolute">${tn("sessionAbsolute")}</label><input id="webSessionAbsolute" type="number" min="1" max="720" step="any" placeholder=${tn("defaultHours", 48)}
           class=${errors.abs ? "invalid" : ""} value=${f.abs} onInput=${(e) => set("abs")(e.target.value)} /><${Feedback} error=${errors.abs} /></div>
-        <div class="field"><label for="webSessionIdle">${tn("sessionIdle")}</label><input id="webSessionIdle" type="number" min="1" max="720" step="any" placeholder=${tn("defaultHours", 2)}
+        <div class="field"><label for="webSessionIdle">${tn("sessionIdle")}</label><input id="webSessionIdle" type="number" min="1" max="720" step="any" placeholder=${tn("defaultHours", 48)}
           class=${errors.idle ? "invalid" : ""} value=${f.idle} onInput=${(e) => set("idle")(e.target.value)} /><${Feedback} error=${errors.idle} /></div>
       </div>
     </section>
@@ -840,7 +849,7 @@ function Developer({ ctx }) {
       <button type="button" class="btn btn-sm" title=${tn("copy")} onClick=${copy}><${Icon} name="copy" size=${14} /><span class="lbl">${tn("copy")}</span></button>
       <button type="button" class="btn btn-sm" title=${tn("devDownload")} onClick=${download}><${Icon} name="download" size=${14} /><span class="lbl">${tn("devDownload")}</span></button>
     </div>
-    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck="false" wrap="off" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
+    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck=${false} wrap="off" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
         <div class="save-row"><button type="button" class="btn btn-primary" onClick=${save}>${tn("devApply")}</button><span class="note">${tn("devApplyHint")}</span></div>`
       : html`<pre class="s-yaml">${text}</pre>`}
     ${msg ? html`<p class=${`feedback${msg.error ? " error" : ""}`} role="status">${msg.error || msg.text}</p>` : null}

package/dist/ui/preview-panel.js

@@ -1,11 +1,14 @@
 // #1481: an agent's HTML preview (#1306) in a panel beside the conversation — a split with a draggable divider on a
 // wide screen, a full-screen sheet on a narrow one. Nothing about the preview itself changes here: the frame is the one
 // preview.js makes (mountPreview: the preview origin, sandbox allow-scripts only), started by AgendPreview.start like a
-// card's, only told to fill the panel. It runs on a click, as a card's does:
-// - "Open in panel" on an idle card opens the panel with its Preview button — the panel runs nothing by itself;
+// card's, only told to fill the panel. It runs on a person's click, as a card's does — and "Open in panel" is that click:
+// - on an idle card it opens the panel and starts the preview there, as if Preview were clicked in the panel (#1704);
+//   a device that has not allowed previews gets the "Allow previews" offer instead, and allowing it starts the run;
+//   where previews cannot run (web.preview: false, a public link), the panel opens with nothing running;
 // - on a card whose preview is running, the same button moves that run to the panel (stopped in the card, started in
 //   the panel: a moved frame reloads anyway);
-// - a newer version of the block in a later reply is offered, never swapped in, and offered with Preview to click.
+// - nothing runs by itself: not when the page loads, not when the panel is shown again, and a newer version of the
+//   block in a later reply is offered, never swapped in, and shown with Preview to click.
 // Closing the panel or leaving the chat stops its frame; one preview per page still holds (start() stops any other).
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
@@ -19,18 +22,29 @@ const P = () => globalThis.AgendPreview;
 
 // ── The panel's state, one per page (the chat shows one instance at a time) ──
 
-/** open: { key, instance, msgKey, n | att, code, sender, ts } | null (`att`: an attached .html file, #1306 Q4); run: start it on mount (a moved run). */
+/**
+ * open: { key, instance, msgKey, n | att, code, sender, ts } | null (`att`: an attached .html file, #1306 Q4);
+ * run: start it on mount — the card's click, as a token no later open ever reuses (0: nothing to run).
+ */
 let state = { open: null, run: 0 };
+let runs = 0, version = 0, claims = 0;
 const subs = new Set();
-function set(next) { state = next; for (const fn of [...subs]) { try { fn(state); } catch { /* one listener's error stops no other */ } } }
+function set(next) { state = next; version++; for (const fn of [...subs]) { try { fn(state); } catch { /* one listener's error stops no other */ } } }
 export const panelStore = { get: () => state, subscribe(fn) { subs.add(fn); return () => { subs.delete(fn); }; } };
+/** Moves on every open and close, and on every claim: what a card's click compares when its HTML arrives late. */
+export const panelVersion = () => version;
+/** A click that will show something in the panel (an attachment's HTML still to read): from now on it is the newest —
+ *  any earlier click still reading is dropped when its answer comes. Returns the version the click owns. */
+export function claimPanel() { claims++; return ++version; }
+/** How many clicks have claimed: an inline Preview still reading asks only whether a newer click came (not a close). */
+export const panelClaims = () => claims;
 
 /** The frame's key in preview.js: its own, so the card that opened it keeps its own state. */
 export const frameKey = (key) => `panel:${key}`;
-/** Show `spec` in the panel; `run`: start it there (a click that moves a running preview). The block shown before stops. */
+/** Show `spec` in the panel; `run`: start it there (the card's "Open in panel" click). The block shown before stops. */
 export function openPanel(spec, { run = false } = {}) {
   if (state.open && P()) P().stop(frameKey(state.open.key), "stopped", "");
-  set({ open: { ...spec }, run: run ? state.run + 1 : 0 });
+  set({ open: { ...spec }, run: run ? ++runs : 0 });
 }
 /** Close the panel: its frame stops first. */
 export function closePanel() {
@@ -105,7 +119,7 @@ const timeOf = (ts) => (ts ? new Date(ts).toLocaleTimeString([], { hour: "2-digi
  * props: name (the instance), msgs() → its messages, subscribe(fn) → unsubscribe (the chat store's), keyOf(x),
  * reveal(msgKey) (the thread shows that message), download(code).
  */
-/** allow(): this device's opt-in through the chat's one path (setPreviewOptIn: the confirm, then setOptIn) → the choice. */
+/** allow(commit): this device's opt-in through the chat's one path (setPreviewOptIn: the confirm, then commit(setOptIn)) → the choice. */
 export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, download, allow }) {
   const [st, setSt] = useState(state);
   const [view, setView] = useState("preview");
@@ -113,13 +127,17 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const [newer, setNewer] = useState(null);
   const [newerNote, setNewerNote] = useState("");
   const reading = useRef(null);   // the newer version whose file is being read (one at a time)
+  const pending = useRef(0);      // #1704: the card's click, waiting for this device's Allow (the st.run it came with)
+  const ownAllow = useRef(0);     // while this panel's own Allow commits its choice: the click it answers (not cancelled by it)
   const holder = useRef(null), divider = useRef(null), panel = useRef(null);
   const open = st.open && st.open.instance === name ? st.open : null;
 
   useEffect(() => panelStore.subscribe(setSt), []);
   // This device's choice (here or in another tab) decides whether Preview is offered: re-read it when it changes.
+  // A click waiting for Allow is cancelled by any other change of that choice (Never, a card's menu, another tab):
+  // after it, running needs a new click — only this panel's own Allow runs the click it was offered for.
   const [, choice] = useState(0);
-  useEffect(() => (P() ? P().onChange(() => choice(n => n + 1)) : undefined), []);
+  useEffect(() => (P() ? P().onChange(() => { if (pending.current && ownAllow.current !== pending.current) pending.current = 0; choice(n => n + 1); }) : undefined), []);
   // Leaving the chat (another instance, another panel) closes the panel: its frame stops with the thread's.
   useEffect(() => () => closePanel(), []);
 
@@ -130,11 +148,17 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     P().start(frameKey(open.key), holder.current, open.code, ui, { fill: true });
   };
   const stop = () => { if (open) P().stop(frameKey(open.key), "stopped", ""); };
-  // A new block in the panel: what ran before is gone (openPanel stopped it); a moved run starts here.
+  // A new block in the panel: what ran before is gone (openPanel stopped it); the card's click starts it here — or,
+  // where it cannot run, waits as `pending`: only the Allow below can use it (offered to a device that has not opted
+  // in), only while the panel shows what that click opened (st.run is a token no later open reuses), and any other
+  // change of this device's choice cancels it.
   useEffect(() => {
     setRun({ state: "idle", reason: "" });
     setView("preview");
-    if (open && st.run) start();
+    if (open && st.run) {
+      if (P().availability().ok) start();
+      else pending.current = st.run;
+    }
     // Focus goes to the panel's close control that is on screen (Back on a phone, × beside the thread).
     if (panel.current) { const f = [...panel.current.querySelectorAll(".pv-panel-close")].find(b => b.offsetParent !== null); if (f) f.focus(); }
   }, [open && open.key, st.run]);
@@ -204,11 +228,21 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   if (!open) return null;
   const going = run.state === "starting" || run.state === "running";
   const a = P().availability();
-  // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm); Preview
-  // is then enabled — still a click. Why a run stopped (e.g. switched off in another tab) is still said first.
+  // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm). Allowing
+  // runs the block the card's click opened (#1704); otherwise Preview is then enabled — still a click. Why a run stopped
+  // (e.g. switched off in another tab) is still said first.
   const askOptIn = !going && !a.ok && a.why === "optin" && typeof allow === "function";
   const note = run.reason || (going ? (run.state === "starting" ? t("chat.pvStarting") : "") : a.ok ? t("chat.pvPanelIdle") : askOptIn ? t("chat.pvWhyOptinPanel") : a.reason);
-  const allowHere = async () => { if (await allow()) setRun({ state: "idle", reason: "" }); };
+  // Allowed here: the click that opened the panel runs now — if it is still waiting (no other change of the choice
+  // cancelled it, even while the confirm was open: only the change this Allow commits is its own) and the panel still
+  // shows what it opened (the confirm is a wait: the panel may have moved on meanwhile).
+  const allowHere = async () => {
+    const want = pending.current;
+    const yes = await allow((apply) => { ownAllow.current = want; try { apply(); } finally { ownAllow.current = 0; } });
+    if (!yes) return;
+    setRun({ state: "idle", reason: "" });
+    if (want && pending.current === want && panelStore.get().run === want) start();
+  };
   const source = t("chat.pvSource", open.sender || name, timeOf(open.ts));
   return html`<div class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
       aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>

package/dist/ui/preview.js

@@ -197,11 +197,15 @@
    * opts.fill (#1481, the side panel): the frame fills its holder — the same frame from mountPreview, only sized by the
    * panel instead of by the frame's height messages, which it then ignores.
    */
+  /** How many previews this page has started: a click whose HTML arrives late asks whether another started meanwhile. */
+  var starts = 0;
+  function startCount() { return starts; }
   function start(key, holder, html, ui, opts) {
     var a = availability();
     if (!a.ok) { ui.state("unavailable", a.reason); return false; }
     if (typeof html !== "string" || utf8Bytes(html) > LIMITS.maxBytes) { ui.state("unavailable", say("pvHtmlOver", "This HTML is over 1 MiB; it is not previewed.")); return false; }
     stopAll("another");
+    starts++;
     var doc = holder.ownerDocument;
     var iframe = mountPreview(doc);
     var card = {
@@ -330,7 +334,7 @@
 
   return {
     init: init, availability: availability, optedIn: optedIn, setOptIn: setOptIn, never: never, setNever: setNever, onChange: onChange, listeners: listeners, onStorage: onStorage,
-    start: start, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
+    start: start, startCount: startCount, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
     mountPreview: mountPreview, onMessage: onMessage, BANNER: BANNER, LIMITS: LIMITS,
     /** The banner every running preview carries, in the page's language (#1554); BANNER is its English. */
     banner: function () { return say("pvBanner", BANNER); },

package/dist/ui/settings-strings.js

@@ -217,7 +217,9 @@ register("settings", {
     concurrencyWarning: "May exceed CPU capacity on smaller hosts",
     staggerRange: "Must be between 0 and 30000",
     staggerWarning: "Very low values can cause startup spikes",
-    sec_device: "This device", deviceLead: "Choices for this browser only — other devices keep their own.",
+    sec_device: "Preferences", syncedTitle: "Synced across your devices", syncedLead: "Changes here apply on every device where you are signed in.",
+    syncedPublicLink: "On the public link these are read-only: a change here stays in this browser.",
+    deviceTitle: "This device only", deviceLead: "The tour, text size, view fit, the sidebar shown or hidden, panel widths and desktop notifications stay on each device.",
     sec_agents: "Agents",
     sec_bots: "Connections",
     sec_classic: "ClassicBot",
@@ -580,7 +582,9 @@ register("settings", {
     concurrencyWarning: "在較小的主機上可能超出 CPU 負荷",
     staggerRange: "必須介於 0 到 30000",
     staggerWarning: "數值太低可能造成啟動尖峰",
-    sec_device: "這台裝置", deviceLead: "只套用在這個瀏覽器，其他裝置保留各自的設定。",
+    sec_device: "偏好設定", syncedTitle: "在你所有的裝置同步", syncedLead: "這裡的變更會套用到你登入的每一台裝置。",
+    syncedPublicLink: "公開連結只能讀取這些設定：在這裡變更只會留在這個瀏覽器。",
+    deviceTitle: "只限這台裝置", deviceLead: "導覽、文字大小、視圖寬度、側欄顯示或隱藏、面板寬度與桌面通知，每台裝置各自保留。",
     sec_agents: "Agent",
     sec_bots: "連線",
     sec_classic: "ClassicBot",

package/dist/ui/settings-token.js

@@ -31,7 +31,7 @@ export function TokenField({ id, platform, value, onInput, identity, busy, onVer
   const [shown, setShown] = useState(false);
   return html`<div class="field token-field"><label for=${id}>${tn("wizardToken")}</label>
     <div class="token-row">
-      <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck="false" disabled=${!!busy}
+      <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck=${false} disabled=${!!busy}
         placeholder=${platform === "discord" ? "MTA…" : "123456:ABC-DEF…"} value=${value} onInput=${(e) => onInput(e.target.value.trim())} />
       <button type="button" class="icon-btn" aria-pressed=${shown ? "true" : "false"} title=${shown ? tn("tokenHide") : tn("tokenShow")}
         aria-label=${shown ? tn("tokenHide") : tn("tokenShow")} onClick=${() => setShown(!shown)}><${Icon} name="eye" size=${16} /></button>

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

@@ -1,14 +1,33 @@
 // #1408 §4: one dictionary for the app, namespaced (app.*, chat.*, fleet.*, …). A panel registers its own namespace
 // when it loads; t("chat.send") resolves it in the chosen language and falls back to English, then to the key.
-// The language is this browser's choice (agend_lang, the key every panel has used), else the device's.
+// The language is the person's choice — kept on the host since #1665 and cached in this browser as agend_lang, the key
+// every panel has used — else the device's.
 
 const tables = { en: {}, "zh-TW": {} };
 const listeners = new Set();
 
-function stored() {
-  try { const v = localStorage.getItem("agend_lang"); return v === "en" || v === "zh-TW" ? v : null; } catch { return null; }
+/** The device's own language: what applies when none is chosen. */
+export function deviceLanguage() { return typeof navigator !== "undefined" && /^zh/i.test(navigator.language || "") ? "zh-TW" : "en"; }
+function cacheLang(v) { try { if (v) localStorage.setItem("agend_lang", v); else localStorage.removeItem("agend_lang"); } catch { /* this page only */ } }
+/**
+ * #1665: the signed-in page carries the host's values (<html data-prefs>) — the same rule as theme.js: the host's
+ * language is this page's (the browser's copy is refreshed, best effort); none chosen on the host and this device in
+ * step with it: the device's language; not in step yet, or no data-prefs: this browser's copy, else the device's.
+ */
+function initialLang() {
+  let d = null;
+  try { d = JSON.parse(document.documentElement.getAttribute("data-prefs") || "null"); } catch { d = null; }
+  if (d && typeof d === "object" && d.values && typeof d.values === "object") {
+    const host = d.values.lang;
+    if (host === "en" || host === "zh-TW") { cacheLang(host); return host; }
+    let inStep = false;
+    try { inStep = localStorage.getItem("agend_prefs_synced") === "1"; } catch { inStep = false; }
+    if (inStep) { cacheLang(null); return deviceLanguage(); }
+  }
+  try { const v = localStorage.getItem("agend_lang"); if (v === "en" || v === "zh-TW") return v; } catch { /* none */ }
+  return deviceLanguage();
 }
-let current = stored() || (typeof navigator !== "undefined" && /^zh/i.test(navigator.language || "") ? "zh-TW" : "en");
+let current = initialLang();
 
 /** Add a namespace: `register("chat", { en: {...}, "zh-TW": {...} })`. */
 export function register(ns, byLang) {
@@ -19,11 +38,14 @@ export function register(ns, byLang) {
 
 export function lang() { return current; }
 
-/** Choose a language for this browser; every subscriber re-renders (a new navigation lease, §4). */
-export function setLang(next) {
+/**
+ * Choose a language; every subscriber re-renders (a new navigation lease, §4). `{ store: false }`: this page only —
+ * the host's "none chosen" arriving from another device (app-prefs.js), which leaves no copy in this browser.
+ */
+export function setLang(next, opts = {}) {
   if (next !== "en" && next !== "zh-TW") return;
   current = next;
-  try { localStorage.setItem("agend_lang", next); } catch { /* this page only */ }
+  if (opts.store !== false) cacheLang(next);
   if (typeof document !== "undefined" && document.documentElement) document.documentElement.lang = next === "zh-TW" ? "zh-Hant" : "en";
   for (const fn of listeners) fn(next);
 }
@@ -38,12 +60,12 @@ export function t(key, ...values) {
 
 register("app", {
   en: {
-    brand: "AgEnD", fleet: "Fleet", view: "View", settings: "Settings", instances: "Instances", newInstance: "New instance",
+    brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet overview", view: "View", settings: "Settings", instances: "Instances", newInstance: "New instance",
     collapse: "Hide the sidebar", expand: "Show the sidebar", openMenu: "Open the sidebar", closeMenu: "Close the sidebar",
     theme: "Theme", themeSystem: "System", themeLight: "Light", themeDark: "Dark", language: "Language",
-    previews: "Allow HTML previews on this device", tour: "Tour", tourTitle: "Show the web chat tour again",
+    previews: "Allow HTML previews", tour: "Tour", tourTitle: "Show the web chat tour again",
     needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
-    textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage",
+    textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage", usageHide: "Hide usage",
     statusRunning: "running", statusStopped: "stopped", statusPaused: "paused", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
     connReconnecting: "Can't reach AgEnD — it may be restarting. Reconnecting…", connReconnectingIn: "Can't reach AgEnD — it may be restarting. Trying again in {0} s.",
     hydrating: "Loading what is open now…", hydrateFailed: "Could not load what is open now (prompts, ticks).",
@@ -67,12 +89,12 @@ register("app", {
     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",
   },
   "zh-TW": {
-    brand: "AgEnD", fleet: "Fleet", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance",
+    brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance",
     collapse: "隱藏側邊欄", expand: "顯示側邊欄", openMenu: "打開側邊欄", closeMenu: "關閉側邊欄",
     theme: "主題", themeSystem: "跟隨系統", themeLight: "淺色", themeDark: "深色", language: "語言",
-    previews: "允許這台裝置預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
+    previews: "允許預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
     needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",
-    textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "剛好填滿", usage: "用量",
+    textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "剛好填滿", usage: "用量", usageHide: "隱藏用量",
     statusRunning: "執行中", statusStopped: "已停止", statusPaused: "已暫停", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
     connReconnecting: "連不上 AgEnD——可能正在重新啟動。正在重新連線…", connReconnectingIn: "連不上 AgEnD——可能正在重新啟動。{0} 秒後再試。",
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",

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

@@ -0,0 +1,249 @@
+// #1665: the web preferences that follow the person between devices — kept on the host (/ui/prefs), with this browser's
+// localStorage, under the keys every panel already reads, as the cache. Design: the comment on #1665.
+//
+// - Synced: theme, language, the sidebar (order, folds, filter, favorites — #1664) and the HTML-preview opt-in. The tour and the first-run
+//   card stay on each device, as every layout choice does.
+// - The signed-in page is served with the host's values (<html data-prefs>). This module, imported before any panel
+//   reads its key, copies them into the cache: the host wins once it has a value — and, on a device already in step
+//   with it, a key the host does not have is the default (its stale copy here is cleared). theme.js and the
+//   dictionary did the same for the theme and language, before paint.
+// - A change made here is cached at once and sent to the host (a short debounce gathers a burst, such as typing in the
+//   filter). Writes go one at a time; a key stays this page's own from the change until its write has ended, so no
+//   answer — a read or another write — that started before can put an older value back. Every answer carries the
+//   host's revision, and one older than what this page already has is ignored.
+// - The public link, and the anonymous View reader, have no host write: theirs stays local.
+// - The first load on a device (no agend_prefs_synced yet) uploads what it had locally for the keys the host does not
+//   have yet, each with onlyIfUnset — the first device to arrive wins — then reads the host's values back. Only once
+//   every upload got an answer and that read succeeded is the device marked: anything else tries again next load.
+// - The status frame's prefs_rev: another device changed something; the host's values are read again and applied. A
+//   revision counts as seen only once its read succeeded (a failed one is tried again, at most every few seconds).
+import { deviceLanguage, lang, setLang } from "./app-i18n.js";
+import { appStore } from "./app-store.js";
+
+const SYNCED_FLAG = "agend_prefs_synced";
+const RETRY_MS = 5000;
+const json = { toLocal: (v) => JSON.stringify(v), fromLocal: (s) => { try { return s == null ? undefined : JSON.parse(s); } catch { return undefined; } } };
+/** Each synced preference: its cache key, and how a host value is cached (null: no entry) and read back. */
+export const SYNCED = {
+  theme: { ls: "agend_theme", toLocal: (v) => (v === "light" || v === "dark" ? v : null), fromLocal: (s) => (s === "light" || s === "dark" ? s : undefined) },
+  lang: { ls: "agend_lang", toLocal: (v) => (v === "en" || v === "zh-TW" ? v : null), fromLocal: (s) => (s === "en" || s === "zh-TW" ? s : undefined) },
+  "nav.order": { ls: "agend_view_sidebar_order", ...json },
+  "nav.collapsed": { ls: "agend_instance_collapsed", ...json },
+  "nav.filter": { ls: "agend_instance_filter", ...json },
+  "nav.favorites": { ls: "agend_favorites", ...json },   // #1664
+  "preview.optIn": { ls: "agend_html_preview", toLocal: (v) => (v ? "on" : null), fromLocal: (s) => (s === "on" ? true : undefined) },
+};
+const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
+const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+
+function readLocal(key) { try { return localStorage.getItem(key); } catch { return null; } }
+function writeLocal(key, s) { try { if (s == null) localStorage.removeItem(key); else localStorage.setItem(key, s); } catch { /* this page only */ } }
+function cache(key, value) { const k = SYNCED[key]; writeLocal(k.ls, value == null ? null : k.toLocal(value)); }
+const inStep = () => readLocal(SYNCED_FLAG) === "1";
+
+function pageHost() {
+  try {
+    const d = JSON.parse(document.documentElement.getAttribute("data-prefs") || "null");
+    return d && typeof d === "object" && typeof d.rev === "number" && d.values && typeof d.values === "object" ? d : null;
+  } catch { return null; }
+}
+
+const initial = typeof document !== "undefined" ? pageHost() : null;
+let rev = initial ? initial.rev : null;
+let host = initial ? initial.values : null;
+const pending = new Map();     // key → value chosen here, not sent yet
+const mine = new Map();        // key → value chosen here whose write is not over (pending or out)
+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();
+
+// The host's values into the cache, now — before the sidebar, the tour or the first-run card read their keys. A key
+// the host does not have: the default, on a device in step with the host; this device's own (to upload) otherwise.
+if (host) {
+  const step = inStep();
+  for (const key of Object.keys(SYNCED)) {
+    if (own(host, key)) cache(key, host[key]);
+    else if (step) cache(key, null);
+  }
+}
+
+/** This page may change the host's preferences: the signed-in app, not over the public link. */
+export function prefsWritable() {
+  return !!initial && !(typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1");
+}
+/**
+ * The value in force for a key, in memory — never only in this browser's storage (a full storage must not bring back
+ * an old value): this page's own choice while its write is not over; else the host's; else, on a device in step with
+ * the host, the default ({ value: undefined }). null: not known here (no host values on this page, or a device not yet
+ * in step) — the caller reads this browser's copy.
+ */
+export function prefInForce(key) {
+  if (!own(SYNCED, key)) return null;
+  if (mine.has(key)) return { value: mine.get(key) };
+  if (host && own(host, key)) return { value: host[key] };
+  if (initial && inStep()) return { value: undefined };
+  return null;
+}
+/** The host's value for a key as this page last saw it (undefined: not set there, or not known). */
+export function hostPref(key) { return host && own(host, key) ? host[key] : undefined; }
+/** Called with the keys another device changed, after they are cached and applied here. Returns the unsubscribe. */
+export function onPrefsChanged(fn) { listeners.add(fn); return () => listeners.delete(fn); }
+
+/** A host answer ({ values, rev }): a real view of the host (not an unreadable store's defaults)? */
+const isView = (body) => !!body && typeof body.rev === "number" && !!body.values && typeof body.values === "object" && !body.unreadable;
+/** Take a view as this page's — unless it is older than the one it has. True: taken. */
+function take(body) {
+  if (!isView(body) || (rev !== null && body.rev < rev)) return false;
+  rev = body.rev;
+  host = body.values;
+  return true;
+}
+
+/**
+ * A preference chosen on this page: cached now, and kept on the host (a burst within 400 ms is one write). Not writable
+ * (the public link, the anonymous reader): this browser only, as before.
+ */
+export function savePref(key, value) {
+  if (!own(SYNCED, key)) return;
+  cache(key, value);
+  if (!prefsWritable()) return;
+  pending.set(key, value);
+  mine.set(key, value);
+  clearTimeout(flushTimer);
+  flushTimer = setTimeout(flush, 400);
+}
+
+/** 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" },
+    body: JSON.stringify(onlyIfUnset ? { set, onlyIfUnset: true } : { set }) });
+  const body = await res.json().catch(() => null);
+  const ok = res.ok && isView(body);
+  if (ok) take(body);
+  return { ok, status: res.status };
+}
+
+function flush() {
+  flushTimer = null;
+  if (!pending.size) return writes;
+  const set = Object.fromEntries(pending);
+  const keys = [...pending.keys()];
+  pending.clear();
+  for (const k of keys) inflight.set(k, (inflight.get(k) || 0) + 1);
+  writes = writes.then(async () => {
+    let ok = false;
+    try { ok = (await post(set, false)).ok; } catch { ok = false; }
+    const released = new Set();
+    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); }
+    }
+    // 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,
+    // and an older answer to this write cannot overrule it); refused or not sent, what the host has (read back first).
+    // Always applied: what the page shows came from this page's own choice, not from the cache, so the cache matching
+    // the host (a storage that refused the choice) says nothing about the screen.
+    if (!ok) await refresh();
+    align(released, { force: true });
+  });
+  return writes;
+}
+
+/**
+ * Read the host's values again and apply the ones that differ from this page's — not a key still being changed here
+ * (unsent, or its write not answered yet), and nothing from an answer older than the view this page has. True: the read
+ * succeeded (taken, or older than what this page already has — nothing to do).
+ */
+export async function refresh() {
+  if (!initial) return false;
+  let body = null;
+  try {
+    const res = await fetch("/ui/prefs", { credentials: "same-origin" });
+    body = res.ok ? await res.json() : null;
+  } catch { body = null; }
+  if (!isView(body)) return false;
+  const before = new Map(Object.keys(SYNCED).map((key) => [key, own(host, key) ? SYNCED[key].toLocal(host[key]) : null]));
+  if (take(body)) align(Object.keys(SYNCED), { before });
+  return true;
+}
+
+/**
+ * Show the host view this page has for these keys — except a key still being changed here (unsent, or out). A key is
+ * applied when its host value moved in memory (`before`: the host view before this read), when this browser's copy
+ * differs, or always (`force`: this page's own write just ended). The copy alone never decides: a storage that refused
+ * a write keeps an old copy that may equal the host while the screen shows something else.
+ */
+function align(keys, opts = {}) {
+  const changed = new Set();
+  for (const key of keys) {
+    if (pending.has(key) || inflight.has(key)) continue;
+    const k = SYNCED[key];
+    const want = own(host, key) ? k.toLocal(host[key]) : null;
+    const copyDiffers = readLocal(k.ls) !== want;
+    const moved = !!opts.before && opts.before.get(key) !== want;
+    if (!copyDiffers && !moved && !opts.force) continue;
+    if (copyDiffers) writeLocal(k.ls, want);
+    changed.add(key);
+  }
+  if (changed.size) apply(changed);
+}
+
+function apply(changed) {
+  // Only what differs from what the page shows (a key re-applied after its own write may already be in force).
+  const T = globalThis.AgendTheme;
+  if (changed.has("theme") && typeof T !== "undefined") { const v = hostPref("theme") || "system"; if (typeof T.get !== "function" || T.get() !== v) T.set(v); }
+  if (changed.has("lang")) {
+    const l = hostPref("lang");
+    // None chosen any more: the device's own language, on this page only (no copy is kept for it).
+    if (l) { if (l !== lang()) setLang(l); } else if (deviceLanguage() !== lang()) setLang(deviceLanguage(), { store: false });
+  }
+  const P = globalThis.AgendPreview;
+  if (changed.has("preview.optIn") && P && typeof P.setOptIn === "function") {
+    const on = hostPref("preview.optIn") === true;
+    if (typeof P.optedIn !== "function" || P.optedIn() !== on) P.setOptIn(on);
+  }
+  for (const fn of [...listeners]) { try { fn(changed); } catch { /* one listener's error stops no other */ } }
+}
+
+/**
+ * Once per device: upload what this browser had for the keys the host has not got yet (each on its own, onlyIfUnset — a
+ * value the host refuses as invalid is simply not taken), then adopt the host's values. Marked only when every upload
+ * was answered (taken, or refused as invalid) and the read back succeeded; a request with no answer, a server error, a
+ * refused session or an unreadable store leaves the device unmarked, so the next load tries again.
+ */
+export async function migratePrefs() {
+  if (!prefsWritable() || inStep()) return false;
+  for (const key of Object.keys(SYNCED)) {
+    if (own(host, key)) continue;
+    const local = SYNCED[key].fromLocal(readLocal(SYNCED[key].ls));
+    if (local === undefined) continue;
+    let r;
+    try { r = await post({ [key]: local }, true); } catch { return false; }
+    if (!r.ok && r.status !== 400) return false;
+  }
+  if (!(await refresh())) return false;
+  writeLocal(SYNCED_FLAG, "1");
+  return true;
+}
+
+/** The app's boot ("full" mode): the first-load migration, then another device's changes at each status frame. */
+export function bootPrefs() {
+  if (!initial) return;
+  // Each new revision the frames announce, read once (the store changes many times a second); one announced while a read
+  // is out is read as soon as it ends. Seen only once its read succeeded: after a failed read the next try waits for a
+  // later frame, at least RETRY_MS on.
+  let seen = rev, busy = false, failedAt = -Infinity;
+  const check = () => {
+    const r = appStore.get().prefsRev;
+    if (typeof r !== "number" || r === seen || busy) return;
+    if (r === rev) { seen = r; return; }
+    if (now() - failedAt < RETRY_MS) return;
+    busy = true;
+    refresh().then((ok) => { if (ok) seen = r; else failedAt = now(); }, () => { failedAt = now(); })
+      .finally(() => { busy = false; check(); });
+  };
+  appStore.subscribe(check);
+  migratePrefs();
+}