@songsid/agend 2.3.0-beta.9 → 2.3.0

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

@@ -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).
@@ -42,7 +43,10 @@ export const SYNCED = {
   "widget.sidebar": { ls: "agend_widget_sidebar", ...json },
   // #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) },
+  // The AI usage view's compact mode: one line per login (usage-dialog.js), in the dialog and the rail alike.
+  "usage.compact": { ls: "agend_usage_compact", 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.
 export const OWNER_EFFECT_PREF_KEYS = Object.freeze(["fx.sidebar", "fx.header", "fx.page", "fx.box", "fx.cursor"]);
@@ -77,6 +81,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.
@@ -117,6 +130,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

@@ -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-shell.js

@@ -9,9 +9,11 @@ import { ColorDialogHost } from "./identity-color.js";
 import { t, lang, setLang, onLang } from "./app-i18n.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,
@@ -62,6 +64,45 @@ export function useCanCreate() {
 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. A guest's never. #2478 (the user's request): over the public link
+ * too, unless the fleet keeps it off there (web.search.public_link: false — the page says data-search-link="0", the
+ * server refuses it), so then no entry, no shortcut, and Ctrl+F stays the browser's.
+ */
+export function searchOffered(admin) {
+  const body = typeof document !== "undefined" ? document.body : null;
+  const offLink = !!body && body.dataset.publicLink === "1" && body.dataset.searchLink === "0";
+  return !!admin && !guestPage() && !offLink;
+}
+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;
 
@@ -245,6 +286,8 @@ appStore.subscribe((s) => {
 
 function statusLabel(i, exec, awaiting) {
   if (awaiting != null) return t("app.needsYou");
+  if (i.startup_phase === "queued") return t("app.statusQueued");
+  if (i.startup_phase === "starting") return t("app.statusStarting");
   if (i.status !== "running") return i.status === "crashed" ? t("app.statusCrashed") : t("app.statusStopped");
   if (exec === "working") return t("app.statusWorking");
   if (exec === "stuck") return t("app.statusStuck");
@@ -252,6 +295,8 @@ function statusLabel(i, exec, awaiting) {
 }
 export function statusClass(i, exec, awaiting) {
   if (awaiting != null) return "warn";
+  if (i?.startup_phase === "starting") return "busy";
+  if (i?.startup_phase === "queued") return "off";
   if (!i || i.status !== "running") return i && i.status === "crashed" ? "bad" : "off";
   return exec === "working" ? "busy" : exec === "stuck" ? "warn" : "ok";
 }
@@ -267,9 +312,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
   const app = useStore(appStore);
   const shell = useStore(shellStore);
   const canCreate = useCanCreate();
-  // #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 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}>
@@ -307,10 +350,11 @@ 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.
+  // #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">
@@ -320,8 +364,8 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
     <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}
@@ -396,11 +440,13 @@ function PrefsPopover() {
  */
 export function PanelHeader({ title, sub, children, headingRef, nav, notice }) {
   const shell = useStore(shellStore);
-  const canCreate = useCanCreate() && !!newInstanceOpener;
+  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>
@@ -409,8 +455,8 @@ export function PanelHeader({ title, sub, children, headingRef, nav, notice }) {
 }
 
 /**
- * #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;
@@ -421,14 +467,15 @@ 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)}
@@ -436,11 +483,12 @@ function BottomTabs({ route, viewOnly }) {
   }
   // #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>`;
 }
@@ -458,6 +506,13 @@ function ConnectionLine() {
   // (agend-auth's banner says that) draw nothing either; only reconnecting and a failed catch-up are shown.
   return null;
 }
+
+/** A connected fleet is still bringing up agents; this is distinct from the reconnect banner. */
+export function StartupLine() {
+  const { startup } = useStore(appStore);
+  if (!startup) return null;
+  return html`<div data-trust="status" class="conn fleet-starting" role="status">${t("app.fleetStarting", startup.ready, startup.total)}</div>`;
+}
 /** #1580: the fleet is not answering (a restart): said, with when the next try is — never a silent stale page. */
 function Reconnecting() {
   const { retryAt } = useStore(appStore);
@@ -487,8 +542,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}
@@ -496,6 +564,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>`;
@@ -545,30 +614,105 @@ 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]);
+}
+
+/** #2478: how far short of its tallest the view must be, with a text field focused, to be a keyboard (not a browser bar). */
+export const KEYBOARD_MIN_PX = 150;
+/** #2478: the on-screen keyboard is up — something is being typed into, and the view is well short of its tallest. */
+export function keyboardUp(height, tallest, typing) { return !!typing && tallest - height > KEYBOARD_MIN_PX; }
+const NOT_TYPED = /^(button|checkbox|radio|range|color|file|submit|reset|image|hidden)$/i;
+/** #2478: an element the keyboard types into — a textarea, a text-like input, or an editable region. */
+export function isTextEntry(el) {
+  if (!el || !el.tagName) return false;
+  const tag = String(el.tagName).toUpperCase();
+  if (tag === "TEXTAREA") return !el.readOnly && !el.disabled;
+  if (tag === "INPUT") return !NOT_TYPED.test(el.type || "text") && !el.readOnly && !el.disabled;
+  return el.isContentEditable === true;
+}
+
 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)), []);
   useEffect(() => { closeDrawer(); }, [nav.seq]);
-  // The bottom tabs give their room to the keyboard on a phone.
+  // The bottom tabs (and the line under the composer) give their room to the keyboard on a phone (#2478).
   useEffect(() => {
     const vv = typeof window !== "undefined" ? window.visualViewport : null;
-    if (!vv) return undefined;
-    const onResize = () => shellStore.set({ keyboard: window.innerHeight - vv.height > 150 });
-    vv.addEventListener("resize", onResize);
-    return () => vv.removeEventListener("resize", onResize);
+    if (!vv || typeof document === "undefined") return undefined;
+    // The tallest the view has been at this width: what it is with no keyboard. innerHeight is no measure on its own —
+    // it shrinks with the keyboard on iOS Safari and, under interactive-widget=resizes-content, on Android — so
+    // innerHeight − height stayed near 0 and the strips stayed between the composer and the keyboard.
+    // Only a touch screen (a coarse pointer) has an on-screen keyboard: a narrow desk window made shorter is not one.
+    // Turned with the keyboard up and the field still focused, the new width has no height without it yet: the keyboard
+    // stays up until the field is left, or the view grows from its lowest by more than a keyboard (put away).
+    let width = -1, tallest = 0, held = false, lowest = 0;
+    const coarse = () => typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
+    const check = () => {
+      const w = Math.round(vv.width), h = vv.height;
+      const typing = coarse() && isTextEntry(document.activeElement);
+      if (w !== width) {                                              // turned, or a new width: measured again
+        held = width !== -1 && typing && shellStore.get().keyboard;
+        width = w; tallest = 0; lowest = h;
+      }
+      if (held) {
+        lowest = Math.min(lowest, h);
+        if (!typing || h - lowest > KEYBOARD_MIN_PX) held = false;    // left the field, or the keyboard was put away
+      }
+      if (!held) tallest = Math.max(tallest, window.innerHeight || 0, typing ? 0 : h);   // the view itself only when not typing
+      const up = held || keyboardUp(h, tallest, typing);
+      if (up !== shellStore.get().keyboard) shellStore.set({ keyboard: up });
+    };
+    check();
+    vv.addEventListener("resize", check);
+    document.addEventListener("focusin", check);
+    document.addEventListener("focusout", check);
+    return () => { vv.removeEventListener("resize", check); document.removeEventListener("focusin", check); document.removeEventListener("focusout", check); };
   }, []);
   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}>
+  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} />
+      <${StartupLine} />
       ${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>
     ${guest ? null : html`<${UsageRail} route=${nav.route} />`}

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

@@ -24,7 +24,7 @@ export function createStore(initial) {
  *  (app-stream.js catchUp) — "catching" / "retrying" / "failed" / "ok"; `retryHydration` asks for it again.
  *  `connections`: how many chat connections the fleet has (#1519 P7: 0 is web-only — the first-run card); null until known. */
 export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [], connections: null,
-  hydration: "none", retryHydration: null });
+  hydration: "none", retryHydration: null, canvasWorker: typeof document !== "undefined" && document.body?.dataset.canvasWorker === "1" });
 
 /**
  * #1920 phase 3: this page is a guest's — the server says so on <body> (data-tier="guest"). A guest sees only its own
@@ -49,7 +49,8 @@ export function applyStatus(d) {
     exec[i.name] = (i.execution_state !== undefined ? i.execution_state : i.state) ?? null;
     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,
+  appStore.set({ canvasWorker: d.canvas_worker === true, ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
+    startup: d.startup?.phase === "starting" ? d.startup : 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,

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

@@ -32,7 +32,10 @@
 // #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
 // #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"];
+// #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).
+// offices — the stored offices changed ({ rev }; SSE only: the Office view reads /ui/offices again).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices"];
 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
@@ -126,6 +129,7 @@ export function createStream(opts) {
         if (Array.isArray(d.deliveries)) emit("deliveries", d.deliveries);
         if (Array.isArray(d.prompts)) emit("prompts", d.prompts);
         if (Array.isArray(d.reply_buttons)) for (const u of d.reply_buttons) emit("reply_buttons", u);   // #1266
+        if (Array.isArray(d.reactions)) for (const u of d.reactions) emit("reactions", u);               // #2305
         if (Array.isArray(d.needs)) emit("needs", { items: d.needs });
         return true;
       } catch { return false; /* the next tick, or the catch-up's retry, tries again */ }

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

@@ -1,9 +1,12 @@
 // #1629 (first design §5, r2 (b)(d)): agents' web themes on the page. Each applies to THAT agent's own chat surface
-// (and its avatar ring) only — never the shell, the sidebar chrome or another instance. What the host sends is
+// (and its avatar ring) — and, #2196, when the agent (theme.page.on) or a person (theme.pageByInstance) says so, its
+// colours on the whole page while that agent's Chat, View, Log or Details is open: colour tokens only, on the shell
+// (applyPageTheme); AgEnD's status colours, fonts, pictures and layout stay the page's own. What the host sends is
 // canonical already; this checks it again (a value that fails is dropped, never passed on) and applies it through the
 // CSSOM (custom properties) and fixed class tokens. No style attribute, no CSS text, no url() built in CSS.
 // Not shown: with "Show agents' themes, effects and widgets" off (fx.show, synced), and in safe mode (?safe=1).
 import { appStore, createStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import { safeMode } from "./owner-css.js";
 import { t } from "./app-i18n.js";
@@ -86,9 +89,110 @@ export function themeFor(name) {
     out.background = { image: bg.image, fit: bg.fit, opacity: bg.opacity };
   }
   if (labelOk(t.workingLabel)) out.workingLabel = t.workingLabel;
+  if (t.page && typeof t.page === "object") {
+    const sb = {};
+    if (t.page.sidebar && typeof t.page.sidebar === "object") for (const m of ["light", "dark"]) if (typeof t.page.sidebar[m] === "string" && COLOR.test(t.page.sidebar[m])) sb[m] = t.page.sidebar[m];
+    out.page = { on: t.page.on === true, sidebar: sb };
+  }
   return out;
 }
 
+// ── #2196: an agent's colours on the whole page ──
+
+/** The token defaults (tokens.css; web-theme.ts THEME_DEFAULTS, pinned by a test) a theme's palette goes over. */
+const PAGE_DEFAULTS = {
+  dark: { bg: "#212121", surface: "#2f2f2f", text: "#ececec", text2: "#b4b4b4", accent: "#7ab7ff" },
+  light: { bg: "#ffffff", surface: "#f4f4f4", text: "#0d0d0d", text2: "#5d5d5d", accent: "#0a62c2" },
+};
+/** AgEnD's status colours (tokens.css; web-theme.ts STATUS_COLORS, pinned by a test): never themed, always readable. */
+export const STATUS_COLORS = {
+  dark: { ok: "#4cc38a", warn: "#e3b341", danger: "#ff8a80", dangerFill: "#c9372c", focus: "#7ab7ff" },
+  light: { ok: "#1a7f37", warn: "#8a5a00", danger: "#c4222b", dangerFill: "#c4222b", focus: "#0a62c2" },
+};
+const PAGE_PROPS = { bg: "--bg", sidebar: "--bg-sidebar", surface: "--surface", text: "--text", text2: "--text-2", accent: "--accent" };
+const DERIVED_PROPS = ["--text-3", "--surface-2", "--border", "--border-strong", "--accent-dim", "--on-accent"];
+function lum(hex) {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+}
+const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
+const mix = (a, b, f) => `#${[1, 3, 5].map((i) => Math.round(parseInt(a.slice(i, i + 2), 16) * (1 - f) + parseInt(b.slice(i, i + 2), 16) * f).toString(16).padStart(2, "0")).join("")}`;
+
+/** The instance a page is about — Chat, View, Log or Details of it (app-shell.js openInstanceOf) — or null. */
+function openOf(route) {
+  return route && ["chat", "view", "log", "details"].includes(route.panel) && typeof route.instance === "string" ? route.instance : null;
+}
+/** A person's choice for `name`: "page" (the whole page), "chat" (only its chat) or null (the agent's own). */
+export function pageChoice(name) {
+  const f = prefInForce("theme.pageByInstance");
+  const m = f && f.value;
+  return m && typeof m === "object" && own(m, name) && (m[name] === "page" || m[name] === "chat") ? m[name] : null;
+}
+/** Set it ("agent" clears it), kept with the host's preferences like the identity colour a person picks. */
+export function setPageChoice(name, choice) {
+  const f = prefInForce("theme.pageByInstance");
+  const cur = f && f.value && typeof f.value === "object" ? f.value : {};
+  const keep = Object.keys(cur).filter((k) => own(cur, k) && k !== name && (cur[k] === "page" || cur[k] === "chat")).map((k) => [k, cur[k]]);
+  if (choice === "page" || choice === "chat") keep.push([name, choice]);
+  savePref("theme.pageByInstance", keep.length ? Object.fromEntries(keep) : null);
+  // In force on this page at once: what draws a theme follows this store (another device's change: onPrefsChanged).
+  themesStore.set({ pageRev: (themesStore.get().pageRev || 0) + 1 });
+}
+/** `name`'s theme when its colours go on the whole page (the person's choice, else the agent's), else null. */
+export function pageThemeFor(name) {
+  if (!name) return null;
+  const theme = themeFor(name);
+  if (!theme) return null;
+  const choice = pageChoice(name);
+  return choice === "page" || (choice !== "chat" && theme.page && theme.page.on) ? theme : null;
+}
+/** The page's colours for `mode`: the theme's palette over the defaults, and its sidebar (else its background). */
+export function pagePalette(theme, mode) {
+  const p = { ...PAGE_DEFAULTS[mode], ...(theme.accent ? { accent: theme.accent } : {}), ...((theme.colors && theme.colors[mode]) || {}) };
+  const out = {};
+  for (const k of Object.keys(PAGE_DEFAULTS[mode])) out[k] = p[k];
+  out.sidebar = (theme.page && theme.page.sidebar && theme.page.sidebar[mode]) || out.bg;
+  return out;
+}
+/**
+ * Whether a page palette reads (web-theme.ts's checks, again here: a person may put an agent's colours on the page
+ * though the agent never asked): text and secondary text 4.5:1 and the accent 3:1 on the background, surface and
+ * sidebar; every status colour 3:1 on the sidebar and the background.
+ */
+export function pageReadable(p, mode) {
+  if (!p || !Object.values(p).every((c) => typeof c === "string" && COLOR.test(c))) return false;
+  for (const bg of [p.bg, p.surface, p.sidebar]) {
+    if (ratio(p.text, bg) < 4.5 - 1e-9 || ratio(p.text2, bg) < 4.5 - 1e-9) return false;
+  }
+  if (ratio(p.accent, p.bg) < 3 - 1e-9 || ratio(p.accent, p.sidebar) < 3 - 1e-9) return false;
+  return Object.values(STATUS_COLORS[mode]).every((c) => ratio(c, p.sidebar) >= 3 - 1e-9 && ratio(c, p.bg) >= 3 - 1e-9);
+}
+/** The page colours in force now for `mode` (the instance the route is about), or null: the page's own. */
+export function pageNow(mode, route = navStore.get().route) {
+  const theme = pageThemeFor(openOf(route));
+  const p = theme && pagePalette(theme, mode);
+  return p && pageReadable(p, mode) ? p : null;
+}
+/**
+ * Draw page colours `p` (pageNow) on the shell `el`, or clear them (null): the palette's tokens and the few derived
+ * from it (borders, raised rows, the accent's tint and the colour on it), through the CSSOM; class th-page.
+ */
+export function applyPageTheme(el, p, mode) {
+  if (!el || !el.style) return;
+  for (const prop of [...Object.values(PAGE_PROPS), ...DERIVED_PROPS]) el.style.removeProperty(prop);
+  el.classList.remove("th-page");
+  if (!p) return;
+  for (const [k, prop] of Object.entries(PAGE_PROPS)) el.style.setProperty(prop, p[k]);
+  el.style.setProperty("--text-3", p.text2);
+  el.style.setProperty("--surface-2", mix(p.surface, p.text, 0.08));
+  el.style.setProperty("--border", mix(p.bg, p.text, 0.14));
+  el.style.setProperty("--border-strong", mix(p.bg, p.text, 0.45));
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(p.accent.slice(i, i + 2), 16));
+  el.style.setProperty("--accent-dim", `rgba(${r}, ${g}, ${b}, ${mode === "dark" ? 0.14 : 0.08})`);
+  el.style.setProperty("--on-accent", ratio("#ffffff", p.accent) >= ratio("#0d0d0d", p.accent) ? "#ffffff" : "#0d0d0d");
+  el.classList.add("th-page");
+}
+
 export function isThemeLocked(name) { return (themesStore.get().locked || []).includes(name); }
 
 const TOKENS = ["th", "th-font-inter", "th-font-system", "th-font-mono", "th-bubble-none", "th-bubble-thin", "th-bubble-accent", "th-agent-bubble"];
@@ -193,7 +297,18 @@ export function themeMenuItems(name) {
   const locked = isThemeLocked(name);
   const w = themesStore.get().widgets;
   const placed = w && own(w, name) && w[name] && typeof w[name] === "object" ? w[name] : {};
+  // #2196: where this agent's colours go — its own choice, the whole page, or only its chat (the person's wins).
+  const choice = pageChoice(name), theme = themeFor(name), mode = resolvedMode();
+  const agentsOwn = theme && theme.page && theme.page.on ? "chat.pageAgentOn" : "chat.pageAgentOff";
+  const readable = !!theme && pageReadable(pagePalette(theme, mode), mode);
+  const page = theme ? [
+    { key: "page-heading", heading: true, label: t("chat.pageColours") },
+    { key: "page-agent", checked: choice === null, label: t(agentsOwn), onSelect: () => setPageChoice(name, "agent") },
+    { key: "page-page", checked: choice === "page", label: t("chat.pageWhole"), disabled: !readable && choice !== "page", onSelect: () => setPageChoice(name, "page") },
+    { key: "page-chat", checked: choice === "chat", label: t("chat.pageChatOnly"), onSelect: () => setPageChoice(name, "chat") },
+  ] : [];
   return [
+    ...page,
     ...["chat_header", "details"].filter((slot) => own(placed, slot)).map((slot) => ({
       key: `widget-remove-${slot}`, label: t(slot === "chat_header" ? "chat.widgetRemoveHeader" : "chat.widgetRemoveDetails"), icon: "trash",
       onSelect: () => removeWidget(name, slot),