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

package/dist/ui/settings-hub.js

@@ -0,0 +1,196 @@
+// AgEnD Hub P1, slice 3 (docs/design/hub-ui-client.md): Settings → Access & security → "Connect to a Hub", on a member
+// fleet (the page's mark; never drawn or loaded while hub_member is off). The address and one-time code, then each
+// pairing state as it is — waiting (the pairing fingerprint to compare, both confirmations), connected (the approved
+// Hub key's fingerprint), the key changed (both keys, labelled; only pair again or disconnect), on hold (why) — then
+// this fleet's own agents with a Share switch each, against the revision shown (a stale tab gets a conflict, never a
+// silent widening). Everything goes through hubClient(); until slice 1 that is a stub, and the card says so.
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { Icon } from "/assets/ui-icons.js";
+import { confirmDialog } from "/assets/ui-confirm.js";
+import { compareGroups, hubClient, safeWebOrigin, ADDRESS_HINT, CODE_HINT } from "./hub-client.js";
+import { hw, linkHubCss } from "./hub-strings.js";
+import { guidanceFor } from "./hub-provider-guidance.js";
+import { AGENT_CHOICE } from "./hub-agent-copy.js";
+
+const CONNECT_ERRORS = { address: "errAddress", code: "errCode", busy: "errBusy", unreachable: "errUnreachable", refused: "errRefused" };
+const HOLDS = new Set(["unknown_outcome", "expired", "unsaved", "refused", "revoked", "disconnected"]);
+const PUBLISH_ERRORS = { conflict: "errConflict", unsaved: "errUnsaved", not_paired: "errNotPaired", not_enforceable: "agentNotShareable",
+  unknown_view: "agentNotShareable", limit: "errLimit", unavailable: "notAvailable" };
+
+/** A fingerprint: its first 128 bits in groups people compare, the whole digest on request. */
+function Fingerprint({ label, fp }) {
+  const [full, setFull] = useState(false);
+  const digest = fp && fp.digest ? String(fp.digest).toLowerCase() : "";
+  return html`<div class="hub-fp">
+    <span class="hub-fp-label">${label}</span>
+    <code class="hub-fp-groups">${compareGroups(digest)}</code>
+    ${digest.length > 32 ? html`<button type="button" class="btn btn-sm btn-link" aria-expanded=${full ? "true" : "false"} onClick=${() => setFull(!full)}>${hw(full ? "hideFull" : "showFull")}</button>` : null}
+    ${full ? html`<code class="hub-fp-full">${digest}</code>` : null}
+  </div>`;
+}
+
+export function HubConnectCard() {
+  const client = hubClient();
+  const [pairing, setPairing] = useState(null);
+  const [form, setForm] = useState({ address: "", code: "" });
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState(null);
+  const live = useRef(true);
+  useEffect(() => {
+    linkHubCss();
+    live.current = true;
+    client.pairing().then((p) => { if (live.current) setPairing(p); }, () => {});
+    const off = client.subscribe((p) => { if (live.current) setPairing(p); });
+    return () => { live.current = false; off(); };
+  }, []);
+  const act = async (fn) => {
+    if (busy) return;
+    setBusy(true); setMsg(null);
+    try { await fn(); } catch { if (live.current) setMsg({ error: true, text: hw("errFailed") }); }
+    finally { if (live.current) setBusy(false); }
+  };
+  const connect = () => act(async () => {
+    const r = await client.connect({ address: form.address.trim(), code: form.code.trim() });
+    if (!live.current) return;
+    if (r.ok) { setPairing(r.pairing); setForm({ address: "", code: "" }); if (r.pendingConfirmation) setMsg({ error: false, text: hw("pendingSent") }); }
+    else setMsg({ error: true, text: hw(CONNECT_ERRORS[r.error] || "errFailed") });
+  });
+  const disconnect = (name) => act(async () => {
+    const shown = pairing;                                  // #3115 r2: the pairing on screen now, before the dialog
+    if (!(await confirmDialog({ message: hw("disconnectAsk", name), confirmLabel: hw("disconnect"), danger: true }))) return;
+    const r = await client.disconnect(shown);
+    if (!live.current) return;
+    if (!r.ok) { setMsg({ error: true, text: hw("errUnsaved") }); return; }
+    setPairing(await client.pairing());
+    if (r.pendingConfirmation) { setMsg({ error: false, text: hw("pendingSent") }); return; }
+    if (r.remote === "pending") setMsg({ error: false, text: hw("disconnectPending") });
+  });
+  const cancel = () => act(async () => { const p = await client.cancel(); if (live.current) setPairing(p); });
+
+  const p = pairing;
+  let body = null;
+  if (!p) body = null;
+  else if (p.state === "unpaired") {
+    const addressOk = ADDRESS_HINT.test(form.address.trim()), codeOk = CODE_HINT.test(form.code.trim());
+    body = html`<form class="form hub-connect" onSubmit=${(e) => { e.preventDefault(); connect(); }}>
+      <label class="field"><span>${hw("address")}</span><input id="hubAddress" type="url" inputmode="url" autocomplete="off" spellcheck=${false}
+        placeholder=${hw("addressPh")} value=${form.address} onInput=${(e) => { const v = e.target.value; setForm((f) => ({ ...f, address: v })); }} /><small class="note">${hw("addressHint")}</small></label>
+      <label class="field"><span>${hw("code")}</span><input id="hubCode" autocomplete="one-time-code" spellcheck=${false} autocapitalize="characters"
+        value=${form.code} onInput=${(e) => { const v = e.target.value; setForm((f) => ({ ...f, code: v })); }} /></label>
+      <div class="field-row"><button type="submit" class="btn btn-primary" disabled=${busy || !addressOk || !codeOk}>${hw("connect")}</button></div>
+    </form>`;
+  } else if (p.state === "pending") {
+    const step = (ok, key) => html`<li class=${ok ? "is-done" : ""}><${Icon} name=${ok ? "check" : "clock"} size=${14} /><span>${hw(key)}</span><small>${hw(ok ? "done" : "waiting")}</small></li>`;
+    body = html`<div class="hub-state hub-pending" role="status">
+      <h4>${hw("pendingTitle")}</h4>
+      <p class="hub-origin"><code>${p.memberOrigin}</code></p>
+      <${Fingerprint} label=${hw("pairingFp")} fp=${p.fingerprint} />
+      <p class="note">${hw("pendingCompare")}</p>
+      ${p.localConfirmed === false && client.confirmFingerprint ? html`<div class="field-row"><button type="button" class="btn btn-primary hub-local-confirm" disabled=${busy}
+          onClick=${() => act(async () => { const r = await client.confirmFingerprint(p.fingerprint.digest); if (!live.current) return;
+            if (r.ok) { setPairing(r.pairing); if (r.pendingConfirmation) setMsg({ error: false, text: hw("pendingSent") }); }
+            else setMsg({ error: true, text: hw(r.error === "expired" ? "hold_expired" : r.error === "conflict" ? "errConflict" : "errUnsaved") }); })}>${hw("localMatch")}</button></div>`
+        : p.localConfirmed === true ? html`<p class="note hub-local-confirmed">${hw("localConfirmed")}</p>` : null}
+      ${p.ownerConfirmed === null && p.adminApproved === null
+        // S3c: the member cannot see the Hub's progress — the two steps as instructions, no marks.
+        ? html`<p class="hub-steps-lead">${hw("hubStillNeeded")}</p>
+          <ul class="hub-steps hub-steps-unknown"><li><span>${hw("ownerStepHub")}</span></li><li><span>${hw("adminStepHub")}</span></li></ul>
+          <p class="note">${hw("hubProgressHidden")}</p>`
+        : html`<p class="hub-steps-lead">${hw("pendingSteps")}</p>
+          <ul class="hub-steps">${step(p.ownerConfirmed, "ownerStep")}${step(p.adminApproved, "adminStep")}</ul>`}
+      ${Number.isFinite(p.expiresAt) ? html`<p class="note">${hw("expires", new Date(p.expiresAt).toLocaleTimeString())}</p>` : null}
+      <div class="field-row"><button type="button" class="btn" disabled=${busy} onClick=${cancel}>${hw("cancel")}</button></div>
+    </div>`;
+  } else if (p.state === "paired") {
+    const origin = safeWebOrigin(p), name = p.hub.name || p.hub.memberOrigin;
+    body = html`<div class="hub-state hub-paired">
+      <h4>${hw("pairedTitle", name)} <span class=${`hub-link ${p.link === "online" ? "is-online" : "is-offline"}`}>${hw(p.link === "online" ? "online" : "offline")}</span></h4>
+      <p class="hub-origin"><code>${p.hub.memberOrigin}</code></p>
+      <${Fingerprint} label=${hw("hubKeyFp")} fp=${p.hub.fingerprint} />
+      <div class="field-row">
+        ${origin ? html`<a class="btn" href=${origin} target="_blank" rel="noopener noreferrer">${hw("openHub")}<${Icon} name="external" size=${14} /></a>` : null}
+        <button type="button" class="btn btn-danger" disabled=${busy} onClick=${() => disconnect(name)}>${hw("disconnect")}</button>
+      </div>
+    </div>`;
+  } else if (p.state === "key_changed") {
+    const name = p.hub.name || p.hub.memberOrigin;
+    body = html`<div class="hub-state hub-key-changed" role="alert">
+      <h4><${Icon} name="alert" size=${16} /> ${hw("keyTitle")}</h4>
+      <p>${hw("keyLead")}</p>
+      <${Fingerprint} label=${hw("keyApproved")} fp=${p.hub.fingerprint} />
+      <${Fingerprint} label=${hw("keyOffered")} fp=${p.offered} />
+      <div class="field-row">
+        <button type="button" class="btn" disabled=${busy} onClick=${() => act(async () => { const shown = pairing; await client.disconnect(shown); if (live.current) setPairing(await client.pairing()); })}>${hw("repair")}</button>
+        <button type="button" class="btn btn-danger" disabled=${busy} onClick=${() => disconnect(name)}>${hw("disconnect")}</button>
+      </div>
+    </div>`;
+  } else if (p.state === "held" && p.hold === "unavailable") {
+    // An older host (404): one line, no form and no fake hold.
+    body = html`<p class="note hub-unavailable">${hw("notAvailable")}</p>`;
+  } else if (p.state === "held") {
+    body = html`<div class="hub-state hub-held" role="alert">
+      <h4><${Icon} name="pause" size=${16} /> ${hw("heldTitle")}</h4>
+      <p>${hw(HOLDS.has(p.hold) ? `hold_${p.hold}` : "hold_other")}</p>
+      ${p.memberOrigin ? html`<p class="hub-origin"><code>${p.memberOrigin}</code></p>` : null}
+      <div class="field-row"><button type="button" class="btn" disabled=${busy} onClick=${cancel}>${hw(p.hold === "disconnected" ? "startOver" : "holdClear")}</button></div>
+    </div>`;
+  }
+  return html`<section class="card s-hub-connect" id="hub-connect">
+    <h3>${hw("title")}</h3>
+    <p class="note">${hw("lead")}</p>
+    ${client.stub ? html`<p class="note hub-preview" role="note">${hw("preview")}</p>` : null}
+    ${body}
+    ${msg ? html`<p class=${msg.error ? "err" : "note"} role=${msg.error ? "alert" : "status"}>${msg.text}</p>` : null}
+    ${p && p.state === "paired" ? html`<${HubExposures} client=${client} />` : null}
+  </section>`;
+}
+
+/**
+ * This fleet's own agents, each private unless shared — against the revision the page shows. P1 shares the agent
+ * itself (docs/design/hub-representative-agent.md): switching on sends AGENT_CHOICE for the owner's confirmation; a row
+ * shared under the older restricted mode says so and offers "Share again" (a new, confirmed revision).
+ */
+function HubExposures({ client }) {
+  const [rows, setRows] = useState(null);
+  const [busy, setBusy] = useState(null);
+  const [msg, setMsg] = useState(null);
+  const live = useRef(true);
+  const load = () => client.exposures().then((r) => { if (live.current) setRows(r); }, () => { if (live.current) setRows([]); });
+  useEffect(() => { live.current = true; load(); return () => { live.current = false; }; }, []);
+  const toggle = async (row, on) => {
+    if (busy) return;
+    setBusy(row.agent); setMsg(null);
+    try {
+      const r = await client.setExposed(row.agent, on, row.revision, on ? AGENT_CHOICE : null);
+      if (!live.current) return;
+      if (!r.ok) { setMsg({ error: true, text: hw(PUBLISH_ERRORS[r.error] || "errUnsaved") }); if (r.error === "conflict") await load(); return; }
+      if (!on && r.remote === "pending") setMsg({ error: false, text: hw("withdrawPending") });
+      if (r.pending) { setMsg({ error: false, text: hw("pendingSent") }); if (r.settled && r.settled.then) r.settled.then(() => { if (live.current) load(); }, () => { if (live.current) load(); }); }
+      await load();
+    } catch { if (live.current) setMsg({ error: true, text: hw("errUnsaved") }); }
+    finally { if (live.current) setBusy(null); }
+  };
+  return html`<div class="hub-exposures">
+    <h4>${hw("sharedTitle")}</h4>
+    <p class="note">${hw("agentLead")}</p>
+    ${rows && !rows.length ? html`<p class="note">${hw("noAgents")}</p>` : null}
+    ${rows && rows.length ? html`<ul class="hub-exposure-list">${rows.map((row) => html`<li key=${row.agent} class=${`hub-exposure${row.state === "published" ? " is-shared" : ""}`}>
+      <label class="hub-exposure-main">
+        <input class="s-ui-toggle" type="checkbox" role="switch" checked=${row.state === "published"} aria-label=${hw("share", row.display)}
+          disabled=${busy !== null || !!row.pending || row.state === "frozen" || (row.state !== "published" && !row.enforceable)}
+          onChange=${(e) => toggle(row, e.target.checked)} />
+        <span class="hub-exposure-name">${row.display}${row.display !== row.agent ? html` <small><code>${row.agent}</code></small>` : null}</span>
+      </label>
+      ${row.pending ? html`<small class="hub-exposure-why hub-exposure-pending">${hw("waitingConfirm")}</small>`
+        : row.state === "frozen" ? html`<small class="hub-exposure-why">${hw("frozen")}</small>`
+        : !row.enforceable && row.state !== "published" ? html`<small class="hub-exposure-why">${hw(row.reason === "delivery_unavailable" ? "agentDeliveryUnavailable" : "agentNotShareable")}</small>`
+        : row.reason === "republish_required" ? html`<small class="hub-exposure-why hub-exposure-republish">${hw("republishRequired")}
+            <button type="button" class="btn btn-sm" disabled=${busy !== null} onClick=${() => toggle(row, true)}>${hw("shareAgain")}</button></small>`
+        : row.policy && row.policy.dataView === AGENT_CHOICE.dataViewId ? html`<small class="hub-exposure-why">${hw("agentShared")}</small>`
+        : row.policy ? html`<small class="hub-exposure-why">${hw("policy", row.policy.dataView, row.policy.tools.join(", ") || "—")}</small>` : null}
+      ${!row.enforceable && row.state !== "frozen" && guidanceFor(row.reason)
+        ? html`<small class="hub-exposure-why hub-provider-guidance">${hw(guidanceFor(row.reason))}</small>` : null}
+    </li>`)}</ul>` : null}
+    ${msg ? html`<p class=${msg.error ? "err" : "note"} role=${msg.error ? "alert" : "status"}>${msg.text}</p>` : null}
+  </div>`;
+}

package/dist/ui/settings-layout.js

@@ -1,6 +1,9 @@
 // Shared presentation for Settings. Tab panels stay mounted so switching views never drops a form's draft.
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { register, t } from "/assets/app-i18n.js";
+import { PageHead } from "/assets/page-head.js";
+import "./settings-strings.js";
+import "./settings-shared-strings.js";   // SettingsPageHead prints settings.sec_<section>; sec_agent-defaults is one of these words (#3087)
 
 register("settingsLayout", {
   en: {
@@ -8,7 +11,7 @@ register("settingsLayout", {
     lead_preferences: "Your identity, language and content preferences.",
     lead_look: "Choose how AgEnD looks and keep your workspace comfortable.",
     lead_agents: "Manage agents across runtimes, with their CLI, model and status in one place.",
-    "lead_agent-defaults": "Defaults for new agents. Each agent can override the settings it supports.",
+    "lead_agent-defaults": "Changes here apply to every agent that has no setting of its own — including agents you create later.",
     lead_chat: "Connect chat services and choose how messages are received and delivered.",
     "lead_web-dashboard": "Manage fleet-wide dashboard features, branding and resource limits.",
     lead_access: "Manage sign-in, web authority, guests and sharing.",
@@ -22,7 +25,7 @@ register("settingsLayout", {
     lead_preferences: "你的身分、語言與內容偏好。",
     lead_look: "調整顯示方式，保留你的工作習慣。",
     lead_agents: "集中管理各個 Runtime 的 Agent、CLI、模型與狀態。",
-    "lead_agent-defaults": "新 Agent 的預設行為；個別 Agent 可覆寫支援的設定。",
+    "lead_agent-defaults": "改了會套用到所有沒有自己設定的 Agent，包括之後新建立的。",
     lead_chat: "連接聊天服務，設定訊息如何進入與送出。",
     "lead_web-dashboard": "管理整個 Fleet 的網頁功能、品牌與資源限制。",
     lead_access: "管理登入、網頁授權、訪客與對外分享。",
@@ -87,7 +90,7 @@ register("settingsLayout", {
 
 export function SettingsPageHead({ section, children }) {
   const scope = section === "preferences" ? "account" : section === "look" ? "personal" : "fleet";
-  return html`<header class="s-page-head"><div><div class="s-page-title"><h2>${t(`settings.sec_${section}`)}</h2><span class="s-scope">${layoutText(scope)}</span></div><p class="s-page-lead">${layoutText(`lead_${section}`)}</p></div>${children ? html`<div class="s-page-actions">${children}</div>` : null}</header>`;
+  return html`<${PageHead} title=${t(`settings.sec_${section}`)} scope=${layoutText(scope)} lead=${layoutText(`lead_${section}`)}>${children}</${PageHead}>`;
 }
 
 // Settings search, validation links and legacy anchors reveal their owning tab before focusing a control.
@@ -146,20 +149,14 @@ register("settingsLayout", {
     "previewsPersonalHint": "Only affects your preview preference.",
     "chatConnections": "Chat connections",
     "messageBehavior": "Message behavior",
-    "pageContents": "On this page",
-    "defaultsAccessWorkspace": "Permissions and workspace",
-    "replyRulesHelp": "Reply rules",
-    "replySupportHelp": "CLI support"
+    "pageContents": "On this page"
   },
   "zh-TW": {
     "profileIdentityDetails": "Agent 如何辨識你的身分",
     "previewsPersonalHint": "只影響你的預覽偏好。",
     "chatConnections": "聊天連線",
     "messageBehavior": "訊息行為",
-    "pageContents": "本頁內容",
-    "defaultsAccessWorkspace": "權限與工作區",
-    "replyRulesHelp": "回覆規則說明",
-    "replySupportHelp": "CLI 支援情況"
+    "pageContents": "本頁內容"
   }
 });
 

package/dist/ui/settings-model.js

@@ -176,6 +176,11 @@ export function groupAgents(instances, live, filter, groupFor = (n) => groupOf(i
  * (the key is removed); the visibility baseline is what the picker showed, so a value it cannot show (a typo, read as
  * unset) is never rewritten by an unrelated edit (#1302).
  */
+/** The agent's own Codex speed, as the picker shows it ("" when unset or not one AgEnD knows). */
+export function codexSpeedOf(inst) {
+  const v = inst && inst.backend_options && inst.backend_options.codex && inst.backend_options.codex.speed;
+  return v === "fast" || v === "standard" ? v : "";
+}
 export function agentPatch(form, inst, defaults, visibilityBaseline, statusEmojisBaseline) {
   const hang = inst.hang_detector || {};
   const next = {
@@ -199,7 +204,7 @@ export function agentPatch(form, inst, defaults, visibilityBaseline, statusEmoji
     office_access: separateChoice(form.dashboard.office),
     office_pack_access: separateChoice(form.dashboard.office_packs),
   };
-  return changedFields(next, {
+  return Object.assign(changedFields(next, {
     backend: inst.backend || defaults.backend || "claude-code",
     model: (inst.model && inst.model.trim()) || null,
     working_directory: inst.working_directory || "",
@@ -223,7 +228,15 @@ export function agentPatch(form, inst, defaults, visibilityBaseline, statusEmoji
     dashboard: dashboardPatchValue(dashboardForm(inst)),
     office_access: separateChoice(dashboardForm(inst).office),
     office_pack_access: separateChoice(dashboardForm(inst).office_packs),
-  });
+  }), codexSpeedPatch(form, inst));
+}
+/**
+ * M-2446: only the Codex speed key, merged per backend by the server (settings-instance-patch.ts), so the agent's other
+ * backend options are kept; back to "" removes it (null). Nothing when it did not change.
+ */
+function codexSpeedPatch(form, inst) {
+  const next = form.codex_speed || "";
+  return next === codexSpeedOf(inst) ? {} : { backend_options: { codex: { speed: next || null } } };
 }
 
 /** The agent form's starting values (an override shows the inherited value while "inherit" is on). */
@@ -254,6 +267,7 @@ export function agentForm(inst, defaults, name = "") {
     display_name: inst.display_name ?? defaults.display_name ?? "",
     status_emojis: inst.status_emojis || null,
     dashboard: dashboardForm(inst),
+    codex_speed: codexSpeedOf(inst),
     inherit: {
       auto_pause_after: inherit("auto_pause_after"), hang: !hasOwn(hang, "timeout_minutes"), agent_mode: inherit("agent_mode"),
       tool_set: inherit("tool_set"), tool_progress: inherit("tool_progress"), cross_instance_visibility: inherit("cross_instance_visibility"),

package/dist/ui/settings-outside.js

@@ -5,15 +5,20 @@
 // Every change applies at once (an action, not a staged setting) and is this computer's only: elsewhere the card shows
 // the state, read-only. The server decides who may (GET /ui/outside's `here`) and refuses everything else regardless.
 // The words are the leader's (cid-alpha3-design, strings 1–13 and 17).
+// Refs #3061: "Set up authenticator app" / "Set up again" open the reference page's dialog (the app's own Dialog: the
+// browser traps focus and closes it on Esc; focus goes back to the button that opened it) — the QR code and the key (step 1),
+// the code field (step 2), Cancel and "Verify and turn on". A wrong code is answered inside the dialog.
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t, register } from "/assets/app-i18n.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
+import { Dialog } from "/assets/ui-dialog.js";
 import { api } from "./settings-confirm.js";
 
 register("outside", {
   en: {
-    title: "Connections from outside", switch: "Allow connections from outside",
+    title: "Owner verification", lead: "Use your authenticator app's 6-digit code to prove, from outside, that you own this fleet.",
+    stateOn: "Authenticator set up", stateOff: "Not set up", switch: "Allow connections from outside",
     needApp: "Set up an authenticator app first. Signing in from outside will ask for its code.",
     setUp: "Set up authenticator app",
     scan: "Scan this with Authy, Google Authenticator or Microsoft Authenticator, or type the key. Then enter the 6-digit code it shows.",
@@ -21,21 +26,32 @@ register("outside", {
     againConfirm: "Codes from the old app stop working, and everyone signed in from outside is signed out.",
     remove: "Remove", removeConfirm: "Connections from outside are turned off, and everyone signed in from outside is signed out.",
     openAt: "Open at {0}.", quick: "A quick link gets a new address each time it opens.",
-    hereOnly: "Only on the AgEnD computer.", lostPhone: "Lost your phone? On the AgEnD computer, choose “Set up again”.",
+    hereOnly: "Only on the AgEnD computer. Go back to that computer to set up, set up again or remove the app.",
+    lostPhone: "Lost your phone? On the AgEnD computer, choose “Set up again”. There is no email or backup-code recovery.",
+    noRecovery: "If you lose the authenticator, set it up again on the AgEnD computer. There is no email or backup-code recovery.",
+    appsLabel: "Works with these authenticator apps", appOther: "Other TOTP authenticators",
+    step1: "1. Add AgEnD to your authenticator", step2: "2. Enter the authenticator code to finish",
+    activate: "Verify and turn on", removeTitle: "Remove the authenticator app?",
     wrong: "That code didn't work. Check that your phone's clock is right and try the newest code.",
     paused: "Too many wrong codes. Try again in {0}.", code: "Authenticator code", key: "Key",
     minutes: "{0} minutes", minute: "1 minute", hours: "{0} hours", hour: "1 hour",
   },
   "zh-TW": {
-    title: "從外面連線", switch: "允許從外面連線",
+    title: "擁有者驗證", lead: "使用驗證器 App 的 6 位數代碼，從外面證明你是這個 fleet 的擁有者。",
+    stateOn: "驗證器已設定", stateOff: "尚未設定", switch: "允許從外面連線",
     needApp: "請先設定驗證器 App。從外面登入時會要求輸入它的代碼。",
-    setUp: "設定驗證器 App",
+    setUp: "設定驗證器",
     scan: "用 Authy、Google Authenticator 或 Microsoft Authenticator 掃描，或手動輸入金鑰，再輸入 App 顯示的 6 位數代碼。",
-    setUpOn: "驗證器 App 已於 {0} 設定。", again: "重新設定",
+    setUpOn: "驗證器 App 已於 {0} 設定。", again: "重新綁定驗證器",
     againConfirm: "舊 App 的代碼會失效，所有從外面登入的人都會被登出。",
-    remove: "移除", removeConfirm: "從外面連線會關閉，所有從外面登入的人都會被登出。",
+    remove: "停用", removeConfirm: "從外面連線會關閉，所有從外面登入的人都會被登出。",
     openAt: "已開啟：{0}。", quick: "快速連結每次開啟網址都不同。",
-    hereOnly: "只能在 AgEnD 電腦上變更。", lostPhone: "手機遺失？請在 AgEnD 電腦上選「重新設定」。",
+    hereOnly: "只能在 AgEnD 電腦上變更。設定、重新綁定或停用驗證器，請回到那台電腦操作。",
+    lostPhone: "手機遺失？請在 AgEnD 電腦上選「重新綁定驗證器」。沒有電子郵件或備援碼復原。",
+    noRecovery: "遺失驗證器時，請回 AgEnD 主機重新綁定。沒有電子郵件或備援碼復原。",
+    appsLabel: "可使用的驗證器 App", appOther: "其他 TOTP 驗證器",
+    step1: "1. 在驗證器中新增 AgEnD", step2: "2. 輸入驗證器代碼以完成綁定",
+    activate: "驗證並啟用", removeTitle: "停用驗證器？",
     wrong: "代碼不對。請確認手機時間正確，並輸入最新的代碼。",
     paused: "錯誤次數太多，請 {0} 後再試。", code: "驗證器代碼", key: "金鑰",
     minutes: "{0} 分鐘", minute: "1 分鐘", hours: "{0} 小時", hour: "1 小時",
@@ -82,6 +98,25 @@ function Qr({ uri }) {
     <rect width=${shape.size} height=${shape.size} fill="#fff" /><path d=${shape.d} fill="#000" /></svg>`;
 }
 
+/**
+ * Refs #3061 review (P2 2): ONE enrolment request at a time, however often the dialog is closed and opened again. The server
+ * keeps a single pending secret: every POST /ui/outside/enroll replaces it. With the dialog able to close while a request
+ * is still out, "close, open again" used to send a second one; whichever reached the server last then decided which secret
+ * would confirm, and when that was the first (closed) one, the secret on the screen — the second's — was already replaced:
+ * its valid code failed. Dropping the first answer in the page cannot undo what the server did. So while a request is out
+ * the next dialog waits for that same answer and shows it (it is the only secret there is); a new one is asked for only
+ * when none is. Held outside the card: a card that is unmounted and mounted again (the person went to another section and
+ * back) meets the same request.
+ */
+let enrolling = null;
+function askEnrollment() {
+  if (!enrolling) {
+    const asked = (async () => { try { return await api("/ui/outside/enroll", { method: "POST", body: "{}" }); } catch { return null; } })();
+    enrolling = asked.finally(() => { enrolling = null; });
+  }
+  return enrolling;
+}
+
 /**
  * #3035 review: how often the card reads the state again while it is shown — quickly while the link is opening (the
  * switch answers before the link is up), slowly otherwise (its lifetime ending, a wait starting or ending elsewhere).
@@ -89,10 +124,12 @@ function Qr({ uri }) {
 export const outsidePoll = { quickMs: 2000, slowMs: 15000 };
 
 export function OutsideCard() {
-  const [s, setS] = useState(null), [enroll, setEnroll] = useState(null), [code, setCode] = useState(""), [msg, setMsg] = useState(""), [busy, setBusy] = useState(false);
+  // `dlg`: the set-up dialog while it is open — { kind: "setup" | "again", enroll: null (asking the server) | { secret, uri } }.
+  const [s, setS] = useState(null), [dlg, setDlg] = useState(null), [code, setCode] = useState(""), [msg, setMsg] = useState(""), [busy, setBusy] = useState(false);
   // Fences: an answer that arrives after the card is gone, or after a newer read began, is dropped; nor does a read
-  // land while an action is under way (the box shows the click until the action's own read).
-  const live = useRef({ mounted: true, seq: 0, busy: false });
+  // land while an action is under way (the box shows the click until the action's own read). `dlg`: the same for the
+  // dialog's enrolment (closed meanwhile: its answer is dropped); `refocus`: the dialog just closed, focus goes back.
+  const live = useRef({ mounted: true, seq: 0, busy: false, dlg: 0, dlgOpen: false, refocus: false }), card = useRef(null);
   // Every read that ends (answered or not) moves `rev`: the next one is scheduled from there, so a failed read (the
   // network, a 5xx, an unreadable answer) never stops the card reading again (#3035 review r2) — and keeps what it
   // showed meanwhile.
@@ -116,29 +153,50 @@ export function OutsideCard() {
     const timer = setTimeout(() => { if (!live.current.busy) load(); else setRev((n) => n + 1); }, delay);
     return () => clearTimeout(timer);
   }, [rev]);
+  // The dialog closed (Cancel, Esc, ×, or done): focus goes back to the button that opened it — or to the one that took its
+  // place when the set-up finished ("Set up authenticator app" turned into "Set up again"). The Dialog itself returns focus to
+  // whatever was focused when it opened; a browser that does not focus a button on click leaves that as the page, so the card says it.
+  useEffect(() => {
+    if (dlg || busy || !live.current.refocus) return;
+    live.current.refocus = false;
+    const el = card.current && card.current.querySelector(s && s.enrolled ? "#outAgain" : "#outSetUp");
+    if (el && !el.disabled && typeof el.focus === "function") el.focus();
+  }, [dlg, busy]);
   if (!s || !s.webOnly) return null;
   const here = s.here === true;
   const act = async (fn) => {
     setBusy(true); setMsg(""); live.current.busy = true; live.current.seq++;      // a read under way is outdated now
     try { await fn(); } finally { live.current.busy = false; if (live.current.mounted) { setBusy(false); load(); } }
   };
-  const begin = () => act(async () => {
-    const r = await api("/ui/outside/enroll", { method: "POST", body: "{}" });
-    if (r.ok && r.body && r.body.secret) { setEnroll(r.body); setCode(""); } else toast(t("app.failed"), false);
-  });
-  const confirm = () => act(async () => {
-    const r = await api("/ui/outside/enroll/confirm", { method: "POST", body: JSON.stringify({ code }) });
-    if (r.ok) { setEnroll(null); setCode(""); return; }
-    const why = r.body && r.body.error;
-    if (why === "expired") { setEnroll(null); return; }
+  // Open the dialog at once (the button that opened it still has focus) and ask the server for the secret meanwhile; if it
+  // will not give one, the dialog closes with the page's usual "failed". Nothing is changed until the right code is confirmed.
+  const begin = async (kind) => {
+    if (!here || live.current.dlgOpen) return;                                    // not here, or one is open already
+    const id = ++live.current.dlg;
+    live.current.dlgOpen = true;
+    setDlg({ kind, enroll: null }); setCode(""); setMsg("");
+    const r = await askEnrollment();                                              // one at a time: a request still out is this dialog's too
+    if (!live.current.mounted || id !== live.current.dlg) return;                 // closed (or gone) while it was asked
+    if (r && r.ok && r.body && r.body.secret) setDlg({ kind, enroll: r.body });
+    else { closeDlg(); toast(t("app.failed"), false); }
+  };
+  function closeDlg() {
+    live.current.dlg++;                                                           // a late answer to the enrolment is dropped
+    live.current.dlgOpen = false;
+    live.current.refocus = true;
+    setDlg(null); setCode(""); setMsg("");
+  }
+  const submitBind = () => act(async () => {
+    let r;
+    try { r = await api("/ui/outside/enroll/confirm", { method: "POST", body: JSON.stringify({ code }) }); } catch { r = null; }
+    if (r && r.ok) { await load(); closeDlg(); return; }                          // read first: the card behind is the new state when it closes
+    const why = r && r.body && r.body.error;
+    if (why === "expired") { closeDlg(); return; }
     setMsg(why === "wrong" ? to("wrong") : t("app.failed"));
   });
-  const again = async () => {
-    if (!(await confirmDialog({ title: to("again"), message: to("againConfirm"), confirmLabel: to("again"), danger: true }))) return;
-    begin();
-  };
+  const canConfirm = !!(dlg && dlg.enroll) && /^\s*\d{3}\s?\d{3}\s*$/.test(code);
   const remove = async () => {
-    if (!(await confirmDialog({ title: to("remove"), message: to("removeConfirm"), confirmLabel: to("remove"), danger: true }))) return;
+    if (!(await confirmDialog({ title: to("removeTitle"), message: to("removeConfirm"), confirmLabel: to("remove"), danger: true }))) return;
     act(async () => { const r = await api("/ui/outside/remove", { method: "POST", body: "{}" }); if (!r.ok) toast(t("app.failed"), false); });
   };
   // The box follows the click at once (smoke-web-outside-3008: a controlled box that waits for the server reads as a
@@ -148,7 +206,8 @@ export function OutsideCard() {
     if (!r.ok) toast(t("app.failed"), false);
   }); };
   const link = s.link, open = link && link.state === "open";
-  return html`<section class="card s-outside" id="outsideCard"><h3>${to("title")}</h3>
+  return html`<section class="card s-outside" id="outsideCard" ref=${card}><header class="s-auth-section-head"><div><h3>${to("title")}</h3><p id="outLead">${to("lead")}</p></div><span class=${`s-auth-state${s.enrolled ? " is-usable" : ""}`} id="outState">${to(s.enrolled ? "stateOn" : "stateOff")}</span></header>
+    <div class="chips s-out-apps" id="outApps" role="list" aria-label=${to("appsLabel")}><span class="tag" role="listitem">Google Authenticator</span><span class="tag" role="listitem">Microsoft Authenticator</span><span class="tag" role="listitem">${to("appOther")}</span></div>
     ${!here ? html`<p class="note" id="outHereOnly">${to("hereOnly")}</p>` : null}
     <label class="check"><input id="outSwitch" type="checkbox" checked=${s.outside} disabled=${!here || busy || (!s.enrolled && !s.outside)}
       onChange=${(e) => flip(e.target.checked)} /><span>${to("switch")}</span></label>
@@ -156,21 +215,28 @@ export function OutsideCard() {
     ${s.outside && open && link.url ? html`<p class="note" id="outOpenAt">${to("openAt", link.url)}${link.quick ? ` ${to("quick")}` : ""}</p>` : null}
     ${s.outside && link && !open ? html`<p class="note" id="outStarting">${t("app.loading")}</p>` : null}
     ${s.pausedForMs > 0 ? html`<p class="note s-va-warn" role="status" id="outPaused">${to("paused", waitWords(s.pausedForMs))}</p>` : null}
-    ${enroll ? html`<div class="s-out-enroll" id="outEnroll">
+    ${s.enrolled ? html`<p class="note" id="outSetUpOn">${to("setUpOn", new Date(s.enrolledAt).toLocaleDateString())}</p>
+        <p class="note">${to("lostPhone")}</p>
+        ${here ? html`<div class="save-row"><button type="button" class="btn" id="outAgain" disabled=${busy} onClick=${() => begin("again")}>${to("again")}</button>
+          <button type="button" class="btn btn-danger" id="outRemove" disabled=${busy} onClick=${remove}>${to("remove")}</button></div>` : null}`
+      : html`<p class="note" id="outNoRecovery">${to("noRecovery")}</p>${here ? html`<div class="save-row"><button type="button" class="btn btn-primary" id="outSetUp" disabled=${busy} onClick=${() => begin("setup")}>${to("setUp")}</button></div>` : null}`}
+    ${dlg ? html`<${Dialog} title=${to(dlg.kind === "again" ? "again" : "setUp")} onClose=${closeDlg} busy=${busy} actions=${html`
+        <button type="button" class="btn" id="outCancel" disabled=${busy} onClick=${closeDlg}>${t("app.cancel")}</button>
+        <button type="button" class="btn btn-primary" id="outConfirm" disabled=${busy || !canConfirm} onClick=${submitBind}>${to("activate")}</button>`}>
+      <div class="s-out-enroll" id="outEnroll">${dlg.enroll ? html`
+        <p class="s-out-step" id="outStep1"><strong>${to("step1")}</strong></p>
         <p class="note">${to("scan")}</p>
-        <${Qr} uri=${enroll.uri} />
-        <p class="note">${to("key")}: <code id="outKey">${keyGroups(enroll.secret)}</code></p>
+        <${Qr} uri=${dlg.enroll.uri} />
+        <p class="note">${to("key")}: <code id="outKey">${keyGroups(dlg.enroll.secret)}</code></p>
+        <p class="s-out-step" id="outStep2"><strong>${to("step2")}</strong></p>
         <div class="field"><label for="outCode">${to("code")}</label>
           <input id="outCode" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="7" placeholder="123456" value=${code}
-            onInput=${(e) => setCode(e.target.value)} /></div>
-        ${msg ? html`<p class="feedback error" role="alert" id="outMsg">${msg}</p>` : null}
-        <div class="save-row"><button type="button" class="btn" id="outCancel" disabled=${busy} onClick=${() => { setEnroll(null); setMsg(""); }}>${t("app.cancel")}</button>
-          <button type="button" class="btn btn-primary" id="outConfirm" disabled=${busy || !/^\s*\d{3}\s?\d{3}\s*$/.test(code)} onClick=${confirm}>${t("app.confirmOk")}</button></div>
-      </div>`
-      : s.enrolled ? html`<p class="note" id="outSetUpOn">${to("setUpOn", new Date(s.enrolledAt).toLocaleDateString())}</p>
-        <p class="note">${to("lostPhone")}</p>
-        ${here ? html`<div class="save-row"><button type="button" class="btn" id="outAgain" disabled=${busy} onClick=${again}>${to("again")}</button>
-          <button type="button" class="btn btn-danger" id="outRemove" disabled=${busy} onClick=${remove}>${to("remove")}</button></div>` : null}`
-      : here ? html`<div class="save-row"><button type="button" class="btn btn-primary" id="outSetUp" disabled=${busy} onClick=${begin}>${to("setUp")}</button></div>` : null}
+            onInput=${(e) => setCode(e.target.value)}
+            onKeyDown=${(e) => { if (e.key === "Enter" && canConfirm && !busy) { e.preventDefault(); submitBind(); } }} /></div>
+        ${dlg.kind === "again" ? html`<p class="note" id="outAgainNote">${to("againConfirm")}</p>` : null}
+        <p class="note" id="outEnrollNoRecovery">${to("noRecovery")}</p>
+        ${msg ? html`<p class="feedback error" role="alert" id="outMsg">${msg}</p>` : null}`
+        : html`<p class="note" id="outEnrollLoading">${t("app.loading")}</p>`}</div>
+    </${Dialog}>` : null}
   </section>`;
 }

package/dist/ui/settings-registry.js

@@ -6,7 +6,9 @@ import { lang, tIn } from "/assets/app-i18n.js";
 import { sectionPath } from "/assets/app-route.js";
 import { navigate } from "/assets/app-nav.js";
 import "./settings-strings.js";
-import "./chat-strings.js";
+import "./settings-shared-strings.js";   // search shows these labels from outside Settings (dailyTips, hangEnabled, crossInstanceVisibility)
+import "./settings-access-strings.js";   // …and this one (webLoginQr), added by Access & security (#3061)
+import "/assets/chat-strings.js";
 import { GUESTS_SETTINGS } from "./settings-guests.js";
 
 const L = (en, zh) => ({ en, "zh-TW": zh });
@@ -42,6 +44,7 @@ const ROWS = [
   ["runtimes.machines", "runtimes", ".runtime-settings", "settings.sec_runtimes", null, ["runtime", "computer", "machine", "pair", "connect", "windows", "linux", "CLI"], ["執行環境", "電腦", "機器", "配對", "連接", "Windows", "CLI"]],
   ["defaults.tips", "agent-defaults", "#g-tips", "settings.dailyTips", "defaults.tips", ["daily tips", "notices"], ["每日提示"]],
   ["web.notify-login", "access", "#webNotifyLogin", "settings.webNotifyLogin", "web.notify_login", ["sign in", "login", "notices"], ["登入通知"]],
+  ["web.login-qr", "access", "#webLoginQr", "settings.webLoginQr", "web.login_qr", ["qr", "qr code", "sign in", "another device", "scan", "device"], ["QR", "QR Code", "登入", "其他裝置", "掃描"]],
   // Fleet · Agent defaults
   ["defaults.locale", "agent-defaults", "#g-locale", "settings.language", "defaults.locale", ["language", "bot language", "reply language", "locale"], ["語言", "回覆語言", "bot 語言"]],
   ["defaults.backend", "agent-defaults", "#g-be", "settings.defaultBackend", "defaults.backend", ["backend", "cli", "claude", "codex", "kiro"], ["後端", "CLI"]],