@songsid/agend 2.2.0-beta.9 → 2.3.0-beta.1

package/dist/ui/shared/identity-color.js

@@ -0,0 +1,261 @@
+// #1958: an instance's identity colour on the page — the cue people scan the sidebar by — and where it shows (the
+// name, a bar at the row's left edge, the avatar's ring). The server sends each instance's tiers in the status frame
+// (`color`, `color_show`); this module resolves them as src/web-identity-color.ts does (a test pins the two equal),
+// paints the sidebar row through the CSSOM (no style attribute, #1300), and holds the Color dialog.
+//   colour: a person's pick > the agent's (themes shown) > its own bot's role colour > automatic (a few soft colours)
+//   places: a person's choice > the agent's (themes shown) > this host's default (color.show) > ring + bar
+//   Settings → Web appearance can turn colours off for the host (color.off): nothing is painted, every pick is kept.
+import { html, useEffect, useState } from "./app-html.js";
+import { createStore, useStore } from "./app-store.js";
+import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
+import { register, t } from "./app-i18n.js";
+import { themesShown, themesStore } from "./app-themes.js";
+import { Dialog } from "./ui-dialog.js";
+import { toast } from "./ui-toast.js";
+
+// ── The palettes (src/web-identity-palette.ts: the same values, pinned by a test) ──
+
+export const IDENTITY_PALETTE = [
+  { id: "red", light: "#cf222e", dark: "#ff7b72" }, { id: "orange", light: "#bc4c00", dark: "#ffa657" },
+  { id: "amber", light: "#8a5d00", dark: "#e3b341" }, { id: "lime", light: "#4d7c0f", dark: "#a3e635" },
+  { id: "green", light: "#1a7f37", dark: "#56d364" }, { id: "teal", light: "#0f766e", dark: "#2dd4bf" },
+  { id: "cyan", light: "#0e7490", dark: "#22d3ee" }, { id: "blue", light: "#0a62c2", dark: "#7ab7ff" },
+  { id: "indigo", light: "#4f46e5", dark: "#a5b4fc" }, { id: "violet", light: "#8250df", dark: "#d2a8ff" },
+  { id: "pink", light: "#bf3989", dark: "#f778ba" }, { id: "slate", light: "#57606a", dark: "#b1bac4" },
+];
+export const AUTO_PALETTE = [
+  { id: "sand", light: "#8a6d3b", dark: "#d4b98a" }, { id: "clay", light: "#9c5a4a", dark: "#d9a294" },
+  { id: "rose", light: "#9b4f6a", dark: "#d99ab0" }, { id: "plum", light: "#7a5a8c", dark: "#c3a6d6" },
+  { id: "dusk", light: "#5a628f", dark: "#a9b0db" }, { id: "sea", light: "#3f7286", dark: "#92c2d4" },
+  { id: "moss", light: "#5b7340", dark: "#a9c48d" }, { id: "slate", light: "#5f6b78", dark: "#aeb8c4" },
+];
+export const PLACEMENTS = ["name", "bar", "ring"];
+export const DEFAULT_PLACEMENTS = ["bar", "ring"];
+const HEX = /^#[0-9a-f]{6}$/;
+const presetOf = (c) => (typeof c === "string" && c.startsWith("preset:") ? IDENTITY_PALETTE.find((p) => p.id === c.slice(7)) : undefined);
+const autoOf = (c) => (typeof c === "string" && c.startsWith("auto:") ? AUTO_PALETTE.find((p) => p.id === c.slice(5)) : undefined);
+/** A colour as the server sends it (preset:<id>, auto:<id>, #rrggbb), checked; null for anything else. */
+export function colorOk(c) {
+  if (typeof c !== "string") return null;
+  if (presetOf(c) || autoOf(c) || HEX.test(c)) return c;
+  return null;
+}
+/** A place list, in PLACEMENTS order; null for anything that is not one. */
+export function placesOk(v) {
+  if (!Array.isArray(v) || v.length > 3 || !v.every((p) => PLACEMENTS.includes(p)) || new Set(v).size !== v.length) return null;
+  return PLACEMENTS.filter((p) => v.includes(p));
+}
+/** The colour drawn for `c` on a page in `mode`. */
+export function colorValue(c, mode) {
+  const p = presetOf(c) || autoOf(c);
+  return p ? p[mode] : c;
+}
+
+// ── Contrast: name text reads at 4.5:1 on the page's and the sidebar's background (tokens.css) ──
+
+const BG = { light: ["#ffffff", "#f9f9f9"], dark: ["#212121", "#171717"] };
+const TEXT = { light: "#0d0d0d", dark: "#ececec" };
+function luminance(hex) {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+}
+export function contrast(a, b) {
+  const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (l1 + 0.05) / (l2 + 0.05);
+}
+/** The shade of `hex` name text uses: itself if readable, else the nearest step toward black (light) or white (dark). */
+export function readableShade(hex, mode) {
+  if (!HEX.test(hex)) return TEXT[mode];
+  const toward = mode === "light" ? 0 : 255;
+  const ch = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  for (let step = 0; step <= 20; step++) {
+    const shade = `#${ch.map((c) => Math.round(c + (toward - c) * (step / 20)).toString(16).padStart(2, "0")).join("")}`;
+    if (BG[mode].every((bg) => contrast(shade, bg) >= 4.5)) return shade;
+  }
+  return TEXT[mode];
+}
+
+// ── Resolution ──
+
+/** The colour in force and its source, from the frame's tiers. */
+export function resolveColor(tiers, showThemes) {
+  const t2 = tiers && typeof tiers === "object" ? tiers : {};
+  const person = colorOk(t2.person);
+  if (person) return { color: person, source: "person" };
+  const agent = showThemes ? colorOk(t2.agent) : null;
+  if (agent && !autoOf(agent)) return { color: agent, source: "agent" };
+  const role = typeof t2.role === "string" && HEX.test(t2.role) ? t2.role : null;
+  if (role) return { color: role, source: "role" };
+  return { color: autoOf(t2.auto) ? t2.auto : "auto:sand", source: "auto" };
+}
+/** Where it shows, and whose choice that is. */
+export function resolvePlaces(tiers, showThemes, hostDefault) {
+  const t2 = tiers && typeof tiers === "object" ? tiers : {};
+  const person = placesOk(t2.person);
+  if (person) return { show: person, source: "person" };
+  const agent = showThemes ? placesOk(t2.agent) : null;
+  if (agent) return { show: agent, source: "agent" };
+  return { show: placesOk(hostDefault) || [...DEFAULT_PLACEMENTS], source: "host" };
+}
+
+// ── This host's settings (web prefs color.show / color.off) ──
+
+export const colorPrefsStore = createStore({ n: 0 });
+const bump = () => colorPrefsStore.set((s) => ({ n: s.n + 1 }));
+onPrefsChanged((changed) => { if (changed.has("color.show") || changed.has("color.off")) bump(); });
+const readLocal = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
+/** Where colours show by default on this host (Settings → Web appearance). */
+export function defaultPlaces() {
+  const f = prefInForce("color.show");
+  let v = f ? f.value : undefined;
+  if (!f) { try { v = JSON.parse(readLocal("agend_color_show") || "null"); } catch { v = null; } }
+  return placesOk(v) || [...DEFAULT_PLACEMENTS];
+}
+export function colorsOff() {
+  const f = prefInForce("color.off");
+  return f ? f.value === true : readLocal("agend_color_off") === "on";
+}
+/** The default places (null: back to ring + bar). */
+export function setDefaultPlaces(list) {
+  const v = list === null ? null : placesOk(list);
+  const same = v && v.length === DEFAULT_PLACEMENTS.length && v.every((p, i) => p === DEFAULT_PLACEMENTS[i]);
+  savePref("color.show", v === null || same ? null : v);
+  bump();
+}
+export function setColorsOff(off) {
+  savePref("color.off", off ? true : null);
+  bump();
+}
+
+/** What one instance's row shows: its colour per mode, name shades, places, and whether anything is painted at all. */
+export function identityOf(it, opts = {}) {
+  const showThemes = opts.showThemes ?? themesShown();
+  const c = resolveColor(it && it.color, showThemes);
+  const p = resolvePlaces(it && it.color_show, showThemes, opts.hostDefault ?? defaultPlaces());
+  const light = colorValue(c.color, "light"), dark = colorValue(c.color, "dark");
+  return {
+    color: c.color, source: c.source, show: p.show, showSource: p.source, off: opts.off ?? colorsOff(),
+    light, dark, nameLight: readableShade(light, "light"), nameDark: readableShade(dark, "dark"),
+  };
+}
+/** The row's classes for its identity colour ("" when colours are off or shown nowhere). */
+export function identityClasses(id) {
+  if (!id || id.off || !id.show.length) return "";
+  return ["idc", ...id.show.map((p) => `id-${p}`)].join(" ");
+}
+/** Paint an element (a callback ref): the colour's values for both modes as custom properties; the stylesheet picks. */
+export function paintIdentity(el, id) {
+  if (!el || !el.style || typeof el.style.setProperty !== "function") return;
+  const on = id && !id.off && id.show.length;
+  for (const [k, v] of [["--id-light", id && id.light], ["--id-dark", id && id.dark], ["--id-name-light", id && id.nameLight], ["--id-name-dark", id && id.nameDark]]) {
+    if (on && v) el.style.setProperty(k, v); else el.style.removeProperty(k);
+  }
+}
+/** Redraw when this host's colour settings or the viewer's themes switch change. */
+export function useIdentityColors() {
+  useStore(colorPrefsStore);
+  useStore(themesStore);
+}
+
+// ── The Color dialog (Chat ⋯, Details ⋯, View's Edit profile) ──
+
+export const colorDialogStore = createStore({ name: null, it: null });
+export function openColorDialog(name, it) { colorDialogStore.set({ name, it: it || null }); }
+const closeColorDialog = () => colorDialogStore.set({ name: null, it: null });
+
+/** The ⋯ entry: on the public link too (decision 3: colours change wherever the profile does). */
+export function colorMenuItem(name, it) {
+  return { key: "identity-color", label: t("color.menu"), icon: "palette", onSelect: () => openColorDialog(name, it) };
+}
+
+export function ColorDialogHost() {
+  const s = useStore(colorDialogStore);
+  return s.name ? html`<${ColorDialog} key=${s.name} name=${s.name} it=${s.it} onClose=${closeColorDialog} />` : null;
+}
+
+function ColorDialog({ name, it, onClose }) {
+  useIdentityColors();
+  const [loaded, setLoaded] = useState(null);           // the person's choice as stored: { color, color_show }
+  const [color, setColor] = useState(null);             // the colour picked here (null: none — the next tier)
+  const [hex, setHex] = useState("");
+  const [places, setPlaces] = useState(null);           // null: the default places
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let live = true;
+    fetch(`/api/profile/${encodeURIComponent(name)}`).then((r) => (r.ok ? r.json() : null)).then((row) => {
+      if (!live) return;
+      const c = row ? colorOk(row.color) : null, s = row ? placesOk(row.color_show) : null;
+      setLoaded({ color: c, show: s }); setColor(c); setHex(c && HEX.test(c) ? c : ""); setPlaces(s);
+    }).catch(() => { if (live) setLoaded({ color: null, show: null }); });
+    return () => { live = false; };
+  }, [name]);
+  // The preview: the instance as it would be drawn with the choice here.
+  const preview = identityOf({ ...(it || {}), color: { ...((it && it.color) || {}), person: color || undefined }, color_show: { ...((it && it.color_show) || {}), person: places || undefined } }, { off: false });
+  const pick = (c) => { setColor(c); setHex(c && HEX.test(c) ? c : ""); setError(""); };
+  const togglePlace = (p) => {
+    const base = places || preview.show;
+    setPlaces(base.includes(p) ? base.filter((x) => x !== p) : PLACEMENTS.filter((x) => x === p || base.includes(x)));
+  };
+  async function save(body) {
+    setBusy(true); setError("");
+    try {
+      const res = await fetch(`/api/profile/${encodeURIComponent(name)}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+      const r = await res.json().catch(() => ({}));
+      if (!res.ok) { setError(t("color.failed", (r && (r.detail || r.error)) || `HTTP ${res.status}`)); setBusy(false); return; }
+      toast(t("color.saved", name));
+      onClose();
+    } catch (err) { setError(t("color.failed", (err && err.message) || "network")); setBusy(false); }
+  }
+  const onHex = (v) => { setHex(v); const c = /^#[0-9a-fA-F]{6}$/.test(v) ? v.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
+  const off = colorsOff();
+  return html`<${Dialog} title=${t("color.title", name)} onClose=${onClose} busy=${busy}
+      actions=${html`<button type="button" class="btn" disabled=${busy || !loaded} onClick=${() => save({ color: null, color_show: null })}>${t("color.reset")}</button>
+        <span class="dlg-spacer"></span>
+        <button type="button" class="btn" disabled=${busy} onClick=${onClose}>${t("color.cancel")}</button>
+        <button type="button" class="btn btn-primary" disabled=${busy || !loaded} onClick=${() => save({ color, color_show: places })}>${t("color.save")}</button>`}>
+    ${off ? html`<p class="note" role="status">${t("color.offNote")}</p>` : null}
+    <p class="sub">${t(`color.src_${preview.source}`)}</p>
+    <fieldset class="idc-swatches"><legend>${t("color.colour")}</legend>
+      ${IDENTITY_PALETTE.map((p) => html`<button type="button" key=${p.id} class=${`idc-swatch${color === `preset:${p.id}` ? " on" : ""}`}
+        aria-pressed=${color === `preset:${p.id}` ? "true" : "false"} aria-label=${t(`color.p_${p.id}`)} title=${t(`color.p_${p.id}`)}
+        ref=${(el) => { if (el && el.style) { el.style.setProperty("--sw-light", p.light); el.style.setProperty("--sw-dark", p.dark); } }}
+        onClick=${() => pick(`preset:${p.id}`)}></button>`)}
+      <label class="idc-custom">${t("color.custom")}
+        <input type="color" value=${HEX.test(hex) ? hex : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
+        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value.trim())} aria-label=${t("color.hex")} /></label>
+      <button type="button" class="btn btn-sm" disabled=${!color} onClick=${() => pick(null)}>${t("color.noPick")}</button>
+    </fieldset>
+    <fieldset class="idc-places"><legend>${t("color.places")}</legend>
+      ${PLACEMENTS.map((p) => html`<label key=${p} class="check"><input type="checkbox" checked=${preview.show.includes(p)} onChange=${() => togglePlace(p)} /> ${t(`color.place_${p}`)}</label>`)}
+      <label class="check"><input type="checkbox" checked=${places === null} onChange=${() => setPlaces(places === null ? [...preview.show] : null)} /> ${t("color.useDefault")}</label>
+    </fieldset>
+    <div class="idc-preview" aria-hidden="true"><span class=${`inst v-inst ${identityClasses(preview)}`} ref=${(el) => paintIdentity(el, preview)}>
+      <span class="av"><span class="av-text">${(name || "?").slice(0, 1).toUpperCase()}</span></span>
+      <span class="inst-text"><span class="inst-name">${name}</span></span></span></div>
+    ${error ? html`<p class="err" role="alert">${error}</p>` : null}
+  </${Dialog}>`;
+}
+
+register("color", {
+  en: {
+    menu: "Colour…", title: "Colour for {0}", colour: "Colour", custom: "Custom", hex: "Hex colour", noPick: "Not chosen",
+    places: "Where it shows", place_name: "Name", place_bar: "Left bar", place_ring: "Ring", useDefault: "Use this host's default places",
+    src_person: "Shown now: picked by a person.", src_agent: "Shown now: the agent's own colour.", src_role: "Shown now: the colour of its bot's Discord role.",
+    src_auto: "Shown now: an automatic colour.", save: "Save", cancel: "Cancel", reset: "Reset",
+    saved: "Colour saved for {0}", failed: "Couldn't save the colour: {0}",
+    offNote: "Colours are turned off on this host (Settings → Web appearance). What you pick here is kept for when they're on.",
+    p_red: "Red", p_orange: "Orange", p_amber: "Amber", p_lime: "Lime", p_green: "Green", p_teal: "Teal", p_cyan: "Cyan", p_blue: "Blue",
+    p_indigo: "Indigo", p_violet: "Violet", p_pink: "Pink", p_slate: "Slate",
+  },
+  "zh-TW": {
+    menu: "顏色…", title: "{0} 的顏色", colour: "顏色", custom: "自訂", hex: "色碼", noPick: "不指定",
+    places: "顯示位置", place_name: "名稱", place_bar: "左側色條", place_ring: "頭像外框", useDefault: "使用這台主機的預設位置",
+    src_person: "目前顯示：有人挑選的顏色。", src_agent: "目前顯示：agent 自己的顏色。", src_role: "目前顯示：它的 bot 在 Discord 身分組的顏色。",
+    src_auto: "目前顯示：自動配色。", save: "儲存", cancel: "取消", reset: "重設",
+    saved: "已儲存 {0} 的顏色", failed: "無法儲存顏色：{0}",
+    offNote: "這台主機已關閉顏色（設定 → 網頁外觀）。在這裡挑的顏色會保留，重新開啟後就會出現。",
+    p_red: "紅", p_orange: "橙", p_amber: "琥珀", p_lime: "萊姆", p_green: "綠", p_teal: "青綠", p_cyan: "青", p_blue: "藍",
+    p_indigo: "靛", p_violet: "紫", p_pink: "粉紅", p_slate: "石板灰",
+  },
+});

package/dist/ui/shared/instance-nav.js

@@ -16,6 +16,8 @@ import { Skeleton } from "./ui-states.js";
 import { viewStore } from "./view-roster-store.js";
 import { onPrefsChanged, prefInForce, prefsWritable, savePref } from "./app-prefs.js";
 import "./view-strings.js";
+import { themesShown, themesStore } from "./app-themes.js";
+import { identityClasses, identityOf, paintIdentity, useIdentityColors } from "./identity-color.js";
 
 /** view.* text with named values. */
 function tn(key, values = {}) {
@@ -280,9 +282,16 @@ const CLI_MONOGRAM = { "claude-code": "C", codex: "X", "kiro-cli": "K", grok: "G
 // One path segment under /ui/img/<kind>/ — no further slash or backslash, and not a dot segment ("." / ".." or their
 // %2e spellings, which a browser resolves too): the picture can only ever be one of those routes (#1642 review).
 const sameOrigin = (src) => typeof src === "string"
-  && /^\/ui\/img\/(bot|avatar|emoji)\/(?!(?:\.|%2[eE]){1,2}(?:\?|$))[^/\\?#\s]+(\?v=[0-9A-Za-z%._-]*)?$/.test(src);
-/** The avatar to draw: the server's, if it is one the page may load; else the first character. */
+  && (/^\/ui\/img\/(bot|avatar|emoji)\/(?!(?:\.|%2[eE]){1,2}(?:\?|$))[^/\\?#\s]+(\?v=[0-9A-Za-z%._-]*)?$/.test(src)
+    // #1629: a theme's picture — one name segment, then its 32-hex content id.
+    || /^\/ui\/img\/theme\/(?!(?:\.|%2[eE]){1,2}\/)[^/\\?#\s]+\/[0-9a-f]{32}$/.test(src));
+/**
+ * The avatar to draw: the server's, if it is one the page may load; else the first character. #1629: the agent's theme
+ * picture first, while this viewer shows agents' themes (fx.show, not safe mode).
+ */
 export function avatarOf(it) {
+  const th = it && themesShown() ? it.theme_avatar : null;
+  if (th && th.kind === "image" && sameOrigin(th.src)) return { kind: "image", src: th.src };
   const a = it && it.avatar;
   if (a && a.kind === "image" && sameOrigin(a.src)) return { kind: "image", src: a.src };
   if (a && a.kind === "emoji" && sameOrigin(a.src)) return { kind: "emoji", src: a.src, alt: typeof a.alt === "string" ? a.alt : "" };
@@ -290,7 +299,6 @@ export function avatarOf(it) {
   // #1722: the initial is the leading name's ("Names"), not the server's (which is always the nickname's).
   return { kind: "initial", text: firstCharacter(namesOf(it).primary) || (a && a.kind === "initial" && typeof a.text === "string" ? a.text : "") };
 }
-const ACCENT = /^#[0-9a-f]{6}$/i;
 /** The status dot on the avatar: needs you, crashed, paused, stopped, looks stuck, working, idle — colour AND a label. */
 export function dotState(it, exec, awaiting) {
   if (awaiting != null) return "needs";
@@ -306,22 +314,19 @@ const DOT = {
 };
 export function dotLabel(state) { return (DOT[state] || DOT.stopped)[1](); }
 
-/** An instance's avatar with its status dot. The ring (its bot's colour) is a CSS custom property set through the CSSOM. */
+/**
+ * An instance's avatar with its status dot. #1958: its ring is the identity colour, painted by the row it sits in
+ * (identity-color.js: `.idc.id-ring`), for every face.
+ */
 export function InstanceAvatar({ it, state, cli = false }) {
+  useStore(themesStore);                                    // #1629: redraw when the viewer turns agents' themes on or off
   const a = avatarOf(it);
   const [broken, setBroken] = useState("");
-  const el = useRef(null);
-  const accent = typeof it.accent === "string" && ACCENT.test(it.accent) && a.kind === "image" ? it.accent : "";
-  useLayoutEffect(() => {
-    const node = el.current;
-    if (!node || !node.style) return;
-    if (accent) node.style.setProperty("--ring", accent); else node.style.removeProperty("--ring");
-  }, [accent]);
   const src = a.kind !== "initial" && a.src && broken !== a.src ? a.src : "";
   const text = a.kind === "emoji" && a.text ? a.text : a.kind === "initial" ? a.text : firstCharacter(namesOf(it).primary);
   const [cls] = DOT[state] || DOT.stopped;
   const label = dotLabel(state);
-  return html`<span ref=${el} class=${`av${accent ? " ring" : ""}${a.kind === "emoji" ? " av-emoji" : ""}`}>
+  return html`<span class=${`av${a.kind === "emoji" ? " av-emoji" : ""}`}>
     ${src ? html`<img src=${src} alt="" decoding="async" onError=${() => setBroken(src)} />` : html`<span class="av-text" aria-hidden="true">${text}</span>`}
     <span class=${`av-dot dot ${cls}`} role="img" aria-label=${label} title=${label}></span>${cli
       ? html`<span class="av-cli" aria-hidden="true" title=${backendLabel(it.backend)}>${CLI_MONOGRAM[it.backend] || "·"}</span>` : null}</span>`;
@@ -341,6 +346,7 @@ const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet ===
 export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting = {}, viewOnly = false, onPick }) {
   const nav = useStore(navStore);
   const names = useStore(namesStore);   // #1722: which name leads
+  useIdentityColors();                  // #1958: repaint when the host's colour settings or the themes switch change
   const filterRef = useRef(null);
   const list = useRef(null);
   const drag = useRef(null);
@@ -431,8 +437,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     const waiting = own(awaiting, name) ? awaiting[name] : null;
     const on = name === active;
     const fav = g === FAV_GROUP, starred = favSet.has(name);
+    // #1958: its identity colour — the ring, a left bar and/or the name, as resolved; painted through the CSSOM.
+    const id = identityOf(it);
     const full = !starred && favs.length >= MAX_FAVORITES;
-    return html`<li key=${name} class="v-li"><a class=${`inst v-inst${on ? " active" : ""}`} href=${rowPath(name)} title=${instanceTooltip(it)}
+    return html`<li key=${name} class="v-li"><a class=${`inst v-inst${on ? " active" : ""} ${identityClasses(id)}`} ref=${(el) => paintIdentity(el, id)} href=${rowPath(name)} title=${instanceTooltip(it)}
         aria-current=${on ? "page" : undefined} onClick=${onPick} ...${fav ? {} : dragProps({ type: "instance", name, group: g })}>
       <${InstanceAvatar} it=${it} state=${dotState(it, own(exec, name) ? exec[name] : null, waiting)} cli=${true} />
       <span class="inst-text"><span class="inst-name" title=${label}>${label}</span>
@@ -450,7 +458,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   };
   // The list scrolls; the filter under it stays in view (#999), so it sits outside the scrolling section.
   return html`<div class=${`view-roster inst-nav${editing && canStar ? " fav-editing" : ""}`}>
-    <div class="side-section" id="instanceList" ref=${list}>
+    <div data-trust="navigation" class="side-section" id="instanceList" ref=${list}>
     <div class="inst-head"><h2 class="side-label">${tn("instancesLabel")}</h2>
       ${canStar && items.length ? html`<button type="button" class="chip-btn fav-edit" aria-pressed=${editing ? "true" : "false"} onClick=${() => setEditing(!editing)}>
         ${editing ? tn("favDone") : html`<${Icon} name="star" size=${12} />${tn("favEdit")}`}</button>` : null}</div>

package/dist/ui/shared/instance-switch.js

@@ -6,10 +6,13 @@ import { html } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 
-/** current: "chat" | "view" | "log" | "details". #1218: Log sits between View and Details. */
+/**
+ * current: "chat" | "view" | "log" | "details". #1218: Log sits between View and Details. `data-label`: each tab is as
+ * wide as its label in the current tab's weight (app.css), so the bar keeps its size whichever tab is current.
+ */
 export function InstanceSwitch({ name, current }) {
   const seg = (key, href, label) => html`<a key=${key} class=${`seg-item${current === key ? " active" : ""}`} href=${href}
-    aria-current=${current === key ? "page" : undefined}>${label}</a>`;
+    aria-current=${current === key ? "page" : undefined} data-label=${label}>${label}</a>`;
   return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
     ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("log", logPath(name), t("app.log"))}${seg("details", detailsPath(name), t("app.details"))}
   </nav>`;

package/dist/ui/shared/owner-css.js

@@ -0,0 +1,221 @@
+// #1629 r4 §3: owner CSS on this page — the signed-in person's own stylesheet, linked last in <head> so it wins over
+// app.css. It is a same-origin <link> (style-src 'self' admits it): no inline CSS, no nonce, no style attribute and no
+// constructed stylesheet. Never linked:
+// - on Settings (removed while it is open, put back on leaving: the way out is always rendered stock);
+// - on the public link, for the anonymous View reader, and wherever the server named no version (data-owner-css);
+// - on a device that turned it off (agend_owner_css_off), and for a load with ?safe=1 (safe mode).
+// Sign-in, resend-code and setup are other pages: they never load this module.
+import { navStore } from "./app-nav.js";
+import { appStore, createStore, useStore } from "./app-store.js";
+import { html, useEffect, useState } from "./app-html.js";
+import { t } from "./app-i18n.js";
+
+export const OWNER_CSS_OFF_KEY = "agend_owner_css_off";
+const LINK_ID = "owner-css";
+
+// Read when this module loads, so it holds for whatever asks first (themes start before installOwnerCss runs).
+const readSafe = () => { try { return new URLSearchParams(location.search).get("safe") === "1"; } catch { return false; } };
+let safe = readSafe();
+let active = null;
+let installed = false;
+// B2: admission uses positive observed lifecycle, never active===null as proof of absence.
+const lifeStore = createStore(Object.freeze({ state: "unknown", generation: 0, reason: "unverified" }));
+export const ownerCssLifecycle = Object.freeze({ get: lifeStore.get, subscribe: lifeStore.subscribe });
+let lifeGeneration = 0, linkGeneration = 0, ownedLink = null, linkState = "unknown", sourceState = "unknown";
+function life(state, reason) { lifeStore.set(() => Object.freeze({ state, generation: ++lifeGeneration, reason })); }
+
+
+/** This load is in safe mode (?safe=1): no owner CSS — and, as they come, no widgets or effects and default themes. */
+export function safeMode() { return safe; }
+
+/** This device turned owner CSS off (a per-device switch: not synced, so a broken phone layout is fixed on the phone). */
+export function ownerCssOffHere() {
+  try { return localStorage.getItem(OWNER_CSS_OFF_KEY) === "1"; } catch { return false; }
+}
+export function setOwnerCssOffHere(off) {
+  try { if (off) localStorage.setItem(OWNER_CSS_OFF_KEY, "1"); else localStorage.removeItem(OWNER_CSS_OFF_KEY); } catch { /* this page only */ }
+  sync();
+}
+
+/** The person's version in force, as this page knows it (null: none). */
+export function ownerCssActive() { return active; }
+
+function eligiblePage() {
+  const b = document.body && document.body.dataset;
+  return !!b && b.mode === "full" && b.publicLink !== "1";
+}
+function wanted() {
+  if (!eligiblePage() || safe || !active || ownerCssOffHere()) return false;
+  const r = navStore.get().route;
+  return !(r && r.panel === "settings");
+}
+
+/** Revoke admission before a CSS/route mutation; a missing element alone is never an off verdict. */
+function sync() {
+  life("unknown", "changing");
+  const el = document.getElementById(LINK_ID);
+  if (!wanted()) {
+    ++linkGeneration;
+    if (el) el.remove();
+    if (ownedLink && ownedLink !== el) ownedLink.remove();
+    ownedLink = null; linkState = "unknown";
+    const absent = document.querySelectorAll(`#${LINK_ID}`).length === 0;
+    const route = navStore.get().route;
+    const disabled = !eligiblePage() || safe || ownerCssOffHere() || route?.panel === "settings";
+    life(absent && (disabled || sourceState === "off") ? "off" : "unknown", absent ? disabled ? "disabled_here" : sourceState === "off" ? "host_off" : "unverified" : "removal_failed");
+    return;
+  }
+  const href = `/ui/owner-css.css?v=${encodeURIComponent(active)}`;
+  if (el && el !== ownedLink) { life("unknown", "unowned_link"); return; }
+  if (ownedLink && el === ownedLink && el.getAttribute("href") === href) { life(linkState, linkState === "on" ? "loaded" : linkState === "loading" ? "loading" : "load_failed"); return; }
+  // A new owned element fences late events from the previous version, including href changes.
+  const epoch = ++linkGeneration, sha = active;
+  if (ownedLink) ownedLink.remove();
+  const link = document.createElement("link"); ownedLink = link; linkState = "loading";
+  link.setAttribute("rel", "stylesheet"); link.setAttribute("id", LINK_ID); link.setAttribute("href", href);
+  const current = () => ownedLink === link && epoch === linkGeneration && active === sha && wanted()
+    && link.isConnected === true && document.getElementById(LINK_ID) === link && link.getAttribute("href") === href;
+  link.addEventListener("load", () => {
+    if (!current()) return;
+    let valid = false;
+    try { valid = link.disabled !== true && !!link.sheet && link.sheet.ownerNode === link && link.sheet.disabled !== true && link.sheet.href === new URL(href, location.href).href; } catch { /* unknown stylesheet */ }
+    linkState = valid ? "on" : "unknown"; life(linkState, valid ? "loaded" : "load_unverified");
+  });
+  link.addEventListener("error", () => { if (!current()) return; linkState = "unknown"; life("unknown", "load_failed"); });
+  life("loading", "loading");
+  document.head.appendChild(link); // last in head; no style text, inline attribute or constructed stylesheet
+}
+
+// #1883 r2: every change this page makes, and every read it starts, moves `gen`. A host answer is taken only if nothing
+// newer happened after it was asked for — an older /state answer never overwrites a newer read, save, keep or revert.
+let gen = 0;
+const local = () => ++gen;
+
+/** This page saved, restored or turned off a version: show it at once (null: none). */
+export function setOwnerCssActive(sha) {
+  local();
+  showActive(sha, sha === null ? "off" : "on");
+}
+function showActive(sha, evidence = "unknown") {
+  active = typeof sha === "string" && /^[0-9a-f]{32}$/.test(sha) ? sha : null;
+  sourceState = evidence === "off" && sha === null ? "off" : evidence === "on" && active ? "on" : "unknown";
+  sync();
+}
+
+// ── Keep or revert (r4 §3): a saved version is on trial. "Keep" within 15 s keeps it; anything else reverts it — the
+// page that saved it at 15 s, and the host at its own deadline (a closed tab, or CSS that hid this bar). The bar is the
+// shell's, on every page and every device of the person's, so they can look at the result before answering.
+// A trial has an id of its own (the same text saved twice is two trials): keep and revert name it, and the host acts
+// only while that trial still is the one on trial — one kept, reverted or replaced meanwhile, anywhere, stays.
+export const KEEP_SECONDS = 15;
+/** The host's whole trial budget (20 s) and a second: the longest a page that did not save a trial waits to ask again. */
+const HOST_TRIAL_SECONDS = 21;
+/** { id, sha, previous, deadline (performance.now ms), local } while a version is on trial, else null. */
+export const ownerCssTrial = createStore(null);
+let trialTimer = null;
+// set(fn) replaces the state; set(object) would merge into it (createStore), and null merges as nothing.
+const dropTrial = () => { if (trialTimer) clearTimeout(trialTimer); trialTimer = null; ownerCssTrial.set(() => null); };
+
+async function post(path, body) {
+  const res = await fetch(path, { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+  let json = null;
+  try { json = await res.json(); } catch { /* none */ }
+  return { ok: res.ok, status: res.status, body: json };
+}
+
+/**
+ * Trial `id` (of version `sha`) is in force: show it, and ask. `local`: this page saved it — at the end of `seconds` it
+ * reverts it (by its id). Otherwise (another device's trial, or this page loaded during one) `seconds` is the host's
+ * own remaining time (never the device's clock), and at its end the page asks the host again, which has settled it.
+ */
+export function startOwnerCssTrial(id, sha, previous, seconds = KEEP_SECONDS, isLocal = true) {
+  local();
+  if (trialTimer) clearTimeout(trialTimer);
+  showActive(sha, "on");
+  const s = Math.max(0, Math.min(isLocal ? KEEP_SECONDS : HOST_TRIAL_SECONDS, Number.isFinite(seconds) ? seconds : 0));
+  const trial = { id, sha, previous: previous || null, deadline: performance.now() + s * 1000, local: isLocal };
+  ownerCssTrial.set(() => trial);
+  trialTimer = setTimeout(() => {
+    if (ownerCssTrial.get() !== trial) return;
+    if (isLocal) revertOwnerCss(); else { dropTrial(); reread(); }
+  }, s * 1000);
+}
+export async function keepOwnerCss() {
+  const trial = ownerCssTrial.get();
+  if (!trial) return false;
+  local();
+  dropTrial();
+  const r = await post("/ui/owner-css/keep", { trial: trial.id });
+  if (!r.ok) { await reread(); return false; }                        // too late: the host reverted it — show what is in force
+  return true;
+}
+export async function revertOwnerCss() {
+  const trial = ownerCssTrial.get();
+  if (!trial) return;
+  local();
+  dropTrial();
+  showActive(trial.previous);                                          // at once; the host's answer below is what stays
+  await post("/ui/owner-css/revert", { trial: trial.id }).catch(() => null);
+  await reread();
+}
+
+/** The shell's bar: "Keep this CSS?", the seconds left, Keep and Revert. */
+export function OwnerCssKeepBar() {
+  const trial = useStore(ownerCssTrial);
+  const [, tick] = useState(0);
+  useEffect(() => {
+    if (!trial) return undefined;
+    const id = setInterval(() => tick((n) => n + 1), 500);
+    return () => clearInterval(id);
+  }, [trial]);
+  if (!trial) return null;
+  const left = Math.max(0, Math.ceil((trial.deadline - performance.now()) / 1000));
+  return html`<div class="oc-keep" role="alertdialog" aria-live="assertive" aria-label=${t("app.ownerCssKeep")} data-trust="keep">
+    <span class="oc-keep-text"><span class="oc-keep-q">${t("app.ownerCssKeep")}</span><span class="oc-keep-left">${t("app.ownerCssKeepLeft", left)}</span></span>
+    <button type="button" class="btn btn-primary btn-sm" onClick=${() => { keepOwnerCss(); }}>${t("app.ownerCssKeepYes")}</button>
+    <button type="button" class="btn btn-sm" onClick=${() => { revertOwnerCss(); }}>${t("app.ownerCssKeepNo")}</button>
+  </div>`;
+}
+
+/** Ask the host which version is in force (another device changed it, or a trial ended), and whether one is on trial. */
+async function reread() {
+  if (!eligiblePage()) return;
+  const mine = local();
+  sourceState = "unknown"; life("unknown", "refreshing");
+  try {
+    const res = await fetch("/ui/owner-css/state", { credentials: "same-origin" });
+    if (!res.ok) return;
+    const body = await res.json();
+    if (body && mine === gen) reconcile(body);                         // nothing newer happened since this was asked
+  } catch { /* the next change tries again */ }
+}
+/** Match the host: the version in force, and whether one is on trial (another device's included) — or none any more. */
+function reconcile(state) {
+  const pending = state.pending && state.pending.sha === state.active && typeof state.pending.id === "string" ? state.pending : null;
+  const trial = ownerCssTrial.get();
+  if (!pending) { if (trial) dropTrial(); showActive(state.active, state.effectState); return; }
+  if (trial && trial.id === pending.id) return;                        // already asking about this one
+  // The host's own remaining time and a second (never this device's clock): it has settled the trial by then.
+  const remaining = typeof pending.remaining_ms === "number" && Number.isFinite(pending.remaining_ms) ? pending.remaining_ms : 0;
+  startOwnerCssTrial(pending.id, pending.sha, pending.previous, remaining / 1000 + 1, false);
+}
+
+/** Once per page load, before the first panel paints. */
+export function installOwnerCss() {
+  if (installed) return;
+  installed = true;
+  safe = readSafe();
+  const b = document.body && document.body.dataset;
+  showActive(b?.ownerCss ?? null, b?.ownerCssState);
+  navStore.subscribe(sync);
+  // What the host says now: a trial in progress (this page reloaded during one, or another device's) shows the bar;
+  // one the host has settled since the page was served shows its outcome.
+  if (eligiblePage()) reread();
+  let rev = appStore.get().prefsRev;
+  appStore.subscribe((s) => {
+    if (s.prefsRev === rev) return;
+    const first = rev === null || rev === undefined;
+    rev = s.prefsRev;
+    if (!first) reread();
+  });
+}