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

package/dist/ui/settings-dialogs.js

@@ -17,6 +17,7 @@ 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 { backendChoices, modelChoices, OTHER_MODEL, useBackendRows, useModelCatalogState } from "./settings-catalog.js";
 import {
@@ -146,9 +147,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>`}>
@@ -281,8 +282,13 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
     auto: f.inherit.auto_pause_after ? "" : nonNegative(f.auto_pause_after),
     hang: f.inherit.hang ? "" : positive(f.hang),
   };
+  // #3008 G1: a fleet with no chat connection has one General at most — ticking a second says which one it is, right
+  // by the checkbox (kept ticked, Save waits), by the name the chat list shows (the leader's string 18).
+  const otherGeneral = !channelsOf(fleet).length && f.general_topic && !inst.general_topic
+    ? Object.entries(fleet.instances || {}).find(([other, c]) => other !== name && c && (c.general_topic === true || (other === "general" && c.general_topic !== false))) : null;
+  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;
+  const ready = !errors.auto && !errors.hang && !generalError;
   const pending = () => agentPatch({ ...f, status_emojis: emojis.value }, inst, defaults, visibilityBaseline, emojis.baseline);
   const stage = () => {
     if (!ready) return;
@@ -297,14 +303,13 @@ 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>
     </div>
@@ -360,8 +365,9 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
       </div>
       <div class="field">${L(tn("systemPrompt"), "instance.systemPrompt", "ag-sys")}<input id="ag-sys" type="text" placeholder="e.g. file:prompts/dev.md" value=${f.systemPrompt} onInput=${(e) => set("systemPrompt")(e.target.value)} /></div>
       <div class="field">${L(tn("tags"), "instance.tags")}<${ChipList} items=${f.tags} onChange=${set("tags")} placeholder=${tn("tagPlaceholder")} label=${tn("tags")} /></div>
-      <label class="check"><input type="checkbox" checked=${f.general_topic} onChange=${(e) => set("general_topic")(e.target.checked)} /><span>${tn("generalTopicField")}</span>
+      <label class="check"><input id="ag-general" type="checkbox" checked=${f.general_topic} onChange=${(e) => set("general_topic")(e.target.checked)} /><span>${tn("generalTopicField")}</span>
         <${Impact} schema=${schema} field="instance.general_topic" /></label>
+      ${generalError ? html`<p class="feedback error" role="alert" id="ag-general-one">${generalError}</p>` : null}
     </${Drawer}>
     <${Drawer} title=${tn("statusEmojis")}>
       <p class="note">${tn("statusEmojisInstance")} <${Impact} schema=${schema} field="instance.status_emojis" /></p>

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-layout.js

@@ -0,0 +1,245 @@
+// 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";
+
+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": "Defaults for new agents. Each agent can override the settings it supports.",
+    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 的預設行為；個別 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`<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>`;
+}
+
+// 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",
+    "defaultsAccessWorkspace": "Permissions and workspace",
+    "replyRulesHelp": "Reply rules",
+    "replySupportHelp": "CLI support"
+  },
+  "zh-TW": {
+    "profileIdentityDetails": "Agent 如何辨識你的身分",
+    "previewsPersonalHint": "只影響你的預覽偏好。",
+    "chatConnections": "聊天連線",
+    "messageBehavior": "訊息行為",
+    "pageContents": "本頁內容",
+    "defaultsAccessWorkspace": "權限與工作區",
+    "replyRulesHelp": "回覆規則說明",
+    "replySupportHelp": "CLI 支援情況"
+  }
+});
+
+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

@@ -23,7 +23,8 @@ export const TOOL_SETS = ["worker", "coordinator", "standard", "minimal", "full"
 export function toolSetDefault(defaults, inst, name = "") {
   if (TOOL_SETS.includes(defaults && defaults.tool_set)) return defaults.tool_set;
   const general = hasOwn(inst, "general_topic") ? inst.general_topic === true : !!defaults && defaults.general_topic === true;
-  return general || name === "general" ? "general" : "worker";
+  // The literal-name fallback, unless unticked (general-instance.ts generalByName: an explicit general_topic: false).
+  return general || (name === "general" && !(hasOwn(inst, "general_topic") && inst.general_topic === false)) ? "general" : "worker";
 }
 export const TOOL_PROGRESS = ["off", "standard", "verbose"];
 export const AGENT_MODES = ["mcp", "cli"];
@@ -74,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.

package/dist/ui/settings-outside.js

@@ -0,0 +1,176 @@
+// #3008 ② (alpha.3; decision 28c2d3a3 rule 3, the user's simplified form hmsg-33c3d609): Settings → Access & security →
+// "Connections from outside", on a fleet with no chat connection. This computer's admin, here, sets up an authenticator
+// app (a QR code and the key, then its first code), and turns on "Allow connections from outside": the public link
+// opens, and signing in through it asks for the app's code. Turning it off closes the link and signs everyone out there.
+// 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).
+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 { api } from "./settings-confirm.js";
+
+register("outside", {
+  en: {
+    title: "Connections from outside", 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.",
+    setUpOn: "Authenticator app set up on {0}.", again: "Set up again",
+    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”.",
+    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: "允許從外面連線",
+    needApp: "請先設定驗證器 App。從外面登入時會要求輸入它的代碼。",
+    setUp: "設定驗證器 App",
+    scan: "用 Authy、Google Authenticator 或 Microsoft Authenticator 掃描，或手動輸入金鑰，再輸入 App 顯示的 6 位數代碼。",
+    setUpOn: "驗證器 App 已於 {0} 設定。", again: "重新設定",
+    againConfirm: "舊 App 的代碼會失效，所有從外面登入的人都會被登出。",
+    remove: "移除", removeConfirm: "從外面連線會關閉，所有從外面登入的人都會被登出。",
+    openAt: "已開啟：{0}。", quick: "快速連結每次開啟網址都不同。",
+    hereOnly: "只能在 AgEnD 電腦上變更。", lostPhone: "手機遺失？請在 AgEnD 電腦上選「重新設定」。",
+    wrong: "代碼不對。請確認手機時間正確，並輸入最新的代碼。",
+    paused: "錯誤次數太多，請 {0} 後再試。", code: "驗證器代碼", key: "金鑰",
+    minutes: "{0} 分鐘", minute: "1 分鐘", hours: "{0} 小時", hour: "1 小時",
+  },
+});
+const to = (k, ...v) => t(`outside.${k}`, ...v);
+
+/** A wait as words: "15 minutes" / 「15 分鐘」, "2 hours" / 「2 小時」 (rounded up). */
+export function waitWords(ms) {
+  const minutes = Math.max(1, Math.ceil(ms / 60000));
+  if (minutes < 60) return minutes === 1 ? to("minute") : to("minutes", minutes);
+  const hours = Math.ceil(minutes / 60);
+  return hours === 1 ? to("hour") : to("hours", hours);
+}
+
+/** The key as an app shows it: groups of four. */
+export function keyGroups(secret) {
+  return String(secret || "").replace(/(.{4})(?=.)/g, "$1 ");
+}
+
+/**
+ * The QR code of an otpauth:// URI as one SVG path (dark modules), drawn by the page — no inline style, no innerHTML
+ * (the CSP). `qrcode` is the vendored encoder's factory (qrcode.module.js).
+ */
+export function qrPath(qrcode, uri) {
+  const qr = qrcode(0, "M");
+  qr.addData(uri);
+  qr.make();
+  const n = qr.getModuleCount();
+  let d = "";
+  for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (qr.isDark(r, c)) d += `M${c + 4} ${r + 4}h1v1h-1z`;
+  return { size: n + 8, d };
+}
+
+function Qr({ uri }) {
+  const [shape, setShape] = useState(null);
+  useEffect(() => {
+    let live = true;
+    import("/assets/qrcode.module.js").then((m) => { if (live) setShape(qrPath(m.default || m.qrcode, uri)); }).catch(() => { if (live) setShape(null); });
+    return () => { live = false; };
+  }, [uri]);
+  if (!shape) return null;
+  return html`<svg class="s-out-qr" id="outQr" viewBox=${`0 0 ${shape.size} ${shape.size}`} width="200" height="200" role="img" aria-label=${to("setUp")}>
+    <rect width=${shape.size} height=${shape.size} fill="#fff" /><path d=${shape.d} fill="#000" /></svg>`;
+}
+
+/**
+ * #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).
+ */
+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);
+  // 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 });
+  // 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.
+  const [rev, setRev] = useState(0), failed = useRef(false);
+  const load = async () => {
+    const seq = ++live.current.seq;
+    let r = null;
+    try { r = await api("/ui/outside"); } catch { r = null; }
+    if (!live.current.mounted || seq !== live.current.seq) return;
+    const ok = !!(r && r.ok && r.body && typeof r.body === "object");
+    failed.current = !ok;
+    if (ok) setS(r.body);
+    setRev((n) => n + 1);
+  };
+  useEffect(() => { live.current.mounted = true; load(); return () => { live.current.mounted = false; }; }, []);
+  useEffect(() => {
+    if (rev === 0) return undefined;                                              // the first read is still out
+    if (s && !s.webOnly && !failed.current) return undefined;                    // a chat fleet: nothing to follow
+    const opening = !!s && s.outside && (!s.link || s.link.state !== "open");
+    const delay = !s || opening ? outsidePoll.quickMs : outsidePoll.slowMs;      // none read yet, or opening: soon
+    const timer = setTimeout(() => { if (!live.current.busy) load(); else setRev((n) => n + 1); }, delay);
+    return () => clearTimeout(timer);
+  }, [rev]);
+  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; }
+    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 remove = async () => {
+    if (!(await confirmDialog({ title: to("remove"), 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
+  // click that did nothing); the server's state, read again after, is what stays.
+  const flip = (on) => { setS((x) => ({ ...x, outside: on })); act(async () => {
+    const r = await api("/ui/outside/switch", { method: "POST", body: JSON.stringify({ on }) });
+    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>
+    ${!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>
+    ${!s.enrolled ? html`<p class="note" id="outNeedApp">${to("needApp")}</p>` : null}
+    ${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">
+        <p class="note">${to("scan")}</p>
+        <${Qr} uri=${enroll.uri} />
+        <p class="note">${to("key")}: <code id="outKey">${keyGroups(enroll.secret)}</code></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}
+  </section>`;
+}