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

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-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

@@ -320,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; } }
@@ -589,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); }
@@ -660,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); }

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;

package/dist/ui/shared/header-tools.js

@@ -1,13 +1,15 @@
 // #1523 N3 (§3.4, Q2 = A): the controls every page's header has, in one order on Chat, View, Details and Fleet —
 //   Aa  text size, shared per device: S / M / L (View also keeps Fit, its own extra choice);
 //   ◔   AI usage, unless the fleet turned it off (web.usage_panel: false — said by the page itself, no probe read).
+//       #1673: on a wide screen it is a right rail beside the page (shown or hidden per device); ◔ toggles it. On a
+//       narrower one, ◔ opens the dialog.
 // The size is one attribute on the root (data-text-size); CSS turns it into one custom property the chat, Details and
 // Fleet read (#1300: no style attribute). View's terminal multiplies its fitted size by VIEW_SCALE, as its density did.
-import { html, useState } from "./app-html.js";
+import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { createStore, useStore } from "./app-store.js";
 import { Icon } from "./ui-icons.js";
-import { UsageDialog } from "./usage-dialog.js";
+import { UsageBody, UsageDialog } from "./usage-dialog.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
@@ -73,16 +75,64 @@ export function usageOffered() {
   try { return document.body && document.body.dataset ? document.body.dataset.usagePanel !== "0" : true; } catch { return true; }
 }
 
+// #1673: the rail. Wide enough for it beside the sidebar and the page: RAIL_MEDIA (followed as it changes). Shown or
+// hidden is this device's choice (agend_usage_rail; "0" = hidden, else shown) — a layout choice, not synced (#1665).
+export const RAIL_MEDIA = "(min-width: 1200px)";
+export const RAIL_KEY = "agend_usage_rail";
+/** The pages whose header has ◔ — the rail is theirs. */
+export const RAIL_PANELS = ["chat", "view", "details", "fleet"];
+export const usageRailStore = createStore({ open: true });
+/** A page load: this device's choice. */
+export function initUsageRail() { usageRailStore.set({ open: read(RAIL_KEY) !== "0" }); }
+export function setUsageRail(open) { write(RAIL_KEY, open ? "1" : "0"); usageRailStore.set({ open: !!open }); }
+const railQuery = () => { try { return typeof matchMedia === "function" ? matchMedia(RAIL_MEDIA) : null; } catch { return null; } };
+/** Whether the screen is wide enough for the rail, now and as it changes. */
+export function useRailWidth() {
+  const [wide, setWide] = useState(() => !!railQuery()?.matches);
+  useEffect(() => {
+    const q = railQuery();
+    if (!q) return undefined;
+    const on = () => setWide(!!q.matches);
+    on();
+    if (typeof q.addEventListener === "function") { q.addEventListener("change", on); return () => q.removeEventListener("change", on); }
+    if (typeof q.addListener === "function") { q.addListener(on); return () => q.removeListener(on); }
+    return undefined;
+  }, []);
+  return wide;
+}
+
+/**
+ * The rail: beside the page on a wide screen, on the pages with ◔, while this device shows it. Its reads are its own
+ * lease: they go on across navigation and end when it is hidden, the screen narrows, or it goes.
+ */
+export function UsageRail({ route }) {
+  const wide = useRailWidth();
+  const { open } = useStore(usageRailStore);
+  if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) return null;
+  return html`<aside class="u-rail" aria-label=${t("view.usage.title_plain")}>
+    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2>
+      <button type="button" class="icon-btn" onClick=${() => setUsageRail(false)} aria-label=${t("app.usageHide")} title=${t("app.usageHide")}><${Icon} name="close" size=${16} /></button></div>
+    <div class="u-rail-body"><${UsageBody} owner="usage-rail" /></div>
+  </aside>`;
+}
+
 /**
- * ◔: the usage dialog (usage-dialog.js). It belongs to the navigation that opened it (`navKey`, #1408 §4; #1563
+ * ◔: on a wide screen, shows or hides the rail (#1673); otherwise the usage dialog (usage-dialog.js). It belongs to the navigation that opened it (`navKey`, #1408 §4; #1563
  * review): another route, the same route again, another tab of the panel or a language switch closes it, and its
  * reads and timer end with it — the dialog's lease is that navigation's.
  */
 export function UsageButton({ navKey }) {
   const [openFor, setOpenFor] = useState(null);
+  const wide = useRailWidth();
+  const rail = useStore(usageRailStore);
+  // Widening ends a dialog opened on the narrower screen — closed for good, not hidden while wide: narrowing again
+  // (after the rail was hidden, or with this device's rail hidden) never brings it back (#1679 review).
+  useEffect(() => { if (wide) setOpenFor(null); }, [wide]);
   if (!usageOffered()) return null;
-  const open = openFor !== null && openFor === navKey;
-  return html`<button type="button" class="btn btn-ghost btn-sm hd-usage" onClick=${() => setOpenFor(navKey)} aria-label=${t("app.usage")} title=${t("app.usage")}>
+  const open = !wide && openFor !== null && openFor === navKey;
+  const click = () => (wide ? setUsageRail(!rail.open) : setOpenFor(navKey));
+  return html`<button type="button" class="btn btn-ghost btn-sm hd-usage" onClick=${click} aria-label=${t("app.usage")} title=${t("app.usage")}
+      aria-pressed=${wide ? (rail.open ? "true" : "false") : undefined}>
       <${Icon} name="chart" size=${16} /><span class="hide-narrow" aria-hidden="true">${t("app.usage")}</span></button>
     ${open ? html`<${UsageDialog} key=${navKey} owner=${navKey} onClose=${() => setOpenFor(null)} />` : null}`;
 }