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

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

@@ -8,10 +8,12 @@ import { ConfirmHost } from "./ui-confirm.js";
 import { t, lang, setLang, onLang } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
 import { navStore } from "./app-nav.js";
-import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath } from "./app-route.js";
+import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath, fleetPath } from "./app-route.js";
 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 { 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 });
@@ -41,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() {
@@ -104,7 +244,8 @@ export function signInHref() {
 function Sidebar({ route, onNewInstance, viewOnly }) {
   const app = useStore(appStore);
   const shell = useStore(shellStore);
-  const on = (panel) => !!route && (route.panel === panel || (panel === "fleet" && route.panel === "details"));
+  // #1675: the Fleet panel is "Fleet overview"'s (one current row); the "Fleet" row is current on an instance's Details.
+  const on = (panel) => !!route && (panel === "fleet" ? route.panel === "details" : route.panel === panel);
   const openInstance = openInstanceOf(route);
   // A count badge is hidden at 0; its number is also in the link's accessible name.
   const navLink = (panel, href, icon, label, count = 0) => html`<a class=${`side-row${on(panel) ? " active" : ""}`} href=${href}
@@ -124,8 +265,14 @@ 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
+  // "Fleet" row under it goes to the open instance's Details (#1523 N2); this one is the Fleet panel, any of its tabs.
+  const onFleet = !!route && route.panel === "fleet";
+  const overview = html`<a class=${`side-row side-overview${onFleet ? " active" : ""}`} href=${fleetPath("org")}
+    aria-current=${onFleet ? "page" : undefined} onClick=${closeDrawer}><${Icon} name="org" /><span class="grow">${t("app.fleetOverview")}</span></a>`;
   return html`<aside id="sidebar" class="sidebar" aria-label=${t("app.menu")}>
     <div class="side-head">
       <a class="brand" href="/ui" onClick=${closeDrawer}>${t("app.brand")}</a>
@@ -133,6 +280,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       <button type="button" class="icon-btn" onClick=${onNewInstance} aria-label=${t("app.newInstance")} title=${t("app.newInstance")}><${Icon} name="plus" /></button>
     </div>
     <nav class="side-nav" aria-label=${t("app.menu")}>
+      ${overview}
       ${navLink("needs", NEEDS_PATH, "inbox", t("app.needsNav"), needsCount)}
       ${navLink("fleet", openInstance ? detailsPath(openInstance) : "/ui/fleet", "fleet", t("app.fleet"))}
       ${navLink("view", "/view", "view", t("app.view"))}
@@ -143,6 +291,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       ${navLink("settings", settingsPath(), "settings", t("app.settings"))}
       <${SessionMenu} />
     </div>
+    <${SidebarResize} />
   </aside>`;
 }
 
@@ -158,13 +307,20 @@ 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), []);
   return html`<div class=${`prefs${labels ? " labelled" : ""}`}>
     <label class="pref"><${Icon} name="sun" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.theme")}</span>
-      <select value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); }}>
+      <select value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); savePref("theme", e.target.value); }}>
         <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>
     <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); }}>
+      <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>`;
 }
 
@@ -192,11 +348,11 @@ export function PanelHeader({ title, sub, children, headingRef, nav }) {
 }
 
 /**
- * #1523 N2: the instance a page is about — Chat, View or Details of it — or null. With one open, Fleet goes to its
+ * #1523 N2: the instance a page is about — Chat, View, Log (#1218) or Details of it — or null. With one open, Fleet goes to its
  * Details (the user's complaint: Fleet always landed on Tasks), and Chat and View keep it; with none, as before.
  */
 export function openInstanceOf(route) {
-  return route && (route.panel === "chat" || route.panel === "view" || route.panel === "details") && route.instance ? route.instance : null;
+  return route && (route.panel === "chat" || route.panel === "view" || route.panel === "log" || route.panel === "details") && route.instance ? route.instance : null;
 }
 
 function BottomTabs({ route, viewOnly }) {
@@ -210,7 +366,7 @@ function BottomTabs({ route, viewOnly }) {
     <${Icon} name=${icon} size=${20} /><span>${label}</span>${badge ? html`<span class="tab-badge" aria-label=${badgeLabel || t("app.needsYou")}>${badge}</span>` : null}</a>`;
   let lastView = null;
   try { lastView = localStorage.getItem("agend_last_view"); } catch { /* none */ }
-  const viewHref = route && (route.panel === "view" || route.panel === "details") && route.instance ? viewPath(route.instance) : viewPath(lastView);
+  const viewHref = route && (route.panel === "view" || route.panel === "log" || route.panel === "details") && route.instance ? viewPath(route.instance) : viewPath(lastView);
   if (viewOnly) {
     return html`<nav class="tabs" aria-label=${t("app.menu")}>
       ${tab(viewHref, "view", t("app.view"), route && route.panel === "view")}
@@ -351,6 +507,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
       ${viewOnly ? null : html`<${OperationLine} route=${nav.route} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
+    <${UsageRail} route=${nav.route} />
     <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
     ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
     ${viewOnly || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}

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

@@ -36,7 +36,11 @@ export function applyStatus(d) {
     if (i.state === "awaiting_input") awaiting[i.name] = typeof i.interaction_summary === "string" ? i.interaction_summary : "";
   }
   appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
-    connections: typeof d.connections === "number" ? d.connections : null });
+    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,
+    // #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-stream.js

@@ -29,14 +29,15 @@
 // - a 401 is the session ending: nothing is retried (agend-auth.js says so).
 // - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
-const EVENTS = ["status", "message", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons"];
+// #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
+const EVENTS = ["status", "message", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed
 const MAX_OVERFLOW_READS = 3;            // reads again after dropped live events, within one catch-up
 // #1580: the reconnect backoff — step n waits min(cap, base·2ⁿ), drawn from 50–100 % of that (jitter: tabs that lost
 // the fleet together do not come back together).
-export const RECONNECT = { baseMs: 1000, capMs: 30000 };
+export const RECONNECT = { baseMs: 1000, capMs: 30000, shutdownMs: 10000 };
 export function reconnectDelay(step, random = Math.random) {
   const full = Math.min(RECONNECT.capMs, RECONNECT.baseMs * 2 ** Math.min(step, 20));
   return Math.round(full * (0.5 + random() * 0.5));
@@ -49,6 +50,7 @@ export function createStream(opts) {
   let sse = null, pollTimer = null, silentTimer = null, closed = false, started = false;
   // #1580: the reconnect step waiting, how many failed in a row, a step waiting for the tab to be shown, a page that left.
   let reconnectTimer = null, attempts = 0, waitingVisible = false, suspended = false, ended = false, retryAt = 0;
+  let shutdownUntil = 0;               // monotonic; retained through pagehide/pageshow
   const random = typeof env.random === "function" ? env.random : Math.random;
   const doc = env.document || null;
   const hidden = () => !!(doc && doc.hidden);
@@ -112,6 +114,7 @@ export function createStream(opts) {
         if (closed || mine !== pollSeq || !r.ok) return false;
         const d = await r.json();
         if (closed || mine !== pollSeq) return false;
+        if (typeof d.now === "number") emit("clock", { now: d.now });   // #1823: read just now, handed over at once
         if (d.status) emit("status", d.status);
         for (const m of d.messages || []) emit("message", m);
         if (typeof d.cursor === "string") state.cursor = d.cursor;
@@ -188,6 +191,18 @@ export function createStream(opts) {
     const es = sse = new env.EventSource("/ui/events");
     let spoke = false;
     silentTimer = env.setTimeout(startPolling, 15000);   // the server sends a status frame the moment a stream opens
+    es.addEventListener("shutdown", (e) => {
+      if (es !== sse || closed || suspended || ended) return;
+      let data;
+      try { data = JSON.parse(e.data); } catch { return; }
+      if (data?.retry_ms !== RECONNECT.shutdownMs) return;
+      shutdownUntil = now() + RECONNECT.shutdownMs + Math.round(random() * 5000);
+      cancelWork(); closeStream(); stopPolling();
+      env.clearTimeout(reconnectTimer); reconnectTimer = null; waitingVisible = false;
+      attempts = Math.max(attempts, 4);
+      setConnection("reconnecting");
+      scheduleStep(shutdownUntil - now());
+    });
     for (const name of EVENTS) {
       es.addEventListener(name, (e) => {
         if (es !== sse) return;                          // a stream this page already let go of
@@ -195,6 +210,8 @@ export function createStream(opts) {
         try { data = JSON.parse(e.data); } catch { return; }
         if (!spoke) { spoke = true; alive(); if (again) catchUp(); }
         else alive();
+        // #1823: a clock reading is about now, not about order: it is never held behind a catch-up (it would be stale).
+        if (name === "clock") { emit(name, data); return; }
         live(name, data, name === "message" ? e.lastEventId : null);
       });
     }
@@ -216,15 +233,16 @@ export function createStream(opts) {
     else setConnection("reconnecting");
     scheduleStep();
   }
-  function scheduleStep() {
+  function scheduleStep(delay) {
     if (reconnectTimer || closed || suspended || ended) return;
-    const ms = reconnectDelay(attempts++, random);
+    const ms = Math.max(delay ?? reconnectDelay(attempts++, random), shutdownUntil - now());
     retryAt = now() + ms;
     emit("retry", { inMs: ms });
     reconnectTimer = env.setTimeout(() => { reconnectTimer = null; step(); }, ms);
   }
   function step() {
     if (closed || suspended || ended) return;
+    if (shutdownUntil > now()) { scheduleStep(shutdownUntil - now()); return; }
     if (hidden()) { waitingVisible = true; return; }    // not while nobody looks: the next step waits to be shown
     if (opts.transport === "poll") { pollProbe(); return; }
     openStream(true);
@@ -255,7 +273,7 @@ export function createStream(opts) {
    * It opens no transport: still the one EventSource, and no polling loop.
    */
   function catchUp() {
-    if (closed || ended) return Promise.resolve(false);
+    if (closed || ended || shutdownUntil > now()) return Promise.resolve(false);
     if (catching) return catching;
     env.clearTimeout(retryTimer); retryTimer = null;
     setHydration("catching");
@@ -327,6 +345,9 @@ export function createStream(opts) {
       if (closed || !suspended || ended) return;
       suspended = false;
       epoch++;
+      if (shutdownUntil > now()) {
+        setConnection("reconnecting"); scheduleStep(shutdownUntil - now()); return;
+      }
       attempts = 0;
       if (opts.transport === "poll") { startPolling(); return; }
       openStream(true);