@songsid/agend 2.3.5-alpha.4 → 2.3.5-beta.1

package/dist/ui/shared/app.js

@@ -56,7 +56,8 @@ if (mode === "full") {
   // A chat that loaded late catches up on what is open now; the shell shows that while it is not done, with Retry.
   stream.on("hydration", (hydration) => appStore.set({ hydration }));
   appStore.set({ retryHydration: () => stream.catchUp() });
-  stream.on("needs", (d) => appStore.set({ needs: Array.isArray(d && d.items) ? d.items : [] }));
+  appStore.set({ needsLoaded: false });
+  stream.on("needs", (d) => appStore.set({ needsLoaded: true, needs: Array.isArray(d && d.items) ? d.items : [] }));
   // #1218: a panel's way to hear one stream event (the Log's steps_tick), unsubscribed by its lease.
   appStore.set({ streamOn: (name, fn) => stream.on(name, fn) });
   appStore.set({ connection: stream.connection() });
@@ -85,8 +86,6 @@ if (mode === "full") {
   let chatLoads = 0;
   panels.set("chat", { load: () => (chatLoads++ === 0 ? chatBoot : loadChat()).then((m) => m.ChatPanel) });
   if (!guest) {
-    const loadWindowsAgent = retryable((a) => import(retryUrl("/ui/js/panel-windows-agent.js", a)));
-    panels.set("windows-agent", { load: () => loadWindowsAgent().then((m) => m.WindowsAgentPanel) });
     panels.set("fleet", { load: () => loadFleet().then((m) => m.FleetPanel) });
     panels.set("settings", { load: () => loadSettings().then((m) => m.SettingsPanel) });
     // #2347: the restart banner's Restart now, in any panel — the Settings runner (behind the session) does it.
@@ -122,8 +121,6 @@ if (mode === "full") {
     startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
     // #2233: a backend sign-in running anywhere is shown on every admin page (the module lives behind the session gate).
     import("/ui/js/backend-signin.js").then((m) => m.installSignIn(), () => {});
-    // alpha.2 (M-2300): an agent's Windows request waiting for a web-only fleet's owner — counted in Needs you everywhere.
-    import("/ui/js/agent-proposals.js").then((m) => m.installProposals(), () => {});
   }
   // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
   // A guest's page (#2855) uploads and saves only its own keys (prefsWritable(key)); another device's changes reach it at

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

@@ -7,7 +7,7 @@
 // Fleet read (#1300: no style attribute). View's terminal multiplies its fitted size by VIEW_SCALE, as its density did.
 import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
-import { appStore, createStore, useStore } from "./app-store.js";
+import { createStore, useStore } from "./app-store.js";
 import { Icon } from "./ui-icons.js";
 import { UsageBody, UsageCompactToggle, UsageDialog } from "./usage-dialog.js";
 
@@ -124,9 +124,7 @@ export function useRailWidth() {
 export function UsageRail({ route }) {
   const wide = useRailWidth();
   const { open } = useStore(usageRailStore);
-  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;
+  if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) 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>
@@ -156,8 +154,8 @@ export function UsageButton({ navKey }) {
 }
 
 /** 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, usage = true }) {
-  return html`<${TextSizeButton} view=${view} />${usage ? html`<${UsageButton} navKey=${navKey} />` : null}`;
+export function HeaderTools({ view = false, navKey }) {
+  return html`<${TextSizeButton} view=${view} /><${UsageButton} navKey=${navKey} />`;
 }
 /** Where a page with no control of its own after the shared ones (Log) keeps the room Chat's ⋯ takes: the same box on every tab. */
 export function HeaderSlot() {

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

@@ -18,7 +18,6 @@ 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. */
@@ -80,14 +79,6 @@ export function modelText(it, raw = it && it.model) {
 }
 const BACKEND_LABELS = { "claude-code": "Claude Code", "kiro-cli": "Kiro CLI", codex: "Codex", grok: "Grok Build", antigravity: "Antigravity", opencode: "OpenCode" };
 export function backendLabel(backend) { return BACKEND_LABELS[backend] || backend || "Unknown"; }
-export function runtimeLabel(runtime) { return runtime === "windows" ? "Windows" : runtime === "wsl" ? "WSL / Linux" : runtime || ""; }
-/** Missing capabilities preserve the existing Linux UI; native runtimes expose only implemented controls. */
-export function supportsInstanceFeature(instance, feature) {
-  const key = feature === "view" ? "terminal" : feature;
-  if (typeof instance?.capabilities?.[key] === "boolean") return instance.capabilities[key];
-  if (feature === "log" && typeof instance?.capabilities?.terminal === "boolean") return instance.capabilities.terminal;
-  return instance?.runtime !== "windows" || !["terminal","view","log","details","attachments","commands","effort","send_while_busy"].includes(feature);
-}
 export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
 export const STATUS_KEYS = { running: "statusRunning", paused: "statusPaused", stopped: "statusStopped", crashed: "statusCrashed" };
 
@@ -106,7 +97,7 @@ export function normalizeFilter(query) { return String(query == null ? "" : quer
 /** Case-insensitive substring on name (incl. display name), model and backend. */
 export function instanceMatchesFilter(it, needle, labelOf) {
   if (!needle) return true;
-  const fields = [nameOf(it), it.display_name, it.model, it.backend, it.machine_name, it.machine_id, runtimeLabel(it.runtime), labelOf ? labelOf(it.backend) : null];
+  const fields = [nameOf(it), it.display_name, it.model, it.backend, labelOf ? labelOf(it.backend) : null];
   return fields.some((value) => typeof value === "string" && value.toLowerCase().includes(needle));
 }
 /**
@@ -145,9 +136,6 @@ export function instanceTooltip(it) {
   if (it.display_name && it.display_name !== name) lines.push(it.display_name, `(${name})`);
   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",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)));
   lines.push(line("tooltipStatus", status));
@@ -295,8 +283,6 @@ function writeFacetsOpen(open) { try { localStorage.setItem(FACETS_KEY, JSON.str
 
 /** The Favorites group's key among the tag groups: no tag can be it (a group name is never a control character). */
 const FAV_GROUP = "\u0000favorites";
-/** #3008 G2: a web-only fleet's General (its status row says `general: true`), pinned first under its own head. */
-const GENERAL_GROUP = "\u0000general";
 /** #1936: the open instance, pinned on top while a filter is on. */
 const PINNED_GROUP = "\u0000pinned";
 function persistOrder(groupNames, instByGroup) {
@@ -504,11 +490,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const [editing, setEditing] = useState(false);
   // Where a row goes: the view the page is in (#1523 §3.1). View → View; Details → Details; everywhere else, a Fleet tab
   // included (#1917: the user's call, replacing Q4 = A), → Chat. The anonymous reader only ever has View.
-  const panelPath = viewOnly || (route && route.panel === "view") ? viewPath
+  const rowPath = viewOnly || (route && route.panel === "view") ? viewPath
     : route && route.panel === "log" ? logPath                                  // #1218: Log → Log
     : route && route.panel === "details" ? detailsPath : chatPath;
-  const rowPath = (name) => byName.get(name)?.runtime === "windows" && ["view", "log", "details"].includes(route?.panel)
-    ? chatPath(name) : panelPath(name);
   const active = route && (route.panel === "chat" || route.panel === "view" || route.panel === "log" || route.panel === "details") ? route.instance : null;
   const own = (map, name) => Object.prototype.hasOwnProperty.call(map, name);
   const byName = new Map(items.map((it) => [nameOf(it), it]));
@@ -518,10 +502,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // their order. Changing them: a signed-in page that may write preferences (not the public link, not the anonymous
   // reader — they still see the list).
   const known = new Set(byName.keys());
-  // #3008 G2: the General, when the server marks one (a web-only fleet), comes first — out of every other group.
-  const general = items.find((it) => it && it.general === true);
-  const generalName = general ? nameOf(general) : null;
-  const favs = nav.favorites.filter((n) => known.has(n) && n !== generalName);
+  const favs = nav.favorites.filter((n) => known.has(n));
   const favSet = new Set(favs);
   const canStar = !viewOnly && prefsWritable("nav.favorites");
   // #1920: a guest's list is not reordered (the order is the host's). #2855: it stars, sorts and filters as its own
@@ -539,15 +520,14 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   let shownGroups, shownInsts;
   if (recent) {
     const sortRecent = byRecentReply(ageOf);
-    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n) && n !== generalName).sort(sortRecent);
+    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n)).sort(sortRecent);
     shownGroups = [...(favs.length ? [FAV_GROUP] : []), ...(rest.length ? [RECENT_GROUP] : [])];
     shownInsts = new Map([[FAV_GROUP, favsSorted ? [...favs].sort(sortRecent) : favs], [RECENT_GROUP, rest]]);
   } else {
     shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
-    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n) && n !== generalName)]));
+    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
     if (favs.length) shownInsts.set(FAV_GROUP, favs);
   }
-  if (generalName) { shownGroups = [GENERAL_GROUP, ...shownGroups]; shownInsts.set(GENERAL_GROUP, [generalName]); }
   const f = nav.filter;
   const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
   // #1936: while a filter is on, the instance you have open stays on top, pinned and marked "Current", whether or not
@@ -609,9 +589,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const row = (name, g, i, count) => {
     const it = byName.get(name);
     // #1722: both names, the preferred one first; one line when there is no other.
-    const preferred = namesOf(it, names.primary);
-    const label = it.runtime === "windows" ? it.display_name || preferred.primary : preferred.primary;
-    const secondary = it.runtime === "windows" ? backendLabel(it.backend) : preferred.secondary;
+    const { primary: label, secondary } = namesOf(it, names.primary);
     const facet = facetOf(name);
     const waiting = own(awaiting, name) ? awaiting[name] : null;
     const on = name === active;
@@ -628,10 +606,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
         aria-current=${on ? "page" : undefined} onClick=${onPick} ...${fav ? {} : dragProps({ type: "instance", name, group: g })}>
       <${InstanceAvatar} it=${it} state=${dotState(it, own(exec, name) ? exec[name] : null, waiting)} cli=${true} />
       <span class="inst-text"><span class="inst-line"><span class="inst-name" title=${label}>${label}</span>
-          <span class="v-meta">${it.runtime === "windows" ? "Windows" : it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span></span>
+          <span class="v-meta">${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: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 })}
@@ -662,10 +639,6 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       if (g === RECENT_GROUP) return html`<div key=${g} class="v-group v-recent" role="group" aria-label=${tn("recentOthers")}>
         <div class="v-group-head recent-head"><${Icon} name="clock" size=${14} /><span class="grow">${tn("recentOthers")}</span><span class="count">${names.length}</span></div>
         <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
-      // #3008 G2: the General — always open, first, not dragged or starred into another place.
-      if (g === GENERAL_GROUP) return html`<div key=${g} class="v-group v-general" role="group" aria-label=${tn("generalGroup")}>
-        <div class="v-group-head general-head"><span class="grow">${tn("generalGroup")}</span></div>
-        <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
       // #1664: Favorites — always open, not dragged (↑ ↓ in Edit), named in the page's language.
       if (g === FAV_GROUP) return html`<div key=${g} class="v-group v-fav" role="group" aria-label=${tn("favorites")}>
         <div class="v-group-head fav-head"><${Icon} name="star" size=${14} cls="fav-mark" /><span class="grow">${tn("favorites")}</span><span class="count">${names.length}</span></div>

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

@@ -7,20 +7,19 @@ import { html } from "./app-html.js";
 import { openSearch } from "./app-shell.js";
 import { t } from "./app-i18n.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
-import { supportsInstanceFeature } from "./instance-nav.js";
 
 /**
  * current: "chat" | "view" | "log" | "details". #1218: Log sits between View and Details. `data-label`: each tab is as
  * wide as its label in the current tab's weight (app.css), so the bar keeps its size whichever tab is current.
  */
-export function InstanceSwitch({ name, current, guest = false, instance }) {
+export function InstanceSwitch({ name, current, guest = false }) {
   const seg = (key, href, label) => html`<a key=${key} class=${`seg-item${current === key ? " active" : ""}`} href=${href}
     aria-current=${current === key ? "page" : undefined} data-label=${label}>${label}</a>`;
   if (guest) return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
-    ${seg("chat", chatPath(name), t("app.chat"))}${supportsInstanceFeature(instance,"view") ? seg("view", viewPath(name), t("app.view")) : null}<button key="search" type="button" class="seg-item"
+    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}<button key="search" type="button" class="seg-item"
       data-label=${t("app.search")} onClick=${() => openSearch({ instance: name })}>${t("app.search")}</button>
   </nav>`;
   return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
-    ${seg("chat", chatPath(name), t("app.chat"))}${supportsInstanceFeature(instance,"view") ? seg("view", viewPath(name), t("app.view")) : null}${supportsInstanceFeature(instance,"log") ? seg("log", logPath(name), t("app.log")) : null}${supportsInstanceFeature(instance,"details") ? seg("details", detailsPath(name), t("app.details")) : null}
+    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("log", logPath(name), t("app.log"))}${seg("details", detailsPath(name), t("app.details"))}
   </nav>`;
 }

package/dist/ui/shared/loading.css

@@ -0,0 +1,37 @@
+/* The shared Skeleton's calm content shapes, including before the app's modules arrive. No shimmer or spinner. */
+.skeleton { box-sizing: border-box; width: 100%; min-width: 0; }
+.skeleton > [aria-hidden] { display: flex; flex-direction: column; gap: 14px; width: 100%; }
+.skeleton .sk-line { height: 14px; flex-shrink: 0; background: var(--surface-2, #e8e8eb); border-radius: 5px; }
+.sk-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; }
+.sk-row .sk-thumb { width: 36px; height: 36px; border-radius: 9px; }
+.sk-row .sk-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 9px; }
+.sk-row .sk-copy .sk-line { width: 76%; height: 12px; }
+.sk-row .sk-copy .sk-line + .sk-line { width: 51%; height: 10px; }
+.sk-row .sk-pill { width: 52px; height: 22px; border-radius: 99px; }
+.sk-cards .sk-row { min-height: 104px; border-bottom: 1px solid var(--border, #ddd); }
+.sk-inline { max-width: 140px; min-width: 90px; padding: 0; margin: 0; }
+.s-profile { position: relative; }
+.s-profile-fields { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
+.sk-reserve { visibility: hidden; pointer-events: none; }
+.sk-profile-cover { position: absolute; inset: 52px 16px 16px; }
+.s-pref-profile-fields > .sk-profile-cover { inset: 0; }
+.sk-profile-cover .skeleton { padding: 0; margin: 0; max-width: none; }
+.sk-form .sk-line:nth-child(3) { width: 100%; height: 40px; }
+.sk-form .sk-line:nth-child(4) { width: 48%; height: 32px; border-radius: 99px; }
+.sk-boot { display: flex; height: 100dvh; background: var(--bg, #f6f6f8); }
+.sk-boot-side { width: var(--sidebar-w, 248px); padding: 28px 20px; border-right: 1px solid var(--border, #ddd); }
+.sk-boot-main { flex: 1; min-width: 0; }
+.sk-boot-head { height: 64px; border-bottom: 1px solid var(--border, #ddd); }
+.sk-boot-head .sk-line { width: 160px; }
+.sk-boot .skeleton { margin: 0; max-width: 760px; opacity: 1; animation: none; }
+.sk-boot .sk-line { height: 14px; background: var(--surface-2, #e8e8eb); }
+.signin-card { position: relative; }
+/* Reserve the real, translated form's size while the session is checked; hidden fields cannot be focused. */
+.signin-card:has(#checking:not([hidden])) #form[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
+.sk-signin { position: absolute; inset: 72px 24px 28px; width: auto; padding: 0; margin: 0; max-width: none; }
+.sk-signin > [aria-hidden] { gap: 18px; }
+.sk-signin .sk-line:first-child { width: 70%; height: 26px; }
+.sk-signin .sk-line:nth-child(3) { width: 100%; height: 48px; }
+.sk-signin .sk-line:nth-child(4) { width: 100%; height: 42px; border-radius: 99px; }
+@media (max-width: 899px) { .sk-boot-side { display: none; } }
+@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 1; } }

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);

package/dist/ui/shared/signin.js

@@ -27,12 +27,6 @@
       hint_web: "On the AgEnD computer, run agend web --code to get a sign-in code.",
       refused_web: "The code is invalid or no longer works. Run agend web --code on the AgEnD computer for a new one.",
       resend_refused_web: "A new code could not be sent. Run agend web --code on the AgEnD computer for one.",
-      // #3008: through the link "Allow connections from outside" opened — the authenticator app's code (the leader's wording).
-      label_outside: "Authenticator code", lead_outside: "Open your authenticator app and enter the 6-digit code for AgEnD.",
-      hint_outside: "Lost your phone? On the AgEnD computer, choose \u201cSet up again\u201d.",
-      refused_outside: "That code didn't work. Check that your phone's clock is right and try the newest code.",
-      paused_outside: "Too many wrong codes. Try again in {duration}.",
-      minutes: "{0} minutes", minute: "1 minute", hours: "{0} hours", hour: "1 hour",
     },
     "zh-TW": {
       checking: "正在確認登入狀態…", title: "登入 AgEnD", lead: "輸入登入碼。",
@@ -50,35 +44,16 @@
       hint_web: "在 AgEnD 電腦上執行 agend web --code 取得登入碼。",
       refused_web: "登入碼無效或已失效。請在 AgEnD 電腦上執行 agend web --code 取得新碼。",
       resend_refused_web: "無法傳送新的登入碼。請在 AgEnD 電腦上執行 agend web --code 取得。",
-      label_outside: "驗證器代碼", lead_outside: "打開驗證器 App，輸入 AgEnD 的 6 位數代碼。",
-      hint_outside: "手機遺失？請在 AgEnD 電腦上選「重新設定」。",
-      refused_outside: "代碼不對。請確認手機時間正確，並輸入最新的代碼。",
-      paused_outside: "錯誤次數太多，請 {duration} 後再試。",
-      minutes: "{0} 分鐘", minute: "1 分鐘", hours: "{0} 小時", hour: "1 小時",
     },
   };
   const lang = /^zh/i.test(navigator.language || "") ? "zh-TW" : "en";
   // #2910 D5: the server marks a web-only fleet's page (<body data-web-only="1">): its own words where it has them.
   const webOnly = !!document.body && document.body.getAttribute("data-web-only") === "1";
-  // #3008: …and one served through the link "Allow connections from outside" opened (<body data-outside="1">): signing in
-  // is the authenticator app's code, posted to /auth/totp.
-  const outside = webOnly && document.body.getAttribute("data-outside") === "1";
-  const t = (k) => (outside && (T[lang][`${k}_outside`] || T.en[`${k}_outside`])) || (webOnly && (T[lang][`${k}_web`] || T.en[`${k}_web`])) || T[lang][k] || T.en[k] || k;
-  /** A wait as words: "15 minutes" / 「15 分鐘」, "2 hours" / 「2 小時」 (rounded up). */
-  const duration = (ms) => {
-    const minutes = Math.max(1, Math.ceil(ms / 60000));
-    if (minutes < 60) return minutes === 1 ? t("minute") : t("minutes").replace("{0}", String(minutes));
-    const hours = Math.ceil(minutes / 60);
-    return hours === 1 ? t("hour") : t("hours").replace("{0}", String(hours));
-  };
+  const t = (k) => (webOnly && (T[lang][`${k}_web`] || T.en[`${k}_web`])) || T[lang][k] || T.en[k] || k;
   // …and no "No chat bot?" help: the hint above already is it.
   if (webOnly) document.querySelectorAll("details.help").forEach((d) => { if (d.querySelector && d.querySelector('[data-i18n="nobot"]')) d.hidden = true; });
   document.documentElement.lang = lang === "zh-TW" ? "zh-Hant" : "en";
-  if (outside) {
-    const input = $("code");
-    input.setAttribute("inputmode", "numeric"); input.setAttribute("maxlength", "7"); input.setAttribute("placeholder", "123456");
-    input.setAttribute("pattern", "[0-9 ]*");
-  }
+  $("checking").setAttribute?.("aria-label", t("checking"));
 
   // An old dashboard link carries `?token=`. It is not a credential any more (the server ignored it and
   // answered with this page), but it is still the fleet's token: take it out of the address bar and
@@ -151,10 +126,8 @@
     offerResend();
   }
 
-  // Only a returning device gets the button; the answer is a boolean and asking has no side effect. Never from outside
-  // (#3008): the code there is the app's, nothing is sent.
+  // Only a returning device gets the button; the answer is a boolean and asking has no side effect.
   async function offerResend() {
-    if (outside) return;
     try {
       const r = await fetch("/auth/device", { credentials: "same-origin", cache: "no-store" });
       if (r.ok && (await r.json()).returning === true) $("resend").hidden = false;
@@ -201,24 +174,18 @@
     button.disabled = true;
     button.textContent = t("working");
     try {
-      const r = await fetch(outside ? "/auth/totp" : "/auth/login", {
+      const r = await fetch("/auth/login", {
         method: "POST",
         credentials: "same-origin",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ code: $("code").value }),
       });
       if (r.ok) { clearBounce(); location.replace(nextTarget()); return; }
-      if (outside && r.status === 429) {
-        let wait = Number(r.headers.get("Retry-After")) * 1000;
-        try { const body = await r.json(); if (Number.isFinite(body && body.retryAfterMs)) wait = body.retryAfterMs; } catch { /* the header's */ }
-        msg.textContent = t("paused").replace("{duration}", duration(Number.isFinite(wait) && wait > 0 ? wait : 60000));
-        throw "shown";
-      }
       // #1854: a 5xx is the server failing to confirm the sign-in (503: a public link's notice did not go out), not a
       // wrong code — say so. The code is spent either way: the way on is a new one.
       msg.textContent = r.status === 429 ? t("paused") : r.status >= 500 ? t("unconfirmed") : t("refused");
-    } catch (err) {
-      if (err !== "shown") msg.textContent = t("network");
+    } catch {
+      msg.textContent = t("network");
     }
     button.disabled = false;
     button.textContent = t("submit");

package/dist/ui/shared/tokens.css

@@ -46,7 +46,6 @@
 
   /* ── Layout ── */
   --col: 768px;            /* the conversation column */
-  --settings-width: 1200px; /* settings workspace, including its horizontal padding */
   --sidebar-w: 260px;
   --header-h: 52px;
   --tap: 44px;             /* the smallest touch target on a phone */

package/dist/ui/shared/ui-dialog.js

@@ -10,7 +10,7 @@ import { t } from "./app-i18n.js";
  * <${Dialog} title="Create task" onClose=${…} actions=${html`…`}>…body…</${Dialog}>
  * Rendered = open; the parent unmounts it to close. `busy` keeps Esc and the backdrop from closing it mid-request.
  */
-export function Dialog({ title, onClose, actions, children, busy = false, wide = false, drawer = false, label, tools = null, cls = "" }) {
+export function Dialog({ title, onClose, actions, children, busy = false, wide = false, drawer = false, label, tools = null }) {
   const ref = useRef(null);
   const opener = useRef(null);
   const busyRef = useRef(busy);
@@ -41,7 +41,7 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     d.addEventListener("click", onClick);
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
   }, [onClose]);
-  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}${drawer ? " dlg-drawer" : ""}${cls ? ` ${cls}` : ""}`} aria-label=${label || title}>
+  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}${drawer ? " dlg-drawer" : ""}`} aria-label=${label || title}>
     <div class="dlg-box" tabindex="-1">
       <div class="dlg-head"><h2 class="dlg-title">${title}</h2>${tools ? html`<span class="dlg-tools">${tools}</span>` : null}
         <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${() => { if (!busyRef.current) onClose(); }}><${Icon} name="close" /></button></div>

package/dist/ui/shared/ui-menu.js

@@ -1,6 +1,6 @@
 // #1408 §7: the ⋯ menu — a button and a list of actions. Arrow keys move, Enter/Space choose, Esc closes and puts focus
 // back on the button. Esc inside the menu is the menu's: it never reaches the app (e.g. never stops an agent's reply).
-import { html, useEffect, useLayoutEffect, useRef, useState } from "./app-html.js";
+import { html, useEffect, useRef, useState } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t } from "./app-i18n.js";
 
@@ -8,54 +8,34 @@ import { t } from "./app-i18n.js";
  * items: [{ key, label, icon?, onSelect, danger?, disabled? }] (falsy entries are skipped). `checked` makes a radio item;
  * `checkbox: true` with `checked` a checkbox item (#2217 hotfix: the chat's card menu), which toggles and keeps the menu
  * open. `active`: the button shows a pressed look (what it controls is on), without changing its role.
- * Optional `trigger` and `triggerClass` customize the button content and styling; `label` remains its accessible name.
  */
-export function Menu({ items, label, icon = "more", cls = "", active = false, trigger, triggerClass = "icon-btn", disabled = false, fit = false }) {
+export function Menu({ items, label, icon = "more", cls = "", active = false }) {
   const [open, setOpen] = useState(false);
-  const [placement,setPlacement] = useState("");
   const btn = useRef(null), list = useRef(null);
   const shown = (items || []).filter(Boolean);
-  useLayoutEffect(() => {
-    if (!open || !fit || !btn.current?.getBoundingClientRect || !list.current) return;
-    const place = () => {
-      if (!btn.current || !list.current) return;
-      const rect = btn.current.getBoundingClientRect();
-      const boundary = btn.current.closest?.(".dlg-body")?.getBoundingClientRect();
-      const top = Math.max(0,boundary?.top || 0), bottom = Math.min(window.innerHeight,boundary?.bottom || window.innerHeight);
-      const above = rect.top-top-8, below = bottom-rect.bottom-8;
-      const up = below < Math.min(list.current.scrollHeight || 280,280) && above > below;
-      const available = up ? above : below;
-      setPlacement(`${up ? " menu-up" : ""}${available < 180 ? " menu-short" : available < 280 ? " menu-compact" : ""}`);
-    };
-    place();
-    window.addEventListener("resize",place);
-    return () => window.removeEventListener("resize",place);
-  },[open,fit]);
   useEffect(() => {
-    if (!open || disabled) { if (open && disabled) setOpen(false); return undefined; }
+    if (!open) return undefined;
     const first = list.current && list.current.querySelector("[role=menuitem]:not([disabled]), [role=menuitemradio]:not([disabled]), [role=menuitemcheckbox]:not([disabled])");
-    if (first) first.focus({ preventScroll: true });
+    if (first) first.focus();
     const outside = (e) => { if (list.current && !list.current.contains(e.target) && btn.current && !btn.current.contains(e.target)) setOpen(false); };
     document.addEventListener("pointerdown", outside, true);
     return () => document.removeEventListener("pointerdown", outside, true);
-  }, [open, disabled]);
+  }, [open]);
   function onKey(e) {
     const all = [...list.current.querySelectorAll("[role=menuitem]:not([disabled]), [role=menuitemradio]:not([disabled]), [role=menuitemcheckbox]:not([disabled])")];
     const i = all.indexOf(document.activeElement);
-    if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setOpen(false); btn.current && btn.current.focus({ preventScroll: true }); }
-    else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); document.activeElement?.click(); }
+    if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setOpen(false); btn.current && btn.current.focus(); }
     else if (e.key === "ArrowDown") { e.preventDefault(); (all[(i + 1) % all.length] || all[0])?.focus(); }
     else if (e.key === "ArrowUp") { e.preventDefault(); (all[(i - 1 + all.length) % all.length] || all[0])?.focus(); }
     else if (e.key === "Home") { e.preventDefault(); all[0]?.focus(); }
     else if (e.key === "End") { e.preventDefault(); all[all.length - 1]?.focus(); }
     else if (e.key === "Tab") setOpen(false);
   }
-  function choose(item) { if (disabled || item.disabled) return; setOpen(false); btn.current && btn.current.focus({ preventScroll: true }); item.onSelect(); }
+  function choose(item) { setOpen(false); btn.current && btn.current.focus(); item.onSelect(); }
   return html`<div class=${`menu ${cls}`}>
-    <button ref=${btn} type="button" class=${`${triggerClass}${active ? " active" : ""}`} aria-haspopup="menu" aria-expanded=${open ? "true" : "false"} disabled=${disabled}
-      aria-label=${label || t("app.more")} title=${label || t("app.more")} onClick=${() => { if (!disabled) setOpen(!open); }}
-      onKeyDown=${(e) => { if (!disabled && (e.key === "ArrowDown" || e.key === "ArrowUp")) { e.preventDefault(); setOpen(true); } }}>${trigger === undefined ? html`<${Icon} name=${icon} />` : trigger}</button>
-    ${open && !disabled ? html`<div data-trust="menu" ref=${list} class=${`menu-list${fit ? placement : ""}`} role="menu" aria-label=${label || t("app.more")} onKeyDown=${onKey}>
+    <button ref=${btn} type="button" class=${`icon-btn${active ? " active" : ""}`} aria-haspopup="menu" aria-expanded=${open ? "true" : "false"}
+      aria-label=${label || t("app.more")} title=${label || t("app.more")} onClick=${() => setOpen(!open)}><${Icon} name=${icon} /></button>
+    ${open ? html`<div data-trust="menu" ref=${list} class="menu-list" role="menu" aria-label=${label || t("app.more")} onKeyDown=${onKey}>
       ${shown.map(item => item.heading
         ? html`<div key=${item.key} class="menu-heading" role="presentation">${item.label}</div>`
         : item.checkbox

package/dist/ui/shared/ui-states.js

@@ -3,9 +3,20 @@ import { html } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t } from "./app-i18n.js";
 
-/** Placeholder lines while something loads. Shown only after 300 ms (CSS), so a fast load never flashes. */
-export function Skeleton({ lines = 3 }) {
-  return html`<div class="skeleton" aria-busy="true" aria-label=${t("app.loading")}>${Array.from({ length: lines }, (_, i) => html`<div key=${i} class="sk-line"></div>`)}</div>`;
+// Lazy panels can arrive in a shell with an older app.css. Keep the loading shapes in their own public stylesheet.
+function loadingStyles() {
+  if (typeof document === "undefined" || !document.head || document.querySelector('link[href="/assets/loading.css"]')) return;
+  const link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", "/assets/loading.css");
+  document.head.appendChild(link);
+}
+/** Initial data only: retain populated content on refresh. Existing callers still get simple text lines. */
+export function Skeleton({ lines = 3, variant = "lines", label }) {
+  loadingStyles();
+  return html`<div class=${`skeleton sk-${variant}`} role="status" aria-busy="true" aria-label=${label || t("app.loading")}>
+    <div aria-hidden="true">${Array.from({ length: lines }, (_, i) => variant === "rows" || variant === "cards"
+      ? html`<div key=${i} class="sk-row"><div class="sk-line sk-thumb"></div><div class="sk-copy"><div class="sk-line"></div><div class="sk-line"></div></div><div class="sk-line sk-pill"></div></div>`
+      : html`<div key=${i} class="sk-line"></div>`)}</div>
+  </div>`;
 }
 
 export function Empty({ icon = "info", title, hint, action }) {