@songsid/agend 2.3.5-alpha.4 → 2.3.5-beta.1

package/dist/ui/preview-panel.js

@@ -13,6 +13,7 @@
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
 import { Icon } from "/assets/ui-icons.js";
+import { Skeleton } from "/assets/ui-states.js";
 import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
@@ -20,6 +21,8 @@ import { chatTime, onDayChange } from "./chat-time.js";
 import { PanelActions } from "./preview-panel-actions.js";
 import { htmlTitle, versionsOf, lineDiff, diffHunks, DIFF_LIMITS } from "./preview-versions.js";
 import { pagesOf, pageIdOf } from "./preview-pages.js";
+import { drawMarkdown, TEXT_CARD_MAX } from "./chat-thread.js";
+import "./chat-md-strings.js";   // M-2448: the Markdown panel's own words (an older cached chat-strings.js lacks them)
 
 export { htmlTitle };
 
@@ -57,6 +60,16 @@ export function openPanel(spec, { run = false } = {}) {
   set({ open: { ...spec, kind: "html" }, run: run ? ++runs : 0 });
   retire(old); // State changes first: cleanup reentry cannot close a newer panel.
 }
+/**
+ * M-2448: show a Markdown file in the panel — `spec`: { key, instance, msgKey, att: { id, name, size }, sender, ts,
+ * text? } (text: what the card's Show already read). Nothing runs: it is rendered by the chat's own Markdown renderer.
+ * The block shown before stops, as for any open.
+ */
+export function openMarkdown(spec) {
+  const old = state.open;
+  set({ open: { ...spec, kind: "md" }, run: 0 });
+  retire(old);
+}
 /** Close publishes the empty slot before old-owner callbacks can reenter. */
 export function closePanel() {
   const old = state.open; if (!old) return;
@@ -318,7 +331,7 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     // #2915 review: the panel's generation, not just the key — a close and reopen of the same block while this read
     // waits moves it, and the read is then dropped (claimPanel also drops any earlier click still reading).
     const gen = claimPanel(), mine = reading.current = spec;
-    setNewerNote(t("chat.pvLoading"));
+    setNewerNote({ loading: true });
     // A click on a version reads it whatever its size (up to the 50 MB ceiling); over 8 MB the panel then asks.
     const r = await loadHtmlAttachment(spec.att, undefined, { anyway: true });
     if (reading.current === mine) reading.current = null;
@@ -363,7 +376,35 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     }
     return () => { live = false; };
   }, [shown, open && open.key, prev && prev.key]);
+  // M-2448: a Markdown file's text (read once per open: the same capped, same-origin read as the chat's card) and
+  // which view shows it — rendered (the chat's Markdown renderer, which escapes first) or its source.
+  const [md, setMd] = useState(null);       // { state: "loading" | "ready" | "failed", text?, reason? }
+  const [mdView, setMdView] = useState("rendered");
+  const [mdPlain, setMdPlain] = useState(false);
+  const mdBody = useRef(null);
+  const isMd = !!open && open.kind === "md";
+  useEffect(() => {
+    if (!isMd) { setMd(null); return undefined; }
+    setMdView("rendered");
+    if (typeof open.text === "string") { setMd({ state: "ready", text: open.text }); return undefined; }
+    let live = true;
+    setMd({ state: "loading" });
+    loadHtmlAttachment(open.att, undefined, { ask: TEXT_CARD_MAX, max: TEXT_CARD_MAX }).then((r) => {
+      if (!live) return;
+      setMd(r.ok ? { state: "ready", text: r.code } : { state: "failed", reason: r.reason === "over" ? t("chat.tcOver") : attReason(r) });
+    }, () => { if (live) setMd({ state: "failed", reason: t("chat.pvAttFailed") }); });
+    return () => { live = false; };
+  }, [isMd && open.key]);
+  useEffect(() => {
+    if (!isMd || !md || md.state !== "ready" || mdView !== "rendered" || !mdBody.current) return;
+    setMdPlain(drawMarkdown(mdBody.current, md.text) === "plain");
+  }, [isMd && open.key, md, mdView]);
   const fileName = open && open.att ? open.att.name : undefined;
+  // The divider between the thread and the panel (both kinds): drag, or the arrow keys, Home and End.
+  function divider0() {
+    return html`<div data-trust="preview" class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
+      aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>`;
+  }
   // Esc in the panel closes it (and is not the chat's "stop the reply").
   const onPanelKey = (e) => {
     if (e.key !== "Escape" || e.isComposing) return;
@@ -372,6 +413,8 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   };
 
   if (!open) return null;
+  if (isMd) return html`${divider0()}<${MarkdownPanel} open=${open} name=${name} md=${md} view=${mdView} setView=${setMdView} plain=${mdPlain}
+    body=${mdBody} panel=${panel} fs=${fs} enterFs=${enterFs} leaveFs=${leaveFs} onKey=${onPanelKey} reveal=${reveal} />`;
   const going = run.state === "starting" || run.state === "running";
   const a = P().availability();
   // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm). Allowing
@@ -390,8 +433,7 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     if (want && pending.current === want && panelStore.get().run === want) start();
   };
   const source = t("chat.pvSource", open.sender || name, timeOf(open.ts));
-  return html`<div data-trust="preview" class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
-      aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>
+  return html`${divider0()}
     <aside data-trust="preview" class=${`pv-panel${fs ? ` pv-fs pv-fs-${fs}` : ""}`} ref=${panel} aria-label=${t("chat.pvPanel")} onKeyDown=${onPanelKey}>
       <div class="pv-panel-head">
         <button type="button" class="icon-btn only-narrow pv-panel-close" title=${t("chat.pvBack")} aria-label=${t("chat.pvBack")} onClick=${closePanel}><${Icon} name="back" size=${18} /></button>
@@ -425,8 +467,9 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
         <button type="button" class="btn btn-sm pv-panel-dl" title=${t("chat.pvDownload")} onClick=${() => download(open.code, fileName)}><${Icon} name="download" size=${14} /><span class="lbl">${t("chat.pvDownload")}</span></button>
       </div>
       ${newer && newer.key !== open.key ? html`<div class="pv-newer" role="status"><span>${t("chat.pvNewer", timeOf(newer.ts))}</span>
-        <button type="button" class="btn btn-sm pv-newer-show" onClick=${showNewer}>${t("chat.pvNewerShow")}</button>${newerNote ? html`<span class="pv-newer-note">${newerNote}</span>` : null}</div>` : null}
-      ${newerNote && !(newer && newer.key !== open.key) ? html`<div class="pv-note pv-ver-note" role="status">${newerNote}</div>` : null}
+        <button type="button" class="btn btn-sm pv-newer-show" onClick=${showNewer}>${t("chat.pvNewerShow")}</button>${newerNote ? newerNote.loading
+          ? html`<${Skeleton} variant="inline" lines=${1} label=${t("chat.pvLoading")} />` : html`<span class="pv-newer-note">${newerNote}</span>` : null}</div>` : null}
+      ${newerNote && !(newer && newer.key !== open.key) ? newerNote.loading ? html`<${Skeleton} lines=${3} label=${t("chat.pvLoading")} />` : html`<div class="pv-note pv-ver-note" role="status">${newerNote}</div>` : null}
       ${going && !P().bannerAcked() ? html`<div class="pv-banner"><span class="pv-banner-text">${P().banner()}</span>
         <button type="button" class="btn btn-sm btn-ghost pv-ack" title=${P().bannerAckTitle()} onClick=${() => P().ackBanner()}>${P().bannerAckLabel()}</button></div>` : null}
       ${cdnHost && shown === "preview" ? html`<div class="pv-note pv-cdn-note" role="status">${t("chat.pvCdnNote", cdnHost)}</div>` : null}
@@ -440,9 +483,44 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     </aside>`;
 }
 
+/**
+ * M-2448: a Markdown file in the panel — the HTML preview's frame (head, source, close, full screen; a full-screen
+ * sheet on a phone), with Rendered / Source and Download. Nothing in the file runs: Rendered is the chat's Markdown
+ * renderer (escaped first, no raw HTML), Source is text.
+ */
+function MarkdownPanel({ open, name, md, view, setView, plain, body, panel, fs, enterFs, leaveFs, onKey, reveal }) {
+  const source = t("chat.pvSource", open.sender || name, timeOf(open.ts));
+  const ready = md && md.state === "ready";
+  return html`<aside data-trust="preview" class=${`pv-panel pv-md-panel${fs ? ` pv-fs pv-fs-${fs}` : ""}`} ref=${panel} aria-label=${t("chat.pvMdPanel")} onKeyDown=${onKey}>
+    <div class="pv-panel-head">
+      <button type="button" class="icon-btn only-narrow pv-panel-close" title=${t("chat.pvBack")} aria-label=${t("chat.pvBack")} onClick=${closePanel}><${Icon} name="back" size=${18} /></button>
+      <div class="pv-panel-title"><strong>${open.att ? open.att.name : t("chat.pvMdPanel")}</strong>
+        <button type="button" class="pv-source" title=${source} onClick=${() => { if (window.matchMedia && window.matchMedia("(max-width: 899px)").matches) closePanel(); reveal(open.msgKey); }}>${source}</button></div>
+      <button type="button" class="icon-btn only-wide pv-panel-close" title=${t("chat.pvClose")} aria-label=${t("chat.pvClose")} onClick=${closePanel}><${Icon} name="close" size=${18} /></button>
+    </div>
+    <div class="pv-panel-bar">
+      <div class="seg-inline" role="group" aria-label=${t("chat.pvMdPanel")}>
+        <button type="button" class=${`btn btn-sm${view === "rendered" ? " on" : ""}`} aria-pressed=${view === "rendered" ? "true" : "false"} title=${t("chat.pvMdRendered")} onClick=${() => setView("rendered")}><${Icon} name="eye" size=${14} /><span class="lbl">${t("chat.pvMdRendered")}</span></button>
+        <button type="button" class=${`btn btn-sm${view === "source" ? " on" : ""}`} aria-pressed=${view === "source" ? "true" : "false"} title=${t("chat.pvMdSource")} onClick=${() => setView("source")}><${Icon} name="code" size=${14} /><span class="lbl">${t("chat.pvMdSource")}</span></button>
+      </div>
+      <span class="grow"></span>
+      <button type="button" class=${`btn btn-sm only-wide pv-panel-fs${fs ? " on" : ""}`} aria-pressed=${fs ? "true" : "false"} title=${t(fs ? "chat.pvFsExit" : "chat.pvFs")} aria-label=${t(fs ? "chat.pvFsExit" : "chat.pvFs")}
+        onClick=${() => (fs ? leaveFs() : enterFs())}><${Icon} name=${fs ? "fullscreenexit" : "fullscreen"} size=${14} /></button>
+      ${open.att ? html`<a class="btn btn-sm pv-panel-dl" href=${`/ui/file/${open.att.id}`} download=${open.att.name} title=${t("chat.pvDownload")}><${Icon} name="download" size=${14} /><span class="lbl">${t("chat.pvDownload")}</span></a>` : null}
+    </div>
+    ${md && md.state === "loading" ? html`<${Skeleton} lines=${8} label=${t("chat.pvLoading")} />` : null}
+    ${md && md.state === "failed" ? html`<div class="pv-note" role="alert">${md.reason}</div>` : null}
+    ${ready && view === "rendered" && plain ? html`<div class="pv-note" role="status">${t("chat.tcPlain")}</div>` : null}
+    <div class="pv-panel-body show-code">
+      ${ready && view === "rendered" ? html`<div class="pv-code pv-md" ref=${body}></div>` : null}
+      ${ready && view === "source" ? html`<pre class="pv-code"><code>${md.text}</code></pre>` : null}
+    </div>
+  </aside>`;
+}
+
 /** The Changes view: hunks of the line diff as a unified diff shows them, drawn as text (never as HTML). */
 function Changes({ changes }) {
-  if (!changes || changes.state === "loading") return html`<div class="pv-note pv-diff-note">${t("chat.pvLoading")}</div>`;
+  if (!changes || changes.state === "loading") return html`<${Skeleton} lines=${8} label=${t("chat.pvLoading")} />`;
   if (changes.state === "failed") return html`<div class="pv-note pv-diff-note">${changes.reason}</div>`;
   if (changes.state === "big") return html`<div class="pv-note pv-diff-note">${t("chat.pvChangesBig")}</div>`;
   if (!changes.hunks.length) return html`<div class="pv-note pv-diff-note">${t("chat.pvChangesNone", changes.from)}</div>`;

package/dist/ui/search-dialog.js

@@ -12,6 +12,7 @@ import { navigate } from "/assets/app-nav.js";
 import { chatPath, fleetPath } from "/assets/app-route.js";
 import { namesOf, namesStore } from "/assets/instance-nav.js";
 import { Icon } from "/assets/ui-icons.js";
+import { Skeleton } from "/assets/ui-states.js";
 import { goToSetting, searchSettings, settingLabel } from "./settings-registry.js";
 import "./settings-strings.js";
 
@@ -332,7 +333,7 @@ function Results({ guest = false, q, res, groups, settings = [], active, setActi
   return html`
     ${res.building ? html`<p class="search-note" role="status">${t("search.building")}</p>` : null}
     ${res.limited ? html`<p class="search-note" role="status">${t("search.limited")}</p>` : null}
-    ${res.status === "loading" && !hits.length ? html`<p class="search-status" role="status">${t("search.searching")}</p>` : null}
+    ${res.status === "loading" && !hits.length ? html`<${Skeleton} variant="rows" lines=${4} label=${t("search.searching")} />` : null}
     ${failed ? html`<p class="search-status bad" role="alert">${res.error}</p>` : null}
     ${res.status === "ok" && !hits.length && !settings.length ? html`<p class="search-status" role="status">${filtered ? t("search.noneFiltered") : t("search.none")}</p>` : null}
     <div id="search-results" role="listbox" aria-label=${t("search.results")} class=${`search-results${res.status === "loading" ? " stale" : ""}`}>
@@ -367,7 +368,7 @@ function Detail({ detail, q, label, onBack, onClose }) {
   const head = html`<div class="search-detail-head"><button type="button" class="chip-btn" onClick=${onBack}><${Icon} name="back" size=${14} />${t("search.back")}</button>
     <span class=${`search-badge ${hit.source}`}>${t(`search.badge_${hit.source}`)}</span><span class="search-who">${hit.source === "xmsg" ? t("search.from", label(hit.instance), label(hit.peer || "")) : label(hit.instance)}</span>
     <time class="search-time">${when(hit.ts)}</time></div>`;
-  if (detail.status === "loading") return html`<div class="search-detail">${head}<p class="search-status" role="status">${t("search.loadingCtx")}</p></div>`;
+  if (detail.status === "loading") return html`<div class="search-detail">${head}<${Skeleton} lines=${6} label=${t("search.loadingCtx")} /></div>`;
   if (detail.status === "error") return html`<div class="search-detail">${head}<p class="search-status bad" role="alert">${detail.error}</p></div>`;
   const ctx = detail.ctx || {};
   const doc = ctx.doc || {};

package/dist/ui/settings-appearance.js

@@ -5,8 +5,6 @@ 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";
@@ -24,22 +22,6 @@ 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;
@@ -79,85 +61,16 @@ 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. 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;
+  // 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;
   if (part === "device") return html`<${MotionCard} ...${props} /><${DeviceCard} ...${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>`;
+  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} />`;
 }
 
 /** #2347: the staged keys of this device's own switches (Restore defaults sets them, so their staged change goes). */
@@ -193,23 +106,17 @@ function IdentityColorCard() {
   useIdentityColors();
   const places = defaultPlaces(), off = colorsOff();
   const toggle = (p) => setDefaultPlaces(places.includes(p) ? places.filter((x) => x !== p) : [...places, p]);
-  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>
+  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} />
     </div>
-  </details>`;
+    <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>`;
 }
 
 /**
@@ -326,7 +233,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`<div class="s-app-icon-heading"><h3 class="s-brand-title">${tn("lookBrandGroup")}</h3><${CardTitle} title=${tn("appIconTitle")} topic="app-icon" /></div>`;
+  const title = html`<${CardTitle} title=${tn("appIconTitle")} topic="app-icon" />`;
   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>`;
 
@@ -383,7 +290,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>
-    <details class="s-app-icon-help"><summary>${tn("lookIconMore")}</summary><p class="sub">${tn("appIconIos")}</p></details>
+    <p class="sub">${tn("appIconIos")}</p>
   </section>`;
 }
 
@@ -428,7 +335,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 s-card-limits"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" />
+  return html`<section class="card s-appearance"><${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">
@@ -448,11 +355,8 @@ function CardLimitsCard() {
 }
 
 /** #1629 r2 (d): whether this person's screens show agents' themes (and, as they come, effects) — synced. */
-function ThemesCard({ compact = false } = {}) {
+function ThemesCard() {
   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>
@@ -606,9 +510,6 @@ 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-catalog.js

@@ -2,7 +2,7 @@
 // signed in, new enough: /ui/backends) and the model catalog of that backend for that instance's account (/ui/models).
 // Both answers are the server's cached ones; nothing here makes the server probe. A page asks once and reuses the answer
 // for a short while, so opening several dialogs costs one request each.
-import { useEffect, useRef, useState } from "/assets/app-html.js";
+import { useEffect, useState } from "/assets/app-html.js";
 
 const TTL_MS = 30_000;
 const cache = new Map();   // url → { at, value, pending }
@@ -13,10 +13,10 @@ async function getJson(url) {
   return res.json();
 }
 /** The answer for `url`, shared by every field on the page while it is fresh; null when it cannot be read. */
-function cached(url, force = false) {
+function cached(url) {
   const hit = cache.get(url), now = performance.now();
-  if (hit && (hit.pending || !force && now - hit.at < TTL_MS)) return hit.pending ?? Promise.resolve(hit.value);
-  const pending = getJson(force ? `${url}&refresh=1` : url).then((value) => { cache.set(url, { at: performance.now(), value, pending: null }); return value; })
+  if (hit && (hit.pending || now - hit.at < TTL_MS)) return hit.pending ?? Promise.resolve(hit.value);
+  const pending = getJson(url).then((value) => { cache.set(url, { at: performance.now(), value, pending: null }); return value; })
     .catch(() => { cache.delete(url); return null; });
   cache.set(url, { at: now, value: null, pending });
   return pending;
@@ -45,39 +45,12 @@ export function useBackendRows() {
   return answer && Array.isArray(answer.backends) ? answer.backends : answer === undefined ? undefined : null;
 }
 
-/** Runtime and account are part of the key: Windows never borrows a WSL catalog. */
-export function useModelCatalogState(backend, instance, runtime, machineId) {
-  const url = backend ? `/ui/models?backend=${encodeURIComponent(backend)}${instance ? `&instance=${encodeURIComponent(instance)}` : ""}${runtime === "windows" ? "&runtime=windows" : ""}${machineId ? `&machineId=${encodeURIComponent(machineId)}` : ""}` : null;
-  const [state, setState] = useState({ url:null, answer:null, loading:false });
-  const generation = useRef(0), active = useRef(url);
-  active.current = url;
-  const load = (force = false) => {
-    if (!url) return;
-    const mine = ++generation.current;
-    setState(old => ({ url, answer:old.url === url ? old.answer : null, loading:true }));
-    cached(url, force).then(answer => {
-      if (active.current === url && generation.current === mine) setState({ url, answer, loading:false });
-    });
-  };
-  useEffect(() => {
-    if (url) load();
-    return () => { generation.current++; };
-  }, [url]);
-  const current = state.url === url ? state : { answer:null, loading:!!url };
-  const valid = current.answer && Array.isArray(current.answer.models);
-  return {
-    models: valid ? current.answer.models : [],
-    loading: !!url && current.loading,
-    error: !!url && !current.loading && !valid,
-    source: valid ? current.answer.source : null,
-    refresh: () => load(true),
-  };
-}
-
-/** Compatibility for callers that only need the model list. */
-export function useModelCatalog(backend, instance, runtime) {
-  const state = useModelCatalogState(backend, instance, runtime);
-  return state.loading && !state.models.length ? undefined : state.models;
+/** The model catalog of `backend` for `instance` (its account) — [] when none is cached; undefined while loading. */
+export function useModelCatalog(backend, instance) {
+  const url = backend ? `/ui/models?backend=${encodeURIComponent(backend)}${instance ? `&instance=${encodeURIComponent(instance)}` : ""}` : null;
+  const answer = useAnswer(url);
+  if (answer === undefined) return undefined;
+  return answer && Array.isArray(answer.models) ? answer.models : [];
 }
 
 /** A state that keeps a backend from being chosen (shown, disabled, with why); "unknown" never does. */

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。",
+  },
+});

package/dist/ui/settings-confirm.js

@@ -196,9 +196,7 @@ export async function confirmedWrite(path, { method = "POST", body, key = newKey
 /** A decided request as the write's own answer. */
 export function outcomeResponse(view) {
   if (view.state === "applied") return { ok: true, status: 200, body: (view.outcome && view.outcome.result) || {}, confirmed: view };
-  const base = (view.outcome && (view.outcome.message || view.outcome.reason_code)) || view.state;
-  // S-35: a failed apply says why (the store bounds and sanitizes the reason).
-  const reason = view.outcome && view.outcome.detail ? `${base} (${view.outcome.detail})` : base;
+  const reason = (view.outcome && (view.outcome.message || view.outcome.reason_code)) || view.state;
   return { ok: false, status: 409, body: { error: reason, pending_state: view.state }, confirmed: view };
 }