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

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

@@ -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.

package/dist/ui/settings-registry.js

@@ -15,14 +15,16 @@ const ROWS = [
   ["general.location", "agent-defaults", "#general-location", null, null, ["general", "windows", "paired PC", "host", "location"], ["General", "Windows", "電腦", "主機", "執行位置"], L("Run General on", "General 執行位置")],
   // You · Preferences
   ["profile.name", "preferences", "#profile-name", "settings.profileTitle", null, ["name", "display name", "who agents see", "profile"], ["名字", "名稱", "顯示名稱", "個人資料"]],
-  ["prefs.theme", "preferences", "#pref-theme", "app.theme", null, ["theme", "dark", "light", "dark mode", "colour scheme"], ["主題", "深色", "淺色", "外觀"]],
+  ["prefs.theme", "look", "#pref-theme", "app.theme", null, ["theme", "dark", "light", "dark mode", "colour scheme"], ["主題", "深色", "淺色", "外觀"]],
   ["prefs.lang", "preferences", "#pref-lang", "app.language", null, ["language", "dashboard language", "english", "chinese", "locale"], ["語言", "介面語言", "中文", "英文"]],
   ["prefs.names", "preferences", "#pref-names", "app.names", null, ["names", "nickname", "real name", "instance name", "display"], ["名稱", "暱稱", "實名"]],
   ["prefs.previews", "preferences", "#pref-previews", "chat.previews", null, ["html preview", "preview", "iframe"], ["預覽", "HTML 預覽"]],
   ["prefs.tour", "preferences", "#tourBtn", "chat.tour", null, ["tour", "help", "walkthrough", "guide"], ["導覽", "說明", "教學"]],
-  ["device.motion", "preferences", "#fx-follow-reduced-motion", "settings.themesFollowMotion", null, ["reduced motion", "animation", "effects", "accessibility"], ["減少動態", "動畫", "特效", "無障礙"]],
-  ["device.css-off", "preferences", "#css-off-here", "settings.cssDeviceOff", null, ["custom css", "css off", "this device", "safe"], ["自訂 CSS", "關閉 CSS", "這個裝置"]],
+  ["prefs.shortcuts", "preferences", "#keyboardShortcutsBtn", null, null, ["keyboard shortcuts", "hotkeys", "keys", "help", "ctrl", "command"], ["快捷鍵", "快速鍵", "鍵盤", "說明"], L("Keyboard shortcuts", "快捷鍵")],
+  ["device.motion", "look", "#fx-follow-reduced-motion", "settings.themesFollowMotion", null, ["reduced motion", "animation", "effects", "accessibility"], ["減少動態", "動畫", "特效", "無障礙"]],
+  ["device.css-off", "look", "#css-off-here", "settings.cssDeviceOff", null, ["custom css", "css off", "this device", "safe"], ["自訂 CSS", "關閉 CSS", "這個裝置"]],
   // You · Look
+  ["device.settings-width", "look", "#settings-content-width", null, null, ["settings width", "content width", "layout", "wide", "compact", "this device"], ["設定寬度", "內容寬度", "版型", "寬版", "窄版", "此裝置"], L("Settings content width", "設定頁內容寬度")],
   ["look.themes", "look", "#fx-show-themes", "settings.themesShow", "fx.show", ["agent themes", "themes", "effects", "widgets"], ["主題", "agent 的主題", "特效", "小工具"]],
   ["look.colours", "look", ".s-colors", "settings.colorTitle", "color.show", ["identity colour", "color", "colour", "turn off colours"], ["識別色", "顏色", "關閉顏色"]],
   ["look.cards", "look", ".s-card-size", "settings.cardSizeTitle", "card.size", ["identity card", "card size", "portrait", "banner"], ["身分卡", "卡片大小"]],

package/dist/ui/settings-shortcuts.js

@@ -0,0 +1,65 @@
+// Help for existing handlers only. Keyboard behavior stays with app-shell.js, panel-chat.js,
+// chat-render.js (composerKey) and panel-settings.js; this module registers no keyboard listener.
+import { html } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { isMacLike, showDialog } from "/assets/app-shell.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { Icon } from "/assets/ui-icons.js";
+
+register("settingsShortcuts", {
+  en: {
+    title: "Keyboard shortcuts", button: "View shortcuts",
+    hint: "Find the existing shortcuts for search, chat and settings.",
+    intro: "Shortcuts work in the contexts below. Search availability depends on your account and the fleet's settings.",
+    globalTitle: "Search across the fleet", globalAction: "Open search",
+    globalScope: "Works in text fields too, on pages that offer search. Does not run while another modal dialog is open or while an input method is composing. Do not hold Alt or Shift.",
+    chatSearchTitle: "Search the current chat", chatSearchAction: "Search within this agent",
+    chatSearchScope: "On an agent's chat page, when search is available. Other pages keep the browser's Find command. The same dialog and input-method restrictions apply.",
+    composerTitle: "Chat input", send: "Send the message or run the typed command", newline: "Add a new line",
+    composerScope: "In the chat composer with a physical keyboard. Enter does not send during input-method composition. On a touch screen, Enter adds a line; use Send to send. Alt, Ctrl or Command with Enter also adds a line.",
+    settingsTitle: "Settings search", settingsAction: "Focus Search settings",
+    settingsScope: "Only on Settings pages, outside inputs, textareas, selects and editable content. Does not run during input-method composition or with Ctrl, Command or Alt held.",
+    closeHint: "Closes this help dialog and returns focus to View shortcuts.",
+  },
+  "zh-TW": {
+    title: "快捷鍵", button: "查看快捷鍵",
+    hint: "查看搜尋、聊天與設定目前支援的快捷鍵。",
+    intro: "快捷鍵依下列情境使用；搜尋是否提供，取決於你的帳號權限與 Fleet 設定。",
+    globalTitle: "全域搜尋", globalAction: "開啟搜尋",
+    globalScope: "提供搜尋的頁面中，輸入欄內也可使用。其他對話框開啟時或輸入法組字時不觸發；請勿同時按住 Alt 或 Shift。",
+    chatSearchTitle: "搜尋目前聊天", chatSearchAction: "搜尋目前 Agent 的對話",
+    chatSearchScope: "在提供搜尋功能的 Agent 聊天頁使用；其他頁面保留瀏覽器的尋找功能。對話框與輸入法的限制同上。",
+    composerTitle: "聊天輸入", send: "送出訊息或執行輸入的指令", newline: "新增一行",
+    composerScope: "適用於聊天輸入框與實體鍵盤；輸入法組字時，Enter 不會送出。觸控螢幕的 Enter 會換行，請按「送出」傳送。Alt、Ctrl 或 Command 加 Enter 也會換行。",
+    settingsTitle: "設定搜尋", settingsAction: "聚焦「搜尋設定」",
+    settingsScope: "僅限設定頁面，且焦點不在輸入欄、文字區、選單或可編輯內容內。輸入法組字時，或同時按住 Ctrl、Command、Alt 時不觸發。",
+    closeHint: "關閉此說明，焦點會回到「查看快捷鍵」。",
+  },
+});
+
+export const shortcutsText = (key) => t(`settingsShortcuts.${key}`);
+
+/** The Settings preference row is intentionally independent of saved preferences. */
+export function ShortcutsHelpRow() {
+  return html`<div class="s-pref-help-row s-pref-shortcuts-row"><div><strong>${shortcutsText("title")}</strong><p class="sub">${shortcutsText("hint")}</p></div>
+    <button type="button" id="keyboardShortcutsBtn" class="btn" aria-haspopup="dialog" onClick=${openShortcuts}><${Icon} name="info" size=${16} />${shortcutsText("button")}</button></div>`;
+}
+
+export function openShortcuts() { showDialog(ShortcutsDialog); }
+
+/** Reuse the shared modal's native Escape, backdrop and focus-restoration behavior. */
+export function ShortcutsDialog({ onClose }) {
+  const modifier = isMacLike() ? "⌘" : "Ctrl";
+  const keys = (parts) => html`<span class="settings-shortcut-keys">${parts.map((key, i) => html`${i ? html`<span aria-hidden="true">+</span>` : null}<kbd key=${key}>${key}</kbd>`)}</span>`;
+  const row = (parts, action) => html`<div class="settings-shortcut-row">${keys(parts)}<span>${shortcutsText(action)}</span></div>`;
+  return html`<${Dialog} title=${shortcutsText("title")} onClose=${onClose} wide=${true}
+    actions=${html`<button type="button" class="btn btn-primary" onClick=${onClose}>${t("app.close")}</button>`}>
+    <div class="settings-shortcuts"><p class="settings-shortcuts-intro">${shortcutsText("intro")}</p>
+      <section><h3>${shortcutsText("globalTitle")}</h3>${row([modifier, "K"], "globalAction")}<p>${shortcutsText("globalScope")}</p></section>
+      <section><h3>${shortcutsText("chatSearchTitle")}</h3>${row([modifier, "F"], "chatSearchAction")}<p>${shortcutsText("chatSearchScope")}</p></section>
+      <section><h3>${shortcutsText("composerTitle")}</h3>${row(["Enter"], "send")}${row(["Shift", "Enter"], "newline")}<p>${shortcutsText("composerScope")}</p></section>
+      <section><h3>${shortcutsText("settingsTitle")}</h3>${row(["/"], "settingsAction")}<p>${shortcutsText("settingsScope")}</p></section>
+      <p class="settings-shortcuts-close"><kbd>Escape</kbd> ${shortcutsText("closeHint")}</p>
+    </div>
+  </${Dialog}>`;
+}

package/dist/ui/settings-strings.js

@@ -1333,3 +1333,96 @@ register("settings", {
     help6: "存取、密鑰或連線的變更，要等 fleet 管理員在聊天中確認後才會套用。",
   },
 });
+
+// Settings UX presentation labels.
+register("settings", {
+  "en": {
+    "prefsProfileGroup": "Personal details",
+    "prefsContentGroup": "Language and content",
+    "prefsAccountScope": "Your account",
+    "prefsHelpGroup": "Help and guidance",
+    "prefsTourHint": "Walk through the controls in an Agent conversation.",
+    "prefsReplayTour": "Replay tour",
+    "prefsLookHint": "Theme, appearance and effects are in Look",
+    "prefsNameImmediate": "Save name applies this change immediately, separately from the other preferences.",
+    "prefsSaveName": "Save name",
+    "lookDisplayGroup": "Display and layout",
+    "lookThemeHint": "Choose the theme used on your signed-in devices.",
+    "lookIdentityGroup": "Agent identity",
+    "lookMotionGroup": "Themes and motion",
+    "lookPreview": "Preview",
+    "lookPreviewHint": "A sample of your current colours and default card size."
+  },
+  "zh-TW": {
+    "prefsProfileGroup": "個人資料",
+    "prefsContentGroup": "語言與內容",
+    "prefsAccountScope": "你的帳號",
+    "prefsHelpGroup": "使用說明",
+    "prefsTourHint": "重新了解 Agent 對話中的常用操作。",
+    "prefsReplayTour": "重新播放導覽",
+    "prefsLookHint": "主題、外觀與動態效果請前往「外觀」",
+    "prefsNameImmediate": "「儲存名字」會立即套用，與其他偏好的儲存分開。",
+    "prefsSaveName": "儲存名字",
+    "lookDisplayGroup": "顯示與版面",
+    "lookThemeHint": "選擇你登入的裝置所使用的主題。",
+    "lookIdentityGroup": "Agent 識別",
+    "lookMotionGroup": "主題與動態效果",
+    "lookPreview": "預覽",
+    "lookPreviewHint": "目前識別色與預設身分卡大小的示意。"
+  }
+}
+);
+
+// Settings UX presentation labels.
+register("settings", {
+  "en": {
+    "uiAgentColumnName": "Name",
+    "uiAgentColumnCli": "CLI & model",
+    "uiListColumnState": "Status",
+    "uiListColumnActions": "Actions",
+    "uiRuntimeWindowsLocal": "Local Windows",
+    "uiRuntimeWindowsRemote": "Windows runtime",
+    "uiConnectionColumnService": "Service & connection",
+    "uiConnectionColumnInfo": "Connection details",
+    "uiClassicColumnRoom": "Room",
+    "uiProviderKeyActionHint": "Verify and apply each key separately. These actions do not wait for the page Save button.",
+    "uiDefaultsModelsTitle": "Models & language",
+    "uiDefaultsWorkTitle": "Work behavior",
+    "uiDefaultsCollaborationTitle": "Collaboration & replies",
+    "uiDefaultsCapabilitiesTitle": "Agent capabilities & permissions",
+    "uiDefaultsWorkspaceTitle": "Workspace rules",
+    "uiDefaultsAdvancedTitle": "Advanced execution policies"
+  },
+  "zh-TW": {
+    "uiAgentColumnName": "名稱",
+    "uiAgentColumnCli": "CLI 與模型",
+    "uiListColumnState": "狀態",
+    "uiListColumnActions": "操作",
+    "uiRuntimeWindowsLocal": "Windows 本機",
+    "uiRuntimeWindowsRemote": "Windows Runtime",
+    "uiConnectionColumnService": "服務與連線",
+    "uiConnectionColumnInfo": "連線資訊",
+    "uiClassicColumnRoom": "房間",
+    "uiProviderKeyActionHint": "每組金鑰會分別驗證並套用，不需等待頁面底部的儲存。",
+    "uiDefaultsModelsTitle": "模型與語言",
+    "uiDefaultsWorkTitle": "工作行為",
+    "uiDefaultsCollaborationTitle": "協作與回覆",
+    "uiDefaultsCapabilitiesTitle": "Agent 能力與權限",
+    "uiDefaultsWorkspaceTitle": "工作區規則",
+    "uiDefaultsAdvancedTitle": "進階執行策略"
+  }
+}
+);
+
+register("settings", {
+  "en": {
+    "lookBrandGroup": "Brand",
+    "lookIconMore": "Icon update help",
+    "prefsNameImmediate": "Name changes save immediately."
+  },
+  "zh-TW": {
+    "lookBrandGroup": "品牌",
+    "lookIconMore": "圖示更新說明",
+    "prefsNameImmediate": "名字會立即儲存。"
+  }
+});