@songsid/agend 2.2.0 → 2.2.5

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

@@ -9,13 +9,15 @@
 // 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";
 import { viewStore } from "./view-roster-store.js";
 import { onPrefsChanged, prefInForce, prefsWritable, savePref } from "./app-prefs.js";
 import "./view-strings.js";
+import { themesShown, themesStore } from "./app-themes.js";
+import { identityClasses, identityOf, paintIdentity, useIdentityColors } from "./identity-color.js";
 
 /** view.* text with named values. */
 function tn(key, values = {}) {
@@ -28,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));
@@ -91,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)));
@@ -106,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.
@@ -136,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 []; }
 }
@@ -149,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) {
@@ -172,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 };
@@ -186,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;
@@ -222,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 }));
@@ -280,9 +340,16 @@ const CLI_MONOGRAM = { "claude-code": "C", codex: "X", "kiro-cli": "K", grok: "G
 // 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"
-  && /^\/ui\/img\/(bot|avatar|emoji)\/(?!(?:\.|%2[eE]){1,2}(?:\?|$))[^/\\?#\s]+(\?v=[0-9A-Za-z%._-]*)?$/.test(src);
-/** The avatar to draw: the server's, if it is one the page may load; else the first character. */
+  && (/^\/ui\/img\/(bot|avatar|emoji)\/(?!(?:\.|%2[eE]){1,2}(?:\?|$))[^/\\?#\s]+(\?v=[0-9A-Za-z%._-]*)?$/.test(src)
+    // #1629: a theme's picture — one name segment, then its 32-hex content id.
+    || /^\/ui\/img\/theme\/(?!(?:\.|%2[eE]){1,2}\/)[^/\\?#\s]+\/[0-9a-f]{32}$/.test(src));
+/**
+ * The avatar to draw: the server's, if it is one the page may load; else the first character. #1629: the agent's theme
+ * picture first, while this viewer shows agents' themes (fx.show, not safe mode).
+ */
 export function avatarOf(it) {
+  const th = it && themesShown() ? it.theme_avatar : null;
+  if (th && th.kind === "image" && sameOrigin(th.src)) return { kind: "image", src: th.src };
   const a = it && it.avatar;
   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 : "" };
@@ -290,7 +357,6 @@ export function avatarOf(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. */
 export function dotState(it, exec, awaiting) {
   if (awaiting != null) return "needs";
@@ -306,22 +372,19 @@ 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. */
+/**
+ * An instance's avatar with its status dot. #1958: its ring is the identity colour, painted by the row it sits in
+ * (identity-color.js: `.idc.id-ring`), for every face.
+ */
 export function InstanceAvatar({ it, state, cli = false }) {
+  useStore(themesStore);                                    // #1629: redraw when the viewer turns agents' themes on or off
   const a = avatarOf(it);
   const [broken, setBroken] = useState("");
-  const el = useRef(null);
-  const accent = typeof it.accent === "string" && ACCENT.test(it.accent) && a.kind === "image" ? it.accent : "";
-  useLayoutEffect(() => {
-    const node = el.current;
-    if (!node || !node.style) return;
-    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(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" : ""}`}>
+  return html`<span class=${`av${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>${cli
       ? html`<span class="av-cli" aria-hidden="true" title=${backendLabel(it.backend)}>${CLI_MONOGRAM[it.backend] || "·"}</span>` : null}</span>`;
@@ -332,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.
@@ -341,22 +469,25 @@ 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
+  useIdentityColors();                  // #1958: repaint when the host's colour settings or the themes switch change
   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);
@@ -368,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; },
@@ -431,31 +588,48 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     const waiting = own(awaiting, name) ? awaiting[name] : null;
     const on = name === active;
     const fav = g === FAV_GROUP, starred = favSet.has(name);
+    // #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" : ""}`} 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>`;
   };
   // 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${editing && canStar ? " fav-editing" : ""}`}>
-    <div class="side-section" id="instanceList" ref=${list}>
+    <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>
@@ -463,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 })}
@@ -486,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>`;
 }