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

package/dist/ui/shared/app.js

@@ -33,10 +33,6 @@ appStore.set({ viewOnly: mode === "view-only" });
 // #1920 phase 3: a guest's page has its chats and nothing else — no panel, notifier, theme list or owner CSS a guest
 // would be refused.
 const guest = guestPage();
-// AgEnD Hub P1 (S3b): a Hub's own workspace (the mark its listener sets). It boots Hub-only: no fleet stream, chat,
-// Needs you, notices, preferences, themes or owner CSS — none of the fleet's endpoints exist at the Hub's origin, and
-// who is signed in is the Hub's own session (/hub/v1/session), read by its pages.
-const hubPage = mode === "full" && !guest && String(boot.hub || "").split(/\s+/).includes("hub");
 
 // A failed load can be retried (the panel's Retry): each retry asks for a fresh URL, since a browser may keep a failed
 // module import cached under the first one. boot() runs once, whichever attempt succeeds.
@@ -46,12 +42,7 @@ const loadView = retryable((a) => import(retryUrl("/assets/panel-view.js", a)));
 const panels = new Map([["view", { load: () => loadView().then((m) => m.ViewPanel) }]]);
 let onNewInstance = null;
 
-if (hubPage) {
-  const loadHub = retryable((a) => import(retryUrl("/ui/js/panel-hub.js", a)));
-  panels.set("hub", { load: () => loadHub().then((m) => m.HubPanel) });
-  appStore.set({ connection: "none" });
-  if (!location.pathname.startsWith("/ui/hub")) history.replaceState(history.state, "", "/ui/hub");
-} else if (mode === "full") {
+if (mode === "full") {
   const stream = createStream({ mode, transport: boot.webTransport });
   stream.on("status", applyStatus);
   stream.on("activity", applyActivity);
@@ -65,7 +56,8 @@ if (hubPage) {
   // 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() });
@@ -94,8 +86,6 @@ if (hubPage) {
   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.
@@ -131,8 +121,6 @@ if (hubPage) {
     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
@@ -152,7 +140,7 @@ if (hubPage) {
 startRouter(window);
 // #1629 r4 §3: the person's owner CSS (full app only; never on Settings, in safe mode or where this device turned it off;
 // never a guest's — owner CSS is an admin's).
-if (!guest && !hubPage) installOwnerCss();
+if (!guest) installOwnerCss();
 // /ui on its own opens the chat this browser had open last (an unknown name shows the panel's "not found").
 {
   const r = navStore.get().route;
@@ -163,7 +151,7 @@ if (!guest && !hubPage) installOwnerCss();
 
 document.addEventListener("keydown", handleKey);
 // #2293: Ctrl+K / ⌘K (and Ctrl+F in a chat) — an admin's full app, and a trusted guest's (#2855: what it can see).
-if (mode === "full" && !hubPage && (!guest || guestTrusted())) document.addEventListener("keydown", handleSearchKey);
+if (mode === "full" && (!guest || guestTrusted())) document.addEventListener("keydown", handleSearchKey);
 // #2342: Ctrl/⌘+Z and Ctrl+Shift+Z / Ctrl+Y / ⌘⇧Z in every text field, one history per field (the browser's is one
 // for the whole page, and any script write wipes it).
 installTextUndo({ mac: isMacLike() });

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

@@ -7,10 +7,9 @@
 // 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";
-import { RailFrame } from "./side-rail.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
@@ -125,11 +124,12 @@ 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;
-  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}>`;
+  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>
+    <div class="u-rail-body"><${UsageBody} owner="usage-rail" /></div>
+  </aside>`;
 }
 
 /**
@@ -154,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/signin.js

@@ -27,21 +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",
-      // #3061: sign in with another device — an 8-character code shown here, approved on a device that is already signed in.
-      another: "Sign in with another device", dev_title: "Sign in with another device",
-      dev_lead: "On a device that is already signed in to AgEnD as the owner, open Settings → Access & security, choose Add device under Devices & sign-in, and enter this code.",
-      dev_waiting: "Waiting for approval… Expires in {time}.", dev_approved: "Approved — signing in…",
-      dev_expired: "This code has expired.", dev_denied: "This request was denied.", dev_new: "Get a new code", dev_back: "Back",
-      dev_busy: "Too many devices are waiting right now. Try again in a moment.", dev_limited: "Too many codes asked for. Try again in {duration}.",
-      dev_unavailable: "Signing in with another device isn't available here.", dev_failed: "Could not get a code. Check the connection and try again.",
-      dev_lost: "Could not reach AgEnD. Still trying…",
-      dev_qr: "Or scan this QR code with a device that is already signed in as the owner. It holds this page's address and the code above, nothing else.",
     },
     "zh-TW": {
       checking: "正在確認登入狀態…", title: "登入 AgEnD", lead: "輸入登入碼。",
@@ -59,48 +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 小時",
-      another: "使用其他裝置登入", dev_title: "使用其他裝置登入",
-      dev_lead: "在已登入且已驗證擁有者的裝置上，開啟「設定 → 存取與安全」，在「裝置與登入」選「新增裝置」，輸入這組代碼。",
-      dev_waiting: "等待核准中… {time} 後失效。", dev_approved: "已核准，登入中…",
-      dev_expired: "這組代碼已失效。", dev_denied: "這個請求已被拒絕。", dev_new: "取得新代碼", dev_back: "返回",
-      dev_busy: "目前等待核准的裝置太多，請稍後再試。", dev_limited: "要求代碼的次數太多，請 {duration} 後再試。",
-      dev_unavailable: "這裡無法使用其他裝置登入。", dev_failed: "無法取得代碼。請檢查連線後再試。",
-      dev_lost: "連不上 AgEnD，仍在重試…",
-      dev_qr: "也可以用已登入且已驗證擁有者的裝置掃描這個 QR Code。裡面只有這個頁面的網址和上面的代碼，沒有其他東西。",
     },
   };
   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";
-  // #3061: …and one on this computer's own listener (<body data-device-login="1">, never the public link) offers "Sign in
-  // with another device".
-  const deviceLogin = webOnly && !outside && document.body.getAttribute("data-device-login") === "1";
-  // #3061 (P2b): …and, when `web.login_qr` is on (<body data-login-qr="1">), it also draws the QR code of the approve link.
-  const loginQr = deviceLogin && document.body.getAttribute("data-login-qr") === "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
@@ -171,13 +124,10 @@
     } catch { /* private mode */ }
     $("code").focus();
     offerResend();
-    if (deviceLogin) $("another").hidden = false;
   }
 
-  // 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;
@@ -203,155 +153,6 @@
     button.disabled = false;
   });
 
-  // ── #3061: sign in with another device ──
-  // POST /auth/device-login → the code to show (and an HttpOnly cookie that is this browser's request); then POST
-  // /auth/device-login/poll every couple of seconds until a signed-in owner has approved it (the poll that finds it
-  // approved is what signs this browser in, so nothing is handed over by the approving device), denied it, or it ran out.
-  // Never a GET: asking and polling both change state, and a preview must not.
-  const DEV_POLL_MS = 2000;
-  let dev = null;
-  // One call at a time, in the order they were asked for. Every one of the three answers may carry a Set-Cookie for the
-  // request's cookie (asking sets it, cancelling and a poll that finds it spent clear it), and the browser applies a cookie when
-  // the answer ARRIVES, not when this page chose to ask. So a stale call's late answer would replace or expire the cookie of the
-  // attempt that came after it (Back, then a new attempt, while the first attempt's create or cancel was still on the wire):
-  // the new attempt would poll with the wrong request, or none, and read "expired" after its owner had approved it. Each call
-  // therefore starts only when the one before it has finished: answered, or given up on after DEV_CALL_MS by aborting it. A response
-  // that has not arrived when its call is aborted is dropped by the browser, its Set-Cookie never processed; one whose headers had
-  // already arrived has applied its cookie before the next call is sent. Either way a call carries, and leaves behind, what the last
-  // one left. (An aborted request may still have been handled by the server; at worst that leaves an unused request that expires on
-  // its own.) `mine`: the attempt a create or poll belongs to; one that was stopped before its turn comes is not sent at all.
-  const DEV_CALL_MS = 15000;
-  let devTurn = Promise.resolve();
-  function devCall(path, mine) {
-    const run = async () => {
-      if (mine && mine.stopped) return null;
-      const ctl = typeof AbortController === "function" ? new AbortController() : null;
-      const timer = ctl ? setTimeout(() => ctl.abort(), DEV_CALL_MS) : 0;
-      try {
-        const r = await fetch(`/auth/device-login${path}`, { method: "POST", credentials: "same-origin", cache: "no-store", headers: { "Content-Type": "application/json" }, body: "{}", ...(ctl ? { signal: ctl.signal } : {}) });
-        let body = null;
-        try { body = await r.json(); } catch { /* no body, or not JSON */ }
-        return { r, body };
-      } finally { clearTimeout(timer); }
-    };
-    const call = devTurn.then(run);
-    devTurn = call.then(() => undefined, () => undefined);
-    return call;
-  }
-  const clock = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
-  function devStop() {
-    hideQr();
-    if (!dev) return;
-    dev.stopped = true;
-    clearTimeout(dev.poll); clearInterval(dev.tick);
-    dev = null;
-  }
-  function devSay(text, bad, spent) {
-    $("devStatus").textContent = text;
-    $("devStatus").classList?.[bad ? "add" : "remove"]("bad");
-    $("devCode").classList?.[spent ? "add" : "remove"]("spent");
-  }
-  function devEnded(text, bad) {
-    devStop();
-    devSay(text, bad, true);
-    $("devNew").hidden = false;
-    hideQr();
-  }
-  // ── #3061 (P2b): the approve link as a QR code ──
-  // The link is THIS page's own address plus the code on screen — /settings/access?approve=XXXX-XXXX — and nothing else: no
-  // request id, no cookie, no token (the request's poll cookie is HttpOnly and never leaves this browser). A device that
-  // opens it has to be signed in as the verified owner to do anything with it, and what it opens is the same "Add device"
-  // dialog with the code filled in: the person still presses Continue, sees who is asking, and presses Allow. A sign-in page
-  // reached as localhost cannot be opened from another device, so no code is drawn there.
-  const reachableFromElsewhere = () => !/^(localhost|.*\.localhost|127(\.\d{1,3}){3}|\[?::1\]?)$/i.test(location.hostname);
-  function hideQr() { if (!loginQr) return; $("devQr").hidden = true; $("devQrSvg").replaceChildren(); }
-  async function showQr(code, mine) {
-    if (!loginQr || !reachableFromElsewhere()) return;
-    let make;
-    try { const m = await import("/assets/qrcode.module.js"); make = m.default || m.qrcode; } catch { return; }
-    if (dev !== mine || mine.stopped) return;                  // this request ended, or a newer one began, while the encoder loaded
-    const qr = make(0, "M");
-    qr.addData(`${location.origin}/settings/access?approve=${encodeURIComponent(code)}`);
-    qr.make();
-    const n = qr.getModuleCount(), size = n + 8;
-    let d = "";
-    for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (qr.isDark(r, c)) d += `M${c + 4} ${r + 4}h1v1h-1z`;
-    const NS = "http://www.w3.org/2000/svg", svg = $("devQrSvg");
-    svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
-    const back = document.createElementNS(NS, "rect"), dark = document.createElementNS(NS, "path");
-    back.setAttribute("width", String(size)); back.setAttribute("height", String(size)); back.setAttribute("fill", "#fff");
-    dark.setAttribute("d", d); dark.setAttribute("fill", "#000");
-    svg.replaceChildren(back, dark);
-    $("devQr").hidden = false;
-  }
-  async function devStart() {
-    devStop();
-    $("form").hidden = true; $("device").hidden = false; $("devNew").hidden = true;
-    hideQr();
-    $("devCode").textContent = "XXXX-XXXX";
-    devSay("", false, true);
-    const mine = { stopped: false, poll: 0, tick: 0, deadline: 0, lost: 0 };
-    dev = mine;
-    let made;
-    try { made = await devCall("", mine); } catch { if (!mine.stopped) devEnded(t("dev_failed"), true); return; }
-    if (mine.stopped || !made) return;
-    const { r, body } = made;
-    if (!r.ok || !body || typeof body.code !== "string") {
-      if (r.status === 429) {
-        let wait = Number(r.headers.get("Retry-After")) * 1000;
-        if (Number.isFinite(body && body.retryAfterMs)) wait = body.retryAfterMs;
-        devEnded(t("dev_limited").replace("{duration}", duration(Number.isFinite(wait) && wait > 0 ? wait : 60000)), true);
-      } else devEnded(r.status === 503 ? t("dev_busy") : r.status === 404 ? t("dev_unavailable") : t("dev_failed"), true);
-      return;
-    }
-    $("devCode").textContent = body.code;
-    $("devCode").classList?.remove("spent");
-    showQr(body.code, mine);
-    // The countdown runs on this browser's own clock from when the code arrived (the server's is the authority: its poll
-    // says `expired` when it is).
-    mine.deadline = Date.now() + (Number.isFinite(body.ttlMs) && body.ttlMs > 0 ? body.ttlMs : 300000);
-    const waiting = () => devSay(t("dev_waiting").replace("{time}", clock(mine.deadline - Date.now())), false, false);
-    waiting();
-    mine.tick = setInterval(() => { if (!mine.stopped && !mine.approved) waiting(); }, 1000);
-    const again = () => { if (!mine.stopped) mine.poll = setTimeout(ask, DEV_POLL_MS); };
-    const ask = async () => {
-      let asked = null;
-      try { asked = await devCall("/poll", mine); } catch { /* below */ }
-      if (mine.stopped) return;
-      const p = asked && asked.r, state = asked && asked.body && asked.body.state;
-      if (state === "approved" && p && p.ok) {
-        mine.approved = true;
-        devSay(t("dev_approved"), false, false);
-        clearBounce(); location.replace(nextTarget());
-        return;
-      }
-      if (p && p.status === 404) { devEnded(t("dev_unavailable"), true); return; }          // closed while waiting (e.g. web authorization turned off)
-      if (state === "denied") { devEnded(t("dev_denied"), true); return; }
-      if (state === "expired") { devEnded(t("dev_expired"), true); return; }
-      if (state === "pending") { mine.lost = 0; again(); return; }
-      // The network, or an answer that is none of these: keep trying — the server ends the request when it is time —
-      // but say so after a few, and stop waiting once the code's own time is well past.
-      if (Date.now() > mine.deadline + 15000) { devEnded(t("dev_expired"), true); return; }
-      if (++mine.lost >= 3) devSay(t("dev_lost"), true, false);
-      again();
-    };
-    again();
-  }
-  async function devBack() {
-    const mine = dev;
-    devStop();
-    $("device").hidden = true; $("form").hidden = false;
-    $("code").focus();
-    // Queued behind a create or poll of this attempt that is still on the wire (it needs the cookie that call sets), and ahead of
-    // whatever the person asks for next: a new attempt never starts while this one's cancel is still out.
-    if (mine && !mine.approved) { try { await devCall("/cancel"); } catch { /* it expires by itself */ } }
-  }
-  if (deviceLogin) {
-    $("another").addEventListener("click", () => { devStart(); });
-    $("devNew").addEventListener("click", () => { devStart(); });
-    $("devBack").addEventListener("click", () => { devBack(); });
-  }
-
   async function probe() {
     // A second bounce inside ten seconds means the cookie is valid but not being sent on the
     // navigation; going round again would loop, so stop and let the person type a code.
@@ -373,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>