@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.5

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

@@ -6,7 +6,7 @@ import { Icon } from "./ui-icons.js";
 import { Toasts } from "./ui-toast.js";
 import { ConfirmHost, confirmDialog } from "./ui-confirm.js";
 import { ColorDialogHost } from "./identity-color.js";
-import { t, lang, setLang, onLang } from "./app-i18n.js";
+import { t, lang, setLang, onLang, register } from "./app-i18n.js";
 import { appStore, createStore, guestBadge, guestPage, guestTrusted, useStore } from "./app-store.js";
 import { navStore } from "./app-nav.js";
 import { toast } from "./ui-toast.js";
@@ -21,6 +21,7 @@ import { useWebAuthorization } from "./web-authorize.js";
 import { RightRail, sidePanelStore } from "./side-panel.js";
 import { OwnerCssKeepBar } from "./owner-css.js";
 import { AgentWidget, fleetBinds, sidebarWidget, sidebarWidgetStore } from "./agent-widget.js";
+import { initSettingsContentWidth } from "./settings-width.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, banner: null });
@@ -127,6 +128,13 @@ export function clampSidebarWidth(w, vw) {
   return Math.round(Math.min(max, Math.max(SIDEBAR_W.min, w)));
 }
 function storedSidebarWidth() { try { const v = Number(localStorage.getItem(SIDEBAR_W_KEY)); return Number.isFinite(v) && v > 0 ? v : null; } catch { return null; } }
+
+// #2978 merge (stale tabs, quality rule 3): Settings' content width lives in its own module — a tab opened before an
+// upgrade keeps this shell module, and a lazily loaded Settings panel that imported these names from here would fail to
+// load at all. Re-exported, so the shell and its callers are unchanged.
+export { SETTINGS_CONTENT_WIDTH_KEY, SETTINGS_CONTENT_WIDTHS, DEFAULT_SETTINGS_CONTENT_WIDTH, settingsContentWidthStore,
+  initSettingsContentWidth, setSettingsContentWidth } from "./settings-width.js";
+
 /** { width: px | null } — null: the default width (tokens.css). */
 export const sidebarWidthStore = createStore({ width: null });
 /** Set the width (clamped to this viewport); `save`: this device keeps it. null: back to the default, nothing kept. */
@@ -322,6 +330,57 @@ export function signInHref() {
   return `/signin?next=${encodeURIComponent(here)}`;
 }
 
+// ── AgEnD Hub P1 (docs/design/hub-ui-client.md): the page's mark, set by the listener that served it ──
+register("hubShell", {
+  en: { brand: "AgEnD Hub", ask: "Ask", exposures: "My exposures", admin: "Administration" },
+  "zh-TW": { brand: "AgEnD Hub", ask: "提問", exposures: "我的公開 Agent", admin: "管理" },
+});
+function hubMarks() {
+  const tokens = String((typeof document !== "undefined" && document.body?.dataset?.hub) || "").split(/\s+/);
+  return { hub: tokens.includes("hub"), member: tokens.includes("member") };
+}
+/**
+ * The Hub workspace's sidebar: its brand and name, the conversation list (#3226 B: the Hub's lazy module's HubNav —
+ * New chat, a filter, the rooms) and the session with its menu. A Hub module without HubNav (one from before) gets the
+ * three page links instead.
+ */
+function HubSidebar({ route }) {
+  const name = String(document.body?.dataset?.hubName || "").trim();
+  const tab = route && route.panel === "hub" ? route.tab : "ask";
+  const row = (key, href, icon) => html`<a class=${`side-row${tab === key ? " active" : ""}`} href=${href}
+    aria-current=${tab === key ? "page" : undefined} onClick=${closeDrawer}><${Icon} name=${icon} /><span class="grow">${t(`hubShell.${key}`)}</span></a>`;
+  return html`<aside id="sidebar" class="sidebar" aria-label=${t("app.menu")}>
+    <div class="side-head" data-trust="navigation">
+      <a class="brand hub-brand" href="/ui/hub" onClick=${closeDrawer}>${t("hubShell.brand")}${name ? html`<span class="hub-brand-name"> · ${name}</span>` : null}</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 data-trust="navigation" class="side-nav hub-side-nav" aria-label=${t("app.menu")}>
+      <${HubNavSlot} fallback=${html`${row("ask", "/ui/hub", "chat")}${row("exposures", "/ui/hub/exposures", "globe")}${row("admin", "/ui/hub/admin", "key")}`} />
+    </nav>
+    <div class="side-foot" data-trust="navigation"><${HubSessionSlot} /></div>
+    <${SidebarResize} />
+  </aside>`;
+}
+/** #3226 B: the conversation list from the Hub's lazy module; `fallback` until it loads, or when it has none. */
+function HubNavSlot({ fallback }) {
+  const [mod, setMod] = useState(null);
+  const [none, setNone] = useState(false);
+  useEffect(() => { let live = true; import("/ui/js/panel-hub.js").then((m) => { if (!live) return; if (m.HubNav) setMod(() => m.HubNav); else setNone(true); }, () => { if (live) setNone(true); }); return () => { live = false; }; }, []);
+  return mod ? html`<${mod} onPick=${closeDrawer} />` : none ? fallback : null;
+}
+/** The Hub's own session row (S3b): who is signed in to the Hub, and Sign out — from the Hub's lazy module, never /auth/. */
+function HubSessionSlot() {
+  const [mod, setMod] = useState(null);
+  useEffect(() => { let live = true; import("/ui/js/panel-hub.js").then((m) => { if (live && m.HubSessionMenu) setMod(() => m.HubSessionMenu); }, () => {}); return () => { live = false; }; }, []);
+  return mod ? html`<${mod} />` : null;
+}
+/** A member fleet's "My fleet ↔ Hub" switcher: its module loads only on a member page, and shows only once paired. */
+function HubSwitcherSlot() {
+  const [mod, setMod] = useState(null);
+  useEffect(() => { let live = true; import("/ui/js/hub-switcher.js").then((m) => { if (live) setMod(() => m.HubSwitcher); }, () => {}); return () => { live = false; }; }, []);
+  return mod ? html`<${mod} />` : null;
+}
+
 function Sidebar({ route, onNewInstance, viewOnly }) {
   const app = useStore(appStore);
   const shell = useStore(shellStore);
@@ -366,6 +425,8 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       <${SidebarResize} />
     </aside>`;
   }
+  // AgEnD Hub P1: a Hub workspace (a Hub's own listener marked the page) has the Hub's sidebar, never the fleet's.
+  if (hubMarks().hub) return html`<${HubSidebar} route=${route} />`;
   // #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.
@@ -377,6 +438,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       <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>
+    ${/* AgEnD Hub P1: a member fleet's "My fleet ↔ Hub" (shown once paired; nothing loads when the switch is off) */ hubMarks().member ? html`<${HubSwitcherSlot} />` : null}
     <nav data-trust="navigation" class="side-nav" aria-label=${t("app.menu")}>
       ${overview}
       ${navLink("needs", NEEDS_PATH, "inbox", t("app.needsNav"), needsCount)}
@@ -422,23 +484,24 @@ function ViewOnlyNav({ route }) {
  * This browser's theme and language (#1604: Settings → This device; for the anonymous View reader, the footer's
  * popover). The same stores as ever: AgendTheme (theme.js) and setLang (app-i18n.js) — only where they are shown moved.
  */
-export function DevicePrefs({ labels = false } = {}) {
+export function DevicePrefs({ labels = false, fields = ["theme", "language", "names"] } = {}) {
   const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
   const [l, setL] = useState(lang());
   const names = useStore(namesStore);   // #1722
   // #1665: what is in force, as it changes — another device's choice arriving while this is open is shown at once.
   useEffect(() => (typeof AgendTheme !== "undefined" && typeof AgendTheme.onChange === "function" ? AgendTheme.onChange(setTheme) : undefined), []);
   useEffect(() => onLang(setL), []);
+  const shows = (field) => fields.includes(field);
   return html`<div class=${`prefs${labels ? " labelled" : ""}`}>
-    <label class="pref"><${Icon} name="sun" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.theme")}</span>
+    ${shows("theme") ? html`<label class="pref"><${Icon} name="sun" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.theme")}</span>
       <select id=${labels ? "pref-theme" : undefined} value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); savePref("theme", e.target.value); }}>
-        <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>
-    <label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
+        <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>` : null}
+    ${shows("language") ? html`<label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
       <select id=${labels ? "pref-lang" : undefined} value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); savePref("lang", e.target.value); }}>
-        <option value="en">English</option><option value="zh-TW">中文</option></select></label>
-    <label class="pref"><${Icon} name="user" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.names")}</span>
+        <option value="en">English</option><option value="zh-TW">中文</option></select></label>` : null}
+    ${shows("names") ? html`<label class="pref"><${Icon} name="user" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.names")}</span>
       <select id=${labels ? "pref-names" : undefined} value=${names.primary} aria-label=${t("app.names")} onChange=${(e) => setNamesPrimary(e.target.value)}>
-        <option value="nickname">${t("app.namesNickname")}</option><option value="instance">${t("app.namesInstance")}</option></select></label>
+        <option value="nickname">${t("app.namesNickname")}</option><option value="instance">${t("app.namesInstance")}</option></select></label>` : null}
   </div>`;
 }
 
@@ -769,6 +832,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
   const nav = useStore(navStore);
   const shell = useStore(shellStore);
   const root = useRef(null);
+  useLayoutEffect(() => { initSettingsContentWidth(); }, []);
   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).
@@ -825,6 +889,8 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     };
   }, []);
   const guest = guestPage();             // #1920: a guest's page — no operations, pending changes or owner CSS (#2855: usage, yes)
+  // AgEnD Hub P1 (S3b): a Hub workspace has none of the fleet's lines, rails, tabs or bars (their endpoints are the fleet's).
+  const hub = hubMarks().hub;
   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>
@@ -833,18 +899,18 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     <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 ? null : html`<${RestartLine} />`}
-      ${viewOnly || guest || !shell.banner ? null : html`<${shell.banner} />`}
+      ${viewOnly || guest || hub ? null : html`<${OperationLine} route=${nav.route} />`}
+      ${viewOnly || guest || hub ? null : html`<${RestartLine} />`}
+      ${viewOnly || guest || hub || !shell.banner ? null : html`<${shell.banner} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
-    <${RightRail} route=${nav.route} />
-    <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
+    ${hub ? null : html`<${RightRail} route=${nav.route} />`}
+    ${hub ? null : html`<${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />`}
     ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
-    ${viewOnly || guest || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}
+    ${viewOnly || guest || hub || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}
     <${ConfirmHost} />
     <${ColorDialogHost} />
-    ${viewOnly || guest ? null : html`<${OwnerCssKeepBar} />`}
+    ${viewOnly || guest || hub ? null : html`<${OwnerCssKeepBar} />`}
     <${Toasts} />
   </div>`;
 }