@songsid/agend 2.1.12 → 2.2.0-alpha.1

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

@@ -0,0 +1,73 @@
+// #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", "config"];
+export const SETTINGS_SECTIONS = ["agents", "bots", "classic", "general", "advanced"];
+const MAX_INSTANCE_NAME = 128;
+const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;
+
+/** Not empty, no separator, no control character, no traversal — the rule instance paths are held to. */
+export function isSafeInstanceName(name) {
+  return typeof name === "string" && name.length > 0 && name.length <= MAX_INSTANCE_NAME
+    && !PATH_SEPARATOR_OR_CONTROL.test(name) && name !== "." && !name.includes("..");
+}
+
+/**
+ * A path → the route it names: { panel: "chat" | "view", instance } | { panel: "fleet", tab } |
+ * { panel: "settings", section } | null (not a page of the app: a full load). A malformed name is null too; the
+ * server answers it 400.
+ */
+export function parseRoute(pathname) {
+  if (pathname === "/ui") return { panel: "chat", instance: null };
+  if (pathname === "/ui/fleet") return { panel: "fleet", tab: "tasks" };
+  if (pathname === "/ui/needs") return { panel: "needs" };
+  let m = /^\/ui\/fleet\/([^/]+)$/.exec(pathname);
+  if (m) return FLEET_TABS.includes(m[1]) ? { panel: "fleet", tab: m[1] } : null;
+  m = /^\/ui\/chat\/([^/]+)$/.exec(pathname);
+  if (m) return named("chat", m[1]);
+  if (pathname === "/view") return { panel: "view", instance: null };
+  m = /^\/view\/([^/]+)$/.exec(pathname);
+  if (m) return named("view", m[1]);
+  if (pathname === "/settings") return { panel: "settings", section: "agents" };
+  m = /^\/settings\/([^/]+)$/.exec(pathname);
+  if (m) return SETTINGS_SECTIONS.includes(m[1]) ? { panel: "settings", section: m[1] } : null;
+  return null;
+}
+function named(panel, segment) {
+  let name = null;
+  try { name = decodeURIComponent(segment); } catch { return null; }
+  return isSafeInstanceName(name) ? { panel, instance: name } : null;
+}
+
+export function chatPath(instance) { return `/ui/chat/${encodeURIComponent(instance)}`; }
+export function viewPath(instance) { return instance ? `/view/${encodeURIComponent(instance)}` : "/view"; }
+export function fleetPath(tab) { return tab && tab !== "tasks" ? `/ui/fleet/${tab}` : "/ui/fleet"; }
+export const NEEDS_PATH = "/ui/needs";
+export function settingsPath(section) { return section && section !== "agents" ? `/settings/${section}` : "/settings"; }
+export function routePath(route) {
+  if (!route) return "/ui";
+  if (route.panel === "fleet") return fleetPath(route.tab);
+  if (route.panel === "settings") return settingsPath(route.section);
+  if (route.panel === "needs") return NEEDS_PATH;
+  if (route.panel === "view") return viewPath(route.instance);
+  return route.instance ? chatPath(route.instance) : "/ui";
+}
+/** One string per route: a change of it is a new navigation (a new lease for the panel, §4). */
+export function routeKey(route) {
+  if (!route) return "none";
+  if (route.panel === "needs") return "needs:";
+  return `${route.panel}:${route.panel === "fleet" ? route.tab : route.panel === "settings" ? route.section : route.instance ?? ""}`;
+}
+
+/**
+ * #1408 §3: an old deep link, /ui#instance=<name>, as the new path. The fragment never reaches the server, so the app
+ * (and the sign-in page, for a signed-out visit) converts it. Exactly that one form; anything else is dropped.
+ */
+export function legacyHashTarget(pathname, hash) {
+  if (pathname !== "/ui") return null;
+  const m = /^#instance=([^&#]*)$/.exec(hash || "");
+  if (!m) return null;
+  let name;
+  try { name = decodeURIComponent(m[1]); } catch { return null; }
+  return isSafeInstanceName(name) ? chatPath(name) : null;
+}

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

@@ -0,0 +1,66 @@
+// The Session menu (#1018; once in the retired shell.js): who is signed in on this device, the other signed-in devices, and signing
+// out. Device labels come from other browsers' User-Agents, so they are only ever rendered as text.
+// It reads /auth/session when the page starts and each time the menu is opened — a person's action, not a timer.
+import { html, useEffect, useRef, useState } from "./app-html.js";
+import { Icon } from "./ui-icons.js";
+import { t, lang } from "./app-i18n.js";
+
+async function getJson(url) {
+  try {
+    const r = await fetch(url, { credentials: "same-origin", cache: "no-store" });
+    return r.ok ? await r.json() : null;
+  } catch { return null; }
+}
+const clock = (ms) => new Date(ms).toLocaleTimeString(lang() === "zh-TW" ? "zh-TW" : undefined, { hour: "2-digit", minute: "2-digit" });
+const span = (ms) => { const m = Math.max(1, Math.round(ms / 60000)); return m >= 90 ? `${Math.round(m / 60)} h` : `${m} min`; };
+const ago = (ms) => { const m = Math.round((Date.now() - ms) / 60000); return m < 1 ? t("app.justNow") : m < 90 ? t("app.minAgo", m) : t("app.hrAgo", Math.round(m / 60)); };
+
+export function SessionMenu() {
+  const [me, setMe] = useState(undefined);         // undefined: not read yet; null: signed out
+  const [sessions, setSessions] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState(false);
+  const btn = useRef(null), pop = useRef(null);
+  async function refresh() {
+    const m = await getJson("/auth/session");
+    setMe(m);
+    const s = m ? await getJson("/auth/sessions") : null;
+    setSessions(s && s.sessions ? s.sessions : null);
+  }
+  useEffect(() => { refresh(); }, []);
+  useEffect(() => {
+    if (!open) return undefined;
+    const outside = (e) => { if (pop.current && !pop.current.contains(e.target) && !btn.current.contains(e.target)) setOpen(false); };
+    document.addEventListener("pointerdown", outside, true);
+    return () => document.removeEventListener("pointerdown", outside, true);
+  }, [open]);
+  async function act(method, url, after) {
+    setError(false);
+    try {
+      const r = await fetch(url, { method, credentials: "same-origin" });
+      if (!r.ok) throw new Error(String(r.status));
+      after();
+    } catch { setError(true); }
+  }
+  const onKey = (e) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setOpen(false); btn.current && btn.current.focus(); } };
+  const label = me ? t("app.session") : t("app.signIn");
+  const rows = sessions || [];
+  return html`<div class="session">
+    <button ref=${btn} type="button" class="side-row" aria-haspopup="dialog" aria-expanded=${open ? "true" : "false"}
+      onClick=${() => { const next = !open; setOpen(next); if (next) refresh(); }}>
+      <span class=${`dot${me ? " ok" : ""}`} aria-hidden="true"></span><span class="grow">${label}</span>${me ? html`<span class="meta">${me.label}</span>` : null}</button>
+    ${open ? html`<div ref=${pop} class="pop" role="dialog" aria-label=${t("app.session")} onKeyDown=${onKey}>
+      ${!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>
+        ${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}
+        <div class="row">
+          <button type="button" class="btn" onClick=${() => act("POST", "/auth/logout", () => { location.href = "/signin"; })}><${Icon} name="user" size=${16} />${t("app.signOut")}</button>
+          ${rows.length > 1 ? html`<button type="button" class="btn danger" onClick=${() => act("DELETE", "/auth/sessions", () => { location.href = "/signin"; })}>${t("app.signOutAll")}</button>` : null}
+        </div>`}
+      ${error ? html`<p class="err" role="alert">${t("app.failed")}</p>` : null}
+    </div>` : null}
+  </div>`;
+}

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

@@ -0,0 +1,344 @@
+// #1408 §2/§7: the app's frame — the sidebar (a drawer on a phone), the main area with its panel, the bottom tabs on a
+// phone, the connection line, toasts. Panels render their own header through <PanelHeader>, so every panel's title,
+// status and ⋯ actions sit in the same place.
+import { html, useEffect, useState } from "./app-html.js";
+import { Icon } from "./ui-icons.js";
+import { Toasts } from "./ui-toast.js";
+import { ConfirmHost } from "./ui-confirm.js";
+import { t, lang, setLang, onLang } from "./app-i18n.js";
+import { appStore, createStore, useStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
+import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH } from "./app-route.js";
+import { SessionMenu } from "./app-session.js";
+import { ErrorState, Skeleton } from "./ui-states.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(), footer: [], keyboard: false, dialog: null, side: null });
+
+/**
+ * The mounted panel's own sidebar section, in place of the instance list (View's roster: its groups, filter and order,
+ * #1408 step 2). Returns the function that takes it away; take it through the panel's lease.
+ */
+export function setSideSection(Component) {
+  const entry = { Component };
+  shellStore.set({ side: entry });
+  return () => { if (shellStore.get().side === entry) shellStore.set({ side: null }); };
+}
+
+/** 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 }); }
+
+function readCollapsed() { try { return localStorage.getItem("agend_sidebar") === "hidden"; } catch { return false; } }
+const narrow = () => typeof matchMedia === "function" && matchMedia("(max-width: 899px)").matches;
+
+export function openDrawer() { shellStore.set({ drawer: true }); }
+export function closeDrawer() { if (shellStore.get().drawer) shellStore.set({ drawer: false }); }
+export function toggleSidebar() {
+  if (narrow()) { shellStore.set(s => ({ ...s, drawer: !s.drawer })); return; }
+  const collapsed = !shellStore.get().collapsed;
+  shellStore.set({ collapsed });
+  try { localStorage.setItem("agend_sidebar", collapsed ? "hidden" : "shown"); } catch { /* this page only */ }
+}
+/** A panel module adds a control to the sidebar footer (the chat adds the preview opt-in and the tour). */
+export function addFooterItem(key, Component) {
+  shellStore.set(s => ({ ...s, footer: [...s.footer.filter(x => x.key !== key), { key, Component }] }));
+}
+
+// ── Keys ── One document listener for the page. Esc closes what is on top first (the drawer); then the panel's own
+// handlers run — only for the mounted panel, and only when the focus is inside it or on nothing (the body).
+const panelKeys = new Set();
+/** A panel's key handler while it is mounted; returns the off function (take it through the panel's lease). */
+export function onPanelKey(fn) { panelKeys.add(fn); return () => panelKeys.delete(fn); }
+export function handleKey(e) {
+  if (e.key === "Escape" && !e.isComposing && shellStore.get().drawer) { e.preventDefault(); closeDrawer(); return; }
+  const main = document.getElementById("main");
+  const active = document.activeElement;
+  if (active && active !== document.body && main && !main.contains(active)) return;
+  for (const fn of [...panelKeys]) fn(e);
+}
+
+/** document.title for the panel on screen. */
+/**
+ * The tab's title: the panel's own, prefixed with "(N) " while N things need you (#1386 §6.1), so a background tab
+ * says so. The count follows the store; the panel only names itself.
+ */
+let titleBase = "", titleCount = 0;
+function drawTitle() {
+  if (typeof document === "undefined") return;
+  document.title = `${titleCount ? `(${titleCount}) ` : ""}${titleBase ? `${titleBase} · AgEnD` : "AgEnD"}`;
+}
+export function setTitle(text) { titleBase = text || ""; drawTitle(); }
+appStore.subscribe((s) => {
+  const n = Array.isArray(s.needs) ? s.needs.length : 0;
+  if (n !== titleCount) { titleCount = n; drawTitle(); }
+});
+
+// ── The parts ──
+
+function statusLabel(i, exec, awaiting) {
+  if (awaiting != null) return t("app.needsYou");
+  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");
+  return t("app.statusIdle");
+}
+export function statusClass(i, exec, awaiting) {
+  if (awaiting != null) return "warn";
+  if (!i || i.status !== "running") return i && i.status === "crashed" ? "bad" : "off";
+  return exec === "working" ? "busy" : exec === "stuck" ? "warn" : "ok";
+}
+export { statusLabel };
+
+function tooltip(i) {
+  const src = (s) => (s === "instance" || s === "classic" ? "configured" : s === "fleet-default" ? "fleet default" : s);
+  const model = i.model ? (i.model_source === "live" || i.model_source === "cli-default" || i.model_source === "unresolved" ? i.model : `${i.model} (${src(i.model_source)})`) : null;
+  const effort = i.effort ? `effort:${i.effort}${i.effort_source ? ` (${src(i.effort_source)})` : ""}` : null;
+  const ctx = i.context_pct != null ? `ctx:${Math.round(i.context_pct)}%` : null;
+  const cost = i.cost > 0 ? `$${i.cost.toFixed(2)}` : null;
+  return [i.name, i.backend, model, effort, ctx, cost, i.status].filter(Boolean).join(" · ");
+}
+
+function InstanceRow({ i, active, exec, awaiting }) {
+  const alias = typeof i.display_name === "string" && i.display_name.trim() && i.display_name.trim() !== i.name ? i.display_name.trim() : "";
+  const cls = statusClass(i, exec, awaiting);
+  // Two lines: the name (never shortened to make room for a badge, #1408 rough edge 6), then the alias and/or
+  // "needs you". Everything else is in the tooltip.
+  return html`<li><a class=${`inst${active ? " active" : ""}`} href=${chatPath(i.name)} title=${tooltip(i)} aria-current=${active ? "page" : undefined}
+      onClick=${closeDrawer}>
+    <span class=${`dot ${cls}`} aria-hidden="true"></span>
+    <span class="inst-text"><span class="inst-name">${i.name}</span>
+      ${alias || awaiting != null ? html`<span class="inst-sub">${alias ? html`<span class="inst-alias">${alias}</span>` : null}
+        ${awaiting != null ? html`<span class="badge-await" title=${awaiting || t("app.approxNote")}>${t("app.needsYou")}</span>` : null}</span>` : null}
+      <span class="sr-only">${statusLabel(i, exec, awaiting)}</span></span></a></li>`;
+}
+
+/** Sign in, and come back here afterwards (the sign-in page accepts only the app's own pages). */
+export function signInHref() {
+  const here = typeof location !== "undefined" ? location.pathname + location.search : "/view";
+  return `/signin?next=${encodeURIComponent(here)}`;
+}
+
+function Sidebar({ route, onNewInstance, viewOnly }) {
+  const app = useStore(appStore);
+  const shell = useStore(shellStore);
+  const current = route && route.panel === "chat" ? route.instance : null;
+  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}>
+    <${Icon} name=${icon} /><span class="grow">${label}</span>${count ? html`<span class="nav-count" aria-hidden="true">${count}</span>` : null}</a>`;
+  const needsCount = Array.isArray(app.needs) ? app.needs.length : 0;
+  // 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">
+        <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>
+      ${shell.side ? html`<${shell.side.Component} />` : html`<div class="side-section"></div>`}
+      <div class="side-foot">
+        <${Prefs} />
+        <a class="side-row" href=${signInHref()}><${Icon} name="user" /><span>${t("app.signIn")}</span></a>
+      </div>
+    </aside>`;
+  }
+  return html`<aside id="sidebar" class="sidebar" aria-label=${t("app.menu")}>
+    <div class="side-head">
+      <a class="brand" href="/ui" onClick=${closeDrawer}>${t("app.brand")}</a>
+      <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="edit" /></button>
+    </div>
+    <nav class="side-nav" aria-label=${t("app.menu")}>
+      ${navLink("needs", NEEDS_PATH, "inbox", t("app.needsNav"), needsCount)}
+      ${navLink("fleet", "/ui/fleet", "fleet", t("app.fleet"))}
+      ${navLink("view", "/view", "view", t("app.view"))}
+    </nav>
+    ${shell.side ? html`<${shell.side.Component} />` : html`<div class="side-section" id="instanceList">
+      <h2 class="side-label">${t("app.instances")}</h2>
+      ${app.instances.length ? html`<ul class="inst-list">${app.instances.map(i => html`<${InstanceRow} key=${i.name} i=${i} active=${i.name === current}
+          exec=${app.exec[i.name]} awaiting=${Object.prototype.hasOwnProperty.call(app.awaiting, i.name) ? app.awaiting[i.name] : null} />`)}</ul>`
+        : html`<p class="side-empty">${t("app.noInstances")}</p>`}
+    </div>`}
+    <div class="side-foot">
+      ${navLink("settings", settingsPath(), "settings", t("app.settings"))}
+      ${shell.footer.map(({ key, Component }) => html`<${Component} key=${key} />`)}
+      <${Prefs} />
+      <${SessionMenu} />
+    </div>
+  </aside>`;
+}
+
+function Prefs() {
+  const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
+  const [l, setL] = useState(lang());
+  return html`<div class="prefs">
+    <label class="pref"><${Icon} name="sun" size=${16} /><span class="sr-only">${t("app.theme")}</span>
+      <select value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); }}>
+        <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>
+    <label class="pref"><${Icon} name="globe" size=${16} /><span class="sr-only">${t("app.language")}</span>
+      <select value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); }}>
+        <option value="en">English</option><option value="zh-TW">中文</option></select></label>
+  </div>`;
+}
+
+/** The header every panel shows: ☰ (phone, or a collapsed sidebar), its title and status, then its actions. */
+export function PanelHeader({ title, sub, children, headingRef }) {
+  const shell = useStore(shellStore);
+  return html`<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>
+    <div class="panel-title"><h1 ref=${headingRef} tabindex="-1">${title}</h1>${sub ? html`<div class="panel-sub">${sub}</div>` : null}</div>
+    <div class="panel-actions">${children}</div>
+  </header>`;
+}
+
+function BottomTabs({ route, viewOnly }) {
+  const app = useStore(appStore);
+  let last = null;
+  try { last = localStorage.getItem("agend_last_instance"); } catch { /* none */ }
+  const chatHref = route && route.panel === "chat" && route.instance ? chatPath(route.instance) : 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.instance ? viewPath(route.instance) : viewPath(lastView);
+  if (viewOnly) {
+    return html`<nav class="tabs" aria-label=${t("app.menu")}>
+      ${tab(viewHref, "view", t("app.view"), route && route.panel === "view")}
+      ${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)}
+    ${tab(NEEDS_PATH, "inbox", t("app.needsTab"), route && route.panel === "needs", (app.needs || []).length, t("app.needsCount", (app.needs || []).length))}
+    ${tab("/ui/fleet", "fleet", t("app.fleet"), route && route.panel === "fleet")}
+    ${tab(viewHref, "view", t("app.view"), route && route.panel === "view")}
+    ${tab(settingsPath(), "settings", t("app.settings"), route && route.panel === "settings")}
+  </nav>`;
+}
+
+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")}
+      ${hydration === "failed" && retryHydration ? html` <button type="button" class="btn btn-sm" onClick=${() => retryHydration()}>${t("app.retry")}</button>` : null}</div>`;
+  }
+  if (connection === "live" || connection === "none") return null;
+  const text = connection === "polling" ? t("app.connPolling") : connection === "down" ? t("app.connDown") : null;
+  return text ? html`<div class="conn" role="status">${text}</div>` : null;
+}
+
+const NOW = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+function useTick(on, ms = 1000) {
+  const [, tick] = useState(0);
+  useEffect(() => {
+    if (!on) return undefined;
+    const h = setInterval(() => tick(n => n + 1), ms);
+    return () => clearInterval(h);
+  }, [on, ms]);
+}
+const mmss = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
+
+/**
+ * #1423: Settings writes an admin has to confirm, from whichever panel made them (settings-confirm.js publishes them to
+ * appStore.pendingChanges). What it asks, how to confirm it, the countdown, Withdraw — in any panel.
+ */
+function PendingChanges() {
+  const { pendingChanges } = useStore(appStore);
+  const list = pendingChanges || [];
+  useTick(list.some(p => p.state === "pending"));
+  if (!list.length) return null;
+  return html`<div class="pending-stack" role="region" aria-label=${t("app.pendingTitle")}>${list.map(p => html`<section key=${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}
+      ${p.dismiss ? html`<button type="button" class="icon-btn" aria-label=${t("app.close")} title=${t("app.close")} onClick=${p.dismiss}><${Icon} name="close" size=${14} /></button>` : null}</div>
+    ${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 !== "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>`;
+}
+
+/** Settings' Apply, followed from another panel: one line, and the way back to it (§5: progress shows in any panel). */
+function OperationLine({ route }) {
+  const { settingsOp: op } = useStore(appStore);
+  if (!op || (route && route.panel === "settings")) return null;
+  const waiting = op.steps.some(s => s.status === "waiting");
+  const done = op.steps.filter(s => s.status === "done").length;
+  const restart = op.job && op.job.targets && op.job.targets.some(r => r.status === "restart-required");
+  const failedRows = op.job && op.job.targets && op.job.targets.some(r => r.status === "failed");
+  const text = op.phase === "writing" ? (waiting ? t("app.opWaiting") : t("app.opWriting", done, op.steps.length))
+    : 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">
+    <span>${text}</span> <a class="btn btn-sm" href=${settingsPath()}>${t("app.openSettings")}</a></div>`;
+}
+
+/**
+ * A module loader that can be tried again: a failed attempt is forgotten (the next call loads afresh) and `attempt`
+ * counts, so a retry can ask for a new URL — a browser may keep a failed module import cached under the old one.
+ */
+export function retryable(load) {
+  let pending = null, attempt = 0;
+  return () => (pending ??= load(attempt++).catch((err) => { pending = null; throw err; }));
+}
+
+/** Shows the panel for the route, loading its module the first time; Retry is a real new attempt. */
+function Outlet({ route, seq, panels }) {
+  const [attempt, setAttempt] = useState(0);
+  const [, force] = useState(0);
+  const entry = route ? panels.get(route.panel) : null;
+  useEffect(() => {
+    if (entry && !entry.Component && !entry.loading) {
+      entry.error = null;
+      entry.loading = entry.load().then(C => { entry.Component = C; entry.error = null; }, err => { entry.error = err; }).finally(() => { entry.loading = null; force(n => n + 1); });
+      force(n => n + 1);
+    }
+  }, [entry, seq, attempt]);
+  if (!route) return html`<div class="panel"><${ErrorState} message=${t("app.loadFailed")} /></div>`;
+  if (entry && entry.error && !entry.loading) return html`<div class="panel"><${ErrorState} onRetry=${() => setAttempt(n => n + 1)} /></div>`;
+  if (!entry || !entry.Component) return html`<div class="panel"><${Skeleton} lines=${4} /></div>`;
+  const C = entry.Component;
+  return html`<${C} route=${route} navKey=${`${routeKey(route)}|${seq}|${lang()}`} />`;
+}
+
+export function Shell({ panels, onNewInstance, viewOnly = false }) {
+  const nav = useStore(navStore);
+  const shell = useStore(shellStore);
+  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.
+  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);
+  }, []);
+  const cls = ["shell", shell.collapsed ? "sb-collapsed" : "", shell.drawer ? "sb-open" : "", shell.keyboard ? "kb-open" : ""].filter(Boolean).join(" ");
+  return html`<div class=${cls}>
+    <a 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} />`}
+      <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
+    </main>
+    <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
+    ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
+    ${viewOnly ? null : html`<${PendingChanges} />`}
+    <${ConfirmHost} />
+    <${Toasts} />
+  </div>`;
+}
+

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

@@ -0,0 +1,51 @@
+// #1408 §5: the app-wide state every panel and the sidebar read — the instances and what the stream says about them.
+// It lives as long as the page; panels come and go. A tiny observable: subscribe(fn) → unsubscribe; a change notifies
+// once per update. Chat's own state (messages, drafts, files…) is the chat store (chat-store.js), page-lived as well.
+import { useEffect, useState } from "./app-html.js";
+
+export function createStore(initial) {
+  let state = initial;
+  const subs = new Set();
+  return {
+    get: () => state,
+    set(patch) {
+      const next = typeof patch === "function" ? patch(state) : { ...state, ...patch };
+      if (next === state) return;
+      state = next;
+      for (const fn of [...subs]) fn(state);
+    },
+    subscribe(fn) { subs.add(fn); return () => subs.delete(fn); },
+  };
+}
+
+/** The app's store. `ready`: a status frame has arrived (before it, an unknown instance may just not be listed yet).
+ *  `exec`: each instance's raw execution state (working / idle / stuck / null); `awaiting`: what it
+ *  waits on at its terminal (text, "" when unknown), absent when it waits on nothing. `hydration`: a late catch-up
+ *  (app-stream.js catchUp) — "catching" / "retrying" / "failed" / "ok"; `retryHydration` asks for it again. */
+export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [],
+  hydration: "none", retryHydration: null });
+
+/** Fold one status frame (stream or poll) into the store. */
+export function applyStatus(d) {
+  if (!d || !Array.isArray(d.instances)) return;
+  const exec = {}, awaiting = {};
+  for (const i of d.instances) {
+    // The raw execution state, as the "activity" events carry it; `state` may be the presentation "awaiting_input".
+    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 });
+}
+
+/** One "activity" event: an instance started or stopped working. */
+export function applyActivity(d) {
+  if (!d || typeof d.instance !== "string") return;
+  appStore.set(s => ({ ...s, exec: { ...s.exec, [d.instance]: d.state ?? null } }));
+}
+
+/** Re-render on every store change; returns the current state. */
+export function useStore(store = appStore) {
+  const [state, setState] = useState(store.get());
+  useEffect(() => { setState(store.get()); return store.subscribe(setState); }, [store]);
+  return state;
+}