@songsid/agend 2.3.0-beta.2 → 2.3.0-beta.21

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

@@ -60,7 +60,7 @@ export function t(key, ...values) {
 
 register("app", {
   en: {
-    brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet overview", view: "View", settings: "Settings", instances: "Instances", newInstance: "New instance",
+    brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet", view: "View", settings: "Settings", instances: "Instances", newInstance: "New instance", newAgent: "New agent",
     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",
@@ -74,11 +74,13 @@ register("app", {
     hydrating: "Loading what is open now…", hydrateFailed: "Could not load what is open now (prompts, ticks).",
     skip: "Skip to the conversation", loadFailed: "This could not be loaded.", retry: "Try again", loading: "Loading…",
     noInstances: "No instances yet", noInstancesHint: "Create one to start chatting.",
+    guestChip: "Guest", guestAs: "Guest · {0}", guestAsOn: "Guest · {0} ({1})", guestHint: "You see only the agents you can already use in chat.",
     session: "Session", signIn: "Sign in", signedIn: "Signed in", signedOut: "Not signed in", thisDevice: "This device", devicePrefs: "Theme and language",
     lastActive: "active {0}", justNow: "just now", minAgo: "{0} min ago", hrAgo: "{0} h ago", signOut: "Sign out",
     signOutAll: "Sign out everywhere", devices: "Signed-in devices", expires: "Ends by {0} at the latest, or after {1} unused",
     failed: "That did not work — try again.", close: "Close", more: "More actions", menu: "Menu",
     pendingTitle: "Changes waiting for confirmation", pending_pending: "Waiting for confirmation", pending_applying: "Confirmed — applying…",
+    pendingWeb: "Confirmed by your account (this browser is web-verified). General is told.",
     pending_applied: "Confirmed and applied", pending_rejected: "Not applied", pending_expired: "Expired — nothing was changed",
     pending_stale: "Not applied — settings changed meanwhile", pending_failed: "Confirmed, but applying it failed",
     pendingChat: "A fleet admin confirms this in chat (General topic).", pendingHost: "Confirm it on the host: {0}", pendingLeft: "{0} left", withdraw: "Withdraw",
@@ -86,13 +88,16 @@ register("app", {
     opDone: "Settings applied", opRestart: "Settings saved — AgEnD needs a restart to use them", opPartial: "Some settings were not applied",
     opFailed: "Settings were not applied", openSettings: "Open Settings",
     pendingSent: "Sent for confirmation — a fleet admin confirms it in chat.",
+    pendingSelfSent: "Confirmed by your account (this browser is web-verified) — applying.",
     needsNav: "Needs you", needsTab: "Needs you", needsCount: "{0} waiting",
+    // #2293: global search — chats, cross-instance messages and tasks (not the sidebar's filter of agents).
+    search: "Search", searchTitle: "Search chats, messages between agents and tasks ({0})",
     confirmTitle: "Please confirm", confirmOk: "Continue", cancel: "Cancel",
     // The server's own wording (src/locale.ts needs.reason.*), so the web says what Discord says.
     needs_reason_hang: "Not responding", needs_reason_exited: "Exited", needs_reason_assist: "Waiting at its terminal", needs_reason_permission: "Permission needed", needs_reason_dangerous_command: "Dangerous command waiting", needs_reason_login: "Sign-in needed", needs_reason_dialog: "Waiting at a dialog", needs_reason_terminal_input: "May be waiting for input", needs_reason_auth_paused: "Paused: sign-in needed", needs_reason_crashed: "Crashed", needs_reason_delivery_uncertain: "Could not confirm delivery", needs_reason_delivery_failed: "Delivery failed",
   },
   "zh-TW": {
-    brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance",
+    brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance", newAgent: "新增 Agent",
     collapse: "隱藏側邊欄", expand: "顯示側邊欄", openMenu: "打開側邊欄", closeMenu: "關閉側邊欄",
     resizeSidebar: "側邊欄寬度", resizeSidebarHint: "拖曳調整寬度 · 按兩下恢復預設",
     names: "名稱", namesNickname: "暱稱優先", namesInstance: "實際名稱優先",
@@ -106,11 +111,13 @@ register("app", {
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",
     skip: "跳到對話", loadFailed: "無法載入。", retry: "再試一次", loading: "載入中…",
     noInstances: "還沒有 instance", noInstancesHint: "建立一個就能開始聊天。",
+    guestChip: "訪客", guestAs: "訪客 · {0}", guestAsOn: "訪客 · {0}（{1}）", guestHint: "你只會看到在聊天中本來就能用的 agent。",
     session: "登入狀態", signIn: "登入", signedIn: "已登入", signedOut: "尚未登入", thisDevice: "這台裝置", devicePrefs: "主題與語言",
     lastActive: "{0}活動", justNow: "剛剛", minAgo: "{0} 分鐘前", hrAgo: "{0} 小時前", signOut: "登出",
     signOutAll: "全部登出", devices: "已登入的裝置", expires: "最晚 {0} 結束；閒置 {1} 也會結束",
     failed: "沒有成功，請再試一次。", close: "關閉", more: "更多動作", menu: "選單",
     pendingTitle: "等待確認的變更", pending_pending: "等待確認", pending_applying: "已確認——套用中…",
+    pendingWeb: "由你的帳號確認（這個瀏覽器已通過網頁驗證），也會通知 General。",
     pending_applied: "已確認並套用", pending_rejected: "未套用", pending_expired: "已逾時——沒有任何變更",
     pending_stale: "未套用——設定在這期間已變動", pending_failed: "已確認，但套用失敗",
     pendingChat: "由 fleet 管理員在聊天（General topic）中確認。", pendingHost: "請在主機上確認：{0}", pendingLeft: "剩 {0}", withdraw: "撤回",
@@ -118,7 +125,9 @@ register("app", {
     opDone: "設定已套用", opRestart: "設定已儲存——需要重新啟動 AgEnD 才會生效", opPartial: "部分設定沒有套用",
     opFailed: "設定沒有套用", openSettings: "開啟設定",
     pendingSent: "已送出確認——由 fleet 管理員在聊天中確認。",
+    pendingSelfSent: "已由你的帳號確認（這個瀏覽器已通過網頁驗證）——套用中。",
     needsNav: "等你處理", needsTab: "待處理", needsCount: "{0} 件待處理",
+    search: "搜尋", searchTitle: "搜尋聊天、agent 之間的訊息與任務（{0}）",
     confirmTitle: "請確認", confirmOk: "繼續", cancel: "取消",
     needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗",
   },

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

@@ -18,7 +18,7 @@
 // - The status frame's prefs_rev: another device changed something; the host's values are read again and applied. A
 //   revision counts as seen only once its read succeeded (a failed one is tried again, at most every few seconds).
 import { deviceLanguage, lang, setLang } from "./app-i18n.js";
-import { appStore } from "./app-store.js";
+import { appStore, guestPage } from "./app-store.js";
 
 const SYNCED_FLAG = "agend_prefs_synced";
 const RETRY_MS = 5000;
@@ -31,6 +31,7 @@ export const SYNCED = {
   "nav.collapsed": { ls: "agend_instance_collapsed", ...json },
   "nav.filter": { ls: "agend_instance_filter", ...json },
   "nav.favorites": { ls: "agend_favorites", ...json },   // #1664
+  "nav.sort": { ls: "agend_nav_sort", ...json },          // #2179
   "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
   // #1629 r2 (d): "Show agents' themes and effects" — on unless turned off (only "off" is cached).
@@ -40,8 +41,9 @@ export const SYNCED = {
   "card.sizeByInstance": { ls: "agend_card_sizes", ...json },
   // #1629 r4-4: the person's own sidebar widget ({ spec, data }), drawn by the page's own components.
   "widget.sidebar": { ls: "agend_widget_sidebar", ...json },
-  // #1958: where identity colours show by default (ring + bar unless chosen), and the host's switch to turn them off.
+  // #1958: where identity colours show by default (#2056: name, bar and ring unless chosen), and the host's switch to turn them off.
   "color.show": { ls: "agend_color_show", ...json },
+  "theme.pageByInstance": { ls: "agend_theme_page", ...json },   // #2196
   "color.off": { ls: "agend_color_off", toLocal: (v) => (v === true ? "on" : null), fromLocal: (s) => (s === "on" ? true : undefined) },
 };
 // #1629: fixed personal scope. A separate session-bound owner-effect store synchronizes these, never this host cache.
@@ -77,6 +79,15 @@ const inflight = new Map();    // key → writes sent and not answered yet
 let flushTimer = null;
 let writes = Promise.resolve();   // one write at a time, in the order they were made
 const listeners = new Set();
+// #2193: whether the signed-in person has a personal effect slot chosen (their fx.* keys: in the page's data-prefs and
+// in every host read, never in this host cache). The effects runtime is loaded only when there is something to play.
+const ownerEffectsIn = (values) => !!values && OWNER_EFFECT_PREF_KEYS.some((k) => own(values, k) && values[k] != null && values[k] !== "");
+let ownerFx = initial ? ownerEffectsIn(initial.values) : false;
+const ownerFxListeners = new Set();
+/** Whether the person has any personal effect (fx.page/header/sidebar/box/cursor) chosen, as this page last read. */
+export function ownerEffectsChosen() { return ownerFx; }
+/** Called when that changes. Returns the unsubscribe. */
+export function onOwnerEffectsChanged(fn) { ownerFxListeners.add(fn); return () => ownerFxListeners.delete(fn); }
 
 // The host's values into the cache, now — before the sidebar, the tour or the first-run card read their keys. A key
 // the host does not have: the default, on a device in step with the host; this device's own (to upload) otherwise.
@@ -88,9 +99,9 @@ if (host) {
   }
 }
 
-/** This page may change the host's preferences: the signed-in app, not over the public link. */
+/** This page may change the host's preferences: the signed-in app, not over the public link, not a guest's (#1920). */
 export function prefsWritable() {
-  return !!initial && !(typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1");
+  return !!initial && !guestPage() && !(typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1");
 }
 /**
  * The value in force for a key, in memory — never only in this browser's storage (a full storage must not bring back
@@ -117,6 +128,8 @@ function take(body) {
   if (!isView(body) || (rev !== null && body.rev < rev)) return false;
   rev = body.rev;
   host = hostValues(body.values);
+  const fx = ownerEffectsIn(body.values);
+  if (fx !== ownerFx) { ownerFx = fx; for (const fn of [...ownerFxListeners]) { try { fn(fx); } catch { /* the rest still hear */ } } }
   return true;
 }
 

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

@@ -1,7 +1,7 @@
 // #1408 §3: the app's routes on the client. The same table as the server's classifier (src/web-shell-routes.ts;
 // a test runs both over one list of cases). Pure: no DOM, no history.
 
-export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "config"];
+export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "usage", "config"];
 export const SETTINGS_SECTIONS = ["device", "appearance", "agents", "bots", "classic", "general", "web", "advanced"];   // #1604: device first
 const MAX_INSTANCE_NAME = 128;
 const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;
@@ -50,6 +50,24 @@ export function viewPath(instance) { return instance ? `/view/${encodeURICompone
 export function detailsPath(instance) { return `/ui/fleet/agent/${encodeURIComponent(instance)}`; }
 export function logPath(instance) { return `/ui/log/${encodeURIComponent(instance)}`; }
 export function fleetPath(tab) { return tab && tab !== "tasks" ? `/ui/fleet/${tab}` : "/ui/fleet"; }
+/** #2183: this device's last Fleet tab (Fleet remembers it; the Org chart the first time). */
+export const LAST_FLEET_TAB_KEY = "agend_last_fleet_tab";
+export function lastFleetTab() {
+  let tab = null;
+  try { tab = localStorage.getItem(LAST_FLEET_TAB_KEY); } catch { /* storage blocked: the default */ }
+  return FLEET_TABS.includes(tab) ? tab : "org";
+}
+/**
+ * #2183: where Fleet (the sidebar's entry, the phone's tab) goes — on a Fleet tab, that tab (the route, not storage: the
+ * panel stores it in an effect after this render, and a storage write re-renders nothing); anywhere else, the last one.
+ */
+export function fleetEntryPath(route) {
+  return fleetPath(route && route.panel === "fleet" ? route.tab : lastFleetTab());   // parseRoute names only FLEET_TABS
+}
+export function rememberFleetTab(tab) {
+  if (!FLEET_TABS.includes(tab)) return;
+  try { localStorage.setItem(LAST_FLEET_TAB_KEY, tab); } catch { /* this page only */ }
+}
 export const NEEDS_PATH = "/ui/needs";
 export function settingsPath(section) { return section && section !== "agents" ? `/settings/${section}` : "/settings"; }
 export function routePath(route) {

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

@@ -4,6 +4,7 @@
 import { html, useEffect, useRef, useState } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t, lang } from "./app-i18n.js";
+import { AuthorizeChip } from "./web-authorize.js";
 
 async function getJson(url) {
   try {
@@ -53,6 +54,7 @@ export function SessionMenu() {
       ${!me ? html`<h3>${t("app.signedOut")}</h3><a class="btn" href=${`/signin?next=${encodeURIComponent(location.pathname)}`}>${t("app.signIn")}</a>` : html`
         <h3>${t("app.signedIn")} · ${me.label}</h3>
         <p class="sub">${t("app.expires", clock(me.expiresAt), span(me.idleMs))}</p>
+        <${AuthorizeChip} />
         ${rows.length > 1 ? html`<h3>${t("app.devices")}</h3><ul class="devices">${rows.map(s => html`<li key=${s.handle}>
           <span class="grow"><span class="name">${s.label}${s.current ? ` · ${t("app.thisDevice")}` : ""}</span><span class="when">${t("app.lastActive", ago(s.lastSeen))}</span></span>
           ${s.current ? null : html`<button type="button" class="btn btn-sm danger" onClick=${() => act("DELETE", `/auth/sessions/${encodeURIComponent(s.handle)}`, refresh)}>${t("app.signOut")}</button>`}</li>`)}</ul>` : null}

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

@@ -7,11 +7,13 @@ 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 { toast } from "./ui-toast.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 { onPrefsChanged, savePref } from "./app-prefs.js";
+import { applyPageTheme, pageNow, resolvedMode, themesStore } from "./app-themes.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
 import { InstanceNav, RosterNav, namesStore, setNamesPrimary } from "./instance-nav.js";
 import { UsageRail, usageRailStore } from "./header-tools.js";
@@ -19,7 +21,7 @@ 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 });
+export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null, banner: null });
 
 /**
  * The mounted panel's own sidebar section, in place of the instance list (View's roster: its groups, filter and order,
@@ -39,10 +41,66 @@ 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 }); }
 
+// ── #2293: global search — an admin's. The dialog lives behind the session gate (/ui/js/search-dialog.js) and loads the
+// first time it opens; the sidebar row, the header's button and the shortcuts only open it. ──
+export const isMacLike = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+/** What the row and tooltips show: ⌘K on a Mac, Ctrl K elsewhere. */
+export const searchShortcut = () => (isMacLike() ? "⌘K" : "Ctrl K");
+/**
+ * Whether this page offers search: an admin's page reached directly. A guest's never, and never over the public link —
+ * the server refuses it there (#2298 review), so no entry, no shortcut, and Ctrl+F stays the browser's.
+ */
+export function searchOffered(admin) {
+  const onLink = typeof document !== "undefined" && !!document.body && document.body.dataset.publicLink === "1";
+  return !!admin && !guestPage() && !onLink;
+}
+let searchModule = null;
+/** Open search; `preset.instance`: narrowed to that agent (Ctrl+F in its chat). */
+export function openSearch(preset = {}) {
+  closeDrawer();
+  (searchModule ??= import("/ui/js/search-dialog.js")).then(
+    (m) => showDialog(m.SearchDialog, { preset }),
+    () => { searchModule = null; toast(t("app.loadFailed"), false); });
+}
+/**
+ * Ctrl+K (⌘K) anywhere opens search; Ctrl+F (⌘F) in an agent's chat opens it narrowed to that agent — elsewhere the
+ * browser's own find stays. Not while another dialog is open (search, open already, has its input focused).
+ */
+export function handleSearchKey(e) {
+  if (!searchOffered(true)) return;
+  if (e.isComposing || e.altKey || e.shiftKey || !(isMacLike() ? e.metaKey : e.ctrlKey)) return;
+  const key = (e.key || "").toLowerCase();
+  if (key !== "k" && key !== "f") return;
+  if (typeof document !== "undefined" && document.querySelector("dialog[open]")) return;
+  const route = navStore.get().route;
+  if (key === "f" && !(route && route.panel === "chat" && route.instance)) return;
+  e.preventDefault();
+  openSearch(key === "f" ? { instance: route.instance } : {});
+}
+
 function readCollapsed() { try { return localStorage.getItem("agend_sidebar") === "hidden"; } catch { return false; } }
 const narrow = () => typeof matchMedia === "function" && matchMedia("(max-width: 899px)").matches;
 
@@ -247,9 +305,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}>
@@ -271,22 +328,39 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       <${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" 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 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"))}
+      ${searchOffered(canCreate) ? html`<button type="button" class="side-row side-search" onClick=${() => openSearch()} title=${t("app.searchTitle", searchShortcut())}
+        aria-keyshortcuts=${isMacLike() ? "Meta+K" : "Control+K"}><${Icon} name="search" /><span class="grow">${t("app.search")}</span><kbd class="kbd-hint" aria-hidden="true">${searchShortcut()}</kbd></button>` : null}
+      ${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} />`}
@@ -299,6 +373,17 @@ 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);
@@ -347,20 +432,25 @@ 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);
+  const admin = useCanCreate();
+  const canCreate = admin && !!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}
+    ${searchOffered(admin) ? html`<button type="button" class="icon-btn sb-search" onClick=${() => openSearch()} aria-label=${t("app.search")} title=${t("app.searchTitle", searchShortcut())}><${Icon} name="search" /></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;
@@ -371,24 +461,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) {
+    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>`;
   }
+  // #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"), route && route.panel === "chat", anyAwaiting)}
+    ${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>`;
 }
@@ -435,8 +529,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 data-trust="confirmation" 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}
@@ -444,6 +551,7 @@ export function PendingChanges({ inline = false } = {}) {
     ${p.label ? html`<div class="pending-label">${p.label}</div>` : null}
     ${Array.isArray(p.summary) && p.summary.length ? html`<ul class="pending-summary">${p.summary.map((line, i) => html`<li key=${i}>${line}</li>`)}</ul>` : null}
     ${p.state === "pending" ? html`<p class="note">${p.confirmation && p.confirmation.kind === "host_cli" ? t("app.pendingHost", `agend settings confirm ${p.id}`) : t("app.pendingChat")}</p>` : null}
+    ${(p.state === "applying" || p.state === "applied") && p.confirmation && p.confirmation.kind === "web" ? html`<p class="note">${t("app.pendingWeb")}</p>` : null}
     ${p.state !== "pending" && p.state !== "applying" && p.state !== "applied" && p.outcome && p.outcome.message ? html`<p class="note">${p.outcome.message}</p>` : null}
     ${p.withdraw ? html`<div class="pending-actions"><button type="button" class="btn btn-sm" onClick=${p.withdraw}>${t("app.withdraw")}</button></div>` : null}
   </section>`)}</div>`;
@@ -493,9 +601,43 @@ function Outlet({ route, seq, panels }) {
   return html`<${C} route=${route} navKey=${`${routeKey(route)}|${seq}|${lang()}`} />`;
 }
 
+/**
+ * #2196: the open agent's colours on the whole page (its theme's page section, or a person's choice), drawn on the
+ * shell in the same render that opens it — no fetch (the themes are on the page already), no flash, colours only, so
+ * no layout moves. Redrawn when the themes, the person's choices, the viewer's switch or the light/dark mode move.
+ */
+function usePageTheme(ref, route) {
+  useStore(themesStore);
+  const [, bump] = useState(0);
+  useEffect(() => onPrefsChanged((changed) => { if (changed.has("theme.pageByInstance") || changed.has("fx.show")) bump((n) => n + 1); }), []);
+  useEffect(() => {
+    const T = globalThis.AgendTheme;
+    const off = T && typeof T.onChange === "function" ? T.onChange(() => bump((n) => n + 1)) : null;
+    let mq = null;
+    try { mq = globalThis.matchMedia ? globalThis.matchMedia("(prefers-color-scheme: light)") : null; } catch { mq = null; }
+    const onMq = () => bump((n) => n + 1);
+    if (mq && typeof mq.addEventListener === "function") mq.addEventListener("change", onMq);
+    return () => { if (typeof off === "function") off(); if (mq && typeof mq.removeEventListener === "function") mq.removeEventListener("change", onMq); };
+  }, []);
+  const mode = resolvedMode();
+  const p = pageNow(mode, route);
+  const key = p ? `${mode}|${JSON.stringify(p)}` : "";
+  useLayoutEffect(() => { applyPageTheme(ref.current, p, mode); }, [key]);
+  // #2199: the agent open now, as body[data-agent] — for a person's own custom CSS to follow (body[data-agent="x"]
+  // { --bg-sidebar: … }); set and cleared in the same render as the page colours, whatever the themes switch says.
+  const agent = openInstanceOf(route);
+  useLayoutEffect(() => {
+    const body = typeof document !== "undefined" ? document.body : null;
+    if (!body || !body.dataset) return;
+    if (agent) body.dataset.agent = agent; else delete body.dataset.agent;
+  }, [agent]);
+}
+
 export function Shell({ panels, onNewInstance, viewOnly = false }) {
   const nav = useStore(navStore);
   const shell = useStore(shellStore);
+  const root = useRef(null);
+  usePageTheme(root, nav.route);
   const [, relang] = useState(0);
   // A language switch re-renders everything and gives the panel a new lease (its key includes the language).
   useEffect(() => onLang(() => relang(n => n + 1)), []);
@@ -508,23 +650,25 @@ 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(" ");
-  return html`<div class=${cls}>
+  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 ref=${root} class=${cls}>
     <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} />`}
+      ${viewOnly || guest || !shell.banner ? null : html`<${shell.banner} />`}
       <${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 ? null : html`<${OwnerCssKeepBar} />`}
+    ${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;
@@ -42,7 +56,18 @@ export function applyStatus(d) {
     // #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,11 @@
 // - 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", "agent_reply_live", "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).
+// #2233: backend_login — a dashboard sign-in started, moved or ended (no details: the page reads its own view).
+// tasks — the task board changed: the card numbers a write touched (SSE only: the board reads again when it is shown).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks"];
 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