@songsid/agend 2.2.0-alpha.4 → 2.2.0-alpha.6

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

@@ -8,7 +8,7 @@ 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 { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath } from "./app-route.js";
 import { SessionMenu } from "./app-session.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
 import { InstanceNav, RosterNav } from "./instance-nav.js";
@@ -108,7 +108,8 @@ export function signInHref() {
 function Sidebar({ route, onNewInstance, viewOnly }) {
   const app = useStore(appStore);
   const shell = useStore(shellStore);
-  const on = (panel) => !!route && route.panel === panel;
+  const on = (panel) => !!route && (route.panel === panel || (panel === "fleet" && route.panel === "details"));
+  const openInstance = openInstanceOf(route);
   // 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}>
@@ -137,7 +138,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
     </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("fleet", openInstance ? detailsPath(openInstance) : "/ui/fleet", "fleet", t("app.fleet"))}
       ${navLink("view", "/view", "view", t("app.view"))}
     </nav>
     ${shell.side ? html`<${shell.side.Component} />` : html`<${InstanceNav} route=${route} items=${app.instances} loaded=${app.ready !== false}
@@ -169,28 +170,41 @@ function Prefs() {
   </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 }) {
+/**
+ * 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 }) {
   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>
+    ${nav || null}
     <div class="panel-actions">${children}</div>
   </header>`;
 }
 
+/**
+ * #1523 N2: the instance a page is about — Chat, View 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.
+ */
+export function openInstanceOf(route) {
+  return route && (route.panel === "chat" || route.panel === "view" || route.panel === "details") && route.instance ? route.instance : null;
+}
+
 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 open = openInstanceOf(route);
+  const chatHref = open && route.panel !== "view" ? chatPath(open) : 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);
+  const viewHref = route && (route.panel === "view" || route.panel === "details") && 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")}
@@ -200,7 +214,7 @@ function BottomTabs({ route, viewOnly }) {
   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(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(settingsPath(), "settings", t("app.settings"), route && route.panel === "settings")}
   </nav>`;

package/dist/ui/shared/app.css

@@ -152,6 +152,29 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .panel-sub { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
 .status { display: inline-flex; align-items: center; gap: 6px; }
 .panel-actions { display: flex; align-items: center; gap: var(--s-1); }
+/* #1523 N2: the instance view switch — beside the title on a wide screen; on a phone, a row of tabs under the header. */
+.inst-switch.seg { padding: 0; margin: 0; width: auto; max-width: none; flex-shrink: 0; }
+.inst-switch .seg-item { min-height: 30px; }
+/* #1523 N3 (Q2 = A): the text size, one custom property from the root's data-text-size (header-tools.js). The chat's
+   messages, Details and the Fleet tabs scale the type tokens by it; View's terminal scales itself (VIEW_SCALE). */
+:root { --text-scale: 1; }
+:root[data-text-size="s"] { --text-scale: 0.9; }
+:root[data-text-size="l"] { --text-scale: 1.15; }
+.thread, .p-details .panel-body, .p-fleet .panel-body {
+  --fs-xs: calc(12px * var(--text-scale)); --lh-xs: calc(16px * var(--text-scale));
+  --fs-sm: calc(13px * var(--text-scale)); --lh-sm: calc(18px * var(--text-scale));
+  --fs-md: calc(15px * var(--text-scale)); --lh-md: calc(24px * var(--text-scale));
+  --fs-lg: calc(17px * var(--text-scale)); --lh-lg: calc(24px * var(--text-scale));
+  font-size: var(--fs-md); line-height: var(--lh-md);
+}
+/* #1523 N2: Details. */
+.p-details .d-tags { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
+.p-details .d-edit { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
+@media (max-width: 899px) {
+  .panel-head:has(.inst-switch) { flex-wrap: wrap; }
+  .inst-switch.seg { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 0 var(--s-1); }
+  .inst-switch .seg-item { justify-content: center; border-radius: var(--r-sm); }
+}
 .panel-body { flex: 1; min-height: 0; overflow-y: auto; }
 .panel-body.center { display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
 .col { max-width: var(--col); margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-8); }
@@ -266,6 +289,28 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg .atts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
 .msg.user .atts { justify-content: flex-end; }
 .msg .att-img img { max-width: 260px; max-height: 220px; border-radius: var(--r-sm); display: block; }
+.msg .att-img { cursor: zoom-in; }
+/* #1565: a file from before the fleet restarted that could not be served again — its name only, nothing to fetch. */
+.att-file.att-gone { opacity: 0.6; cursor: default; text-decoration: none; }
+/* A chat image, full size, in the page (image-lightbox.js): the whole viewport, dark, the image fitted to it. */
+html.lb-open .scroller { overflow: hidden; }
+.lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
+  background: rgba(0, 0, 0, 0.95); color: #fff; overflow: hidden; overscroll-behavior: contain; }
+.lb::backdrop { background: rgba(0, 0, 0, 0.6); }
+.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box; }
+.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
+.lb-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
+  background: rgba(0, 0, 0, 0.75); }
+.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
+.lb-count { font-size: var(--fs-sm); opacity: 0.85; }
+.lb .icon-btn { color: #fff; }
+.lb .icon-btn:hover { background: rgba(255, 255, 255, 0.15); }
+.lb .lb-orig { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
+.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; background: rgba(0, 0, 0, 0.4); }
+.lb-prev { left: var(--s-2); }
+.lb-next { right: var(--s-2); }
+/* A phone: the arrows sit below the image's middle band, out of its way, still reachable with a thumb. */
+@media (max-width: 480px) { .lb .lb-orig .lbl { display: none; } .lb-nav { top: auto; bottom: var(--s-4); transform: none; } .lb-stage { padding-bottom: 72px; } }
 .msg .att-file { font-size: var(--fs-sm); color: var(--accent); }
 .msg .att-size { color: var(--text-3); }
 .msg .md p { margin: 0 0 var(--s-3); } .msg .md p:last-child { margin-bottom: 0; }
@@ -299,7 +344,12 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .pv-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-2); margin-right: auto; font-family: var(--font-mono); }
 .pv-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: 6px; }
 .pv-note:empty { display: none; }
-.pv-banner { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-xs); background: var(--warn-bg); border: 1px solid var(--warn-line); }
+.pv-banner { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-xs); background: var(--warn-bg); border: 1px solid var(--warn-line);
+  display: flex; align-items: flex-start; gap: var(--s-2); }
+.pv-banner[hidden] { display: none; }
+.pv-banner-text { flex: 1; min-width: 0; }
+/* #1568: "I understand" hides the banner until the next sign-in; .preview-frame's border below never depends on it. */
+.pv-banner .pv-ack { flex: none; }
 .pv-holder:empty { display: none; }
 .pv-holder { margin-top: var(--s-2); }
 .preview-frame { display: block; width: 100%; border: 2px solid var(--warn-line); border-radius: var(--r-sm); background: #ffffff; }

package/dist/ui/shared/app.js

@@ -14,8 +14,11 @@ import { chatPath } from "./app-route.js";
 import { startNeedsNotifier } from "./app-needs.js";
 import { toast } from "./ui-toast.js";
 import { t } from "./app-i18n.js";
+import { initTextSize } from "./header-tools.js";
 
 const boot = document.body.dataset;
+// #1523 N3: this device's text size, on the root before the first paint of any panel.
+initTextSize();
 // "full": a signed-in page. "view-only": an anonymous reader of /view under web.view_access: open — no stream, no
 // session-only panel, nothing under /ui/ is ever imported or read (#1408 §3).
 const mode = boot.mode === "view-only" ? "view-only" : "full";
@@ -53,6 +56,7 @@ if (mode === "full") {
   const loadFleet = retryable((a) => import(retryUrl("/ui/js/panel-fleet.js", a)));
   const loadSettings = retryable((a) => import(retryUrl("/ui/js/panel-settings.js", a)));
   const loadNeeds = retryable((a) => import(retryUrl("/ui/js/panel-needs.js", a)));
+  const loadDetails = retryable((a) => import(retryUrl("/ui/js/panel-details.js", a)));
   // The stream opens once the chat listens, so the frames sent on connect (status, open prompts, ticks) reach it too.
   // If the chat cannot load (a session that just ended), the stream still opens for the sidebar.
   const chatBoot = loadChat();
@@ -64,6 +68,8 @@ if (mode === "full") {
   panels.set("fleet", { load: () => loadFleet().then((m) => m.FleetPanel) });
   panels.set("settings", { load: () => loadSettings().then((m) => m.SettingsPanel) });
   panels.set("needs", { load: () => loadNeeds().then((m) => m.NeedsPanel) });
+  // #1523 N2: one instance's Details (/ui/fleet/agent/<name>).
+  panels.set("details", { load: () => loadDetails().then((m) => m.DetailsPanel) });
   // #1386 §6.3: desktop notifications for new "Needs you" items, in any panel, while this signed-in page is open.
   startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
   onNewInstance = async () => {

package/dist/ui/shared/header-tools.js

@@ -0,0 +1,93 @@
+// #1523 N3 (§3.4, Q2 = A): the controls every page's header has, in one order on Chat, View, Details and Fleet —
+//   Aa  text size, shared per device: S / M / L (View also keeps Fit, its own extra choice);
+//   ◔   AI usage, unless the fleet turned it off (web.usage_panel: false — said by the page itself, no probe read).
+// The size is one attribute on the root (data-text-size); CSS turns it into one custom property the chat, Details and
+// Fleet read (#1300: no style attribute). View's terminal multiplies its fitted size by VIEW_SCALE, as its density did.
+import { html, useState } from "./app-html.js";
+import { t } from "./app-i18n.js";
+import { createStore, useStore } from "./app-store.js";
+import { Icon } from "./ui-icons.js";
+import { UsageDialog } from "./usage-dialog.js";
+
+export const TEXT_SIZE_KEY = "agend_text_size";
+export const VIEW_FIT_KEY = "agend_view_fit";
+const LEGACY_DENSITY_KEY = "agend_view_density";
+export const TEXT_SIZES = ["s", "m", "l"];
+/** View's terminal: its fitted size times this (S / M / L are View's old compact / – / comfortable). */
+export const VIEW_SCALE = { s: 0.8, m: 1, l: 1.25 };
+
+const read = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
+const write = (k, v) => { try { localStorage.setItem(k, v); } catch { /* this page only */ } };
+
+/**
+ * This device's choice: `agend_text_size` (+ View's Fit), else — once — from View's `agend_view_density`:
+ * comfortable → L, compact → S (Fit off); fit, or nothing → M with View on Fit (View's default, as before).
+ */
+export function loadTextSize() {
+  let size = read(TEXT_SIZE_KEY), fit = read(VIEW_FIT_KEY);
+  if (!TEXT_SIZES.includes(size)) {
+    const legacy = read(LEGACY_DENSITY_KEY);
+    size = legacy === "comfortable" ? "l" : legacy === "compact" ? "s" : "m";
+    fit = legacy === "comfortable" || legacy === "compact" ? "0" : "1";
+    write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, fit);
+  }
+  return { size, viewFit: fit !== "0" };
+}
+
+export const textSizeStore = createStore({ size: "m", viewFit: true });
+function apply(st) { try { document.documentElement.dataset.textSize = st.size; } catch { /* no document */ } }
+textSizeStore.subscribe(apply);
+let listeningOn = null;     // the window whose storage events it follows (one page, one window)
+/** A page load: this device's choice, on the root; another tab's choice follows (the storage event). */
+export function initTextSize() {
+  const st = loadTextSize();
+  textSizeStore.set(st);
+  apply(st);
+  if (typeof window !== "undefined" && window !== listeningOn && typeof window.addEventListener === "function") {
+    listeningOn = window;
+    window.addEventListener("storage", (e) => { if (!e || e.key === TEXT_SIZE_KEY || e.key === VIEW_FIT_KEY || e.key === null) textSizeStore.set(loadTextSize()); });
+  }
+}
+/** A size chosen anywhere is the size everywhere (View's Fit included: the last choice wins). */
+export function setTextSize(size) {
+  if (!TEXT_SIZES.includes(size)) return;
+  write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, "0");
+  textSizeStore.set({ size, viewFit: false });
+}
+export function setViewFit() { write(VIEW_FIT_KEY, "1"); textSizeStore.set((s) => ({ ...s, viewFit: true })); }
+
+/** Aa: S → M → L → S; on View, Fit → S → M → L → Fit. */
+export function TextSizeButton({ view = false }) {
+  const st = useStore(textSizeStore);
+  const cur = view && st.viewFit ? "fit" : st.size;
+  const order = view ? ["fit", ...TEXT_SIZES] : TEXT_SIZES;
+  const next = order[(order.indexOf(cur) + 1) % order.length];
+  const name = t(`app.textSize_${cur}`);
+  const label = t("app.textSize", name);
+  return html`<button type="button" class="btn btn-ghost btn-sm hd-text" onClick=${() => (next === "fit" ? setViewFit() : setTextSize(next))}
+    title=${label} aria-label=${label}><${Icon} name="type" size=${16} /><span class="hide-narrow" aria-hidden="true">${name}</span></button>`;
+}
+
+/** Whether the fleet serves the usage panel: the page says so (data-usage-panel); "0" only when turned off. */
+export function usageOffered() {
+  try { return document.body && document.body.dataset ? document.body.dataset.usagePanel !== "0" : true; } catch { return true; }
+}
+
+/**
+ * ◔: the usage dialog (usage-dialog.js). It belongs to the navigation that opened it (`navKey`, #1408 §4; #1563
+ * review): another route, the same route again, another tab of the panel or a language switch closes it, and its
+ * reads and timer end with it — the dialog's lease is that navigation's.
+ */
+export function UsageButton({ navKey }) {
+  const [openFor, setOpenFor] = useState(null);
+  if (!usageOffered()) return null;
+  const open = openFor !== null && openFor === navKey;
+  return html`<button type="button" class="btn btn-ghost btn-sm hd-usage" onClick=${() => setOpenFor(navKey)} aria-label=${t("app.usage")} title=${t("app.usage")}>
+      <${Icon} name="chart" size=${16} /><span class="hide-narrow" aria-hidden="true">${t("app.usage")}</span></button>
+    ${open ? html`<${UsageDialog} key=${navKey} owner=${navKey} onClose=${() => setOpenFor(null)} />` : null}`;
+}
+
+/** The shared controls, in the one order every page uses. `navKey`: the page's navigation (the usage dialog's owner). */
+export function HeaderTools({ view = false, navKey }) {
+  return html`<${TextSizeButton} view=${view} /><${UsageButton} navKey=${navKey} />`;
+}

package/dist/ui/shared/instance-nav.js

@@ -10,7 +10,7 @@
 import { html, useLayoutEffect, useRef } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
-import { chatPath, viewPath } from "./app-route.js";
+import { chatPath, detailsPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
 import { Skeleton } from "./ui-states.js";
 import { viewStore } from "./view-roster-store.js";
@@ -194,8 +194,11 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const filterRef = useRef(null);
   const list = useRef(null);
   const drag = useRef(null);
-  const toView = viewOnly || (route && route.panel === "view");
-  const active = route && (route.panel === "chat" || route.panel === "view") ? route.instance : null;
+  // Where a row goes: the view the page is in (#1523 §3.1). View → View; Details, or a Fleet tab (Q4 = A), → Details;
+  // everywhere else → Chat. The anonymous reader only ever has View.
+  const rowPath = viewOnly || (route && route.panel === "view") ? viewPath
+    : route && (route.panel === "details" || route.panel === "fleet") ? detailsPath : chatPath;
+  const active = route && (route.panel === "chat" || route.panel === "view" || route.panel === "details") ? route.instance : null;
   useLayoutEffect(() => { keepActiveInView(list.current); }, [active, items.length, loaded]);
   const own = (map, name) => Object.prototype.hasOwnProperty.call(map, name);
   const byName = new Map(items.map((it) => [nameOf(it), it]));
@@ -258,7 +261,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
           const facet = facetOf(name);
           const waiting = own(awaiting, name) ? awaiting[name] : null;
           const on = name === active;
-          return html`<li key=${name}><a class=${`inst v-inst${on ? " active" : ""}`} href=${toView ? viewPath(name) : chatPath(name)} title=${instanceTooltip(it)}
+          return html`<li key=${name}><a class=${`inst v-inst${on ? " active" : ""}`} href=${rowPath(name)} title=${instanceTooltip(it)}
               aria-current=${on ? "page" : undefined} onClick=${onPick} ...${dragProps({ type: "instance", name, group: g })}>
             <span class=${`dot ${dotClass(facet, own(exec, name) ? exec[name] : null)}`} aria-hidden="true"></span>
             <span class="inst-text"><span class="inst-name">${name}</span>

package/dist/ui/shared/instance-switch.js

@@ -0,0 +1,16 @@
+// #1523 N2 (§3.2): the instance view switch — Chat | View | Details of ONE instance. Each segment is a link to that
+// view's URL for the same instance, so switching keeps the instance (and the sidebar, which is never remounted).
+// Desktop: links in the header; a phone: the same three as top tabs under it (app.css). The anonymous View reader
+// gets none (Chat and Details need a session): the caller does not render it there.
+import { html } from "./app-html.js";
+import { t } from "./app-i18n.js";
+import { chatPath, detailsPath, viewPath } from "./app-route.js";
+
+/** current: "chat" | "view" | "details". */
+export function InstanceSwitch({ name, current }) {
+  const seg = (key, href, label) => html`<a key=${key} class=${`seg-item${current === key ? " active" : ""}`} href=${href}
+    aria-current=${current === key ? "page" : undefined}>${label}</a>`;
+  return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
+    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("details", detailsPath(name), t("app.details"))}
+  </nav>`;
+}

package/dist/ui/shared/panel-view.js

@@ -11,6 +11,11 @@ import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
 import { useLease } from "./app-ctx.js";
 import { PanelHeader, setTitle, onPanelKey, signInHref } from "./app-shell.js";
+import { InstanceSwitch } from "./instance-switch.js";
+import { HeaderTools, VIEW_SCALE, textSizeStore } from "./header-tools.js";
+import { readStream } from "./read-stream.js";
+// The usage dialog's metric row lives with the dialog now (usage-dialog.js); re-exported for what imported it here.
+export { UsageMetric } from "./usage-dialog.js";
 import { backendLabel, STATUS_KEYS } from "./instance-nav.js";
 import { viewStore } from "./view-roster-store.js";
 import { navigate } from "./app-nav.js";
@@ -97,32 +102,7 @@ export { viewStore };
 
 // ── The panel ──
 
-/**
- * One stream of reads under a lease (the pane, the roster, usage): one at a time, and only the newest may land. A tick
- * while a read is on its way is skipped; a forced read (Refresh), or one started after the last has hung STUCK_MS,
- * supersedes it — and a superseded read's answer is dropped at every step: its response, its body, its commit
- * (#1448 review: an interval alone starts overlapping reads, and lease.current() only tells navigations apart).
- */
-const STUCK_MS = 10_000;
-const clock = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
-export function readStream(lease) {
-  let gen = 0, busy = false, since = 0;
-  return {
-    /** A token for a new read, or 0 when this one should not start. */
-    begin(force = false) {
-      const at = clock();
-      if (busy && !force && at - since < STUCK_MS) return 0;
-      busy = true; since = at;
-      return ++gen;
-    },
-    /** May this read still land? */
-    live: (token) => token === gen && lease.current(),
-    end(token) { if (token === gen) busy = false; },
-  };
-}
-
-const DENSITY = { fit: 1, comfortable: 1.25, compact: 0.8 };
-const DENSITY_ORDER = ["fit", "comfortable", "compact"];
+// readStream: one stream of reads under a lease (read-stream.js; View's pane and roster use it).
 const MIN_PX = 12, MAX_PX = 22;
 
 export function ViewPanel({ route, navKey }) {
@@ -134,8 +114,9 @@ export function ViewPanel({ route, navKey }) {
   const [dialog, setDialogState] = useState(null);
   const setDialog = (kind) => setDialogState(kind ? { kind, key: navKey } : null);
   const open = dialog && dialog.key === navKey ? dialog.kind : null;
-  const [usageAvailable, setUsageAvailable] = useState(false);
-  const [density, setDensity] = useState(DENSITY[stored("agend_view_density")] ? stored("agend_view_density") : "fit");
+  // #1523 N3: the text size is the page's one setting (header-tools.js); View's own extra choice is Fit.
+  const ts = useStore(textSizeStore);
+  const density = ts.viewFit ? "fit" : ts.size;
   const name = route.instance;
   const it = name ? v.roster.find((r) => r.instance_name === name) : null;
 
@@ -164,13 +145,6 @@ export function ViewPanel({ route, navKey }) {
     lease.interval(load, 5000);
     lease.on(document, "visibilitychange", () => { if (!document.hidden) load(); });
   }, [lease]);
-  // Usage: whether the fleet offers it (a 404 means off). The read also warms the server's 5-minute cache.
-  useEffect(() => {
-    (async () => {
-      try { const r = await lease.fetch("/api/ai-usage"); if (lease.current()) setUsageAvailable(r.status !== 404); }
-      catch { /* stays hidden */ }
-    })();
-  }, [lease]);
   // /view on its own: the instance this browser looked at last, else the first one.
   useEffect(() => {
     if (name || !v.loaded || !v.roster.length) return;
@@ -187,15 +161,8 @@ export function ViewPanel({ route, navKey }) {
     if (f) { e.preventDefault(); f.focus(); }
   })), [lease]);
 
-  const cycleDensity = () => {
-    const next = DENSITY_ORDER[(DENSITY_ORDER.indexOf(density) + 1) % DENSITY_ORDER.length];
-    store("agend_view_density", next);
-    setDensity(next);
-  };
-  const densityName = tn(`density${density.charAt(0).toUpperCase()}${density.slice(1)}`);
-  const actions = html`
-    <button type="button" class="btn btn-ghost btn-sm" onClick=${cycleDensity} title=${tn("textSize", { size: densityName })} aria-label=${tn("textSize", { size: densityName })}><${Icon} name="type" size=${16} /><span class="hide-narrow" aria-hidden="true">${densityName}</span></button>
-    ${usageAvailable ? html`<button type="button" class="btn btn-ghost btn-sm" onClick=${() => setDialog("usage")} aria-label=${tn("usageButton")} title=${tn("usageButton")}><${Icon} name="chart" size=${16} /><span class="hide-narrow" aria-hidden="true">${tn("usageButton")}</span></button>` : null}
+  // Aa and ◔ are every page's (HeaderTools); Help is View's own.
+  const actions = html`<${HeaderTools} view=${true} navKey=${navKey} />
     <button type="button" class="icon-btn" onClick=${() => setDialog("help")} aria-label=${tn("helpButton")} title=${tn("helpButton")}><${Icon} name="info" /></button>`;
 
   let body;
@@ -209,10 +176,10 @@ export function ViewPanel({ route, navKey }) {
 
   return html`<div class="panel p-view">
     <${PanelHeader} title=${it ? (it.display_name || it.instance_name) : tn("title")}
-      sub=${it ? html`<span class="status"><span class=${`dot ${it.status === "running" ? "ok" : it.status === "crashed" ? "bad" : "off"}`} aria-hidden="true"></span>${tn(STATUS_KEYS[it.status] || "statusUnknown")}</span>` : null}>${actions}</${PanelHeader}>
+      sub=${it ? html`<span class="status"><span class=${`dot ${it.status === "running" ? "ok" : it.status === "crashed" ? "bad" : "off"}`} aria-hidden="true"></span>${tn(STATUS_KEYS[it.status] || "statusUnknown")}</span>` : null}
+      nav=${it && !viewOnly ? html`<${InstanceSwitch} name=${name} current="view" />` : null}>${actions}</${PanelHeader}>
     ${body}
     ${open === "edit" && it ? html`<${EditProfile} key=${navKey} it=${it} onClose=${() => setDialog(null)} />` : null}
-    ${open === "usage" ? html`<${UsageDialog} onClose=${() => setDialog(null)} />` : null}
     ${open === "help" ? html`<${HelpDialog} onClose=${() => setDialog(null)} />` : null}
   </div>`;
 }
@@ -234,7 +201,7 @@ function Terminal({ name, lease, density }) {
     const lh = parseFloat(pcs.lineHeight) / parseFloat(pcs.fontSize);
     const lineH = Number.isFinite(lh) && lh > 0 ? lh : 1.2;
     let size = Math.min(innerW / (g.cols * glyphRatio(p)), innerH / (g.rows * lineH)) * 0.995;
-    size = Math.max(MIN_PX, Math.min(size, MAX_PX)) * (DENSITY[density] || 1);
+    size = Math.max(MIN_PX, Math.min(size, MAX_PX)) * (density === "fit" ? 1 : VIEW_SCALE[density] || 1);
     size = Math.max(8, Math.min(size, 32));
     g.key = key;
     if (Math.abs(size - g.applied) < 0.75) return;
@@ -369,109 +336,3 @@ function HelpDialog({ onClose }) {
     <ul class="help-list">${["help1", "help2", "help3", "help4", "help5", "help6"].map((k) => html`<li key=${k}>${tn(k)}</li>`)}</ul>
   </${Dialog}>`;
 }
-
-// ── AI usage ── Every provider the fleet's logins report; refreshed every 60 s while this dialog is open (passive).
-const USAGE_ORDER_KEY = "agend_view_usage_order";
-function usageText(fallback, ref) {
-  if (!ref || typeof ref.key !== "string") return fallback == null ? "" : String(fallback);
-  return (Array.isArray(ref.args) ? ref.args : []).reduce((text, value, i) => text.split(`{${i}}`).join(String(value)), t(`view.${ref.key}`));
-}
-function usageDuration(ms) {
-  const total = Math.max(1, Math.ceil(ms / 60000));
-  const d = Math.floor(total / 1440), h = Math.floor((total % 1440) / 60), m = total % 60;
-  if (total >= 2880) return usageText("", { key: "usage.duration.days_hours", args: [d, h] });
-  if (total >= 60) return usageText("", { key: "usage.duration.hours_minutes", args: [Math.floor(total / 60), m] });
-  return usageText("", { key: "usage.duration.minutes", args: [total] });
-}
-function resetText(iso) {
-  if (!iso) return "";
-  const ms = new Date(iso).getTime() - Date.now();
-  if (Number.isNaN(ms)) return "";
-  if (ms <= 0) return tn("usage.reset.soon");
-  return usageText("", { key: "usage.reset.in", args: [usageDuration(ms)] });
-}
-function expiryText(iso) {
-  if (!iso) return "";
-  const at = new Date(iso), ms = at.getTime() - Date.now();
-  if (!(ms > 0)) return "";
-  return usageText("", { key: "usage.ticket_expiry", args: [`${at.getMonth() + 1}/${at.getDate()}`, usageDuration(ms)] });
-}
-export function UsageMetric({ m }) {
-  const bar = useRef(null);
-  const label = usageText(m.label, m.labelI18n);
-  const note = m.note ? usageText(m.note, m.noteI18n) : "";
-  const pct = m.type === "percent" ? Math.min(100, Math.max(0, m.used ?? 0)) : 0;
-  useLayoutEffect(() => { if (bar.current) bar.current.style.width = `${pct}%`; }, [pct]);   // CSSOM (#1300)
-  if (m.type === "percent") {
-    const cls = pct >= 90 ? "crit" : pct >= 70 ? "warn" : "";
-    const word = pct >= 90 ? tn("usageNear") : pct >= 70 ? tn("usageHigh") : "";
-    const sub = [note, resetText(m.resetsAt)].filter(Boolean).join(" · ");
-    return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span>${word ? html`<span class=${`u-status ${cls}`}>${word}</span>` : null}
-      <span class=${`u-pct ${cls}`}>${pct.toFixed(0)}<span class="u-unit">%</span></span></div>
-      <div class="u-meter"><div ref=${bar} class=${`u-fill ${cls}`}></div></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}</div>`;
-  }
-  if (m.type === "dollars") {
-    const val = m.limit ? `$${(m.used ?? 0).toFixed(2)} / $${m.limit.toFixed(2)}` : `$${(m.used ?? 0).toFixed(2)}`;
-    return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${val}</span></div>${note ? html`<div class="u-sub">${note}</div>` : null}</div>`;
-  }
-  const val = `${usageText(m.value ?? "", m.valueI18n)} ${usageText(m.unit ?? "", m.unitI18n)}`.trim();
-  const sub = [note, expiryText(m.expiresAt)].filter(Boolean).join(" · ");
-  return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${val}</span></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}</div>`;
-}
-function UsageDialog({ onClose }) {
-  const lease = useLease("usage-dialog");
-  const [data, setData] = useState(undefined);       // undefined: loading; null: failed
-  const [order, setOrder] = useState(() => { try { const a = JSON.parse(stored(USAGE_ORDER_KEY) || "[]"); return Array.isArray(a) ? a.filter((x) => typeof x === "string") : []; } catch { return []; } });
-  const reads = useMemo(() => readStream(lease), [lease]);
-  // Refresh (force) supersedes a read on its way; the minute's tick waits for it.
-  const load = async (force) => {
-    const token = reads.begin(force);
-    if (!token) return;
-    try {
-      const r = await lease.fetch(`/api/ai-usage${force ? "?force=1" : ""}`);
-      if (!reads.live(token)) return;
-      const d = await r.json();
-      if (reads.live(token)) setData(d);
-    } catch { if (reads.live(token)) setData(null); }
-    finally { reads.end(token); }
-  };
-  useEffect(() => { load(false); lease.interval(() => load(false), 60_000); }, [lease]);
-  const key = (p) => String(p.id || p.name || "");
-  const ordered = (providers) => {
-    const rank = new Map(order.map((id, i) => [id, i]));
-    return providers.map((p, i) => ({ p, i })).sort((a, b) => {
-      const ar = rank.has(key(a.p)) ? rank.get(key(a.p)) : Infinity, br = rank.has(key(b.p)) ? rank.get(key(b.p)) : Infinity;
-      return ar === br ? a.i - b.i : ar - br;
-    }).map((e) => e.p);
-  };
-  const move = (id, delta, providers) => {
-    const ids = ordered(providers).map(key);
-    const from = ids.indexOf(id), to = from + delta;
-    if (from < 0 || to < 0 || to >= ids.length) return;
-    [ids[from], ids[to]] = [ids[to], ids[from]];
-    setOrder(ids); store(USAGE_ORDER_KEY, JSON.stringify(ids));
-  };
-  let content;
-  if (data === undefined) content = html`<${Skeleton} lines=${4} />`;
-  else if (!data || !Array.isArray(data.providers)) content = html`<${ErrorState} message=${tn("usageFail")} onRetry=${() => load(true)} />`;
-  else {
-    const providers = ordered(data.providers);
-    content = html`${!providers.length ? html`<p class="note">${tn("usage.empty_active")}</p>` : null}
-      ${providers.map((p, i) => html`<section key=${key(p)} class="u-provider">
-        <div class="u-head"><strong>${p.name}</strong>${p.plan ? html`<span class="pill">${p.plan}</span>` : null}
-          <span class="u-order">
-            <button type="button" class="icon-btn" disabled=${i === 0} aria-label=${tn("usageMoveUp")} title=${tn("usageMoveUp")} onClick=${() => move(key(p), -1, data.providers)}><${Icon} name="up" size=${14} /></button>
-            <button type="button" class="icon-btn" disabled=${i === providers.length - 1} aria-label=${tn("usageMoveDown")} title=${tn("usageMoveDown")} onClick=${() => move(key(p), 1, data.providers)}><${Icon} name="down" size=${14} /></button>
-          </span></div>
-        ${p.stale ? html`<p class="note">${usageText(p.hint || "", p.hintI18n)}</p>` : null}
-        ${p.status === "error" && !p.transient ? html`<p class="u-err">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
-          : p.status === "error" && p.transient ? html`<p class="note">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
-          : p.status === "no-credentials" ? html`<p class="note">${tn("usage.not_logged_in")}</p>${p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : null}`
-          : html`${(p.metrics || []).map((m, j) => html`<${UsageMetric} key=${j} m=${m} />`)}
-            ${!p.stale && p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : !(p.metrics || []).length ? html`<p class="note">${tn("usage.no_data")}</p>` : null}`}
-      </section>`)}
-      <div class="u-foot"><span class="note">${tn("usageUpdated")} ${new Date(data.fetchedAt).toLocaleTimeString()}</span>
-        <button type="button" class="btn btn-sm" onClick=${() => load(true)}>${tn("usageRefresh")}</button></div>`;
-  }
-  return html`<${Dialog} title=${tn("usage.title")} onClose=${onClose} wide=${true}>${content}</${Dialog}>`;
-}

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

@@ -0,0 +1,26 @@
+// One stream of reads under a lease (moved from panel-view.js for #1523 N3: View's pane and roster, and the usage
+// dialog every page's header opens, share it).
+/**
+ * One stream of reads under a lease (the pane, the roster, usage): one at a time, and only the newest may land. A tick
+ * while a read is on its way is skipped; a forced read (Refresh), or one started after the last has hung STUCK_MS,
+ * supersedes it — and a superseded read's answer is dropped at every step: its response, its body, its commit
+ * (#1448 review: an interval alone starts overlapping reads, and lease.current() only tells navigations apart).
+ */
+const STUCK_MS = 10_000;
+const clock = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+export function readStream(lease) {
+  let gen = 0, busy = false, since = 0;
+  return {
+    /** A token for a new read, or 0 when this one should not start. */
+    begin(force = false) {
+      const at = clock();
+      if (busy && !force && at - since < STUCK_MS) return 0;
+      busy = true; since = at;
+      return ++gen;
+    },
+    /** May this read still land? */
+    live: (token) => token === gen && lease.current(),
+    end(token) { if (token === gen) busy = false; },
+  };
+}
+