@songsid/agend 2.2.0 → 2.2.5

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

@@ -5,15 +5,18 @@ import { html, useEffect, useLayoutEffect, useRef, useState } from "./app-html.j
 import { Icon } from "./ui-icons.js";
 import { Toasts } from "./ui-toast.js";
 import { ConfirmHost } from "./ui-confirm.js";
+import { ColorDialogHost } from "./identity-color.js";
 import { t, lang, setLang, onLang } from "./app-i18n.js";
-import { appStore, createStore, useStore } from "./app-store.js";
+import { appStore, createStore, guestBadge, guestPage, useStore } from "./app-store.js";
 import { navStore } from "./app-nav.js";
-import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath, fleetPath } from "./app-route.js";
+import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, fleetEntryPath } 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, namesStore, setNamesPrimary } from "./instance-nav.js";
 import { UsageRail, usageRailStore } from "./header-tools.js";
+import { OwnerCssKeepBar } from "./owner-css.js";
+import { AgentWidget, fleetBinds, sidebarWidget, sidebarWidgetStore } from "./agent-widget.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 });
@@ -36,6 +39,25 @@ let newInstanceOpener = null;
 export function setNewInstanceOpener(fn) { newInstanceOpener = fn; }
 export function requestNewInstance() { if (newInstanceOpener) newInstanceOpener(); }
 
+/**
+ * #2074: whether this page's session may make an agent — an admin's (/auth/session's tier); a guest's create is refused.
+ * Asked once per page; a session that ends takes the buttons away. A display hint only: the create route decides.
+ */
+export const canCreateStore = createStore({ value: false });
+let canCreateOf = null;                          // the AgendAuth asked (one per page)
+export function useCanCreate() {
+  const s = useStore(canCreateStore);
+  useEffect(() => {
+    const auth = typeof window !== "undefined" ? window.AgendAuth : undefined;
+    if (!auth || typeof auth.canWrite !== "function" || canCreateOf === auth) return;
+    canCreateOf = auth;
+    canCreateStore.set({ value: false });
+    Promise.resolve(auth.canWrite()).then((v) => { if (canCreateOf === auth && !auth.sessionEnded?.()) canCreateStore.set({ value: v === true }); }, () => {});
+    auth.onSessionEnd?.(() => { if (canCreateOf === auth) canCreateStore.set({ value: false }); });
+  }, []);
+  return s.value;
+}
+
 /** An app-level dialog (New instance): rendered by the shell until closed, whatever panel is showing. */
 export function showDialog(Component, props = {}) { shellStore.set({ dialog: { Component, props } }); }
 export function closeDialog() { shellStore.set({ dialog: null }); }
@@ -175,7 +197,7 @@ function SidebarResize() {
     handle.addEventListener("pointercancel", cancel);
     handle.addEventListener("lostpointercapture", cancel);
   };
-  return html`<div class="side-resize" role="separator" aria-orientation="vertical" tabindex="0" aria-controls="sidebar"
+  return html`<div data-trust="navigation" 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>`;
@@ -244,9 +266,8 @@ export function signInHref() {
 function Sidebar({ route, onNewInstance, viewOnly }) {
   const app = useStore(appStore);
   const shell = useStore(shellStore);
-  // #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);
+  const canCreate = useCanCreate();
+  const on = (panel) => !!route && route.panel === panel;
   // 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}
     aria-current=${on(panel) ? "page" : undefined} aria-label=${count ? `${label} (${t("app.needsCount", count)})` : undefined} onClick=${closeDrawer}>
@@ -255,39 +276,55 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
   // View-only (an anonymous reader, #1408 §3): View and a way to sign in — nothing that needs a session is rendered.
   if (viewOnly) {
     return html`<aside id="sidebar" class="sidebar" aria-label=${t("app.menu")}>
-      <div class="side-head">
+      <div class="side-head" data-trust="navigation">
         <a class="brand" href="/view" onClick=${closeDrawer}>${t("app.brand")}</a>
         <button type="button" class="icon-btn side-collapse" onClick=${toggleSidebar} aria-label=${narrow() ? t("app.closeMenu") : t("app.collapse")} title=${narrow() ? t("app.closeMenu") : t("app.collapse")} aria-controls="sidebar"><${Icon} name="sidebar" /></button>
       </div>
-      <nav class="side-nav" aria-label=${t("app.menu")}>${navLink("view", "/view", "view", t("app.view"))}</nav>
+      <nav data-trust="navigation" class="side-nav" aria-label=${t("app.menu")}>${navLink("view", "/view", "view", t("app.view"))}</nav>
       ${shell.side ? html`<${shell.side.Component} />` : html`<${ViewOnlyNav} route=${route} />`}
-      <div class="side-foot">
+      <div class="side-foot" data-trust="navigation">
         <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.
+  // #1920 phase 3: a guest's sidebar — its own agents to pick from, who it is signed in as, and its session; no fleet,
+  // Needs you, View, Settings, new agent or widget (each is an admin's, and the server refuses a guest them anyway).
+  if (guestPage()) {
+    return html`<aside id="sidebar" class="sidebar" aria-label=${t("app.menu")}>
+      <div class="side-head" data-trust="navigation">
+        <a class="brand" href="/ui" onClick=${closeDrawer}>${t("app.brand")}</a>
+        <button type="button" class="icon-btn side-collapse" onClick=${toggleSidebar} aria-label=${narrow() ? t("app.closeMenu") : t("app.collapse")} title=${narrow() ? t("app.closeMenu") : t("app.collapse")} aria-controls="sidebar"><${Icon} name="sidebar" /></button>
+      </div>
+      <${InstanceNav} route=${route} items=${app.instances} loaded=${app.ready !== false} exec=${app.exec} awaiting=${app.awaiting} onPick=${closeDrawer} />
+      <div class="side-foot" data-trust="navigation">
+        <${GuestChip} />
+        <${SessionMenu} />
+      </div>
+      <${SidebarResize} />
+    </aside>`;
+  }
+  // #1675: the whole fleet, from anywhere — top left, so at the top of a phone's drawer too. #2183 (the user's call): the
+  // one Fleet entry ("Fleet" / "Fleet 概覽"), on the tab this device used last (the Org chart the first time); an agent's
+  // View, Log and Details are its header's tabs, so the sidebar has no "Fleet" (Details) or "View" row of its own.
   const onFleet = !!route && route.panel === "fleet";
-  const overview = html`<a class=${`side-row side-overview${onFleet ? " active" : ""}`} href=${fleetPath("org")}
+  const overview = html`<a class=${`side-row side-overview${onFleet ? " active" : ""}`} href=${fleetEntryPath(route)}
     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">
+    <div class="side-head" data-trust="navigation">
       <a class="brand" href="/ui" onClick=${closeDrawer}>${t("app.brand")}</a>
       <button type="button" class="icon-btn side-collapse" onClick=${toggleSidebar} aria-label=${narrow() ? t("app.closeMenu") : t("app.collapse")} title=${narrow() ? t("app.closeMenu") : t("app.collapse")} aria-controls="sidebar"><${Icon} name="sidebar" /></button>
-      <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")}>
+    <nav data-trust="navigation" 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"))}
+      ${canCreate && onNewInstance ? html`<button type="button" class="side-row side-new" onClick=${onNewInstance}><${Icon} name="plus" /><span class="grow">${t("app.newAgent")}</span></button>` : null}
     </nav>
     ${shell.side ? html`<${shell.side.Component} />` : html`<${InstanceNav} route=${route} items=${app.instances} loaded=${app.ready !== false}
         exec=${app.exec} awaiting=${app.awaiting} onPick=${closeDrawer} />`}
-    <div class="side-foot">
+    <${SidebarWidget} app=${app} />
+    <div class="side-foot" data-trust="navigation">
       ${navLink("settings", settingsPath(), "settings", t("app.settings"))}
       <${SessionMenu} />
     </div>
@@ -295,6 +332,24 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
   </aside>`;
 }
 
+/** #1920 phase 3: "Guest · <name> (<platform>)" — who this guest's page is signed in as; what a guest sees, in its title. */
+const PLATFORM_NAMES = { discord: "Discord", telegram: "Telegram" };
+function GuestChip() {
+  const { name, platform } = guestBadge();
+  const where = PLATFORM_NAMES[platform] || platform;
+  const label = name ? (where ? t("app.guestAsOn", name, where) : t("app.guestAs", name)) : t("app.guestChip");
+  // Inside .side-foot (a marked, stock-trusted element): no trust marker of its own — effect-stock-trust's closed inventory
+  // refuses any element it does not know, which would hide a guest's static effect posters (#2101 review).
+  return html`<p class="guest-chip" title=${t("app.guestHint")}><${Icon} name="user" size=${14} /><span class="grow">${label}</span></p>`;
+}
+
+/** #1629 r4-4: the person's own sidebar widget (their synced preference), with the fleet's counts. */
+function SidebarWidget({ app }) {
+  useStore(sidebarWidgetStore);
+  const widget = sidebarWidget();
+  return widget ? html`<div class="side-widget" data-trust="widget"><${AgentWidget} slot="sidebar" widget=${widget} binds=${fleetBinds(app.instances, app.exec, app.awaiting)} /></div>` : null;
+}
+
 /** The anonymous View reader's list: View's roster read (no status frames without a session), the same component. */
 function ViewOnlyNav({ route }) {
   return html`<${RosterNav} route=${route} viewOnly=${true} onPick=${closeDrawer} />`;
@@ -328,7 +383,7 @@ export function DevicePrefs({ labels = false } = {}) {
 function PrefsPopover() {
   return html`<details class="prefs-pop">
     <summary class="icon-btn" aria-label=${t("app.devicePrefs")} title=${t("app.devicePrefs")}><${Icon} name="sun" /></summary>
-    <div class="pop" role="group" aria-label=${t("app.devicePrefs")}><${DevicePrefs} labels=${true} /></div>
+    <div data-trust="popover" class="pop" role="group" aria-label=${t("app.devicePrefs")}><${DevicePrefs} labels=${true} /></div>
   </details>`;
 }
 
@@ -336,20 +391,23 @@ function PrefsPopover() {
  * The header every panel shows: ☰ (phone, or a collapsed sidebar), its title and status, then its actions. `nav`
  * (#1523 N2): an instance page's view switch — beside the title on a wide screen, a row of tabs under it on a phone.
  */
-export function PanelHeader({ title, sub, children, headingRef, nav }) {
+export function PanelHeader({ title, sub, children, headingRef, nav, notice }) {
   const shell = useStore(shellStore);
-  return html`<header class=${`panel-head${shell.collapsed ? " collapsed" : ""}`}>
+  const canCreate = useCanCreate() && !!newInstanceOpener;
+  return html`<header data-trust="header" class=${`panel-head${shell.collapsed ? " collapsed" : ""}`}>
     <button type="button" id="sbOpen" class="icon-btn sb-open" onClick=${() => (narrow() ? openDrawer() : toggleSidebar())}
       aria-label=${narrow() ? t("app.openMenu") : t("app.expand")} title=${narrow() ? t("app.openMenu") : t("app.expand")} aria-controls="sidebar" aria-expanded=${shell.drawer ? "true" : "false"}><${Icon} name="menu" /></button>
+    ${canCreate && shell.collapsed ? html`<button type="button" class="icon-btn sb-new" onClick=${requestNewInstance} aria-label=${t("app.newAgent")} title=${t("app.newAgent")}><${Icon} name="plus" /></button>` : null}
     <div class="panel-title"><h1 ref=${headingRef} tabindex="-1">${title}</h1>${sub ? html`<div class="panel-sub">${sub}</div>` : null}</div>
     ${nav || null}
     <div class="panel-actions">${children}</div>
+    ${notice || null}
   </header>`;
 }
 
 /**
- * #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.
+ * #1523 N2: the instance a page is about — Chat, View, Log (#1218) or Details of it — or null. #2183: with one open, the
+ * phone's Chat tab is current and goes to its chat.
  */
 export function openInstanceOf(route) {
   return route && (route.panel === "chat" || route.panel === "view" || route.panel === "log" || route.panel === "details") && route.instance ? route.instance : null;
@@ -360,24 +418,28 @@ function BottomTabs({ route, viewOnly }) {
   let last = null;
   try { last = localStorage.getItem("agend_last_instance"); } catch { /* none */ }
   const open = openInstanceOf(route);
-  const chatHref = open && route.panel !== "view" ? chatPath(open) : route && route.panel === "chat" && route.instance ? chatPath(route.instance) : last ? chatPath(last) : "/ui";
+  // #2183: Chat stands for the open agent's pages (its View, Log and Details are the tabs under its header), so it goes to that agent's chat.
+  const chatHref = open ? chatPath(open) : last ? chatPath(last) : "/ui";
   const anyAwaiting = Object.keys(app.awaiting).length;
   const tab = (href, icon, label, active, badge, badgeLabel) => html`<a class=${`tab${active ? " active" : ""}`} href=${href} aria-current=${active ? "page" : undefined}>
     <${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 === "log" || route.panel === "details") && route.instance ? viewPath(route.instance) : viewPath(lastView);
   if (viewOnly) {
-    return html`<nav class="tabs" aria-label=${t("app.menu")}>
+    let lastView = null;
+    try { lastView = localStorage.getItem("agend_last_view"); } catch { /* none */ }
+    const viewHref = route && route.panel === "view" && route.instance ? viewPath(route.instance) : viewPath(lastView);
+    return html`<nav data-trust="navigation" class="tabs" aria-label=${t("app.menu")}>
       ${tab(viewHref, "view", t("app.view"), route && route.panel === "view")}
       ${tab(signInHref(), "user", t("app.signIn"), false)}
     </nav>`;
   }
-  return html`<nav class="tabs" aria-label=${t("app.menu")}>
-    ${tab(chatHref, "chat", t("app.chat"), route && route.panel === "chat", anyAwaiting)}
+  // #1920: a guest has only its chats (the drawer lists them): no tabs to switch between.
+  if (guestPage()) return null;
+  // #2183 (the user's call): four tabs — Chat (current on /ui and on any of an agent's pages), Needs you, Fleet (on its
+  // last tab), Settings.
+  return html`<nav data-trust="navigation" class="tabs" aria-label=${t("app.menu")}>
+    ${tab(chatHref, "chat", t("app.chat"), !!open || (!!route && route.panel === "chat"), anyAwaiting)}
     ${tab(NEEDS_PATH, "inbox", t("app.needsTab"), route && route.panel === "needs", (app.needs || []).length, t("app.needsCount", (app.needs || []).length))}
-    ${tab(open ? detailsPath(open) : "/ui/fleet", "fleet", t("app.fleet"), route && (route.panel === "fleet" || route.panel === "details"))}
-    ${tab(viewHref, "view", t("app.view"), route && route.panel === "view")}
+    ${tab(fleetEntryPath(route), "fleet", t("app.fleet"), route && route.panel === "fleet")}
     ${tab(settingsPath(), "settings", t("app.settings"), route && route.panel === "settings")}
   </nav>`;
 }
@@ -386,7 +448,7 @@ function ConnectionLine() {
   const { connection, hydration, retryHydration } = useStore(appStore);
   // A late catch-up that is not done: the chat may be missing what was open before it loaded (#1425 review).
   if (hydration === "retrying" || hydration === "failed") {
-    return html`<div class="conn" role="status">${hydration === "failed" ? t("app.hydrateFailed") : t("app.hydrating")}
+    return html`<div data-trust="status" class="conn" role="status">${hydration === "failed" ? t("app.hydrateFailed") : t("app.hydrating")}
       ${hydration === "failed" && retryHydration ? html` <button type="button" class="btn btn-sm" onClick=${() => retryHydration()}>${t("app.retry")}</button>` : null}</div>`;
   }
   if (connection === "reconnecting") return html`<${Reconnecting} />`;
@@ -400,7 +462,7 @@ function Reconnecting() {
   const { retryAt } = useStore(appStore);
   useTick(true);
   const s = typeof retryAt === "number" ? Math.max(0, Math.ceil((retryAt - NOW()) / 1000)) : 0;
-  return html`<div class="conn reconnecting" role="status">${s > 0 ? t("app.connReconnectingIn", s) : t("app.connReconnecting")}</div>`;
+  return html`<div data-trust="status" class="conn reconnecting" role="status">${s > 0 ? t("app.connReconnectingIn", s) : t("app.connReconnecting")}</div>`;
 }
 
 const NOW = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
@@ -424,8 +486,21 @@ export function PendingChanges({ inline = false } = {}) {
   const { pendingChanges } = useStore(appStore);
   const list = pendingChanges || [];
   useTick(list.some(p => p.state === "pending"));
+  // #2168: inline (Settings' own column), a request that has just started waiting is brought into view — on a phone the
+  // person applied far down the list, and the card that says where to confirm it sat above the screen. Once per request.
+  const box = useRef(null), shown = useRef(new Set());
+  useEffect(() => {
+    if (!inline || !box.current) return;
+    for (const p of list) {
+      if (p.state !== "pending" || shown.current.has(p.id)) continue;
+      shown.current.add(p.id);
+      const card = box.current.querySelector(`[data-pending="${p.id}"]`);
+      const still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (card && typeof card.scrollIntoView === "function") card.scrollIntoView({ block: "nearest", behavior: still ? "auto" : "smooth" });
+    }
+  });
   if (!list.length) return null;
-  return html`<div class=${`pending-stack${inline ? " inline" : ""}`} role="region" aria-label=${t("app.pendingTitle")}>${list.map(p => html`<section key=${p.id} class=${`pending-card ${p.state}`} role="status">
+  return html`<div data-trust="confirmation" ref=${box} class=${`pending-stack${inline ? " inline" : ""}`} role="region" aria-label=${t("app.pendingTitle")}>${list.map(p => html`<section key=${p.id} data-pending=${p.id} class=${`pending-card ${p.state}`} role="status">
     <div class="pending-head"><${Icon} name=${p.state === "applied" ? "check" : p.state === "pending" || p.state === "applying" ? "clock" : "alert"} size=${16} />
       <strong>${t(`app.pending_${p.state}`)}</strong>
       ${p.state === "pending" ? html`<span class="pending-left">${t("app.pendingLeft", mmss(p.deadline - NOW()))}</span>` : null}
@@ -450,7 +525,7 @@ function OperationLine({ route }) {
     : op.phase === "posting" || op.phase === "watching" ? t("app.opApplying")
     : op.phase === "failed" ? t("app.opFailed") : restart ? t("app.opRestart") : failedRows ? t("app.opPartial") : t("app.opDone");
   const busy = op.phase === "writing" || op.phase === "posting" || op.phase === "watching";
-  return html`<div class=${`conn op-line${busy ? "" : op.phase === "failed" || restart || failedRows ? " bad" : " ok"}`} role="status">
+  return html`<div data-trust="status" class=${`conn op-line${busy ? "" : op.phase === "failed" || restart || failedRows ? " bad" : " ok"}`} role="status">
     <span>${text}</span> <a class="btn btn-sm" href=${settingsPath()}>${t("app.openSettings")}</a></div>`;
 }
 
@@ -497,21 +572,24 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     vv.addEventListener("resize", onResize);
     return () => vv.removeEventListener("resize", onResize);
   }, []);
-  const cls = ["shell", shell.collapsed ? "sb-collapsed" : "", shell.drawer ? "sb-open" : "", shell.keyboard ? "kb-open" : ""].filter(Boolean).join(" ");
+  const guest = guestPage();             // #1920: a guest's page — no operations, usage, pending changes or owner CSS
+  const cls = ["shell", shell.collapsed ? "sb-collapsed" : "", shell.drawer ? "sb-open" : "", shell.keyboard ? "kb-open" : "", guest ? "guest" : ""].filter(Boolean).join(" ");
   return html`<div class=${cls}>
-    <a class="skip" href="#main">${t("app.skip")}</a>
+    <a data-trust="navigation" class="skip" href="#main">${t("app.skip")}</a>
     <${Sidebar} route=${nav.route} onNewInstance=${onNewInstance} viewOnly=${viewOnly} />
     <div class="scrim" onClick=${closeDrawer} aria-hidden="true"></div>
     <main id="main" class="main" tabindex="-1" inert=${shell.drawer && narrow() ? true : undefined}>
       <${ConnectionLine} />
-      ${viewOnly ? null : html`<${OperationLine} route=${nav.route} />`}
+      ${viewOnly || guest ? null : html`<${OperationLine} route=${nav.route} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
-    <${UsageRail} route=${nav.route} />
+    ${guest ? null : html`<${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} />`}
+    ${viewOnly || guest || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}
     <${ConfirmHost} />
+    <${ColorDialogHost} />
+    ${viewOnly || guest ? null : html`<${OwnerCssKeepBar} />`}
     <${Toasts} />
   </div>`;
 }

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

@@ -26,6 +26,20 @@ export function createStore(initial) {
 export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [], connections: null,
   hydration: "none", retryHydration: null });
 
+/**
+ * #1920 phase 3: this page is a guest's — the server says so on <body> (data-tier="guest"). A guest sees only its own
+ * agents' chats: no fleet, Needs you, View, Settings, filters, commands or new agent, and nothing it may not read is asked
+ * for (each would be refused). The server checks every request regardless; this only keeps the page to what works.
+ */
+export function guestPage() {
+  return typeof document !== "undefined" && !!document.body && document.body.dataset.tier === "guest";
+}
+/** Who a guest's page is signed in as: its web name and its platform (the server's, on <body>). */
+export function guestBadge() {
+  const d = typeof document !== "undefined" && document.body ? document.body.dataset : {};
+  return { name: d.guestName || "", platform: d.guestPlatform || "" };
+}
+
 /** Fold one status frame (stream or poll) into the store. */
 export function applyStatus(d) {
   if (!d || !Array.isArray(d.instances)) return;
@@ -39,8 +53,21 @@ export function applyStatus(d) {
     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,
+    // #1629: the agents' themes' revision (app-themes.js re-reads them when it moves).
+    themesRev: typeof d.themes_rev === "number" ? d.themes_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 });
+    hostMemory: d.host_memory === "elevated" || d.host_memory === "critical" ? d.host_memory : null,
+    // #2015: while it lasts, the largest processes in the fleet and whose they are (at most 3; anything else dropped).
+    hostMemoryTop: hostMemoryTop(d.host_memory_top) });
+}
+
+/** #2015: the status frame's host_memory_top, as the dashboard keeps it: well-formed entries only, at most 3. */
+export function hostMemoryTop(raw) {
+  if (!Array.isArray(raw)) return [];
+  return raw.slice(0, 3).flatMap(p => p && typeof p.name === "string" && Number.isSafeInteger(p.pid) && Number.isSafeInteger(p.rssBytes) && p.rssBytes >= 0
+    && ["fleet", "tmux", "instance", "other"].includes(p.owner)
+    ? [{ name: p.name.slice(0, 64), pid: p.pid, rssBytes: p.rssBytes, owner: p.owner, ...(p.owner === "instance" && typeof p.instance === "string" ? { instance: p.instance.slice(0, 128) } : {}) }]
+    : []);
 }
 
 /** One "activity" event: an instance started or stopped working. */

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

@@ -30,7 +30,9 @@
 // - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
 // #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"];
+// #1918: traffic — a message between instances moved; delegation — a task opened, or its report closed it (SSE only: the
+// org canvas reads /ui/traffic when it has no stream).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation"];
 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
@@ -68,17 +70,20 @@ export function createStream(opts) {
     const set = listeners.get(name);
     if (set) for (const fn of [...set]) { try { fn(data, extra); } catch (e) { if (env.console) env.console.error(e); } }
   }
+  function sseIngress() {
+    try { return Object.freeze({ source: "sse", receivedAt: now() }); } catch { return undefined; }
+  }
   function setConnection(c) { if (state.connection !== c) { state.connection = c; emit("connection", c); } }
   function setHydration(h) { if (state.hydration !== h) { state.hydration = h; emit("hydration", h); } }
 
   /** A live event: delivered now, or held (in order) while a catch-up snapshot is on its way. */
-  function live(name, data, cursor) {
+  function live(name, data, cursor, extra) {
     if (held) {
-      if (held.length < MAX_HELD) held.push([name, data, cursor]); else held.overflow = true;
+      if (held.length < MAX_HELD) held.push([name, data, cursor, extra]); else held.overflow = true;
       return;
     }
     if (cursor) state.cursor = cursor;
-    emit(name, data);
+    emit(name, data, extra);
     // A full set of open prompts arrives on every (re)connect: whatever a failed catch-up missed is current again.
     if (name === "prompts" && (state.hydration === "failed" || state.hydration === "retrying") && !catching) setHydration("ok");
   }
@@ -86,7 +91,7 @@ export function createStream(opts) {
     const list = held;
     held = null;
     if (!list) return false;
-    for (const [name, data, cursor] of list) { if (cursor) state.cursor = cursor; emit(name, data); }
+    for (const [name, data, cursor, extra] of list) { if (cursor) state.cursor = cursor; emit(name, data, extra); }
     return !!list.overflow;
   }
 
@@ -116,7 +121,7 @@ export function createStream(opts) {
         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);
+        for (const m of d.messages || []) emit("message", m, { source: "poll" });
         if (typeof d.cursor === "string") state.cursor = d.cursor;
         if (Array.isArray(d.deliveries)) emit("deliveries", d.deliveries);
         if (Array.isArray(d.prompts)) emit("prompts", d.prompts);
@@ -206,13 +211,15 @@ export function createStream(opts) {
     for (const name of EVENTS) {
       es.addEventListener(name, (e) => {
         if (es !== sse) return;                          // a stream this page already let go of
+        // Snapshot before parsing or any synchronous connection/hydration observer can consume time.
+        const ingress = name === "message" || name === "agent_reply_live" ? sseIngress() : undefined;
         let data;
         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);
+        live(name, data, name === "message" ? e.lastEventId : null, ingress);
       });
     }
     es.onerror = () => {