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

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

@@ -10,10 +10,11 @@
 import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
-import { chatPath, detailsPath, viewPath } from "./app-route.js";
+import { chatPath, detailsPath, logPath, 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,61 @@ 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() });
+  namesStore.set({ primary: readNamesPrimary() });
+}
 /** 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;
+}
+/** 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 setCollapsed(collapsed) { navStore.set({ collapsed }); store(COLLAPSED_KEY, JSON.stringify([...collapsed])); }
+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])) } });
 }
 
@@ -195,6 +248,35 @@ export function labelOf(it) {
   const d = it && typeof it.display_name === "string" ? it.display_name.trim() : "";
   return d || nameOf(it);
 }
+
+// ── #1722: both names — which one leads is a synced preference (#1665 "names.primary", default the nickname) ──
+const NAMES_KEY = "agend_names_primary";
+function readNamesPrimary() {
+  const p = prefInForce("names.primary");
+  const v = p ? p.value : stored(NAMES_KEY);
+  return v === "instance" ? "instance" : "nickname";
+}
+/** { primary: "nickname" | "instance" } — every surface that names an instance (sidebar, chat header, Needs you) reads it. */
+export const namesStore = createStore({ primary: readNamesPrimary() });
+export function setNamesPrimary(value) {
+  const primary = value === "instance" ? "instance" : "nickname";
+  namesStore.set({ primary });
+  savePref("names.primary", primary);
+}
+onPrefsChanged((keys) => { if (keys.has("names.primary")) namesStore.set({ primary: readNamesPrimary() }); });
+/**
+ * An instance's two names as the web shows them: the one leading (`primary`) and the other (`secondary`), or "" when
+ * there is no other — no nickname, or a nickname that is the instance name itself (one line).
+ */
+export function namesOf(it, primary = namesStore.get().primary) {
+  const real = nameOf(it);
+  const nick = it && typeof it.display_name === "string" ? it.display_name.trim() : "";
+  if (!nick || nick === real) return { primary: real, secondary: "" };
+  return primary === "instance" ? { primary: real, secondary: nick } : { primary: nick, secondary: real };
+}
+
+/** #1722: the CLI on the avatar's corner — a letter, so it reads without colour (its name is in the row's text too). */
+const CLI_MONOGRAM = { "claude-code": "C", codex: "X", "kiro-cli": "K", grok: "G", antigravity: "A", opencode: "O", muse: "M" };
 // One path segment under /ui/img/<kind>/ — no further slash or backslash, and not a dot segment ("." / ".." or their
 // %2e spellings, which a browser resolves too): the picture can only ever be one of those routes (#1642 review).
 const sameOrigin = (src) => typeof src === "string"
@@ -205,7 +287,8 @@ export function avatarOf(it) {
   if (a && a.kind === "image" && sameOrigin(a.src)) return { kind: "image", src: a.src };
   if (a && a.kind === "emoji" && sameOrigin(a.src)) return { kind: "emoji", src: a.src, alt: typeof a.alt === "string" ? a.alt : "" };
   if (a && a.kind === "emoji" && typeof a.text === "string" && a.text.trim()) return { kind: "emoji", text: a.text.trim() };
-  return { kind: "initial", text: a && a.kind === "initial" && typeof a.text === "string" && a.text ? a.text : firstCharacter(labelOf(it)) };
+  // #1722: the initial is the leading name's ("Names"), not the server's (which is always the nickname's).
+  return { kind: "initial", text: firstCharacter(namesOf(it).primary) || (a && a.kind === "initial" && typeof a.text === "string" ? a.text : "") };
 }
 const ACCENT = /^#[0-9a-f]{6}$/i;
 /** The status dot on the avatar: needs you, crashed, paused, stopped, looks stuck, working, idle — colour AND a label. */
@@ -224,7 +307,7 @@ const DOT = {
 export function dotLabel(state) { return (DOT[state] || DOT.stopped)[1](); }
 
 /** An instance's avatar with its status dot. The ring (its bot's colour) is a CSS custom property set through the CSSOM. */
-export function InstanceAvatar({ it, state }) {
+export function InstanceAvatar({ it, state, cli = false }) {
   const a = avatarOf(it);
   const [broken, setBroken] = useState("");
   const el = useRef(null);
@@ -235,12 +318,13 @@ export function InstanceAvatar({ it, state }) {
     if (accent) node.style.setProperty("--ring", accent); else node.style.removeProperty("--ring");
   }, [accent]);
   const src = a.kind !== "initial" && a.src && broken !== a.src ? a.src : "";
-  const text = a.kind === "emoji" && a.text ? a.text : a.kind === "initial" ? a.text : firstCharacter(labelOf(it));
+  const text = a.kind === "emoji" && a.text ? a.text : a.kind === "initial" ? a.text : firstCharacter(namesOf(it).primary);
   const [cls] = DOT[state] || DOT.stopped;
   const label = dotLabel(state);
   return html`<span ref=${el} class=${`av${accent ? " ring" : ""}${a.kind === "emoji" ? " av-emoji" : ""}`}>
     ${src ? html`<img src=${src} alt="" decoding="async" onError=${() => setBroken(src)} />` : html`<span class="av-text" aria-hidden="true">${text}</span>`}
-    <span class=${`av-dot dot ${cls}`} role="img" aria-label=${label} title=${label}></span></span>`;
+    <span class=${`av-dot dot ${cls}`} role="img" aria-label=${label} title=${label}></span>${cli
+      ? html`<span class="av-cli" aria-hidden="true" title=${backendLabel(it.backend)}>${CLI_MONOGRAM[it.backend] || "·"}</span>` : null}</span>`;
 }
 
 // ── The list ──
@@ -256,32 +340,47 @@ const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet ===
  */
 export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting = {}, viewOnly = false, onPick }) {
   const nav = useStore(navStore);
+  const names = useStore(namesStore);   // #1722: which name leads
   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
+    : route && route.panel === "log" ? logPath                                  // #1218: Log → Log
     : route && (route.panel === "details" || route.panel === "fleet") ? detailsPath : chatPath;
-  const active = route && (route.panel === "chat" || route.panel === "view" || route.panel === "details") ? route.instance : null;
+  const active = route && (route.panel === "chat" || route.panel === "view" || route.panel === "log" || route.panel === "details") ? route.instance : null;
   useLayoutEffect(() => { keepActiveInView(list.current); }, [active, items.length, loaded]);
   const own = (map, name) => Object.prototype.hasOwnProperty.call(map, name);
   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();
-  for (const it of items) { const l = labelOf(it); labelCount.set(l, (labelCount.get(l) || 0) + 1); }
   const toggle = (g) => { const c = new Set(navStore.get().collapsed); if (c.has(g)) c.delete(g); else c.add(g); setCollapsed(c); };
   // From the store, not this render's copy: two clicks before the next render must both count.
   const flip = (key, value) => { const cur = new Set(navStore.get().filter[key]); if (cur.has(value)) cur.delete(value); else cur.add(value); setNavFilter({ [key]: [...cur] }); };
   // 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,58 +406,86 @@ 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);
+    // #1722: both names, the preferred one first; one line when there is no other.
+    const { primary: label, secondary } = namesOf(it, names.primary);
+    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)} cli=${true} />
+      <span class="inst-text"><span class="inst-name" title=${label}>${label}</span>
+        ${secondary ? html`<span class="inst-alt" title=${secondary}>${secondary}</span>` : null}
+        ${facet === "needs" ? html`<span class="inst-sub"><span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span></span>` : null}
+        <span class="sr-only">${tn("tooltipBackend", { value: backendLabel(it.backend) })}</span></span>
+      <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</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")}
           onClick=${() => { setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
       </label>
       <div class="nav-facets">
-        ${viewOnly ? null : chips("status", STATUS_FACETS, tn("filterStatus"), statusText)}
-        ${backends.length > 1 || f.cli.length ? chips("cli", backends, tn("filterCli"), backendLabel) : null}
-        ${f.status.length || f.cli.length ? html`<button type="button" class="chip-btn nav-facet-reset" onClick=${() => setNavFilter({ status: [], cli: [] })}>${tn("filterFacetsReset")}</button>` : null}
+        <div class="nav-facet-groups">
+          ${viewOnly ? null : chips("status", STATUS_FACETS, tn("filterStatus"), statusText)}
+          ${backends.length > 1 || f.cli.length ? chips("cli", backends, tn("filterCli"), backendLabel) : null}
+          ${f.status.length || f.cli.length ? html`<button type="button" class="chip-btn nav-facet-reset" onClick=${() => setNavFilter({ status: [], cli: [] })}>${tn("filterFacetsReset")}</button>` : null}
+        </div>
+        <p class="note nav-shown" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
       </div>
-      <p class="note" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
     </div>
   </div>`;
 }

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

@@ -1,16 +1,19 @@
 // #1523 N2 (§3.2): the instance view switch — Chat | View | Details of ONE instance. Each segment is a link to that
 // view's URL for the same instance, so switching keeps the instance (and the sidebar, which is never remounted).
-// Desktop: links in the header; a phone: the same three as top tabs under it (app.css). The anonymous View reader
+// Desktop: links in the header; a phone: the same four as top tabs under it (app.css). The anonymous View reader
 // gets none (Chat and Details need a session): the caller does not render it there.
 import { html } from "./app-html.js";
 import { t } from "./app-i18n.js";
-import { chatPath, detailsPath, viewPath } from "./app-route.js";
+import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 
-/** current: "chat" | "view" | "details". */
+/**
+ * current: "chat" | "view" | "log" | "details". #1218: Log sits between View and Details. `data-label`: each tab is as
+ * wide as its label in the current tab's weight (app.css), so the bar keeps its size whichever tab is current.
+ */
 export function InstanceSwitch({ name, current }) {
   const seg = (key, href, label) => html`<a key=${key} class=${`seg-item${current === key ? " active" : ""}`} href=${href}
-    aria-current=${current === key ? "page" : undefined}>${label}</a>`;
+    aria-current=${current === key ? "page" : undefined} data-label=${label}>${label}</a>`;
   return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
-    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("details", detailsPath(name), t("app.details"))}
+    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("log", logPath(name), t("app.log"))}${seg("details", detailsPath(name), t("app.details"))}
   </nav>`;
 }

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

@@ -114,7 +114,9 @@ export { viewStore };
 // ── The panel ──
 
 // readStream: one stream of reads under a lease (read-stream.js; View's pane and roster use it).
-const MIN_PX = 12, MAX_PX = 22;
+// S / M / L: the fitted size kept within 12–22 px, then scaled. Fit (#1869): never larger than what fits — only a 6 px
+// floor for legibility (a grid too wide for the box even at 6 px, e.g. 200 columns on a phone, still scrolls).
+const MIN_PX = 12, MAX_PX = 22, FIT_FLOOR_PX = 6;
 
 export function ViewPanel({ route, navKey }) {
   const lease = useLease(navKey);
@@ -201,7 +203,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);
@@ -213,10 +221,11 @@ function Terminal({ name, lease, density }) {
     const lh = parseFloat(pcs.lineHeight) / parseFloat(pcs.fontSize);
     const lineH = Number.isFinite(lh) && lh > 0 ? lh : 1.2;
     let size = Math.min(innerW / (g.cols * glyphRatio(p)), innerH / (g.rows * lineH)) * 0.995;
-    size = Math.max(MIN_PX, Math.min(size, MAX_PX)) * (density === "fit" ? 1 : VIEW_SCALE[density] || 1);
-    size = Math.max(8, Math.min(size, 32));
+    if (density === "fit") size = Math.max(FIT_FLOOR_PX, Math.min(size, MAX_PX));
+    else size = Math.max(8, Math.min(Math.max(MIN_PX, Math.min(size, MAX_PX)) * (VIEW_SCALE[density] || 1), 32));
     g.key = key;
-    if (Math.abs(size - g.applied) < 0.75) return;
+    // A small change is skipped only when growing (the size applied still fits); a smaller box always shrinks it.
+    if (size >= g.applied && size - g.applied < 0.75) return;
     g.applied = size;
     p.style.fontSize = `${size.toFixed(2)}px`;          // CSSOM, never a style attribute (#1300)
   };
@@ -308,6 +317,8 @@ function EditProfile({ it, onClose }) {
   const [f, setF] = useState({ display: it.display_name || "", role: it.role || "", desc: it.description || "" });
   const [busy, setBusy] = useState(false);
   const [msg, setMsg] = useState(null);
+  // #1630 follow-up: the uploaded picture is removed on Save (Cancel keeps it); a newly picked file wins over removing.
+  const [removePic, setRemovePic] = useState(false);
   const file = useRef(null);
   async function save() {
     if (busy) return;
@@ -317,6 +328,7 @@ function EditProfile({ it, onClose }) {
     const name = encodeURIComponent(it.instance_name);
     const draft = { display_name: f.display, role: f.role, description: f.desc };
     const picked = file.current && file.current.files && file.current.files[0];
+    const removing = removePic;
     try {
       const r = await fetch(`/api/profile/${name}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(draft) });
       if (!lease.current()) return;
@@ -325,6 +337,9 @@ function EditProfile({ it, onClose }) {
       if (picked) {
         const ar = await fetch(`/api/avatar/${name}`, { method: "POST", headers: { "Content-Type": picked.type }, body: picked });
         if (!ar.ok) { const e = await ar.json().catch(() => ({})); throw new Error(tn("avatarFailed", { error: e.error || ar.status })); }
+      } else if (removing) {                              // a newly picked file replaces it instead
+        const dr = await fetch(`/api/avatar/${name}`, { method: "DELETE" });
+        if (!dr.ok) { const e = await dr.json().catch(() => ({})); throw new Error(tn("avatarRemoveFailed", { error: e.error || dr.status })); }
       }
       if (!lease.current()) return;
       setBusy(false);
@@ -339,6 +354,8 @@ function EditProfile({ it, onClose }) {
       <label class="field"><span>${tn("role")}</span><input value=${f.role} onInput=${(e) => setF({ ...f, role: e.target.value })} /></label>
       <label class="field"><span>${tn("description")}</span><textarea rows="3" value=${f.desc} onInput=${(e) => setF({ ...f, desc: e.target.value })}></textarea></label>
       <label class="field"><span>${tn("avatar")}</span><input ref=${file} type="file" accept="image/png,image/jpeg,image/gif,image/webp" /></label>
+      ${it.has_avatar ? html`<div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${removePic ? "true" : "false"}
+        onClick=${() => setRemovePic(!removePic)}>${tn(removePic ? "keepPicture" : "removePicture")}</button>${removePic ? html`<span class="muted">${tn("removePictureNote")}</span>` : null}</div>` : null}
     </fieldset></form>
     ${msg ? html`<p class="err" role="alert">${msg}${msg === tn("signInToSave") ? html` <a class="link" href=${signInHref()}>${t("app.signIn")}</a>` : null}</p>` : null}
   </${Dialog}>`;

package/dist/ui/shared/signin.js

@@ -11,10 +11,12 @@
   const $ = (id) => document.getElementById(id);
   const T = {
     en: {
-      checking: "Checking your session…", title: "Sign in to AgEnD", lead: "Enter the one-time code from your chat channel.",
+      checking: "Checking your session…", title: "Sign in to AgEnD", lead: "Enter your sign-in code.",
       label: "One-time code", submit: "Sign in", working: "Signing in…",
-      hint: "Send /web to your AgEnD bot, or run “agend web --code” on the host. A code works once and expires in 5 minutes.",
-      refused: "That code did not work — it may be wrong, expired or already used. Ask for a new one with /web.",
+      hint: "No code? Send /web in General, then press a sign-in button to get one.",
+      nobot: "No chat bot?", nobot_body: "Ask the operator to run agend web --code on the AgEnD computer.",
+      refused: "The code is invalid or no longer works. Send /web in General, then press a sign-in button for a new code.",
+      unconfirmed: "Sign-in could not be confirmed. Get a new code and try again; if it keeps failing, contact the operator.",
       paused: "Too many wrong codes — sign-in is paused for a few minutes.",
       network: "Could not reach AgEnD. Check the connection and try again.",
       resend: "Send me a new code", resent: "A new code was sent to you privately in chat. Enter it above.",
@@ -22,10 +24,12 @@
       resend_refused: "A new code could not be sent. Ask for one with /web.",
     },
     "zh-TW": {
-      checking: "正在確認登入狀態…", title: "登入 AgEnD", lead: "請輸入聊天頻道給你的一次性登入碼。",
+      checking: "正在確認登入狀態…", title: "登入 AgEnD", lead: "輸入登入碼。",
       label: "一次性登入碼", submit: "登入", working: "登入中…",
-      hint: "在 AgEnD bot 傳 /web，或在主機執行「agend web --code」。登入碼只能用一次，5 分鐘內有效。",
-      refused: "登入碼無效：可能輸入錯誤、已過期或已使用。請用 /web 再要一個。",
+      hint: "沒收到？在 General 傳 /web，再按登入按鈕取碼。",
+      nobot: "沒有聊天 bot？", nobot_body: "請管理員在 AgEnD 電腦執行 agend web --code。",
+      refused: "登入碼無效或已失效。請在 General 傳 /web，再按登入按鈕取新碼。",
+      unconfirmed: "登入暫時無法確認。請重新取碼再試；若仍失敗，請聯絡管理員。",
       paused: "錯誤次數過多，登入暫停幾分鐘。",
       network: "連不上 AgEnD，請檢查連線後再試。",
       resend: "傳一組新的登入碼給我", resent: "新的登入碼已私訊給你，請在上方輸入。",
@@ -47,8 +51,8 @@
       history.replaceState(null, "", here.pathname + here.search + here.hash);
     }
   } catch { /* nothing to clean */ }
-  // The command in the hint is a <code> that never breaks across lines (a break inside "--code" reads as two dashes
-  // and a word, alpha.2 sweep); the text around it is text.
+  // The command in the "No chat bot?" help is a <code> that never breaks across lines (a break inside "--code" reads as
+  // two dashes and a word, alpha.2 sweep); the text around it is text.
   const CMD = "agend web --code";
   document.querySelectorAll("[data-i18n]").forEach((el) => {
     const text = t(el.getAttribute("data-i18n"));
@@ -163,7 +167,9 @@
         body: JSON.stringify({ code: $("code").value }),
       });
       if (r.ok) { clearBounce(); location.replace(nextTarget()); return; }
-      msg.textContent = r.status === 429 ? t("paused") : t("refused");
+      // #1854: a 5xx is the server failing to confirm the sign-in (503: a public link's notice did not go out), not a
+      // wrong code — say so. The code is spent either way: the way on is a new one.
+      msg.textContent = r.status === 429 ? t("paused") : r.status >= 500 ? t("unconfirmed") : t("refused");
     } catch {
       msg.textContent = t("network");
     }

package/dist/ui/shared/theme.js

@@ -1,29 +1,61 @@
 // Light / dark for a panel (#1307). Loaded from /assets/theme.js in <head>, before the page paints, so a chosen theme
 // never flashes the other one first. "system" (the default) follows the device's prefers-color-scheme through CSS;
-// "light" or "dark" is this browser's own choice and lives in localStorage, like agend_lang.
+// "light" or "dark" lives in localStorage, like agend_lang.
+//
+// #1665: the choice is kept on the host and follows the person between devices. The signed-in app's page carries the
+// host's values in <html data-prefs>: the host's theme is what this page paints and holds, whatever this browser's
+// storage does (the copy kept there is best effort — a full or blocked storage changes nothing on screen). Nothing
+// chosen on the host: a device already in step with it (app-prefs.js's migration done) takes the default; one not yet
+// in step keeps its own until it has uploaded it. Without data-prefs (the sign-in page, the anonymous View reader) this
+// browser's copy decides, as before.
 //
 // A page's tokens follow the pattern: dark under :root, light under @media (prefers-color-scheme: light) for
 // :root:not([data-theme="dark"]), and again under :root[data-theme="light"].
 (function () {
   "use strict";
   var KEY = "agend_theme";
+  var SYNCED_FLAG = "agend_prefs_synced";
   function valid(v) { return v === "light" || v === "dark" ? v : "system"; }
   function read() {
     try { return valid(localStorage.getItem(KEY)); } catch (e) { return "system"; }   // storage blocked: follow the device
   }
+  function cache(v) {
+    try { if (v === "system") localStorage.removeItem(KEY); else localStorage.setItem(KEY, v); } catch (e) { /* this page only */ }
+  }
   function apply(v) {
     var root = document.documentElement;
     if (v === "system") root.removeAttribute("data-theme");
     else root.setAttribute("data-theme", v);
   }
-  apply(read());
+  /** The host's choice for this page: a theme, or null — none known here (no data-prefs, or not in step yet). */
+  function hostChoice() {
+    var d = null;
+    try { d = JSON.parse(document.documentElement.getAttribute("data-prefs") || "null"); } catch (e) { d = null; }
+    if (!d || typeof d !== "object" || !d.values || typeof d.values !== "object") return null;
+    var v = d.values.theme;
+    if (v === "light" || v === "dark" || v === "system") return v;
+    var inStep = false;
+    try { inStep = localStorage.getItem(SYNCED_FLAG) === "1"; } catch (e) { inStep = false; }
+    return inStep ? "system" : null;
+  }
+  var current = hostChoice();
+  if (current !== null) cache(current); else current = read();
+  apply(current);
+  var listeners = [];
   window.AgendTheme = {
-    get: read,
-    /** Choose "system", "light" or "dark" for this browser; applied now even when it cannot be stored. */
+    /** The theme this page shows. */
+    get: function () { return current; },
+    /** Choose "system", "light" or "dark" (this browser's copy; app-prefs.js keeps the host's); applied now even when it cannot be stored. */
     set: function (v) {
-      v = valid(v);
-      try { if (v === "system") localStorage.removeItem(KEY); else localStorage.setItem(KEY, v); } catch (e) { /* this page only */ }
-      apply(v);
+      current = valid(v);
+      cache(current);
+      apply(current);
+      for (var i = 0; i < listeners.length; i++) { try { listeners[i](current); } catch (e) { /* one listener's error stops no other */ } }
+    },
+    /** Call `fn` with the theme whenever it changes on this page (an open Preferences shows it); returns the unsubscribe. */
+    onChange: function (fn) {
+      listeners.push(fn);
+      return function () { var i = listeners.indexOf(fn); if (i >= 0) listeners.splice(i, 1); };
     },
   };
 })();