@songsid/agend 2.3.0-beta.3 → 2.3.0-beta.5

package/dist/ui/panel-fleet.js

@@ -21,6 +21,7 @@ import { confirmedWrite } from "./settings-confirm.js";
 import { OrgCanvas } from "./fleet-canvas.js";
 import { labelOf } from "/assets/instance-nav.js";
 import { CacheReport } from "./fleet-cache.js";
+import { BackendSelect, ModelSelect } from "./settings-dialogs.js";
 
 /** #2015: one of the largest processes as text: "python3 18.1 GB (dev-a)". */
 export function memoryHogText(p) {
@@ -61,7 +62,7 @@ register("fleet", {
     newInstance: "New instance", directory: "Directory", directoryHint: "Optional — a workspace is created if empty", topic: "Name", topicHint: "From the directory name",
     topicRequired: "Name is required when Directory is empty", description: "Description", descriptionHint: "What this instance does", model: "Model", modelHint: "e.g. sonnet, opus, gpt-5",
     branch: "Branch (git worktree)", branchHint: "e.g. feature-x", tags: "Tags", tagsHint: "comma-separated, e.g. dev, review", systemPrompt: "System prompt", systemPromptHint: "Custom instructions for this instance",
-    fleetDefault: "Use the fleet default", notInstalled: "(not installed)", deprecated: "(deprecated)", instanceCreated: "Instance created",
+    fleetDefault: "Use the fleet default", notInstalled: "(not installed)", notSignedIn: "(not signed in — use /login)", tooOld: "(needs {0} or newer)", unchecked: "(not checked yet)", deprecated: "(deprecated)", instanceCreated: "Instance created",
   },
   "zh-TW": {
     hostMemory_elevated: "主機記憶體壓力偏高：新的 agent 一次啟動一個，至少間隔 5 秒",
@@ -92,7 +93,7 @@ register("fleet", {
     newInstance: "新增 instance", directory: "目錄", directoryHint: "可留空——留空會自動建立工作區", topic: "名稱", topicHint: "預設取自目錄名稱",
     topicRequired: "目錄留空時必須填寫名稱", description: "說明", descriptionHint: "這個 instance 做什麼", model: "模型", modelHint: "例如 sonnet、opus、gpt-5",
     branch: "分支（git worktree）", branchHint: "例如 feature-x", tags: "標籤", tagsHint: "以逗號分隔，例如 dev, review", systemPrompt: "System prompt", systemPromptHint: "這個 instance 的自訂指示",
-    fleetDefault: "使用 fleet 預設", notInstalled: "（未安裝）", deprecated: "（已淘汰）", instanceCreated: "Instance 已建立",
+    fleetDefault: "使用 fleet 預設", notInstalled: "（未安裝）", notSignedIn: "（未登入，請用 /login）", tooOld: "（需要 {0} 以上版本）", unchecked: "（尚未檢查）", deprecated: "（已淘汰）", instanceCreated: "Instance 已建立",
   },
 });
 
@@ -334,8 +335,7 @@ function Config({ lease }) {
       <div class="field"><label for="cfg-users">${t("fleet.allowedUsers")}</label><${Secret} id="cfg-users" value=${form.users} onInput=${set("users")} label=${t("fleet.allowedUsers")} />
         <p class="note">${t("fleet.allowedUsersNote")}</p></div></section>
     <section class="card"><h3>${t("fleet.defaults")}</h3>
-      <label class="field"><span>${t("fleet.backend")}</span><select value=${form.backend} onChange=${set("backend")}>
-        ${[...(BACKENDS.includes(form.backend) ? [] : [form.backend]), ...BACKENDS].map(b => html`<option key=${b} value=${b}>${b}</option>`)}</select></label></section>
+      <div class="field"><label for="cfg-be">${t("fleet.backend")}</label><${BackendSelect} id="cfg-be" value=${form.backend} onChange=${(v) => setForm({ ...form, backend: v })} /></div></section>
     <section class="card"><h3>${t("fleet.roots")}</h3>
       ${form.roots.map((r, i) => html`<div key=${i} class="field-row"><input value=${r} placeholder="/path/to/projects" aria-label=${t("fleet.roots")}
         onInput=${(e) => { const roots = [...form.roots]; roots[i] = e.target.value; setForm({ ...form, roots }); }} />
@@ -522,6 +522,8 @@ function CreateTeam({ onClose, onDone, team = null }) {
 export function CreateInstanceDialog({ onClose }) {
   const lease = useLease("create-instance");
   const [backends, setBackends] = useState(null);
+  // The backend "fleet default" means (#2098 review P3-3): its models are the ones the model list offers then.
+  const [defaultBackend, setDefaultBackend] = useState("claude-code");
   const [f, setF] = useState({ dir: "", topic: "", desc: "", backend: "", model: "", branch: "", tags: "", prompt: "" });
   useEffect(() => {
     (async () => {
@@ -530,6 +532,7 @@ export function CreateInstanceDialog({ onClose }) {
         if (!lease.current()) return;
         const list = bd.backends || [];
         const first = list.find(b => b.installed && !b.deprecated) || list.find(b => b.installed);
+        if (typeof bd.defaultBackend === "string" && bd.defaultBackend) setDefaultBackend(bd.defaultBackend);
         setBackends(list);
         setF(x => ({ ...x, backend: first ? first.name : "" }));
       } catch {
@@ -559,14 +562,23 @@ export function CreateInstanceDialog({ onClose }) {
     ${field(`${t("fleet.topic")}${f.dir.trim() ? "" : " *"}`, html`<input value=${f.topic} onInput=${set("topic")} placeholder=${t("fleet.topicHint")} />`)}
     ${field(t("fleet.description"), html`<input value=${f.desc} onInput=${set("desc")} placeholder=${t("fleet.descriptionHint")} />`)}
     ${field(t("fleet.backend"), backends ? html`<select value=${f.backend} onChange=${set("backend")}><option value="">${t("fleet.fleetDefault")}</option>
-      ${backends.map(b => html`<option key=${b.name} value=${b.name} disabled=${!b.installed}>${b.name}${b.deprecated ? ` ${t("fleet.deprecated")}` : ""}${b.installed ? "" : ` ${t("fleet.notInstalled")}`}</option>`)}</select>` : html`<${Skeleton} lines=${1} />`)}
-    ${field(t("fleet.model"), html`<input value=${f.model} onInput=${set("model")} placeholder=${t("fleet.modelHint")} />`)}
+      ${backends.map(b => html`<option key=${b.name} value=${b.name} disabled=${backendBlocked(b)}>${b.name}${b.deprecated ? ` ${t("fleet.deprecated")}` : ""}${backendNote(b)}</option>`)}</select>` : html`<${Skeleton} lines=${1} />`)}
+    ${field(t("fleet.model"), html`<${ModelSelect} value=${f.model} onChange=${(v) => setF(x => ({ ...x, model: v }))} backend=${f.backend || defaultBackend} inherit=${t("fleet.fleetDefault")} />`)}
     ${field(t("fleet.branch"), html`<input value=${f.branch} onInput=${set("branch")} placeholder=${t("fleet.branchHint")} />`)}
     ${field(t("fleet.tags"), html`<input value=${f.tags} onInput=${set("tags")} placeholder=${t("fleet.tagsHint")} />`)}
     ${field(t("fleet.systemPrompt"), html`<textarea rows="3" value=${f.prompt} onInput=${set("prompt")} placeholder=${t("fleet.systemPromptHint")}></textarea>`)}
   </${FormDialog}>`;
 }
 
+// #2072: a backend this host cannot run is shown, disabled, with why; one not checked yet stays selectable.
+const backendState = (b) => b.state ?? (b.installed ? "usable" : b.unknown ? "unknown" : "not_installed");
+function backendBlocked(b) { return ["not_installed", "not_signed_in", "too_old"].includes(backendState(b)); }
+function backendNote(b) {
+  const s = backendState(b);
+  return s === "not_installed" ? ` ${t("fleet.notInstalled")}` : s === "not_signed_in" ? ` ${t("fleet.notSignedIn")}`
+    : s === "too_old" ? ` ${t("fleet.tooOld", b.minVersion ?? "?")}` : s === "unknown" ? ` ${t("fleet.unchecked")}` : "";
+}
+
 // ── Cron in words (#1724: in the page's language) ──
 /**
  * A cron expression as a person says it — "Weekdays 18:00", 「每週一到五 18:00」, "Every 15 minutes" — or the expression

package/dist/ui/panel-settings.js

@@ -31,7 +31,7 @@ import {
   visibilityDefault, worstImpact,
 } from "./settings-model.js";
 import {
-  AgentDialog, BackendSelect, BotDialog, ChipList, ClassicDialog, Drawer, Feedback, Impact, Label, NewBotDialog, Override,
+  AgentDialog, BackendSelect, BotDialog, ChipList, ClassicDialog, Drawer, Feedback, Impact, Label, ModelSelect, NewBotDialog, Override,
   Select, ask, impactText,
 } from "./settings-dialogs.js";
 import { SetupWizard } from "./settings-wizard.js";
@@ -43,6 +43,7 @@ import { setPreviewOptIn } from "./panel-chat.js";
 import { startTour } from "./chat-tour.js";
 import "./chat-strings.js";
 import { AppearanceSection } from "./settings-appearance.js";
+import { GuestsCard } from "./settings-guests.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 const ICONS = { device: "user", appearance: "palette", agents: "bot", bots: "plug", classic: "room", general: "sliders", web: "globe", advanced: "code" };
@@ -707,7 +708,8 @@ function General({ ctx }) {
         <div class="field">${L(tn("language"), "defaults.locale", "g-locale")}<${Select} id="g-locale" value=${f.locale} onChange=${set("locale")}
           options=${localeOptions(f.locale).map((o) => (o.auto ? { value: "", label: tn("localeAuto") } : o))} /></div>
         <div class="field">${L(tn("defaultBackend"), "defaults.backend", "g-be")}<${BackendSelect} id="g-be" value=${f.backend} onChange=${set("backend")} /></div>
-        <div class="field">${L(tn("defaultModel"), "defaults.model", "g-model")}<input id="g-model" type="text" placeholder="e.g. claude-opus-4-8" value=${f.model} onInput=${(e) => set("model")(e.target.value)} /></div>
+        <div class="field">${L(tn("defaultModel"), "defaults.model", "g-model")}<${ModelSelect} id="g-model" value=${f.model} onChange=${set("model")}
+          backend=${f.backend || "claude-code"} inherit=${tn("modelCliDefault")} /></div>
         <div class="field">${L(`${tn("autoPause")} (${tn("minutes")})`, "defaults.auto_pause_after", "g-auto")}<input id="g-auto" type="number" min="0" step="1" class=${errors.auto ? "invalid" : ""} value=${f.auto} onInput=${(e) => set("auto")(e.target.value)} /><${Feedback} error=${errors.auto} /></div>
         <div class="field">${L(tn("toolProgress"), "defaults.tool_progress", "g-tp")}<${Select} id="g-tp" value=${f.tool_progress} onChange=${set("tool_progress")} options=${TOOL_PROGRESS} /></div>
         <div class="field">${L(tn("crossInstanceVisibility"), "defaults.cross_instance_visibility", "g-vis")}<${Select} id="g-vis" value=${f.visibility} onChange=${set("visibility")} options=${VISIBILITY_MODES} />
@@ -865,6 +867,7 @@ function WebSection({ ctx, staged }) {
       </div>
     </section>
     </fieldset>
+    <${GuestsCard} ctx=${ctx} staged=${staged} disabled=${overPublicLink} />
     <section class="card s-web-readonly"><h3>${tn("webReadOnlyTitle")}</h3>
       <p class="note">${tn("webReadOnlyLead")}</p>
       <dl class="s-web-ro">${WEB_READ_ONLY.map((k) => html`<div key=${k}><dt><code>${k}</code></dt><dd>${shown(k)}</dd></div>`)}</dl>

package/dist/ui/settings-catalog.js

@@ -0,0 +1,92 @@
+// #2072 part 3: what a backend or model field in Settings offers — the host's published availability (installed,
+// signed in, new enough: /ui/backends) and the model catalog of that backend for that instance's account (/ui/models).
+// Both answers are the server's cached ones; nothing here makes the server probe. A page asks once and reuses the answer
+// for a short while, so opening several dialogs costs one request each.
+import { useEffect, useState } from "/assets/app-html.js";
+
+const TTL_MS = 30_000;
+const cache = new Map();   // url → { at, value, pending }
+
+async function getJson(url) {
+  const res = await fetch(url, { credentials: "same-origin" });
+  if (!res.ok) throw new Error(String(res.status));
+  return res.json();
+}
+/** The answer for `url`, shared by every field on the page while it is fresh; null when it cannot be read. */
+function cached(url) {
+  const hit = cache.get(url), now = performance.now();
+  if (hit && (hit.pending || now - hit.at < TTL_MS)) return hit.pending ?? Promise.resolve(hit.value);
+  const pending = getJson(url).then((value) => { cache.set(url, { at: performance.now(), value, pending: null }); return value; })
+    .catch(() => { cache.delete(url); return null; });
+  cache.set(url, { at: now, value: null, pending });
+  return pending;
+}
+/**
+ * Drop every remembered answer. Only tests call it today: a page keeps an answer TTL_MS, so a sign-in or a newly
+ * cached catalog shows within that time, or at once on the next page load.
+ */
+export function forgetCatalogs() { cache.clear(); }
+
+function useAnswer(url) {
+  const [value, setValue] = useState(undefined);   // undefined: loading; null: unavailable
+  useEffect(() => {
+    if (!url) { setValue(null); return undefined; }
+    let live = true;
+    setValue(undefined);
+    cached(url).then((v) => { if (live) setValue(v); });
+    return () => { live = false; };
+  }, [url]);
+  return value;
+}
+
+/** The host's backends with their state ({ name, state, minVersion, … }), or null while loading or unavailable. */
+export function useBackendRows() {
+  const answer = useAnswer("/ui/backends");
+  return answer && Array.isArray(answer.backends) ? answer.backends : answer === undefined ? undefined : null;
+}
+
+/** The model catalog of `backend` for `instance` (its account) — [] when none is cached; undefined while loading. */
+export function useModelCatalog(backend, instance) {
+  const url = backend ? `/ui/models?backend=${encodeURIComponent(backend)}${instance ? `&instance=${encodeURIComponent(instance)}` : ""}` : null;
+  const answer = useAnswer(url);
+  if (answer === undefined) return undefined;
+  return answer && Array.isArray(answer.models) ? answer.models : [];
+}
+
+/** A state that keeps a backend from being chosen (shown, disabled, with why); "unknown" never does. */
+export const BLOCKING_STATES = ["not_installed", "not_signed_in", "too_old"];
+
+/**
+ * The backend select's options: every backend the page knows, in its order, each with what the host said about it.
+ * The current value is always selectable — a probe never disables what an agent already runs — and one the page does
+ * not know (a removed backend) stays first, as before.
+ */
+export function backendChoices(known, rows, value, words) {
+  const byName = new Map((rows || []).map((r) => [r.name, r]));
+  const choice = (name) => {
+    const row = byName.get(name), state = row ? row.state ?? (row.installed ? "usable" : row.unknown ? "unknown" : "not_installed") : null;
+    const blocked = !!state && BLOCKING_STATES.includes(state) && name !== value;
+    const note = state === "not_installed" ? words.notInstalled : state === "not_signed_in" ? words.notSignedIn
+      : state === "too_old" ? words.tooOld(row.minVersion ?? "?") : state === "unknown" && name !== value ? words.unchecked : "";
+    return { value: name, label: note ? `${name} — ${note}` : name, disabled: blocked };
+  };
+  const list = known.map(choice);
+  return known.includes(value) || !value ? list : [{ value, label: words.removed(value), disabled: false }, ...list];
+}
+
+/** The id of the "type another model" choice (never a model name: it has a space). */
+export const OTHER_MODEL = "\u0000other";
+
+/**
+ * The model select's options: the inherited choice (empty value), the current model first when the catalog does not
+ * list it (marked), the catalog, and "Other…" for a name the CLI does not list.
+ */
+export function modelChoices(catalog, value, words, inherit) {
+  const list = [];
+  if (inherit) list.push({ value: "", label: inherit });
+  const ids = new Set((catalog || []).map((m) => m.id));
+  if (value && !ids.has(value)) list.push({ value, label: `${value} — ${words.notListed}` });
+  for (const m of catalog || []) list.push({ value: m.id, label: m.description ? `${m.label || m.id} — ${m.description}` : (m.label || m.id) });
+  list.push({ value: OTHER_MODEL, label: words.other });
+  return list;
+}

package/dist/ui/settings-dialogs.js

@@ -13,6 +13,8 @@ import { api, confirmedWrite, newKey } from "./settings-confirm.js";
 import { adminUserIdError, adminUserIdPattern, botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
 import { DiscordServerPicker } from "./settings-discord.js";
 import { startOperation } from "./settings-apply.js";
+import "./settings-strings.js";   // its words, wherever a picker of this file is used (#2072: Fleet's create dialog too)
+import { backendChoices, modelChoices, OTHER_MODEL, useBackendRows, useModelCatalog } from "./settings-catalog.js";
 import {
   ACCESS_MODES, AGENT_FIELDS, AGENT_MODES, BOT_FIELDS, CH_TYPES, CLASSIC_FIELDS, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS,
   VISIBILITY_MODES, accessConfirmations, agentForm, agentPatch, backendOptions, changedFields, channelId, channelsOf,
@@ -32,9 +34,36 @@ export function Select({ value, options, onChange, disabled, id, label }) {
   return html`<select id=${id} value=${value} disabled=${disabled} aria-label=${label} onChange=${(e) => onChange(e.target.value)}>
     ${opts.map((o) => html`<option key=${o.value} value=${o.value}>${o.label}</option>`)}</select>`;
 }
+/**
+ * #2072: a backend field shows every backend with what this host says about it — one it cannot run is disabled with
+ * why (not installed, not signed in, too old); one not checked yet stays selectable; the current value always can be.
+ */
 export function BackendSelect({ value, onChange, disabled, id }) {
-  return html`<${Select} id=${id} value=${value} disabled=${disabled} onChange=${onChange}
-    options=${backendOptions(value).map((o) => (o.unavailable ? { value: o.value, label: tn("backendUnavailable", o.value) } : o))} />`;
+  const rows = useBackendRows();
+  const known = backendOptions(value).filter((o) => !o.unavailable).map((o) => o.value);
+  const opts = backendChoices(known, rows || [], value, {
+    notInstalled: tn("backendNotInstalled"), notSignedIn: tn("backendNotSignedIn"), tooOld: (v) => tn("backendTooOld", v),
+    unchecked: tn("backendUnchecked"), removed: (v) => tn("backendUnavailable", v),
+  });
+  return html`<select id=${id} value=${value} disabled=${disabled} onChange=${(e) => onChange(e.target.value)}>
+    ${opts.map((o) => html`<option key=${o.value} value=${o.value} disabled=${o.disabled}>${o.label}</option>`)}</select>`;
+}
+/**
+ * #2072: a model field is a list — that backend's models for this account (cached; never a probe), the current one
+ * first and marked when the CLI does not list it, and "Other…" for a name it does not list (a text box opens with
+ * the current value in it: choosing "Other…" alone changes nothing — emptying the box is what inherits, #2098 review).
+ * `inherit`: the label of the empty choice (inherit / none), or omit it when the field has none.
+ */
+export function ModelSelect({ value, onChange, disabled, id, backend, instance, inherit }) {
+  const catalog = useModelCatalog(backend, instance);
+  const [typing, setTyping] = useState(false);
+  const opts = modelChoices(catalog || [], value, { notListed: tn("modelNotListed"), other: tn("modelOther") }, inherit);
+  return html`<div class="model-pick">
+    <select id=${id} value=${typing ? OTHER_MODEL : value} disabled=${disabled}
+      onChange=${(e) => { const v = e.target.value; if (v === OTHER_MODEL) setTyping(true); else { setTyping(false); onChange(v); } }}>
+      ${opts.map((o) => html`<option key=${o.value} value=${o.value}>${o.label}</option>`)}</select>
+    ${typing ? html`<input type="text" aria-label=${tn("modelOtherLabel")} placeholder=${tn("modelOtherPlaceholder")} disabled=${disabled}
+      value=${value} onInput=${(e) => onChange(e.target.value)} />` : null}</div>`;
 }
 export function Impact({ schema, field }) { return html`<span class="impact">${impactText(impactOf(schema, field))}</span>`; }
 export function Label({ text, schema, field, htmlFor }) {
@@ -228,7 +257,8 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
           <input id="ag-dn" type="text" placeholder=${name} disabled=${f.inherit.display_name} value=${shown("display_name", f.display_name, defaults.display_name || "")} onInput=${(e) => set("display_name")(e.target.value)} /></${Override}></div>
       <div class="field">${L(tn("description"), "instance.description", "ag-desc")}<input id="ag-desc" type="text" value=${f.description} onInput=${(e) => set("description")(e.target.value)} /></div>
       <div class="field">${L(tn("backend"), "instance.backend", "ag-be")}<${BackendSelect} id="ag-be" value=${f.backend} onChange=${set("backend")} /></div>
-      <div class="field">${L(tn("model"), "instance.model", "ag-model")}<input id="ag-model" type="text" placeholder=${tn("inheritPlaceholder")} value=${f.model} onInput=${(e) => set("model")(e.target.value)} /></div>
+      <div class="field">${L(tn("model"), "instance.model", "ag-model")}<${ModelSelect} id="ag-model" value=${f.model} onChange=${set("model")}
+        backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("inheritPlaceholder")} /></div>
     </div>
     <div class="field">${L(tn("workingDir"), "instance.working_directory", "ag-wd")}<input id="ag-wd" type="text" value=${f.working_directory} onInput=${(e) => set("working_directory")(e.target.value)} /></div>
     <div class="field">${L(`${tn("autoPause")} (${tn("minutes")})`, "instance.auto_pause_after", "ag-auto")}
@@ -264,8 +294,8 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
               onChange=${(e) => set("lightweight")(e.target.checked)} /><span>${tn("lightweight")}</span></label></${Override}></div>
         <div class="field">${L(tn("modelFailover"), "instance.model_failover", "ag-fo")}
           <${Override} inherit=${f.inherit.model_failover} onInherit=${setInherit("model_failover")}>
-            <input id="ag-fo" type="text" placeholder="e.g. sonnet" disabled=${f.inherit.model_failover}
-              value=${shown("model_failover", f.model_failover, (defaults.model_failover && defaults.model_failover[0]) || "")} onInput=${(e) => set("model_failover")(e.target.value)} /></${Override}>
+            <${ModelSelect} id="ag-fo" disabled=${f.inherit.model_failover} backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("modelNone")}
+              value=${shown("model_failover", f.model_failover, (defaults.model_failover && defaults.model_failover[0]) || "")} onChange=${set("model_failover")} /></${Override}>
           <${Feedback} warning=${failoverWarn} /></div>
       </div>
       <div class="field">${L(tn("systemPrompt"), "instance.systemPrompt", "ag-sys")}<input id="ag-sys" type="text" placeholder="e.g. file:prompts/dev.md" value=${f.systemPrompt} onInput=${(e) => set("systemPrompt")(e.target.value)} /></div>
@@ -591,7 +621,8 @@ export function ClassicDialog({ room, ctx, onClose }) {
   return html`<${EditDialog} title=${c.name || c.instanceName} subtitle=${`ID: ${c.instanceName} · ${tn(`exec_${runtime.execution}`)}`} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${CLASSIC_FIELDS} schema=${schema}>
     <div class="grid2">
       <div class="field">${L(tn("backend"), "classic.backend", "cl-be")}<${BackendSelect} id="cl-be" value=${f.backend} onChange=${set("backend")} /></div>
-      <div class="field">${L(tn("model"), "classic.model", "cl-model")}<input id="cl-model" type="text" placeholder=${inherited.model || tn("inheritPlaceholder")} value=${f.model} onInput=${(e) => set("model")(e.target.value)} /></div>
+      <div class="field">${L(tn("model"), "classic.model", "cl-model")}<${ModelSelect} id="cl-model" value=${f.model} onChange=${set("model")}
+        backend=${f.backend} instance=${c.instanceName} inherit=${inherited.model ? tn("inheritValue", inherited.model) : tn("inheritPlaceholder")} /></div>
       <div class="field">${L(`${tn("autoPause")} (${tn("minutes")})`, "classic.auto_pause_after", "cl-auto")}
         <${Override} inherit=${f.inherit.auto_pause_after} onInherit=${setInherit("auto_pause_after")}>
           <input id="cl-auto" type="number" min="0" step="1" class=${errors.auto ? "invalid" : ""} disabled=${f.inherit.auto_pause_after}

package/dist/ui/settings-guests.js

@@ -0,0 +1,117 @@
+// #1920 phase 3 (P3b-2): Settings → Web → Guests — guest sign-in for people who are not admins. The switches (guest
+// sign-in, guests may chat), the agents an open connection's guests may reach, and every guest account: who, on which
+// platform, what it reaches now, its sessions and devices, with Sign out (at once) and Narrow (staged with the rest).
+// Changes go through Review changes → Apply like every Settings edit: one that widens what guests reach waits for a
+// fleet admin's confirmation (the server's settings-change.ts), one that narrows it applies at once.
+import { html, useEffect, useMemo, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { toast } from "/assets/ui-toast.js";
+import { confirmDialog } from "/assets/ui-confirm.js";
+import { api } from "./settings-confirm.js";
+import "./settings-strings.js";
+
+const tn = (k, ...v) => t(`settings.${k}`, ...v);
+const PLATFORMS = { discord: "Discord", telegram: "Telegram" };
+const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
+const copyLists = (m) => { const out = {}; for (const [k, v] of Object.entries(m || {})) if (Array.isArray(v)) out[k] = [...v]; return out; };
+const sameList = (a, b) => (a || []).length === (b || []).length && (a || []).every((n) => (b || []).includes(n));
+const accountKey = (g) => `${g.adapterId}:${g.userId}`;
+
+/** What changed against the configuration, as the PUT /api/settings/fleet/web body's `guests` (null: nothing). */
+export function guestsBody(original, f) {
+  const out = {};
+  if (f.enabled !== original.enabled) out.enabled = f.enabled ? true : null;          // off is the default
+  if (f.chat !== original.chat) out.chat = f.chat ? null : false;                     // on is the default
+  for (const key of ["open_instances", "narrow"]) {
+    const was = original[key], now = f[key], diff = {};
+    for (const k of new Set([...Object.keys(was), ...Object.keys(now)])) {
+      const a = own(was, k) ? was[k] : undefined, b = own(now, k) ? now[k] : undefined;
+      if (a === undefined && b === undefined) continue;
+      if (a !== undefined && b !== undefined && sameList(a, b)) continue;
+      // open_instances: none named = the entry leaves. narrow: undefined = lifted; [] = narrowed to nothing.
+      diff[k] = b === undefined || (key === "open_instances" && !b.length) ? null : [...b];
+    }
+    if (Object.keys(diff).length) out[key] = diff;
+  }
+  return Object.keys(out).length ? out : null;
+}
+
+/** `away`: narrowed names it no longer reaches — listed (marked) only so they can be unticked; unticked, they leave. */
+function Names({ id, all, value, onChange, away = new Set() }) {
+  const chosen = new Set(value || []);
+  return html`<div class="guest-names" id=${id} role="group">${all.map((n) => html`<label key=${n} class=${`check guest-name${away.has(n) ? " guest-away" : ""}`}>
+    <input type="checkbox" checked=${chosen.has(n)} onChange=${(e) => { const s = new Set(chosen); if (e.target.checked) s.add(n); else s.delete(n); onChange(all.filter((x) => s.has(x))); }} />
+    <span>${n}${away.has(n) ? html` <span class="note">${tn("guestNotReachable")}</span>` : null}</span></label>`)}</div>`;
+}
+
+export function GuestsCard({ ctx, staged, disabled = false }) {
+  const g = (ctx.fleet.web && ctx.fleet.web.guests) || {};
+  const original = useMemo(() => ({ enabled: g.enabled === true, chat: g.chat !== false, open_instances: copyLists(g.open_instances), narrow: copyLists(g.narrow) }), []);
+  const [f, setF] = useState(() => ({ ...original, open_instances: copyLists(original.open_instances), narrow: copyLists(original.narrow) }));
+  const [overview, setOverview] = useState(null), [failed, setFailed] = useState(false), [narrowing, setNarrowing] = useState(null), [msg, setMsg] = useState(null);
+  const load = async () => {
+    let r = null;
+    try { r = await api("/api/settings/guests"); } catch { r = null; }
+    if (r && r.ok && r.body) { setOverview(r.body); setFailed(false); } else setFailed(true);
+  };
+  useEffect(() => { load(); }, []);
+  const set = (patch) => setF((x) => ({ ...x, ...patch }));
+  const setList = (key, k, list) => setF((x) => { const m = { ...x[key] }; if (list === undefined) delete m[k]; else m[k] = list; return { ...x, [key]: m }; });
+  const review = () => {
+    const body = guestsBody(original, f);
+    if (body) ctx.stage("guests", { label: tn("guestsTitle"), impact: "now", request: { method: "PUT", url: "/api/settings/fleet/web", body: { guests: body } } });
+    else if (staged.has("guests")) ctx.unstage("guests");
+    setMsg(tn("readyApply"));
+  };
+  const signOut = async (guest) => {
+    const yes = await confirmDialog({ title: tn("guestSignOutTitle"), message: tn("guestSignOutConfirm", guest.name), confirmLabel: tn("guestSignOut"), danger: true });
+    if (!yes) return;
+    let r = null;
+    try { r = await api("/api/settings/guests/revoke", { method: "POST", body: JSON.stringify({ adapterId: guest.adapterId, userId: guest.userId }) }); } catch { r = null; }
+    if (r && r.ok) { toast(tn(r.body && r.body.durable === false ? "guestSignedOutNotDurable" : "guestSignedOut", guest.name)); load(); }
+    else toast(tn("guestSignOutFailed"), false);
+  };
+  const instances = (overview && overview.instances) || [];
+  const open = ((overview && overview.connections) || []).filter((c) => c.mode === "open");
+  const guests = (overview && overview.guests) || [];
+  const when = (ms) => (typeof ms === "number" ? tn("guestLastActive", new Date(ms).toLocaleString()) : tn("guestNotSignedIn"));
+  return html`<section class="card s-guests"><h3>${tn("guestsTitle")}</h3>
+    <p class="note">${tn("guestsHint")}</p>
+    <fieldset class="s-guest-fields" disabled=${disabled}>
+      <label class="check"><input id="guestsEnabled" type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /><span>${tn("guestsEnabled")}</span></label>
+      <p class="note">${tn("guestsEnabledHint")}</p>
+      <label class="check"><input id="guestsChat" type="checkbox" checked=${f.chat} onChange=${(e) => set({ chat: e.target.checked })} /><span>${tn("guestsChat")}</span></label>
+      <p class="note">${tn("guestsChatHint")}</p>
+      ${open.map((c) => html`<div key=${c.id} class="field guest-open"><span class="label">${tn("guestsOpenFor", c.id, PLATFORMS[c.type] || c.type)}</span>
+        <p class="note">${tn("guestsOpenHint")}</p>
+        <${Names} id=${`guestsOpen-${c.id}`} all=${instances} value=${own(f.open_instances, c.id) ? f.open_instances[c.id] : []} onChange=${(list) => setList("open_instances", c.id, list)} /></div>`)}
+      <h4>${tn("guestsList")}</h4>
+      ${failed ? html`<p class="note" role="status">${tn("guestsLoadFailed")} <button type="button" class="btn btn-sm" onClick=${load}>${t("app.retry")}</button></p>`
+        : !overview ? html`<p class="note">${t("app.loading")}</p>`
+        : !guests.length ? html`<p class="note" id="guestsNone">${tn("guestsNone")}</p>`
+        : html`<ul class="guest-list">${guests.map((guest) => {
+          const k = accountKey(guest), narrowed = own(f.narrow, k) ? f.narrow[k] : undefined;
+          return html`<li key=${k} class="guest-row" data-account=${k}>
+            <div class="guest-who"><strong>${guest.name}</strong> <span class="note">${PLATFORMS[guest.platform] || guest.platform} · ${guest.userId}</span></div>
+            <div class="note guest-facts">${tn("guestFacts", guest.scope.length, guest.sessions, guest.devices)} · ${when(guest.lastSeen)}</div>
+            <div class="note guest-narrow">${narrowed === undefined ? tn("guestNotNarrowed") : tn("guestNarrowedTo", narrowed.length ? narrowed.join(", ") : tn("guestNothing"))}</div>
+            <div class="guest-actions">
+              <button type="button" class="btn btn-sm" aria-expanded=${narrowing === k ? "true" : "false"} onClick=${() => setNarrowing(narrowing === k ? null : k)}>${tn("guestNarrow")}</button>
+              ${narrowed !== undefined ? html`<button type="button" class="btn btn-sm" onClick=${() => setList("narrow", k, undefined)}>${tn("guestNarrowLift")}</button>` : null}
+              ${guest.sessions || guest.devices ? html`<button type="button" class="btn btn-sm btn-danger" onClick=${() => signOut(guest)}>${tn("guestSignOut")}</button>` : null}
+            </div>
+            ${narrowing === k ? (() => {
+              // #2104 review: only what this account can reach (narrowing never widens); a narrowed name it no longer
+              // reaches is listed to be unticked, marked.
+              const reach = guest.reach || guest.scope, away = new Set((narrowed || []).filter((n) => !reach.includes(n)));
+              return html`<div class="guest-narrow-edit"><p class="note">${tn("guestNarrowHint")}</p>
+                ${reach.length || away.size ? html`<${Names} id=${`guestNarrow-${k}`} all=${[...reach, ...away]} away=${away} value=${narrowed === undefined ? guest.scope : narrowed} onChange=${(list) => setList("narrow", k, list)} />`
+                  : html`<p class="note">${tn("guestReachesNothing")}</p>`}</div>`;
+            })() : null}
+          </li>`;
+        })}</ul>`}
+    </fieldset>
+    <div class="save-row"><button type="button" class="btn btn-primary" id="guestsReview" disabled=${disabled} onClick=${review}>${tn("guestsReview")}</button>
+      ${msg ? html`<span class="note" role="status">${msg}</span>` : null}</div>
+  </section>`;
+}

package/dist/ui/settings-strings.js

@@ -203,6 +203,9 @@ register("settings", {
     changesApplied: "Changes applied. AgEnD is reconciling affected Agents.",
     reviewChanges: "Review changes",
     backendUnavailable: "{0} (removed — choose another backend)",
+    backendNotInstalled: "not installed", backendNotSignedIn: "not signed in (use /login)", backendTooOld: "needs {0} or newer", backendUnchecked: "not checked yet",
+    modelNotListed: "current — not in this CLI's list", modelOther: "Other…", modelOtherLabel: "Model name", modelOtherPlaceholder: "a model name this CLI accepts",
+    modelNone: "— none —", inheritValue: "inherit ({0})", modelCliDefault: "the CLI's own default",
     readyApply: "Ready to apply",
     copied: "Copied",
     expectedMapping: "expected a mapping",
@@ -425,6 +428,17 @@ register("settings", {
     webTerminalTtl: "Terminal session minutes (1–20)",
     webTerminalTtlRange: "Must be a whole number from 1 to 20",
     webReadOnlyTitle: "Set in fleet.yaml",
+    guestsTitle: "Guests", guestsReview: "Review guest changes",
+    guestsHint: "People who are not admins can sign in to the web as guests: they send /web where they already chat and get a code privately. A guest sees only the agents they can already use in chat, and their messages are recognition only.",
+    guestsEnabled: "Guest sign-in", guestsEnabledHint: "Off: no one can sign in as a guest, and every guest session ends. Turning it on waits for a fleet admin's confirmation.",
+    guestsChat: "Guests may chat", guestsChatHint: "Off: guests can read their agents' chats but not send, attach, click a reply's buttons or press Cancel.",
+    guestsOpenFor: "Agents for guests of {0} ({1})", guestsOpenHint: "This connection is open to everyone, so it has no list of people: its guests reach only the agents you tick here (none by default). Adding agents waits for a fleet admin's confirmation.",
+    guestsList: "Guest accounts", guestsNone: "No guest has signed in yet.", guestsLoadFailed: "The guest list could not be loaded.",
+    guestFacts: "Agents: {0} · Sessions: {1} · Remembered browsers: {2}", guestLastActive: "Last active {0}", guestNotSignedIn: "Not signed in now",
+    guestNotNarrowed: "Reaches every agent they can use in chat.", guestNarrowedTo: "Narrowed to: {0}", guestNothing: "nothing",
+    guestNarrow: "Narrow", guestNotReachable: "(no longer reachable)", guestReachesNothing: "This account reaches no agent from chat right now, so there is nothing to narrow.", guestNarrowLift: "Remove narrowing", guestNarrowHint: "Tick what this guest may still reach. Narrowing only takes away (it applies at once); widening or removing it waits for a fleet admin's confirmation.",
+    guestSignOut: "Sign out", guestSignOutTitle: "Sign out this guest?", guestSignOutConfirm: "{0}'s guest sessions end now, their sign-in code stops working and their browsers are forgotten. They can sign in again with /web while guest sign-in is on.",
+    guestSignedOut: "{0} is signed out.", guestSignedOutNotDurable: "{0} is signed out for now, but it could not be saved: a restart may bring their sessions back.", guestSignOutFailed: "That did not work — try again.",
     webReadOnlyLead: "Read-only here: these decide what the dashboard listens on and exposes. Edit fleet.yaml, then run agend reload (web.preview_port and web.preview_origin take a restart of AgEnD).",
     notSet: "not set (default)",
     defaultsTitle: "Defaults",
@@ -697,6 +711,9 @@ register("settings", {
     changesApplied: "變更已套用，AgEnD 正在協調受影響的 Agent。",
     reviewChanges: "檢查變更",
     backendUnavailable: "{0}（已移除，請選擇其他 backend）",
+    backendNotInstalled: "未安裝", backendNotSignedIn: "未登入（請用 /login）", backendTooOld: "需要 {0} 以上版本", backendUnchecked: "尚未檢查",
+    modelNotListed: "目前使用中 — 不在這個 CLI 的清單裡", modelOther: "其他…", modelOtherLabel: "模型名稱", modelOtherPlaceholder: "這個 CLI 接受的模型名稱",
+    modelNone: "— 無 —", inheritValue: "沿用（{0}）", modelCliDefault: "CLI 自己的預設",
     readyApply: "可套用變更",
     copied: "已複製",
     expectedMapping: "預期為 mapping",
@@ -918,6 +935,17 @@ register("settings", {
     webTerminalTtl: "終端機 session 分鐘數（1–20）",
     webTerminalTtlRange: "必須是 1 到 20 之間的整數",
     webReadOnlyTitle: "在 fleet.yaml 設定",
+    guestsTitle: "訪客", guestsReview: "檢視訪客變更",
+    guestsHint: "不是管理者的人可以用訪客身分登入網頁：在他本來就能聊天的地方傳 /web，就會私下收到登入碼。訪客只會看到在聊天中本來就能用的 agent，他的訊息僅供辨識。",
+    guestsEnabled: "訪客登入", guestsEnabledHint: "關閉：沒有人能以訪客登入，所有訪客 session 都會結束。開啟需 fleet admin 確認。",
+    guestsChat: "訪客可以聊天", guestsChatHint: "關閉：訪客可以讀他的 agent 的聊天，但不能送訊息、附加檔案、按回覆的按鈕或按取消。",
+    guestsOpenFor: "{0}（{1}）訪客可用的 agent", guestsOpenHint: "這個連線對所有人開放，沒有人員名單：它的訪客只能用你在這裡勾選的 agent（預設沒有）。新增 agent 需 fleet admin 確認。",
+    guestsList: "訪客帳號", guestsNone: "還沒有訪客登入過。", guestsLoadFailed: "無法載入訪客清單。",
+    guestFacts: "agent：{0} · session：{1} · 記住的瀏覽器：{2}", guestLastActive: "最後使用 {0}", guestNotSignedIn: "目前未登入",
+    guestNotNarrowed: "可用他在聊天中能用的所有 agent。", guestNarrowedTo: "已縮小為：{0}", guestNothing: "無",
+    guestNarrow: "縮小範圍", guestNotReachable: "（已無法使用）", guestReachesNothing: "這個帳號目前在聊天中沒有能用的 agent，沒有可以縮小的範圍。", guestNarrowLift: "取消縮小", guestNarrowHint: "勾選這位訪客仍可使用的 agent。縮小只會拿走權限（立即生效）；放寬或取消縮小需 fleet admin 確認。",
+    guestSignOut: "登出", guestSignOutTitle: "登出這位訪客？", guestSignOutConfirm: "{0} 的訪客 session 會立即結束，登入碼失效，記住的瀏覽器也會被忘記。訪客登入開啟期間，他可以再傳 /web 登入。",
+    guestSignedOut: "已登出 {0}。", guestSignedOutNotDurable: "已暫時登出 {0}，但無法保存：重新啟動後他的 session 可能會恢復。", guestSignOutFailed: "沒有成功，請再試一次。",
     webReadOnlyLead: "這裡僅供檢視：這些設定決定儀表板監聽和公開的內容。請編輯 fleet.yaml 後執行 agend reload（web.preview_port 與 web.preview_origin 需要重新啟動 AgEnD）。",
     notSet: "未設定（預設）",
     defaultsTitle: "預設值",

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

@@ -74,6 +74,7 @@ register("app", {
     hydrating: "Loading what is open now…", hydrateFailed: "Could not load what is open now (prompts, ticks).",
     skip: "Skip to the conversation", loadFailed: "This could not be loaded.", retry: "Try again", loading: "Loading…",
     noInstances: "No instances yet", noInstancesHint: "Create one to start chatting.",
+    guestChip: "Guest", guestAs: "Guest · {0}", guestAsOn: "Guest · {0} ({1})", guestHint: "You see only the agents you can already use in chat.",
     session: "Session", signIn: "Sign in", signedIn: "Signed in", signedOut: "Not signed in", thisDevice: "This device", devicePrefs: "Theme and language",
     lastActive: "active {0}", justNow: "just now", minAgo: "{0} min ago", hrAgo: "{0} h ago", signOut: "Sign out",
     signOutAll: "Sign out everywhere", devices: "Signed-in devices", expires: "Ends by {0} at the latest, or after {1} unused",
@@ -106,6 +107,7 @@ register("app", {
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",
     skip: "跳到對話", loadFailed: "無法載入。", retry: "再試一次", loading: "載入中…",
     noInstances: "還沒有 instance", noInstancesHint: "建立一個就能開始聊天。",
+    guestChip: "訪客", guestAs: "訪客 · {0}", guestAsOn: "訪客 · {0}（{1}）", guestHint: "你只會看到在聊天中本來就能用的 agent。",
     session: "登入狀態", signIn: "登入", signedIn: "已登入", signedOut: "尚未登入", thisDevice: "這台裝置", devicePrefs: "主題與語言",
     lastActive: "{0}活動", justNow: "剛剛", minAgo: "{0} 分鐘前", hrAgo: "{0} 小時前", signOut: "登出",
     signOutAll: "全部登出", devices: "已登入的裝置", expires: "最晚 {0} 結束；閒置 {1} 也會結束",

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

@@ -18,7 +18,7 @@
 // - The status frame's prefs_rev: another device changed something; the host's values are read again and applied. A
 //   revision counts as seen only once its read succeeded (a failed one is tried again, at most every few seconds).
 import { deviceLanguage, lang, setLang } from "./app-i18n.js";
-import { appStore } from "./app-store.js";
+import { appStore, guestPage } from "./app-store.js";
 
 const SYNCED_FLAG = "agend_prefs_synced";
 const RETRY_MS = 5000;
@@ -88,9 +88,9 @@ if (host) {
   }
 }
 
-/** This page may change the host's preferences: the signed-in app, not over the public link. */
+/** This page may change the host's preferences: the signed-in app, not over the public link, not a guest's (#1920). */
 export function prefsWritable() {
-  return !!initial && !(typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1");
+  return !!initial && !guestPage() && !(typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1");
 }
 /**
  * The value in force for a key, in memory — never only in this browser's storage (a full storage must not bring back

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

@@ -7,7 +7,7 @@ import { Toasts } from "./ui-toast.js";
 import { ConfirmHost } from "./ui-confirm.js";
 import { ColorDialogHost } from "./identity-color.js";
 import { t, lang, setLang, onLang } from "./app-i18n.js";
-import { appStore, createStore, useStore } from "./app-store.js";
+import { appStore, createStore, guestBadge, guestPage, useStore } from "./app-store.js";
 import { navStore } from "./app-nav.js";
 import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath, fleetPath } from "./app-route.js";
 import { SessionMenu } from "./app-session.js";
@@ -291,6 +291,22 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       <${SidebarResize} />
     </aside>`;
   }
+  // #1920 phase 3: a guest's sidebar — its own agents to pick from, who it is signed in as, and its session; no fleet,
+  // Needs you, View, Settings, new agent or widget (each is an admin's, and the server refuses a guest them anyway).
+  if (guestPage()) {
+    return html`<aside id="sidebar" class="sidebar" aria-label=${t("app.menu")}>
+      <div class="side-head" data-trust="navigation">
+        <a class="brand" href="/ui" onClick=${closeDrawer}>${t("app.brand")}</a>
+        <button type="button" class="icon-btn side-collapse" onClick=${toggleSidebar} aria-label=${narrow() ? t("app.closeMenu") : t("app.collapse")} title=${narrow() ? t("app.closeMenu") : t("app.collapse")} aria-controls="sidebar"><${Icon} name="sidebar" /></button>
+      </div>
+      <${InstanceNav} route=${route} items=${app.instances} loaded=${app.ready !== false} exec=${app.exec} awaiting=${app.awaiting} onPick=${closeDrawer} />
+      <div class="side-foot" data-trust="navigation">
+        <${GuestChip} />
+        <${SessionMenu} />
+      </div>
+      <${SidebarResize} />
+    </aside>`;
+  }
   // #1675: the whole fleet, on its Org chart (#1389), from anywhere — top left, so at the top of a phone's drawer too. The
   // "Fleet" row under it goes to the open instance's Details (#1523 N2); this one is the Fleet panel, any of its tabs.
   const onFleet = !!route && route.panel === "fleet";
@@ -319,6 +335,17 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
   </aside>`;
 }
 
+/** #1920 phase 3: "Guest · <name> (<platform>)" — who this guest's page is signed in as; what a guest sees, in its title. */
+const PLATFORM_NAMES = { discord: "Discord", telegram: "Telegram" };
+function GuestChip() {
+  const { name, platform } = guestBadge();
+  const where = PLATFORM_NAMES[platform] || platform;
+  const label = name ? (where ? t("app.guestAsOn", name, where) : t("app.guestAs", name)) : t("app.guestChip");
+  // Inside .side-foot (a marked, stock-trusted element): no trust marker of its own — effect-stock-trust's closed inventory
+  // refuses any element it does not know, which would hide a guest's static effect posters (#2101 review).
+  return html`<p class="guest-chip" title=${t("app.guestHint")}><${Icon} name="user" size=${14} /><span class="grow">${label}</span></p>`;
+}
+
 /** #1629 r4-4: the person's own sidebar widget (their synced preference), with the fleet's counts. */
 function SidebarWidget({ app }) {
   useStore(sidebarWidgetStore);
@@ -406,6 +433,8 @@ function BottomTabs({ route, viewOnly }) {
       ${tab(signInHref(), "user", t("app.signIn"), false)}
     </nav>`;
   }
+  // #1920: a guest has only its chats (the drawer lists them): no tabs to switch between.
+  if (guestPage()) return null;
   return html`<nav data-trust="navigation" class="tabs" aria-label=${t("app.menu")}>
     ${tab(chatHref, "chat", t("app.chat"), route && route.panel === "chat", anyAwaiting)}
     ${tab(NEEDS_PATH, "inbox", t("app.needsTab"), route && route.panel === "needs", (app.needs || []).length, t("app.needsCount", (app.needs || []).length))}
@@ -530,23 +559,24 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     vv.addEventListener("resize", onResize);
     return () => vv.removeEventListener("resize", onResize);
   }, []);
-  const cls = ["shell", shell.collapsed ? "sb-collapsed" : "", shell.drawer ? "sb-open" : "", shell.keyboard ? "kb-open" : ""].filter(Boolean).join(" ");
+  const guest = guestPage();             // #1920: a guest's page — no operations, usage, pending changes or owner CSS
+  const cls = ["shell", shell.collapsed ? "sb-collapsed" : "", shell.drawer ? "sb-open" : "", shell.keyboard ? "kb-open" : "", guest ? "guest" : ""].filter(Boolean).join(" ");
   return html`<div class=${cls}>
     <a data-trust="navigation" class="skip" href="#main">${t("app.skip")}</a>
     <${Sidebar} route=${nav.route} onNewInstance=${onNewInstance} viewOnly=${viewOnly} />
     <div class="scrim" onClick=${closeDrawer} aria-hidden="true"></div>
     <main id="main" class="main" tabindex="-1" inert=${shell.drawer && narrow() ? true : undefined}>
       <${ConnectionLine} />
-      ${viewOnly ? null : html`<${OperationLine} route=${nav.route} />`}
+      ${viewOnly || guest ? null : html`<${OperationLine} route=${nav.route} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
-    <${UsageRail} route=${nav.route} />
+    ${guest ? null : html`<${UsageRail} route=${nav.route} />`}
     <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
     ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
-    ${viewOnly || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}
+    ${viewOnly || guest || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}
     <${ConfirmHost} />
     <${ColorDialogHost} />
-    ${viewOnly ? null : html`<${OwnerCssKeepBar} />`}
+    ${viewOnly || guest ? null : html`<${OwnerCssKeepBar} />`}
     <${Toasts} />
   </div>`;
 }