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

package/dist/ui/settings-agent-filters.js

@@ -0,0 +1,94 @@
+// View-only Agent list filters. They never stage settings or read another endpoint.
+import { html } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { instanceMachineId } from "./runtime-catalog.js";
+
+register("agentFilters", {
+  en: {
+    title: "Filter Agents", runtime: "Runtime", status: "Status", allRuntimes: "All Runtimes", allStatuses: "All statuses",
+    wsl: "WSL / Linux", local: "Windows local", remote: "Windows remote", machine: "{0} · Windows remote", unknownRuntime: "Unknown Runtime",
+    revokedMachine: "{0} · revoked", revokedComputer: "Revoked computer · {0}", unknownComputer: "Unknown computer · {0}",
+    machineGone: "This computer is no longer connected. Open the Agent's settings and change its Runtime. ({0})",
+    running: "Running", paused: "Paused", stopped: "Stopped", crashed: "Crashed", unknown: "Unknown status", offline: "Runtime offline",
+    results: "Showing {0} of {1} Agents", clear: "Clear filters", noMatch: "No matching Agents", noMatchHint: "Try a different search, Runtime, or status.",
+  },
+  "zh-TW": {
+    title: "篩選 Agent", runtime: "Runtime", status: "狀態", allRuntimes: "所有 Runtime", allStatuses: "所有狀態",
+    wsl: "WSL / Linux", local: "Windows 本機", remote: "Windows 遠端", machine: "{0} · Windows 遠端", unknownRuntime: "未知 Runtime",
+    revokedMachine: "{0} · 已撤銷", revokedComputer: "已撤銷的電腦 · {0}", unknownComputer: "未知電腦 · {0}",
+    machineGone: "這台電腦已不再連線。請開啟 Agent 設定，變更 Runtime。（{0}）",
+    running: "執行中", paused: "已暫停", stopped: "已停止", crashed: "已當掉", unknown: "未知狀態", offline: "Runtime 離線",
+    results: "顯示 {0} / {1} 個 Agent", clear: "清除篩選", noMatch: "沒有符合條件的 Agent", noMatchHint: "請調整搜尋、Runtime 或狀態。",
+  },
+});
+export const agentFilterText = (key, ...values) => t(`agentFilters.${key}`, ...values);
+const STATUSES = ["running", "paused", "stopped", "crashed"];
+
+/** A computer is named by what the Runtime page shows; only an id that names no computer is shown as (the start of) the id. */
+const shortId = (id) => String(id).slice(0, 8);
+/**
+ * One computer's label. `found` is false once the computer list has loaded and has no such computer; until then (or when
+ * the list cannot be read) an unnamed one is simply "Windows remote" rather than a claim that it is gone.
+ */
+export function machineLabel(id, name, status, found = true) {
+  if (name) return { label: agentFilterText(status === "revoked" ? "revokedMachine" : "machine", name), title: status === "revoked" ? agentFilterText("machineGone", id) : name, gone: status === "revoked" };
+  if (status === "revoked") return { label: agentFilterText("revokedComputer", shortId(id)), title: agentFilterText("machineGone", id), gone: true };
+  if (!found) return { label: agentFilterText("unknownComputer", shortId(id)), title: agentFilterText("machineGone", id), gone: true };
+  return { label: agentFilterText("remote"), title: id, gone: false };
+}
+/** Missing runtime is the configured WSL default; invalid explicit values are not WSL. `machines` (id → {name, status}) is the loaded computer list, or null. */
+export function agentRuntime(inst, live, machines = null) {
+  if (inst?.runtime === undefined || inst?.runtime === "wsl") return { kind: "wsl", machineId: "", label: agentFilterText("wsl") };
+  if (inst?.runtime !== "windows") return { kind: "unknown", machineId: "", label: agentFilterText("unknownRuntime") };
+  const id = instanceMachineId(inst);
+  if (id && typeof id !== "string") return { kind: "unknown", machineId: "", label: agentFilterText("unknownRuntime") };
+  if (!id) return { kind: "windows-local", machineId: "", label: agentFilterText("local") };
+  const sameLive = instanceMachineId(live) === id, row = machines?.get(id);
+  const name = inst.machine_name || (sameLive ? live?.machine_name : "") || row?.name || "";
+  const status = (sameLive ? live?.machine_status : "") === "revoked" || row?.status === "revoked" ? "revoked" : row?.status || (sameLive ? live?.machine_status : "");
+  return { kind: "windows-remote", machineId: id, ...machineLabel(id, name, status, !machines || !!row || !!name) };
+}
+
+/** Unknown/unreadable snapshots must not be reported as stopped. */
+export function agentStatus(live) {
+  return STATUSES.includes(live?.status) ? live.status : "unknown";
+}
+export const agentRuntimeOffline = (inst, live) => agentRuntime(inst, live).kind === "windows-remote" && live?.machine_status === "offline";
+
+/** Search and grouping have already run; preserve their ordering and group identities. */
+export function filterAgentGroups(groups, instances, live, { runtime = "", status = "" } = {}) {
+  return groups.map((group) => ({ ...group, names: group.names.filter((name) => {
+    const target = agentRuntime(instances[name], live[name]);
+    const matchesRuntime = !runtime || (runtime.startsWith("machine:") ? target.machineId === runtime.slice(8) && target.kind === "windows-remote" : target.kind === runtime);
+    const matchesStatus = !status || (status === "runtime-offline" ? agentRuntimeOffline(instances[name], live[name]) : agentStatus(live[name]) === status);
+    return matchesRuntime && matchesStatus;
+  }) })).filter((group) => group.names.length);
+}
+
+export function AgentFilters({ instances, live, machines = null, runtime, status, matched, total, active, onRuntime, onStatus, onClear }) {
+  const labels = new Map();
+  let unknownRuntime = runtime === "unknown", offline = status === "runtime-offline";
+  for (const [name, inst] of Object.entries(instances)) {
+    const target = agentRuntime(inst, live[name], machines);
+    if (target.machineId) labels.set(target.machineId, target.label);
+    if (target.kind === "unknown") unknownRuntime = true;
+    if (agentRuntimeOffline(inst, live[name])) offline = true;
+  }
+  // Preserve a selected machine across a snapshot/config refresh instead of silently selecting another Runtime.
+  if (runtime.startsWith("machine:") && !labels.has(runtime.slice(8))) labels.set(runtime.slice(8), machineLabel(runtime.slice(8), "", "", false).label);
+  return html`<div class="s-agent-filters" role="group" aria-label=${agentFilterText("title")}>
+    <div class="s-agent-filter-controls">
+      <label><span>${agentFilterText("runtime")}</span><select value=${runtime} onChange=${(event) => onRuntime(event.target.value)}>
+        <option value="">${agentFilterText("allRuntimes")}</option><option value="wsl">${agentFilterText("wsl")}</option><option value="windows-local">${agentFilterText("local")}</option><option value="windows-remote">${agentFilterText("remote")}</option>
+        ${[...labels].sort((a, b) => a[1].localeCompare(b[1])).map(([id, label]) => html`<option key=${id} value=${`machine:${id}`}>${label}</option>`)}
+        ${unknownRuntime ? html`<option value="unknown">${agentFilterText("unknownRuntime")}</option>` : null}
+      </select></label>
+      <label><span>${agentFilterText("status")}</span><select value=${status} onChange=${(event) => onStatus(event.target.value)}>
+        <option value="">${agentFilterText("allStatuses")}</option>${[...STATUSES, "unknown"].map((value) => html`<option key=${value} value=${value}>${agentFilterText(value)}</option>`)}
+        ${offline ? html`<option value="runtime-offline">${agentFilterText("offline")}</option>` : null}
+      </select></label>
+      <button type="button" class="btn btn-sm s-agent-filter-clear" disabled=${!active} onClick=${onClear}>${agentFilterText("clear")}</button>
+    </div>
+    <p class="s-agent-filter-count" role="status" aria-live="polite">${agentFilterText("results", matched, total)}</p>
+  </div>`;
+}

package/dist/ui/settings-appearance.js

@@ -5,6 +5,8 @@ import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { register, t } from "/assets/app-i18n.js";
 import { recordEdit } from "/assets/text-undo.js";
 import { appStore, useStore } from "/assets/app-store.js";
+// #2978 merge: from their own module, never from the long-lived shell (a stale tab's shell lacks them).
+import { DEFAULT_SETTINGS_CONTENT_WIDTH, SETTINGS_CONTENT_WIDTHS, settingsContentWidthStore, setSettingsContentWidth } from "/assets/settings-width.js";
 import { ModsCard } from "./settings-mods.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
@@ -22,6 +24,22 @@ import { CardTitle } from "./settings-learn.js";
 import "./settings-strings.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
+register("settingsContentWidth", {
+  en: {
+    label: "Settings content width",
+    device: "This device · saves immediately",
+    hint: "Applies to every Settings page; adapts to narrow windows.",
+    option: "{0} px",
+    defaultOption: "{0} px (default)",
+  },
+  "zh-TW": {
+    label: "設定頁內容寬度",
+    device: "此裝置・立即儲存",
+    hint: "套用到所有設定頁；窄視窗會自動配合可用空間。",
+    option: "{0} px",
+    defaultOption: "{0} px（預設）",
+  },
+});
 /** #2390: a refusal's detail in the page's language when the host named it (detail_key), else its English as sent. */
 export function appIconDetail(body) {
   const key = body && typeof body.detail_key === "string" ? `appIconDetail_${body.detail_key}` : null;
@@ -61,16 +79,85 @@ export function AppearanceSection(props = {}) {
   const part = props.part || "look";
   const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
   // #2347 regrouping: Look (the person's own), this device's switches (in Preferences) and the host-wide cards (in Web
-  // dashboard) are drawn where each belongs. None of it is offered over the public link (Look says so).
-  if (publicLink) return part === "look" ? html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>` : null;
+  // dashboard) are drawn where each belongs. Public Look keeps the existing browser-only theme choice; customization stays unavailable there.
+  if (publicLink) return part === "look" ? html`<div class="s-look-workspace s-look-public"><div class="s-look-main">
+    <${ThemeModeCard} publicLink=${true} />
+    <section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>
+  </div></div>` : null;
   if (part === "device") return html`<${MotionCard} ...${props} /><${DeviceCard} ...${props} />`;
-  if (part === "dashboard") return html`<${AppIconCard} /><${CardLimitsCard} />`;
-  const group = (key) => html`<h2 class="s-ap-group">${tn(key)}</h2>`;
-  return html`${group("groupLook")}<${ThemesCard} ...${props} /><${IdentityColorCard} /><${CardSizeCard} />
-    ${group("groupLayout")}<${SidebarWidgetCard} />
-    ${group("groupCss")}<${OwnerCssCard} />
-    ${group("groupMods")}<${ModsCard} />
-    <${RestoreDefaultsCard} ...${props} />`;
+  if (part === "dashboard") return html`<${AppIconCard} /><details class="s-look-disclosure s-dashboard-limits"><summary><${Icon} name="sliders" size=${17} /><span>${tn("cardLimitsTitle")}</span><${Icon} name="chevron" size=${16} /></summary><div class="s-look-disclosure-body"><${CardLimitsCard} /></div></details>`;
+  return html`<div class="s-look-workspace">
+    <div class="s-look-basics">
+    <div class="s-look-main">
+      <${ThemeModeCard} />
+      <section class="card s-appearance s-look-identity"><h3>${tn("lookIdentityGroup")}</h3>
+        <div class="s-look-identity-controls"><${CardSizeCard} /><${IdentityColorCard} /></div>
+      </section>
+      <section class="card s-appearance s-look-motion"><${CardTitle} title=${tn("lookMotionGroup")} topic="themes" />
+        <${ThemesCard} compact=${true} ...${props} /><${MotionCard} compact=${true} ...${props} />
+      </section>
+    </div>
+    <${AppearancePreview} />
+    </div>
+    <div class="s-look-advanced">
+      <${AppearanceDisclosure} title=${tn("widgetTitle")} icon="sliders"><${SidebarWidgetCard} /></${AppearanceDisclosure}>
+      <${AppearanceDisclosure} title=${tn("cssTitle")} icon="code"><${OwnerCssCard} /><${DeviceCard} ...${props} /></${AppearanceDisclosure}>
+      <${AppearanceDisclosure} title=${tn("modsTitle")} icon="plug"><${ModsCard} /></${AppearanceDisclosure}>
+      <${AppearanceDisclosure} title=${tn("restoreTitle")} icon="restart" danger=${true}><${RestoreDefaultsCard} ...${props} /></${AppearanceDisclosure}>
+    </div>
+  </div>`;
+}
+
+/** Theme remains a normal personal preference, including the public dashboard's existing browser-only choice. */
+function ThemeModeCard({ publicLink = false }) {
+  const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
+  useEffect(() => (typeof AgendTheme !== "undefined" && typeof AgendTheme.onChange === "function" ? AgendTheme.onChange(setTheme) : undefined), []);
+  const choose = (value) => { setTheme(value); if (typeof AgendTheme !== "undefined") AgendTheme.set(value); savePref("theme", value); };
+  return html`<section class="card s-appearance s-look-display"><h3>${tn("lookDisplayGroup")}</h3>
+    <fieldset id="pref-theme" class="s-theme-picker"><legend>${t("app.theme")}</legend><div class="s-theme-options">
+      ${[["light", "themeLight"], ["dark", "themeDark"], ["system", "themeSystem"]].map(([value, key]) => html`<label key=${value} class=${`s-theme-choice${theme === value ? " selected" : ""}`}>
+        <input type="radio" name="pref-theme-choice" value=${value} checked=${theme === value} onChange=${(event) => { if (event.currentTarget.checked) choose(value); }} />
+        <span class=${`s-theme-miniature is-${value}`} aria-hidden="true"><span class="s-theme-mini-side"><i></i><i></i><i></i></span><span class="s-theme-mini-main"><i></i><i></i><i></i></span></span>
+        <span class="s-theme-choice-label">${t(`app.${key}`)}</span>
+      </label>`)}
+    </div></fieldset>
+    <${SettingsContentWidth} />
+    ${publicLink ? html`<p class="sub">${tn("syncedPublicLink")}</p>` : null}
+  </section>`;
+}
+
+/** This device's layout choice is independent of the Settings Save/Discard bar. */
+function SettingsContentWidth() {
+  const { width } = useStore(settingsContentWidthStore);
+  return html`<div class="s-settings-content-width">
+    <label for="settings-content-width">${t("settingsContentWidth.label")}<span class="s-scope">${t("settingsContentWidth.device")}</span></label>
+    <select id="settings-content-width" value=${width} aria-describedby="settings-content-width-hint" onChange=${(event) => setSettingsContentWidth(Number(event.currentTarget.value))}>
+      ${SETTINGS_CONTENT_WIDTHS.map((value) => html`<option key=${value} value=${value}>${t(`settingsContentWidth.${value === DEFAULT_SETTINGS_CONTENT_WIDTH ? "defaultOption" : "option"}`, value)}</option>`)}
+    </select>
+    <p id="settings-content-width-hint" class="sub">${t("settingsContentWidth.hint")}</p>
+  </div>`;
+}
+
+/** The panels stay mounted inside native details, so drafts, CSS trials and deep links survive disclosure changes. */
+function AppearanceDisclosure({ title, icon, danger = false, children }) {
+  return html`<details class=${`s-look-disclosure${danger ? " is-restore" : ""}`}>
+    <summary><${Icon} name=${icon} size=${17} /><span>${title}</span><${Icon} name="chevron" size=${16} /></summary>
+    <div class="s-look-disclosure-body">${children}</div>
+  </details>`;
+}
+
+/** This preview uses the same live colour and default-size preferences as the existing controls. */
+function AppearancePreview() {
+  useIdentityColors();
+  useStore(cardSizeStore);
+  const size = cardSizeDefault();
+  return html`<aside class="card s-look-preview" aria-labelledby="look-preview-title">
+    <h3 id="look-preview-title">${tn("lookPreview")}</h3>
+    <p class="sub">${tn("lookPreviewHint")}</p>
+    <div class="s-look-sidebar-sample"><${ColorSample} places=${defaultPlaces()} off=${colorsOff()} /></div>
+    <div class=${`s-look-card-sample is-${size}`} aria-hidden="true"><span class="s-look-preview-avatar">A</span>
+      <strong>${tn("colorSample")}</strong><span>${tn("cardSizeTitle")} · ${t(`card.size${size.toUpperCase()}Name`)}</span></div>
+  </aside>`;
 }
 
 /** #2347: the staged keys of this device's own switches (Restore defaults sets them, so their staged change goes). */
@@ -106,17 +193,23 @@ function IdentityColorCard() {
   useIdentityColors();
   const places = defaultPlaces(), off = colorsOff();
   const toggle = (p) => setDefaultPlaces(places.includes(p) ? places.filter((x) => x !== p) : [...places, p]);
-  return html`<section class="card s-appearance s-synced s-colors"><${CardTitle} title=${tn("colorTitle")} topic="colors" />
-    <p class="sub">${tn("colorLead")}</p>
-    <div class="s-colors-row">
-      <fieldset class="idc-places" disabled=${off}><legend>${tn("colorPlaces")}</legend>
-        ${PLACEMENTS.map((p) => html`<label key=${p} class="check"><input type="checkbox" checked=${places.includes(p)} onChange=${() => toggle(p)} /> ${t(`color.place_${p}`)}</label>`)}
-      </fieldset>
-      <${ColorSample} places=${places} off=${off} />
+  return html`<details class="card s-appearance s-synced s-colors"><summary class="s-color-summary">
+    <${CardTitle} title=${tn("colorTitle")} topic="colors" />
+    <span class="s-color-summary-places">${off ? html`<span>${tn("colorOff")}</span>` : places.map((p) => html`<span key=${p}>${t(`color.place_${p}`)}</span>`)}</span>
+    <${Icon} name="chevron" size=${16} />
+    </summary>
+    <div class="s-color-settings">
+      <p class="sub">${tn("colorLead")}</p>
+      <div class="s-colors-row">
+        <fieldset class="idc-places" disabled=${off}><legend>${tn("colorPlaces")}</legend>
+          ${PLACEMENTS.map((p) => html`<label key=${p} class="check"><input type="checkbox" checked=${places.includes(p)} onChange=${() => toggle(p)} /> ${t(`color.place_${p}`)}</label>`)}
+        </fieldset>
+        <${ColorSample} places=${places} off=${off} />
+      </div>
+      <label class="check"><input type="checkbox" class="s-colors-off" checked=${off} onChange=${(e) => setColorsOff(e.target.checked)} /> <span>${tn("colorOff")}</span></label>
+      <p class="sub">${tn("colorOffLead")}</p>
     </div>
-    <label class="check"><input type="checkbox" class="s-colors-off" checked=${off} onChange=${(e) => setColorsOff(e.target.checked)} /> <span>${tn("colorOff")}</span></label>
-    <p class="sub">${tn("colorOffLead")}</p>
-  </section>`;
+  </details>`;
 }
 
 /**
@@ -233,7 +326,7 @@ function AppIconCard() {
     if (auth && auth.canWrite) Promise.resolve(auth.canWrite()).then((v) => setCanWrite(v === true), () => {});
   }, []);
   useEffect(() => () => { if (picked) URL.revokeObjectURL(picked.url); }, [picked]);
-  const title = html`<${CardTitle} title=${tn("appIconTitle")} topic="app-icon" />`;
+  const title = html`<div class="s-app-icon-heading"><h3 class="s-brand-title">${tn("lookBrandGroup")}</h3><${CardTitle} title=${tn("appIconTitle")} topic="app-icon" /></div>`;
   if (!state) return html`<section class="card s-appearance s-app-icon">${title}<p class="sub">…</p></section>`;
   if (state.failed) return html`<section class="card s-appearance s-app-icon">${title}<p class="err">${tn("appIconLoadFailed")}</p></section>`;
 
@@ -290,7 +383,7 @@ function AppIconCard() {
       ${state.custom && !picked ? html`<button type="button" class="btn" disabled=${busy} onClick=${reset}>${tn("appIconReset")}</button>` : null}
     </div>` : html`<p class="sub">${tn("appIconReadOnly")}</p>`}
     <p class="sub">${tn("appIconWho")}</p>
-    <p class="sub">${tn("appIconIos")}</p>
+    <details class="s-app-icon-help"><summary>${tn("lookIconMore")}</summary><p class="sub">${tn("appIconIos")}</p></details>
   </section>`;
 }
 
@@ -335,7 +428,7 @@ function CardLimitsCard() {
     if (r.ok) { setMsg(tn("cardLimitsSaved")); load(); } else setMsg(tn("cardLimitsFailed", (r.body && r.body.error) || r.status));
   };
   const warnings = Array.isArray(view.warnings) ? view.warnings : [];
-  return html`<section class="card s-appearance"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" />
+  return html`<section class="card s-appearance s-card-limits"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" />
     <p class="sub">${tn("cardLimitsLead")}</p>
     <fieldset class="form" disabled=${busy}>
       ${["portrait", "banner", "instance_quota"].map((g) => html`<div key=${g} class="grid3">
@@ -355,8 +448,11 @@ function CardLimitsCard() {
 }
 
 /** #1629 r2 (d): whether this person's screens show agents' themes (and, as they come, effects) — synced. */
-function ThemesCard() {
+function ThemesCard({ compact = false } = {}) {
   const s = useStore(themesStore);
+  if (compact) return html`<div class="s-look-toggle-line s-themes"><label for="fx-show-themes">${tn("themesShow")}</label>
+    <input id="fx-show-themes" class="s-ui-toggle" type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
+    <p class="sub">${safeMode() ? tn("themesSafeMode") : tn("themesShowLead")}</p></div>`;
   return html`<section class="card s-appearance s-synced s-themes"><${CardTitle} title=${tn("themesTitle")} topic="themes" />
     <label class="check"><input id="fx-show-themes" type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
       <span>${tn("themesShow")}</span></label>
@@ -510,6 +606,9 @@ function MotionCard(props = {}) {
   const [follow, setFollow] = useState(followsReducedMotion);
   useEffect(() => onMotionChange(() => setFollow(followsReducedMotion())), []);
   const setFollowHere = deviceChoice(props, DEVICE_CHOICES[0], tn("themesFollowMotion"), followsReducedMotion, setFollowsReducedMotion);
+  if (props.compact) return html`<div class="s-look-toggle-line s-motion"><label for="fx-follow-reduced-motion">${tn("themesFollowMotion")}<span class="s-scope">${tn("cssDeviceTitle")}</span></label>
+    <input type="checkbox" class="s-ui-toggle" id="fx-follow-reduced-motion" checked=${follow} onChange=${(e) => setFollowHere(e.target.checked)} />
+    <p class="sub">${tn("themesFollowMotionLead")}</p></div>`;
   return html`<section class="card s-appearance s-local s-motion"><h3>${tn("motionTitle")}</h3>
     <label class="check"><input type="checkbox" id="fx-follow-reduced-motion" checked=${follow} onChange=${(e) => setFollowHere(e.target.checked)} />
       <span>${tn("themesFollowMotion")}</span></label>

package/dist/ui/settings-build-version.js

@@ -0,0 +1,35 @@
+// Lazy-owned copy survives an open shell with cached i18n modules. No new shared exports are required.
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+register("installedBuild", {
+  en: { alphaShort: "α", source: "Source build", modified: "modified", unknown: "changes unknown", detail: "Package {0}; source {1}" },
+  "zh-TW": { alphaShort: "α", source: "原始碼建置", modified: "含未提交變更", unknown: "變更狀態不明", detail: "套件 {0}；原始碼 {1}" },
+});
+const copy = (key, ...args) => t(`installedBuild.${key}`, ...args);
+const releases = "https://github.com/songsid/AgEnD/releases";
+export function SettingsBuildVersion({ version, build }) {
+  const [narrow, setNarrow] = useState(() => globalThis.matchMedia?.("(max-width: 899px)").matches ?? false);
+  useEffect(() => {
+    const media = globalThis.matchMedia?.("(max-width: 899px)"); if (!media) return;
+    const sync = () => setNarrow(media.matches); media.addEventListener("change", sync); sync();
+    return () => media.removeEventListener("change", sync);
+  }, []);
+  if (!version) return null;
+  const source = build?.version === version ? build.source : null;
+  const valid = source && /^(?:[0-9a-f]{40}|[0-9a-f]{64})$/.test(source.commit)
+    && ["alpha", "source", "release"].includes(source.channel)
+    && (source.modified === null || typeof source.modified === "boolean");
+  const released = valid && source.channel === "release" && source.ref === `v${version}`;
+  const alpha = valid && source.channel === "alpha" && /^release\/\d+\.\d+\.\d+-alpha$/.test(source.ref);
+  const stamped = valid && (!released || source.modified === true);
+  const status = source?.modified === true ? copy("modified") : source?.modified === null ? copy("unknown") : "";
+  const label = stamped ? `${released ? `v${version}` : alpha ? source.ref.slice(8) : copy("source")} · ${source.commit.slice(0, 12)}${status ? ` (${status})` : ""}` : `v${version}`;
+  const href = stamped ? `https://github.com/songsid/AgEnD/commit/${source.commit}`
+    : version.includes("-") ? `${releases}/latest` : `${releases}/tag/v${version}`;
+  const detail = valid ? `${label}; ${copy("detail", version, source.commit)}` : undefined;
+  // The existing phone header has only a small version slot. No new shared CSS is needed in a cached shell.
+  const shown = alpha && stamped && narrow ? `${copy("alphaShort")}·${source.commit.slice(0, 7)}` : label;
+  return html`<a class="pill ver" href=${href} target="_blank" rel="noopener"
+    ref=${el => { if (el) el.style.paddingInline = alpha && narrow ? "2px" : ""; }}
+    title=${detail} aria-label=${detail}>${shown}</a>`;
+}

package/dist/ui/settings-codex-copy.js

@@ -0,0 +1,19 @@
+// M-2446: the agent dialog's Codex speed words, lazy and fixed. A tab opened before an upgrade may keep the old
+// settings-strings module while the dialog module is fresh: these words live here, registered with the dialog.
+import { register } from "/assets/app-i18n.js";
+register("settings", {
+  en: {
+    codexSpeed: "Speed",
+    codexSpeedDefault: "Codex default",
+    codexSpeedStandard: "Standard",
+    codexSpeedFast: "Fast",
+    codexSpeedHint: "Fast: uses plan limits at 2.5× (OpenAI). Only for models that offer Fast; otherwise the agent starts without it and the log says why. Changing it restarts the agent.",
+  },
+  "zh-TW": {
+    codexSpeed: "速度",
+    codexSpeedDefault: "Codex 預設",
+    codexSpeedStandard: "標準",
+    codexSpeedFast: "快速",
+    codexSpeedHint: "快速：方案額度以 2.5 倍消耗（OpenAI）。只適用於提供 Fast 的模型；不支援時 Agent 會照常啟動，並在記錄中說明原因。變更後會重新啟動 Agent。",
+  },
+});