@songsid/agend 2.3.0-beta.1 → 2.3.0-beta.11

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

@@ -9,7 +9,7 @@
 // Public (/assets/): an anonymous View reader gets the same list, fed by View's roster read instead of status frames.
 import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
-import { appStore, createStore, useStore } from "./app-store.js";
+import { appStore, createStore, guestPage, useStore } from "./app-store.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
 import { Skeleton } from "./ui-states.js";
@@ -30,12 +30,52 @@ const stored = (k) => { try { return localStorage.getItem(k); } catch { return n
 const nameOf = (it) => (it && (it.name != null ? it.name : it.instance_name)) || "";
 
 // ── Groups, labels, the filter ──
+/** A team's group key: no tag can be it (a group name is never a control character), so a tag named like a team stays apart. */
+export const TEAM_GROUP = "\u0001team:";
+/**
+ * #2172: an agent in a team (fleet.yaml `teams.<name>.members`; `teams` on a status or roster row, in fleet.yaml's
+ * order) sits under its first team, whatever its tags say; one in no team under its first tag; a ClassicBot room under
+ * "Classic"; the rest under "Other".
+ */
 export function groupOf(it) {
   const tags = Array.isArray(it.tags) ? it.tags : [];
   if (tags.includes("classic")) return "Classic";
+  const teams = Array.isArray(it.teams) ? it.teams.filter((x) => typeof x === "string" && x) : [];
+  if (teams.length) return TEAM_GROUP + teams[0];
   if (tags.length) return tags[0];
   return "Other";
 }
+/** "team" for a team's group, "tag" for a tag's; null for Classic, Other and Favorites. */
+export function groupKind(g) {
+  if (typeof g !== "string") return null;
+  if (g.startsWith(TEAM_GROUP)) return "team";
+  return g === "Other" || g === "Classic" || g.charCodeAt(0) < 32 ? null : "tag";
+}
+/** A group's heading: a team's name; the fallback group ("Other") in the page's language; a tag as it is. */
+export function groupLabel(g) { return g === "Other" ? tn("groupOther") : groupKind(g) === "team" ? g.slice(TEAM_GROUP.length) : g; }
+/** #2172: what a group is, said on its heading — a team's icon, or "#" before a tag — so the grouping can be read. */
+export function GroupMark({ group }) {
+  const kind = groupKind(group);
+  if (!kind) return null;
+  const what = tn(kind === "team" ? "groupTeam" : "groupTag");
+  return kind === "team"
+    ? html`<span class="v-group-kind team" title=${what}><${Icon} name="team" size=${13} /><span class="sr-only">${what}: </span></span>`
+    : html`<span class="v-group-kind tag" title=${what} aria-hidden="true">#</span>`;
+}
+/**
+ * #2050: the model as a person reads it. The server's resolver writes English for a model it has not resolved yet
+ * ("default (detected when it starts)") and for a CLI's own default ("x (default)"); those are shown in the page's language.
+ */
+export function modelText(it, raw = it && it.model) {
+  if (!raw || typeof raw !== "string") return raw;
+  if (it.model_source === "unresolved") {
+    const why = /^default \((.*)\)$/.exec(raw)?.[1];
+    const reason = why === "detected when it starts" ? tn("modelWhyStart") : why === "this CLI does not report a default" ? tn("modelWhyCli") : why;
+    return reason ? tn("modelDefaultWhy", { reason }) : raw === "default" ? tn("modelDefault") : raw;
+  }
+  if (it.model_source === "cli-default") { const m = /^(.*) \(default\)$/.exec(raw); if (m) return tn("modelCliDefault", { model: m[1] }); }
+  return raw;
+}
 const BACKEND_LABELS = { "claude-code": "Claude Code", "kiro-cli": "Kiro CLI", codex: "Codex", grok: "Grok Build", antigravity: "Antigravity", opencode: "OpenCode" };
 export function backendLabel(backend) { return BACKEND_LABELS[backend] || backend || "Unknown"; }
 export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
@@ -93,8 +133,8 @@ export function instanceTooltip(it) {
   if (it.display_name && it.display_name !== name) lines.push(it.display_name, `(${name})`);
   else lines.push(name);
   lines.push(line("tooltipBackend", backendLabel(it.backend)));
-  const src = (s) => (s === "instance" || s === "classic" ? " (configured)" : s === "fleet-default" ? " (fleet default)" : "");
-  lines.push(line("tooltipModel", (it.model || tn("tooltipUnavailable")) + src(it.model_source)));
+  const src = (s) => (s === "instance" || s === "classic" ? tn("srcConfigured") : s === "fleet-default" ? tn("srcFleetDefault") : "");
+  lines.push(line("tooltipModel", (modelText(it) || tn("tooltipUnavailable")) + src(it.model_source)));
   lines.push(line("tooltipStatus", status));
   lines.push(line("tooltipContext", context));
   if (it.effort) lines.push(line("tooltipEffort", it.effort + src(it.effort_source)));
@@ -108,6 +148,7 @@ const SIDEBAR_ORDER_KEY = "agend_view_sidebar_order";   // View's key since #999
 const COLLAPSED_KEY = "agend_instance_collapsed";
 const FILTER_KEY = "agend_instance_filter";
 const FAVORITES_KEY = "agend_favorites";   // #1664
+const SORT_KEY = "agend_nav_sort";         // #2179
 /**
  * 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.
@@ -138,6 +179,13 @@ function readFilter() {
     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: [] }; }
 }
+/** #2179: how the list sorts — { mode: "custom" (the person's order; the default) | "recent", favs: "fixed" | "recent" }. */
+function readSort() {
+  try {
+    const s = JSON.parse(inForce("nav.sort", SORT_KEY) || "{}");
+    return { mode: s && s.mode === "recent" ? "recent" : "custom", favs: s && s.favs === "recent" ? "recent" : "fixed" };
+  } catch { return { mode: "custom", favs: "fixed" }; }
+}
 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 []; }
 }
@@ -151,7 +199,9 @@ export function computeOrder(roster, order) {
     if (ia !== ib) return ia - ib;
     if (a === "Other") return 1;
     if (b === "Other") return -1;
-    return a.localeCompare(b);
+    const ta = groupKind(a) === "team", tb = groupKind(b) === "team";
+    if (ta !== tb) return ta ? -1 : 1;                   // #2172: teams first, then tags
+    return groupLabel(a).localeCompare(groupLabel(b));
   });
   const instByGroup = new Map();
   for (const [g, items] of groups) {
@@ -174,12 +224,18 @@ 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(), favorites: readFavorites() });
+export const navStore = createStore({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites(), sort: readSort() });
 /** 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(), favorites: readFavorites() });
+  navStore.set({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites(), sort: readSort() });
   namesStore.set({ primary: readNamesPrimary() });
 }
+/** #2179: change how the list sorts ({ mode?, favs? }): the same on every page and device. */
+export function setNavSort(patch) {
+  const sort = { ...navStore.get().sort, ...patch };
+  navStore.set({ sort });
+  savePref("nav.sort", { mode: sort.mode, favs: sort.favs });
+}
 /** 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 };
@@ -188,7 +244,7 @@ export function setNavFilter(patch) {
 }
 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(); });
+onPrefsChanged((keys) => { if (keys.has("nav.order") || keys.has("nav.collapsed") || keys.has("nav.filter") || keys.has("nav.favorites") || keys.has("nav.sort")) loadNavPrefs(); });
 
 // ── #1664: favorites — starred instances, pinned at the top in the order they were starred (or moved) ──
 export const MAX_FAVORITES = 50;
@@ -224,6 +280,8 @@ function writeFacetsOpen(open) { try { localStorage.setItem(FACETS_KEY, JSON.str
 
 /** 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";
+/** #1936: the open instance, pinned on top while a filter is on. */
+const PINNED_GROUP = "\u0000pinned";
 function persistOrder(groupNames, instByGroup) {
   const rows = [];
   groupNames.forEach((g, i) => rows.push({ item_type: "group", item_name: g, sort_index: i, group_name: null }));
@@ -337,6 +395,71 @@ export function InstanceAvatar({ it, state, cli = false }) {
 const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "working" ? t("app.statusWorking") : facet === "idle" ? t("app.statusIdle")
   : facet === "crashed" ? t("app.statusCrashed") : t("app.statusStopped"));
 
+// ── #2179: when each instance last replied to a person (the status frame's last_reply) ──
+/** A reply this recent (minutes) is highlighted; the highlight fades to nothing over this time. */
+export const REPLY_FRESH_MIN = 10;
+/** Minutes since the instance last replied to a person, or null (none kept, or no time on this row). */
+export function replyAge(it, now = Date.now()) {
+  const at = it && typeof it.last_reply === "string" ? Date.parse(it.last_reply) : NaN;
+  return Number.isFinite(at) ? Math.max(0, (now - at) / 60000) : null;
+}
+/** "just now", "2 min ago", "3 h ago", "yesterday", "4 d ago" — in the page's language. */
+export function replyText(mins) {
+  if (mins < 1) return tn("replyJustNow");
+  if (mins < 60) return tn("replyMinutes", { n: Math.floor(mins) });
+  if (mins < 1440) return tn("replyHours", { n: Math.floor(mins / 60) });
+  if (mins < 2880) return tn("replyYesterday");
+  return tn("replyDays", { n: Math.floor(mins / 1440) });
+}
+/** How strong the highlight is: 1 just after a reply, down to 0 at REPLY_FRESH_MIN minutes. */
+export function replyFade(mins) { return mins == null || mins >= REPLY_FRESH_MIN ? 0 : 1 - mins / REPLY_FRESH_MIN; }
+/** The highlight's strength on the row, through the CSSOM (style-src has no 'unsafe-inline'). */
+function paintReply(el, fade) {
+  if (!el) return;
+  if (fade > 0) el.style.setProperty("--reply-a", fade.toFixed(3)); else el.style.removeProperty("--reply-a");
+}
+/** Most recent reply first; rows with none keep their order after them (a stable sort). */
+function byRecentReply(age) {
+  return (a, b) => {
+    const x = age(a), y = age(b);
+    if (x == null || y == null) return x == null ? (y == null ? 0 : 1) : -1;
+    return x - y;
+  };
+}
+/** The group that holds every non-favorite row in "recent" mode: no tag or team can be it, and it is never saved. */
+const RECENT_GROUP = "\u0000recent";
+
+/** #2179: the sort button and its menu — how the list sorts, said on the button. */
+function SortMenu({ sort }) {
+  const [open, setOpen] = useState(false);
+  const box = useRef(null);
+  useLayoutEffect(() => {
+    if (!open) return undefined;
+    const doc = box.current && box.current.ownerDocument;
+    if (!doc) return undefined;
+    const away = (e) => { if (box.current && !box.current.contains(e.target)) setOpen(false); };
+    const esc = (e) => { if (e.key === "Escape") { e.preventDefault(); setOpen(false); } };
+    doc.addEventListener("pointerdown", away, true);
+    doc.addEventListener("keydown", esc, true);
+    return () => { doc.removeEventListener("pointerdown", away, true); doc.removeEventListener("keydown", esc, true); };
+  }, [open]);
+  const recent = sort.mode === "recent";
+  const radio = (group, value, label, hint) => html`<label class="nav-sort-opt"><input type="radio" name=${`nav-sort-${group}`} value=${value}
+      checked=${sort[group] === value} onChange=${() => setNavSort({ [group]: value })} /><span>${label}${hint ? html`<span class="nav-sort-hint">${hint}</span>` : null}</span></label>`;
+  return html`<div class="nav-sort" ref=${box}>
+    <button type="button" class=${`chip-btn nav-sort-btn${recent ? " on" : ""}`} aria-haspopup="dialog" aria-expanded=${open ? "true" : "false"}
+      title=${tn("sortTitle")} onClick=${() => setOpen(!open)}><${Icon} name="sort" size=${12} /><span>${tn(recent ? "sortRecent" : "sortCustom")}</span></button>
+    ${open ? html`<div class="nav-sort-menu" role="dialog" aria-label=${tn("sortTitle")}>
+      <fieldset><legend>${tn("sortTitle")}</legend>
+        ${radio("mode", "custom", tn("sortCustom"), tn("sortCustomHint"))}
+        ${radio("mode", "recent", tn("sortRecent"), tn("sortRecentHint"))}</fieldset>
+      <fieldset><legend>${tn("sortFavs")}</legend>
+        ${radio("favs", "fixed", tn("sortFavsFixed"), "")}
+        ${radio("favs", "recent", tn("sortFavsRecent"), "")}</fieldset>
+    </div>` : null}
+  </div>`;
+}
+
 /**
  * The sidebar's instance list. `route`: the page's (which instance is open, and which view a row opens). `items`: the
  * rows (status frames' instances, or View's roster for an anonymous reader); `loaded` false shows a skeleton.
@@ -350,19 +473,21 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const filterRef = useRef(null);
   const list = useRef(null);
   const drag = useRef(null);
+  // #2179: the reply times and their highlight move on by themselves — the list is drawn again every 30 s.
+  const [, setTick] = useState(0);
+  useLayoutEffect(() => { const id = setInterval(() => setTick((n) => n + 1), 30000); return () => clearInterval(id); }, []);
   // #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.
+  // Where a row goes: the view the page is in (#1523 §3.1). View → View; Details → Details; everywhere else, a Fleet tab
+  // included (#1917: the user's call, replacing Q4 = A), → 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;
+    : route && route.panel === "details" ? detailsPath : chatPath;
   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);
@@ -374,18 +499,44 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   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;
+  // #1920: a guest's list is to pick from — no reordering and no filters (one this device kept would hide rows with no
+  // way to clear it).
+  const guest = guestPage();
+  // #2179: when each row last replied (a guest's list has no times). "recent" mode (never a guest's): the favorites keep
+  // their order or are sorted too, and every other row is one list, the last reply first. "custom" (the default) is the
+  // person's own order — a reply never moves a row.
+  const now = Date.now();
+  // The anonymous View reader (viewOnly) has no reply times (/api/profiles carries none) and no way to change the sort:
+  // its list is always Custom, whatever this browser kept from a signed-in page (#2181 review).
+  const ageOf = (n) => (guest || viewOnly ? null : replyAge(byName.get(n), now));
+  const recent = !guest && !viewOnly && nav.sort.mode === "recent";
+  const favsSorted = recent && nav.sort.favs === "recent";
+  let shownGroups, shownInsts;
+  if (recent) {
+    const sortRecent = byRecentReply(ageOf);
+    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n)).sort(sortRecent);
+    shownGroups = [...(favs.length ? [FAV_GROUP] : []), ...(rest.length ? [RECENT_GROUP] : [])];
+    shownInsts = new Map([[FAV_GROUP, favsSorted ? [...favs].sort(sortRecent) : favs], [RECENT_GROUP, rest]]);
+  } else {
+    shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
+    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
+    if (favs.length) shownInsts.set(FAV_GROUP, favs);
+  }
+  const f = guest ? { q: "", status: [], cli: [] } : nav.filter;
   const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
+  // #1936: while a filter is on, the instance you have open stays on top, pinned and marked "Current", whether or not
+  // it matches; a match is not repeated below. "N / M" still counts the filter's matches (the pinned row counts only
+  // when it is one). Clearing the filter puts it back in its place, and the list scrolls to it again.
+  const pinned = shown.active && active && byName.has(active) ? active : null;
+  const listed = pinned ? shown.groups.map((x) => ({ ...x, names: x.names.filter((n) => n !== pinned) })).filter((x) => x.names.length) : shown.groups;
+  useLayoutEffect(() => { keepActiveInView(list.current); }, [active, items.length, loaded, shown.active]);
   const backends = [...new Set(items.map((it) => it.backend).filter((b) => typeof b === "string" && b))].sort((a, b) => backendLabel(a).localeCompare(backendLabel(b)));
   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 ? {} : {
+  const dragProps = (item) => shown.active || guest || recent ? {} : {     // #2179: not while sorted by reply
     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; },
@@ -440,18 +591,24 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     // #1958: its identity colour — the ring, a left bar and/or the name, as resolved; painted through the CSSOM.
     const id = identityOf(it);
     const full = !starred && favs.length >= MAX_FAVORITES;
-    return html`<li key=${name} class="v-li"><a class=${`inst v-inst${on ? " active" : ""} ${identityClasses(id)}`} ref=${(el) => paintIdentity(el, id)} href=${rowPath(name)} title=${instanceTooltip(it)}
+    // #2179 (B5, the user's pick): the % (and the ★ beside the row) on the name's line; the time of the last reply at the
+    // end of the second line, highlighted for REPLY_FRESH_MIN minutes, fading by itself (a reply under a minute pulses once).
+    const mins = ageOf(name), fade = replyFade(mins);
+    const two = !!secondary || mins != null;
+    return html`<li key=${name} class=${`v-li${two ? " two-line" : ""}`}><a class=${`inst v-inst${on ? " active" : ""}${fade > 0 ? " replied" : ""}${mins != null && mins < 1 ? " just" : ""} ${identityClasses(id)}`}
+        ref=${(el) => { paintIdentity(el, id); paintReply(el, fade); }} 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}
+      <span class="inst-text"><span class="inst-line"><span class="inst-name" title=${label}>${label}</span>
+          <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span></span>
+        ${two ? html`<span class="inst-line inst-line2"><span class="inst-alt" title=${secondary || undefined}>${secondary || ""}</span>
+          ${mins != null ? html`<span class=${`inst-when${fade > 0 ? " fresh" : ""}`} title=${tn("replyTitle", { time: new Date(Date.parse(it.last_reply)).toLocaleString() })}>${replyText(mins)}</span>` : null}</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
+        title=${shown.active ? tn("favFiltered") : favsSorted ? tn("favSorted") : tn("favUp", { name: label })} disabled=${shown.active || favsSorted || i === 0} onClick=${() => { if (!shown.active && !favsSorted) 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") : favsSorted ? tn("favSorted") : tn("favDown", { name: label })} disabled=${shown.active || favsSorted || i === count - 1}
+        onClick=${() => { if (!shown.active && !favsSorted) 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>`;
@@ -460,10 +617,19 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   return html`<div class=${`view-roster inst-nav${editing && canStar ? " fav-editing" : ""}`}>
     <div data-trust="navigation" class="side-section" id="instanceList" ref=${list}>
     <div class="inst-head"><h2 class="side-label">${tn("instancesLabel")}</h2>
+      ${canStar && items.length && !guest ? html`<${SortMenu} sort=${nav.sort} />`
+        : recent ? html`<span class="chip-btn nav-sort-btn on nav-sort-static"><${Icon} name="sort" size=${12} /><span>${tn("sortRecent")}</span></span>` : null}
       ${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 }) => {
+    ${pinned ? html`<div key=${PINNED_GROUP} class="v-group v-pinned" role="group" aria-label=${tn("pinnedLabel")}>
+      <div class="v-group-head pinned-head"><span class="grow">${tn("pinnedCurrent")}</span></div>
+      <ul class="inst-list">${row(pinned, PINNED_GROUP, 0, 1)}</ul></div>` : null}
+    ${listed.map(({ group: g, names }) => {
+      // #2179: in "recent" mode every other row is one list — open, not dragged, not saved as a group.
+      if (g === RECENT_GROUP) return html`<div key=${g} class="v-group v-recent" role="group" aria-label=${tn("recentOthers")}>
+        <div class="v-group-head recent-head"><${Icon} name="clock" size=${14} /><span class="grow">${tn("recentOthers")}</span><span class="count">${names.length}</span></div>
+        <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
       // #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>
@@ -471,14 +637,14 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       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>
+          title=${tn(folded ? "expandGroup" : "collapseGroup", { group: groupLabel(g) })} ...${dragProps({ type: "group", name: g })}>
+          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><${GroupMark} group=${g} /><span class="grow">${groupLabel(g)}</span><span class="count">${names.length}</span></button>
         ${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">
+    ${guest ? null : html`<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}
           onInput=${(e) => setNavFilter({ q: e.target.value })}
@@ -494,7 +660,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
         </div>
         <p class="note nav-shown" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
       </div>
-    </div>
+    </div>`}
   </div>`;
 }
 

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

@@ -16,7 +16,7 @@ import { HeaderTools, VIEW_SCALE, textSizeStore } from "./header-tools.js";
 import { readStream } from "./read-stream.js";
 // The usage dialog's metric row lives with the dialog now (usage-dialog.js); re-exported for what imported it here.
 export { UsageMetric } from "./usage-dialog.js";
-import { backendLabel, STATUS_KEYS } from "./instance-nav.js";
+import { backendLabel, modelText, STATUS_KEYS } from "./instance-nav.js";
 import { viewStore } from "./view-roster-store.js";
 
 /** #1580: the app's stream says the fleet is not answering (a restart): the View's polls skip their turn until it is. */
@@ -27,7 +27,7 @@ import { Dialog } from "./ui-dialog.js";
 import { Empty, ErrorState, Skeleton } from "./ui-states.js";
 import { Icon } from "./ui-icons.js";
 import "./view-strings.js";
-import { checkCard, fitPicture, IdentityCard, useCard } from "./identity-card.js";
+import { BannerFocusPreview, checkCard, fitPicture, IdentityCard, useBannerPreview, useCard } from "./identity-card.js";
 import { confirmDialog } from "./ui-confirm.js";
 import { openColorDialog } from "./identity-color.js";
 
@@ -305,7 +305,7 @@ function Card({ it, viewOnly, onEdit }) {
     <div class="v-avatar">${it.has_avatar ? html`<img ref=${avatar} alt="" />` : html`<span class="v-initial" aria-hidden="true">${initial}</span>`}</div>
     <div class="v-card-body">
       <div class="v-card-line"><strong>${it.display_name || it.instance_name}</strong>${it.role ? html`<span class="v-role">${it.role}</span>` : null}</div>
-      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${it.model}` : ""}${ctx}</div>
+      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${modelText(it)}` : ""}${ctx}</div>
       ${open && it.description ? html`<p class="v-card-desc">${it.description}</p>` : null}
     </div>
     <button type="button" class="icon-btn" onClick=${toggle} aria-expanded=${open ? "true" : "false"} aria-label=${tn(open ? "collapseProfile" : "expandProfile")} title=${tn(open ? "collapseProfile" : "expandProfile")}>
@@ -332,6 +332,11 @@ function EditProfile({ it, onClose }) {
   const [removeCard, setRemoveCard] = useState({ portrait: false, banner: false });
   const [clearCard, setClearCard] = useState(false);
   const pics = { portrait: useRef(null), banner: useRef(null) };
+  // #2086: the banner's focus — this person's (null: follow the agent's, else the centre), and the picture to preview:
+  // a newly chosen file, else the banner drawn now.
+  // `agent`: the agent's own focus (what "Follow the agent's" shows; else the centre).
+  const [focus, setFocus] = useState({ value: 50, mine: null, start: null, agent: null });
+  const [bannerPreview, preview] = useBannerPreview();
   useEffect(() => {
     let live = true;
     // The card's fields stay disabled until this read is in (#1889 review: a draft typed meanwhile was overwritten);
@@ -343,6 +348,11 @@ function EditProfile({ it, onClose }) {
       const resolved = checkCard(it.instance_name, body);
       const mine = (k) => (resolved && resolved[k] && resolved[k].by === "human" ? resolved[k] : null);
       setCard({ mine: { tagline: mine("tagline"), bio: mine("bio"), portrait: mine("portrait"), banner: mine("banner") }, limits: body.limits || null });
+      const bf = resolved && resolved.banner_focus;
+      const agent = Number.isInteger(body.banner_focus_agent) && body.banner_focus_agent >= 0 && body.banner_focus_agent <= 100 ? body.banner_focus_agent : null;
+      const mineFocus = bf && bf.by === "human" ? bf.value : null;
+      setFocus({ value: mineFocus ?? agent ?? 50, mine: mineFocus, start: mineFocus, agent });
+      if (resolved && resolved.banner) preview.fromSrc(resolved.banner.src);
       setCardText({ tagline: mine("tagline") ? mine("tagline").text : "", bio: mine("bio") ? mine("bio").text : "" });
     }).catch(() => { if (live && lease.current()) setCard(none); });
     return () => { live = false; };
@@ -360,6 +370,7 @@ function EditProfile({ it, onClose }) {
     const clearing = clearCard;
     const before = card && card.mine ? { tagline: card.mine.tagline ? card.mine.tagline.text : "", bio: card.mine.bio ? card.mine.bio.text : "" } : { tagline: "", bio: "" };
     if (!clearing) for (const k of ["tagline", "bio"]) if (cardText[k] !== before[k]) draft[`card_${k}`] = cardText[k];
+    if (!clearing && focus.mine !== focus.start) draft.card_banner_focus = focus.mine;          // #2086
     const cardPics = {};
     try {
       // A picture too large is fitted first (after asking) — before anything is written, so declining writes nothing.
@@ -422,10 +433,19 @@ function EditProfile({ it, onClose }) {
         <label class="field"><span>${tn("cardTagline")}</span><input value=${cardText.tagline} onInput=${(e) => setCardText({ ...cardText, tagline: e.target.value })} /></label>
         <label class="field"><span>${tn("cardBio")}</span><textarea rows="4" value=${cardText.bio} onInput=${(e) => setCardText({ ...cardText, bio: e.target.value })}></textarea></label>
         ${["portrait", "banner"].map((slot) => html`<div key=${slot} class="form">
-          <label class="field"><span>${tn(slot === "portrait" ? "cardPortrait" : "cardBanner")}</span><input ref=${pics[slot]} type="file" accept="image/png,image/jpeg,image/webp" /></label>
+          <label class="field"><span>${tn(slot === "portrait" ? "cardPortrait" : "cardBanner")}</span><input ref=${pics[slot]} type="file" accept="image/png,image/jpeg,image/webp"
+            onChange=${slot === "banner" ? (e) => { const fl = e.currentTarget.files && e.currentTarget.files[0]; if (fl) preview.fromFile(fl); } : undefined} /></label>
           ${card && card.mine && card.mine[slot] ? html`<div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${removeCard[slot] ? "true" : "false"}
             onClick=${() => setRemoveCard({ ...removeCard, [slot]: !removeCard[slot] })}>${tn(removeCard[slot] ? "cardKeep" : "cardRemove")}</button></div>` : null}
         </div>`)}
+        ${bannerPreview ? html`<div class="field bf-field">
+          <span>${tn("cardBannerFocus")}</span>
+          <${BannerFocusPreview} src=${bannerPreview.src} focus=${focus.value} />
+          <input type="range" min="0" max="100" step="1" value=${focus.value} aria-label=${tn("cardBannerFocus")}
+            onInput=${(e) => { const v = Number(e.currentTarget.value); setFocus({ ...focus, value: v, mine: v }); }} />
+          <span class="note">${tn("cardBannerFocusNote")}</span>
+          ${focus.mine !== null ? html`<div class="field-row"><button type="button" class="btn btn-sm" onClick=${() => setFocus({ ...focus, value: focus.agent ?? 50, mine: null })}>${tn("cardFocusFollow")}</button></div>` : null}
+        </div>` : null}
       </fieldset>
       <div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${clearCard ? "true" : "false"} onClick=${() => setClearCard(!clearCard)}>${tn(clearCard ? "keepCard" : "clearCard")}</button>
         ${clearCard ? html`<span class="muted">${tn("clearCardNote")}</span>` : null}</div>

package/dist/ui/shared/tokens.css

@@ -9,7 +9,12 @@
  * surfaces it is used on, and focus rings and strong borders meet 3:1 (tests/web-tokens-1408.test.ts).
  *
  * Inter is bundled (/assets/inter.woff2, SIL OFL 1.1 — see fonts/README.md): the CSP allows fonts from 'self' only,
- * and nothing is loaded from another site. Chinese falls back to the system's CJK fonts, in the order below. */
+ * and nothing is loaded from another site. Chinese falls back to the system's CJK fonts, in the order below.
+ *
+ * Emoji (#1918 follow-up, the user's tofu boxes): every stack ends with the platforms' colour emoji fonts and the
+ * `emoji` generic (--font-emoji), so an emoji the text fonts lack is drawn by Windows' Segoe UI Emoji, macOS's Apple
+ * Color Emoji or Linux's Noto Color Emoji rather than as a box — for the stock stacks and each theme font
+ * (app.css: .th-font-system, .th-font-mono). A browser tries the families in order for each character. */
 
 @font-face {
   font-family: "Inter";
@@ -22,8 +27,9 @@
 
 :root {
   /* ── Type ── */
-  --font-ui: Inter, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji;
+  --font-ui: Inter, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, var(--font-emoji);
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-emoji);
   --fs-xs: 12px;  --lh-xs: 16px;
   --fs-sm: 13px;  --lh-sm: 18px;
   --fs-md: 15px;  --lh-md: 24px;   /* message text */

package/dist/ui/shared/ui-icons.js

@@ -37,6 +37,7 @@ const P = {
   type: () => html`<path d="M4 7V5h16v2M9 19h6M12 5v14"/>`,
   chart: () => html`<path d="M3 20h18M6 16v-4M11 16V8M16 16v-6"/>`,
   up: () => html`<path d="M12 19V5M5 12l7-7 7 7"/>`,
+  sort: () => html`<path d="M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4"/>`,   // #2179: the sidebar's sort
   star: () => html`<path d="M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95L12 2.5z"/>`,
   eye: () => html`<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
   check: () => html`<path d="M20 6L9 17l-5-5"/>`,

package/dist/ui/shared/usage-dialog.js

@@ -4,6 +4,7 @@
 import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { useLease } from "./app-ctx.js";
+import { guestPage } from "./app-store.js";
 import { readStream } from "./read-stream.js";
 import { Dialog } from "./ui-dialog.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
@@ -66,7 +67,17 @@ export function UsageMetric({ m }) {
   const sub = [note, expiryText(m.expiresAt)].filter(Boolean).join(" · ");
   return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${val}</span></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}</div>`;
 }
-/** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
+/**
+ * #2014: a row's title. A credential profile's row (`profile`; its API `name` is "Claude (<profile>)") shows the
+ * provider name on the title line beside the plan badge, and the profile on its own full-width muted line under it;
+ * the full name is the tooltip, and the dialog shows the profile unclipped. Any other row: its name.
+ */
+export function providerTitle(p) {
+  const name = String((p && p.name) || ""), profile = p && typeof p.profile === "string" && p.profile ? p.profile : "";
+  const suffix = ` (${profile})`;
+  return profile && name.endsWith(suffix) ? { base: name.slice(0, -suffix.length), profile } : { base: name, profile };
+}
+
 /**
  * #1749: a plan as its badge reads — one short line. "Name [Tier] (N×)" (Claude's "Team Premium (6.25x)", "Max (20x)")
  * becomes "Name ×N"; anything else (Pro, Codex's and muse's labels) as it is. The full name stays on the badge's
@@ -76,6 +87,7 @@ export function planBadge(plan) {
   const m = /^(\S+)(?: [^()]+)? \((\d+(?:\.\d+)?)x\)$/i.exec(String(plan || "").trim());
   return m ? `${m[1]} ×${m[2]}` : String(plan || "");
 }
+/** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
 export function updatedAgo(fetchedAt, now = Date.now()) {
   const ms = now - new Date(fetchedAt).getTime();
   if (!Number.isFinite(ms) || ms < 60_000) return tn("usageUpdatedJustNow");
@@ -134,11 +146,12 @@ export function UsageBody({ owner }) {
     const providers = ordered(data.providers);
     content = html`${!providers.length ? html`<p class="note">${tn("usage.empty_active")}</p>` : null}
       ${providers.map((p, i) => html`<section key=${key(p)} class="u-provider">
-        <div class="u-head"><strong title=${p.name}>${p.name}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
+        <div class="u-head"><strong title=${p.name}>${providerTitle(p).base}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
           <span class="u-order">
             <button type="button" class="icon-btn" disabled=${i === 0} aria-label=${tn("usageMoveUp")} title=${tn("usageMoveUp")} onClick=${() => move(key(p), -1, data.providers)}><${Icon} name="up" size=${14} /></button>
             <button type="button" class="icon-btn" disabled=${i === providers.length - 1} aria-label=${tn("usageMoveDown")} title=${tn("usageMoveDown")} onClick=${() => move(key(p), 1, data.providers)}><${Icon} name="down" size=${14} /></button>
           </span></div>
+        ${providerTitle(p).profile ? html`<div class="u-profile" title=${p.name}>${providerTitle(p).profile}</div>` : null}
         ${p.stale ? html`<p class="note">${usageText(p.hint || "", p.hintI18n)}</p>` : null}
         ${p.status === "error" && !p.transient ? html`<p class="u-err">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
           : p.status === "error" && p.transient ? html`<p class="note">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
@@ -147,11 +160,18 @@ export function UsageBody({ owner }) {
             ${!p.stale && p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : !(p.metrics || []).length ? html`<p class="note">${tn("usage.no_data")}</p>` : null}`}
       </section>`)}
       <div class="u-foot"><span class="note" title=${new Date(data.fetchedAt).toLocaleString()}>${updatedAgo(data.fetchedAt)}${data.refreshing ? html` · <span class="u-refreshing">${tn("usageRefreshing")}</span>` : null}</span>
+        ${byAgent() ? html`<a class="btn btn-ghost btn-sm u-by-agent" href="/ui/fleet/usage" title=${tn("usageByAgentTitle")}>${tn("usageByAgent")}</a>` : null}
         <button type="button" class="btn btn-sm" onClick=${() => load(true)}>${tn("usageRefresh")}</button></div>`;
   }
   return content;
 }
 
+/**
+ * #2122: the plans above are per login; each agent's own tokens and API-equivalent are Fleet → Usage — linked from the
+ * app (not View's anonymous reader, not a guest, who has no Fleet).
+ */
+const byAgent = () => !guestPage() && typeof location !== "undefined" && location.pathname.startsWith("/ui");
+
 /** `owner`: the navigation that opened it — its reads and the minute's timer live and end with it. */
 export function UsageDialog({ onClose, owner = "" }) {
   return html`<${Dialog} title=${tn("usage.title")} onClose=${onClose} wide=${true}><${UsageBody} owner=${`usage-dialog:${owner}`} /></${Dialog}>`;