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

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,11 @@ 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,
+    // #1685: host memory pressure slowing or holding new agents ("elevated" | "critical"), else null.
+    hostMemory: d.host_memory === "elevated" || d.host_memory === "critical" ? d.host_memory : 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); }
@@ -604,15 +628,16 @@ html.lb-open .scroller { overflow: hidden; }
 .v-filter-box input::placeholder { color: var(--text-3); }
 .v-filter-clear { width: 28px; height: 28px; }
 .v-filter .note { padding: var(--s-1) var(--s-1) 0; font-variant-numeric: tabular-nums; }
-/* alpha.2 (N1): status and CLI chips under the filter box — each a <details> with checkboxes. */
+/* alpha.2 (N1): status and CLI chips under the filter box — each a group of checkboxes under its header (#1700). */
 .nav-facets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-1) 0; }
 .nav-facet { font-size: var(--fs-xs); color: var(--text-2); }
-.nav-facet > summary { cursor: pointer; list-style: none; padding: 2px var(--s-2); border-radius: var(--r-sm); }
-.nav-facet > summary::-webkit-details-marker { display: none; }
-.nav-facet > summary::after { content: " ▾"; color: var(--text-3); }
-.nav-facet[open] > summary::after { content: " ▴"; }
-.nav-facet > summary:hover { background: var(--hover); }
-.nav-facet > summary:focus-visible { outline: 2px solid var(--accent); }
+/* #1700: a facet group's header — the whole row toggles its list; folded with a filter set, a short summary. */
+.nav-facet-head { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: 2px var(--s-2); border: 0; border-radius: var(--r-sm);
+  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
+.nav-facet-head:hover { background: var(--hover); }
+.nav-facet-head:focus-visible { outline: 2px solid var(--accent); }
+.nav-facet-head .caret { color: var(--text-3); flex: none; }
+.nav-facet-sum { min-width: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }
 .nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
 .nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
 .nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
@@ -660,6 +685,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); }
@@ -959,3 +990,6 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* #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; }
+/* #1682: a mention, as Discord draws one — accent text on a tint of it; the id (or the Telegram handle) on hover. */
+.md .mention { display: inline; padding: 0 0.2em; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-dim);
+  font-weight: var(--fw-medium); white-space: nowrap; }

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}`;
 }

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

@@ -14,6 +14,7 @@ import { chatPath, detailsPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
 import { Skeleton } from "./ui-states.js";
 import { viewStore } from "./view-roster-store.js";
+import { onPrefsChanged, prefInForce, prefsWritable, savePref } from "./app-prefs.js";
 import "./view-strings.js";
 
 /** view.* text with named values. */
@@ -23,7 +24,6 @@ function tn(key, values = {}) {
   return s;
 }
 const stored = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
-const store = (k, v) => { try { localStorage.setItem(k, v); } catch { /* this page only */ } };
 /** A row's instance name: `name` (status frames) or `instance_name` (View's roster). */
 const nameOf = (it) => (it && (it.name != null ? it.name : it.instance_name)) || "";
 
@@ -101,14 +101,24 @@ export function instanceTooltip(it) {
   return lines.join("\n");
 }
 
-// ── This browser's order (drag), folded groups and filter ──
+// ── The order (drag), folded groups and filter: host preferences since #1665 (nav.*), cached in this browser ──
 const SIDEBAR_ORDER_KEY = "agend_view_sidebar_order";   // View's key since #999: everyone's arrangement carries over
 const COLLAPSED_KEY = "agend_instance_collapsed";
 const FILTER_KEY = "agend_instance_filter";
+const FAVORITES_KEY = "agend_favorites";   // #1664
+/**
+ * A synced sidebar preference, as the JSON its reader parses: the value in force in memory (app-prefs.js — this
+ * page's own change, else the host's; a full or blocked storage never brings an old one back), else this browser's copy.
+ */
+function inForce(prefKey, lsKey) {
+  const p = prefInForce(prefKey);
+  if (!p) return stored(lsKey);
+  return p.value === undefined ? null : JSON.stringify(p.value);
+}
 function readOrder() {
   const groups = new Map(), insts = new Map();
   try {
-    const rows = JSON.parse(stored(SIDEBAR_ORDER_KEY) || "[]");
+    const rows = JSON.parse(inForce("nav.order", SIDEBAR_ORDER_KEY) || "[]");
     if (Array.isArray(rows)) for (const row of rows) {
       if (row && row.item_type === "group" && typeof row.item_name === "string") groups.set(row.item_name, Number(row.sort_index) || 0);
       else if (row && row.item_type === "instance" && typeof row.item_name === "string") insts.set(row.item_name, Number(row.sort_index) || 0);
@@ -117,15 +127,18 @@ function readOrder() {
   return { groups, insts };
 }
 function readCollapsed() {
-  try { const a = JSON.parse(stored(COLLAPSED_KEY) || "[]"); return new Set(Array.isArray(a) ? a.filter((x) => typeof x === "string") : []); } catch { return new Set(); }
+  try { const a = JSON.parse(inForce("nav.collapsed", COLLAPSED_KEY) || "[]"); return new Set(Array.isArray(a) ? a.filter((x) => typeof x === "string") : []); } catch { return new Set(); }
 }
 const strings = (a) => (Array.isArray(a) ? a.filter((x) => typeof x === "string") : []);
 function readFilter() {
   try {
-    const f = JSON.parse(stored(FILTER_KEY) || "{}");
+    const f = JSON.parse(inForce("nav.filter", FILTER_KEY) || "{}");
     return { q: f && typeof f.q === "string" ? f.q : "", status: strings(f && f.status).filter((s) => STATUS_FACETS.includes(s)), cli: strings(f && f.cli) };
   } catch { return { q: "", status: [], cli: [] }; }
 }
+function readFavorites() {
+  try { const a = JSON.parse(inForce("nav.favorites", FAVORITES_KEY) || "[]"); return Array.isArray(a) ? [...new Set(a.filter((x) => typeof x === "string"))] : []; } catch { return []; }
+}
 /** Display order: this browser's saved order first, then new groups/instances by tag and name. */
 export function computeOrder(roster, order) {
   const groups = new Map();
@@ -159,21 +172,58 @@ function moveIn(arr, moving, target, before) {
 }
 
 /** The list's state for the page's life: this browser's order, folded groups and filter (each also kept in storage). */
-export const navStore = createStore({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter() });
+export const navStore = createStore({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites() });
 /** Read them again from this browser's storage — what a page load does (the store above is made that way). */
-export function loadNavPrefs() { navStore.set({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter() }); }
+export function loadNavPrefs() { navStore.set({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites() }); }
 /** Change the filter ({ q?, status?, cli? }): the same on every page, and kept by this browser. */
 export function setNavFilter(patch) {
   const filter = { ...navStore.get().filter, ...patch };
   navStore.set({ filter });
-  store(FILTER_KEY, JSON.stringify(filter));
+  savePref("nav.filter", { q: filter.q, status: filter.status, cli: filter.cli });
+}
+function setCollapsed(collapsed) { navStore.set({ collapsed }); savePref("nav.collapsed", [...collapsed]); }
+// Another device rearranged, folded or filtered: this page's list follows (its cache is already updated).
+onPrefsChanged((keys) => { if (keys.has("nav.order") || keys.has("nav.collapsed") || keys.has("nav.filter") || keys.has("nav.favorites")) loadNavPrefs(); });
+
+// ── #1664: favorites — starred instances, pinned at the top in the order they were starred (or moved) ──
+export const MAX_FAVORITES = 50;
+/** The favorites that are instances now (`known`: the names listed): what is shown, and the base of every change — so
+ *  a deleted instance is dropped, never sent back to the host (which would refuse it). */
+function liveFavorites(known) { return navStore.get().favorites.filter((n) => known.has(n)); }
+function setFavorites(next) { navStore.set({ favorites: next }); savePref("nav.favorites", next); }
+/** Star or unstar `name`. False: not done (the list is full). */
+export function toggleFavorite(name, known) {
+  const cur = liveFavorites(known);
+  if (cur.includes(name)) { setFavorites(cur.filter((n) => n !== name)); return true; }
+  if (cur.length >= MAX_FAVORITES || !known.has(name)) return false;
+  setFavorites([...cur, name]);
+  return true;
 }
-function setCollapsed(collapsed) { navStore.set({ collapsed }); store(COLLAPSED_KEY, JSON.stringify([...collapsed])); }
+/** Move a favorite one place up (-1) or down (+1). */
+export function moveFavorite(name, delta, known) {
+  const cur = liveFavorites(known);
+  const from = cur.indexOf(name), to = from + delta;
+  if (from < 0 || to < 0 || to >= cur.length) return;
+  cur.splice(to, 0, cur.splice(from, 1)[0]);
+  setFavorites(cur);
+}
+// ── #1700: the filter's facet groups, open or folded — per device (localStorage; blocked or full storage: this page only) ──
+const FACETS_KEY = "agend_nav_facets";
+function readFacetsOpen() {
+  try {
+    const v = JSON.parse(stored(FACETS_KEY) || "{}");
+    return { status: !!(v && v.status === true), cli: !!(v && v.cli === true) };
+  } catch { return { status: false, cli: false }; }
+}
+function writeFacetsOpen(open) { try { localStorage.setItem(FACETS_KEY, JSON.stringify({ status: !!open.status, cli: !!open.cli })); } catch { /* this page only */ } }
+
+/** The Favorites group's key among the tag groups: no tag can be it (a group name is never a control character). */
+const FAV_GROUP = "\u0000favorites";
 function persistOrder(groupNames, instByGroup) {
   const rows = [];
   groupNames.forEach((g, i) => rows.push({ item_type: "group", item_name: g, sort_index: i, group_name: null }));
   for (const g of groupNames) (instByGroup.get(g) || []).forEach((n, j) => rows.push({ item_type: "instance", item_name: n, sort_index: j, group_name: g }));
-  store(SIDEBAR_ORDER_KEY, JSON.stringify(rows));
+  savePref("nav.order", rows);
   navStore.set({ order: { groups: new Map(groupNames.map((g, i) => [g, i])), insts: new Map(rows.filter((r) => r.item_type === "instance").map((r) => [r.item_name, r.sort_index])) } });
 }
 
@@ -259,6 +309,12 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const filterRef = useRef(null);
   const list = useRef(null);
   const drag = useRef(null);
+  // #1700: which facet groups are open — this device's (screen layout, not a synced preference), read when the list mounts.
+  const [facetOpen, setFacetOpen] = useState(readFacetsOpen);
+  const toggleFacet = (key) => setFacetOpen((cur) => { const next = { ...cur, [key]: !cur[key] }; writeFacetsOpen(next); return next; });
+  // #1664: "☆ Edit" — the stars on every row (on a phone the only way to them) and ↑ ↓ on the favorites — only on the
+  // full list, as drag: in a filtered one the row above may not be the one above in the list (#1677 review).
+  const [editing, setEditing] = useState(false);
   // Where a row goes: the view the page is in (#1523 §3.1). View → View; Details, or a Fleet tab (Q4 = A), → Details;
   // everywhere else → Chat. The anonymous reader only ever has View.
   const rowPath = viewOnly || (route && route.panel === "view") ? viewPath
@@ -269,8 +325,18 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const byName = new Map(items.map((it) => [nameOf(it), it]));
   const facetOf = (name) => statusFacet(byName.get(name), own(exec, name) ? exec[name] : null, own(awaiting, name) ? awaiting[name] : null);
   const { groupNames, instByGroup } = computeOrder(items, nav.order);
+  // #1664: the favorites that are instances now, as a group of their own on top; the other groups keep the rest, in
+  // their order. Changing them: a signed-in page that may write preferences (not the public link, not the anonymous
+  // reader — they still see the list).
+  const known = new Set(byName.keys());
+  const favs = nav.favorites.filter((n) => known.has(n));
+  const favSet = new Set(favs);
+  const canStar = !viewOnly && prefsWritable();
+  const shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
+  const shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
+  if (favs.length) shownInsts.set(FAV_GROUP, favs);
   const f = nav.filter;
-  const shown = filterSidebar(groupNames, instByGroup, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
+  const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
   const backends = [...new Set(items.map((it) => it.backend).filter((b) => typeof b === "string" && b))].sort((a, b) => backendLabel(a).localeCompare(backendLabel(b)));
   // #1630: a display name two rows share would tell them apart from nothing — only then does the row keep its name too.
   const labelCount = new Map();
@@ -281,7 +347,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // Drag to reorder: only the full list (a filtered subset would be ambiguous), groups among groups, instances within
   // their group.
   const dragProps = (item) => shown.active ? {} : {
-    draggable: "true",
+    draggable: true,
     onDragStart: (e) => { drag.current = item; e.currentTarget.classList.add("dragging"); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", item.name); } catch { /* Firefox needs data */ } },
     onDragEnd: (e) => { e.currentTarget.classList.remove("dragging"); drag.current = null; },
     onDragOver: (e) => {
@@ -307,47 +373,74 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       persistOrder(names, insts);
     },
   };
-  const chips = (key, values, label, text) => html`<details class="nav-facet">
-    <summary>${label}${f[key].length ? html` <span class="nav-facet-n">${f[key].length}</span>` : null}</summary>
-    <div class="nav-facet-list" role="group" aria-label=${label}>${values.map((value) => html`<label key=${value} class="nav-chip">
-      <input type="checkbox" checked=${f[key].includes(value)} onChange=${() => flip(key, value)} /><span>${text(value)}</span></label>`)}</div>
-  </details>`;
+  // #1700: a facet group (Status, CLI) folds under a real header button. Folded with a filter set, the header says so:
+  // one or two choices by name, more as "N selected" — a filter is never out of sight.
+  const chips = (key, values, label, text) => {
+    const open = !!facetOpen[key];
+    const sel = f[key];
+    const summary = !open && sel.length ? (sel.length <= 2 ? sel.map(text).join(", ") : tn("facetSelected", { n: sel.length })) : "";
+    const hint = tn(open ? "facetHide" : "facetShow", { group: label });
+    return html`<div class=${`nav-facet${open ? " open" : ""}`}>
+      <button type="button" class="nav-facet-head" aria-expanded=${open ? "true" : "false"} aria-controls=${`nav-facet-${key}`}
+        title=${summary ? `${hint} (${label} · ${summary})` : hint} onClick=${() => toggleFacet(key)}>
+        <${Icon} name="chevron" size=${12} cls=${open ? "caret" : "caret folded"} /><span class="nav-facet-label">${label}</span>
+        ${summary ? html`<span class="nav-facet-sum">· ${summary}</span>` : sel.length ? html`<span class="nav-facet-n">${sel.length}</span>` : null}
+      </button>
+      ${open ? html`<div id=${`nav-facet-${key}`} class="nav-facet-list" role="group" aria-label=${label}>${values.map((value) => html`<label key=${value} class="nav-chip">
+        <input type="checkbox" checked=${sel.includes(value)} onChange=${() => flip(key, value)} /><span>${text(value)}</span></label>`)}</div>` : null}
+    </div>`;
+  };
+  const row = (name, g, i, count) => {
+    const it = byName.get(name);
+    const label = labelOf(it);
+    // The instance name under a display name only when another row has the same display name.
+    const twin = label !== name && (labelCount.get(label) || 0) > 1 ? name : "";
+    const facet = facetOf(name);
+    const waiting = own(awaiting, name) ? awaiting[name] : null;
+    const on = name === active;
+    const fav = g === FAV_GROUP, starred = favSet.has(name);
+    const full = !starred && favs.length >= MAX_FAVORITES;
+    return html`<li key=${name} class="v-li"><a class=${`inst v-inst${on ? " active" : ""}`} href=${rowPath(name)} title=${instanceTooltip(it)}
+        aria-current=${on ? "page" : undefined} onClick=${onPick} ...${fav ? {} : dragProps({ type: "instance", name, group: g })}>
+      <${InstanceAvatar} it=${it} state=${dotState(it, own(exec, name) ? exec[name] : null, waiting)} />
+      <span class="inst-text"><span class="inst-name">${label}</span>
+        ${twin || facet === "needs" ? html`<span class="inst-sub">${twin ? html`<span class="inst-alias inst-id">${twin}</span>` : null}
+          ${facet === "needs" ? html`<span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span>` : null}</span>` : null}</span>
+      <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span>
+      <span class=${`cli-icon cli-${KNOWN_BACKENDS.has(it.backend) ? it.backend : "other"}`} title=${backendLabel(it.backend)} aria-label=${tn("tooltipBackend", { value: backendLabel(it.backend) })}></span>
+    </a>${fav && editing && canStar ? html`<button type="button" class="icon-btn inst-move" aria-label=${tn("favUp", { name: label })}
+        title=${shown.active ? tn("favFiltered") : tn("favUp", { name: label })} disabled=${shown.active || i === 0} onClick=${() => { if (!shown.active) moveFavorite(name, -1, known); }}><${Icon} name="up" size=${14} /></button><button type="button" class="icon-btn inst-move"
+        aria-label=${tn("favDown", { name: label })} title=${shown.active ? tn("favFiltered") : tn("favDown", { name: label })} disabled=${shown.active || i === count - 1}
+        onClick=${() => { if (!shown.active) moveFavorite(name, 1, known); }}><${Icon} name="down" size=${14} /></button>` : null}${canStar
+      ? html`<button type="button" class=${`icon-btn inst-star${starred ? " on" : ""}`} aria-pressed=${starred ? "true" : "false"} disabled=${full}
+          aria-label=${tn(starred ? "favRemove" : "favAdd", { name: label })} title=${full ? tn("favFull", { max: MAX_FAVORITES }) : tn(starred ? "favRemove" : "favAdd", { name: label })}
+          onClick=${() => toggleFavorite(name, known)}><${Icon} name="star" size=${14} /></button>` : null}</li>`;
+  };
   // The list scrolls; the filter under it stays in view (#999), so it sits outside the scrolling section.
-  return html`<div class="view-roster inst-nav">
+  return html`<div class=${`view-roster inst-nav${editing && canStar ? " fav-editing" : ""}`}>
     <div class="side-section" id="instanceList" ref=${list}>
-    <h2 class="side-label">${tn("instancesLabel")}</h2>
+    <div class="inst-head"><h2 class="side-label">${tn("instancesLabel")}</h2>
+      ${canStar && items.length ? html`<button type="button" class="chip-btn fav-edit" aria-pressed=${editing ? "true" : "false"} onClick=${() => setEditing(!editing)}>
+        ${editing ? tn("favDone") : html`<${Icon} name="star" size=${12} />${tn("favEdit")}`}</button>` : null}</div>
     ${!loaded ? html`<${Skeleton} lines=${4} />` : !items.length ? html`<p class="side-empty">${t("app.noInstances")}</p>` : null}
     ${shown.groups.map(({ group: g, names }) => {
+      // #1664: Favorites — always open, not dragged (↑ ↓ in Edit), named in the page's language.
+      if (g === FAV_GROUP) return html`<div key=${g} class="v-group v-fav" role="group" aria-label=${tn("favorites")}>
+        <div class="v-group-head fav-head"><${Icon} name="star" size=${14} cls="fav-mark" /><span class="grow">${tn("favorites")}</span><span class="count">${names.length}</span></div>
+        <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
       const folded = nav.collapsed.has(g);
       return html`<div key=${g} class="v-group">
         <button type="button" class="v-group-head" aria-expanded=${folded ? "false" : "true"} onClick=${() => toggle(g)}
           title=${tn(folded ? "expandGroup" : "collapseGroup", { group: g })} ...${dragProps({ type: "group", name: g })}>
           <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${g}</span><span class="count">${names.length}</span></button>
-        ${folded ? null : html`<ul class="inst-list">${names.map((name) => {
-          const it = byName.get(name);
-          const label = labelOf(it);
-          // The instance name under a display name only when another row has the same display name.
-          const twin = label !== name && (labelCount.get(label) || 0) > 1 ? name : "";
-          const facet = facetOf(name);
-          const waiting = own(awaiting, name) ? awaiting[name] : null;
-          const on = name === active;
-          return html`<li key=${name}><a class=${`inst v-inst${on ? " active" : ""}`} href=${rowPath(name)} title=${instanceTooltip(it)}
-              aria-current=${on ? "page" : undefined} onClick=${onPick} ...${dragProps({ type: "instance", name, group: g })}>
-            <${InstanceAvatar} it=${it} state=${dotState(it, own(exec, name) ? exec[name] : null, waiting)} />
-            <span class="inst-text"><span class="inst-name">${label}</span>
-              ${twin || facet === "needs" ? html`<span class="inst-sub">${twin ? html`<span class="inst-alias inst-id">${twin}</span>` : null}
-                ${facet === "needs" ? html`<span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span>` : null}</span>` : null}</span>
-            <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span>
-            <span class=${`cli-icon cli-${KNOWN_BACKENDS.has(it.backend) ? it.backend : "other"}`} title=${backendLabel(it.backend)} aria-label=${tn("tooltipBackend", { value: backendLabel(it.backend) })}></span>
-          </a></li>`;
-        })}</ul>`}
+        ${folded ? null : html`<ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul>`}
       </div>`;
     })}
     ${loaded && shown.active && !shown.groups.length ? html`<p class="side-empty">${tn("filterNone")}</p>` : null}
     </div>
     <div class="v-filter">
       <label class="v-filter-box"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("filterPh")}</span>
-        <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck="false" placeholder=${tn("filterPh")} value=${f.q}
+        <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck=${false} placeholder=${tn("filterPh")} value=${f.q}
           onInput=${(e) => setNavFilter({ q: e.target.value })}
           onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); setNavFilter({ q: "" }); } }} />
         ${f.q ? html`<button type="button" class="icon-btn v-filter-clear" aria-label=${tn("filterClear")} title=${tn("filterClear")}

package/dist/ui/shared/panel-view.js

@@ -201,7 +201,13 @@ function Terminal({ name, lease, density }) {
   const term = useRef(null), pre = useRef(null);
   const grid = useRef({ cols: 0, rows: 0, applied: 0, key: "" });
   const [problem, setProblem] = useState(null);
+  // #1674: the text size as of this render. The pane refresh and the resize handlers below are set up once per mount
+  // and keep the fit() of that render; reading the size here, not from that render's props, keeps them on the current
+  // choice (they used to put the mount-time size back within one 800 ms refresh).
+  const dens = useRef(density);
+  dens.current = density;
   const fit = () => {
+    const density = dens.current;
     const g = grid.current, box = term.current, p = pre.current;
     if (!box || !p || g.cols < 1 || g.rows < 1) return;
     const cs = getComputedStyle(box);