@songsid/agend 2.2.0-beta.3 → 2.2.0-beta.5

package/dist/ui/preview.js

@@ -28,7 +28,10 @@
   var BANNER_ACK_KEY = "agend_html_preview_banner_ack";
   var BANNER = "Previews run the agent's HTML in an isolated frame. It cannot use your login, but it may be able to send data out. Only preview content you trust. A preview can slow or freeze this tab.";
 
-  var cfg = { dashboardOrigin: "", previewOrigin: "", boot: "", reason: "", reasonCode: "" };
+  var cfg = { dashboardOrigin: "", previewOrigin: "", boot: "", reason: "", reasonCode: "", detail: "" };
+  // Why it failed, in English when the app's dictionary has no word for it (chat-strings.js pvFail_*).
+  var FAIL_EN = { exited: "its address closed unexpectedly", "spawn-failed": "cloudflared could not start for it", "no-address": "no address was given for it",
+    unreachable: "its address could not be reached", "lease-held": "an earlier preview tunnel is still being cleaned up", "gateway-failed": "its local listener could not start" };
   // #1554: the page's words. `say(key, english, …values)` asks the app's dictionary (init's opts.text) and keeps the
   // English here when it has none — so this file still works, and reads the same, without the app.
   var text = null;
@@ -66,6 +69,7 @@
       boot: String((data && data.previewBoot) || ""),
       reason: String((data && data.previewReason) || ""),
       reasonCode: String((data && data.previewReasonCode) || ""),
+      detail: String((data && data.previewDetail) || ""),
     };
     if (opts && typeof opts.text === "function") text = opts.text;
     if (!listening && typeof root.addEventListener === "function") {
@@ -76,6 +80,29 @@
       listening = true;
     }
   }
+  /**
+   * #1723: the public link's own preview tunnel was still starting when this page loaded; preview-status.js asks the
+   * page's server and hands each answer here (this file reaches no network). Ready → previews run at the origin it
+   * names — only an https quick-tunnel origin other than this page's is ever taken: the page's frame-src allows no
+   * other; failed or off → the page says why. Returns true once there is nothing more to wait for.
+   */
+  function waitingForPublicPreview() { return cfg.reasonCode === "publicLinkStarting"; }
+  function applyPublicPreviewStatus(j) {
+    if (cfg.reasonCode !== "publicLinkStarting") return true;
+    var at = root.location && root.location.origin;
+    if (j && typeof j.previewOrigin === "string" && /^https:\/\/[a-z0-9-]+\.trycloudflare\.com$/.test(j.previewOrigin) && j.previewOrigin !== at
+      && typeof j.boot === "string" && /^[0-9a-f]{32}$/.test(j.boot)) {
+      cfg.previewOrigin = j.previewOrigin; cfg.boot = j.boot; cfg.reasonCode = ""; cfg.reason = "";
+      notify();
+      return true;
+    }
+    if (j && (j.code === "publicLinkPreviewFailed" || j.code === "publicLink" || j.code === "fleetOff")) {
+      cfg.reasonCode = j.code; cfg.reason = ""; cfg.detail = typeof j.detail === "string" ? j.detail : "";
+      notify();
+      return true;
+    }
+    return false;
+  }
   function onStorage(event) {
     // #1568: the banner acknowledged in another tab of this sign-in: hide it here too (nothing starts or stops).
     if (event && event.key === BANNER_ACK_KEY) { notify(); return; }
@@ -159,7 +186,11 @@
   function availability() {
     if (!cfg.previewOrigin || !cfg.boot) {
       // The server's reason, in the page's language when the server named it (a code), else as the server wrote it.
-      var server = cfg.reasonCode ? say("pvServer_" + cfg.reasonCode, cfg.reason || "Previews are not available here.", cfg.dashboardOrigin) : "";
+      // #1723: a failed public-link preview names why ({0} is the reason, in the page's words).
+      var arg = cfg.reasonCode === "publicLinkPreviewFailed" ? say("pvFail_" + (cfg.detail || "unknown"), Object.prototype.hasOwnProperty.call(FAIL_EN, cfg.detail) ? FAIL_EN[cfg.detail] : "an unexpected error") : cfg.dashboardOrigin;
+      var english = cfg.reasonCode === "publicLinkPreviewFailed" ? "Previews are unavailable on this public link: {0}. The link itself keeps working."
+        : cfg.reason || "Previews are not available here.";
+      var server = cfg.reasonCode ? say("pvServer_" + cfg.reasonCode, english, arg) : "";
       return { ok: false, why: "server", reason: server || cfg.reason || say("pvWhyServer", "Previews are not available here.") };
     }
     var at = root.location && root.location.origin;
@@ -197,11 +228,15 @@
    * opts.fill (#1481, the side panel): the frame fills its holder — the same frame from mountPreview, only sized by the
    * panel instead of by the frame's height messages, which it then ignores.
    */
+  /** How many previews this page has started: a click whose HTML arrives late asks whether another started meanwhile. */
+  var starts = 0;
+  function startCount() { return starts; }
   function start(key, holder, html, ui, opts) {
     var a = availability();
     if (!a.ok) { ui.state("unavailable", a.reason); return false; }
     if (typeof html !== "string" || utf8Bytes(html) > LIMITS.maxBytes) { ui.state("unavailable", say("pvHtmlOver", "This HTML is over 1 MiB; it is not previewed.")); return false; }
     stopAll("another");
+    starts++;
     var doc = holder.ownerDocument;
     var iframe = mountPreview(doc);
     var card = {
@@ -330,7 +365,7 @@
 
   return {
     init: init, availability: availability, optedIn: optedIn, setOptIn: setOptIn, never: never, setNever: setNever, onChange: onChange, listeners: listeners, onStorage: onStorage,
-    start: start, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
+    start: start, startCount: startCount, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
     mountPreview: mountPreview, onMessage: onMessage, BANNER: BANNER, LIMITS: LIMITS,
     /** The banner every running preview carries, in the page's language (#1554); BANNER is its English. */
     banner: function () { return say("pvBanner", BANNER); },
@@ -338,5 +373,7 @@
     bannerAckLabel: function () { return say("pvBannerAck", "I understand"); },
     bannerAckTitle: function () { return say("pvBannerAckTitle", "Hide this notice until you sign in again"); },
     bannerAcked: bannerAcked, ackBanner: ackBanner, setBannerScope: setBannerScope,
+    /** #1723: the public link's preview, while it starts (preview-status.js asks; this only takes the answer). */
+    waitingForPublicPreview: waitingForPublicPreview, applyPublicPreviewStatus: applyPublicPreviewStatus,
   };
 });

package/dist/ui/settings-token.js

@@ -31,7 +31,7 @@ export function TokenField({ id, platform, value, onInput, identity, busy, onVer
   const [shown, setShown] = useState(false);
   return html`<div class="field token-field"><label for=${id}>${tn("wizardToken")}</label>
     <div class="token-row">
-      <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck="false" disabled=${!!busy}
+      <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck=${false} disabled=${!!busy}
         placeholder=${platform === "discord" ? "MTA…" : "123456:ABC-DEF…"} value=${value} onInput=${(e) => onInput(e.target.value.trim())} />
       <button type="button" class="icon-btn" aria-pressed=${shown ? "true" : "false"} title=${shown ? tn("tokenHide") : tn("tokenShow")}
         aria-label=${shown ? tn("tokenHide") : tn("tokenShow")} onClick=${() => setShown(!shown)}><${Icon} name="eye" size=${16} /></button>

package/dist/ui/shared/app-i18n.js

@@ -62,6 +62,8 @@ register("app", {
   en: {
     brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet overview", view: "View", settings: "Settings", instances: "Instances", newInstance: "New instance",
     collapse: "Hide the sidebar", expand: "Show the sidebar", openMenu: "Open the sidebar", closeMenu: "Close the sidebar",
+    resizeSidebar: "Sidebar width", resizeSidebarHint: "Drag to resize · double-click to reset",
+    names: "Names", namesNickname: "Nickname first", namesInstance: "Real name first",
     theme: "Theme", themeSystem: "System", themeLight: "Light", themeDark: "Dark", language: "Language",
     previews: "Allow HTML previews", tour: "Tour", tourTitle: "Show the web chat tour again",
     needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
@@ -91,6 +93,8 @@ register("app", {
   "zh-TW": {
     brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance",
     collapse: "隱藏側邊欄", expand: "顯示側邊欄", openMenu: "打開側邊欄", closeMenu: "關閉側邊欄",
+    resizeSidebar: "側邊欄寬度", resizeSidebarHint: "拖曳調整寬度 · 按兩下恢復預設",
+    names: "名稱", namesNickname: "暱稱優先", namesInstance: "實際名稱優先",
     theme: "主題", themeSystem: "跟隨系統", themeLight: "淺色", themeDark: "深色", language: "語言",
     previews: "允許預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
     needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",

package/dist/ui/shared/app-prefs.js

@@ -32,6 +32,7 @@ export const SYNCED = {
   "nav.filter": { ls: "agend_instance_filter", ...json },
   "nav.favorites": { ls: "agend_favorites", ...json },   // #1664
   "preview.optIn": { ls: "agend_html_preview", toLocal: (v) => (v ? "on" : null), fromLocal: (s) => (s === "on" ? true : undefined) },
+  "names.primary": { ls: "agend_names_primary", toLocal: (v) => (v === "instance" ? v : null), fromLocal: (s) => (s === "instance" ? s : undefined) },   // #1722
 };
 const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
 const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());

package/dist/ui/shared/app-shell.js

@@ -12,8 +12,8 @@ import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath, fl
 import { SessionMenu } from "./app-session.js";
 import { savePref } from "./app-prefs.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
-import { InstanceNav, RosterNav } from "./instance-nav.js";
-import { UsageRail } from "./header-tools.js";
+import { InstanceNav, RosterNav, namesStore, setNamesPrimary } from "./instance-nav.js";
+import { UsageRail, usageRailStore } from "./header-tools.js";
 
 /** Shell state shared with panels: the phone drawer, the collapsed sidebar, extensions a panel module adds. */
 export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null });
@@ -43,6 +43,144 @@ export function closeDialog() { shellStore.set({ dialog: null }); }
 function readCollapsed() { try { return localStorage.getItem("agend_sidebar") === "hidden"; } catch { return false; } }
 const narrow = () => typeof matchMedia === "function" && matchMedia("(max-width: 899px)").matches;
 
+// ── #1722: the sidebar's width — this device's (the #1665 split: a width depends on the screen), through the CSSOM ──
+export const SIDEBAR_W = { min: 200, max: 480, def: 260, step: 16, mainMin: 480 };
+const SIDEBAR_W_KEY = "agend_sidebar_w";
+const win = () => (typeof window !== "undefined" ? window : null);
+const viewportWidth = () => { const w = win(); return w && typeof w.innerWidth === "number" && w.innerWidth > 0 ? w.innerWidth : 1366; };
+/** The width the sidebar may have on a viewport `vw` px wide: within [min, max], and leaving the main pane mainMin. */
+export function clampSidebarWidth(w, vw) {
+  const max = Math.max(SIDEBAR_W.min, Math.min(SIDEBAR_W.max, vw - SIDEBAR_W.mainMin));
+  return Math.round(Math.min(max, Math.max(SIDEBAR_W.min, w)));
+}
+function storedSidebarWidth() { try { const v = Number(localStorage.getItem(SIDEBAR_W_KEY)); return Number.isFinite(v) && v > 0 ? v : null; } catch { return null; } }
+/** { width: px | null } — null: the default width (tokens.css). */
+export const sidebarWidthStore = createStore({ width: null });
+/** Set the width (clamped to this viewport); `save`: this device keeps it. null: back to the default, nothing kept. */
+/**
+ * The room the main pane has beside the sidebar: the window, less the usage rail when it is on screen (#1673 — shown
+ * open, ≥ 1200 px; its CSS width when the layout gives none). #1722 review: the sidebar never leaves main under 480.
+ */
+function mainBudget() {
+  const vw = viewportWidth();
+  if (vw < 1200 || typeof document === "undefined") return vw;
+  const rail = document.querySelector(".u-rail");
+  if (!rail) return vw;
+  const w = Math.round(rail.getBoundingClientRect ? rail.getBoundingClientRect().width : 0) || RAIL_W;
+  return vw - w;
+}
+const RAIL_W = 320;
+/** Show a width (clamped to the room there is now) — this page only; null: the default width. Nothing is kept. */
+function showSidebarWidth(w) {
+  const root = document.documentElement;
+  if (w == null) { root.style.removeProperty("--sidebar-w"); sidebarWidthStore.set({ width: null }); return null; }
+  const v = clampSidebarWidth(w, mainBudget());
+  root.style.setProperty("--sidebar-w", `${v}px`);   // CSSOM: the page's CSP allows no style attribute
+  sidebarWidthStore.set({ width: v });
+  return v;
+}
+/** Set the width (clamped to the room there is now); `save`: this device keeps it. null: back to the default, nothing kept. */
+export function setSidebarWidth(w, save = false) {
+  if (w == null) {
+    try { localStorage.removeItem(SIDEBAR_W_KEY); } catch { /* this page only */ }
+    return showSidebarWidth(null);
+  }
+  const v = showSidebarWidth(w);
+  // Kept: the choice within the window, not the squeeze beside the rail — it comes back when the rail goes.
+  if (save) { try { localStorage.setItem(SIDEBAR_W_KEY, String(clampSidebarWidth(w, viewportWidth()))); } catch { /* this page only */ } }
+  return v;
+}
+/** A drag in progress (one at a time): its end(commit). Only it may set the width until it ends. */
+let activeDrag = null;
+/**
+ * This device's kept width, shown within the room there is now — again whenever that changes (the window, the usage
+ * rail, the page). A squeeze is shown, never kept: the device's choice comes back when there is room. On a phone (the
+ * drawer) none applies, and a drag in progress is cancelled.
+ */
+function applyKeptSidebarWidth() {
+  if (narrow()) {
+    if (activeDrag) activeDrag.end(false);
+    showSidebarWidth(null);
+    return;
+  }
+  if (activeDrag) return;
+  const w = storedSidebarWidth();
+  if (w != null) showSidebarWidth(w);
+}
+const afterPaint = (fn) => (typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => fn()) : setTimeout(fn, 0));
+/** The separator on the sidebar's right edge: drag, ← → (16 px), Home / End, Enter or a double-click resets. */
+function SidebarResize() {
+  const { width } = useStore(sidebarWidthStore);
+  useStore(usageRailStore);   // the rail's room is the separator's limit too
+  useLayoutEffect(() => {
+    applyKeptSidebarWidth();
+    // The room changes with the window, the rail (opened, closed) and the page (a page with no rail): shown again,
+    // once the page has drawn its change.
+    const again = () => afterPaint(applyKeptSidebarWidth);
+    const offRail = usageRailStore.subscribe(again);
+    const offNav = navStore.subscribe(again);
+    const w = win();
+    if (w && typeof w.addEventListener === "function") w.addEventListener("resize", applyKeptSidebarWidth);
+    return () => {
+      offRail(); offNav();
+      if (w && typeof w.removeEventListener === "function") w.removeEventListener("resize", applyKeptSidebarWidth);
+      if (activeDrag) activeDrag.end(false);   // unmounted mid-drag: nothing kept, nothing left behind
+    };
+  }, []);
+  const now = width ?? SIDEBAR_W.def;
+  const onKey = (e) => {
+    const cur = sidebarWidthStore.get().width ?? SIDEBAR_W.def;
+    if (e.key === "ArrowRight") setSidebarWidth(cur + SIDEBAR_W.step, true);
+    else if (e.key === "ArrowLeft") setSidebarWidth(cur - SIDEBAR_W.step, true);
+    else if (e.key === "Home") setSidebarWidth(SIDEBAR_W.min, true);
+    else if (e.key === "End") setSidebarWidth(SIDEBAR_W.max, true);
+    else if (e.key === "Enter") setSidebarWidth(null);
+    else return;
+    e.preventDefault();
+  };
+  // One pointer owns a drag. Only its release keeps the width; a cancel, a lost capture, the drawer or an unmount
+  // puts back the width shown before it and keeps nothing — and no event of it can write after it ended. What is kept
+  // is where the pointer went (within the window), not what the room beside the rail let it show.
+  const onDown = (e) => {
+    if (e.button !== 0 || activeDrag || narrow()) return;
+    e.preventDefault();
+    const handle = e.currentTarget, pointerId = e.pointerId;
+    const before = sidebarWidthStore.get().width;
+    let chosen = null;   // the pointer's own width this drag; null: it never moved
+    const left = handle.parentElement ? handle.parentElement.getBoundingClientRect().left : 0;
+    const mine = {};
+    const own = (ev) => activeDrag === mine && (ev.pointerId === undefined || ev.pointerId === pointerId);
+    const move = (ev) => { if (own(ev)) { chosen = ev.clientX - left; showSidebarWidth(chosen); } };
+    const up = (ev) => { if (own(ev)) mine.end(true); };
+    const cancel = (ev) => { if (own(ev)) mine.end(false); };
+    mine.end = (commit) => {
+      if (activeDrag !== mine) return;
+      activeDrag = null;
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", up);
+      handle.removeEventListener("pointercancel", cancel);
+      handle.removeEventListener("lostpointercapture", cancel);
+      handle.classList.remove("dragging");
+      document.body.classList.remove("side-resizing");
+      try { handle.releasePointerCapture(pointerId); } catch { /* not held */ }
+      if (commit && chosen != null) setSidebarWidth(chosen, true);
+      else showSidebarWidth(before);
+    };
+    activeDrag = mine;
+    try { handle.setPointerCapture(pointerId); } catch { /* the move still works while over the handle */ }
+    handle.classList.add("dragging");
+    document.body.classList.add("side-resizing");
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", up);
+    handle.addEventListener("pointercancel", cancel);
+    handle.addEventListener("lostpointercapture", cancel);
+  };
+  return html`<div class="side-resize" role="separator" aria-orientation="vertical" tabindex="0" aria-controls="sidebar"
+    aria-label=${t("app.resizeSidebar")} title=${t("app.resizeSidebarHint")} aria-valuemin=${String(SIDEBAR_W.min)}
+    aria-valuemax=${String(clampSidebarWidth(Infinity, mainBudget()))} aria-valuenow=${String(now)}
+    onKeyDown=${onKey} onPointerDown=${onDown} ondblclick=${() => setSidebarWidth(null)}></div>`;
+}
+
 export function openDrawer() { shellStore.set({ drawer: true }); }
 export function closeDrawer() { if (shellStore.get().drawer) shellStore.set({ drawer: false }); }
 export function toggleSidebar() {
@@ -127,6 +265,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
         <a class="side-row" href=${signInHref()}><${Icon} name="user" /><span>${t("app.signIn")}</span></a>
         <${PrefsPopover} />
       </div>
+      <${SidebarResize} />
     </aside>`;
   }
   // #1675: the whole fleet, on its Org chart (#1389), from anywhere — top left, so at the top of a phone's drawer too. The
@@ -152,6 +291,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       ${navLink("settings", settingsPath(), "settings", t("app.settings"))}
       <${SessionMenu} />
     </div>
+    <${SidebarResize} />
   </aside>`;
 }
 
@@ -167,6 +307,7 @@ function ViewOnlyNav({ route }) {
 export function DevicePrefs({ labels = false } = {}) {
   const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
   const [l, setL] = useState(lang());
+  const names = useStore(namesStore);   // #1722
   // #1665: what is in force, as it changes — another device's choice arriving while this is open is shown at once.
   useEffect(() => (typeof AgendTheme !== "undefined" && typeof AgendTheme.onChange === "function" ? AgendTheme.onChange(setTheme) : undefined), []);
   useEffect(() => onLang(setL), []);
@@ -177,6 +318,9 @@ export function DevicePrefs({ labels = false } = {}) {
     <label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
       <select value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); savePref("lang", e.target.value); }}>
         <option value="en">English</option><option value="zh-TW">中文</option></select></label>
+    <label class="pref"><${Icon} name="user" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.names")}</span>
+      <select value=${names.primary} aria-label=${t("app.names")} onChange=${(e) => setNamesPrimary(e.target.value)}>
+        <option value="nickname">${t("app.namesNickname")}</option><option value="instance">${t("app.namesInstance")}</option></select></label>
   </div>`;
 }
 

package/dist/ui/shared/app-store.js

@@ -38,7 +38,9 @@ export function applyStatus(d) {
   appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
     connections: typeof d.connections === "number" ? d.connections : null,
     // #1665: the host preferences' revision (app-prefs.js re-reads them when it moves).
-    prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null });
+    prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null,
+    // #1685: host memory pressure slowing or holding new agents ("elevated" | "critical"), else null.
+    hostMemory: d.host_memory === "elevated" || d.host_memory === "critical" ? d.host_memory : null });
 }
 
 /** One "activity" event: an instance started or stopped working. */

package/dist/ui/shared/app.css

@@ -68,6 +68,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 
 .sidebar {
   width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-sidebar);
+  position: relative;   /* #1722: the resize handle sits on its right edge (the width above: tokens.css, or this device's) */
   padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 .sb-collapsed .sidebar { display: none; }
@@ -112,18 +113,23 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .av.ring { box-shadow: 0 0 0 2px var(--ring, transparent); }
 .av-text { overflow: hidden; }
 .av .av-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar); }
+/* #1722: the CLI as a letter on the avatar's top-left corner — monochrome (the #1630 ring keeps the colour), cut out like the dot */
+.av-cli { position: absolute; left: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
+  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 0 0 1.5px var(--bg-sidebar);
+  color: var(--text-2); font-size: 9px; line-height: 12px; font-weight: var(--fw-semibold); text-align: center; pointer-events: auto; }
+.inst.active .av .av-cli, .inst:hover .av .av-cli { box-shadow: 0 0 0 1.5px var(--surface-2); }
 .inst.active .av .av-dot, .inst:hover .av .av-dot { box-shadow: 0 0 0 2px var(--surface-2); }
 .dot.hollow { background: transparent; border: 1.5px solid var(--text-3); }
 /* On a grey avatar a grey dot needs more contrast: stopped is a stronger grey, paused a clear ring around the sidebar colour. */
 .av .av-dot.off { background: var(--text-2); }
 .av .av-dot.hollow { box-sizing: border-box; width: 10px; height: 10px; background: var(--bg-sidebar); border: 2.5px solid var(--text-2); }
 .inst .av { margin-top: 1px; }
-.inst-id { font-family: var(--font-mono); }
 .inst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .inst-name { font-size: var(--fs-sm); line-height: var(--lh-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #1722: the other name, under the one that leads — smaller, muted, truncated on its own */
+.inst-alt { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .inst.active .inst-name { font-weight: var(--fw-semibold); }
 .inst-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
-.inst-alias { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
 .badge-await {
   flex-shrink: 0; font-size: 11px; line-height: 16px; font-weight: var(--fw-semibold); padding: 0 var(--s-2); border-radius: var(--r-full);
   background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); white-space: nowrap;
@@ -307,6 +313,16 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .pill.open { background: var(--accent-dim); color: var(--accent); }
 .pill.claimed { background: var(--warn-bg); color: var(--warn); }
 .pill.done { color: var(--ok); }
+/* #1724: a disabled schedule — its own look (not the green of "done"): a dashed, muted badge and a dimmed row */
+.pill.off { background: transparent; color: var(--text-3); border: 1px dashed var(--border-strong); }
+.row-item.is-off { opacity: 0.62; }
+.row-item.sched { flex-wrap: nowrap; }
+.row-item.sched .sched-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
+.sched-actions { display: inline-flex; flex: none; gap: var(--s-1); }
+.sched-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sched-sub { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 899px) { .sched-sub { white-space: normal; } }   /* a phone: the run time wraps rather than being cut */
+.sched-mode { margin-bottom: var(--s-2); }
 .save-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
 
 /* ── Chat ── */
@@ -315,17 +331,21 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg { font-size: var(--fs-md); line-height: var(--lh-md); overflow-wrap: anywhere; min-width: 0; }
 .msg .meta { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--s-1); }
 .msg .sender { font-weight: var(--fw-semibold); color: var(--text-2); }
-.msg .time { font-family: var(--font-mono); }
+/* The time never wraps or gives up its width to a long neighbour: a flex child shrinks to its min-content, and with
+   the message's overflow-wrap: anywhere that is one character wide (the #1672 status line's time, one glyph per line). */
+.msg .time { font-family: var(--font-mono); white-space: nowrap; flex: none; }
 .msg.user { align-self: flex-end; max-width: min(80%, 620px); }
 .msg.user .meta { justify-content: flex-end; }
 .msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); }
 .msg.agent { align-self: stretch; }
-/* #1672: a status line (another instance's message, a daemon notice): muted plain text, no bubble; a long one folds. */
-.msg.status { align-self: stretch; font-size: var(--fs-sm); color: var(--text-3); }
-.msg.status .st-text { white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: var(--s-3); }
-.msg.status.folded .st-text { max-height: 9em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); }
-.msg.status .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
-.msg.status .st-more:hover { color: var(--text); }
+/* #1672: a status line (another instance's message, a daemon notice): muted plain text, no bubble; a long one folds.
+   Its class is `status-line`, never `status`: that is the header's inline-flex badge class, and on a message it turned
+   the meta, body and tools into one flex row. */
+.msg.status-line { align-self: stretch; font-size: var(--fs-sm); color: var(--text-3); }
+.msg.status-line .st-text { white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: var(--s-3); }
+.msg.status-line.folded .st-text { max-height: 9em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); }
+.msg.status-line .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
+.msg.status-line .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
 .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
 @media (hover: none) { .msg-tools { opacity: 1; } }
@@ -611,13 +631,16 @@ html.lb-open .scroller { overflow: hidden; }
 @media (hover: hover) { .inst-nav:not(.fav-editing) .v-li:hover .inst-star, .inst-nav:not(.fav-editing) .v-li:focus-within .inst-star { visibility: visible; } }
 @media (hover: none) { .inst-nav:not(.fav-editing) .inst-star { display: none; } }
 /* Edit: room for ↑ ↓ ☆ — the context and CLI marks step aside so the name keeps its width. */
-.fav-editing .v-li .v-meta, .fav-editing .v-li .cli-icon { display: none; }
+.fav-editing .v-li .v-meta { display: none; }
 @media (max-width: 899px) { .fav-editing .inst-star, .fav-editing .inst-move { width: 36px; height: 36px; } }
 .v-inst .dot { margin-top: 0; }
 .v-meta { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
-.cli-icon { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; border: 1px solid var(--border-strong); }
-.cli-claude-code { background: #c678dd; } .cli-kiro-cli { background: #58a6ff; } .cli-codex { background: #3fb950; }
-.cli-grok { background: #0d1117; border-color: #f0f6fc; } .cli-antigravity { background: #f85149; } .cli-opencode { background: #f0f6fc; } .cli-other { background: #6e7681; }
+/* #1722: the sidebar's width — a separator on its right edge (drag, arrows, Home/End, double-click resets); not on a phone */
+.side-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; z-index: 5; cursor: col-resize; touch-action: none; }
+.side-resize:hover, .side-resize:focus-visible, .side-resize.dragging { background: var(--accent-dim, var(--border-strong)); }
+.side-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-select: none; }
+@media (max-width: 899px) { .side-resize { display: none; } }
 .dragging { opacity: 0.4; }
 .drop-before { box-shadow: inset 0 2px 0 var(--accent); }
 .drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
@@ -628,15 +651,16 @@ html.lb-open .scroller { overflow: hidden; }
 .v-filter-box input::placeholder { color: var(--text-3); }
 .v-filter-clear { width: 28px; height: 28px; }
 .v-filter .note { padding: var(--s-1) var(--s-1) 0; font-variant-numeric: tabular-nums; }
-/* alpha.2 (N1): status and CLI chips under the filter box — each a <details> with checkboxes. */
+/* alpha.2 (N1): status and CLI chips under the filter box — each a group of checkboxes under its header (#1700). */
 .nav-facets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-1) 0; }
 .nav-facet { font-size: var(--fs-xs); color: var(--text-2); }
-.nav-facet > summary { cursor: pointer; list-style: none; padding: 2px var(--s-2); border-radius: var(--r-sm); }
-.nav-facet > summary::-webkit-details-marker { display: none; }
-.nav-facet > summary::after { content: " ▾"; color: var(--text-3); }
-.nav-facet[open] > summary::after { content: " ▴"; }
-.nav-facet > summary:hover { background: var(--hover); }
-.nav-facet > summary:focus-visible { outline: 2px solid var(--accent); }
+/* #1700: a facet group's header — the whole row toggles its list; folded with a filter set, a short summary. */
+.nav-facet-head { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: 2px var(--s-2); border: 0; border-radius: var(--r-sm);
+  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
+.nav-facet-head:hover { background: var(--hover); }
+.nav-facet-head:focus-visible { outline: 2px solid var(--accent); }
+.nav-facet-head .caret { color: var(--text-3); flex: none; }
+.nav-facet-sum { min-width: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }
 .nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
 .nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
 .nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
@@ -989,3 +1013,6 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* #1630: a Discord server emoji in a chat message, the size of the text around it. */
 .md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }
+/* #1682: a mention, as Discord draws one — accent text on a tint of it; the id (or the Telegram handle) on hover. */
+.md .mention { display: inline; padding: 0 0.2em; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-dim);
+  font-weight: var(--fw-medium); white-space: nowrap; }