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

package/dist/ui/settings-hub-membership.js

@@ -0,0 +1,72 @@
+// Pure lazy owner Settings while off. Hub clients/pairing UI load only after a saved on state and a member page mark.
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { api, confirmedWrite } from "./settings-confirm.js";
+register("hubMembership", {
+  en: {
+    title: "Hub membership", enabled: "Allow this fleet to connect to a Hub",
+    hint: "Off by default. Enabling does not pair a Hub or share an agent; choose those separately below.",
+    off: "Turning this off stops new Hub work and answer disclosure. Existing agent conversations remain.",
+    loading: "Reading membership settings…", pending: "Waiting for owner confirmation…",
+    failed: "The membership change could not be verified. Check again before trying another change.",
+    unavailable: "Membership settings are unavailable. Open this fleet's own owner Settings and check again.",
+    retry: "Check again", reload: "Reload page", reloadHint: "Reload the page to refresh the Hub controls.",
+  },
+  "zh-TW": {
+    title: "Hub 成員功能", enabled: "允許這個艦隊連線至 Hub",
+    hint: "預設關閉。啟用不會自動配對 Hub 或分享代理；請在下方另外選擇。",
+    off: "關閉後會停止新的 Hub 工作與回答傳送，既有代理對話會保留。",
+    loading: "正在讀取成員設定…", pending: "等待擁有者確認…",
+    failed: "無法確認成員設定是否已變更。請再次檢查，再嘗試其他變更。",
+    unavailable: "目前無法使用成員設定。請開啟這個艦隊自己的擁有者設定頁面，再次檢查。",
+    retry: "再次檢查", reload: "重新整理頁面", reloadHint: "請重新整理頁面以更新 Hub 控制項。",
+  },
+});
+const copy = key => t(`hubMembership.${key}`);
+const path = "/api/settings/hub/membership";
+const markedMember = () => String(globalThis.document?.body?.dataset?.hub || "").split(/\s+/).includes("member");
+export function HubMembershipSettings() {
+  const publicPage = globalThis.document?.body?.dataset?.publicLink === "1";
+  const [view, setView] = useState(null), [busy, setBusy] = useState(false), [messageKey, setMessageKey] = useState("loading");
+  const [Connect, setConnect] = useState(null);
+  const owner = useRef({ mounted: true, seq: 0, busy: false });
+  const read = async () => {
+    const seq = ++owner.current.seq;
+    let result; try { result = await api(path); } catch { result = null; }
+    if (!owner.current.mounted || owner.current.seq !== seq) return;
+    if (result?.ok && typeof result.body?.enabled === "boolean") { setView({ enabled: result.body.enabled }); setMessageKey(""); }
+    else { setView(null); setMessageKey("unavailable"); }
+  };
+  useEffect(() => {
+    owner.current.mounted = true;
+    if (!publicPage) read();
+    return () => { owner.current.mounted = false; owner.current.seq++; };
+  }, [publicPage]);
+  useEffect(() => {
+    let live = true;
+    if (!publicPage && view?.enabled && markedMember()) import("./settings-hub.js").then(m => { if (live) setConnect(() => m.HubConnectCard); }, () => {});
+    return () => { live = false; };
+  }, [publicPage, view?.enabled]);
+  const change = async enabled => {
+    if (publicPage || !view || owner.current.busy) return;
+    owner.current.busy = true; owner.current.seq++; setBusy(true); setMessageKey("");
+    try {
+      const result = await confirmedWrite(path, { method: "PUT", body: { enabled }, label: copy("title"),
+        onPending: () => { if (owner.current.mounted) setMessageKey("pending"); } });
+      if (!owner.current.mounted) return;
+      if (result.ok) await read();
+      else { setView(null); setMessageKey("failed"); }
+    } catch { if (owner.current.mounted) { setView(null); setMessageKey("failed"); } }
+    finally { owner.current.busy = false; if (owner.current.mounted) setBusy(false); }
+  };
+  if (publicPage) return null;
+  return html`<div class="form hub-membership-settings"><section class="card">
+    <h3>${copy("title")}</h3><p class="note">${copy("hint")}</p>
+    <label class="check"><input class="s-ui-toggle" type="checkbox" role="switch" checked=${view?.enabled === true}
+      disabled=${!view || busy} onChange=${e => change(e.target.checked)} /><span>${copy("enabled")}</span></label>
+    <p class="note">${copy("off")}</p>
+    ${messageKey ? html`<p role="status">${copy(messageKey)}</p>` : null}
+    ${!view && !busy && messageKey !== "loading" ? html`<button class="btn btn-sm" type="button" onClick=${read}>${copy("retry")}</button>` : null}
+    ${view && view.enabled !== markedMember() ? html`<p class="note">${copy("reloadHint")} <button class="btn btn-sm" type="button" disabled=${busy} onClick=${() => location.reload()}>${copy("reload")}</button></p>` : null}
+  </section>${view?.enabled && markedMember() && Connect ? html`<${Connect} />` : null}</div>`;
+}

package/dist/ui/settings-hub-retention.js

@@ -0,0 +1,52 @@
+// Host-owner Settings only. Own the copy here so an open tab's older Settings strings still work.
+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("hubRetention", {
+  en: {
+    title: "Hub record retention", content: "Question and answer content (days)", events: "Event records (days)",
+    hint: "Choose 1–3650 days. Shorter periods can permanently remove older records at the next daily cleanup. Increasing a period does not restore deleted records.",
+    save: "Save retention", saved: "Retention saved.", failed: "Retention could not be saved. Reload and try again.",
+    conflict: "Retention changed while this page was open. Reload before saving.", unavailable: "Start the initialized Hub to view or change retention.",
+  },
+  "zh-TW": {
+    title: "Hub 紀錄保留期間", content: "提問與回答內容（天）", events: "事件紀錄（天）",
+    hint: "請選擇 1 到 3650 天。縮短天數後，下次每日清理可能永久刪除較早的紀錄；延長天數無法還原已刪除的紀錄。",
+    save: "儲存保留期間", saved: "已儲存保留期間。", failed: "無法儲存保留期間。請重新整理後再試。",
+    conflict: "這個頁面開啟期間，保留設定已變更。請重新整理後再儲存。", unavailable: "請先啟動已初始化的 Hub，再查看或修改保留期間。",
+  },
+});
+const copy = key => t(`hubRetention.${key}`);
+export function HubRetentionSettings() {
+  const [policy, setPolicy] = useState(null), [content, setContent] = useState(""), [events, setEvents] = useState("");
+  const [busy, setBusy] = useState(false), [messageKey, setMessageKey] = useState("");
+  useEffect(() => {
+    let live = true;
+    api("/api/settings/hub/retention").then(r => {
+      if (!live) return;
+      if (r.ok && r.body?.policy) { setPolicy(r.body.policy); setContent(String(r.body.policy.contentDays)); setEvents(String(r.body.policy.eventDays)); }
+      else setMessageKey("unavailable");
+    }, () => { if (live) setMessageKey("unavailable"); });
+    return () => { live = false; };
+  }, []);
+  const valid = value => /^\d{1,4}$/.test(value) && Number(value) >= 1 && Number(value) <= 3650;
+  const save = async e => {
+    e.preventDefault();
+    if (!policy || busy || !valid(content) || !valid(events)) return;
+    setBusy(true); setMessageKey("");
+    try {
+      const r = await confirmedWrite("/api/settings/hub/retention", { method: "PUT", label: copy("title"),
+        body: { contentDays: Number(content), eventDays: Number(events), revision: policy.revision } });
+      if (r.ok && r.body?.policy) { setPolicy(r.body.policy); setMessageKey("saved"); }
+      else setMessageKey(r.body?.error === "conflict" ? "conflict" : "failed");
+    } catch { setMessageKey("failed"); } finally { setBusy(false); }
+  };
+  return html`<section class="card hub-retention"><h3>${copy("title")}</h3>
+    <p class="note">${copy("hint")}</p>
+    ${policy ? html`<form class="form" onSubmit=${save}><div class="grid2">
+      <label class="field">${copy("content")}<input type="number" min="1" max="3650" step="1" value=${content} disabled=${busy} onInput=${e => setContent(e.target.value)} /></label>
+      <label class="field">${copy("events")}<input type="number" min="1" max="3650" step="1" value=${events} disabled=${busy} onInput=${e => setEvents(e.target.value)} /></label>
+    </div><button class="btn" type="submit" disabled=${busy || !valid(content) || !valid(events)}>${copy("save")}</button></form>` : null}
+    ${messageKey ? html`<p role="status">${copy(messageKey)}</p>` : null}
+  </section>`;
+}

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

@@ -0,0 +1,242 @@
+// 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: {
+    account: "Your account", personal: "Your preferences", fleet: "Whole fleet",
+    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": "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.",
+    lead_advanced: "Inspect and edit fleet configuration, with effective values kept separate.",
+    editor: "Configuration editor", effective: "Effective settings (read only)",
+    aiAccounts: "AI accounts and keys", aiAccountsHint: "Sign-ins and supported provider keys on the AgEnD host. Windows CLI status is shown under Runtime.",
+    classicDefaults: "ClassicBot defaults and access",
+  },
+  "zh-TW": {
+    account: "你的帳號", personal: "你的偏好", fleet: "整個 Fleet",
+    lead_preferences: "你的身分、語言與內容偏好。",
+    lead_look: "調整顯示方式，保留你的工作習慣。",
+    lead_agents: "集中管理各個 Runtime 的 Agent、CLI、模型與狀態。",
+    "lead_agent-defaults": "改了會套用到所有沒有自己設定的 Agent，包括之後新建立的。",
+    lead_chat: "連接聊天服務，設定訊息如何進入與送出。",
+    "lead_web-dashboard": "管理整個 Fleet 的網頁功能、品牌與資源限制。",
+    lead_access: "管理登入、網頁授權、訪客與對外分享。",
+    lead_advanced: "檢視與編輯 Fleet 設定，並區分目前生效的唯讀內容。",
+    editor: "設定編輯器", effective: "生效設定（唯讀）",
+    aiAccounts: "AI 帳號與金鑰", aiAccountsHint: "管理 AgEnD 主機的登入與支援的供應商金鑰；Windows CLI 狀態請到 Runtime 查看。",
+    classicDefaults: "ClassicBot 預設行為與存取",
+  },
+});
+
+register("settingsLayout", {
+  en: {
+    aiAccounts: "AI sign-ins and API keys", aiAccountsSummary: "Host CLI sign-ins and provider API keys, managed separately.",
+    aiHostScope: "Credentials on the AgEnD host", aiAccountsHint: "These sign-ins and keys belong to the host running AgEnD.", aiWindowsLink: "Manage Windows computers and their CLIs in Runtime",
+    apiKeysTitle: "Provider API keys", apiKeysHint: "API credentials for supported provider integrations.", apiKeysUnavailableState: "Not offered", apiKeysUnavailable: "Provider API key management is not offered in this session.",
+    apiNewPlaceholder: "Enter an API key to verify", apiReplacePlaceholder: "Enter a replacement API key",
+  },
+  "zh-TW": {
+    aiAccounts: "AI 登入與 API 金鑰", aiAccountsSummary: "分開管理主機 CLI 登入與供應商 API 金鑰。",
+    aiHostScope: "AgEnD 主機上的憑證", aiAccountsHint: "這裡的登入與金鑰屬於執行 AgEnD 的主機。", aiWindowsLink: "前往 Runtime 管理 Windows 電腦與 CLI",
+    apiKeysTitle: "供應商 API 金鑰", apiKeysHint: "供支援的供應商整合功能使用的 API 憑證。", apiKeysUnavailableState: "目前未提供", apiKeysUnavailable: "此工作階段未提供供應商 API 金鑰管理。",
+    apiNewPlaceholder: "輸入要驗證的 API 金鑰", apiReplacePlaceholder: "輸入替換用的 API 金鑰",
+  },
+});
+
+export const layoutText = (key, ...values) => t(`settingsLayout.${key}`, ...values);
+
+register("settingsLayout", {
+  "en": {
+    "accessLogin": "Sign-in & authority",
+    "accessGuests": "Guests",
+    "accessSharing": "Public & sharing",
+    "accessSharingList": "Shared links",
+    "accessPublicCredentials": "Cloudflare connector credentials",
+    "accessPolicyHint": "How access changes take effect",
+    "dashboardFeatures": "Features",
+    "developerReadOnly": "Read-only mode",
+    "developerEditing": "Editing draft",
+    "effectiveKey": "Setting key",
+    "effectiveValue": "Value in effect",
+    "effectiveSource": "Source",
+    "effectiveSourceConfig": "fleet.yaml",
+    "effectiveSourceDefault": "Default"
+  },
+  "zh-TW": {
+    "accessLogin": "登入與授權",
+    "accessGuests": "訪客",
+    "accessSharing": "公開與分享",
+    "accessSharingList": "分享連結",
+    "accessPublicCredentials": "Cloudflare 連接器憑證",
+    "accessPolicyHint": "存取變更如何生效",
+    "dashboardFeatures": "功能",
+    "developerReadOnly": "唯讀模式",
+    "developerEditing": "編輯草稿中",
+    "effectiveKey": "設定鍵",
+    "effectiveValue": "目前生效值",
+    "effectiveSource": "來源",
+    "effectiveSourceConfig": "fleet.yaml",
+    "effectiveSourceDefault": "預設"
+  }
+});
+
+export function SettingsPageHead({ section, children }) {
+  const scope = section === "preferences" ? "account" : section === "look" ? "personal" : "fleet";
+  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.
+const revealers = new Set();
+export function useSettingsTabs(group, initial) {
+  const [value, setValue] = useState(initial);
+  const current = useRef(value);
+  current.current = value;
+  useEffect(() => {
+    const reveal = target => {
+      const panel = target?.closest?.("[data-settings-tabs]");
+      if (!panel || panel.getAttribute("data-settings-tabs") !== group) return false;
+      const next = panel.getAttribute("data-settings-tab");
+      if (!next || next === current.current) return false;
+      current.current = next;
+      setValue(next);
+      return true;
+    };
+    revealers.add(reveal);
+    return () => revealers.delete(reveal);
+  }, [group]);
+  return [value, setValue];
+}
+
+export function revealSettingsTarget(target) {
+  let changed = false;
+  for (const reveal of revealers) changed = reveal(target) || changed;
+  return changed;
+}
+
+export function SettingsTabs({ id, value, onChange, items }) {
+  const choose = (key, focus = false) => {
+    onChange(key);
+    if (focus) document.getElementById(`${id}-tab-${key}`)?.focus();
+  };
+  const keydown = (event, index) => {
+    let next;
+    if (event.key === "ArrowRight") next = (index + 1) % items.length;
+    else if (event.key === "ArrowLeft") next = (index - 1 + items.length) % items.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = items.length - 1;
+    else return;
+    event.preventDefault();
+    choose(items[next].id, true);
+  };
+  return html`<div class="s-page-tabs" role="tablist" aria-label=${t("settings.title")}>${items.map((item, index) => html`<button key=${item.id} id=${`${id}-tab-${item.id}`} type="button" role="tab" class=${value === item.id ? "on" : ""} aria-selected=${value === item.id ? "true" : "false"} aria-controls=${`${id}-panel-${item.id}`} tabindex=${value === item.id ? 0 : -1} onClick=${() => choose(item.id)} onKeyDown=${event => keydown(event, index)}>${item.label}</button>`)}</div>`;
+}
+
+export function SettingsTabPanel({ group, id, active, children }) {
+  return html`<div id=${`${group}-panel-${id}`} class="s-tab-panel" role="tabpanel" aria-labelledby=${`${group}-tab-${id}`} data-settings-tabs=${group} data-settings-tab=${id} hidden=${!active}>${children}</div>`;
+}
+
+register("settingsLayout", {
+  "en": {
+    "profileIdentityDetails": "How agents recognise you",
+    "previewsPersonalHint": "Only affects your preview preference.",
+    "chatConnections": "Chat connections",
+    "messageBehavior": "Message behavior",
+    "pageContents": "On this page"
+  },
+  "zh-TW": {
+    "profileIdentityDetails": "Agent 如何辨識你的身分",
+    "previewsPersonalHint": "只影響你的預覽偏好。",
+    "chatConnections": "聊天連線",
+    "messageBehavior": "訊息行為",
+    "pageContents": "本頁內容"
+  }
+});
+
+register("settingsLayout", {
+  "en": {
+    "revDashboard_log": "Agent log tab",
+    "revDashboardHint_log": "Show prompts, replies, tool steps and fleet events. Secrets are masked; public links can also see it. Enabling needs confirmation.",
+    "revDashboard_usagePub": "Usage over the public link",
+    "revDashboardHint_usagePub": "Offer the fleet usage report over the temporary public link. Guests never see it.",
+    "revDashboard_levels": "Office levels",
+    "revDashboardHint_levels": "Show each agent's lifetime work level on its Office name tag and profile.",
+    "revDashboard_cdn": "CDN libraries in HTML previews",
+    "revDashboardHint_cdn": "Allow cdnjs and jsDelivr. Requests leave this computer, are visible to the CDN and could send page data out.",
+    "revDetails": "Details",
+    "revAccessPolicy": "Loosening access needs fleet administrator confirmation. Tightening applies at once.",
+    "revLoginSessions": "Sign-in sessions",
+    "revPublicSessionLimit": "Public-link sessions are capped at 8 hours, end after 30 minutes idle and never outlive the link.",
+    "revSessionDetails": "Session rules and notifications",
+    "revRelatedAccess": "Other access settings",
+    "revRelatedGuests": "Choose who can sign in and which agents they see.",
+    "revRelatedSharing": "Manage the public entry and read-only shared links.",
+    "revPublicEntry": "Fleet public entry",
+    "revReadOnlySharing": "Time-limited read-only sharing",
+    "revSharingOrigin": "Create new shares from the Office or an HTML preview. Manage existing links below.",
+    "revEffectiveHint": "These are the values in effect. This view is read only; edit supported values in the configuration editor.",
+    "revGoEditor": "Open configuration editor",
+    "revEditorContext": "Fleet configuration · use the form pages for individual settings",
+    "revUpdateCredential": "Update connector credential",
+    "revSetCredential": "Set connector credential",
+    "revAuthorityBrief": "Only signed-in fleet administrators can confirm their account's authority in Discord or Telegram. Guests cannot. Publishing, destructive actions, spending, secrets and passing authority require it.",
+    "revAuthorityDetails": "Authority rules",
+    "revAuthorityEnabled": "Allow web authority",
+    "revAuthorityEnabledHint": "Turning this off invalidates existing authority at once. Turning it back on does not restore it.",
+    "revAuthorityLocal": "Only this computer",
+    "revAuthorityLocalHint": "Allow only this computer's browser. Authority already given over a LAN or tailnet becomes invalid and is not restored by switching this off.",
+    "revAuthorityPublicWarning": "Public links are reached from the internet and Cloudflare sees their traffic. Enabling their authority needs confirmation; re-enabling temporary-link authority ends all earlier authorizations.",
+    "revAuthorityLinks": "Authority over public links",
+    "revGuestManagement": "Guest management",
+    "revVisibleAgents": "Visible agents",
+    "revGuestLevel": "Level",
+    "revGuestDetail": "Selected guest",
+    "revSelectGuest": "Add or choose a guest to manage their access."
+  },
+  "zh-TW": {
+    "revDashboard_log": "Agent 紀錄分頁",
+    "revDashboardHint_log": "顯示提示、回覆、工具步驟與 Fleet 事件；機密值會遮蔽，公開連結也看得到。開啟需確認。",
+    "revDashboard_usagePub": "公開連結提供用量報告",
+    "revDashboardHint_usagePub": "透過臨時公開連結提供 Fleet 用量報告；訪客一律看不到。",
+    "revDashboard_levels": "辦公室等級",
+    "revDashboardHint_levels": "在辦公室名牌與名片上顯示 Agent 依終身工作量得到的等級。",
+    "revDashboard_cdn": "HTML 預覽載入 CDN 函式庫",
+    "revDashboardHint_cdn": "允許 cdnjs 與 jsDelivr。請求會離開本機，CDN 能看到，也可能被頁面用來傳出資料。",
+    "revDetails": "詳細說明",
+    "revAccessPolicy": "放寬存取需要 Fleet 管理員確認；收緊的變更立即生效。",
+    "revLoginSessions": "登入工作階段",
+    "revPublicSessionLimit": "公開連結的工作階段最長 8 小時、閒置 30 分鐘登出，也不會超過連結期限。",
+    "revSessionDetails": "工作階段與通知規則",
+    "revRelatedAccess": "其他存取設定",
+    "revRelatedGuests": "管理可登入的訪客與可見 Agent。",
+    "revRelatedSharing": "管理公開入口與唯讀分享連結。",
+    "revPublicEntry": "Fleet 公開入口",
+    "revReadOnlySharing": "限時唯讀分享",
+    "revSharingOrigin": "新分享請從辦公室或 HTML 預覽建立；在下方管理既有連結。",
+    "revEffectiveHint": "下方為目前生效的設定，僅供檢視；需要修改時，請切換至設定編輯器。",
+    "revGoEditor": "前往設定編輯器",
+    "revEditorContext": "Fleet 設定檔・個別設定可使用對應表單調整",
+    "revUpdateCredential": "更新連接器憑證",
+    "revSetCredential": "設定連接器憑證",
+    "revAuthorityBrief": "僅限已登入的 Fleet 管理者，並須在 Discord 或 Telegram 確認本人帳號授權；訪客不適用。發布、破壞性操作、花費、密鑰與轉交授權都需要它。",
+    "revAuthorityDetails": "授權規則說明",
+    "revAuthorityEnabled": "允許網頁授權",
+    "revAuthorityEnabledHint": "關閉會立即使現有授權失效；重新開啟不會恢復。",
+    "revAuthorityLocal": "僅限本機",
+    "revAuthorityLocalHint": "只接受本機瀏覽器；區域網路與 tailnet 上已給出的授權會失效，關掉此限制也不會恢復。",
+    "revAuthorityPublicWarning": "公開連結可從網際網路存取，Cloudflare 看得到流量。開啟其授權須經確認；重新開啟臨時連結授權會結束之前給出的全部授權。",
+    "revAuthorityLinks": "公開連結的授權範圍",
+    "revGuestManagement": "訪客管理",
+    "revVisibleAgents": "可見 Agent",
+    "revGuestLevel": "等級",
+    "revGuestDetail": "選取的訪客",
+    "revSelectGuest": "新增或選擇訪客後，管理其存取權限。"
+  }
+});

package/dist/ui/settings-model.js

@@ -75,6 +75,14 @@ export const visibilityDefault = (defaults) => (VISIBILITY_MODES.includes(defaul
 export const replyGuardSupported = (backend, mode, kiroUi = "legacy") =>
   mode === "mcp" && (["claude-code", "codex", "muse"].includes(backend) || (backend === "kiro-cli" && ["legacy", "tui"].includes(kiroUi || "legacy")));
 
+/**
+ * Backends AgEnD no longer runs, with the one to use instead (#1280). The browser cannot import src/backend/removed.ts;
+ * tests/settings-removed-backend-1280.test.ts keeps this list equal to it.
+ */
+export const REMOVED_BACKEND_REPLACEMENTS = Object.freeze({ "gemini-cli": "antigravity" });
+export const removedBackendReplacement = (backend) =>
+  typeof backend === "string" && Object.prototype.hasOwnProperty.call(REMOVED_BACKEND_REPLACEMENTS, backend) ? REMOVED_BACKEND_REPLACEMENTS[backend] : null;
+
 /**
  * The backend picker's options. A current value it does not offer (the removed gemini-cli, #1280 review) stays first
  * and selected: otherwise the select falls to its first option and an unrelated edit switches the CLI and account.
@@ -168,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 = {
@@ -191,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 || "",
@@ -215,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). */
@@ -246,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"),