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

package/dist/ui/preview.js

@@ -25,7 +25,18 @@
   var NEVER_KEY = "agend_html_preview_never";   // sessionStorage: "1" — never preview on this device (this session)
   var BANNER = "Previews run the agent's HTML in an isolated frame. It cannot use your login, but it may be able to send data out. Only preview content you trust. A preview can slow or freeze this tab.";
 
-  var cfg = { dashboardOrigin: "", previewOrigin: "", boot: "", reason: "" };
+  var cfg = { dashboardOrigin: "", previewOrigin: "", boot: "", reason: "", reasonCode: "" };
+  // #1554: the page's words. `say(key, english, …values)` asks the app's dictionary (init's opts.text) and keeps the
+  // English here when it has none — so this file still works, and reads the same, without the app.
+  var text = null;
+  function say(key, english) {
+    var values = Array.prototype.slice.call(arguments, 2);
+    var s = null;
+    if (text) { try { s = text.apply(null, [key].concat(values)); } catch (e) { s = null; } }
+    if (typeof s === "string" && s && s !== key) return s;
+    for (var i = 0; i < values.length; i++) english = english.split("{" + i + "}").join(String(values[i]));
+    return english;
+  }
   var changed = [];   // the page's "this device's choice changed" callbacks (checkbox, cards)
   var live = new Map();   // cardKey → { key, iframe, ch, holder, state, … }   (at most one: one running preview per page)
   var listening = false;
@@ -41,14 +52,19 @@
     return s;
   }
 
-  /** What the server said about this page load (the <body data-*> attributes /ui was served with). */
-  function init(data) {
+  /**
+   * What the server said about this page load (the <body data-*> attributes /ui was served with). opts.text(key,
+   * …values): the app's dictionary for this file's words (#1554); without it they are the English below.
+   */
+  function init(data, opts) {
     cfg = {
       dashboardOrigin: String((data && data.dashboardOrigin) || ""),
       previewOrigin: String((data && data.previewOrigin) || ""),
       boot: String((data && data.previewBoot) || ""),
       reason: String((data && data.previewReason) || ""),
+      reasonCode: String((data && data.previewReasonCode) || ""),
     };
+    if (opts && typeof opts.text === "function") text = opts.text;
     if (!listening && typeof root.addEventListener === "function") {
       root.addEventListener("message", onMessage);
       // The opt-in is per device: another tab of this dashboard turning it off (or clearing storage) stops the
@@ -96,13 +112,18 @@
    * a frame from the wrong place), and the device must have opted in and not switched previews off.
    */
   function availability() {
-    if (!cfg.previewOrigin || !cfg.boot) return { ok: false, why: "server", reason: cfg.reason || "Previews are not available here." };
+    if (!cfg.previewOrigin || !cfg.boot) {
+      // The server's reason, in the page's language when the server named it (a code), else as the server wrote it.
+      var server = cfg.reasonCode ? say("pvServer_" + cfg.reasonCode, cfg.reason || "Previews are not available here.", cfg.dashboardOrigin) : "";
+      return { ok: false, why: "server", reason: server || cfg.reason || say("pvWhyServer", "Previews are not available here.") };
+    }
     var at = root.location && root.location.origin;
     if (!cfg.dashboardOrigin || at !== cfg.dashboardOrigin) {
-      return { ok: false, why: "origin", reason: "Previews are off: this page is at " + at + ", but the fleet believes it is at " + (cfg.dashboardOrigin || "an unknown address") + " (a proxy that rewrites Host). Pass the external Host through, or set web.preview_origin." };
+      return { ok: false, why: "origin", reason: say("pvWhyOrigin", "Previews are off: this page is at {0}, but the fleet believes it is at {1} (a proxy that rewrites Host). Pass the external Host through, or set web.preview_origin.",
+        at, cfg.dashboardOrigin || say("pvUnknownAddress", "an unknown address")) };
     }
-    if (never()) return { ok: false, why: "never", reason: "Previews are switched off on this device for this session." };
-    if (!optedIn()) return { ok: false, why: "optin", reason: "Previews are off on this device. Allow them from the card's menu or the sidebar." };
+    if (never()) return { ok: false, why: "never", reason: say("pvWhyNever", "Previews are switched off on this device for this session.") };
+    if (!optedIn()) return { ok: false, why: "optin", reason: say("pvWhyOptin", "Previews are off on this device. Allow them from the card's menu or the sidebar.") };
     return { ok: true, why: "", reason: "" };
   }
 
@@ -134,7 +155,7 @@
   function start(key, holder, html, ui, opts) {
     var a = availability();
     if (!a.ok) { ui.state("unavailable", a.reason); return false; }
-    if (typeof html !== "string" || utf8Bytes(html) > LIMITS.maxBytes) { ui.state("unavailable", "This HTML is over 1 MiB; it is not previewed."); return false; }
+    if (typeof html !== "string" || utf8Bytes(html) > LIMITS.maxBytes) { ui.state("unavailable", say("pvHtmlOver", "This HTML is over 1 MiB; it is not previewed.")); return false; }
     stopAll("another");
     var doc = holder.ownerDocument;
     var iframe = mountPreview(doc);
@@ -146,7 +167,7 @@
     if (card.fill) iframe.classList.add("fill");
     live.set(key, card);
     card.readyTimer = root.setTimeout(function () {
-      if (live.get(key) === card && !card.rendered) stop(key, "unavailable", "Preview unavailable: the preview did not answer within 3 s. If an earlier preview froze, it may still be running — open the dashboard in a new tab. Over SSH, forward the preview port too.");
+      if (live.get(key) === card && !card.rendered) stop(key, "unavailable", say("pvNoAnswer", "Preview unavailable: the preview did not answer within 3 s. If an earlier preview froze, it may still be running — open the dashboard in a new tab. Over SSH, forward the preview port too."));
     }, LIMITS.readyMs);
     holder.appendChild(iframe);
     if (!card.fill) setHeight(card, LIMITS.minHeight);
@@ -163,7 +184,7 @@
       // Best effort: a frame that froze this tab freezes this timer too. Only while the page is visible.
       var hidden = root.document && root.document.visibilityState === "hidden";
       if (hidden) { armWatchdog(card); return; }
-      stop(card.key, "stopped", "The preview stopped answering, so it was closed.");
+      stop(card.key, "stopped", say("pvStoppedAnswering", "The preview stopped answering, so it was closed."));
     }, LIMITS.watchdogMs);
   }
 
@@ -181,7 +202,7 @@
   function stopAll(why) {
     var keys = [];
     live.forEach(function (_c, k) { keys.push(k); });
-    for (var i = 0; i < keys.length; i++) stop(keys[i], "stopped", why === "off" ? "Previews were switched off on this device." : why === "another" ? "Another preview started." : "");
+    for (var i = 0; i < keys.length; i++) stop(keys[i], "stopped", why === "off" ? say("pvSwitchedOff", "Previews were switched off on this device.") : why === "another" ? say("pvAnother", "Another preview started.") : "");
     return keys;
   }
   /** Stop every preview inside `node` (before the chat replaces, moves or removes it); returns the stopped keys. */
@@ -214,7 +235,7 @@
     if (Object.keys(d).sort().join(",") !== KEYS[d.type]) return;
     if (d.type === "ready") {
       if (d.ch !== null || typeof d.boot !== "string" || card.rendered) return;
-      if (d.boot !== cfg.boot) { stop(card.key, "unavailable", "Preview unavailable: something else answered on the preview port."); return; }
+      if (d.boot !== cfg.boot) { stop(card.key, "unavailable", say("pvWrongBoot", "Preview unavailable: something else answered on the preview port.")); return; }
       if (!availability().ok) { stop(card.key, "unavailable", availability().reason); return; }
       card.rendered = true;
       root.clearTimeout(card.readyTimer); card.readyTimer = null;
@@ -227,7 +248,7 @@
     if (d.type === "heartbeat") {
       // A heartbeat never outlives the permission: if this device stopped allowing previews (and the storage event
       // was missed), the next heartbeat ends it.
-      if (!availability().ok) { stop(card.key, "stopped", "Previews were switched off on this device."); return; }
+      if (!availability().ok) { stop(card.key, "stopped", say("pvSwitchedOff", "Previews were switched off on this device.")); return; }
       armWatchdog(card);
       return;
     }
@@ -266,5 +287,7 @@
     init: init, availability: availability, optedIn: optedIn, setOptIn: setOptIn, never: never, setNever: setNever, onChange: onChange, listeners: listeners, onStorage: onStorage,
     start: start, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
     mountPreview: mountPreview, onMessage: onMessage, BANNER: BANNER, LIMITS: LIMITS,
+    /** The banner every running preview carries, in the page's language (#1554); BANNER is its English. */
+    banner: function () { return say("pvBanner", BANNER); },
   };
 });

package/dist/ui/settings-request.js

@@ -0,0 +1,9 @@
+// #1523 N2: another page asks Settings to open one instance's dialog ("Edit in Settings" on Details). One request,
+// taken once by Settings when its data is in; it opens only what Settings itself knows (its own config, its own
+// rules): an agent of fleet.yaml, or a ClassicBot room of classicBot.yaml (#1561 review: the split stays).
+let wanted = null;
+/** kind: "agent" | "classic". */
+export function requestAgentSettings(name, kind = "agent") {
+  wanted = typeof name === "string" && name ? { name, kind: kind === "classic" ? "classic" : "agent" } : null;
+}
+export function takeAgentRequest() { const w = wanted; wanted = null; return w; }

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

@@ -42,7 +42,8 @@ register("app", {
     collapse: "Hide the sidebar", expand: "Show the sidebar", openMenu: "Open the sidebar", closeMenu: "Close the sidebar",
     theme: "Theme", themeSystem: "System", themeLight: "Light", themeDark: "Dark", language: "Language",
     previews: "Allow HTML previews on this device", tour: "Tour", tourTitle: "Show the web chat tour again",
-    needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat",
+    needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
+    textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage",
     statusRunning: "running", statusStopped: "stopped", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
     connPolling: "Live updates paused — refreshing every 5 s", connDown: "Disconnected — trying again…", connConnecting: "Connecting…",
     hydrating: "Loading what is open now…", hydrateFailed: "Could not load what is open now (prompts, ticks).",
@@ -70,7 +71,8 @@ register("app", {
     collapse: "隱藏側邊欄", expand: "顯示側邊欄", openMenu: "打開側邊欄", closeMenu: "關閉側邊欄",
     theme: "主題", themeSystem: "跟隨系統", themeLight: "淺色", themeDark: "深色", language: "語言",
     previews: "允許這台裝置預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
-    needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天",
+    needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",
+    textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "剛好填滿", usage: "用量",
     statusRunning: "執行中", statusStopped: "已停止", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
     connPolling: "即時更新暫停中——每 5 秒重新整理", connDown: "已斷線——正在重試…", connConnecting: "連線中…",
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",

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

@@ -13,7 +13,7 @@ export function isSafeInstanceName(name) {
 }
 
 /**
- * A path → the route it names: { panel: "chat" | "view", instance } | { panel: "fleet", tab } |
+ * A path → the route it names: { panel: "chat" | "view" | "details", 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.
  */
@@ -21,7 +21,10 @@ 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);
+  // #1523 N2: one instance's Details (`agent` is no Fleet tab; a tab is one segment).
+  let m = /^\/ui\/fleet\/agent\/([^/]+)$/.exec(pathname);
+  if (m) return named("details", m[1]);
+  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]);
@@ -41,6 +44,7 @@ function named(panel, segment) {
 
 export function chatPath(instance) { return `/ui/chat/${encodeURIComponent(instance)}`; }
 export function viewPath(instance) { return instance ? `/view/${encodeURIComponent(instance)}` : "/view"; }
+export function detailsPath(instance) { return `/ui/fleet/agent/${encodeURIComponent(instance)}`; }
 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"; }
@@ -50,6 +54,7 @@ export function routePath(route) {
   if (route.panel === "settings") return settingsPath(route.section);
   if (route.panel === "needs") return NEEDS_PATH;
   if (route.panel === "view") return viewPath(route.instance);
+  if (route.panel === "details") return detailsPath(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). */

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,26 @@ 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; }
+/* 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; }

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>`;
+}