@songsid/agend 2.3.0-beta.9 → 2.3.1

package/dist/ui/shared/app-themes.js

@@ -1,9 +1,12 @@
 // #1629 (first design §5, r2 (b)(d)): agents' web themes on the page. Each applies to THAT agent's own chat surface
-// (and its avatar ring) only — never the shell, the sidebar chrome or another instance. What the host sends is
+// (and its avatar ring) — and, #2196, when the agent (theme.page.on) or a person (theme.pageByInstance) says so, its
+// colours on the whole page while that agent's Chat, View, Log or Details is open: colour tokens only, on the shell
+// (applyPageTheme); AgEnD's status colours, fonts, pictures and layout stay the page's own. What the host sends is
 // canonical already; this checks it again (a value that fails is dropped, never passed on) and applies it through the
 // CSSOM (custom properties) and fixed class tokens. No style attribute, no CSS text, no url() built in CSS.
 // Not shown: with "Show agents' themes, effects and widgets" off (fx.show, synced), and in safe mode (?safe=1).
 import { appStore, createStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import { safeMode } from "./owner-css.js";
 import { t } from "./app-i18n.js";
@@ -86,9 +89,110 @@ export function themeFor(name) {
     out.background = { image: bg.image, fit: bg.fit, opacity: bg.opacity };
   }
   if (labelOk(t.workingLabel)) out.workingLabel = t.workingLabel;
+  if (t.page && typeof t.page === "object") {
+    const sb = {};
+    if (t.page.sidebar && typeof t.page.sidebar === "object") for (const m of ["light", "dark"]) if (typeof t.page.sidebar[m] === "string" && COLOR.test(t.page.sidebar[m])) sb[m] = t.page.sidebar[m];
+    out.page = { on: t.page.on === true, sidebar: sb };
+  }
   return out;
 }
 
+// ── #2196: an agent's colours on the whole page ──
+
+/** The token defaults (tokens.css; web-theme.ts THEME_DEFAULTS, pinned by a test) a theme's palette goes over. */
+const PAGE_DEFAULTS = {
+  dark: { bg: "#212121", surface: "#2f2f2f", text: "#ececec", text2: "#b4b4b4", accent: "#7ab7ff" },
+  light: { bg: "#ffffff", surface: "#f4f4f4", text: "#0d0d0d", text2: "#5d5d5d", accent: "#0a62c2" },
+};
+/** AgEnD's status colours (tokens.css; web-theme.ts STATUS_COLORS, pinned by a test): never themed, always readable. */
+export const STATUS_COLORS = {
+  dark: { ok: "#4cc38a", warn: "#e3b341", danger: "#ff8a80", dangerFill: "#c9372c", focus: "#7ab7ff" },
+  light: { ok: "#1a7f37", warn: "#8a5a00", danger: "#c4222b", dangerFill: "#c4222b", focus: "#0a62c2" },
+};
+const PAGE_PROPS = { bg: "--bg", sidebar: "--bg-sidebar", surface: "--surface", text: "--text", text2: "--text-2", accent: "--accent" };
+const DERIVED_PROPS = ["--text-3", "--surface-2", "--border", "--border-strong", "--accent-dim", "--on-accent"];
+function lum(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];
+}
+const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
+const mix = (a, b, f) => `#${[1, 3, 5].map((i) => Math.round(parseInt(a.slice(i, i + 2), 16) * (1 - f) + parseInt(b.slice(i, i + 2), 16) * f).toString(16).padStart(2, "0")).join("")}`;
+
+/** The instance a page is about — Chat, View, Log or Details of it (app-shell.js openInstanceOf) — or null. */
+function openOf(route) {
+  return route && ["chat", "view", "log", "details"].includes(route.panel) && typeof route.instance === "string" ? route.instance : null;
+}
+/** A person's choice for `name`: "page" (the whole page), "chat" (only its chat) or null (the agent's own). */
+export function pageChoice(name) {
+  const f = prefInForce("theme.pageByInstance");
+  const m = f && f.value;
+  return m && typeof m === "object" && own(m, name) && (m[name] === "page" || m[name] === "chat") ? m[name] : null;
+}
+/** Set it ("agent" clears it), kept with the host's preferences like the identity colour a person picks. */
+export function setPageChoice(name, choice) {
+  const f = prefInForce("theme.pageByInstance");
+  const cur = f && f.value && typeof f.value === "object" ? f.value : {};
+  const keep = Object.keys(cur).filter((k) => own(cur, k) && k !== name && (cur[k] === "page" || cur[k] === "chat")).map((k) => [k, cur[k]]);
+  if (choice === "page" || choice === "chat") keep.push([name, choice]);
+  savePref("theme.pageByInstance", keep.length ? Object.fromEntries(keep) : null);
+  // In force on this page at once: what draws a theme follows this store (another device's change: onPrefsChanged).
+  themesStore.set({ pageRev: (themesStore.get().pageRev || 0) + 1 });
+}
+/** `name`'s theme when its colours go on the whole page (the person's choice, else the agent's), else null. */
+export function pageThemeFor(name) {
+  if (!name) return null;
+  const theme = themeFor(name);
+  if (!theme) return null;
+  const choice = pageChoice(name);
+  return choice === "page" || (choice !== "chat" && theme.page && theme.page.on) ? theme : null;
+}
+/** The page's colours for `mode`: the theme's palette over the defaults, and its sidebar (else its background). */
+export function pagePalette(theme, mode) {
+  const p = { ...PAGE_DEFAULTS[mode], ...(theme.accent ? { accent: theme.accent } : {}), ...((theme.colors && theme.colors[mode]) || {}) };
+  const out = {};
+  for (const k of Object.keys(PAGE_DEFAULTS[mode])) out[k] = p[k];
+  out.sidebar = (theme.page && theme.page.sidebar && theme.page.sidebar[mode]) || out.bg;
+  return out;
+}
+/**
+ * Whether a page palette reads (web-theme.ts's checks, again here: a person may put an agent's colours on the page
+ * though the agent never asked): text and secondary text 4.5:1 and the accent 3:1 on the background, surface and
+ * sidebar; every status colour 3:1 on the sidebar and the background.
+ */
+export function pageReadable(p, mode) {
+  if (!p || !Object.values(p).every((c) => typeof c === "string" && COLOR.test(c))) return false;
+  for (const bg of [p.bg, p.surface, p.sidebar]) {
+    if (ratio(p.text, bg) < 4.5 - 1e-9 || ratio(p.text2, bg) < 4.5 - 1e-9) return false;
+  }
+  if (ratio(p.accent, p.bg) < 3 - 1e-9 || ratio(p.accent, p.sidebar) < 3 - 1e-9) return false;
+  return Object.values(STATUS_COLORS[mode]).every((c) => ratio(c, p.sidebar) >= 3 - 1e-9 && ratio(c, p.bg) >= 3 - 1e-9);
+}
+/** The page colours in force now for `mode` (the instance the route is about), or null: the page's own. */
+export function pageNow(mode, route = navStore.get().route) {
+  const theme = pageThemeFor(openOf(route));
+  const p = theme && pagePalette(theme, mode);
+  return p && pageReadable(p, mode) ? p : null;
+}
+/**
+ * Draw page colours `p` (pageNow) on the shell `el`, or clear them (null): the palette's tokens and the few derived
+ * from it (borders, raised rows, the accent's tint and the colour on it), through the CSSOM; class th-page.
+ */
+export function applyPageTheme(el, p, mode) {
+  if (!el || !el.style) return;
+  for (const prop of [...Object.values(PAGE_PROPS), ...DERIVED_PROPS]) el.style.removeProperty(prop);
+  el.classList.remove("th-page");
+  if (!p) return;
+  for (const [k, prop] of Object.entries(PAGE_PROPS)) el.style.setProperty(prop, p[k]);
+  el.style.setProperty("--text-3", p.text2);
+  el.style.setProperty("--surface-2", mix(p.surface, p.text, 0.08));
+  el.style.setProperty("--border", mix(p.bg, p.text, 0.14));
+  el.style.setProperty("--border-strong", mix(p.bg, p.text, 0.45));
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(p.accent.slice(i, i + 2), 16));
+  el.style.setProperty("--accent-dim", `rgba(${r}, ${g}, ${b}, ${mode === "dark" ? 0.14 : 0.08})`);
+  el.style.setProperty("--on-accent", ratio("#ffffff", p.accent) >= ratio("#0d0d0d", p.accent) ? "#ffffff" : "#0d0d0d");
+  el.classList.add("th-page");
+}
+
 export function isThemeLocked(name) { return (themesStore.get().locked || []).includes(name); }
 
 const TOKENS = ["th", "th-font-inter", "th-font-system", "th-font-mono", "th-bubble-none", "th-bubble-thin", "th-bubble-accent", "th-agent-bubble"];
@@ -193,7 +297,18 @@ export function themeMenuItems(name) {
   const locked = isThemeLocked(name);
   const w = themesStore.get().widgets;
   const placed = w && own(w, name) && w[name] && typeof w[name] === "object" ? w[name] : {};
+  // #2196: where this agent's colours go — its own choice, the whole page, or only its chat (the person's wins).
+  const choice = pageChoice(name), theme = themeFor(name), mode = resolvedMode();
+  const agentsOwn = theme && theme.page && theme.page.on ? "chat.pageAgentOn" : "chat.pageAgentOff";
+  const readable = !!theme && pageReadable(pagePalette(theme, mode), mode);
+  const page = theme ? [
+    { key: "page-heading", heading: true, label: t("chat.pageColours") },
+    { key: "page-agent", checked: choice === null, label: t(agentsOwn), onSelect: () => setPageChoice(name, "agent") },
+    { key: "page-page", checked: choice === "page", label: t("chat.pageWhole"), disabled: !readable && choice !== "page", onSelect: () => setPageChoice(name, "page") },
+    { key: "page-chat", checked: choice === "chat", label: t("chat.pageChatOnly"), onSelect: () => setPageChoice(name, "chat") },
+  ] : [];
   return [
+    ...page,
     ...["chat_header", "details"].filter((slot) => own(placed, slot)).map((slot) => ({
       key: `widget-remove-${slot}`, label: t(slot === "chat_header" ? "chat.widgetRemoveHeader" : "chat.widgetRemoveDetails"), icon: "trash",
       onSelect: () => removeWidget(name, slot),