@songsid/agend 2.3.0-beta.9 → 2.3.1

package/dist/ui/shared/identity-color.js

@@ -9,7 +9,7 @@ import { html, useEffect, useState } from "./app-html.js";
 import { createStore, useStore } from "./app-store.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import { register, t } from "./app-i18n.js";
-import { themesShown, themesStore } from "./app-themes.js";
+import { pageNow, themesShown, themesStore } from "./app-themes.js";
 import { Dialog } from "./ui-dialog.js";
 import { toast } from "./ui-toast.js";
 
@@ -63,16 +63,20 @@ export function contrast(a, b) {
   const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
   return (l1 + 0.05) / (l2 + 0.05);
 }
-/** The shade of `hex` name text uses: itself if readable, else the nearest step toward black (light) or white (dark). */
-export function readableShade(hex, mode) {
-  if (!HEX.test(hex)) return TEXT[mode];
+/**
+ * The shade of `hex` name text uses: itself if readable, else the nearest step toward black (light) or white (dark).
+ * `page` (#2196): an agent's colours on the page now — names must read on its background and sidebar instead.
+ */
+export function readableShade(hex, mode, page = null) {
+  const backgrounds = page ? [page.bg, page.sidebar] : BG[mode], text = page ? page.text : TEXT[mode];
+  if (!HEX.test(hex)) return text;
   const toward = mode === "light" ? 0 : 255;
   const ch = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
   for (let step = 0; step <= 20; step++) {
     const shade = `#${ch.map((c) => Math.round(c + (toward - c) * (step / 20)).toString(16).padStart(2, "0")).join("")}`;
-    if (BG[mode].every((bg) => contrast(shade, bg) >= 4.5)) return shade;
+    if (backgrounds.every((bg) => contrast(shade, bg) >= 4.5)) return shade;
   }
-  return TEXT[mode];
+  return text;
 }
 
 // ── Resolution ──
@@ -135,7 +139,7 @@ export function identityOf(it, opts = {}) {
   const light = colorValue(c.color, "light"), dark = colorValue(c.color, "dark");
   return {
     color: c.color, source: c.source, show: p.show, showSource: p.source, off: opts.off ?? colorsOff(),
-    light, dark, nameLight: readableShade(light, "light"), nameDark: readableShade(dark, "dark"),
+    light, dark, nameLight: readableShade(light, "light", pageNow("light")), nameDark: readableShade(dark, "dark", pageNow("dark")),
   };
 }
 /** The row's classes for its identity colour ("" when colours are off or shown nowhere). */
@@ -192,6 +196,8 @@ function ColorDialog({ name, it, onClose }) {
   }, [name]);
   // The preview: the instance as it would be drawn with the choice here.
   const preview = identityOf({ ...(it || {}), color: { ...((it && it.color) || {}), person: color || undefined }, color_show: { ...((it && it.color_show) || {}), person: places || undefined } }, { off: false });
+  // #2342: a swatch (or "no pick") is a choice, not text: it starts the hex field's undo history afresh (undoing the
+  // text back to a typed colour would leave the box and the chosen colour apart — Save would send the other one).
   const pick = (c) => { setColor(c); setHex(c && HEX.test(c) ? c : ""); setError(""); };
   const togglePlace = (p) => {
     const base = places || preview.show;
@@ -207,7 +213,8 @@ function ColorDialog({ name, it, onClose }) {
       onClose();
     } catch (err) { setError(t("color.failed", (err && err.message) || "network")); setBusy(false); }
   }
-  const onHex = (v) => { setHex(v); const c = /^#[0-9a-fA-F]{6}$/.test(v) ? v.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
+  // The text as typed (#2342: trimming it in the box would rewrite it, losing its undo); spaces around it are ignored.
+  const onHex = (v) => { setHex(v); const w = v.trim(), c = /^#[0-9a-fA-F]{6}$/.test(w) ? w.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
   const off = colorsOff();
   return html`<${Dialog} title=${t("color.title", name)} onClose=${onClose} busy=${busy}
       actions=${html`<button type="button" class="btn" disabled=${busy || !loaded} onClick=${() => save({ color: null, color_show: null })}>${t("color.reset")}</button>
@@ -222,8 +229,8 @@ function ColorDialog({ name, it, onClose }) {
         ref=${(el) => { if (el && el.style) { el.style.setProperty("--sw-light", p.light); el.style.setProperty("--sw-dark", p.dark); } }}
         onClick=${() => pick(`preset:${p.id}`)}></button>`)}
       <label class="idc-custom">${t("color.custom")}
-        <input type="color" value=${HEX.test(hex) ? hex : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
-        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value.trim())} aria-label=${t("color.hex")} /></label>
+        <input type="color" value=${HEX.test(hex.trim()) ? hex.trim() : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
+        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.hex")} /></label>
       <button type="button" class="btn btn-sm" disabled=${!color} onClick=${() => pick(null)}>${t("color.noPick")}</button>
     </fieldset>
     <fieldset class="idc-places"><legend>${t("color.places")}</legend>

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

@@ -9,6 +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 { recordEdit } from "./text-undo.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";
@@ -30,14 +31,38 @@ 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";
 }
-/** A group's heading: the fallback group ("Other") is a key, shown in the page's language; a tag is shown as it is. */
-export function groupLabel(g) { return g === "Other" ? tn("groupOther") : g; }
+/** "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.
@@ -57,11 +82,12 @@ export function backendLabel(backend) { return BACKEND_LABELS[backend] || backen
 export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
 export const STATUS_KEYS = { running: "statusRunning", paused: "statusPaused", stopped: "statusStopped", crashed: "statusCrashed" };
 
-/** The status chips, in order (design Q5): what the row's dot says, in five words. */
-export const STATUS_FACETS = ["working", "needs", "idle", "stopped", "crashed"];
+/** The status chips, in order: what the row's dot says, including agents queued for this boot. */
+export const STATUS_FACETS = ["working", "needs", "starting", "idle", "stopped", "crashed"];
 /** Which status chip a row falls under: needs you first, then crashed, not running, working (or stuck), idle. */
 export function statusFacet(it, exec, awaiting) {
   if (awaiting != null) return "needs";
+  if (it?.startup_phase === "queued" || it?.startup_phase === "starting") return "starting";
   if (!it || it.status === "crashed") return "crashed";
   if (it.status !== "running") return "stopped";
   return exec === "working" || exec === "stuck" ? "working" : "idle";
@@ -102,7 +128,8 @@ export function filterSidebar(groupNames, instByGroup, rosterByName, query, labe
 }
 export function instanceTooltip(it) {
   const context = it.context_pct != null && Number.isFinite(it.context_pct) ? `${Math.round(Math.min(100, Math.max(0, it.context_pct)))}%` : tn("tooltipUnavailable");
-  const status = STATUS_KEYS[it.status] ? tn(STATUS_KEYS[it.status]) : it.status || tn("statusUnknown");
+  const status = it.startup_phase === "queued" ? t("app.statusQueued") : it.startup_phase === "starting" ? t("app.statusStarting")
+    : STATUS_KEYS[it.status] ? tn(STATUS_KEYS[it.status]) : it.status || tn("statusUnknown");
   const line = (key, value) => tn(key, { value });
   const lines = [];
   const name = nameOf(it);
@@ -124,6 +151,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.
@@ -154,6 +182,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 []; }
 }
@@ -167,7 +202,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) {
@@ -190,12 +227,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 };
@@ -204,7 +247,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;
@@ -320,12 +363,15 @@ export function avatarOf(it) {
 /** 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";
+  if (it?.startup_phase === "queued") return "queued";
+  if (it?.startup_phase === "starting") return "starting";
   if (!it || it.status === "crashed") return "crashed";
   if (it.status === "paused") return "paused";
   if (it.status !== "running") return "stopped";
   return exec === "stuck" ? "stuck" : exec === "working" ? "working" : "idle";
 }
 const DOT = {
+  queued: ["off", () => t("app.statusQueued")], starting: ["busy", () => t("app.statusStarting")],
   needs: ["warn", () => t("app.needsYou")], crashed: ["bad", () => t("app.statusCrashed")], paused: ["off hollow", () => t("app.statusPaused")],
   stopped: ["off", () => t("app.statusStopped")], stuck: ["warn", () => t("app.statusStuck")], working: ["busy", () => t("app.statusWorking")],
   idle: ["ok", () => t("app.statusIdle")],
@@ -352,9 +398,74 @@ export function InstanceAvatar({ it, state, cli = false }) {
 
 // ── The list ──
 
-const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "working" ? t("app.statusWorking") : facet === "idle" ? t("app.statusIdle")
+const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "starting" ? t("app.statusStarting") : 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.
@@ -368,6 +479,9 @@ 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; });
@@ -394,9 +508,26 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // #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();
-  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);
+  // #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
@@ -411,7 +542,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   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 || guest ? {} : {
+  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; },
@@ -445,7 +576,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     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" : ""}`}>
+    return html`<div class=${`nav-facet${open ? " open" : ""}${summary ? " has-sum" : ""}`}>
       <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>
@@ -466,26 +597,37 @@ 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>`;
   };
+  // #2401: an open list of two or more lines leaves room under the count for "shown" and Clear (stacked); otherwise compact.
+  const facetSet = f.status.length > 0 || f.cli.length > 0;
+  const stacked = (!viewOnly && facetOpen.status) || (facetOpen.cli && backends.length > 1);
   // 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 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}
@@ -493,6 +635,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       <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>
@@ -501,7 +647,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       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: groupLabel(g) })} ...${dragProps({ type: "group", name: g })}>
-          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${groupLabel(g)}</span><span class="count">${names.length}</span></button>
+          <${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>`;
     })}
@@ -511,17 +657,26 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       <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 })}
-          onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); setNavFilter({ q: "" }); } }} />
+          onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); recordEdit(e.target); 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}
+          onClick=${() => { recordEdit(filterRef.current); setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
       </label>
-      <div class="nav-facets">
+      <div class=${`nav-facets${stacked ? "" : " compact"}`}>
         <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>
+        ${/* #2401: the count, its "shown" and Clear stack at the row's right end — beside an open list there is room under
+            the count, so setting a facet adds no row (a word beside the count, or Clear beside it, wrapped CLI under the
+            list). With no such list (.compact) they share one cell of one line: a facet set, Clear takes the count's place
+            (the count kept for a screen reader and in Clear's title). Either way the column keeps Clear's width (idle, there
+            unseen at no height: .is-idle, a class — never a style attribute, #1300), and stacked the word's too
+            (data-reserve, drawn unseen at no height), so the headers' box beside it never narrows. */ ""}
+        <div class="nav-facet-end" data-reserve=${tn("filterShown")}>
+          <p class=${`note nav-shown${facetSet ? " is-set" : ""}`} aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? html`<span class="nav-shown-word"> ${tn("filterShown")}</span>` : ""}</p>
+          <button type="button" class=${`chip-btn nav-facet-reset${facetSet ? "" : " is-idle"}`} title=${facetSet ? `${shown.shown} / ${shown.total} ${tn("filterShown")}` : undefined}
+            onClick=${() => setNavFilter({ status: [], cli: [] })}>${tn("filterFacetsReset")}</button>
+        </div>
       </div>
     </div>`}
   </div>`;

package/dist/ui/shared/owner-css.js

@@ -80,6 +80,7 @@ function sync() {
     let valid = false;
     try { valid = link.disabled !== true && !!link.sheet && link.sheet.ownerNode === link && link.sheet.disabled !== true && link.sheet.href === new URL(href, location.href).href; } catch { /* unknown stylesheet */ }
     linkState = valid ? "on" : "unknown"; life(linkState, valid ? "loaded" : "load_unverified");
+    if (valid) shownHere(sha);                                          // #2198: an agent's trial is on this screen now
   });
   link.addEventListener("error", () => { if (!current()) return; linkState = "unknown"; life("unknown", "load_failed"); });
   life("loading", "loading");
@@ -189,12 +190,40 @@ async function reread() {
     if (body && mine === gen) reconcile(body);                         // nothing newer happened since this was asked
   } catch { /* the next change tries again */ }
 }
+/**
+ * #2198: an agent's trial (General saved it) waits on the host until a person's page shows it. This page shows it once
+ * its stylesheet has loaded on screen, and says so: the host starts the keep window then (the dead-man switch, from when
+ * a person can see the Keep button). If the host cannot be told, this page reverts it itself at KEEP_SECONDS, as it does
+ * for a version it saved.
+ */
+let waitingShown = null;   // { id, sha } of an agent's trial this page is showing and has not reported yet
+function shownHere(sha) {
+  const w = waitingShown;
+  if (!w || w.sha !== sha) return;
+  waitingShown = null;
+  const trial = ownerCssTrial.get();
+  if (!trial || trial.id !== w.id) return;
+  post("/ui/owner-css/shown", { trial: w.id }).then((r) => {
+    if (ownerCssTrial.get() !== trial) return;
+    const ms = r.ok && r.body && Number.isFinite(r.body.remaining_ms) ? r.body.remaining_ms : null;
+    if (ms === null) { startOwnerCssTrial(w.id, w.sha, trial.previous, KEEP_SECONDS, true); return; }
+    startOwnerCssTrial(w.id, w.sha, trial.previous, ms / 1000 + 1, false);
+  }, () => { if (ownerCssTrial.get() === trial) startOwnerCssTrial(w.id, w.sha, trial.previous, KEEP_SECONDS, true); });
+}
 /** Match the host: the version in force, and whether one is on trial (another device's included) — or none any more. */
 function reconcile(state) {
   const pending = state.pending && state.pending.sha === state.active && typeof state.pending.id === "string" ? state.pending : null;
   const trial = ownerCssTrial.get();
-  if (!pending) { if (trial) dropTrial(); showActive(state.active, state.effectState); return; }
+  if (!pending) { waitingShown = null; if (trial) dropTrial(); showActive(state.active, state.effectState); return; }
   if (trial && trial.id === pending.id) return;                        // already asking about this one
+  if (pending.waiting === true) {
+    // Shown here: its stylesheet goes in, and once it has loaded this page reports it (shownHere). Until then the bar
+    // waits on the host's word, as for another device's trial.
+    waitingShown = { id: pending.id, sha: pending.sha };
+    startOwnerCssTrial(pending.id, pending.sha, pending.previous, HOST_TRIAL_SECONDS, false);
+    if (linkState === "on" && ownedLink && ownedLink.getAttribute("href") === `/ui/owner-css.css?v=${encodeURIComponent(pending.sha)}`) shownHere(pending.sha);
+    return;
+  }
   // The host's own remaining time and a second (never this device's clock): it has settled the trial by then.
   const remaining = typeof pending.remaining_ms === "number" && Number.isFinite(pending.remaining_ms) ? pending.remaining_ms : 0;
   startOwnerCssTrial(pending.id, pending.sha, pending.previous, remaining / 1000 + 1, false);

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

@@ -1,4 +1,4 @@
-// #1408 step 2: the View panel (/view, /view/<name>) — every agent's live terminal, its profile card, the AI usage
+// #1408 step 2: the View panel (/view, /view/<name>) — every agent's live terminal, its identity card, the AI usage
 // panel, in the app shell. Public (/assets/): under `web.view_access: open` an anonymous reader opens it in the
 // View-only shell, so nothing here needs a session to show, and the one write (Edit profile) asks for one.
 //
@@ -6,7 +6,7 @@
 // Everything recurring is a passive read (#1374) taken through the navigation's lease: the pane every 800 ms and the
 // roster every 5 s while the panel is mounted and the tab is visible, usage every 60 s while its dialog is open. They
 // stop when the panel goes.
-import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "./app-html.js";
+import { html, useEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
 import { useLease } from "./app-ctx.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, modelText, STATUS_KEYS } from "./instance-nav.js";
+import { 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. */
@@ -189,7 +189,7 @@ export function ViewPanel({ route, navKey }) {
   else if (!name) body = html`<div data-trust="panel-content" class="panel-body"><${Skeleton} lines=${6} /></div>`;
   else if (!it) body = html`<div data-trust="panel-content" class="panel-body center"><${Empty} icon="alert" title=${tn("notFound", { name })} hint=${tn("notFoundHint")} /></div>`;
   else body = html`<${Terminal} key=${name} name=${name} lease=${lease} density=${density} />
-    <${Card} it=${it} viewOnly=${viewOnly} onEdit=${() => setDialog("edit")} />`;
+    <${ViewIdentity} it=${it} viewOnly=${viewOnly} onEdit=${() => setDialog("edit")} />`;
 
   return html`<div data-effect-panel="view" class="panel p-view">
     <${PanelHeader} title=${it ? (it.display_name || it.instance_name) : tn("title")}
@@ -287,33 +287,18 @@ function glyphRatio(pre) {
   return cellRatio || 0.6;
 }
 
-/** The profile card under the terminal: one line by default, the whole profile when opened. */
-function Card({ it, viewOnly, onEdit }) {
-  const [open, setOpen] = useState(stored("agend_view_card_expanded") === "1");
-  const avatar = useRef(null);
-  // The avatar is fetched once per instance (cache-busted then), not on every 5-second roster refresh.
-  useLayoutEffect(() => {
-    if (!avatar.current || !it.has_avatar) return;
-    avatar.current.src = `/api/avatar/${encodeURIComponent(it.instance_name)}?t=${Date.now()}`;
-  }, [it.instance_name, it.has_avatar]);
-  const initial = (it.display_name || it.instance_name || "?").trim().charAt(0) || "?";
-  const ctx = it.context_pct != null ? ` · ctx ${Math.round(it.context_pct)}%` : "";
-  const toggle = () => { const next = !open; setOpen(next); store("agend_view_card_expanded", next ? "1" : "0"); };
-  // #1629 r4 §1: the identity card, above the profile row while it is expanded.
+/** The identity card under the terminal, with Edit profile (or Sign in to edit) below it. Always on: the old one-line
+ *  strip is gone, and IdentityCard itself is null when the card is empty, so the button lives here rather than inside it. */
+function ViewIdentity({ it, viewOnly, onEdit }) {
   const card = useCard(it.instance_name, it.card_v);
-  return html`${open && card ? html`<div data-trust="panel-content" class="v-id"><${IdentityCard} name=${it.instance_name} card=${card} /></div>` : null}<section data-trust="panel-content" class=${`v-card${open ? " open" : ""}`} aria-label=${it.display_name || it.instance_name}>
-    <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 ? ` · ${modelText(it)}` : ""}${ctx}</div>
-      ${open && it.description ? html`<p class="v-card-desc">${it.description}</p>` : null}
+  return html`<div data-trust="panel-content" class="v-id">
+    ${card ? html`<${IdentityCard} name=${it.instance_name} card=${card} />` : null}
+    <div class="v-id-actions">
+      ${viewOnly
+        ? html`<a class="btn btn-sm" href=${signInHref()}><${Icon} name="edit" size=${14} />${tn("signInToEdit")}</a>`
+        : html`<button type="button" class="btn btn-sm" onClick=${onEdit}><${Icon} name="edit" size=${14} />${tn("editProfile")}</button>`}
     </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")}>
-      <${Icon} name="chevron" size=${16} cls=${open ? "caret" : "caret flipped"} /></button>
-    ${viewOnly
-      ? html`<a class="btn btn-sm" href=${signInHref()}><${Icon} name="edit" size=${14} />${tn("signInToEdit")}</a>`
-      : html`<button type="button" class="btn btn-sm" onClick=${onEdit}><${Icon} name="edit" size=${14} />${tn("editProfile")}</button>`}
-  </section>`;
+  </div>`;
 }
 
 /** Edit profile: display name, role, description, avatar. A write: it needs a session (CSRF via agend-auth.js). */