@songsid/agend 2.3.0-beta.1 → 2.3.0-beta.11

package/dist/ui/panel-settings.js

@@ -20,6 +20,7 @@ import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { Menu } from "/assets/ui-menu.js";
 import { toast } from "/assets/ui-toast.js";
+import { GroupMark, groupLabel, groupOf as navGroupOf, modelText } from "/assets/instance-nav.js";
 import "./settings-strings.js";
 import { api, attach, confirmedWrite, newKey } from "./settings-confirm.js";
 import { dismissOperation, operationActive, restartFleet, startOperation, takeLeftover } from "./settings-apply.js";
@@ -30,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";
@@ -42,8 +43,14 @@ 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";
+import { WebAuthorityCard } from "./settings-web-authority.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
+/** What a refused change says to a person: the server's code in words (the code itself only for one not listed). */
+const APPLY_ERRORS = new Set(["unsupported_sensitive_effect", "confirmation_diff_too_large", "session_required", "admin_required", "settings_changed",
+  "request_no_longer_current", "too_many_pending_changes", "fleet_unavailable", "invalid_settings_effect", "settings_confirmation_unavailable", "failed"]);
+export const applyErrorText = (code) => (APPLY_ERRORS.has(code) ? tn(`applyError_${code}`) : tn("applyErrorOther", String(code)));
 const ICONS = { device: "user", appearance: "palette", agents: "bot", bots: "plug", classic: "room", general: "sliders", web: "globe", advanced: "code" };
 const RELEASES = "https://github.com/songsid/AgEnD/releases";
 
@@ -87,7 +94,7 @@ async function loadLive(lease) {
   if (!lease.current()) return null;
   const live = {}, classicLive = {};
   if (f.ok && f.body && Array.isArray(f.body.instances)) for (const i of f.body.instances) {
-    live[i.name] = { status: i.status, state: i.state, backend: i.backend, model: i.model, model_display: i.model_display, effort: i.effort, effort_supported: i.effort_supported };
+    live[i.name] = { status: i.status, state: i.state, backend: i.backend, model: i.model, model_display: modelText(i, i.model_display), effort: i.effort, effort_supported: i.effort_supported };
     if (i.classic) classicLive[i.name] = { status: i.status, state: i.state };
   }
   // /api/fleet carries live state for ClassicBot rooms; the profiles are the fallback for one not listed there yet.
@@ -457,7 +464,9 @@ function Agents({ ctx, search, openDialog }) {
   const [collapsed, setCollapsed] = useState(() => new Set());
   const [busy, setBusy] = useState(() => new Map());     // name → the action under way
   const chs = channelsOf(ctx.fleet);
-  const groups = groupAgents(insts, ctx.live, search);
+  // #2172: the sidebar's grouping — an agent in a team under its team, else under its first tag.
+  const teamsOf = (name) => Object.keys(ctx.fleet.teams || {}).filter((t) => Array.isArray(ctx.fleet.teams[t]?.members) && ctx.fleet.teams[t].members.includes(name));
+  const groups = groupAgents(insts, ctx.live, search, (name) => navGroupOf({ tags: insts[name]?.tags, teams: teamsOf(name) }), groupLabel);
   // One action per agent at a time: the whole row is off (Settings and ⋯ too), and the pressed button says it is working.
   const run = async (name, action, work) => {
     if (busy.has(name)) return;
@@ -473,7 +482,7 @@ function Agents({ ctx, search, openDialog }) {
     return html`<section key=${group} class="s-group">
       <button type="button" class="s-group-head" aria-expanded=${folded ? "false" : "true"}
         onClick=${() => setCollapsed((c) => { const n = new Set(c); n.has(group) ? n.delete(group) : n.add(group); return n; })}>
-        <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${group}</span><span class="count">${names.length}</span></button>
+        <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><${GroupMark} group=${group} /><span class="grow">${groupLabel(group)}</span><span class="count">${names.length}</span></button>
       ${folded ? null : names.map((name) => {
         const inst = insts[name];
         const st = (ctx.live[name] && ctx.live[name].status) || "stopped";
@@ -706,7 +715,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} />
@@ -769,17 +779,20 @@ export const WEB_READ_ONLY = [
 function WebSection({ ctx, staged }) {
   const { schema } = ctx;
   const web = ctx.fleet.web || {}, local = (web.session && web.session.local) || {}, term = ctx.fleet.web_terminal || {};
+  // Over the public link the fields read only; the Guests and Web authority cards are not offered (the server never
+  // serves their reads there).
   const overPublicLink = globalThis.document?.body?.dataset?.publicLink === "1";
   const original = useMemo(() => ({
     echo: web.echo_to_channel ?? true,
     log: web.log_tab === true,                                                  // #1218: off by default
+    usagePub: web.usage_report_on_public_link === true,                         // #2122: off by default
     pub: { allow_public: (web.public_link && web.public_link.allow_public) ?? true, ttl_minutes: (web.public_link && web.public_link.ttl_minutes) ?? 120, protocol: (web.public_link && web.public_link.protocol) ?? "http2" },
     session: { absolute_hours: local.absolute_hours ?? null, idle_hours: local.idle_hours ?? null },
     terminal: { enabled: term.enabled ?? null, ttl_minutes: term.ttl_minutes ?? null },
   }), []);
   const text = (v) => (v === null || v === undefined ? "" : String(v));
   const [f, setF] = useState(() => ({
-    echo: original.echo, log: original.log, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol,
+    echo: original.echo, log: original.log, usagePub: original.usagePub, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol,
     abs: text(original.session.absolute_hours), idle: text(original.session.idle_hours),
     termOn: original.terminal.enabled !== false, termTtl: text(original.terminal.ttl_minutes),
   }));
@@ -808,6 +821,7 @@ function WebSection({ ctx, staged }) {
     const body = {
       ...(f.echo !== original.echo ? { echo_to_channel: f.echo } : {}),
       ...(f.log !== original.log ? { log_tab: f.log } : {}),
+      ...(f.usagePub !== original.usagePub ? { usage_report_on_public_link: f.usagePub } : {}),
       ...(Object.keys(publicPatch).length ? { public_link: publicPatch } : {}),
       ...(Object.keys(sessionPatch).length ? { session: { local: sessionPatch } } : {}),
       ...(Object.keys(terminalPatch).length ? { web_terminal: terminalPatch } : {}),
@@ -815,6 +829,7 @@ function WebSection({ ctx, staged }) {
     const fields = [
       ...(body.echo_to_channel !== undefined ? ["web.echo_to_channel"] : []),
       ...(body.log_tab !== undefined ? ["web.log_tab"] : []),
+      ...(body.usage_report_on_public_link !== undefined ? ["web.usage_report_on_public_link"] : []),
       ...Object.keys(publicPatch).map((k) => `web.public_link.${k}`),
       ...Object.keys(sessionPatch).map((k) => `web.session.local.${k}`),
       ...Object.keys(terminalPatch).map((k) => `web_terminal.${k}`),
@@ -856,6 +871,8 @@ function WebSection({ ctx, staged }) {
       <p class="note">${tn("webEchoHint")}</p>
       <label class="check"><input id="webLogTab" type="checkbox" checked=${f.log} onChange=${(e) => set("log")(e.target.checked)} /><span>${tn("webLogTab")}</span><${Impact} schema=${schema} field="web.log_tab" /></label>
       <p class="note">${tn("webLogTabHint")}</p>
+      <label class="check"><input id="webUsagePublic" type="checkbox" checked=${f.usagePub} onChange=${(e) => set("usagePub")(e.target.checked)} /><span>${tn("webUsagePublic")}</span><${Impact} schema=${schema} field="web.usage_report_on_public_link" /></label>
+      <p class="note">${tn("webUsagePublicHint")}</p>
       <label class="check"><input id="publicWebLink" type="checkbox" checked=${f.pub} onChange=${(e) => set("pub")(e.target.checked)} /><span>${tn("publicLink")}</span><${Impact} schema=${schema} field="web.public_link.allow_public" /></label>
       <p class="note">${tn("publicLinkHint")}</p>
       <div class="grid2">
@@ -864,6 +881,7 @@ function WebSection({ ctx, staged }) {
       </div>
     </section>
     </fieldset>
+    ${overPublicLink ? null : html`<${GuestsCard} ctx=${ctx} staged=${staged} /><${WebAuthorityCard} ctx=${ctx} staged=${staged} />`}
     <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>
@@ -941,7 +959,7 @@ function OperationCard({ op, schema }) {
   const mismatch = schema && schema.fleet_signature_mismatch;
   const title = op.phase === "failed" ? tn("applyPartial") : fleetRestarting ? tn("restartFleetTitle") : busy ? tn("applying")
     : failedRows ? tn("applyPartial") : needsRestart ? tn("applyRestartNeeded") : tn("applyDone");
-  const note = op.phase === "failed" ? (op.error === "busy" ? tn("applyBusy") : op.error ? tn("applyStepFailed", op.error) : "")
+  const note = op.phase === "failed" ? (op.error === "busy" ? tn("applyBusy") : op.error ? tn("applyStepFailed", applyErrorText(op.error)) : "")
     : fleetRestarting ? tn("restartFleetWaiting") : op.lostJob ? tn("applyLostJob")
     : job && job.overdue ? tn("applyStillWorking", Math.round((job.elapsed_ms || 0) / 1000))
     : mismatch && needsRestart ? tn("signatureMismatch", mismatch.join(", ")) : needsRestart ? tn("applyRestartHint") : "";
@@ -968,7 +986,7 @@ function OperationCard({ op, schema }) {
     ${op.steps.length ? html`<ul class="s-op-steps">${op.steps.map((s, i) => html`<li key=${i} class=${`s-step ${s.status}`}>
       <span class="s-step-icon" aria-hidden="true">${icon(s.status) ? html`<${Icon} name=${icon(s.status)} size=${14} />` : "·"}</span>
       <span class="grow">${s.label}</span>
-      <span class="note">${s.status === "waiting" ? tn("stepWaiting") : s.status === "skipped" ? tn("stepSkipped") : s.status === "failed" ? (s.error || tn("applyFailed")) : s.note || impactText(s.impact)}</span></li>`)}</ul>` : null}
+      <span class="note">${s.status === "waiting" ? tn("stepWaiting") : s.status === "skipped" ? tn("stepSkipped") : s.status === "failed" ? (s.error ? applyErrorText(s.error) : tn("applyFailed")) : s.note || impactText(s.impact)}</span></li>`)}</ul>` : null}
     ${rows.length ? html`<ul class="s-op-steps">${rows.map((r) => html`<li key=${r.target} class=${`s-step ${r.status}`}>
       <span class="s-step-icon" aria-hidden="true">${r.status === "done" ? html`<${Icon} name="check" size=${14} />` : r.status === "failed" ? html`<${Icon} name="alert" size=${14} />` : r.status === "restart-required" ? html`<${Icon} name="restart" size=${14} />` : "·"}</span>
       <span class="grow">${r.target === "fleet" ? "AgEnD" : shortName(r.target, {})}</span>

package/dist/ui/preview.js

@@ -100,7 +100,7 @@
       notify();
       return true;
     }
-    if (j && (j.code === "publicLinkPreviewFailed" || j.code === "publicLink" || j.code === "fleetOff")) {
+    if (j && (j.code === "publicLinkPreviewFailed" || j.code === "publicLink" || j.code === "fleetOff" || j.code === "listenFailed" || j.code === "notListening")) {
       cfg.reasonCode = j.code; cfg.reason = ""; cfg.detail = typeof j.detail === "string" ? j.detail : "";
       notify();
       return true;
@@ -191,7 +191,8 @@
     if (!cfg.previewOrigin || !cfg.boot) {
       // The server's reason, in the page's language when the server named it (a code), else as the server wrote it.
       // #1723: a failed public-link preview names why ({0} is the reason, in the page's words).
-      var arg = cfg.reasonCode === "publicLinkPreviewFailed" ? say("pvFail_" + (cfg.detail || "unknown"), Object.prototype.hasOwnProperty.call(FAIL_EN, cfg.detail) ? FAIL_EN[cfg.detail] : "an unexpected error") : cfg.dashboardOrigin;
+      var arg = cfg.reasonCode === "publicLinkPreviewFailed" ? say("pvFail_" + (cfg.detail || "unknown"), Object.prototype.hasOwnProperty.call(FAIL_EN, cfg.detail) ? FAIL_EN[cfg.detail] : "an unexpected error")
+        : cfg.reasonCode === "listenFailed" ? cfg.detail : cfg.dashboardOrigin;
       var english = cfg.reasonCode === "publicLinkPreviewFailed" ? "Previews are unavailable on this public link: {0}. The link itself keeps working."
         : cfg.reason || "Previews are not available here.";
       var server = cfg.reasonCode ? say("pvServer_" + cfg.reasonCode, english, arg) : "";

package/dist/ui/settings-appearance.js

@@ -10,12 +10,14 @@ 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, PLACEMENTS, setColorsOff, setDefaultPlaces, useIdentityColors } from "/assets/identity-color.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);
@@ -42,22 +44,38 @@ function refusal(body) {
 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>`;
-  return html`<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} /><${SidebarWidgetCard} /><${OwnerCssCard} /><${ModsCard} /><${EffectsCard} /><${DeviceCard} /><${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+  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 (ring and bar unless
- * changed), and a switch that turns them off everywhere while every pick is kept.
+ * #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"><h3>${tn("colorTitle")}</h3>
+  return html`<section class="card s-appearance s-synced s-colors"><${CardTitle} title=${tn("colorTitle")} topic="colors" />
     <p class="sub">${tn("colorLead")}</p>
-    <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>
+    <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>`;
@@ -70,6 +88,7 @@ function IdentityColorCard() {
  */
 export async function restoreAppearanceDefaults() {
   setThemesShown(true);
+  setFollowsReducedMotion(false);
   setCardSizeDefault("m");
   savePref("card.sizeByInstance", null);
   setSidebarWidget(null);
@@ -88,7 +107,7 @@ function RestoreDefaultsCard() {
     setBusy(false);
     if (r.ok) toast(tn("restoreDone")); else toast(tn("restoreCssFailed", r.error), false);
   }
-  return html`<section class="card s-appearance s-restore"><h3>${tn("restoreTitle")}</h3>
+  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>`;
@@ -98,7 +117,7 @@ function RestoreDefaultsCard() {
 function CardSizeCard() {
   useStore(cardSizeStore);
   const size = cardSizeDefault();
-  return html`<section class="card s-appearance s-synced"><h3>${tn("cardSizeTitle")}</h3>
+  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>`)}
@@ -131,7 +150,7 @@ function CardLimitsCard() {
   };
   useEffect(() => { load(); }, []);
   if (!view) return null;
-  if (view.error) return html`<section class="card s-appearance"><h3>${tn("cardLimitsTitle")}</h3><p class="sub">${tn("cardLimitsUnavailable")}</p></section>`;
+  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 = {};
@@ -148,7 +167,7 @@ function CardLimitsCard() {
     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"><h3>${tn("cardLimitsTitle")}</h3>
+  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">
@@ -170,10 +189,16 @@ function CardLimitsCard() {
 /** #1629 r2 (d): whether this person's screens show agents' themes (and, as they come, effects) — synced. */
 function ThemesCard() {
   const s = useStore(themesStore);
-  return html`<section class="card s-appearance s-synced"><h3>${tn("themesTitle")}</h3>
+  // #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>`;
 }
 
@@ -209,7 +234,7 @@ function SidebarWidgetCard() {
     toast(tn("widgetSaved"));
   };
   const remove = () => { setSidebarWidget(null); setText(""); setError(""); toast(tn("widgetRemoved")); };
-  return html`<section class="card s-appearance s-synced s-widget"><h3>${tn("widgetTitle")}</h3>
+  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}
@@ -240,8 +265,8 @@ function OwnerCssCard() {
   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"><h3>${tn("cssTitle")}</h3><p class="sub">…</p></section>`;
-  if (state.failed) return html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="err">${tn("cssLoadFailed")}</p></section>`;
+  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("");
@@ -285,7 +310,7 @@ function OwnerCssCard() {
     ? (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"><h3>${tn("cssTitle")}</h3>
+  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>
@@ -319,7 +344,6 @@ function DeviceCard() {
   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("cssDeviceOffLead")}</p>
     <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}

package/dist/ui/settings-effects.js

@@ -4,10 +4,11 @@ import { register, t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { OwnerEffects } from "./settings-owner-effects.js";
+import { CardTitle } from "./settings-learn.js";
 
 register("effectSettings", {
   en: {
-    title: "Effects", lead: "Manage effect files and save selections for a chat. Saving replaces that chat’s parameters with the values below.", folder: "Upload an effect folder", files: "Choose effect.json and worker.js, with optional raster assets. Up to 1 MiB after processing.",
+    title: "Effects", lead: "Your effect files, and which one a chat uses.", folder: "Upload an effect folder", files: "effect.json + worker.js (and pictures), up to 1 MiB.",
     inUse: "This effect is still in use and cannot be deleted.", quota: "Your library reached its 10-effect or 8 MiB limit. Delete unused copies first.", rateLimited: "Too many changes. Wait a moment, then try again.",
     loading: "Loading effects…", retry: "Reload library", empty: "No effects in your library.", failed: "Couldn't load the library. Try again.", actionFailed: "Couldn't save this change. Try again.", savedRefresh: "Saved. Reload the library to see the result.",
     uploadFailed: "Couldn't upload this folder. Check its files and size, then try again.", public: "Effect management isn't available on a temporary public link.", readOnly: "Read-only session: sign in as an admin to change effects.",
@@ -16,7 +17,7 @@ register("effectSettings", {
     fps: "Host FPS p50 / p10", tasks: "Host long task p95", noTasks: "Not observed", standard: "Standard device", constrained: "Constrained device", params: "Parameters", badParams: "Check the parameter values.", more: "Show more", count: "{0} effects", one: "1 effect", profileFailed: "Couldn't read profile history. Try again.",
   },
   "zh-TW": {
-    title: "效果", lead: "管理效果檔案，並儲存聊天的效果選擇。儲存時會以下方數值取代該聊天的效果參數。", folder: "上傳效果資料夾", files: "選擇 effect.json、worker.js，以及可選的點陣圖素材；處理後最多 1 MiB。",
+    title: "效果", lead: "你的效果檔案，以及每個聊天使用哪一個。", folder: "上傳效果資料夾", files: "effect.json + worker.js（可加圖片），最多 1 MiB。",
     inUse: "這個效果仍在使用中，無法刪除。", quota: "你的程式庫已達 10 個效果或 8 MiB 上限，請先刪除未使用的副本。", rateLimited: "變更太頻繁，請稍候再試。",
     loading: "正在載入效果…", retry: "重新載入程式庫", empty: "程式庫中還沒有效果。", failed: "無法載入程式庫，請重試。", actionFailed: "無法儲存變更，請重試。", savedRefresh: "已儲存，請重新載入程式庫查看結果。",
     uploadFailed: "無法上傳這個資料夾，請檢查檔案與大小後重試。", public: "臨時公開連結不提供效果管理。", readOnly: "目前為唯讀登入，請以管理員身分登入才能修改效果。",
@@ -180,7 +181,7 @@ export function EffectsCard() {
     if (!current(op.seq)) return; finish(op.seq);
     if (yes) await change(`/ui/effects/${id}`, undefined, "DELETE");
   };
-  return html`<section class="card s-appearance s-effects"><h3>${tn("title")}</h3><p class="sub">${tn("lead")}</p>
+  return html`<section class="card s-appearance s-effects"><${CardTitle} title=${tn("title")} topic="effects" /><p class="sub">${tn("lead")}</p>
     <div class="s-fx-actions"><button type="button" class="btn" disabled=${busy} onClick=${reload}>${tn("retry")}</button>
       ${view?.canWrite ? html`<button class="btn s-fx-choose" type="button" disabled=${busy} onClick=${() => uploadInput.current?.click()}>${tn("folder")}</button><input ref=${uploadInput} class="offscreen s-fx-upload" aria-label=${tn("folder")} tabindex="-1" type="file" webkitdirectory=${true} directory=${true} multiple disabled=${busy} onChange=${upload} />` : null}</div>
     ${busy ? html`<p class="sub" role="status">${tn("loading")}</p>` : null}${error ? html`<p class="err" role="status">${error}</p>` : null}${message ? html`<p class="sub" role="status">${message}</p>` : null}