@songsid/agend 2.2.0-beta.1 → 2.2.0-beta.3

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,13 +60,13 @@ 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",
-    statusRunning: "running", statusStopped: "stopped", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
+    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).",
     skip: "Skip to the conversation", loadFailed: "This could not be loaded.", retry: "Try again", loading: "Loading…",
@@ -67,13 +89,13 @@ 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: "用量",
-    statusRunning: "執行中", statusStopped: "已停止", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
+    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: "無法載入目前的狀態（提示、送達標記）。",
     skip: "跳到對話", loadFailed: "無法載入。", retry: "再試一次", loading: "載入中…",

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();
+}

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

@@ -2,7 +2,7 @@
 // a test runs both over one list of cases). Pure: no DOM, no history.
 
 export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "config"];
-export const SETTINGS_SECTIONS = ["device", "agents", "bots", "classic", "general", "advanced"];   // #1604: device first
+export const SETTINGS_SECTIONS = ["device", "agents", "bots", "classic", "general", "web", "advanced"];   // #1604: device first
 const MAX_INSTANCE_NAME = 128;
 const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;
 

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

@@ -8,10 +8,12 @@ import { ConfirmHost } from "./ui-confirm.js";
 import { t, lang, setLang, onLang } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
 import { navStore } from "./app-nav.js";
-import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath } from "./app-route.js";
+import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath, fleetPath } from "./app-route.js";
 import { SessionMenu } from "./app-session.js";
+import { savePref } from "./app-prefs.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
 import { InstanceNav, RosterNav } from "./instance-nav.js";
+import { UsageRail } from "./header-tools.js";
 
 /** Shell state shared with panels: the phone drawer, the collapsed sidebar, extensions a panel module adds. */
 export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null });
@@ -104,7 +106,8 @@ export function signInHref() {
 function Sidebar({ route, onNewInstance, viewOnly }) {
   const app = useStore(appStore);
   const shell = useStore(shellStore);
-  const on = (panel) => !!route && (route.panel === panel || (panel === "fleet" && route.panel === "details"));
+  // #1675: the Fleet panel is "Fleet overview"'s (one current row); the "Fleet" row is current on an instance's Details.
+  const on = (panel) => !!route && (panel === "fleet" ? route.panel === "details" : route.panel === panel);
   const openInstance = openInstanceOf(route);
   // A count badge is hidden at 0; its number is also in the link's accessible name.
   const navLink = (panel, href, icon, label, count = 0) => html`<a class=${`side-row${on(panel) ? " active" : ""}`} href=${href}
@@ -126,6 +129,11 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       </div>
     </aside>`;
   }
+  // #1675: the whole fleet, on its Org chart (#1389), from anywhere — top left, so at the top of a phone's drawer too. The
+  // "Fleet" row under it goes to the open instance's Details (#1523 N2); this one is the Fleet panel, any of its tabs.
+  const onFleet = !!route && route.panel === "fleet";
+  const overview = html`<a class=${`side-row side-overview${onFleet ? " active" : ""}`} href=${fleetPath("org")}
+    aria-current=${onFleet ? "page" : undefined} onClick=${closeDrawer}><${Icon} name="org" /><span class="grow">${t("app.fleetOverview")}</span></a>`;
   return html`<aside id="sidebar" class="sidebar" aria-label=${t("app.menu")}>
     <div class="side-head">
       <a class="brand" href="/ui" onClick=${closeDrawer}>${t("app.brand")}</a>
@@ -133,6 +141,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       <button type="button" class="icon-btn" onClick=${onNewInstance} aria-label=${t("app.newInstance")} title=${t("app.newInstance")}><${Icon} name="plus" /></button>
     </div>
     <nav class="side-nav" aria-label=${t("app.menu")}>
+      ${overview}
       ${navLink("needs", NEEDS_PATH, "inbox", t("app.needsNav"), needsCount)}
       ${navLink("fleet", openInstance ? detailsPath(openInstance) : "/ui/fleet", "fleet", t("app.fleet"))}
       ${navLink("view", "/view", "view", t("app.view"))}
@@ -158,12 +167,15 @@ function ViewOnlyNav({ route }) {
 export function DevicePrefs({ labels = false } = {}) {
   const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
   const [l, setL] = useState(lang());
+  // #1665: what is in force, as it changes — another device's choice arriving while this is open is shown at once.
+  useEffect(() => (typeof AgendTheme !== "undefined" && typeof AgendTheme.onChange === "function" ? AgendTheme.onChange(setTheme) : undefined), []);
+  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); }}>
+      <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); }}>
         <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); }}>
+      <select 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>
   </div>`;
 }
@@ -351,6 +363,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
       ${viewOnly ? null : html`<${OperationLine} route=${nav.route} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
+    <${UsageRail} route=${nav.route} />
     <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
     ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
     ${viewOnly || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}

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

@@ -36,7 +36,9 @@ export function applyStatus(d) {
     if (i.state === "awaiting_input") awaiting[i.name] = typeof i.interaction_summary === "string" ? i.interaction_summary : "";
   }
   appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
-    connections: typeof d.connections === "number" ? d.connections : null });
+    connections: typeof d.connections === "number" ? d.connections : null,
+    // #1665: the host preferences' revision (app-prefs.js re-reads them when it moves).
+    prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null });
 }
 
 /** One "activity" event: an instance started or stopped working. */

package/dist/ui/shared/app.css

@@ -103,6 +103,22 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .inst:hover { background: var(--surface-2); }
 .inst.active { background: var(--surface-2); }
 .inst .dot { margin-top: 8px; }
+/* #1630: the avatar (a picture, an emoji or the first character), its status dot, and an optional ring in its bot's colour (--ring, set through the CSSOM). */
+.av { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-2);
+  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; }
+.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+.av.av-emoji { background: transparent; font-size: 18px; font-weight: normal; }
+.av.av-emoji img { width: 22px; height: 22px; border-radius: 0; object-fit: contain; }
+.av.ring { box-shadow: 0 0 0 2px var(--ring, transparent); }
+.av-text { overflow: hidden; }
+.av .av-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar); }
+.inst.active .av .av-dot, .inst:hover .av .av-dot { box-shadow: 0 0 0 2px var(--surface-2); }
+.dot.hollow { background: transparent; border: 1.5px solid var(--text-3); }
+/* On a grey avatar a grey dot needs more contrast: stopped is a stronger grey, paused a clear ring around the sidebar colour. */
+.av .av-dot.off { background: var(--text-2); }
+.av .av-dot.hollow { box-sizing: border-box; width: 10px; height: 10px; background: var(--bg-sidebar); border: 2.5px solid var(--text-2); }
+.inst .av { margin-top: 1px; }
+.inst-id { font-family: var(--font-mono); }
 .inst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .inst-name { font-size: var(--fs-sm); line-height: var(--lh-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .inst.active .inst-name { font-weight: var(--fw-semibold); }
@@ -128,6 +144,13 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .s-device { display: flex; flex-direction: column; gap: var(--s-3); }
 .s-device .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
 .s-device-row { display: flex; gap: var(--s-2); }
+/* #1620: Settings → Web — the lead, and the read-only list of what is set in fleet.yaml. */
+.s-web .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
+.s-web-fields:disabled select { opacity: 0.6; }   /* over the public link: dimmed like the inputs (.field input:disabled) */
+.s-web-ro { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--fs-sm); }
+.s-web-ro > div { display: contents; }
+.s-web-ro dt { color: var(--text-3); }
+.s-web-ro dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
 .prefs { display: flex; gap: var(--s-2); padding: var(--s-1) var(--s-3); }
 .pref { display: flex; align-items: center; gap: var(--s-1); color: var(--text-2); flex: 1; min-width: 0; }
 .pref select { flex: 1; min-width: 0; height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; }
@@ -297,6 +320,12 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg.user .meta { justify-content: flex-end; }
 .msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); }
 .msg.agent { align-self: stretch; }
+/* #1672: a status line (another instance's message, a daemon notice): muted plain text, no bubble; a long one folds. */
+.msg.status { align-self: stretch; font-size: var(--fs-sm); color: var(--text-3); }
+.msg.status .st-text { white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: var(--s-3); }
+.msg.status.folded .st-text { max-height: 9em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); }
+.msg.status .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
+.msg.status .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
 .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
 @media (hover: none) { .msg-tools { opacity: 1; } }
@@ -566,6 +595,24 @@ html.lb-open .scroller { overflow: hidden; }
 .caret.folded { transform: rotate(-90deg); }
 .caret.flipped { transform: rotate(180deg); }   /* the card's toggle: up when closed (it opens upwards) */
 .v-inst { align-items: center; }
+/* #1664: favorites — the star after a row (on hover or focus on a desktop, always when starred; on a phone in Edit) */
+.inst-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
+.inst-head .side-label { flex: 1; min-width: 0; }
+.fav-edit { margin-right: var(--s-2); display: inline-flex; align-items: center; gap: var(--s-1); }
+.v-li { display: flex; align-items: center; gap: 2px; }
+.v-li > .inst { flex: 1; min-width: 0; }
+.inst-star, .inst-move { flex: none; width: 28px; height: 28px; padding: 0; color: var(--text-3); }
+.inst-star.on { color: var(--warn); }
+.inst-star.on svg, .fav-mark { fill: currentColor; }
+.fav-head { cursor: default; }
+.fav-mark { color: var(--warn); }
+.inst-nav:not(.fav-editing) .inst-star:not(.on) { visibility: hidden; }
+/* As specific as the rule that hides it (and later), so hover and focus win. */
+@media (hover: hover) { .inst-nav:not(.fav-editing) .v-li:hover .inst-star, .inst-nav:not(.fav-editing) .v-li:focus-within .inst-star { visibility: visible; } }
+@media (hover: none) { .inst-nav:not(.fav-editing) .inst-star { display: none; } }
+/* Edit: room for ↑ ↓ ☆ — the context and CLI marks step aside so the name keeps its width. */
+.fav-editing .v-li .v-meta, .fav-editing .v-li .cli-icon { display: none; }
+@media (max-width: 899px) { .fav-editing .inst-star, .fav-editing .inst-move { width: 36px; height: 36px; } }
 .v-inst .dot { margin-top: 0; }
 .v-meta { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
 .cli-icon { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; border: 1px solid var(--border-strong); }
@@ -637,6 +684,12 @@ html.lb-open .scroller { overflow: hidden; }
 .u-sub { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
 .u-err { color: var(--warn); font-size: var(--fs-sm); }
 .u-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
+/* #1673: the usage rail beside the page on a wide screen (header-tools.js UsageRail; shown only at min-width 1200px). */
+.u-rail { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--bg); }
+.u-rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); }
+.u-rail-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
+.u-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
+@media (max-width: 1199px) { .u-rail { display: none; } }
 @media (max-width: 899px) {
   .hide-narrow { display: none; }
   .v-card { padding-left: var(--s-3); padding-right: var(--s-3); }
@@ -934,3 +987,5 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .cmd-palette .cmd-desc { white-space: normal; flex-basis: 100%; }
   .cmd-choices .btn, .quick-actions .btn { min-height: var(--tap); }
 }
+/* #1630: a Discord server emoji in a chat message, the size of the text around it. */
+.md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }

package/dist/ui/shared/app.js

@@ -5,6 +5,8 @@
 // session, and so is View (panel-view.js, loaded on demand). The panels that need a session live under /ui/js/ and are
 // reached only by the dynamic imports below, in "full" mode. A test walks the static imports over real HTTP and asserts
 // none of them names /ui/.
+// #1665 first: the host's preferences go into this browser's cache before any module below reads its key.
+import { bootPrefs } from "./app-prefs.js";
 import { html, render } from "./app-html.js";
 import { Shell, handleKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener } from "./app-shell.js";
 import { installSwipe } from "./app-swipe.js";
@@ -15,11 +17,12 @@ import { chatPath } from "./app-route.js";
 import { startNeedsNotifier } from "./app-needs.js";
 import { toast } from "./ui-toast.js";
 import { t } from "./app-i18n.js";
-import { initTextSize } from "./header-tools.js";
+import { initTextSize, initUsageRail } from "./header-tools.js";
 
 const boot = document.body.dataset;
 // #1523 N3: this device's text size, on the root before the first paint of any panel.
 initTextSize();
+initUsageRail();
 // "full": a signed-in page. "view-only": an anonymous reader of /view under web.view_access: open — no stream, no
 // session-only panel, nothing under /ui/ is ever imported or read (#1408 §3).
 const mode = boot.mode === "view-only" ? "view-only" : "full";
@@ -79,6 +82,8 @@ if (mode === "full") {
   panels.set("details", { load: () => loadDetails().then((m) => m.DetailsPanel) });
   // #1386 §6.3: desktop notifications for new "Needs you" items, in any panel, while this signed-in page is open.
   startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
+  // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
+  bootPrefs();
   onNewInstance = async () => {
     closeDrawer();                                 // on a phone the dialog opens from the drawer: the drawer goes first
     let m;