@songsid/agend 2.2.1 → 2.2.6

package/dist/ui/settings-appearance.js

@@ -0,0 +1,349 @@
+// #1629 r4 §3: Settings → Appearance — the person's own custom CSS (owner CSS): the editor, keep-or-revert, earlier
+// versions, the pictures and fonts it may name, and this device's off switch. Settings itself is always drawn stock
+// (owner-css.js removes the link here), so a stylesheet that hides things can always be fixed from this page.
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { ModsCard } from "./settings-mods.js";
+import { EffectsCard } from "./settings-effects.js";
+import { Icon } from "/assets/ui-icons.js";
+import { toast } from "/assets/ui-toast.js";
+import { ownerCssOffHere, ownerCssTrial, safeMode, setOwnerCssActive, setOwnerCssOffHere, startOwnerCssTrial } from "/assets/owner-css.js";
+import { setThemesShown, themesStore } from "/assets/app-themes.js";
+import { followsReducedMotion, onMotionChange, setFollowsReducedMotion } from "/assets/fx-motion.js";
+import { CARD_SIZES, cardSizeDefault, cardSizeStore, setCardSizeDefault } from "/assets/identity-card.js";
+import { AgentWidget, checkWidget, fleetBinds, setSidebarWidget, sidebarWidgetRaw, sidebarWidgetStore, widgetProblem } from "/assets/agent-widget.js";
+import { confirmedWrite } from "./settings-confirm.js";
+import { savePref } from "/assets/app-prefs.js";
+import { confirmDialog } from "/assets/ui-confirm.js";
+import { colorsOff, defaultPlaces, identityClasses, identityOf, PLACEMENTS, paintIdentity, setColorsOff, setDefaultPlaces, useIdentityColors } from "/assets/identity-color.js";
+import { CardTitle } from "./settings-learn.js";
+import "./settings-strings.js";
+
+const tn = (k, ...v) => t(`settings.${k}`, ...v);
+const short = (sha) => (sha ? sha.slice(0, 8) : "");
+const kib = (n) => `${Math.max(1, Math.round(n / 1024))} KiB`;
+
+async function call(path, init) {
+  let res;
+  try { res = await fetch(path, { credentials: "same-origin", ...init }); } catch { return { ok: false, status: 0, body: null }; }
+  let body = null;
+  try { body = await res.json(); } catch { /* not JSON */ }
+  return { ok: res.ok, status: res.status, body };
+}
+const postJson = (path, body) => call(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+
+/** Why the host refused a text, in the person's words. */
+function refusal(body) {
+  const problem = body && body.error, detail = body && body.detail;
+  const known = ["at_rule", "url", "unknown_asset", "function", "property", "script_scheme", "too_large", "malformed", "nul", "unserialisable",
+    "asset_type", "asset_unreadable", "asset_quota", "asset_in_use", "owner_css_read_only", "owner_css_needs_a_signed_in_person"];
+  return known.includes(problem) ? tn(`cssError_${problem}`, detail || "") : tn("cssError_other", problem || "?");
+}
+
+export function AppearanceSection() {
+  const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
+  if (publicLink) return html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>`;
+  const group = (key) => html`<h2 class="s-ap-group">${tn(key)}</h2>`;
+  return html`${group("groupLook")}<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} />
+    ${group("groupLayout")}<${SidebarWidgetCard} />
+    ${group("groupCss")}<${OwnerCssCard} /><${DeviceCard} />
+    ${group("groupMods")}<${ModsCard} /><${EffectsCard} />
+    ${group("groupAdvanced")}<${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+}
+
+/** #2056 B: a sample sidebar row in the host's default colour places, so the choice is seen rather than described. */
+const SAMPLE = { color: { person: "preset:teal" } };
+function ColorSample({ places, off }) {
+  const id = identityOf(SAMPLE, { hostDefault: places, off });
+  return html`<div class="idc-preview s-colors-sample" aria-hidden="true"><span class=${`inst v-inst ${identityClasses(id)}`} ref=${(el) => paintIdentity(el, id)}>
+    <span class="av"><span class="av-text">A</span></span><span class="inst-text"><span class="inst-name">${tn("colorSample")}</span></span></span></div>`;
+}
+
+/**
+ * #1958: identity colours on this host — where they show for an instance nobody chose for (#2056: name, bar and
+ * ring unless changed), and a switch that turns them off everywhere while every pick is kept.
+ */
+function IdentityColorCard() {
+  useIdentityColors();
+  const places = defaultPlaces(), off = colorsOff();
+  const toggle = (p) => setDefaultPlaces(places.includes(p) ? places.filter((x) => x !== p) : [...places, p]);
+  return html`<section class="card s-appearance s-synced s-colors"><${CardTitle} title=${tn("colorTitle")} topic="colors" />
+    <p class="sub">${tn("colorLead")}</p>
+    <div class="s-colors-row">
+      <fieldset class="idc-places" disabled=${off}><legend>${tn("colorPlaces")}</legend>
+        ${PLACEMENTS.map((p) => html`<label key=${p} class="check"><input type="checkbox" checked=${places.includes(p)} onChange=${() => toggle(p)} /> ${t(`color.place_${p}`)}</label>`)}
+      </fieldset>
+      <${ColorSample} places=${places} off=${off} />
+    </div>
+    <label class="check"><input type="checkbox" class="s-colors-off" checked=${off} onChange=${(e) => setColorsOff(e.target.checked)} /> <span>${tn("colorOff")}</span></label>
+    <p class="sub">${tn("colorOffLead")}</p>
+  </section>`;
+}
+
+/**
+ * #1958 decision 5: Restore defaults — the host's appearance settings back to their defaults after a confirm that says
+ * what it resets; this person's custom CSS turned off (its versions stay). Not settings, so never touched: the colours
+ * people picked per instance, installed mods, uploaded effects and the fleet's card limits.
+ */
+export async function restoreAppearanceDefaults() {
+  setThemesShown(true);
+  setFollowsReducedMotion(false);
+  setCardSizeDefault("m");
+  savePref("card.sizeByInstance", null);
+  setSidebarWidget(null);
+  setDefaultPlaces(null);
+  setColorsOff(false);
+  setOwnerCssOffHere(false);
+  const r = await postJson("/ui/owner-css/restore", { sha: null });
+  return r && r.error ? { ok: false, error: r.error } : { ok: true };
+}
+function RestoreDefaultsCard() {
+  const [busy, setBusy] = useState(false);
+  async function go() {
+    if (!(await confirmDialog({ title: tn("restoreTitle"), message: tn("restoreConfirm"), confirmLabel: tn("restoreGo"), danger: true }))) return;
+    setBusy(true);
+    const r = await restoreAppearanceDefaults();
+    setBusy(false);
+    if (r.ok) toast(tn("restoreDone")); else toast(tn("restoreCssFailed", r.error), false);
+  }
+  return html`<section class="card s-appearance s-restore"><${CardTitle} title=${tn("restoreTitle")} topic="restore" />
+    <p class="sub">${tn("restoreLead")}</p>
+    <button type="button" class="btn" disabled=${busy} onClick=${go}>${tn("restoreTitle")}</button>
+  </section>`;
+}
+
+/** #1629 r4.1 Q3 (a): every identity card's size on this person's screens (a card's own control sets it apart). */
+function CardSizeCard() {
+  useStore(cardSizeStore);
+  const size = cardSizeDefault();
+  return html`<section class="card s-appearance s-synced"><${CardTitle} title=${tn("cardSizeTitle")} topic="cards" />
+    <div class="card-size" role="group" aria-label=${tn("cardSizeTitle")}>
+      ${CARD_SIZES.map((s) => html`<button key=${s} type="button" class=${`seg-item${s === size ? " active" : ""}`} aria-pressed=${s === size ? "true" : "false"}
+        onClick=${() => setCardSizeDefault(s)}>${t(`card.size${s.toUpperCase()}Name`)}</button>`)}
+    </div>
+    <p class="sub">${tn("cardSizeLead")}</p>
+  </section>`;
+}
+
+const LIMIT_FIELDS = [["portrait", "max_width"], ["portrait", "max_height"], ["portrait", "max_kib"], ["banner", "max_width"], ["banner", "max_height"], ["banner", "max_kib"],
+  ["instance_quota", "files"], ["instance_quota", "mib"]];
+/**
+ * #1629 r4.1 Q3 (b): the identity card's upload limits (fleet.yaml web.appearance). Each field shows what is in force
+ * when it differs from what is written (a value beyond its bound is clamped). A lower limit applies at once; a higher
+ * one waits for a fleet admin's confirmation (the server decides). Stored pictures are never touched.
+ */
+function CardLimitsCard() {
+  const [view, setView] = useState(null);
+  const [draft, setDraft] = useState({});
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState(null);
+  const load = async () => {
+    const r = await call("/api/settings/fleet/appearance");
+    // Only an answer of the expected shape is drawn: every group's in-force values, defaults and bounds.
+    const ok = r.ok && r.body && ["portrait", "banner", "instance_quota"].every((g) => r.body.effective && r.body.effective[g] && r.body.defaults && r.body.defaults[g] && r.body.bounds && r.body.bounds[g]);
+    if (!ok) { setView({ error: true }); return; }
+    setView(r.body);
+    const d = {};
+    for (const [g, k] of LIMIT_FIELDS) { const v = r.body.configured && r.body.configured[g] && r.body.configured[g][k]; d[`${g}.${k}`] = typeof v === "number" ? String(v) : ""; }
+    setDraft(d);
+  };
+  useEffect(() => { load(); }, []);
+  if (!view) return null;
+  if (view.error) return html`<section class="card s-appearance"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" /><p class="sub">${tn("cardLimitsUnavailable")}</p></section>`;
+  const configured = (g, k) => (view.configured && view.configured[g] && typeof view.configured[g][k] === "number" ? view.configured[g][k] : null);
+  const save = async () => {
+    const body = {};
+    for (const [g, k] of LIMIT_FIELDS) {
+      const raw = (draft[`${g}.${k}`] || "").trim();
+      const next = raw === "" ? null : Number(raw);
+      if (next !== null && !(Number.isInteger(next) && next > 0)) { setMsg(tn("cardLimitsWhole")); return; }
+      if (next !== configured(g, k)) (body[g] ??= {})[k] = next;
+    }
+    if (!Object.keys(body).length) { setMsg(tn("cardLimitsNoChange")); return; }
+    setBusy(true); setMsg(null);
+    const r = await confirmedWrite("/api/settings/fleet/appearance", { method: "PUT", body, label: tn("cardLimitsTitle") });
+    setBusy(false);
+    if (r.ok) { setMsg(tn("cardLimitsSaved")); load(); } else setMsg(tn("cardLimitsFailed", (r.body && r.body.error) || r.status));
+  };
+  const warnings = Array.isArray(view.warnings) ? view.warnings : [];
+  return html`<section class="card s-appearance"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" />
+    <p class="sub">${tn("cardLimitsLead")}</p>
+    <fieldset class="form" disabled=${busy}>
+      ${["portrait", "banner", "instance_quota"].map((g) => html`<div key=${g} class="grid3">
+        ${LIMIT_FIELDS.filter(([gg]) => gg === g).map(([, k]) => {
+          const id = `cardLimit-${g}-${k}`, eff = view.effective[g][k], conf = configured(g, k);
+          return html`<div key=${k} class="field"><label for=${id}>${tn(`cardLimit_${g}_${k}`)}</label>
+            <input id=${id} type="number" min="1" step="1" placeholder=${String(view.defaults[g][k])} value=${draft[`${g}.${k}`] || ""}
+              onInput=${(e) => setDraft({ ...draft, [`${g}.${k}`]: e.target.value })} />
+            ${conf !== null && conf !== eff ? html`<span class="note">${tn("cardLimitInForce", eff, view.bounds[g][k][0], view.bounds[g][k][1])}</span>` : null}</div>`;
+        })}
+      </div>`)}
+    </fieldset>
+    ${warnings.length ? html`<ul class="note s-limit-warnings">${warnings.map((w, i) => html`<li key=${i}><code>${w.path}</code>: ${w.message}</li>`)}</ul>` : null}
+    <div class="save-row"><button type="button" class="btn btn-primary" disabled=${busy} onClick=${save}>${tn("cardLimitsSave")}</button>
+      ${msg ? html`<span class="note" role="status">${msg}</span>` : null}</div>
+  </section>`;
+}
+
+/** #1629 r2 (d): whether this person's screens show agents' themes (and, as they come, effects) — synced. */
+function ThemesCard() {
+  const s = useStore(themesStore);
+  // #2117: this device's own switch (not synced): effects play unless it follows the system's reduced-motion setting.
+  const [follow, setFollow] = useState(followsReducedMotion);
+  useEffect(() => onMotionChange(() => setFollow(followsReducedMotion())), []);
+  return html`<section class="card s-appearance s-synced"><${CardTitle} title=${tn("themesTitle")} topic="themes" />
+    <label class="check"><input type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
+      <span>${tn("themesShow")}</span></label>
+    <p class="sub">${safeMode() ? tn("themesSafeMode") : tn("themesShowLead")}</p>
+    <label class="check"><input type="checkbox" id="fx-follow-reduced-motion" checked=${follow} onChange=${(e) => setFollowsReducedMotion(e.target.checked)} />
+      <span>${tn("themesFollowMotion")}</span></label>
+    <p class="sub">${tn("themesFollowMotionLead")}</p>
+  </section>`;
+}
+
+/** An example to start from: the fleet's counts, as a person's sidebar widget may show them. */
+export const SIDEBAR_WIDGET_EXAMPLE = {
+  spec: { v: 1, title: "Fleet", items: [
+    { type: "stat", label: "Working", bind: "fleet.working" },
+    { type: "stat", label: "Needs you", bind: "fleet.needs_you" },
+    { type: "stat", label: "Idle", bind: "fleet.idle" },
+    { type: "stat", label: "Stopped", bind: "fleet.stopped" },
+  ] },
+  data: {},
+};
+/**
+ * #1629 r4-4: the person's own sidebar widget — a declarative spec and its values, as JSON; drawn under the instance
+ * list by the page's own components, with the fleet's counts as the only live values. Synced like the other choices.
+ */
+function SidebarWidgetCard() {
+  useStore(sidebarWidgetStore);
+  const app = useStore(appStore);
+  const saved = sidebarWidgetRaw();
+  const [text, setText] = useState(() => (saved ? JSON.stringify(saved, null, 2) : ""));
+  const [error, setError] = useState("");
+  let parsed = null, problem = "";
+  if (text.trim()) {
+    try { parsed = JSON.parse(text); problem = widgetProblem("sidebar", parsed) || ""; } catch { problem = tn("widgetNotJson"); }
+  }
+  const preview = parsed && !problem ? checkWidget("sidebar", parsed) : null;
+  const save = () => {
+    if (!parsed || problem) { setError(problem || tn("widgetNotJson")); return; }
+    setError("");
+    setSidebarWidget(parsed);
+    toast(tn("widgetSaved"));
+  };
+  const remove = () => { setSidebarWidget(null); setText(""); setError(""); toast(tn("widgetRemoved")); };
+  return html`<section class="card s-appearance s-synced s-widget"><${CardTitle} title=${tn("widgetTitle")} topic="widgets" />
+    <p class="sub">${tn("widgetLead")}</p>
+    <label class="field"><span class="sr-only">${tn("widgetTitle")}</span>
+      <textarea class="s-widget-text" rows="10" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text}
+        onInput=${(e) => { setText(e.target.value); setError(""); }}></textarea></label>
+    ${error || problem ? html`<p class="err" role="alert">${error || problem}</p>` : null}
+    ${preview ? html`<div class="s-widget-preview"><${AgentWidget} slot="sidebar" widget=${preview} binds=${fleetBinds(app.instances, app.exec, app.awaiting)} /></div>` : null}
+    <div class="s-widget-actions">
+      <button type="button" class="btn btn-primary" disabled=${!parsed || !!problem} onClick=${save}><${Icon} name="check" size=${16} />${tn("widgetSave")}</button>
+      ${!text.trim() ? html`<button type="button" class="btn" onClick=${() => setText(JSON.stringify(SIDEBAR_WIDGET_EXAMPLE, null, 2))}>${tn("widgetExample")}</button>` : null}
+      ${saved ? html`<button type="button" class="btn" onClick=${remove}>${tn("widgetRemove")}</button>` : null}
+    </div>
+  </section>`;
+}
+
+function OwnerCssCard() {
+  const [state, setState] = useState(null);
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const trial = useStore(ownerCssTrial);
+  const file = useRef(null);
+  const load = async (opts = {}) => {
+    const r = await call("/ui/owner-css/state");
+    if (!r.ok || !r.body) { setState({ failed: true }); return; }
+    setState(r.body);
+    if (opts.text !== false) setText(r.body.text || "");
+  };
+  useEffect(() => { load(); }, []);
+  // A trial answered (kept or reverted) changes what is in force: read it again, keeping the editor's text.
+  useEffect(() => { if (state) load({ text: false }); }, [trial && trial.sha]);
+  if (!state) return html`<section class="card s-appearance"><${CardTitle} title=${tn("cssTitle")} topic="css" /><p class="sub">…</p></section>`;
+  if (state.failed) return html`<section class="card s-appearance"><${CardTitle} title=${tn("cssTitle")} topic="css" /><p class="err">${tn("cssLoadFailed")}</p></section>`;
+
+  const save = async () => {
+    setBusy(true); setError("");
+    const r = await postJson("/ui/owner-css", { text });
+    setBusy(false);
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    startOwnerCssTrial(r.body.trial, r.body.sha, r.body.previous);
+    toast(tn("cssTrying"));
+    load({ text: false });
+  };
+  const restore = async (sha) => {
+    setBusy(true); setError("");
+    const r = await postJson("/ui/owner-css/restore", { sha });
+    setBusy(false);
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    setOwnerCssActive(r.body.active);
+    load();
+  };
+  const addAsset = async () => {
+    const f = file.current && file.current.files && file.current.files[0];
+    if (!f) return;
+    setBusy(true); setError("");
+    const r = await call("/ui/owner-css/asset", { method: "POST", headers: { "Content-Type": "application/octet-stream" }, body: f });
+    setBusy(false);
+    if (file.current) file.current.value = "";
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    load({ text: false });
+  };
+  const removeAsset = async (id) => {
+    setBusy(true); setError("");
+    const r = await call(`/ui/owner-css/asset/${id}`, { method: "DELETE" });
+    setBusy(false);
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    load({ text: false });
+  };
+  const copyRef = (id) => {
+    const ref = `url("asset:${id}")`;
+    try { navigator.clipboard.writeText(ref).then(() => toast(tn("cssCopied", ref)), () => toast(ref)); } catch { toast(ref); }
+  };
+  const inForce = state.active
+    ? (state.pending ? tn("cssOnTrial", short(state.active)) : tn("cssInForce", short(state.active)))
+    : tn("cssNone");
+  const assetBytes = state.assets.reduce((n, a) => n + a.bytes, 0);
+  return html`<section class="card s-appearance s-owner-css"><${CardTitle} title=${tn("cssTitle")} topic="css" />
+    <p class="sub">${tn("cssLead")}</p>
+    <p class="s-css-status" role="status">${inForce}</p>
+    <label class="field"><span class="sr-only">${tn("cssTitle")}</span>
+      <textarea class="s-css-text" rows="14" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text} disabled=${busy}
+        onInput=${(e) => setText(e.target.value)}></textarea></label>
+    ${error ? html`<p class="err" role="alert">${error}</p>` : null}
+    <div class="s-css-actions">
+      <button type="button" class="btn btn-primary" disabled=${busy || !text.trim()} onClick=${save}><${Icon} name="check" size=${16} />${tn("cssSave")}</button>
+      ${state.active ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => restore(null)}>${tn("cssOff")}</button>` : null}
+    </div>
+    ${state.versions.length ? html`<details class="s-css-versions"><summary>${tn("cssVersions", state.versions.length)}</summary>
+      <ul class="s-css-list">${state.versions.map((v) => html`<li key=${v.sha}>
+        <code>${short(v.sha)}</code><span class="muted">${new Date(v.at).toLocaleString()} · ${kib(v.bytes)}</span>
+        ${v.sha === state.active ? html`<span class="pill">${tn("cssCurrent")}</span>`
+          : html`<button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => restore(v.sha)}>${tn("cssRestore")}</button>`}
+      </li>`)}</ul></details>` : null}
+    <h4>${tn("cssAssets")}</h4>
+    <p class="sub">${tn("cssAssetsLead", state.assets.length, state.limits.maxAssets, kib(assetBytes))}</p>
+    ${state.assets.length ? html`<ul class="s-css-list">${state.assets.map((a) => html`<li key=${a.id}>
+      <code>${a.id}</code><span class="muted">${a.kind} · ${kib(a.bytes)}</span>
+      <button type="button" class="btn btn-sm" onClick=${() => copyRef(a.id)}>${tn("cssAssetCopy")}</button>
+      <button type="button" class="btn btn-sm btn-ghost" disabled=${busy} onClick=${() => removeAsset(a.id)}>${tn("cssAssetRemove")}</button>
+    </li>`)}</ul>` : null}
+    <label class="field"><span>${tn("cssAssetAdd")}</span>
+      <input ref=${file} type="file" accept="image/png,image/webp,image/jpeg,image/gif,font/woff2,.woff2" disabled=${busy} onChange=${addAsset} /></label>
+  </section>`;
+}
+
+function DeviceCard() {
+  const [off, setOff] = useState(ownerCssOffHere());
+  return html`<section class="card s-appearance s-local"><h3>${tn("cssDeviceTitle")}</h3>
+    <label class="check"><input type="checkbox" checked=${off} onChange=${(e) => { setOwnerCssOffHere(e.target.checked); setOff(ownerCssOffHere()); }} />
+      <span>${tn("cssDeviceOff")}</span></label>
+    <p class="sub">${tn("cssSafe")}</p>
+  </section>`;
+}

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,11 +13,13 @@ 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,
   chLabel, hasOwn, impactOf, nonNegative, nonNegativeInteger, positive, replyGuardSupported, sameValue, visibilityDefault,
-  webEchoIsGroup, worstImpact,
+  classicWebEchoEffective, worstImpact,
 } from "./settings-model.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
@@ -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>
@@ -557,7 +587,7 @@ export function ClassicDialog({ room, ctx, onClose }) {
     backend: c.backend || inherited.backend, model: c.model || "",
     auto_pause_after: String(c.auto_pause_after ?? inherited.auto_pause_after), tool_progress: c.tool_progress ?? inherited.tool_progress,
     reply_completion_guard: c.reply_completion_guard ?? inherited.reply_completion_guard,
-    collab: !!c.collab, web_echo: !!c.web_echo, context_lines: String(c.context_lines ?? cd.context_lines ?? 5),
+    collab: !!c.collab, web_echo: classicWebEchoEffective(c, fleet), context_lines: String(c.context_lines ?? cd.context_lines ?? 5),
     inherit: { auto_pause_after: !hasOwn(c, "auto_pause_after"), tool_progress: !hasOwn(c, "tool_progress"), reply_completion_guard: !hasOwn(c, "reply_completion_guard") },
   }));
   const set = (k) => (v) => setF((x) => ({ ...x, [k]: v }));
@@ -580,12 +610,9 @@ export function ClassicDialog({ room, ctx, onClose }) {
       auto_pause_after: hasOwn(c, "auto_pause_after") ? c.auto_pause_after : null,
       tool_progress: hasOwn(c, "tool_progress") ? c.tool_progress : null,
       reply_completion_guard: hasOwn(c, "reply_completion_guard") ? c.reply_completion_guard : null,
-      collab: !!c.collab, context_lines: c.context_lines ?? cd.context_lines ?? 5, web_echo: !!c.web_echo,
+      collab: !!c.collab, context_lines: c.context_lines ?? cd.context_lines ?? 5, web_echo: classicWebEchoEffective(c, fleet),
     });
     if (!Object.keys(patch).length) { onClose(); return; }
-    // #1320: turning web echo on for a group posts every web message where all its members can read it.
-    if (patch.web_echo === true && !c.web_echo && webEchoIsGroup(c.channelId)
-      && !(await ask(tn("webEchoGroupConfirm"), { confirmLabel: tn("webEchoEnable") }))) return;
     if (!lease.current()) return;
     ctx.stageClassic(c, patch);
     onClose();
@@ -594,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}