@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.5

package/dist/ui/settings-devices.js

@@ -0,0 +1,253 @@
+// Refs #3061 (P2a, P2b): Settings → Access & security → Sign-in & authorization → "Devices & sign-in", on a fleet with no chat
+// connection. P2b: the signed-in devices — each with how it was approved (sign-in code / device code / host / authenticator),
+// whether its owner is verified and when it was last active, this one marked, and a Sign out for the others that only the
+// verified owner gets (POST /ui/devices/signout; the server decides, a disabled button is only the page saying so). The QR
+// code on a new device's sign-in page opens this page at ?approve=<code>: the dialog opens with the code filled in — the
+// person still presses Continue and Allow. "Add device" opens a dialog: type the 8-character code a new device is showing on its sign-in page (the
+// device chose "Sign in with another device"), see who is asking — its label, whether it came from this computer or
+// the network, its address and the time left — and Allow or Deny. Approving copies nothing from this device: the new
+// browser signs itself in with a session of its own, and owner authorization is not part of it.
+//
+// Only the verified owner may approve (GET /ui/devices' `owner`): this computer's admin here, or signed in from outside
+// with the authenticator's code. Anyone else sees the card, the explanation and a disabled button. The server decides
+// that on every request and refuses everything else regardless (POST /ui/devices/{lookup,approve,deny} → 403).
+// Refs #3061 (review of P2b): with web authorization off nobody is an owner, so nobody can add a device or sign another out —
+// the card says so and points to `agend web-token rotate` on the AgEnD computer (which ends every session); and the
+// confirm screen leads with where the request is from and its address (the device name is the browser's own word and can be
+// faked) and says to allow only when the new device shows the same code.
+// The words are English and 繁體中文, as everything in src/ui (tests/i18n-ui-literals-2390.test.ts).
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { api } from "./settings-confirm.js";
+
+register("devices", {
+  en: {
+    title: "Devices & sign-in", lead: "Sign in a new device with an 8-character code. You approve it here, on a device that is already signed in as the owner.",
+    add: "Add device", noCopy: "Approving does not copy this device's sign-in. The new device gets a session of its own.",
+    ownerOnly: "Only a device whose owner is verified can add a device. Use the AgEnD computer, or sign in with the authenticator app.",
+    dlgTitle: "Add device", dlgLead: "On the new device, choose “Sign in with another device”, then enter the code it shows.",
+    codeLabel: "Code on the new device", find: "Continue",
+    confirmTitle: "Allow this device to sign in?", device: "Device", from: "From", address: "Address", left: "Time left", code: "Code",
+    fromHost: "This computer", fromNetwork: "The network (LAN or tailnet)",
+    grants: "General web actions only. Owner authorization is not included; it is verified separately.",
+    sameCode: "Only allow this if the new device's screen shows this same code. The device name comes from the browser and can be faked, so go by where it is from and its address.",
+    allow: "Allow", deny: "Deny", back: "Back", done: "Done",
+    approved: "Approved. The new device signs in within a few seconds.", denied: "Denied. The new device was told it may not sign in.",
+    notFound: "No device is waiting with that code. Check the code on the new device; it may have expired.",
+    expired: "That code has expired. Ask the new device for a new one.",
+    paused: "Too many wrong codes. Try again in {0}.", decided: "That request was already decided.",
+    lostOwner: "This device can no longer approve sign-ins: its owner verification has ended.",
+    minutes: "{0} minutes", minute: "1 minute",
+    listTitle: "Signed-in devices", refresh: "Refresh", approvedBy: "Approved by {0}",
+    viaCode: "sign-in code", viaDevice: "device code", viaHost: "this computer", viaTotp: "authenticator app",
+    ownerOk: "Owner verified", ownerNo: "Signed in, owner not verified yet",
+    signOutOwnerOnly: "Only a device whose owner is verified can sign out another device.",
+    signOutTitle: "Sign out this device?", signOutLead: "{0} will have to sign in again.", signOutGo: "Sign out",
+    signedOut: "{0} was signed out.", alreadyGone: "That device is already signed out.",
+    notSaved: "Signed out for now, but the change could not be saved: a restart may bring the session back. Fix the permissions on ~/.agend/web-sessions.json and sign it out again.",
+    authorityOffA: "Web authorization is off, so no device is the owner: none can add a device or sign another one out. To sign the other devices out, run ",
+    authorityOffB: " on the AgEnD computer. It ends every session, this one included, and every device has to sign in again.",
+  },
+  "zh-TW": {
+    title: "裝置與登入", lead: "用 8 碼代碼讓新裝置登入。在已登入且已驗證擁有者的裝置上，到這裡核准。",
+    add: "新增裝置", noCopy: "核准不會複製這台裝置的登入狀態，新裝置會取得自己的工作階段。",
+    ownerOnly: "只有已驗證擁有者的裝置才能新增裝置。請使用 AgEnD 電腦，或用驗證器 App 登入。",
+    dlgTitle: "新增裝置", dlgLead: "在新裝置上選「使用其他裝置登入」，再輸入它顯示的代碼。",
+    codeLabel: "新裝置上的代碼", find: "繼續",
+    confirmTitle: "允許這台裝置登入？", device: "裝置", from: "來源", address: "位址", left: "剩餘時間", code: "代碼",
+    fromHost: "這台電腦", fromNetwork: "網路（區網或 tailnet）",
+    grants: "只能使用一般的網頁功能，不含擁有者授權；擁有者授權需另外驗證。",
+    sameCode: "只有新裝置的畫面上顯示的是同一組代碼時才允許。裝置名稱來自瀏覽器、可能被偽造，請以來源和位址為準。",
+    allow: "允許", deny: "拒絕", back: "返回", done: "完成",
+    approved: "已核准。新裝置幾秒內就會登入。", denied: "已拒絕。新裝置會收到不能登入的通知。",
+    notFound: "沒有等待中的裝置使用這組代碼。請確認新裝置上的代碼；它可能已失效。",
+    expired: "這組代碼已失效。請讓新裝置重新取得代碼。",
+    paused: "錯誤次數太多，請 {0} 後再試。", decided: "這個請求已經處理過了。",
+    lostOwner: "這台裝置已不能核准登入：它的擁有者驗證已結束。",
+    minutes: "{0} 分鐘", minute: "1 分鐘",
+    listTitle: "已登入的裝置", refresh: "重新整理", approvedBy: "核准方式：{0}",
+    viaCode: "登入碼", viaDevice: "裝置代碼", viaHost: "主機", viaTotp: "驗證器 App",
+    ownerOk: "已驗證擁有者", ownerNo: "已登入，尚未驗證擁有者",
+    signOutOwnerOnly: "只有已驗證擁有者的裝置才能登出其他裝置。",
+    signOutTitle: "登出這台裝置？", signOutLead: "{0} 需要重新登入。", signOutGo: "登出",
+    signedOut: "已登出 {0}。", alreadyGone: "這台裝置已經登出了。",
+    notSaved: "暫時登出了，但變更沒能存檔：重新啟動後這個工作階段可能會回來。請修正 ~/.agend/web-sessions.json 的權限，再登出一次。",
+    authorityOffA: "網頁授權已關閉，所以沒有任何裝置是擁有者：不能新增裝置，也不能登出其他裝置。要登出其他裝置，請在 AgEnD 電腦上執行 ",
+    authorityOffB: "。這個指令會結束所有工作階段（包括目前這個），每台裝置都要重新登入。",
+  },
+});
+const td = (k, ...v) => t(`devices.${k}`, ...v);
+/** The one thing that signs other devices out when nobody is an owner: a command, the same in both languages. */
+export const ROTATE_COMMAND = "agend web-token rotate";
+
+/** A wait as words: "2 minutes" / 「2 分鐘」 (rounded up). */
+export function pauseWords(ms) {
+  const minutes = Math.max(1, Math.ceil(ms / 60000));
+  return minutes === 1 ? td("minute") : td("minutes", minutes);
+}
+/** How long ago, as words ("just now", "5 min ago", "2 h ago"; the app menu's own). */
+export function agoWords(ms, now = Date.now()) {
+  const m = Math.round((now - ms) / 60000);
+  return m < 1 ? t("app.justNow") : m < 90 ? t("app.minAgo", m) : t("app.hrAgo", Math.round(m / 60));
+}
+/** The code a QR link carries (?approve=XXXX-XXXX), or "" when the address carries none or something else. */
+export function approveCodeFrom(search) {
+  try {
+    const v = new URLSearchParams(search || "").get("approve");
+    return v && /^[0-9A-Za-z-]{8,12}$/.test(v) ? v : "";
+  } catch { return ""; }
+}
+/** The time left as m:ss. */
+export function leftClock(ms) {
+  const s = Math.max(0, Math.ceil(ms / 1000));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+
+export function DevicesCard() {
+  const [s, setS] = useState(null);
+  // step: "code" (type it) | "confirm" (who is asking) | "done" (what happened). `msg`: a line under the field.
+  const [dlg, setDlg] = useState(null), [code, setCode] = useState(""), [msg, setMsg] = useState(""), [busy, setBusy] = useState(false), [now, setNow] = useState(Date.now());
+  // P2b: the device being signed out (asked to confirm), and the line saying how that went.
+  const [out, setOut] = useState(null), [note, setNote] = useState(null);
+  const live = useRef({ mounted: true, deepLink: false });
+  // The QR link (?approve=<code>) is read once, and taken out of the address so a reload does not open it again and the code
+  // does not stay in the history. Only the verified owner gets the dialog; anyone else just sees the card.
+  const takeDeepLink = (owner) => {
+    if (live.current.deepLink) return;
+    live.current.deepLink = true;
+    const wanted = approveCodeFrom(globalThis.location && globalThis.location.search);
+    if (!wanted) return;
+    try {
+      const url = new URL(globalThis.location.href);
+      url.searchParams.delete("approve");
+      globalThis.history.replaceState(globalThis.history.state, "", url.pathname + url.search + url.hash);
+    } catch { /* the address stays; nothing breaks */ }
+    if (owner) { setDlg({ step: "code" }); setCode(wanted); setMsg(""); setNow(Date.now()); }
+  };
+  const load = async () => {
+    let r = null;
+    try { r = await api("/ui/devices"); } catch { r = null; }
+    if (live.current.mounted && r && r.ok && r.body && typeof r.body === "object") { setS(r.body); if (r.body.webOnly) takeDeepLink(r.body.owner === true); }
+  };
+  useEffect(() => { live.current.mounted = true; load(); return () => { live.current.mounted = false; }; }, []);
+  // The confirm screen counts down; a request that ran out goes back to the field with the reason.
+  const step = dlg && dlg.step, expiresAt = dlg && dlg.request && dlg.request.expiresAt;
+  useEffect(() => {
+    if (step !== "confirm") return undefined;
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [step]);
+  useEffect(() => {
+    if (step === "confirm" && expiresAt && now >= expiresAt) { setDlg({ step: "code" }); setMsg(td("expired")); }
+  }, [now, step, expiresAt]);
+  if (!s || !s.webOnly) return null;
+
+  const close = () => { setDlg(null); setCode(""); setMsg(""); if (dlg && dlg.step === "done") load(); };
+  // A button the page disabled never reaches here in a browser; the guard is for anything that calls it anyway (the server refuses a non-owner regardless).
+  const open = () => { if (!s.owner) return; setDlg({ step: "code" }); setCode(""); setMsg(""); setNow(Date.now()); };
+  // What the server said, as a line for the person (a code that names nothing, a pause, an ended authority…).
+  const reason = (r) => {
+    const why = r.body && r.body.error;
+    if (r.status === 404) return td("notFound");
+    if (r.status === 429) return td("paused", pauseWords(Number(r.body && r.body.retryAfterMs) || 60000));
+    if (r.status === 409 || why === "already_decided") return td("decided");
+    if (r.status === 403) return td("lostOwner");
+    return t("app.failed");
+  };
+  const post = async (op, body) => {
+    setBusy(true); setMsg("");
+    try { return await api(`/ui/devices/${op}`, { method: "POST", body: JSON.stringify(body) }); }
+    catch { return { ok: false, status: 0, body: null }; }
+    finally { if (live.current.mounted) setBusy(false); }
+  };
+  const find = async () => {
+    const r = await post("lookup", { code });
+    if (!live.current.mounted) return;
+    if (r.ok && r.body && r.body.request) { setNow(Date.now()); setDlg({ step: "confirm", request: r.body.request }); return; }
+    setMsg(reason(r));
+    if (r.status === 403) load();
+  };
+  const decide = async (op) => {
+    const r = await post(op, { code: dlg.request.code });
+    if (!live.current.mounted) return;
+    if (r.ok) { setDlg({ step: "done", outcome: op }); return; }
+    setDlg({ step: "code" }); setMsg(reason(r));
+    if (r.status === 403) load();
+  };
+
+  // P2b: sign another device out. The button is only offered to the owner and the server checks again (403 otherwise).
+  const askSignOut = (device) => { if (s.owner && !device.current) { setNote(null); setOut({ handle: device.handle, label: device.label }); } };
+  const signOut = async () => {
+    const target = out;
+    if (!target) return;
+    setBusy(true);
+    let r;
+    try { r = await api("/ui/devices/signout", { method: "POST", body: JSON.stringify({ handle: target.handle }) }); }
+    catch { r = { ok: false, status: 0, body: null }; }
+    if (!live.current.mounted) return;
+    setBusy(false); setOut(null);
+    if (r.ok) setNote({ ok: true, text: td("signedOut", target.label) });
+    else if (r.status === 404) setNote({ ok: false, text: td("alreadyGone") });
+    else if (r.status === 403) setNote({ ok: false, text: td("lostOwner") });
+    else if (r.body && r.body.error === "not_durable") setNote({ ok: false, text: td("notSaved") });
+    else setNote({ ok: false, text: t("app.failed") });
+    load();
+  };
+  // Web authorization off (the server says so): nobody is an owner, whoever is looking — "use the AgEnD computer" would not help.
+  const authorityOff = s.authority === false;
+  const devices = Array.isArray(s.devices) ? s.devices : [];
+  const others = devices.filter((d) => !d.current).length;
+  const viaText = (via) => td({ device: "viaDevice", host: "viaHost", totp: "viaTotp" }[via] || "viaCode");
+
+  const request = dlg && dlg.request;
+  const body = !dlg ? null : dlg.step === "code" ? html`
+      <p class="note" id="devLead">${td("dlgLead")}</p>
+      <div class="field"><label for="devCodeInput">${td("codeLabel")}</label>
+        <input id="devCodeInput" class="s-dev-code" type="text" autocomplete="off" autocapitalize="characters" autocorrect="off" spellcheck=${false}
+          maxlength="12" placeholder="XXXX-XXXX" value=${code} onInput=${(e) => { setCode(e.target.value); setMsg(""); }} /></div>
+      ${msg ? html`<p class="feedback error" role="alert" id="devMsg">${msg}</p>` : null}`
+    : dlg.step === "confirm" ? html`
+      <p class="note" id="devConfirmLead">${td("confirmTitle")}</p>
+      <dl class="s-dev-facts" id="devFacts">
+        <div class="s-dev-key"><dt>${td("from")}</dt><dd id="devFrom">${td(request.peer === "host" ? "fromHost" : "fromNetwork")}</dd></div>
+        <div class="s-dev-key"><dt>${td("address")}</dt><dd id="devAddress">${request.address}</dd></div>
+        <div><dt>${td("code")}</dt><dd><code id="devCodeShown">${request.code}</code></dd></div>
+        <div><dt>${td("device")}</dt><dd id="devLabel">${request.label}</dd></div>
+        <div><dt>${td("left")}</dt><dd id="devLeft">${leftClock(request.expiresAt - now)}</dd></div>
+      </dl>
+      <p class="note s-va-warn" id="devSameCode">${td("sameCode")}</p>
+      <p class="note" id="devGrants">${td("grants")}</p>
+      <p class="note" id="devNoCopy">${td("noCopy")}</p>`
+    : html`<p class="note" role="status" id="devDone">${td(dlg.outcome === "approve" ? "approved" : "denied")}</p>`;
+  const actions = !dlg ? null : dlg.step === "code" ? html`
+      <button type="button" class="btn" id="devCancel" disabled=${busy} onClick=${close}>${t("app.cancel")}</button>
+      <button type="button" class="btn btn-primary" id="devFind" disabled=${busy || code.replace(/[^0-9A-Za-z]/g, "").length < 8} onClick=${find}>${td("find")}</button>`
+    : dlg.step === "confirm" ? html`
+      <button type="button" class="btn" id="devBack" disabled=${busy} onClick=${() => { setDlg({ step: "code" }); setMsg(""); }}>${td("back")}</button>
+      <button type="button" class="btn btn-danger" id="devDeny" disabled=${busy} onClick=${() => decide("deny")}>${td("deny")}</button>
+      <button type="button" class="btn btn-primary" id="devAllow" disabled=${busy} onClick=${() => decide("approve")}>${td("allow")}</button>`
+    : html`<button type="button" class="btn btn-primary" id="devDoneBtn" onClick=${close}>${td("done")}</button>`;
+  return html`<section class="card s-devices" id="devicesCard"><header class="s-auth-section-head"><div><h3>${td("title")}</h3><p id="devicesLead">${td("lead")}</p></div></header>
+    <p class="note" id="devicesNoCopy">${td("noCopy")}</p>
+    ${devices.length ? html`<div class="s-dev-listhead"><h4 id="devicesListTitle">${td("listTitle")}</h4>
+        <button type="button" class="btn btn-sm" id="devicesRefresh" onClick=${load}>${td("refresh")}</button></div>
+      <ul class="s-dev-list" id="devicesList">${devices.map((d) => html`<li class=${`s-dev-row${d.current ? " current" : ""}`} key=${d.handle} data-handle=${d.handle}>
+        <div class="s-dev-main">
+          <span class="s-dev-name">${d.label}${d.current ? html` <span class="tag" data-this-device="1">${t("app.thisDevice")}</span>` : null}</span>
+          <span class="s-dev-meta">${td("approvedBy", viaText(d.via))} · <span data-owner=${d.ownerVerified ? "yes" : "no"}>${td(d.ownerVerified ? "ownerOk" : "ownerNo")}</span> · ${t("app.lastActive", agoWords(d.lastSeen))}</span>
+        </div>
+        ${d.current ? null : html`<button type="button" class="btn btn-sm btn-danger" data-signout=${d.handle} disabled=${!s.owner || busy} onClick=${() => askSignOut(d)}>${t("app.signOut")}</button>`}
+      </li>`)}</ul>
+      ${others && !s.owner && !authorityOff ? html`<p class="note" id="devicesSignOutOwnerOnly">${td("signOutOwnerOnly")}</p>` : null}
+      ${note ? html`<p class=${`note ${note.ok ? "" : "error"}`} role=${note.ok ? "status" : "alert"} id="devicesNote">${note.text}</p>` : null}` : null}
+    ${authorityOff ? html`<p class="note s-va-warn" id="devicesAuthorityOff">${td("authorityOffA")}<code id="devicesRotate">${ROTATE_COMMAND}</code>${td("authorityOffB")}</p>`
+      : !s.owner ? html`<p class="note" id="devicesOwnerOnly">${td("ownerOnly")}</p>` : null}
+    <div class="save-row"><button type="button" class="btn btn-primary" id="devicesAdd" disabled=${!s.owner} onClick=${open}>${td("add")}</button></div>
+    ${dlg ? html`<${Dialog} title=${td("dlgTitle")} onClose=${close} busy=${busy} actions=${actions}>${body}</${Dialog}>` : null}
+    ${out ? html`<${Dialog} title=${td("signOutTitle")} onClose=${() => { if (!busy) setOut(null); }} busy=${busy} actions=${html`
+      <button type="button" class="btn" id="devSignOutCancel" disabled=${busy} onClick=${() => setOut(null)}>${t("app.cancel")}</button>
+      <button type="button" class="btn btn-danger" id="devSignOutGo" disabled=${busy} onClick=${signOut}>${td("signOutGo")}</button>`}>
+      <p class="note" id="devSignOutLead">${td("signOutLead", out.label)}</p></${Dialog}>` : null}
+  </section>`;
+}

package/dist/ui/settings-dialogs.js

@@ -17,7 +17,9 @@ import { startOperation } from "./settings-apply.js";
 import { goToTarget } from "./settings-registry.js";
 import { sectionPath } from "/assets/app-route.js";
 import { backendLabel } from "/assets/instance-nav.js";
+import {AgentRuntimeSettings} from "./agent-runtime-settings.js";
 import "./settings-strings.js";   // its words, wherever a picker of this file is used (#2072: Fleet's create dialog too)
+import "./settings-shared-strings.js";   // the words Shared agent settings added and this file draws (backendNotInstalledHost, changeInDefaults, …)
 import { backendChoices, modelChoices, OTHER_MODEL, useBackendRows, useModelCatalogState } from "./settings-catalog.js";
 import {
   ACCESS_MODES, AGENT_MODES, CH_TYPES, DASHBOARD_CHOICES, DASHBOARD_FEATURES, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS,
@@ -25,6 +27,11 @@ import {
   chLabel, dashboardDefault, hasOwn, impactOf, newConnectionImpact, nonNegative, nonNegativeInteger, positive, replyGuardSupported, sameValue, visibilityDefault,
   classicWebEchoEffective, toolSetDefault, worstImpact,
 } from "./settings-model.js";
+import "./settings-codex-copy.js";   // M-2446: the Speed field's words (a retained old settings-strings lacks them)
+import { AccountSelect } from "./accounts-view.js";   // #3212: the Account field (a new module: never a stale named import)
+/** M-2446: Codex speed choices (backend_options.codex.speed); "" = unset. Local, not imported: a stale tab may keep an
+ *  older settings-model.js, and a new named import would fail this module's load. */
+const CODEX_SPEED_CHOICES = ["", "standard", "fast"];
 /** #2342: a field by id, for recordEdit before a pick or a reset writes it. */
 const byId = (id) => (typeof document !== "undefined" ? document.getElementById(id) : null);
 
@@ -44,11 +51,11 @@ export function Select({ value, options, onChange, disabled, id, label }) {
  * #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 }) {
+export function BackendSelect({ value, onChange, disabled, id, hostOnly }) {
   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),
+    notInstalled: tn(hostOnly ? "backendNotInstalledHost" : "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)}>
@@ -85,12 +92,12 @@ export function Label({ text, schema, field, htmlFor, mark }) {
   return html`<label for=${htmlFor}>${text}${mark ? html` ${mark}` : null}${field ? html` <${Impact} schema=${schema} field=${field} />` : null}</label>`;
 }
 /** #2347 §10: the mark of a value nobody set — what is in effect is the built-in default. */
-export function DefaultMark() {
-  return html`<span class="tag s-default">${tn("defaultMark")}</span>`;
+export function DefaultMark({ tip }) {
+  return html`<span class="tag s-default" title=${tip || undefined}>${tn("defaultMark")}</span>`;
 }
 /** #2347 §10: what an empty field means — the value in effect, in plain text, and where it comes from (the mark, or why). */
-export function InEffect({ text, why }) {
-  return html`<p class="s-effect">${tn("inEffect", text)} ${why ? html`<span class="tag">${why}</span>` : html`<${DefaultMark} />`}</p>`;
+export function InEffect({ text, why, tip }) {
+  return html`<p class="s-effect">${tn("inEffect", text)} ${why ? html`<span class="tag">${why}</span>` : html`<${DefaultMark} tip=${tip} />`}</p>`;
 }
 /**
  * #2347 §10: what an inherited field inherits — its value, marked "default" when nobody set it there either — and a
@@ -146,9 +153,9 @@ export function ChipList({ items, onChange, placeholder, label }) {
 const replyHint = (backend, mode, kiroUi) => (replyGuardSupported(backend, mode, kiroUi) ? tn("replyGuardSupported") : tn("replyGuardUnsupported", backend, mode));
 
 /** The dialog every editor uses: Cancel / Stage change; the footer says what the changes made so far will cost (#2346: only the fields that changed). */
-function EditDialog({ title, subtitle, onClose, onStage, impacts, schema, children, ready = true, wide = true }) {
+function EditDialog({ title, subtitle, onClose, onStage, impacts, schema, children, ready = true, wide = true, drawer = false }) {
   const kinds = [...new Set((impacts || []).map((f) => impactOf(schema, f)))];
-  return html`<${Dialog} title=${title} label=${subtitle ? `${title} — ${subtitle}` : title} onClose=${onClose} wide=${wide}
+  return html`<${Dialog} title=${title} label=${subtitle ? `${title} — ${subtitle}` : title} onClose=${onClose} wide=${wide} drawer=${drawer}
     actions=${html`${kinds.length ? html`<span class="note dlg-impact">${kinds.map(impactText).join(" · ")}</span>` : null}
       <button type="button" class="btn" onClick=${onClose}>${tn("cancel")}</button>
       <button type="button" class="btn btn-primary" disabled=${!ready} onClick=${onStage}>${tn("modalDone")}</button>`}>
@@ -288,7 +295,17 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
   const generalError = otherGeneral ? tn("oneGeneral", ctx.shortName(otherGeneral[0], otherGeneral[1])) : "";
   const failoverWarn = !f.inherit.model_failover && !f.model_failover.trim() ? "failoverEmpty" : "";
   const ready = !errors.auto && !errors.hang && !generalError;
-  const pending = () => agentPatch({ ...f, status_emojis: emojis.value }, inst, defaults, visibilityBaseline, emojis.baseline);
+  // #3212: the agent's own credential profile for its CLI ("" = none: it follows the fleet default). Host agents only.
+  const acctBackend = f.backend || defaults.backend || "claude-code";
+  const ownAccount = (inst.backend_options && inst.backend_options[acctBackend] && inst.backend_options[acctBackend].credential_profile) || "";
+  const [acct, setAcct] = useState(ownAccount);
+  const pending = () => {
+    const patch = agentPatch({ ...f, status_emojis: emojis.value }, inst, defaults, visibilityBaseline, emojis.baseline);
+    if (inst.runtime === "windows" || acct === ownAccount) return patch;
+    const opts = { ...(patch.backend_options || {}) };
+    opts[acctBackend] = { ...(opts[acctBackend] || {}), credential_profile: acct || null };
+    return { ...patch, backend_options: opts };
+  };
   const stage = () => {
     if (!ready) return;
     const patch = pending();
@@ -302,16 +319,20 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
   const inh = (k, value, target, kind, set = hasOwn(defaults, k)) => ({ text: valueText(value, kind), builtin: !set, from: target ? inAgentDefaults(target) : null });
   const inheritedBackend = !inst.backend && f.backend === (defaults.backend || "claude-code");
   const L = (text, field, id) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${id} />`;
-  return html`<${EditDialog} title=${ctx.shortName(name, inst)} subtitle=${tn("idLine", name)} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${Object.keys(pending()).map((k) => `instance.${k}`)} schema=${schema}>
+  return html`<${EditDialog} title=${ctx.shortName(name, inst)} subtitle=${tn("idLine", name)} onClose=${onClose} onStage=${stage} ready=${ready} drawer=${true} impacts=${Object.keys(pending()).map((k) => `instance.${k}`)} schema=${schema}>
+    <${AgentRuntimeSettings} name=${name} inst=${{...inst,backend:f.backend}} inherited=${inheritedBackend ? html`<${Inherited} ...${inh("backend", f.backend, "#g-be", "backend")} />` : null} disabled=${Object.keys(pending()).length>0||ctx.staged?.size>0} onChanged=${()=>{ctx.reload();onClose();}}/>
     <div class="grid2">
       <div class="field">${L(tn("displayName"), "instance.display_name", "ag-dn")}
         <${Override} inherit=${f.inherit.display_name} onInherit=${setInherit("display_name")} inherited=${inh("display_name", defaults.display_name || name, null, "", !!defaults.display_name)}>
           <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")} />
-        ${inheritedBackend ? html`<${Inherited} ...${inh("backend", f.backend, "#g-be", "backend")} />` : null}</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("inheritValue", defaults.model || tn("modelCliDefault"))} /></div>
+      ${(f.backend || defaults.backend || "claude-code") === "codex" && inst.runtime !== "windows" ? html`<div class="field codex-speed">${L(tn("codexSpeed"), "instance.backend_options", "ag-speed")}
+        <${Select} id="ag-speed" value=${f.codex_speed} onChange=${set("codex_speed")}
+          options=${CODEX_SPEED_CHOICES.map((v) => ({ value: v, label: tn(v === "fast" ? "codexSpeedFast" : v === "standard" ? "codexSpeedStandard" : "codexSpeedDefault") }))} />
+        <p class="note">${tn("codexSpeedHint")}</p></div>` : null}
+      ${inst.runtime !== "windows" && ["claude-code", "codex", "kiro-cli"].includes(acctBackend) ? html`<${AccountSelect} id="ag-account" backend=${acctBackend} value=${acct} onChange=${setAcct} />` : null}
     </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")}

package/dist/ui/settings-guests.js

@@ -16,6 +16,7 @@ import { confirmDialog } from "/assets/ui-confirm.js";
 import { api } from "./settings-confirm.js";
 import { DEFAULT_SCHEMA, impactOf } from "./settings-model.js";
 import "./settings-strings.js";
+import { layoutText } from "./settings-layout.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 const PLATFORMS = { discord: "Discord", telegram: "Telegram" };
@@ -93,6 +94,7 @@ export function GuestsSection({ ctx, staged }) {
   const [overview, setOverview] = useState(null), [failed, setFailed] = useState(false);
   const [people, setPeople] = useState(null), [query, setQuery] = useState(""), [editing, setEditing] = useState(null);
   const [sendState, setSendState] = useState({}), [now, setNow] = useState(() => Date.now());
+  const [viewedGuest, setViewedGuest] = useState(null);
   const [status, setStatus] = useState(null);                 // { kind: "waiting" } | { kind: "failed", error }
   const load = async () => {
     let r = null;
@@ -211,6 +213,7 @@ export function GuestsSection({ ctx, staged }) {
   };
 
   const rows = f.grants ? [...new Set([...Object.keys(f.grants), ...Object.keys(original.grants || {})])] : [];
+  const activeGuest = rows.includes(editing) ? editing : rows.includes(viewedGuest) ? viewedGuest : rows[0];
   const q = query.trim().toLowerCase();
   const candidates = (people || []).filter((p) => !(f.grants && own(f.grants, accountKey(p))))
     .filter((p) => !q || [p.name, p.username, p.userId].some((x) => typeof x === "string" && x.toLowerCase().includes(q))).slice(0, 8);
@@ -218,21 +221,32 @@ export function GuestsSection({ ctx, staged }) {
   return html`<section class="card s-guests" id="guests"><h3>${tn("guestsTitle")}</h3>
     <p class="note">${tn("grantsHint")}</p>
     <fieldset class="s-guest-fields" disabled=${readOnly}>
-      <label class=${`check${f.enabled !== original.enabled ? " s-dirty" : ""}`}><input id="guestsEnabled" type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /><span>${tn("guestsEnabled")}</span></label>
+<div class="s-guest-policy"><div>      <label class=${`check${f.enabled !== original.enabled ? " s-dirty" : ""}`}><input class="s-ui-toggle" 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${f.chat !== original.chat ? " s-dirty" : ""}`}><input id="guestsChat" type="checkbox" checked=${f.chat} onChange=${(e) => set({ chat: e.target.checked })} /><span>${tn("guestsChat")}</span></label>
+</div><div>      <label class=${`check${f.chat !== original.chat ? " s-dirty" : ""}`}><input class="s-ui-toggle" 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>
+</div></div>
       ${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>` : null}
       ${!f.grants && overview ? html`<div class="g-legacy"><p class="note">${tn("grantsLegacy")}</p>
         ${readOnly ? null : html`<button type="button" class="btn btn-sm" id="grantsConvert" onClick=${convert}>${tn("grantsConvert")}</button>`}</div>` : null}
-      <h4>${tn("grantsWithAccess")}</h4>
-      ${!rows.length ? html`<p class="note" id="grantsNone">${tn("grantsNoneYet")}</p>` : html`<ul class="guest-list">${rows.map((k) => {
+<div class="s-guest-workbench"><section class="s-guest-list-card"><h4>${layoutText("revGuestManagement")}</h4>
+      <div class="s-guest-columns" aria-hidden="true"><span>${tn("guestsTitle")}</span><span>${layoutText("revVisibleAgents")}</span><span>${layoutText("revGuestLevel")}</span><span>${tn("settingsButton")}</span></div>
+      ${!rows.length ? html`<p class="note" id="grantsNone">${tn("grantsNoneYet")}</p>` : html`<ul class="guest-list">${rows.map(k => {
+        const person=who(k), grant=f.grants?.[k] || original.grants?.[k];
+        return html`<li key=${k} class=${`guest-summary${activeGuest === k ? " is-selected" : ""}`}>
+          <span class="g-summary-name"><strong>${person.name}</strong><small>${PLATFORMS[person.platform] || person.platform}</small></span>
+          <span class="g-summary-agents">${(grant?.instances || []).map(n => html`<span key=${n}>${shownName(rooms,n)}</span>`)}</span>
+          <span>${tn(levelOf(grant) === "trusted" ? "grantsLevelTrusted" : "grantsLevelChat")}</span>
+          <button type="button" class="btn btn-sm" aria-pressed=${activeGuest === k ? "true" : "false"} aria-controls=${`guest-detail-${encodeURIComponent(k)}`} onClick=${() => {setViewedGuest(k);setEditing(k);}}>${tn("settingsButton")}</button>
+        </li>`;
+      })}</ul>`}</section>
+      <aside class="s-guest-detail-card" aria-label=${layoutText("revGuestDetail")}>${rows.map((k) => {
         const person = who(k), draft = f.grants && f.grants[k], saved = original.grants && original.grants[k];
         const removed = !draft, added = !saved, dirty = removed || added || !sameGrant(draft, saved);
         const applied = !!saved && saved.instances.length > 0 && !dirty;
         const ss = sendState[k] || {}, cooling = ss.until && ss.until > now;
-        return html`<li key=${k} class=${`guest-row${dirty ? " s-dirty" : ""}${removed ? " g-removed" : ""}`} data-account=${k}>
+        return html`<section key=${k} hidden=${!readOnly && activeGuest !== k} id=${`guest-detail-${encodeURIComponent(k)}`} class=${`guest-row${dirty ? " s-dirty" : ""}${removed ? " g-removed" : ""}`} data-account=${k}>
           <div class="g-head"><span class="g-av" aria-hidden="true">${(person.name || "?").slice(0, 1).toUpperCase()}</span>
             <div class="g-id"><strong>${person.name}</strong> <span class="note">${PLATFORMS[person.platform] || person.platform}${person.username ? ` · @${person.username}` : ""}</span></div>
             ${removed ? html`<span class="g-state">${tn("grantsWillBeRemoved")}</span>` : added ? html`<span class="g-state">${tn("grantsNew")}</span>` : pill(person)}</div>
@@ -255,23 +269,23 @@ export function GuestsSection({ ctx, staged }) {
               : html`<button type="button" class="btn btn-sm" onClick=${() => setGrant(k, { ...saved })}>${tn("grantsUndoRemove")}</button>`}
             ${person.guest && (person.guest.sessions || person.guest.devices) ? html`<button type="button" class="btn btn-sm" onClick=${() => signOut(person)}>${tn("guestSignOut")}</button>` : null}
           </div>`}
-        </li>`;
-      })}</ul>`}
-      ${readOnly ? null : html`<h4>${tn("grantsAdd")}</h4>
+        </section>`;
+      })}${!rows.length ? html`<p class="note">${layoutText("revSelectGuest")}</p>` : null}</aside></div>
+      ${readOnly ? null : html`<details class="s-guest-add"><summary>${tn("grantsAdd")}</summary><div>
         <input type="search" class="input g-search" id="grantsSearch" value=${query} aria-label=${tn("grantsSearch")} placeholder=${tn("grantsSearch")} onInput=${(e) => setQuery(e.target.value)} />
         ${people === null ? html`<p class="note">${t("app.loading")}</p>` : !candidates.length ? html`<p class="note" id="grantsNoPeople">${tn("grantsNoPeople")}</p>`
           : html`<ul class="g-pick">${candidates.map((p) => html`<li key=${accountKey(p)} class="g-cand" data-account=${accountKey(p)}>
             <span class="g-av" aria-hidden="true">${(p.name || "?").slice(0, 1).toUpperCase()}</span>
             <div class="g-id"><strong>${p.name}</strong> <span class="note">${PLATFORMS[p.platform] || p.platform}${p.username ? ` · @${p.username}` : ""} · <span class="g-when">${tn("grantsLastSeen", new Date(p.lastSeen).toLocaleString())}</span></span>
               ${p.instances && p.instances.length ? html`<div class="note">${wroteTo(p.instances)}</div>` : null}</div>
-            <button type="button" class="btn btn-sm" onClick=${() => { const k = accountKey(p); setGrant(k, { ...(p.name ? { name: p.name } : {}), instances: choosable.filter((n) => (p.instances || []).includes(n)) }); setEditing(k); }}>${tn("grantsChoose")}</button></li>`)}</ul>`}`}
+            <button type="button" class="btn btn-sm" onClick=${() => { const k = accountKey(p); setGrant(k, { ...(p.name ? { name: p.name } : {}), instances: choosable.filter((n) => (p.instances || []).includes(n)) }); setEditing(k); }}>${tn("grantsChoose")}</button></li>`)}</ul>`}</div></details>`}
     </fieldset>
-    ${overview && overview.audit ? html`<h4>${tn("grantsRecent")}</h4>${!overview.audit.length ? html`<p class="note" id="grantsRecentNone">${tn("grantsRecentNone")}</p>`
+    ${overview && overview.audit ? html`<details class="s-guest-audit"><summary>${tn("grantsRecent")}</summary>${!overview.audit.length ? html`<p class="note" id="grantsRecentNone">${tn("grantsRecentNone")}</p>`
       : html`<ul class="g-audit" id="grantsRecentList">${overview.audit.map((e, i) => html`<li key=${`${e.at}-${i}`} class="g-audit-row" data-kind=${e.kind}>
         <span class="g-when">${new Date(e.at).toLocaleString()}</span> <strong>${e.name}</strong>
         ${e.kind === "grant" ? html`${e.added.map((n) => html` <span key=${`+${n}`} class="g-wrote g-add">+${n}</span>`)}${e.removed.map((n) => html` <span key=${`-${n}`} class="g-wrote g-del">−${n}</span>`)}${e.level ? html` <span class="g-wrote g-level-to">${tn("grantsAuditLevel", tn(e.level === "trusted" ? "grantsLevelTrusted" : "grantsLevelChat"))}</span>` : null}
           <span class="note"> · <span class="g-wrote">${tn(e.via === "confirmed" ? "grantsAuditConfirmed" : "grantsAuditDirect")}</span>${e.endedSessions ? html` · <span class="g-wrote">${tn("grantsAuditEnded", e.endedSessions)}</span>` : null}</span>`
-        : html` <span class="note">${e.outcome === "sent" ? tn("grantsAuditCodeSent") : tn("grantsAuditCodeNot", auditOutcome(e.outcome))}</span>`}</li>`)}</ul>`}` : null}
+        : html` <span class="note">${e.outcome === "sent" ? tn("grantsAuditCodeSent") : tn("grantsAuditCodeNot", auditOutcome(e.outcome))}</span>`}</li>`)}</ul>`}</details>` : null}
     ${status && status.kind === "waiting" ? html`<p class="note" role="status">${tn("grantsWaiting")}</p>` : null}
     ${status && status.kind === "failed" ? html`<p class="note g-error" role="alert">${tn("grantsSaveFailed", status.error)}</p>` : null}
   </section>`;

package/dist/ui/settings-hub-browser-certificate.js

@@ -0,0 +1,74 @@
+// Lazy host-only card. Own every string so a retained Settings shell can load this newer card.
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { api, confirmedWrite } from "./settings-confirm.js";
+register("hubBrowserCertificate", {
+  en: {
+    title: "Hub browser certificate", fingerprint: "SHA-256 fingerprint", expires: "Expires", generate: "Generate self-signed certificate",
+    import: "Import a certificate and private key", certificateFile: "Certificate file", keyFile: "Private key file",
+    hint: "File paths are relative to the AgEnD home on the Hub computer. Both files and their parent directories must be private to its owner. The certificate must cover the Hub web address.",
+    boundary: "This changes browser HTTPS only. Member pairing and its transport certificate stay the same.",
+    prepare: "Prepare replacement", replace: "Confirm replacement", saved: "Browser certificate replaced. New connections use it.",
+    restart: "The replacement is saved. Restart the Hub to activate it.",
+    selfSigned: "Self-signed certificate: browsers will warn unless you trust it separately. Confirm the fingerprint before trusting it.",
+    failed: "The certificate could not be prepared or saved. Check the private file paths, key match, web hostname and expiry, or that OpenSSL is installed for generation. Reload and try again.",
+    conflict: "The certificate or proposal changed or expired. Reload and prepare it again.",
+    unavailable: "Start the initialized Hub to view or replace its browser certificate.",
+  },
+  "zh-TW": {
+    title: "Hub 瀏覽器憑證", fingerprint: "SHA-256 指紋", expires: "到期時間", generate: "產生新的自簽憑證",
+    import: "匯入憑證與私鑰", certificateFile: "憑證檔案", keyFile: "私鑰檔案",
+    hint: "檔案路徑相對於 Hub 電腦上的 AgEnD 主目錄。兩個檔案及其上層目錄都必須僅供擁有者存取；憑證必須涵蓋 Hub 網址。",
+    boundary: "這只會變更瀏覽器 HTTPS；成員配對及其傳輸憑證保持不變。",
+    prepare: "準備替換憑證", replace: "確認替換", saved: "已替換瀏覽器憑證；新連線會使用新憑證。",
+    restart: "已儲存替換憑證，請重新啟動 Hub 以套用。",
+    selfSigned: "自簽憑證：除非另外設定信任，否則瀏覽器會顯示警告。請先核對指紋再信任。",
+    failed: "無法準備或儲存憑證。請檢查私有檔案路徑、私鑰是否相符、網址主機名稱與到期時間；產生憑證需要安裝 OpenSSL。請重新整理後再試。",
+    conflict: "憑證或提案已變更或過期，請重新整理後重新準備。", unavailable: "請先啟動已初始化的 Hub，再查看或替換瀏覽器憑證。",
+  },
+});
+const copy = key => t(`hubBrowserCertificate.${key}`), path = "/api/settings/hub/browser-certificate";
+export function HubBrowserCertificateSettings() {
+  const [view, setView] = useState(null), [mode, setMode] = useState("generate"), [certFile, setCertFile] = useState(""), [keyFile, setKeyFile] = useState("");
+  const [proposal, setProposal] = useState(null), [busy, setBusy] = useState(false), [messageKey, setMessageKey] = useState("");
+  useEffect(() => {
+    let live = true;
+    api(path).then(r => { if (live) { if (r.ok && r.body?.certificate) setView(r.body.certificate); else setMessageKey("unavailable"); } },
+      () => { if (live) setMessageKey("unavailable"); });
+    return () => { live = false; };
+  }, []);
+  const fail = r => setMessageKey(r?.body?.error === "conflict" ? "conflict" : "failed");
+  const prepare = async e => {
+    e.preventDefault(); if (!view || busy) return;
+    setBusy(true); setProposal(null); setMessageKey("");
+    try {
+      const body = { mode, revision: view.revision, ...(mode === "import" ? { certificateFile: certFile, keyFile } : {}) };
+      const r = await api(`${path}/prepare`, { method: "POST", body: JSON.stringify(body) });
+      if (r.ok && r.body?.proposal) setProposal(r.body.proposal); else fail(r);
+    } catch { fail(); } finally { setBusy(false); }
+  };
+  const replace = async () => {
+    if (!proposal || busy) return;
+    setBusy(true); setMessageKey("");
+    try {
+      const r = await confirmedWrite(`${path}/apply`, { method: "POST", label: copy("title"), body: { reference: proposal.reference, revision: proposal.revision } });
+      if (r.ok && r.body?.certificate) { setView(r.body.certificate); setProposal(null); setMessageKey(r.body.certificate.restartRequired ? "restart" : "saved"); }
+      else fail(r);
+    } catch { fail(); } finally { setBusy(false); }
+  };
+  const details = info => html`<dl class="s-web-ro"><dt>${copy("fingerprint")}</dt><dd>${info.fingerprint256}</dd><dt>${copy("expires")}</dt><dd>${info.validTo}</dd></dl>`;
+  return html`<section class="card hub-browser-certificate"><h3>${copy("title")}</h3><p class="note">${copy("boundary")}</p>
+    ${view ? html`${details(view.selected)}${view.restartRequired ? html`<p role="status">${copy("restart")}</p>` : null}
+      <form class="form" onSubmit=${prepare}><label class="field"><select aria-label=${copy("title")} value=${mode} disabled=${busy} onChange=${e => { setMode(e.target.value); setProposal(null); }}>
+        <option value="generate">${copy("generate")}</option><option value="import">${copy("import")}</option></select></label>
+        ${mode === "import" ? html`<p class="note">${copy("hint")}</p><div class="grid2">
+          <label class="field">${copy("certificateFile")}<input value=${certFile} disabled=${busy} onInput=${e => { setCertFile(e.target.value); setProposal(null); }} /></label>
+          <label class="field">${copy("keyFile")}<input value=${keyFile} disabled=${busy} onInput=${e => { setKeyFile(e.target.value); setProposal(null); }} /></label>
+        </div>` : null}
+        <button class="btn" disabled=${busy || (mode === "import" && (!certFile || !keyFile))}>${copy("prepare")}</button>
+      </form>` : null}
+    ${proposal ? html`<div class="hub-certificate-proposal">${details(proposal.certificate)}${proposal.certificate.selfSigned ? html`<p role="note">${copy("selfSigned")}</p>` : null}
+      <button class="btn" disabled=${busy} onClick=${replace}>${copy("replace")}</button></div>` : null}
+    ${messageKey ? html`<p role="status">${copy(messageKey)}</p>` : null}
+  </section>`;
+}