@songsid/agend 2.3.0-beta.8 → 2.3.0-beta.9

package/dist/ui/panel-chat.js

@@ -7,7 +7,7 @@
 // The instance's own actions (details, start, stop, restart, delete) are in the header's ⋯ menu, and only the ones
 // that apply to its state are offered (#1408 rough edges 4 and 7).
 import { html, useCallback, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
-import { t } from "/assets/app-i18n.js";
+import { lang, t } from "/assets/app-i18n.js";
 import { appStore, guestPage, useStore } from "/assets/app-store.js";
 import { AuthorizeChip } from "/assets/web-authorize.js";
 import { useLease } from "/assets/app-ctx.js";
@@ -317,66 +317,115 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   </div>`;
 }
 
-/** The thread: Preact owns the elements, the keyed renderer owns what is inside the list (chat-thread.js). */
+/**
+ * #2053: the last THREAD_KEEP chats' threads are kept when their view leaves (the chat view is keyed by instance, so
+ * each switch built the thread again: a revisit was no faster than a first visit). A kept thread is its list element
+ * and its renderer, and nothing more: it leaves as a chat always did (previews stop), with no subscription or timer
+ * left; shown again, one render draws only what changed meanwhile, where the reader was. A new language, another
+ * document, or more than THREAD_KEEP lets one go.
+ */
+export const THREAD_KEEP = 4;
+const keptThreads = new Map();                 // name → { thread, list, sink, lang }
+/** Tests only: let every kept thread go. */
+export function forgetKeptThreads() { for (const e of keptThreads.values()) letGo(e, true); keptThreads.clear(); }
+function letGo(e, own) { e.thread.dispose(own); e.list.remove(); }
+
+/** A chat's thread: its own list element and renderer, and a sink for the view that shows it. */
+function threadEntry(name, doc) {
+  const list = doc.createElement("div");
+  list.className = "thread";
+  list.setAttribute("role", "log");
+  list.setAttribute("aria-live", "off");
+  list.setAttribute("aria-label", t("chat.conversationWith", name));
+  const e = { list, sink: null, lang: lang(), thread: null };
+  const thread = createThread(list, doc.createElement("div"), {
+    t, tf: t, isUser: (x) => store.isUser(x, name), onJump: (j) => e.sink?.setJump(j), onEmpty: (v) => e.sink?.setEmpty(v),
+    setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
+    effectTrialStatus: x => getAppEffects()?.trialStatus(x) ?? "localAdmin",
+    effectTrialFailure: x => getAppEffects()?.trialFailure(x),
+    fixEffectTrial: (x, reason) => {
+      if (reason === "reducedMotion") setFollowsReducedMotion(false);
+      else if (reason === "busy") getAppEffects()?.stopTrial();
+      else if (reason === "transport") location.reload();
+      else if (reason === "localAdmin") location.href = "/signin?next=" + encodeURIComponent(location.pathname + location.search);
+      else navigate("/settings/appearance");
+    },
+    canTryEffect: x => getAppEffects()?.canTry(x) === true,
+    startEffectTrial: x => { const seq = navStore.get().seq; void getAppEffects()?.startTrial(x).then(ok => { if (!ok && e.sink && navStore.get().seq === seq && document.hasFocus?.() === true && document.visibilityState === "visible") toast(t("chat.effectTrialUnavailable")); }); },
+    clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
+    replyButtonBusy: (id) => store.state.rbBusy.has(id),
+    pollMine: (id) => store.state.pollMine[id],                            // #1823: this device's own vote
+    serverNow: () => Date.now() + store.state.clockSkew,                   // #1823: the deadline is the server's
+    panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o), version: panelVersion, claim: claimPanel, claims: panelClaims },   // #1481, #1704
+    openImage: openLightbox,                                               // an image, full size, in the page
+    emojis: (id) => !!emojiIndex && emojiIndex.known(id),                  // #1630: the fleet's server emoji
+    mentions: (kind, id) => (mentionIndex ? mentionIndex.name(kind, id) : null),   // #1682: mention names
+  });
+  e.thread = thread;
+  return e;
+}
+/** While a thread is shown: what it follows. Returns what lets it all go. */
+function follow(name, thread) {
+  // #1630: the server-emoji list is read once a message shows a tag; when it arrives, those messages are drawn again.
+  // #1682: the same for mention names — asked for the ids the messages carry; when names arrive, drawn again.
+  const wantEmojis = (msgs) => { if (emojiIndex && emojiIndex.wants(msgs)) emojiIndex.ensure(); if (mentionIndex) mentionIndex.ensure(msgs); };
+  const offs = [];
+  if (emojiIndex) offs.push(emojiIndex.subscribe(() => thread.render(store.state.msgs[name] || [])));
+  if (mentionIndex) offs.push(mentionIndex.subscribe(() => thread.render(store.state.msgs[name] || [])));
+  wantEmojis(store.state.msgs[name]);
+  offs.push(store.subscribe((instance, kind) => {
+    if (instance !== name) return;
+    if (kind === "msgs") { thread.render(store.state.msgs[name] || []); wantEmojis(store.state.msgs[name]); }
+    else if (kind === "sent") thread.jumpLatest();
+  }));
+  offs.push(P() ? P().onChange(() => thread.refreshCards()) : () => {});
+  offs.push(getAppEffects()?.subscribeTrial(() => thread.render(store.state.msgs[name] || [])) ?? (() => {}));
+  offs.push(panelStore.subscribe(() => thread.refreshCards()));   // a card shows whether the panel has its block
+  return () => { for (const off of offs) off(); };
+}
+
+/** The thread's view: Preact owns the scroller and the jump pill; the kept list (chat-thread.js) is put inside it. */
 function Thread({ name, th }) {
-  const scroller = useRef(null), list = useRef(null);
+  const scroller = useRef(null), host = useRef(null);
   const [jump, setJump] = useState({ show: false, unseen: 0 });
   const [empty, setEmpty] = useState(false);
   useLayoutEffect(() => {
-    let live = true;
-    const thread = createThread(list.current, scroller.current, {
-      t, tf: t, isUser: (x) => store.isUser(x, name), onJump: setJump, onEmpty: setEmpty,
-      setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
-      effectTrialStatus: x => getAppEffects()?.trialStatus(x) ?? "localAdmin",
-      fixEffectTrial: (x, reason) => {
-        if (reason === "reducedMotion") setFollowsReducedMotion(false);
-        else if (reason === "busy") getAppEffects()?.stopTrial();
-        else if (reason === "transport") location.reload();
-        else if (reason === "localAdmin") location.href = "/signin?next=" + encodeURIComponent(location.pathname + location.search);
-        else navigate("/settings/appearance");
-      },
-      canTryEffect: x => getAppEffects()?.canTry(x) === true,
-      startEffectTrial: x => { const seq = navStore.get().seq; void getAppEffects()?.startTrial(x).then(ok => { if (!ok && live && navStore.get().seq === seq && document.hasFocus?.() === true && document.visibilityState === "visible") toast(t("chat.effectTrialUnavailable")); }); },
-      clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
-      replyButtonBusy: (id) => store.state.rbBusy.has(id),
-      pollMine: (id) => store.state.pollMine[id],                            // #1823: this device's own vote
-      serverNow: () => Date.now() + store.state.clockSkew,                   // #1823: the deadline is the server's
-      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o), version: panelVersion, claim: claimPanel, claims: panelClaims },   // #1481, #1704
-      openImage: openLightbox,                                               // an image, full size, in the page
-      emojis: (id) => !!emojiIndex && emojiIndex.known(id),                  // #1630: the fleet's server emoji
-      mentions: (kind, id) => (mentionIndex ? mentionIndex.name(kind, id) : null),   // #1682: mention names
-    });
+    const doc = host.current.ownerDocument;
+    let e = keptThreads.get(name);
+    // Kept only while it can be shown as it is: the same language, and this page's own document.
+    if (e && (e.lang !== lang() || e.list.ownerDocument !== doc)) { letGo(e, true); keptThreads.delete(name); e = undefined; }
+    const kept = !!e;
+    if (e) keptThreads.delete(name);
+    else e = threadEntry(name, doc);
+    keptThreads.set(name, e);                                              // the most recent last
+    for (const [k, old] of keptThreads) {
+      if (keptThreads.size <= THREAD_KEEP) break;
+      if (k !== name) { letGo(old, true); keptThreads.delete(k); }
+    }
+    const thread = e.thread, sc = scroller.current, ls = e.list;
+    e.sink = { setJump, setEmpty };
+    host.current.append(ls);
+    thread.attach(sc);
     th.current = thread;
-    // #1630: the server-emoji list is read once a message shows a tag; when it arrives, those messages are drawn again.
-    // #1682: the same for mention names — asked for the ids the messages carry; when names arrive, drawn again.
-    const wantEmojis = (msgs) => { if (emojiIndex && emojiIndex.wants(msgs)) emojiIndex.ensure(); if (mentionIndex) mentionIndex.ensure(msgs); };
-    const offEmojis = emojiIndex ? emojiIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
-    const offMentions = mentionIndex ? mentionIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
+    // Up to date, at the reader's place (the bottom unless they had scrolled up); a kept one's cards say what they can do.
     thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
-    wantEmojis(store.state.msgs[name]);
-    const off = store.subscribe((instance, kind) => {
-      if (instance !== name) return;
-      if (kind === "msgs") { thread.render(store.state.msgs[name] || []); wantEmojis(store.state.msgs[name]); }
-      else if (kind === "sent") thread.jumpLatest();
-    });
-    const offPv = P() ? P().onChange(() => thread.refreshCards()) : () => {};
-    const offTrials = getAppEffects()?.subscribeTrial(() => thread.render(store.state.msgs[name] || [])) ?? (() => {});
-    const offPanel = panelStore.subscribe(() => thread.refreshCards());   // a card shows whether the panel has its block
+    if (kept) thread.refreshCards();
+    const unfollow = follow(name, thread);
     const onScroll = () => { store.state.scrollMemo[name] = thread.onScroll(); };
-    const sc = scroller.current, ls = list.current;
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
     return () => {
-      live = false;
-      off(); offPv(); offPanel(); offTrials(); offEmojis(); offMentions();
+      unfollow();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
-      thread.dispose();                     // the whole thread goes: every preview in it stops first
+      e.sink = null;
       th.current = null;
+      if (keptThreads.get(name) === e) { thread.park(); ls.remove(); }   // kept for a later visit: the chat left
+      else letGo(e, false);                                                // let go meanwhile (a new language)
     };
   }, [name]);
   return html`<div class="scroller" ref=${scroller}>
-    <div class="thread" ref=${list} role="log" aria-live="off" aria-label=${t("chat.conversationWith", name)}></div>
+    <div class="thread-host" ref=${host}></div>
     ${empty ? html`<${Empty} icon="chat" title=${t("chat.noMessages")} />` : null}
     <div class="jump-dock">${jump.show ? html`<button data-trust="thread-control" type="button" class="jump-latest" onClick=${() => th.current && th.current.jumpLatest()}>
       <${Icon} name="down" size=${16} />${jump.unseen > 0 ? t("chat.newBelow", jump.unseen) : t("chat.jumpLatest")}</button>` : null}</div>

package/dist/ui/shared/agend-auth.js

@@ -67,7 +67,7 @@
     bar.setAttribute("role", "alert");
     bar.setAttribute("data-trust", "session-ended");
     bar.className = "agend-session-ended";
-    bar.style.cssText = "position:fixed;top:0;left:0;right:0;z-index:2147483647;padding:10px 16px;background:#f85149;color:#fff;font:14px system-ui,sans-serif;text-align:center";
+    bar.style.cssText = "position:fixed;top:0;left:0;right:0;z-index:2147483647;padding:10px 16px;background:#f85149;color:#fff;font:14px system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\",emoji;text-align:center";
     const zh = /^zh/i.test(navigator.language || "");
     bar.append(document.createTextNode(zh ? "登入已結束。" : "Your session has ended. "));
     const link = document.createElement("a");

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

@@ -30,8 +30,9 @@
 // - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
 // #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
-// #1918: traffic — a message between instances moved (SSE only: the org canvas reads /ui/traffic when it has no stream).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic"];
+// #1918: traffic — a message between instances moved; delegation — a task opened, or its report closed it (SSE only: the
+// org canvas reads /ui/traffic when it has no stream).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed

package/dist/ui/shared/app.css

@@ -453,6 +453,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg.status-line .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
 .msg.status-line .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
+/* #2147: bounded stock toolbar paint, including fixed descendants. Padding preserves focus outlines. */
+.shell .thread .msg-tools { contain: paint; overflow: clip; overflow-clip-margin: 0px; padding: 4px; margin: 0 -4px -4px; }
+.shell .thread .codeblock > .cb-head { contain: paint; overflow: clip; overflow-clip-margin: 0px; }
 .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
 @media (hover: none) { .msg-tools { opacity: 1; } }
 /* Delivery ticks: always visible, in colour, with their label on hover and for screen readers (rough edge 10). */
@@ -559,7 +562,7 @@ html.lb-open .scroller { overflow: hidden; }
    these tokens. The surface paints its own background (the page's body is not its). */
 .p-chat.th { background: var(--bg); color: var(--text); }
 .p-chat.th .msg.user .body { border-radius: var(--bubble-radius, var(--r-xl)); }
-.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea { font-family: system-ui, -apple-system, "Segoe UI", sans-serif, var(--font-emoji); }
 .p-chat.th-font-mono .thread, .p-chat.th-font-mono .composer textarea { font-family: var(--font-mono); }
 .p-chat.th-bubble-thin .msg.user .body { box-shadow: inset 0 0 0 1px var(--border); }
 .p-chat.th-bubble-accent .msg.user .body { box-shadow: inset 0 0 0 1px var(--accent); }
@@ -1217,7 +1220,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-team-name { fill: var(--text); font-size: 13px; font-weight: 600; }
 .oc-team-meta { fill: var(--text-3); font-size: 11px; }
 .oc-team-sum { fill: var(--text-2); font-size: 11.5px; }
-.oc-team.dim { opacity: 0.55; }
+.oc-team.dim, .oc-team-head.dim { opacity: 0.55; }
 .oc-node.dim { opacity: 0.4; }
 .oc-node { cursor: pointer; }
 .oc-node[role="img"] { cursor: default; }
@@ -1263,7 +1266,11 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-flow.h-broadcast { stroke: var(--fx-broadcast); } .oc-flow.h-team { stroke: var(--fx-team); stroke-width: 3.5; }
 .oc-flow.ph-live { stroke-dasharray: 7 6; animation: oc-dash 0.9s linear infinite; }
 .oc-flow.ph-queued { stroke-dasharray: 2 5; opacity: 0.8; }
-.oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 3s ease-out forwards; }
+.oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 12s ease-out forwards; }
+/* #1918 review: the work — a delegation in progress (a slow dash, kept until its report), its report coming back, none. */
+.oc-flow.ph-work { stroke-dasharray: 10 7; stroke-width: 3; animation: oc-dash 2.4s linear infinite; }
+.oc-flow.ph-return { stroke-width: 3; animation: oc-fade 2.4s ease-out forwards; }
+.oc-flow.ph-stale { stroke: var(--text-3); stroke-dasharray: 3 6; animation: oc-fade 12s ease-out forwards; }
 .oc-ah.h-task { fill: var(--fx-task); } .oc-ah.h-send { fill: var(--fx-send); } .oc-ah.h-report { fill: var(--fx-report); }
 .oc-ah.h-broadcast { fill: var(--fx-broadcast); } .oc-ah.h-team { fill: var(--fx-team); } .oc-ah.h-fading { fill: var(--text-3); }
 .oc-pulse.h-task { fill: var(--fx-task); } .oc-pulse.h-send { fill: var(--fx-send); } .oc-pulse.h-report { fill: var(--fx-report); }
@@ -1272,16 +1279,19 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-badge rect { fill: var(--surface-2); stroke: var(--border); } .oc-badge text { fill: var(--text-2); font-size: 10.5px; }
 @keyframes oc-dash { to { stroke-dashoffset: -26; } }
 @keyframes oc-fade { from { opacity: 0.8; } to { opacity: 0.15; } }
-.oc-legend { position: absolute; left: var(--s-3); bottom: var(--s-3); max-width: calc(100% - 220px);
-  font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 10px; }
-.oc-legend summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text); }
-.oc-legend[open] summary { margin-bottom: 4px; }
+/* #2052: the key is a strip under the toolbar (its toggle is in the toolbar), never over the canvas. */
+.oc-legend { margin: 0 0 var(--s-2); font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-md); padding: 6px 10px; }
+.oc-key.on { border-color: var(--accent); }
 .oc-lg-rows { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
 .oc-lg { display: inline-flex; align-items: center; gap: 6px; }
 .oc-sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; background: var(--text-3); }
 .oc-sw.h-task { background: var(--fx-task); } .oc-sw.h-send { background: var(--fx-send); } .oc-sw.h-report { background: var(--fx-report); } .oc-sw.h-broadcast { background: var(--fx-broadcast); }
 .oc-sw.ph-queued { background: repeating-linear-gradient(90deg, var(--text-2) 0 3px, transparent 3px 7px); }
 .oc-sw.ph-fading { opacity: 0.5; }
+.oc-sw.ph-work { background: repeating-linear-gradient(90deg, var(--fx-task) 0 6px, transparent 6px 9px); height: 4px; }
+.oc-sw.ph-return { height: 4px; }
+.oc-sw.ph-stale { background: repeating-linear-gradient(90deg, var(--text-3) 0 2px, transparent 2px 6px); }
 .oc-live { gap: 6px; }
 .oc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
 .oc-live.on .oc-live-dot { background: var(--ok); }
@@ -1291,14 +1301,16 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 @media (prefers-reduced-motion: reduce) {
   .oc-flow.ph-live { animation: none; stroke-dasharray: none; }
   .oc-flow.ph-fading { animation: none; opacity: 0.4; }
+  .oc-flow.ph-work { animation: none; }
+  .oc-flow.ph-return, .oc-flow.ph-stale { animation: none; opacity: 0.5; }
   .oc-pulse { display: none; }
 }
 @media (max-width: 640px) {
   .oc-stage { height: calc(100dvh - 248px); min-height: 340px; }
   .oc-find { flex: 1 1 150px; }
-  .oc-tools { margin-left: 0; width: 100%; flex-wrap: nowrap; }
+  /* #2052: Find, Key, Live and Canvas/List are wider than a phone together: the row wraps (nothing is cut off). */
+  .oc-tools { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: var(--s-2); }
   .oc-mini { display: none; }
-  .oc-legend { max-width: calc(100% - 24px); gap: 2px var(--s-2); }
 }
 /* A phone: Fleet's five tabs fit when only the open one shows its label (the others keep theirs for screen readers). */
 @media (max-width: 479px) {
@@ -1440,6 +1452,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* #1630: a Discord server emoji in a chat message, the size of the text around it. */
 .md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }
+.md .emoji-text { color: var(--text-2); }
 /* #1682: a mention, as Discord draws one — accent text on a tint of it; the id (or the Telegram handle) on hover. */
 .md .mention { display: inline; padding: 0 0.2em; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-dim);
   font-weight: var(--fw-medium); white-space: nowrap; }

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,7 @@ 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 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 +68,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 +154,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 +177,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); }
@@ -186,6 +190,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     if (time() === null) blocked = "clock_unavailable";
     const hidden = context?.hidden === true || host.document.visibilityState !== "visible";
     const stock = eligible() ? coverage() : null;
+    if (dead || proposal !== revision) return;
     if (blocked || !eligible() || !stock) {
       if (!stopAll(blocked ?? "gates_unknown")) return;
       results.clear();
@@ -234,7 +239,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;

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

@@ -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;