@songsid/agend 2.3.0-beta.8 → 2.3.0

package/dist/ui/shared/app.js

@@ -8,8 +8,9 @@
 // #1665 first: the host's preferences go into this browser's cache before any module below reads its key.
 import { bootPrefs } from "./app-prefs.js";
 import { html, render } from "./app-html.js";
-import { Shell, handleKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener } from "./app-shell.js";
+import { Shell, handleKey, handleSearchKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener, isMacLike } from "./app-shell.js";
 import { installSwipe } from "./app-swipe.js";
+import { installTextUndo } from "./text-undo.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
 import { appStore, applyStatus, applyActivity, guestPage } from "./app-store.js";
@@ -93,6 +94,8 @@ if (mode === "full") {
     panels.set("log", { load: () => loadLog().then((m) => m.LogPanel) });
     // #1386 §6.3: desktop notifications for new "Needs you" items, in any panel, while this signed-in page is open.
     startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
+    // #2233: a backend sign-in running anywhere is shown on every admin page (the module lives behind the session gate).
+    import("/ui/js/backend-signin.js").then((m) => m.installSignIn(), () => {});
   }
   // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
   // A guest's page only reads them (prefsWritable is false there).
@@ -121,6 +124,11 @@ if (!guest) installOwnerCss();
 }
 
 document.addEventListener("keydown", handleKey);
+// #2293: Ctrl+K / ⌘K (and Ctrl+F in a chat) — an admin's full app only; the server refuses a guest's search anyway.
+if (mode === "full" && !guest) document.addEventListener("keydown", handleSearchKey);
+// #2342: Ctrl/⌘+Z and Ctrl+Shift+Z / Ctrl+Y / ⌘⇧Z in every text field, one history per field (the browser's is one
+// for the whole page, and any script write wipes it).
+installTextUndo({ mac: isMacLike() });
 // #1605: on a phone (the sidebar is a drawer), swipe right in the main area to open it, left to close it — the same
 // open/close as ☰ and the scrim. Nothing that owns a sideways drag (code, tables, the terminal, inputs, dialogs) and
 // never the left edge (iOS: "back").

package/dist/ui/shared/card-strings.js

@@ -11,8 +11,10 @@ register("card", {
     sizeSName: "Small", sizeMName: "Medium", sizeLName: "Large",
     byHuman: "set by a person",
     byAgent: "set by the agent",
+    menu: "Identity card",
     show: "Show card",
     hide: "Hide card",
+    showRow: "Show picture and bio",
     bannerSafe: "Every screen",
     bannerPhone: "Phone · M card",
   },
@@ -24,8 +26,10 @@ register("card", {
     sizeSName: "小", sizeMName: "中", sizeLName: "大",
     byHuman: "由人設定",
     byAgent: "由 agent 設定",
+    menu: "身分卡",
     show: "顯示卡片",
     hide: "隱藏卡片",
+    showRow: "顯示小圖和介紹",
     bannerSafe: "所有螢幕",
     bannerPhone: "手機 · 中卡片",
   },

package/dist/ui/shared/effect-app-runtime.js

@@ -13,7 +13,7 @@ const episodes = new WeakSet();
 
 /** `current` belongs to the page/session episode. Route cleanup only releases its contribution. */
 export function createAppEffectRuntime({ window: host, current, observe, onChange = () => {}, onDispose = () => {}, resolveOwnerTarget = null, onOwnerUnavailable = () => {}, factories = {} }) {
-  let dead = false, error = null, loader = null, registry = null, writer = null, source = null, personal = null, trial = null, pending = null, lastMetadata = null, serial = 0, revision = 0, stamp = null, syncing = false, queued = false;
+  let dead = false, claimed = false, error = null, loader = null, registry = null, writer = null, source = null, personal = null, trial = null, pending = null, lastMetadata = null, serial = 0, revision = 0, stamp = null, syncing = false, queued = false;
   const bindings = new Map(), profiles = new Map();
   let lastContext = null, playbackUnavailable = null;
   const identity = effectPlaybackIdentity(host), auth = host?.AgendAuth;
@@ -26,7 +26,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
   };
   const placementIdentity = p => JSON.stringify([p.by, p.manifest.layer, p.params]);
   const clock = () => host.performance.now();
-  let offAuth = null;
+  let offAuth = null, disposed = null;
   const snapshot = s => {
     const effects = s?.metadata?.effects ?? [], known = registry?.snapshot?.() ?? [];
     const rows = effects.map(p => {
@@ -76,16 +76,18 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
     if (pending?.source === s) safe(() => pending.controller.abort());
     revision++; stamp = null;
   }
-  function dispose() {
-    if (dead) return; dead = true; discard(source);
+  function dispose(restartable = false) {
+    if (dead) return disposed; dead = true; discard(source);
     safe(() => trial?.dispose()); safe(() => pending?.controller.abort()); safe(() => registry?.dispose?.()); safe(() => loader?.dispose?.()); safe(() => personal?.dispose()); safe(() => writer?.dispose()); safe(() => offAuth?.());
     safe(() => host?.removeEventListener?.("pagehide", dispose));
     for (const row of profiles.values()) safe(() => row.collector.dispose()); profiles.clear(); bindings.clear(); safe(() => onDispose({ error }));
+    disposed = Promise.all([safe(() => loader?.whenDisposed?.()), safe(() => registry?.whenDisposed?.())]).then(() => { if (restartable === true && claimed) episodes.delete(host); });
+    return disposed;
   }
   function fail(reason) { if (dead) return; error = reason; dispose(); safe(() => onChange({ error, rows: [], effects: [], loading: false })); }
   const unavailable = { ok: false, sync() {}, changedChat() {}, reply() {}, detachChat() {}, attachChat() { return null; }, attachTrial() { return null; }, stopTrial() {}, trialSnapshot: () => ({ rows: [] }), snapshot: () => snapshot(null), dispose };
   if (!host || typeof host !== "object" || episodes.has(host) || !identity || typeof current !== "function" || typeof observe !== "function" || typeof auth?.onSessionEnd !== "function" || typeof auth?.sessionEnded !== "function") return unavailable;
-  episodes.add(host); // Claim before invoking current/auth callbacks: one attempt per Window episode.
+  episodes.add(host); claimed = true; // Claim before invoking current/auth callbacks: one attempt per Window episode.
   if (!alive()) { dispose(); return unavailable; }
   try {
     offAuth = auth.onSessionEnd(dispose);

package/dist/ui/shared/effect-chat-runtime.js

@@ -1,3 +1,4 @@
+import { chatEffectIdentity } from "./effect-display-metadata.js";
 /** #1629: one committed local Chat lease joins the reviewed host-only effect primitives. */
 import { createEffectRuntimeLoader } from "./effect-runtime-loader.js";
 import { createEffectRegistry } from "./effect-registry.js";
@@ -43,13 +44,7 @@ export function createEffectWriter(host, current) {
 }
 
 /** Frozen, server-rendered session identity only. A header-token/public/View load has no identity. */
-export function chatEffectIdentity(host) {
-  try {
-    const b = host.document.body.dataset, x = JSON.parse(host.document.documentElement.getAttribute("data-prefs") || "null");
-    if (b.mode !== "full" || b.tier === "guest" || b.publicLink === "1" || b.webTransport === "poll" || !["person", "operator"].includes(x?.ownerScope) || x.unreadable === true || typeof x.ownerEpoch !== "string" || !/^[a-f0-9]{16}$/.test(x.ownerEpoch)) return null;
-    return Object.freeze({ epoch: x.ownerEpoch, scope: x.ownerScope });
-  } catch { return null; }
-}
+export { chatEffectIdentity } from "./effect-display-metadata.js";
 /** Chat-only public/guest capability stays separate from personal preferences and management. */
 export function effectPlaybackIdentity(host) {
   try {

package/dist/ui/shared/effect-cursor.js

@@ -25,9 +25,10 @@ export function createEffectCursor({ window: host, current, readImage, onChange
   const unavailable = { ok: false, update() {}, snapshot: () => ({ status: "unavailable", id: null }), dispose() {} };
   if (!host?.document || owners.has(host) || ![current, readImage, onChange, host.getComputedStyle, host.Blob, host.URL?.createObjectURL, host.URL?.revokeObjectURL, host.AbortController, host.setTimeout, host.clearTimeout, host.performance?.now].every(x => typeof x === "function")) return unavailable;
   const token = {}; owners.set(host, token);
+  let finishDisposed; const disposed = new Promise(resolve => { finishDisposed = resolve; });
   const doc = host.document; let dead = false, previous = null, wanted = null, pending = null, active = null, blocked = null, generation = 0, checking = false, notifying = false, status = "off";
   const safe = fn => { try { return fn(); } catch { return null; } };
-  const release = () => { if (dead && !pending && owners.get(host) === token) owners.delete(host); };
+  const release = () => { if (dead && !pending) { if (owners.get(host) === token) owners.delete(host); finishDisposed(); } };
   function alive() {
     if (dead || checking) return false;
     checking = true; const value = safe(() => current() === true && host.document === doc); checking = false;
@@ -121,5 +122,5 @@ export function createEffectCursor({ window: host, current, readImage, onChange
     }
     start(); tell();
   }
-  return { ok: true, update, snapshot, dispose };
+  return { ok: true, update, snapshot, dispose, whenDisposed: () => disposed };
 }

package/dist/ui/shared/effect-display-metadata.js

@@ -0,0 +1,39 @@
+/** #1629: closed host display metadata. Neither this object nor its token grants a trial read. */
+const KEYS = ["v", "offer", "id", "title", "expiresAt"], ID = /^[0-9a-f]{32}$/;
+const FORBIDDEN = /(?!\u200d)[\p{Cc}\p{Cf}\p{Zl}\p{Zp}]/u;
+const VISIBLE = /[^\p{M}\p{C}\p{Z}\u115f\u1160\u3164\uffa0\u2800]/u;
+let graphemes = null;
+export function checkEffectTrialOffer(value) {
+  try {
+    if (!value || ![Object.prototype, null].includes(Object.getPrototypeOf(value))) return null;
+    const keys = Reflect.ownKeys(value);
+    if (keys.length !== KEYS.length || keys.some(k => typeof k !== "string" || !KEYS.includes(k))) return null;
+    const x = Object.create(null);
+    for (const key of KEYS) {
+      const d = Object.getOwnPropertyDescriptor(value, key);
+      if (!d || !("value" in d) || !d.enumerable) return null;
+      x[key] = d.value;
+    }
+    if (x.v !== 1 || typeof x.offer !== "string" || !ID.test(x.offer) || typeof x.id !== "string" || !ID.test(x.id)
+      || typeof x.title !== "string" || x.title.length > 400 || x.title.normalize("NFC") !== x.title || x.title.trim() !== x.title
+      || FORBIDDEN.test(x.title) || !VISIBLE.test(x.title) || !Number.isSafeInteger(x.expiresAt) || x.expiresAt < 0) return null;
+    graphemes ??= new Intl.Segmenter(undefined, { granularity: "grapheme" });
+    let count = 0; for (const _part of graphemes.segment(x.title)) if (++count > 40) return null;
+    if (count < 1) return null;
+    return Object.freeze({ v: 1, offer: x.offer, id: x.id, title: x.title, expiresAt: x.expiresAt });
+  } catch { return null; }
+}
+/** Role and sender are host fields, never inferred from a message's text. Start must separately authorize. */
+export function effectTrialMessage(message) {
+  if (!message || message.role !== "status" || message.sender !== "agend" || typeof message.instance !== "string"
+    || message.instance.length < 1 || message.instance.length > 128) return null;
+  return checkEffectTrialOffer(message.effectTrial);
+}
+
+export function chatEffectIdentity(host) {
+  try {
+    const b = host.document.body.dataset, x = JSON.parse(host.document.documentElement.getAttribute("data-prefs") || "null");
+    if (b.mode !== "full" || b.tier === "guest" || b.publicLink === "1" || b.webTransport === "poll" || !["person", "operator"].includes(x?.ownerScope) || x.unreadable === true || typeof x.ownerEpoch !== "string" || !/^[a-f0-9]{16}$/.test(x.ownerEpoch)) return null;
+    return Object.freeze({ epoch: x.ownerEpoch, scope: x.ownerScope });
+  } catch { return null; }
+}

package/dist/ui/shared/effect-owner-source.js

@@ -74,7 +74,14 @@ export function createOwnerEffectSource({ current, readMetadata, readResource, r
     },
     descriptors() {
       if (!alive() || !metadata || error) return [];
-      const body = metadata, gen = generation, proof = safe(() => effectStockSnapshot(stock()));
+      const body = metadata, gen = generation;
+      // #2188: the stock snapshot walks the whole page (thousands of computed styles). With no slot holding an effect
+      // that could play, there is nothing for it to admit: skipped — every page change (a status, a chat switch) ran it.
+      if (!SLOTS.some(slot => body.slots[slot]?.status === "available" && failed.get(slot) !== body.slots[slot].id)) {
+        for (const slot of SLOTS) drop(slot);
+        return [];
+      }
+      const proof = safe(() => effectStockSnapshot(stock()));
       if (!fresh(body, gen)) return [];
       if (!proof) { clear(); return []; }
       const result = [];

package/dist/ui/shared/effect-policy.js

@@ -77,9 +77,9 @@ export function allocateEffectFrames(descriptors, context) {
   if (!Array.isArray(descriptors) || descriptors.length > 128 || !plain(context)) return [];
   const keys = new Set(), duplicate = new Set();
   for (const d of descriptors) if (d && typeof d.key === "string") { if (keys.has(d.key)) duplicate.add(d.key); keys.add(d.key); }
-  const result = descriptors.map(d => ({ key: d?.key, verdict: "off", reason: "unknown", queuePos: null }));
+  const result = descriptors.map(d => ({ key: d?.key, verdict: "off", reason: "descriptor_invalid", queuePos: null }));
   const gates = ["safe", "publicLink", "reducedMotion", "hidden", "enabled", "show", "transportReady", "constrained", "modal"];
-  if (gates.some(k => typeof context[k] !== "boolean") || context.openInstance !== null && !instanceName(context.openInstance)) return result;
+  if (gates.some(k => typeof context[k] !== "boolean") || context.openInstance !== null && !instanceName(context.openInstance)) return result.map(r => ({ ...r, reason: "gates_unknown" }));
   let global = null;
   if (context.safe === true) global = "safe_mode";
   else if (context.reducedMotion === true) global = "reduced_motion";

package/dist/ui/shared/effect-registry.js

@@ -2,7 +2,7 @@
 import { allocateEffectFrames, effectEvent, effectPlaybackReason } from "./effect-policy.js";
 import { createOpaqueEffectFrame } from "./effect-frame.js";
 import { createEffectGeometry, hostEffectRect } from "./effect-geometry.js";
-import { effectStockSnapshot, effectStockAllows } from "./effect-stock-snapshot.js";
+import { effectStockSnapshot, effectStockAllows, effectStockRefusal } from "./effect-stock-snapshot.js";
 import { effectTrialStage, effectTrialStageIdentity, watchEffectTrialStage } from "./effect-trial-stage.js";
 import { EffectBudget } from "./effect-profiler.js";
 
@@ -42,7 +42,8 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
   try { if (!host?.document || !host.document.body || registries.has(host) || typeof load !== "function" || typeof stockSnapshot !== "function" || typeof onChange !== "function" || typeof onProfile !== "function" || typeof onMount !== "function" || typeof onRetire !== "function" || typeof clock !== "function" || !safety || ["allowed", "begin", "finish", "pause", "resume"].some(k => typeof safety[k] !== "function") || ["requestAnimationFrame", "cancelAnimationFrame", "setTimeout", "clearTimeout", "MutationObserver", "ResizeObserver", "AbortController"].some(k => typeof host[k] !== "function")) return { ok: false, reason: "registry_unsupported" }; } catch { return { ok: false, reason: "registry_unsupported" }; }
   let dead = false, blocked = null, revision = 0, last = null, lastView = null, frameSerial = 0, context = null, descriptors = [], raf = null, timer = null;
   const slots = new Map(), loads = new Set(), paused = new Map(), offs = [], observed = new Set(), failures = new Map(), results = new Map();
-  let readingStock = false;
+  let finishDisposed; const disposed = new Promise(resolve => { finishDisposed = resolve; });
+  let readingStock = false, stockFailure = "stock_evidence_invalid", warned = null;
   let root, geometry, observer, resize, longTasks = null, longTasksSupported = false;
   const time = () => {
     let n; try { n = clock(); } catch { return null; }
@@ -68,10 +69,14 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
   const coverage = (d = null) => {
     if (dead || blocked || readingStock) return null;
     const before = revision; let proof = null; readingStock = true;
-    try { proof = effectStockSnapshot(stockSnapshot(Object.freeze({ frameRoot: root }))); }
-    catch { /* unknown is never permission */ }
+    let failure = "stock_provider_failed";
+    try { const raw = stockSnapshot(Object.freeze({ frameRoot: root })); proof = effectStockSnapshot(raw); failure = proof ? null : effectStockRefusal(raw); }
+    catch { /* unavailable stays denied, with a local diagnostic */ }
     finally { readingStock = false; }
     if (dead || blocked || before !== revision) return null;
+    stockFailure = failure;
+    if (failure !== warned) { warned = failure; if (failure) { try { host.console?.warn("[AgEnD effects] Playback blocked:", failure); } catch { /* display only */ } } }
+    if (dead || blocked || before !== revision) return null;
     return d === null || permits(d, proof) ? proof : null;
   };
   const position = (d, proof) => d.trialStage ? localStage(d, proof)?.rect ?? null : hostEffectRect(d.element);
@@ -150,7 +155,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
   const shown = why => (why === "gates_unknown" && !eligible() && gateReason()) || why;
   function view() {
     return descriptors.map(d => {
-      const r = results.get(d.key) ?? { verdict: "off", reason: blocked ?? (!eligible() && gateReason()) ?? "unknown", queuePos: null }, s = slots.get(d.key);
+      const r = results.get(d.key) ?? { verdict: "off", reason: blocked ?? (eligible() ? stockFailure : gateReason()) ?? "runtime_unavailable", queuePos: null }, s = slots.get(d.key);
       // #2055 one display precedence: a global latch, then the sticky safety history, then this page's own pause/failure.
       const n = named.get(d.key), sticky = n && n.identity === signature(d) ? n.reason : null;
       return { key: d.key, id: d.id, ...r, ...(sticky && r.verdict === "queued" ? { verdict: "off", queuePos: null } : {}), phase: s?.frame ? s.ready ? "running" : "starting" : s ? "loading" : null,
@@ -173,7 +178,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
   };
   function observe() {
     const nodes = host.document.querySelectorAll("[data-trust]");
-    if (nodes.length > 128) throw Error("trust coverage unavailable");
+    if (nodes.length > 4096) throw Error("trust coverage unavailable");
     const wanted = new Set([host.document.documentElement, ...nodes]);
     for (const d of descriptors) if (d.element?.ownerDocument === host.document && d.element.isConnected === true) wanted.add(d.element);
     for (const n of observed) if (!wanted.has(n)) { resize.unobserve(n); observed.delete(n); }
@@ -185,7 +190,14 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     const proposal = revision;
     if (time() === null) blocked = "clock_unavailable";
     const hidden = context?.hidden === true || host.document.visibilityState !== "visible";
+    // #2188: nothing to place, nothing to prove — the stock walk (thousands of computed styles) is not run for an empty
+    // list; a frame still held is retired as superseded, exactly as an allocation of nothing would.
+    if (!blocked && descriptors.length === 0) {
+      for (const s of [...slots.values()]) { retire(s, "superseded"); if (dead || proposal !== revision) return; }
+      results.clear(); tell(); return;
+    }
     const stock = eligible() ? coverage() : null;
+    if (dead || proposal !== revision) return;
     if (blocked || !eligible() || !stock) {
       if (!stopAll(blocked ?? "gates_unknown")) return;
       results.clear();
@@ -234,7 +246,11 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       if (s.frame && s.hiddenSince !== null) { s.hiddenSince = null; s.healthySince = last; if (s.budget.gates({ hidden: false, reducedMotion: false, saveData: false, show: true }).remove) retire(s, "hidden"); }
       if (dead || proposal !== revision) return;
     }
-    try { observe(); } catch { stopAll("trust_geometry_unknown"); tell(); return; }
+    try { observe(); } catch {
+      if (dead || proposal !== revision || !stopAll("trust_geometry_unknown")) return;
+      for (const d of descriptors) results.set(d.key, { verdict: "off", reason: "trust_geometry_unknown", queuePos: null });
+      tell(); return;
+    }
     const max = context.constrained ? 1 : 3;
     for (const d of descriptors) {
       if (!chosen.has(d.key) || slots.has(d.key)) continue;
@@ -327,7 +343,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       }).catch(() => { if (current(s)) retire(s, "resource_unavailable"); }).finally(() => {
         if (request.timer !== null) host.clearTimeout(request.timer);
         loads.delete(request); if (s.request === request) s.request = null;
-        if (!dead) reconcile(); else if (loads.size === 0 && registries.get(host) === api) registries.delete(host);
+        if (!dead) reconcile(); else if (loads.size === 0) { if (registries.get(host) === api) registries.delete(host); finishDisposed(); }
       });
     }
     schedule(); tell();
@@ -431,7 +447,8 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     } catch { return false; }
   }
   function pointer(event) {
-    if (dead || blocked || !pointerGate() || event.isTrusted !== true) return;
+    // #2188: no frame to forward to — no gate to read (each read walks the page's computed styles, per pointer event).
+    if (dead || blocked || slots.size === 0 || !pointerGate() || event.isTrusted !== true) return;
     const kinds = { pointermove: "move", pointerdown: "down", pointerup: "up", click: "click", wheel: "wheel" }, kind = kinds[event.type];
     if (!kind || !finite(event.clientX) || !finite(event.clientY) || Math.abs(event.clientX) > 1e7 || Math.abs(event.clientY) > 1e7 || !Number.isInteger(event.buttons) || event.buttons < 0 || event.buttons > 31) return;
     try { const target = host.document.elementFromPoint(event.clientX, event.clientY); if (!target || typeof target.closest !== "function" || target.closest("[data-trust]")) return; } catch { return; }
@@ -502,7 +519,8 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     },
     /** Host-only content-free signal API. Raw pointer publishing is refused; native pointer metadata is coalesced here. */
     publish(type, fields, instance = null) {
-      if (dead || blocked || !globalAllowed() || context.hidden || !coverage() || !TYPES.includes(type)) return 0;
+      // #2188: no frame to send to — nothing to prove (the stock walk ran twice on every page change).
+      if (dead || blocked || slots.size === 0 || !globalAllowed() || context.hidden || !coverage() || !TYPES.includes(type)) return 0;
       const ts = time(); if (ts === null) { blocked = "clock_unavailable"; stopAll(blocked); tell(); return 0; }
       let sent = 0; const proposal = revision;
       for (const s of [...slots.values()]) {
@@ -513,11 +531,12 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       }
       return sent;
     },
+    whenDisposed: () => disposed,
     dispose() {
       if (dead) return; dead = true; revision++; stopAll("disposed");
       if (raf !== null) host.cancelAnimationFrame(raf); if (timer !== null) host.clearTimeout(timer);
       observer.disconnect(); resize.disconnect(); longTasks?.disconnect(); for (const off of offs) off();
-      geometry.dispose(); root.remove(); observed.clear(); if (loads.size === 0 && registries.get(host) === api) registries.delete(host);
+      geometry.dispose(); root.remove(); observed.clear(); if (loads.size === 0) { if (registries.get(host) === api) registries.delete(host); finishDisposed(); }
     },
   };
   // Read-only host geometry seam; no selector guessing among poster and live roots.

package/dist/ui/shared/effect-runtime-loader.js

@@ -143,7 +143,8 @@ export function createEffectRuntimeLoader({ window: host, ownerEpoch, current, o
   if (!host || typeof host !== "object" || loaders.has(host) || typeof host.fetch !== "function" || typeof host.AbortController !== "function" || typeof host.setTimeout !== "function" || typeof host.clearTimeout !== "function" || typeof ownerEpoch !== "string" || !EPOCH.test(ownerEpoch) || typeof current !== "function" || typeof onRevoke !== "function") return { ok: false };
   const reservation = {}; loaders.set(host, reservation);
   let dead = false, revoked = false, previous = null; const pending = new Set();
-  const releaseWindow = () => { if (dead && pending.size === 0 && loaders.get(host) === reservation) loaders.delete(host); };
+  let finishDisposed; const disposed = new Promise(resolve => { finishDisposed = resolve; });
+  const releaseWindow = () => { if (dead && pending.size === 0) { if (loaders.get(host) === reservation) loaders.delete(host); finishDisposed(); } };
   // Terminal state is latched before callbacks. Abort releases logical callers, never physical reservations.
   function revoke(reason) {
     if (dead || revoked) return;
@@ -215,6 +216,7 @@ export function createEffectRuntimeLoader({ window: host, ownerEpoch, current, o
   }
   const ownerRead = (signal, settled = false) => run("placements", `/ui/effects/owner?ownerEpoch=${ownerEpoch}`, checkEffectOwnerSlots, signal, settled);
   return { ok: true,
+    whenDisposed: () => disposed,
     owner(signal) { return ownerRead(signal); },
     placements(instance, signal) { return placementRead(instance, signal); },
     resource(input, signal) { return resourceRead(input, signal); },

package/dist/ui/shared/effect-stock-snapshot.js

@@ -32,3 +32,12 @@ export function effectStockAllows(snapshot, { layer, by } = {}) {
   const proof = effectStockSnapshot(snapshot);
   return !!proof && (layer === "behind" || layer === "front" && proof.front && (by === "human" || proof.agentFront));
 }
+
+/** Display only. Refused provider metadata never becomes paint evidence or authority. */
+export function effectStockRefusal(value) {
+  try {
+    if (!plain(value)) return "stock_evidence_invalid";
+    const d = Object.getOwnPropertyDescriptor(value, "reason");
+    return d && Object.hasOwn(d, "value") && typeof d.value === "string" && /^[a-z][a-z0-9_]{0,79}$/.test(d.value) ? d.value : "stock_evidence_invalid";
+  } catch { return "stock_evidence_invalid"; }
+}

package/dist/ui/shared/effect-stock-trust.js

@@ -11,10 +11,10 @@ const SPECS = [
   ["confirmation", ".shell > .pending-stack, .shell .p-settings > .panel-body > .col > .pending-stack.inline"], ["preview", ".shell .chat-split > .pv-panel, .shell .chat-split > .pv-divider"],
   ["preview-menu", ".shell .thread details.pv-menu"], ["palette", ".shell .dock .cmd-palette"],
   ["drop", ".shell .p-chat > .drop-overlay"],
-  ["thread-control", ".shell .chat-main > .amb-note, .shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
+  ["thread-control", ".shell .chat-main > .amb-note, .shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .msg > div.msg-actions, .shell .thread .msg > button.msg-quote, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
   ["link", ".shell .thread .md a, .shell .thread .st-text > a.st-link, .shell .dock .prompts .txt > a.st-link"], ["attachment", ".shell .thread .atts"], ["media", ".shell .thread .att-media"],
   ["panel-navigation", ".shell .p-fleet > .seg, .shell .p-settings > .seg"],
-  ["panel-content", ".shell .p-fleet > .panel-body, .shell .p-needs > .panel-body, .shell .p-settings > .panel-body, .shell .p-log > .panel-body, .shell .p-details > .panel-body, .shell .p-view > .panel-body, .shell .p-view > .v-term, .shell .p-view > .v-id, .shell .p-view > .v-card"],
+  ["panel-content", ".shell .p-fleet > .panel-body, .shell .p-needs > .panel-body, .shell .p-settings > .panel-body, .shell .p-log > .panel-body, .shell .p-details > .panel-body, .shell .p-view > .panel-body, .shell .p-view > .v-term, .shell .p-view > .v-id"],
   ["panel-controls", ".shell .p-log > .log-bar, .shell .p-settings > .s-pending"],
   ["session-ended", "body > .agend-session-ended[role=alert]"],
 ];
@@ -28,7 +28,7 @@ const PANELS = Object.freeze({
   settings: { required: [".panel-head", ".seg", ".panel-body"], optional: [".s-pending"] },
   log: { required: [".panel-head", ".panel-body"], optional: [".log-bar"] },
   details: { required: [".panel-head", ".panel-body"], optional: [] },
-  view: { required: [".panel-head"], optional: [".panel-body", ".v-term", ".v-id", ".v-card"] },
+  view: { required: [".panel-head"], optional: [".panel-body", ".v-term", ".v-id"] },
 });
 function panelSurface(doc, chat) {
   if (chat) return { panel: chat, structural: STRUCTURAL, content: CONTENT, kind: "chat" };
@@ -37,8 +37,8 @@ function panelSurface(doc, chat) {
   const children = [...panel.children], count = selector => children.filter(el => el.matches(selector)).length;
   if (spec.required.some(selector => count(selector) !== 1) || spec.optional.some(selector => count(selector) > 1)
     || children.some(el => !el.matches([...spec.required, ...spec.optional, "dialog.dlg", "dialog.lb"].join(",")))) return null;
-  if (kind === "view" && !(count(".panel-body") === 1 && !count(".v-term") && !count(".v-id") && !count(".v-card")
-    || !count(".panel-body") && count(".v-term") === 1 && count(".v-card") === 1)) return null;
+  if (kind === "view" && !(count(".panel-body") === 1 && !count(".v-term") && !count(".v-id")
+    || !count(".panel-body") && count(".v-term") === 1 && count(".v-id") === 1)) return null;
   const prefix = `.p-${kind} > `;
   return { panel, kind, structural: [...STRUCTURAL.slice(0, 5), `.main > .p-${kind}`],
     content: [...CONTENT.filter(selector => !selector.startsWith(".p-chat") && !selector.startsWith(".chat-main")),
@@ -115,13 +115,36 @@ function stockBannerFill(host, el) {
   if (b.display !== "block" || el.offsetParent !== box) return null;
   return rect(box);
 }
+function zeroClipMargin(host, style) {
+  const margin = style.overflowClipMargin ?? style.getPropertyValue?.("overflow-clip-margin");
+  // WebKit versions without this property still implement paint containment. An absent
+  // computed value is usable only when the engine explicitly reports it unsupported;
+  // unknown capability or a supported but unreadable/expanded margin cannot prove a box.
+  return margin === "0px" || [undefined, ""].includes(margin)
+    && host.CSS?.supports?.("overflow-clip-margin", "1px") === false;
+}
 function protectedPaint(host, root, budget) {
+  // These two stock toolbar boxes physically clip ALL descendants, including fixed-position
+  // children. Their entire box is a hole; descendant ink cannot escape it. Inline, fragmented,
+  // expanded-clip or CSS-overridden boxes take the ordinary bounded walk instead.
+  const s = host.getComputedStyle(root);
+  if (root.matches?.(".shell .thread .msg-tools, .shell .thread .codeblock > .cb-head") && s.contain === "paint"
+    && s.display === "flex" && s.overflowX === "clip" && s.overflowY === "clip" && zeroClipMargin(host, s)
+    && none(s.filter) && none(s.backdropFilter) && s.borderImageSource === "none" && [undefined, "", "visible"].includes(s.contentVisibility) && root.getClientRects().length === 1) {
+    if (++budget.n > 4096) { budget.exceeded = true; return null; }
+    const r = rect(root), pad = outset(s);
+    // Containment clips descendants, not the root's own ink. Do not infer a world-space
+    // outset from local CSS lengths under a potentially transformed content ancestor.
+    if (!r || pad !== 0) return null;
+    return r;
+  }
   const nodes = [root, ...root.querySelectorAll("*")]; budget.n += nodes.length;
-  if (budget.n > 4096) return null;
+  if (budget.n > 4096) { budget.exceeded = true; return null; }
   let union = null;
   for (const el of nodes) {
     if (!visible(host, el)) continue;
     const style = host.getComputedStyle(el), pad = outset(style);
+    if (style.borderImageSource !== undefined && style.borderImageSource !== "none" || ![undefined, "", "visible"].includes(style.contentVisibility)) return null;
     const r = none(style.filter) ? rect(el) : stockBannerFill(host, el);
     if (!r || pad === null || !none(style.backdropFilter)) return null;
     const a = { x: r.x - pad, y: r.y - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
@@ -165,15 +188,23 @@ export function stockEffectTrust(host, { frameRoot = null, ownerCss = "unknown"
       if (s.position !== "relative" || s.zIndex !== "1" || !neutral(s)) return fail("stock_order_unknown");
     }
     const marked = [...doc.querySelectorAll("[data-trust]")], expected = new Set(), rects = [], budget = { n: 0 };
-    if (marked.length > 128) return fail("stock_trust_unknown");
+    if (marked.length > 4096) return fail("stock_marker_limit");
     for (const { kind, selector } of STOCK_TRUST_INVENTORY) for (const el of doc.querySelectorAll(selector)) {
       if (el.ownerDocument !== doc || el.isConnected !== true || el.getAttribute("data-trust") !== kind) return fail("stock_trust_unknown");
       expected.add(el);
     }
     if (marked.some(el => !expected.has(el)) || surface.kind === "chat" && !chat.querySelector('.dock[data-trust="composer"]') || !surface.panel.querySelector('.panel-head[data-trust="header"]')) return fail("stock_trust_unknown");
     for (const el of marked) {
-      const bounds = protectedPaint(host, el, budget); if (!bounds) return fail("stock_paint_unknown");
-      if (bounds.width && bounds.height) rects.push(bounds);
+      const bounds = protectedPaint(host, el, budget); if (!bounds) return fail(budget.exceeded ? "stock_paint_limit" : "stock_paint_unknown");
+      // Off-screen history remains inventoried and paint-checked; it need not consume a
+      // viewport hole. Include the clip algorithm's extra 8px protection margin.
+      if (bounds.width && bounds.height && (!finite(host.innerHeight) || bounds.x + bounds.width + 8 >= 0 && bounds.y + bounds.height + 8 >= 0 && bounds.x - 8 <= host.innerWidth && bounds.y - 8 <= host.innerHeight)) rects.push(bounds);
+    }
+    // Keep the existing 128-hole transport bound. Conservative union may hide extra
+    // effect pixels; it can never reveal protected pixels, even for a dense viewport.
+    if (rects.length > 128) {
+      const rest = rects.splice(127), x = Math.min(...rest.map(r => r.x)), y = Math.min(...rest.map(r => r.y));
+      rects.push({ x, y, width: Math.max(...rest.map(r => r.x + r.width)) - x, height: Math.max(...rest.map(r => r.y + r.height)) - y });
     }
     if (doc.querySelector(".agend-session-ended")) return fail("session_ended");
     let barrier = [...doc.querySelectorAll(BARRIERS)].some(el => visible(host, el));

package/dist/ui/shared/effect-trial-source.js

@@ -64,7 +64,7 @@ export function createEffectTrialSource({ window: host, current, ownerCurrent, s
     const lease = { identity, reply, stage, owner, current: x.current, onStop: x.onStop, startedAt: x.startedAt, until, dead: false, checking: false, pending: new Set(), timer: null, off: null, binding: null };
     lease.binding = Object.freeze({ kind: "trial", key: identity.key, id: identity.id, source: lease, generation: identity.generation });
     active = lease; used.add(stage.receipt);
-    lease.off = watchEffectTrialStage(stage.receipt, () => stop(lease, "stage_ended"));
+    lease.off = watchEffectTrialStage(stage.receipt, reason => stop(lease, typeof reason === "string" ? reason : "stage_ended"));
     if (typeof lease.off !== "function" || constrainEffectTrialStage(stage.receipt, () => checked(lease)) !== true || !checked(lease)) { stop(lease, "stage_unavailable"); return null; }
     try { arm(lease); } catch { stop(lease, "trial_unavailable"); return null; }
     if (!checked(lease)) return null;

package/dist/ui/shared/effect-trial-stage.js

@@ -1,7 +1,7 @@
 /** #1629: host-issued LOCAL trial paint receipt. No authority, loader, frame factory or pool is created here. */
 import { effectTrialShadow } from "./effect-trial-shadow.js";
 import { effectHostStyle } from "./effect-host-style.js";
-import { effectStockSnapshot } from "./effect-stock-snapshot.js";
+import { effectStockSnapshot, effectStockRefusal } from "./effect-stock-snapshot.js";
 import { STOCK_EFFECT_BARRIERS } from "./effect-stock-trust.js";
 const receipts = new WeakMap(), owners = new WeakMap();
 let serial = 0;
@@ -64,7 +64,8 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
   if (!own || typeof current !== "function" || typeof onStop !== "function" || !host?.document || !panel || !stage || owners.has(stage)) return null;
   const shell = effectTrialShadow(host, panel), hostSheet = effectHostStyle(host);
   let sheet; try { sheet = shell?.sheet; if (!shell || shell.stage !== stage || !hostSheet || !sheet || host.CSS?.supports("contain", "paint") !== true || host.CSS.supports("overflow", "clip") !== true) return null; } catch { return null; }
-  const receipt = Object.freeze(Object.create(null)), frames = new Set(), listeners = new Set(); let dead = false, constraint = null;
+  const receipt = Object.freeze(Object.create(null)), frames = new Set(), listeners = new Set(); let dead = false, constraint = null, failure = "stage_unavailable";
+  const reject = reason => { failure = reason; return null; };
   const identity = Object.freeze({ key: own.key, id: own.id, instance: own.instance, generation: own.generation, serial: ++serial });
   const invalidate = reason => {
     if (dead) return; dead = true; receipts.delete(receipt); if (owners.get(stage) === receipt) owners.delete(stage);
@@ -76,45 +77,49 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
   };
   const blur = event => { if (event.target === host) invalidate("blur"); };
   function check(stock) {
+    failure = "trial_layout_unverified";
     try {
       // This callback may reenter disposal or replace the owner. Recheck identity after it returns.
-      if (dead || current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead) return null;
+      if (dead || current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead) return reject("trial_current_changed");
       const proof = effectStockSnapshot(stock), doc = host.document;
-      if (effectHostStyle(host) !== hostSheet || effectTrialShadow(host, panel) !== shell) return null;
+      if (!proof) return reject(effectStockRefusal(stock));
+      if (effectHostStyle(host) !== hostSheet || effectTrialShadow(host, panel) !== shell) return reject("trial_style_unavailable");
       // The own panel MUST still suppress ordinary foreground effects. Never synthesize front:true.
-      if (!proof || proof.front !== false || doc.visibilityState !== "visible" || doc.hasFocus?.() !== true || doc.fullscreenElement || doc.pictureInPictureElement) return null;
+      if (doc.hasFocus?.() !== true) return reject("trial_window_unfocused");
+      if (doc.visibilityState !== "visible") return reject("hidden");
+      if (proof.front !== false || doc.fullscreenElement || doc.pictureInPictureElement) return reject("trial_overlay_unverified");
       const split = doc.querySelector(".main > .p-chat > .chat-split");
       if (!split || doc.querySelectorAll(".main > .p-chat").length !== 1 || doc.querySelectorAll(".chat-split > .pv-panel").length !== 1
-        || panel.parentElement !== split || panel.ownerDocument !== doc || panel.isConnected !== true || panel.className !== "pv-panel effect-trial-panel" || panel.getAttribute("data-trust") !== "preview") return null;
+        || panel.parentElement !== split || panel.ownerDocument !== doc || panel.isConnected !== true || panel.className !== "pv-panel effect-trial-panel" || panel.getAttribute("data-trust") !== "preview") return reject("trial_panel_unavailable");
       const children = [...shell.root.children], names = ["effect-trial-style", "effect-trial-head", "effect-trial-controls", "effect-trial-body", "effect-trial-note"];
       if (panel.children.length !== 0 || children.length !== names.length || children.some((el, i) => el.className !== names[i]) || children[3].children.length !== 1 || children[3].firstElementChild !== stage
-        || stage.className !== "effect-trial-stage" || stage.ownerDocument !== doc || stage.isConnected !== true || stage.hasAttribute("tabindex") || stage.hasAttribute("contenteditable")) return null;
+        || stage.className !== "effect-trial-stage" || stage.ownerDocument !== doc || stage.isConnected !== true || stage.hasAttribute("tabindex") || stage.hasAttribute("contenteditable")) return reject("trial_shadow_unverified");
       for (const control of [shell.head, shell.controls, shell.close, shell.stop, shell.note]) {
         const style = host.getComputedStyle(control);
-        if (style.display === "none" || style.visibility !== "visible" || style.opacity !== "1" || !rect(control)) return null;
+        if (style.display === "none" || style.visibility !== "visible" || style.opacity !== "1" || !rect(control)) return reject("trial_controls_unavailable");
       }
       if ([...doc.querySelectorAll(STOCK_EFFECT_BARRIERS)].some(el => el !== panel && visible(host, el))
-        || [...doc.querySelectorAll(".pv-panel")].some(el => el !== panel && visible(host, el))) return null;
+        || [...doc.querySelectorAll(".pv-panel")].some(el => el !== panel && visible(host, el))) return reject("trial_other_overlay");
       const active = doc.activeElement;
-      if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) return null;
+      if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) return reject("trial_editable_focus");
       let el = stage, depth = 0;
-      while (el) { const s = host.getComputedStyle(el); if (++depth > 128 || el.ownerDocument !== doc || !neutral(s) || s.opacity !== "1" || s.visibility !== "visible" || s.display === "none" || s.contain !== (el === stage ? "paint" : "none")) return null; if (el === doc.documentElement) break; el = el.parentElement ?? (el.getRootNode?.() === shell.root ? panel : null); }
-      if (el !== doc.documentElement) return null;
+      while (el) { const s = host.getComputedStyle(el); if (++depth > 128 || el.ownerDocument !== doc || !neutral(s) || s.opacity !== "1" || s.visibility !== "visible" || s.display === "none" || s.contain !== (el === stage ? "paint" : "none")) return reject("trial_ancestor_paint"); if (el === doc.documentElement) break; el = el.parentElement ?? (el.getRootNode?.() === shell.root ? panel : null); }
+      if (el !== doc.documentElement) return reject("trial_ancestor_paint");
       const s = host.getComputedStyle(stage), r = rect(stage), p = rect(panel);
       if (!r || !p || s.position !== "relative" || s.zIndex !== "0" || s.overflowX !== "clip" || s.overflowY !== "clip"
         || s.paddingLeft !== "0px" || s.paddingRight !== "0px" || s.paddingTop !== "0px" || s.paddingBottom !== "0px"
         || ["borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth"].some(k => s[k] !== "0px") || !none(s.boxShadow) || s.outlineStyle !== "none"
         || r.x < p.x || r.y < p.y || r.x + r.width > p.x + p.width || r.y + r.height > p.y + p.height
-        || r.x < 0 || r.y < 0 || r.x + r.width > host.innerWidth || r.y + r.height > host.innerHeight) return null;
-      if ([...stage.children].some(child => ![...frames].some(f => f.element === child))) return null;
+        || r.x < 0 || r.y < 0 || r.x + r.width > host.innerWidth || r.y + r.height > host.innerHeight) return reject("trial_clip_unverified");
+      if ([...stage.children].some(child => ![...frames].some(f => f.element === child))) return reject("trial_frame_unknown");
       const width = Math.floor(r.width), height = Math.floor(r.height);
-      if (width < 1 || height < 1 || width > 4096 || height > 4096 || width * height > 8388608 || dead || owners.get(stage) !== receipt) return null;
-      if (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead || stage.isConnected !== true || panel.parentElement !== split) return null;
+      if (width < 1 || height < 1 || width > 4096 || height > 4096 || width * height > 8388608 || dead || owners.get(stage) !== receipt) return reject("trial_size_limit");
+      if (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead || stage.isConnected !== true || panel.parentElement !== split) return reject("trial_current_changed");
       return { x: r.x, y: r.y, width, height };
-    } catch { return null; }
+    } catch { return reject("trial_check_failed"); }
   }
   function project(stock) {
-    const r = check(stock); if (!r) { invalidate("stage_unavailable"); return null; }
+    const r = check(stock); if (!r) { invalidate(failure); return null; }
     return Object.freeze({ root: stage, rect: Object.freeze(r), identity, bind });
   }
   function bind(frame, { layer } = {}, stock) {
@@ -131,7 +136,7 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
     };
     const handle = { ok: true, element: frame, remove, hide,
       sync(proof) {
-        const r = check(proof); if (!r || removed) { invalidate("stage_unavailable"); return false; }
+        const r = check(proof); if (!r || removed) { invalidate(failure); return false; }
         try {
           const matches = visibility => {
             const s = host.getComputedStyle(frame), actual = rect(frame);
@@ -146,7 +151,7 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
           for (const [k, v] of Object.entries({ left: "0px", top: "0px", width: `${r.width}px`, height: `${r.height}px` })) rule.style.setProperty(k, v, "important");
           if (!matches("hidden")) throw Error("local geometry lost");
           rule.style.setProperty("visibility", "visible", "important"); shown = true; return true;
-        } catch { invalidate("stage_unavailable"); return false; }
+        } catch { invalidate("trial_frame_geometry"); return false; }
       },
     };
     frames.add(handle);
@@ -154,7 +159,8 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
       const i = sheet.insertRule(`.${token}{}`, sheet.cssRules.length); rule = sheet.cssRules[i];
       for (const [k, v] of Object.entries({ position: "absolute", visibility: "hidden", "pointer-events": "none", "z-index": "0", opacity: layer === "front" ? "0.85" : "1", border: "0px", margin: "0px", padding: "0px", "box-sizing": "border-box", "min-width": "0px", "min-height": "0px", "max-width": "none", "max-height": "none", outline: "none", "box-shadow": "none", "background-color": "transparent", animation: "none", transition: "none" })) rule.style.setProperty(k, v, "important");
       frame.classList.add(token);
-      if (host.getComputedStyle(frame).visibility !== "hidden" || !check(stock)) throw Error("initial local hiding lost");
+      if (host.getComputedStyle(frame).visibility !== "hidden") throw Error("initial local hiding lost");
+      if (!check(stock)) { remove(); invalidate(failure); return { ok: false }; }
     } catch { remove(); invalidate("stage_unavailable"); return { ok: false }; }
     return handle;
   }

package/dist/ui/shared/effect-trial.css

@@ -16,7 +16,7 @@
   overflow: clip !important;
   background: #ffffff !important;
   color: #1b1b1f !important;
-  font: 400 16px/1.4 system-ui, sans-serif !important;
+  font: 400 16px/1.4 system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji !important;
   direction: ltr !important;
   unicode-bidi: isolate !important;
   text-align: start !important;