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

package/dist/ui/shared/chat-time.js

@@ -0,0 +1,80 @@
+// #1770: the time a chat line shows, read in the fleet's zone (the one chat-logs, fleet.log and the #1586 DMs use) —
+// "17:38" today, "Yesterday 17:38", "10/11 17:38" earlier this year, "2025/10/11 17:38" before. The hour and minute keep
+// the browser's own format (12- or 24-hour), as they always had. No imports: the thread, the preview panel and the
+// tests read it as it is.
+
+const cache = new Map();
+/** One formatter per (kind, zone, locale): a thread may label 500 lines on every render. */
+function fmt(kind, tz, locale) {
+  const key = `${kind}|${tz || ""}|${locale || ""}`;
+  let f = cache.get(key);
+  if (!f) {
+    const o = kind === "hm" ? { hour: "2-digit", minute: "2-digit" }
+      : kind === "ymd" ? { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric", hourCycle: "h23" }
+      : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+    f = new Intl.DateTimeFormat(kind === "ymd" ? "en-US" : (locale || []), { ...o, timeZone: tz || undefined });
+    cache.set(key, f);
+  }
+  return f;
+}
+/** `tz` when this browser knows it, else undefined (the browser's own zone): a label must still be drawn. */
+function known(tz) {
+  if (!tz) return undefined;
+  try { fmt("ymd", tz); return tz; } catch { return undefined; }
+}
+/** The fleet's zone, as the page was served it (<body data-fleet-tz>); undefined when absent or unknown here. */
+export function fleetTz() { return known(globalThis.document?.body?.dataset?.fleetTz); }
+
+const toMs = (ts) => (typeof ts === "number" ? ts : Date.parse(String(ts || "")));
+function wall(ms, tz) {
+  const p = {};
+  for (const x of fmt("ymd", tz).formatToParts(ms)) p[x.type] = Number(x.value);
+  return p;
+}
+
+/**
+ * The label for `ts` (ISO string or epoch ms), "" when it cannot be read. opts: tz (default the fleet's), now (epoch ms),
+ * yesterday(hm) → the word for "yesterday" around hm (default: hm alone), locale (tests).
+ */
+export function chatTime(ts, opts = {}) {
+  const ms = toMs(ts);
+  if (!Number.isFinite(ms)) return "";
+  const tz = "tz" in opts ? known(opts.tz) : fleetTz();
+  const hm = fmt("hm", tz, opts.locale).format(ms);
+  const d = wall(ms, tz), today = wall(opts.now ?? Date.now(), tz);
+  if (d.year === today.year && d.month === today.month && d.day === today.day) return hm;
+  const y = new Date(Date.UTC(today.year, today.month - 1, today.day - 1));
+  if (d.year === y.getUTCFullYear() && d.month === y.getUTCMonth() + 1 && d.day === y.getUTCDate()) return opts.yesterday ? opts.yesterday(hm) : hm;
+  return d.year === today.year ? `${d.month}/${d.day} ${hm}` : `${d.year}/${d.month}/${d.day} ${hm}`;
+}
+
+/** The full date, time and zone of `ts`, for a tooltip; "" when it cannot be read. */
+export function chatTimeFull(ts, opts = {}) {
+  const ms = toMs(ts);
+  if (!Number.isFinite(ms)) return "";
+  return fmt("full", "tz" in opts ? known(opts.tz) : fleetTz(), opts.locale).format(ms);
+}
+
+/** Milliseconds until the fleet's next midnight (when "today" labels change), at most an hour (a DST day self-corrects). */
+export function msToNextDay(now = Date.now(), tz = fleetTz()) {
+  const w = wall(now, known(tz));
+  const into = ((w.hour * 60 + w.minute) * 60 + w.second) * 1000 + (now % 1000);
+  return Math.max(1000, Math.min(3_600_000, 86_400_000 - into + 1000));
+}
+
+/**
+ * Call `fn` when the fleet's day may have changed — at its next midnight, then again for each one after (an hour at
+ * most between looks, so a DST day or a late timer corrects itself). Each subscriber holds its own timer, and no
+ * module-wide state: the unsubscribe it returns leaves nothing armed.
+ */
+export function onDayChange(fn) {
+  let timer = null, live = true;
+  const arm = () => {
+    timer = setTimeout(() => {
+      timer = null;
+      try { fn(); } finally { if (live) arm(); }
+    }, msToNextDay());
+  };
+  arm();
+  return () => { live = false; if (timer !== null) { clearTimeout(timer); timer = null; } };
+}

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

@@ -10,6 +10,7 @@ import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
 import { Icon } from "./ui-icons.js";
 import { UsageBody, UsageCompactToggle, UsageDialog } from "./usage-dialog.js";
+import { RailFrame } from "./side-rail.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
@@ -127,11 +128,8 @@ export function UsageRail({ route }) {
   const { instances = [] } = useStore(appStore);
   const instance = instances.find(item => item.name === route?.instance);
   if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered() || instance?.capabilities?.usage === false) return null;
-  return html`<aside data-trust="usage" class="u-rail" aria-label=${t("view.usage.title_plain")}>
-    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2><${UsageCompactToggle} />
-      <button type="button" class="icon-btn" onClick=${() => setUsageRail(false)} aria-label=${t("app.usageHide")} title=${t("app.usageHide")}><${Icon} name="close" size=${16} /></button></div>
-    <div class="u-rail-body"><${UsageBody} owner="usage-rail" /></div>
-  </aside>`;
+  return html`<${RailFrame} trust="usage" label=${t("view.usage.title_plain")} title=${t("view.usage.title")} tools=${html`<${UsageCompactToggle} />`}
+    closeLabel=${t("app.usageHide")} onClose=${() => setUsageRail(false)}><${UsageBody} owner="usage-rail" /></${RailFrame}>`;
 }
 
 /**

package/dist/ui/shared/html-attachment.js

@@ -0,0 +1,42 @@
+// #1306 §6.1 (Q4): an agent's .html / .htm attachment gets the same preview card as a ```html block. Its HTML is read
+// from /ui/file/<id> — same origin, this session's cookie — only on a click (Preview, Open in panel), never to show a
+// card. What runs is then handed to the preview frame exactly like a block's (AgendPreview.start): the file URL itself
+// is never opened or framed on the dashboard's origin.
+
+/**
+ * #2863: the sizes a preview takes (UTF-8 bytes of the HTML), the same as a block's (preview.js LIMITS): up to ASK it
+ * runs at once; above it the person is asked first ("Preview anyway?"); above MAX there is no preview, only the
+ * download. MAX is the frame's own ceiling (web-preview.ts PREVIEW_HTML_MAX_BYTES).
+ */
+export const HTML_PREVIEW_ASK = 8 * 1024 * 1024;
+export const HTML_PREVIEW_MAX = 50 * 1024 * 1024;
+
+/**
+ * Read an attachment's HTML: { ok: true, code } or { ok: false, reason } with reason "large" (above `ask` and not
+ * `anyway`: nothing is fetched when its listed size says so; `size` is what it is), "over" (above `max`: its listed size
+ * is checked before anything is fetched, the bytes again after), "gone" (the fleet no longer serves that id — the file
+ * changed, or the fleet restarted), or "failed". The text card reads with its own, single cap (ask = max).
+ */
+export async function loadHtmlAttachment(att, fetchImpl = globalThis.fetch, { ask = HTML_PREVIEW_ASK, max = HTML_PREVIEW_MAX, anyway = false } = {}) {
+  if (!att || typeof att.id !== "string" || !/^[0-9a-f]{32}$/.test(att.id)) return { ok: false, reason: "failed" };
+  if (typeof att.size === "number" && att.size > max) return { ok: false, reason: "over" };
+  if (typeof att.size === "number" && att.size > ask && !anyway) return { ok: false, reason: "large", size: att.size };
+  let res;
+  // Hub PR A (#3226): a Hub file is read from its own room-scoped URL (chat-render's attachmentUrl: a plain same-origin path).
+  const url = globalThis.AgendChatRender?.attachmentUrl ? globalThis.AgendChatRender.attachmentUrl(att) : `/ui/file/${att.id}`;
+  try { res = await fetchImpl(url, { credentials: "same-origin", cache: "no-store" }); }
+  catch { return { ok: false, reason: "failed" }; }
+  if (!res || !res.ok) return { ok: false, reason: res && res.status === 404 ? "gone" : "failed" };
+  let bytes;
+  try { bytes = await res.arrayBuffer(); } catch { return { ok: false, reason: "failed" }; }
+  if (bytes.byteLength > max) return { ok: false, reason: "over" };
+  if (bytes.byteLength > ask && !anyway) return { ok: false, reason: "large", size: bytes.byteLength };
+  // UTF-8, as a block's text is; a BOM is dropped.
+  return { ok: true, code: new TextDecoder("utf-8").decode(bytes) };
+}
+
+/** #2863: a size as the person reads it: "12.3 MB" (1 MB = 1024 × 1024 bytes, as the caps are). */
+export function sizeLabel(bytes) {
+  const mb = bytes / (1024 * 1024);
+  return `${mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10} MB`;
+}

package/dist/ui/shared/hub-chat.css

@@ -0,0 +1,85 @@
+/* #3226 B: the Hub chat — the conversation list (in the sidebar; the page itself on a phone), a room (its header, the
+   fleet chat's thread and composer) and the right-hand panel (the usage rail's frame and cards). Linked by the Hub's
+   hub-chat-strings.js (an older hub.css or app.css lacks these rules). Tokens only: both themes follow. No style= anywhere
+   (#1300): every look here is a class. */
+
+/* ── the conversation list ── */
+.hub-side-nav { display: flex; flex-direction: column; min-height: 0; flex: 1; }
+.hub-nav { display: flex; flex-direction: column; gap: var(--s-1); min-height: 0; padding: 0 var(--s-2) var(--s-2); }
+.hub-new { justify-content: flex-start; gap: var(--s-2); margin: var(--s-1) 0 var(--s-2); }
+.hub-search { display: flex; align-items: center; gap: var(--s-2); background: var(--surface); border-radius: var(--r-sm); padding: 0 var(--s-2); color: var(--text-3); }
+.hub-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); padding: 7px 0; font: inherit; font-size: var(--fs-sm); outline: none; }
+.hub-sec { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .06em; padding: var(--s-3) var(--s-2) var(--s-1); }
+.hub-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
+.hub-room-row, .hub-pick-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; padding: 7px var(--s-2);
+  border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
+.hub-room-row:hover { background: var(--surface); }
+.hub-room-row.active { background: var(--surface-2); }
+.hub-room-row.closed .t, .hub-room-row.closed .s { color: var(--text-3); }
+.hub-room-text { min-width: 0; display: flex; flex-direction: column; }
+.hub-room-text .t { font-weight: var(--fw-semibold, 600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hub-room-text .s { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hub-room-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
+.hub-room-side .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: hub-pulse 1.4s ease-in-out infinite; }
+@keyframes hub-pulse { 50% { opacity: .3; } }
+@media (prefers-reduced-motion: reduce) { .hub-room-side .pulse { animation: none; } }
+.hub-list-empty, .hub-list-err { margin: var(--s-2); font-size: var(--fs-sm); }
+
+/* a name's letter on a tone (the same tones in both themes) */
+.hub-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; flex: none; }
+.hub-av.sm { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
+.hub-av.lg { width: 56px; height: 56px; font-size: 22px; border-radius: 16px; }
+.hub-av.t0 { background: #4f6bd8; } .hub-av.t1 { background: #2f8f83; } .hub-av.t2 { background: #b4643a; }
+.hub-av.t3 { background: #7b5bc4; } .hub-av.t4 { background: #6b7280; } .hub-av.t5 { background: #b8447a; }
+
+/* ── the page: a phone's list, or a wide screen's "pick a chat" ── */
+.hub-chat-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
+.hub-home { flex: 1; min-height: 0; display: flex; }
+.hub-home-list { display: none; }
+.hub-home-pick { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
+@media (max-width: 899px) {
+  .hub-home-list { display: block; flex: 1; overflow-y: auto; padding-top: var(--s-2); }
+  .hub-home-pick { display: none; }
+}
+
+/* ── a room ── */
+.hub-chat { flex: 1; min-height: 0; display: flex; }
+.hub-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
+.hub-chat-head { display: flex; align-items: center; gap: var(--s-2); min-height: var(--header-h, 52px); padding: 0 var(--s-4); border-bottom: 1px solid var(--border); flex: none; }
+.hub-chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.hub-chat-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hub-chat-title .s { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hub-back { flex: none; }
+.hub-scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
+.hub-scroller .thread { max-width: var(--col); margin: 0 auto; padding: var(--s-4) var(--s-5); }
+.hub-room-empty { padding: var(--s-6) var(--s-4); }
+.hub-banner { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--surface); color: var(--text-2); }
+.hub-banner.danger { background: var(--danger-bg, var(--surface)); color: var(--danger); }
+.hub-banner.warn { background: var(--warn-bg, var(--surface)); color: var(--warn); }
+
+/* ── the right-hand panel: the usage rail's frame (side-rail.js), its cards ── */
+.hub-chat > .u-rail { width: 320px; flex-shrink: 0; }
+.hub-card { gap: var(--s-2); }
+.hub-agent-card { align-items: center; text-align: center; }
+.hub-agent-card strong { font-size: var(--fs-lg, 17px); }
+.hub-kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: var(--fs-sm); }
+.hub-kv dt { color: var(--text-3); } .hub-kv dd { margin: 0; min-width: 0; }
+.hub-aud { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
+.hub-aud li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-2); }
+.hub-aud li > .icon { margin-top: 2px; color: var(--text-3); }
+.hub-aud b { color: var(--text); }
+.hub-p1 { margin: 0 var(--s-1); font-size: var(--fs-xs); }
+.hub-rail-sheet { display: flex; flex-direction: column; gap: var(--s-3); }
+
+/* ── New chat ── */
+.hub-pick { display: flex; flex-direction: column; gap: var(--s-2); }
+.hub-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.hub-pick-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
+.hub-pick-row .hub-room-text .s { white-space: normal; }
+.hub-dock .composer-row .hint { white-space: normal; overflow: visible; text-overflow: clip; }
+
+/* the session's menu sits at the sidebar's foot: it always opens upward */
+.hub-session .hub-menu .menu-list { top: auto; bottom: calc(100% + 6px); right: 0; left: auto; }
+
+/* An HTML block's Download needs the preview (#3226 E): not offered in the Hub's thread until then. */
+.hub-scroller .pv-dl { display: none; }

package/dist/ui/shared/hub-owner.css

@@ -0,0 +1,33 @@
+/* #3226 C: My shared agents and Administration as Settings-like pages (linked by hub-owner-strings.js; an older
+   hub-chat.css lacks these rules). Tokens only; no style= anywhere (#1300). */
+/* ── My shared agents and Administration (#3226 C): Settings' page layout ── */
+.hub-page-body { padding: var(--s-4) max(var(--s-5), env(safe-area-inset-right)) var(--s-6) max(var(--s-5), env(safe-area-inset-left)); }
+.hub-owner { width: 100%; max-width: 860px; min-width: 0; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-3); }
+.hub-crumb { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; width: fit-content; }
+.hub-rows { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
+.hub-rows .s-row.hub-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: nowrap; background: var(--surface-2); }
+.hub-row > :not(.hub-row-text) { flex: none; }
+.hub-row-link { color: var(--text); text-decoration: none; }
+.hub-row-link:hover { background: var(--surface-2); }
+.hub-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.hub-row-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hub-row-text .note { overflow-wrap: anywhere; }
+.hub-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
+.hub-card-head h3 { margin: 0; color: var(--text); font-size: var(--fs-lg); text-transform: none; letter-spacing: 0; }
+.hub-grant { display: flex; flex-direction: column; gap: var(--s-3); }
+.hub-grant .field { margin: 0; }
+.hub-danger h3 { color: var(--danger); }
+.hub-steps { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); counter-reset: hub-step; }
+.hub-steps > li { display: flex; align-items: flex-start; gap: var(--s-3); counter-increment: hub-step; }
+.hub-steps > li::before { content: counter(hub-step); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
+  background: var(--surface-2); color: var(--text-2); }
+.hub-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); text-align: start; }
+.hub-steps > li.done::before { content: "✓"; background: var(--ok-bg, var(--surface)); color: var(--ok); }
+.hub-steps > li.now::before { background: var(--text); color: var(--bg); }
+.hub-step-body > span { display: flex; flex-direction: column; gap: 2px; }
+.hub-step-form { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; width: 100%; }
+.hub-step-form .field { margin: 0; flex: 1; min-width: 12em; }
+.hub-steps .hub-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; margin: 0; padding: 0; }
+.hub-steps > li::before { align-self: flex-start; margin-top: 1px; }
+.hub-steps .hub-offer > * { text-align: start; align-self: flex-start; justify-self: start; }
+@media (max-width: 899px) { .hub-page-body { padding: var(--s-3) var(--s-4) var(--s-6); } }

package/dist/ui/shared/hub-quota.css

@@ -0,0 +1,8 @@
+/* The lazy quota components own these additions, including on a retained shell stylesheet. */
+.hub-quota-card .u-row { flex-wrap: wrap; gap: var(--s-2); }
+.hub-quota-chip { max-width: 100%; white-space: normal; }
+.hub-quota-banner { overflow-wrap: anywhere; }
+.hub-quota-visibility > h3 { margin: 0 0 var(--s-3); }
+.hub-quota-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
+.hub-quota-setting > span { min-width: 0; }
+.hub-quota-setting .note { display: block; margin: var(--s-1) 0 0; }

package/dist/ui/shared/hub.css

@@ -0,0 +1,71 @@
+/* AgEnD Hub P1, slice 3: the Hub pages' own stylesheet, linked by their lazy modules (hub-strings.js linkHubCss), so a
+   tab opened before an upgrade (an app.css without these rules) draws them the same. Never loaded while the Hub is off. */
+.hub-brand-name { color: var(--text-2); font-weight: var(--fw-medium); }
+.hub-switch { display: flex; gap: 2px; margin: 0 var(--s-3) var(--s-2); padding: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
+.hub-switch-item { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: 28px; padding: 0 var(--s-2);
+  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hub-switch-item.is-current { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); font-weight: var(--fw-medium); }
+a.hub-switch-item:hover { color: var(--text); }
+a.hub-switch-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.hub-preview { border-left: 3px solid var(--warn-line); background: var(--warn-bg); padding: var(--s-2) var(--s-3); }
+.hub-empty { padding: var(--s-6) 0; }
+.s-hub-connect .hub-connect { max-width: 520px; }
+.hub-state { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
+.hub-state h4 { margin: 0; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
+.hub-origin code { overflow-wrap: anywhere; }
+.hub-fp { display: grid; gap: var(--s-1); }
+.hub-fp-label { font-size: var(--fs-sm); color: var(--text-2); }
+.hub-fp-groups { font-family: var(--font-mono); font-size: var(--fs-md); letter-spacing: .04em; word-spacing: .3em; overflow-wrap: anywhere; }
+.hub-fp-full { font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; color: var(--text-2); }
+.hub-fp .btn-link { justify-self: start; }
+.hub-steps-lead { margin: var(--s-1) 0 0; }
+.hub-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
+.hub-steps li { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); }
+.hub-steps li.is-done { color: var(--ok); }
+.hub-steps small { margin-left: auto; color: var(--text-3); }
+.hub-link { font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 1px var(--s-2); border-radius: var(--r-full); }
+.hub-link.is-online { background: var(--ok-bg); color: var(--ok); }
+.hub-link.is-offline { background: var(--warn-bg); color: var(--warn); }
+.hub-key-changed, .hub-held { border-left: 3px solid var(--danger-line); padding-left: var(--s-3); }
+.hub-exposures { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-3); }
+.hub-exposures h4 { margin: 0 0 var(--s-1); }
+.hub-exposure-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
+.hub-exposure { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); }
+.hub-exposure.is-shared { border-color: var(--accent); }
+.hub-exposure-main { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
+.hub-exposure-name { min-width: 0; overflow-wrap: anywhere; }
+.hub-exposure-why { color: var(--text-3); padding-left: calc(var(--s-2) + 18px); }
+/* S3b: the Hub workspace's pages */
+.hub-body { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4) var(--s-3) var(--s-6); }
+.hub-ask, .hub-mine, .hub-admin { display: grid; gap: var(--s-3); align-content: start; }
+.hub-body > * { width: 100%; max-width: 860px; min-width: 0; }
+.hub-body .card { margin-bottom: 0; }
+@media (max-width: 899px) { .hub-body { padding: var(--s-3) var(--s-4) var(--s-6); } }
+.hub-signin { max-width: 420px; }
+.hub-signin h2 { margin: 0 0 var(--s-1); }
+.hub-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
+.hub-item { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); }
+.hub-item .grow { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
+.hub-room { display: grid; gap: var(--s-2); }
+.hub-room-head { display: flex; align-items: center; gap: var(--s-2); }
+.hub-room-head h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.hub-identity { margin: 0; }
+.hub-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
+.hub-entry { display: grid; gap: var(--s-1); }
+.hub-q, .hub-a { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
+.hub-q { justify-self: end; max-width: 85%; background: var(--surface-2); }
+.hub-a { justify-self: start; max-width: 95%; border: 1px solid var(--border); }
+.hub-stage { font-size: var(--fs-sm); color: var(--text-3); }
+.hub-stage.stage-uncertain, .hub-stage.stage-failed, .hub-stage.stage-cancelled, .hub-stage.stage-rejected { color: var(--warn); }
+.hub-compose textarea { width: 100%; min-height: 72px; resize: vertical; }
+.hub-exposure-card h3 { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 0; }
+.hub-badge { font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 1px var(--s-2); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); }
+.hub-badge.state-published { background: var(--ok-bg); color: var(--ok); }
+.hub-badge.state-frozen { background: var(--warn-bg); color: var(--warn); }
+.hub-grant { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
+.hub-grant .field { flex: 1 1 200px; min-width: 0; }
+.hub-grant .field-row { flex: 1 1 100%; flex-wrap: wrap; }
+.hub-offer { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
+.hub-code { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: .12em; user-select: all; }
+.hub-session { display: flex; align-items: center; gap: var(--s-2); }
+.hub-session .side-row { flex: 1; min-width: 0; }

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

@@ -18,6 +18,7 @@ import { viewStore } from "./view-roster-store.js";
 import { onPrefsChanged, prefInForce, prefsWritable, savePref } from "./app-prefs.js";
 import "./view-strings.js";
 import { themesShown, themesStore } from "./app-themes.js";
+import { machineName } from "./machine-name.js";
 import { identityClasses, identityOf, paintIdentity, useIdentityColors } from "./identity-color.js";
 
 /** view.* text with named values. */
@@ -145,7 +146,7 @@ export function instanceTooltip(it) {
   else lines.push(name);
   lines.push(line("tooltipBackend", backendLabel(it.backend)));
   if (it.runtime) lines.push(`Runtime: ${runtimeLabel(it.runtime)}`);
-  if (it.machine_id) lines.push(line("tooltipMachine",it.machine_name || it.machine_id));
+  if (it.machine_id) lines.push(line("tooltipMachine",machineName(it.machine_id,it.machine_name)));
   if (it.machine_id && it.machine_status !== "online") lines.push(tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline"));
   const src = (s) => (s === "instance" || s === "classic" ? tn("srcConfigured") : s === "fleet-default" ? tn("srcFleetDefault") : "");
   lines.push(line("tooltipModel", (modelText(it) || tn("tooltipUnavailable")) + src(it.model_source)));
@@ -630,7 +631,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
           <span class="v-meta">${it.runtime === "windows" ? "Windows" : it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span></span>
         ${two ? html`<span class="inst-line inst-line2"><span class="inst-alt" title=${secondary || undefined}>${secondary || ""}</span>
           ${mins != null ? html`<span class=${`inst-when${fade > 0 ? " fresh" : ""}`} title=${tn("replyTitle", { time: new Date(Date.parse(it.last_reply)).toLocaleString() })}>${replyText(mins)}</span>` : null}</span>` : null}
-        ${it.machine_id ? html`<span class=${`inst-machine${it.machine_status !== "online" ? " offline" : ""}`} title=${tn("tooltipMachine",{value:it.machine_name || it.machine_id})}><span class="inst-machine-name">${it.machine_name || it.machine_id}</span>${it.machine_status !== "online" ? html`<span class="inst-machine-status">${tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline")}</span>` : null}</span>` : null}
+        ${it.machine_id ? html`<span class=${`inst-machine${it.machine_status !== "online" ? " offline" : ""}`} title=${tn("tooltipMachine",{value:machineName(it.machine_id,it.machine_name)})}><span class="inst-machine-name">${machineName(it.machine_id,it.machine_name)}</span>${it.machine_status !== "online" ? html`<span class="inst-machine-status">${tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline")}</span>` : null}</span>` : null}
         ${facet === "needs" ? html`<span class="inst-sub"><span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span></span>` : null}
         <span class="sr-only">${tn("tooltipBackend", { value: backendLabel(it.backend) })}</span></span>
     </a>${fav && editing && canStar ? html`<button type="button" class="icon-btn inst-move" aria-label=${tn("favUp", { name: label })}

package/dist/ui/shared/machine-name.js

@@ -0,0 +1,13 @@
+// A paired computer's display name. A module of its own, imported by the sidebar (instance-nav.js) and by the lazy
+// chat panel. A tab opened before an upgrade keeps the old shell, whose instance-nav.js has no `machineName`; the new
+// chat panel imports it from here instead, a module that tab loads fresh, so Chat still opens (as #2978 did for
+// settings-width.js). It registers its own words so it does not depend on the shell's older string tables.
+import { register, t } from "./app-i18n.js";
+
+register("machine", {
+  "en": { "short": "Computer {value}" },
+  "zh-TW": { "short": "電腦 {value}" },
+});
+
+/** A remote computer by its name; with no name yet, by the start of its id, never the whole id. The 8-character cut matches `shortId` in src/ui/settings-agent-filters.js; keep the two in step. */
+export const machineName = (id, name) => name || t("machine.short").split("{value}").join(String(id).slice(0, 8));

package/dist/ui/shared/page-head.js

@@ -0,0 +1,8 @@
+// Hub PR A (#3226): a page's head as Settings draws it (#1408: `.s-page-head`) — the title with its scope beside it, the
+// lead under them and the page's actions on the right — shared so the Hub's owner and admin pages are the same thing.
+// Drawing only: the words are the caller's (Settings' SettingsPageHead passes its own).
+import { html } from "./app-html.js";
+
+export function PageHead({ title, scope, lead, children }) {
+  return html`<header class="s-page-head"><div><div class="s-page-title"><h2>${title}</h2><span class="s-scope">${scope}</span></div><p class="s-page-lead">${lead}</p></div>${children ? html`<div class="s-page-actions">${children}</div>` : null}</header>`;
+}

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

@@ -282,6 +282,13 @@ const REDRAWS_IN_PLACE = new Set(["grok"]);
 const FULL_SCREEN = new Set(["claude-code", "opencode", "grok"]);   // agy: its chat UI unverified — found by the read
 /** The full-screen CLIs whose earlier output the Log tab shows (it reads their transcript: log-service.ts). */
 const LOG_HAS_HISTORY = new Set(["claude-code"]);
+/**
+ * Claude history in the View (view-history.js): the full-screen CLIs whose View shows their earlier conversation from
+ * their transcript, above the live screen. A server without it (an older one) leaves them as before: no scrollback.
+ */
+const TRANSCRIPT_HISTORY = new Set(["claude-code"]);
+/** How near the top (px) a history being read asks for the page before it. */
+const OLDER_AT_PX = 48;
 /**
  * M-2267 option (2), the leader's safe default: where a full-screen CLI's earlier output is — its Log tab (or that the
  * Log tab is off, and where to turn it on). Only for whom the Log tab is (a signed-in session on the full app; never a
@@ -304,8 +311,11 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
   const [newBelow, setNewBelow] = useState(false);
   const [historyNote, setHistoryNoteState] = useState(null);
   // A CLI found to keep no scrollback (full screen): nothing is offered or read again for it; the note says why, briefly.
-  const [noScrollback, setNoScrollback] = useState(FULL_SCREEN.has(backend));
-  const noScrollbackRef = useRef(FULL_SCREEN.has(backend));
+  const keepsNone = FULL_SCREEN.has(backend) && !TRANSCRIPT_HISTORY.has(backend);
+  const [noScrollback, setNoScrollback] = useState(keepsNone);
+  const noScrollbackRef = useRef(keepsNone);
+  // Claude history in the View: the history shown while reading (view-history.js's createHistory), or null.
+  const transcript = useRef(null);
   const logLink = logLinkFor(name, backend, signedIn);
   const noteTimer = useRef(null);
   const setHistoryNote = (note, brief = false) => {
@@ -402,6 +412,7 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
   // The person asked for what scrolled off: one bounded read, then reading (or why there is nothing to read).
   const loadEarlier = useRef(null);
   const follow = useRef(null);
+  const olderPage = useRef(null);
   useEffect(() => {
     const reads = readStream(lease);
     const refresh = async () => {
@@ -439,6 +450,7 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
       const from = modeRef.current;
       if (from !== "follow" && !(from === "reading" && !screenAt.current.history)) return;
       if (noScrollbackRef.current) { setHistoryNote(tn("noEarlier"), true); return; }   // known: nothing to read
+      if (TRANSCRIPT_HISTORY.has(backend)) { await loadTranscript(from); return; }
       const box0 = term.current;
       // Where the person is, measured from the end: the screen's lines stay where they are under the scrollback added.
       const fromEnd = box0 ? box0.scrollHeight - box0.scrollTop : 0;
@@ -477,8 +489,65 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
         }
       } catch { if (lease.current()) { back(); setHistoryNote(tn("earlierFailed"), true); } }
     };
+    /**
+     * Claude history in the View: the conversation before the live screen, from the transcript (the renderer is its own
+     * lazy module), drawn above the screen as it is now — then reading, as for a scrollback. Older pages come as the
+     * person nears the top. A server without it: this CLI keeps no scrollback, as before.
+     */
+    const loadTranscript = async (from) => {
+      const back = () => { setMode(from); if (from === "follow") toBottom(); };
+      const screen = screenAt.current.drawn == null ? "" : screenAt.current.drawn;
+      setMode("loading"); setHistoryNote(tn("loadingEarlier"));
+      try {
+        const mod = await import("./view-history.js");
+        if (!lease.current() || modeRef.current !== "loading" || !pre.current) return;
+        let h = null;
+        h = mod.createHistory({ name, fetch: (u) => lease.fetch(u), alive: () => lease.current() && transcript.current === h,
+          doc: document, font: getComputedStyle(pre.current).fontFamily, cols: grid.current.cols });
+        transcript.current = h;
+        const got = await h.first(screen);
+        if (!lease.current() || modeRef.current !== "loading" || !pre.current || transcript.current !== h) return;
+        if (got.kind !== "ok") {
+          transcript.current = null;
+          if (got.kind === "unsupported") { noScrollbackRef.current = true; setNoScrollback(true); back(); setHistoryNote(tn("noEarlier"), true); return; }
+          back();
+          setHistoryNote(got.kind === "empty" ? tn("nothingEarlier") : got.status === 429 ? null : tn("earlierFailed"), true);
+          return;
+        }
+        screenAt.current.reading = screen; screenAt.current.history = true;
+        setNewBelow(screenAt.current.latest != null && !sameScreen(screen, screenAt.current.latest));
+        setMode("reading"); setHistoryNote(null);
+        draw(screen);                                     // the screen as it is (the one frame write), then the history above it
+        pre.current.insertBefore(h.root, pre.current.firstChild);
+        fit();
+        const box = term.current;
+        if (box) {
+          const px = parseFloat(getComputedStyle(pre.current).fontSize);
+          const lineH = Number.isFinite(px) && px > 0 ? px * 1.2 : 16;
+          // The history's last lines and the divider right above the screen.
+          box.scrollTop = Math.max(0, box.scrollHeight - box.clientHeight - lineH * 3);
+        }
+      } catch { if (lease.current() && modeRef.current === "loading") { transcript.current = null; back(); setHistoryNote(tn("earlierFailed"), true); } }
+    };
+    /** The page before the history shown, above it — where the person is stays where it is. */
+    let olderBusy = false;
+    olderPage.current = async () => {
+      const h = transcript.current, box = term.current;
+      if (olderBusy || !h || !box || modeRef.current !== "reading" || !screenAt.current.history) return;
+      olderBusy = true;
+      const fromEnd = box.scrollHeight - box.scrollTop;
+      const capped = !h.hasOlder();
+      if (!capped) setHistoryNote(tn("loadingEarlier"));
+      try {
+        const got = await h.older();
+        if (!lease.current() || transcript.current !== h) return;
+        box.scrollTop = Math.max(0, box.scrollHeight - fromEnd);
+        if (!capped) setHistoryNote(got.kind === "failed" ? tn("earlierFailed") : null, got.kind === "failed");
+      } finally { olderBusy = false; }
+    };
     follow.current = () => {
       if (modeRef.current === "follow") return;
+      transcript.current = null;
       setMode("follow"); setNewBelow(false); setHistoryNote(null); screenAt.current.history = false;
       const latest = screenAt.current.latest;
       if (latest != null && pre.current) { draw(latest); fit(); }
@@ -501,7 +570,9 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
       // Asking for the earlier output: from following, or from reading the screen as it was — at the top.
       const mayLoad = () => (modeRef.current === "follow" || (modeRef.current === "reading" && !screenAt.current.history)) && box.scrollTop <= 0;
       const gesture = () => { gestureAt.current = performance.now(); };
-      lease.on(box, "wheel", (e) => { gesture(); if (e.deltaY < 0 && mayLoad()) loadEarlier.current(); }, { passive: true });
+      // Claude's history being read, at (or near) its top: the page before it.
+      const nearTop = () => modeRef.current === "reading" && screenAt.current.history && transcript.current && box.scrollTop <= OLDER_AT_PX;
+      lease.on(box, "wheel", (e) => { gesture(); if (e.deltaY < 0 && mayLoad()) loadEarlier.current(); else if (e.deltaY < 0 && nearTop()) olderPage.current(); }, { passive: true });
       let touchY = null;
       lease.on(box, "touchstart", (e) => { gesture(); touchY = e.touches && e.touches[0] ? e.touches[0].clientY : null; }, { passive: true });
       lease.on(box, "touchmove", (e) => {
@@ -509,15 +580,17 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
         const y = e.touches && e.touches[0] ? e.touches[0].clientY : null;
         if (touchY == null || y == null) return;
         if (y - touchY > 24 && mayLoad()) { touchY = null; loadEarlier.current(); }
+        else if (y - touchY > 24 && nearTop()) { touchY = null; olderPage.current(); }
       }, { passive: true });
       lease.on(box, "pointerdown", gesture, { passive: true });             // the scrollbar, dragged
       lease.on(box, "keydown", (e) => {
         gesture();
         if ((e.key === "PageUp" || e.key === "ArrowUp" || e.key === "Home") && mayLoad()) { e.preventDefault(); loadEarlier.current(); }
+        else if ((e.key === "PageUp" || e.key === "ArrowUp" || e.key === "Home") && nearTop()) olderPage.current();
         else if (modeRef.current === "reading" && e.key === "End") { e.preventDefault(); follow.current(); }
       });
       lease.on(box, "scroll", () => {
-        if (modeRef.current === "reading") { if (atBottom()) follow.current(); return; }
+        if (modeRef.current === "reading") { if (atBottom()) follow.current(); else if (nearTop()) olderPage.current(); return; }
         // #2969 review (Prism P2): a screen taller than its box (a larger Aa), moved up from the bottom by the person:
         // reading what is on it — the refresh no longer pulls them back down.
         if (modeRef.current === "follow" && recentGesture() && !atBottom()) startReading(screenAt.current.drawn, false);