@songsid/agend 2.3.0-beta.2 → 2.3.0-beta.4

package/dist/ui/chat-effects.js

@@ -10,15 +10,56 @@ import { toast } from "/assets/ui-toast.js";
 import { getAppEffects } from "./app-effects.js";
 
 register("chatFx", {
-  en: { title: "Effects", loading: "Checking effects…", empty: "No effects in this chat.", failed: "Effects stopped because their resources could not be verified. Reload the page to try again.", reload: "Reload page", pause: "Pause", resume: "Resume", remove: "Remove from chat", removeFailed: "Could not remove this effect. Reload the page to check its state.", css: "Agent foreground effects are paused while your custom CSS is on or cannot be verified.", setting: "Open Web appearance settings", running: "Running", starting: "Starting", off: "Stopped", resumeFailed: "This effect cannot resume: the page or its safety history is not ready. Reload the page or choose another effect.", queued: "Waiting for a slot", unknown: "Playback is off or unavailable here.", budget: "Paused to protect page responsiveness. Resume keeps the three-pauses safety limit.", paused: "Paused", low: "Reduced quality" },
-  "zh-TW": { title: "效果", loading: "正在確認效果…", empty: "這個聊天沒有放置效果。", failed: "無法確認效果資源，已停止播放。重新載入頁面後再試。", reload: "重新載入頁面", pause: "暫停", resume: "恢復", remove: "從聊天移除", removeFailed: "無法移除效果。請重新載入頁面確認狀態。", css: "自訂 CSS 開啟或無法確認時，代理的前景效果會暫停。", setting: "開啟網頁外觀設定", running: "播放中", starting: "啟動中", off: "已停止", resumeFailed: "頁面或安全紀錄尚未就緒，無法恢復此效果。請重新載入頁面，或選擇其他效果。", queued: "等待空位", unknown: "這裡已關閉播放，或無法播放效果。", budget: "為維持頁面順暢，已暫停效果。恢復仍保留三次暫停的安全上限。", paused: "已暫停", low: "降低畫質" },
+  en: { title: "Effects", loading: "Checking effects…", empty: "No effects in this chat.", failed: "Effects stopped because their resources could not be verified. Reload the page to try again.", reload: "Reload page", pause: "Pause", resume: "Resume", remove: "Remove from chat", removeFailed: "Could not remove this effect. Reload the page to check its state.", css: "Agent foreground effects are paused while your custom CSS is on or cannot be verified.", setting: "Open Web appearance settings", running: "Running", starting: "Starting", off: "Stopped", resumeFailed: "This effect cannot resume: the page or its safety history is not ready. Reload the page or choose another effect.", queued: "Waiting for a slot", unknown: "Playback is off or unavailable here.", budget: "Paused to protect page responsiveness. Resume keeps the three-pauses safety limit.", paused: "Paused", low: "Reduced quality",
+    typing: "Waiting while you type — it plays when you leave the message box.", covered: "Waiting while a menu or panel covers the chat.",
+    dialogOpen: "Paused while this dialog is open.", wasRunning: "Was running; paused while this dialog is open.", modal: "Waiting while a dialog is open.",
+    off3: "Turned off on this device after three automatic pauses. Resume cannot restart it here.", interrupted: "Stopped: the page closed while it was playing. Resume to play it again.",
+    cssOff: "Off while your custom CSS is on.", reducedMotion: "Off: this device asks for reduced motion.", saveData: "Off: data saver is on.",
+    previewOff: "Off: previews are not allowed on this device.", hiddenTab: "Waiting until this tab is visible.", offscreen: "Waiting until the chat is on screen.",
+    safeMode: "Off in safe mode.", publicLink: "Off on a public link.", disabled: "Effects are switched off." },
+  "zh-TW": { title: "效果", loading: "正在確認效果…", empty: "這個聊天沒有放置效果。", failed: "無法確認效果資源，已停止播放。重新載入頁面後再試。", reload: "重新載入頁面", pause: "暫停", resume: "恢復", remove: "從聊天移除", removeFailed: "無法移除效果。請重新載入頁面確認狀態。", css: "自訂 CSS 開啟或無法確認時，代理的前景效果會暫停。", setting: "開啟網頁外觀設定", running: "播放中", starting: "啟動中", off: "已停止", resumeFailed: "頁面或安全紀錄尚未就緒，無法恢復此效果。請重新載入頁面，或選擇其他效果。", queued: "等待空位", unknown: "這裡已關閉播放，或無法播放效果。", budget: "為維持頁面順暢，已暫停效果。恢復仍保留三次暫停的安全上限。", paused: "已暫停", low: "降低畫質",
+    typing: "輸入時暫停，離開訊息輸入框就會播放。", covered: "選單或面板蓋住聊天時暫停。",
+    dialogOpen: "開著這個對話框時暫停。", wasRunning: "原本在播放；開著這個對話框時暫停。", modal: "有對話框開著時暫停。",
+    off3: "已自動暫停三次，這台裝置已關閉此效果，無法在這裡恢復。", interrupted: "播放時頁面被關閉而停止。按「恢復」再播放一次。",
+    cssOff: "自訂 CSS 開啟時關閉。", reducedMotion: "已關閉：這台裝置要求減少動態效果。", saveData: "已關閉：數據節省模式開啟中。",
+    previewOff: "已關閉：這台裝置不允許預覽。", hiddenTab: "等這個分頁顯示時再播放。", offscreen: "等聊天顯示在畫面上時再播放。",
+    safeMode: "安全模式下關閉。", publicLink: "公開連結上關閉。", disabled: "效果已關閉。" },
 });
 
 /** Local read/admin sessions keep controls; public, View, poll and header-only pages have no runtime identity. */
 export function chatEffectsMenuAvailable() { return chatEffectIdentity(window) !== null; }
 
+// #2055: what a row's state means, in words — never only "Stopped" when the runtime knows why.
+const RECENT_MS = 5000;
+const EDITABLE = "input, textarea, select, [contenteditable]:not([contenteditable=false])";
+const REASON_KEY = { owner_css: "chatFx.cssOff", reduced_motion: "chatFx.reducedMotion", save_data: "chatFx.saveData", preview_unavailable: "chatFx.previewOff",
+  hidden: "chatFx.hiddenTab", offscreen: "chatFx.offscreen", safe_mode: "chatFx.safeMode", public_link: "chatFx.publicLink", disabled: "chatFx.disabled",
+  safety_off: "chatFx.off3", interrupted: "chatFx.interrupted" };
+/** `ownOpen`: this Effects dialog is open; `wasRunning`: the effect was running when it opened (shown as past, never as current). */
+export function effectRowText(row, { ownOpen = false, wasRunning = false, doc = typeof document === "undefined" ? null : document } = {}) {
+  if (!row) return t("chatFx.off");
+  // The sticky history first (it is what Resume answers), then a pause, then what is playing or queued.
+  if (row.reason === "safety_off" || row.reason === "interrupted") return t(REASON_KEY[row.reason]);
+  if (row.reason === "paused" || row.reason === "host_budget") return t("chatFx.paused");
+  if (row.phase === "running") return t("chatFx.running");
+  if (row.phase) return t("chatFx.starting");
+  if (row.verdict === "queued") return t("chatFx.queued");
+  if (row.reason === "stock_overlay" || row.reason === "modal") {
+    if (ownOpen) return t(wasRunning ? "chatFx.wasRunning" : "chatFx.dialogOpen");
+    if (row.reason === "modal") return t("chatFx.modal");
+    // Only a focused editable proves "typing"; a menu or another overlay is the same barrier, said generically.
+    const a = doc?.activeElement;
+    return t(a && a !== doc.body && typeof a.matches === "function" && (a.matches(EDITABLE) || a.isContentEditable === true) ? "chatFx.typing" : "chatFx.covered");
+  }
+  return REASON_KEY[row.reason] ? t(REASON_KEY[row.reason]) : t("chatFx.off");
+}
+
 export function ChatEffects({ name, lease, element, store, open, onClose }) {
   const cssLife = useStore(ownerCssLifecycle);
+  // Which effects were running just before this dialog opened ("was running" is said in the past, never shown as
+  // current). The ⋯ menu that opens it is a barrier too, so "just before" is within RECENT_MS of the observed stop.
+  // Tracked where updates arrive (an unchanged snapshot is not republished while an effect keeps running).
+  const before = useRef(null), wasOpen = useRef(false), playing = useRef(new Map());
   const runtime = useRef(null), [state, setState] = useState(null), [canWrite, setCanWrite] = useState(false), [busy, setBusy] = useState(false);
   useLayoutEffect(() => {
     let live = true, api = null;
@@ -38,8 +79,19 @@ export function ChatEffects({ name, lease, element, store, open, onClose }) {
       const current = () => live && lease.current();
       if (!owner) { setState({ error: null, rows: [], effects: [], unavailable: true }); return cleanup; }
       releases.push(owner.onEnd(() => { if (current()) setState({ error: "resource_unavailable", rows: [], effects: [], unavailable: true }); }));
+      playing.current = new Map();   // evidence belongs to this name and lease only
+      const track = rows => {
+        const now = performance.now(), seen = new Set();
+        for (const r of Array.isArray(rows) ? rows : []) {
+          seen.add(r.id);
+          if (r.phase === "running") playing.current.set(r.id, null);
+          else if (playing.current.get(r.id) === null) playing.current.set(r.id, now);
+        }
+        for (const [id, at] of playing.current) if (!seen.has(id) && at === null) playing.current.set(id, now);
+      };
       const changed = value => {
         if (!current()) return;
+        track(value?.rows);
         const g = owner.gates();
         setState({ ...value, unavailable: !g.enabled || !g.show || !g.previewReady || !g.optIn || g.safe || g.publicLink || g.reducedMotion || g.saveData });
       };
@@ -57,16 +109,22 @@ export function ChatEffects({ name, lease, element, store, open, onClose }) {
     }
   }, [name, lease]);
   const rows = state?.rows ?? [], effects = state?.effects ?? [];
+  if (open && !wasOpen.current) {
+    const now = performance.now();
+    before.current = new Map([...playing.current].map(([id, stoppedAt]) => [id, stoppedAt === null || now - stoppedAt < RECENT_MS]));
+  }
+  if (!open) before.current = null;
+  wasOpen.current = open;
   const css = cssLife.state !== "off" && effects.some(p => p.by !== "human" && p.manifest.layer === "front");
   const remove = async id => { if (busy) return; setBusy(true); const api = runtime.current; const ok = await api?.remove?.(id); if (!lease.current() || runtime.current !== api) return; setBusy(false); if (!ok) toast(t("chatFx.removeFailed"), false); };
   return html`${open ? html`<${Dialog} title=${t("chatFx.title")} onClose=${onClose} busy=${busy}>
       ${state?.error ? html`<p>${t("chatFx.failed")}</p><button type="button" class="btn" onClick=${() => location.reload()}>${t("chatFx.reload")}</button>` : null}
       ${css ? html`<p>${t("chatFx.css")}</p><button type="button" class="btn" onClick=${() => { onClose(); navigate("/settings/appearance"); }}>${t("chatFx.setting")}</button>` : null}
       ${!effects.length && !state?.error ? html`<p>${t(state?.unavailable ? "chatFx.unknown" : state?.loading || !state ? "chatFx.loading" : "chatFx.empty")}</p>` : null}
-      ${effects.map(p => { const row = rows.find(r => r.id === p.id), phase = row?.phase; return html`<section key=${p.id}><h3>${p.manifest.title}</h3><p>${t(row?.reason === "paused" || row?.reason === "host_budget" ? "chatFx.paused" : phase === "running" ? "chatFx.running" : phase ? "chatFx.starting" : row?.verdict === "queued" ? "chatFx.queued" : "chatFx.off")}${row?.quality === "low" ? ` · ${t("chatFx.low")}` : ""}</p>
+      ${effects.map(p => { const row = rows.find(r => r.id === p.id); return html`<section key=${p.id}><h3>${p.manifest.title}</h3><p>${effectRowText(row, { ownOpen: open, wasRunning: before.current?.get(p.id) === true })}${row?.quality === "low" ? ` · ${t("chatFx.low")}` : ""}</p>
         ${row?.reason === "host_budget" ? html`<p>${t("chatFx.budget")}</p>` : null}
         <button type="button" class="btn" disabled=${busy} onClick=${() => runtime.current?.pause?.(p.id)}>${t("chatFx.pause")}</button>
-        <button type="button" class="btn" disabled=${busy} onClick=${() => { if (!runtime.current?.resume?.(p.id)) toast(t("chatFx.resumeFailed"), false); }}>${t("chatFx.resume")}</button>
+        <button type="button" class="btn" disabled=${busy} onClick=${() => { if (!runtime.current?.resume?.(p.id)) toast(t(rows.find(r => r.id === p.id)?.reason === "safety_off" ? "chatFx.off3" : "chatFx.resumeFailed"), false); }}>${t("chatFx.resume")}</button>
         ${canWrite ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => remove(p.id)}>${t("chatFx.remove")}</button>` : null}</section>`; })}
     </${Dialog}>` : null}`;
 }

package/dist/ui/chat-strings.js

@@ -3,8 +3,24 @@ import { register } from "/assets/app-i18n.js";
 
 register("chat", {
   en: {
-    effectTrial: "Effect trial", effectTrialLocal: "Try requires a local admin, enabled previews and custom CSS off.",
-    effectTrialStart: "Try", effectTrialExpired: "This trial offer has expired.", effectTrialUnavailable: "Trial unavailable: access or playback settings may have changed.",
+    effectTrialReason_checking: "Checking this session…",
+    effectTrialReason_localAdmin: "Sign in as an admin on this computer to Try.",
+    effectTrialReason_chatChanged: "Open the chat that offered this trial.",
+    effectTrialReason_busy: "Stop the current trial before starting another.",
+    effectTrialReason_safe: "Turn off safe mode to Try.",
+    effectTrialReason_effectsOff: "Turn on effects to Try.",
+    effectTrialReason_reducedMotion: "Your device requests reduced motion.",
+    effectTrialReason_saveData: "Your device requests reduced data use.",
+    effectTrialReason_transport: "The local effect service is unavailable.",
+    effectTrialReason_unsupported: "Canvas Worker playback is unavailable in this browser.",
+    effectTrialReason_inactive: "Return to this page to Try.",
+    effectTrialReason_dialog: "Close the other menu or dialog to Try.",
+    effectTrialReason_expired: "This trial offer has expired.",
+    effectTrialSignIn: "Sign in here",
+    effectTrialStopOther: "Stop current trial",
+    effectTrialSettings: "Open playback settings",
+    effectTrial: "Effect trial", effectTrialLocal: "A sample on this page. Nothing is applied or saved.",
+    effectTrialStart: "Try", effectTrialExpired: "This trial offer has expired.", effectTrialUnavailable: "This trial is no longer available.",
     cmdConfirm: "Clear", cmdConfirmBackend: "Switch and restart", cmdRunning: "Running /{0}…", cmdNotCommand: "Not a command here — Enter sends it as a message.", cmdDismiss: "Dismiss", cmdCommands: "Commands",
     compactRunning: "Compacting…", compactDone: "✅ Conversation compacted", compactUnknown: "This backend does not report when compaction ends.",
     compactTimeout: "No sign that compaction finished within {0} minutes — check the agent's own chat.",
@@ -71,6 +87,8 @@ register("chat", {
     "pvFail_bad-address": "Cloudflare gave an address that could not be used",
     pvFail_unknown: "an unexpected error",
     pvServer_notOffered: "Previews are not available on this page.",
+    pvServer_listenFailed: "Previews are unavailable: the fleet could not open its preview port ({0}). Another program may be using it — set web.preview_port, then restart AgEnD.",
+    pvServer_notListening: "Previews are not available on this fleet right now.",
     previews: "Allow HTML previews",
     clicked: "Clicked:", clickShow: "Show the message these buttons were on",
     copy: "Copy", copyMessage: "Copy this reply", copied: "Copied", copyFailed: "Copy failed", wrap: "Wrap", showAll: "Show all {0} lines", showMore: "Show more", showLess: "Show less", jumpLatest: "Latest", newBelow: "{0} new",
@@ -101,8 +119,24 @@ register("chat", {
     configured: "(configured)", fleetDefault: "(fleet default)",
   },
   "zh-TW": {
-    effectTrial: "效果試播", effectTrialLocal: "需由本機管理員啟用預覽並關閉自訂 CSS，才能試播。",
-    effectTrialStart: "試播", effectTrialExpired: "試播邀請已過期。", effectTrialUnavailable: "無法試播：存取權或播放設定可能已變更。",
+    effectTrialReason_checking: "正在確認工作階段…",
+    effectTrialReason_localAdmin: "請在這台電腦以管理員登入後試播。",
+    effectTrialReason_chatChanged: "請開啟發出試播邀請的聊天。",
+    effectTrialReason_busy: "請先停止目前的試播。",
+    effectTrialReason_safe: "請先關閉安全模式。",
+    effectTrialReason_effectsOff: "請先開啟效果。",
+    effectTrialReason_reducedMotion: "裝置目前要求減少動態效果。",
+    effectTrialReason_saveData: "裝置目前要求節省數據。",
+    effectTrialReason_transport: "本機效果服務目前無法使用。",
+    effectTrialReason_unsupported: "此瀏覽器無法播放 Canvas Worker 效果。",
+    effectTrialReason_inactive: "請回到本頁後試播。",
+    effectTrialReason_dialog: "請先關閉其他選單或對話框。",
+    effectTrialReason_expired: "試播邀請已過期。",
+    effectTrialSignIn: "在此登入",
+    effectTrialStopOther: "停止目前試播",
+    effectTrialSettings: "開啟播放設定",
+    effectTrial: "效果試播", effectTrialLocal: "僅在本頁試播，不會套用或儲存。",
+    effectTrialStart: "試播", effectTrialExpired: "試播邀請已過期。", effectTrialUnavailable: "此試播已無法使用。",
     cmdConfirm: "清空", cmdConfirmBackend: "切換並重新啟動", cmdRunning: "執行 /{0} 中…", cmdNotCommand: "這裡沒有這個指令——按 Enter 會當成一般訊息送出。", cmdDismiss: "關閉", cmdCommands: "指令",
     compactRunning: "壓縮中…", compactDone: "✅ 對話已壓縮", compactUnknown: "這個後端不會回報壓縮何時完成。",
     compactTimeout: "{0} 分鐘內沒有看到壓縮完成的紀錄，請到代理自己的對話確認。",
@@ -168,6 +202,8 @@ register("chat", {
     "pvFail_bad-address": "Cloudflare 給出的網址無法使用",
     pvFail_unknown: "發生了未預期的錯誤",
     pvServer_notOffered: "這個頁面不提供預覽。",
+    pvServer_listenFailed: "無法預覽：fleet 無法開啟預覽用的連接埠（{0}）。可能有其他程式正在使用它——請設定 web.preview_port，然後重新啟動 AgEnD。",
+    pvServer_notListening: "這個 fleet 目前無法預覽。",
     previews: "允許預覽 HTML",
     clicked: "點選了：", clickShow: "顯示這些按鈕所在的訊息",
     copy: "複製", copyMessage: "複製這則回覆", copied: "已複製", copyFailed: "複製失敗", wrap: "換行", showAll: "展開全部 {0} 行", showMore: "顯示更多", showLess: "收合", jumpLatest: "最新", newBelow: "{0} 則新訊息",

package/dist/ui/chat-thread.js

@@ -106,10 +106,17 @@ export function createThread(list, scroller, opts) {
       : `<span class="click-text">${inner}</span>`}</div>`;
   }
   function trialNow() { try { const t = opts.serverNow ? opts.serverNow() : Date.now(); return Number.isFinite(t) ? t : Infinity; } catch { return Infinity; } }
+  const trialReasons = new Set(["checking", "localAdmin", "chatChanged", "busy", "safe", "effectsOff", "reducedMotion", "saveData", "unsupported", "transport", "inactive", "dialog", "expired"]);
+  function trialStatus(message) {
+    const reason = opts.effectTrialStatus?.(message);
+    return reason === "ready" || trialReasons.has(reason) ? reason : opts.canTryEffect?.(message) === true ? "ready" : "localAdmin";
+  }
   function trialHtml(offer, time, message) {
-    const expired = trialNow() >= offer.expiresAt, available = !PUBLIC_LINK() && !expired && opts.canTryEffect?.(message) === true;
-    const button = available ? `<button type="button" class="btn btn-sm effect-trial-start" data-act="effectTrial" data-arg="${escAttr(msgKey(message))}">${escAttr(tr("chat.effectTrialStart"))}</button>` : "";
-    return `<div class="msg status-line"><div class="meta">${time}</div><div class="body"><div class="effect-trial-offer" data-trust="thread-control"><strong>${escAttr(tr("chat.effectTrial"))}: ${escAttr(offer.title)}</strong><div>${escAttr(tr(expired ? "chat.effectTrialExpired" : "chat.effectTrialLocal"))}</div>${button}</div></div></div>`;
+    const reason = trialNow() >= offer.expiresAt ? "expired" : PUBLIC_LINK() ? "localAdmin" : trialStatus(message);
+    const available = reason === "ready", fix = !PUBLIC_LINK() && !available && reason !== "expired" && reason !== "checking" && typeof opts.fixEffectTrial === "function";
+    const label = available ? "chat.effectTrialStart" : reason === "busy" ? "chat.effectTrialStopOther" : reason === "localAdmin" ? "chat.effectTrialSignIn" : "chat.effectTrialSettings";
+    const button = available || fix ? `<button type="button" class="btn btn-sm effect-trial-start" data-act="effectTrial" data-arg="${escAttr(msgKey(message))}">${escAttr(tr(label))}</button>` : "";
+    return `<div class="msg status-line"><div class="meta">${time}</div><div class="body"><div class="effect-trial-offer" data-trust="thread-control"><strong>${escAttr(tr("chat.effectTrial"))}: ${escAttr(offer.title)}</strong><div>${escAttr(tr(available ? "chat.effectTrialLocal" : "chat.effectTrialReason_" + reason))}</div>${button}</div></div></div>`;
   }
   function armTrials() {
     if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
@@ -564,7 +571,10 @@ export function createThread(list, scroller, opts) {
 
   function onScroll() {
     const bottom = nearBottom(), top = scroller.scrollTop;
-    if (bottom) pinned = true;
+    // #2087: pinned only at the exact bottom — a reader still wheeling through the last 48 px was pinned there, so
+    // the next resize (a picture, a card, the dock) pulled the view the rest of the way down under them. Near the bottom
+    // still counts for a new message (render follows it) and for the pill; nothing else moves a view the reader moves.
+    if (atBottom()) pinned = true;
     else if (top < lastTop) pinned = false;
     lastTop = top;
     if (bottom) unseen = 0;
@@ -628,8 +638,9 @@ export function createThread(list, scroller, opts) {
       // Only the current host-produced keyed card and a real local click can request admission. No token is read from DOM.
       const key = el.dataset.arg, row = msgs.find(x => msgKey(x) === key), owner = nodes.get(key), node = owner?.node, offer = effectTrialMessage(row);
       if (PUBLIC_LINK() || e.defaultPrevented || e.isTrusted !== true || owner?.trialButton !== el || el.className !== "btn btn-sm effect-trial-start" || !node?.contains(el) || el.closest(".effect-trial-offer")?.getAttribute("data-trust") !== "thread-control"
-        || !offer || trialNow() >= offer.expiresAt || opts.canTryEffect?.(row) !== true) return;
-      opts.startEffectTrial?.(row);
+        || !offer || trialNow() >= offer.expiresAt) return;
+      if (trialStatus(row) === "ready" && opts.canTryEffect?.(row) === true) opts.startEffectTrial?.(row);
+      else opts.fixEffectTrial?.(row, trialStatus(row));
     } else if (act === "showButtons") { const x = msgs.find(y => y.buttons && y.buttons.id === el.dataset.arg); if (x) reveal(msgKey(x)); }
   }
 

package/dist/ui/effect-trial-panel.js

@@ -1,15 +1,16 @@
 /** #1629: fixed host producer. Creates no frame or request; the admitted app controller owns its lease. */
 import { html, useLayoutEffect, useRef } from "/assets/app-html.js";
 import { register, t } from "/assets/app-i18n.js";
+import { createEffectTrialShadow } from "/assets/effect-trial-shadow.js";
 import { createEffectTrialStage } from "/assets/effect-trial-stage.js";
 register("effectTrial", {
   en: { label: "Trial", stop: "Stop trial", close: "Close", note: "A bounded sample. Nothing is applied or saved." },
   "zh-TW": { label: "試播", stop: "停止試播", close: "關閉", note: "僅在此區塊試播，不會套用或儲存。" },
 });
 /** The caller owns authenticated admission, lease/deadline and shared pool. No script/HTML is rendered here. */
-export function EffectTrialPanel({ window: host = globalThis.window, binding, title, current, ownerCss, onStage, onStop, onClose }) {
-  const panel = useRef(null), stage = useRef(null), life = useRef(null), latest = useRef(null);
-  latest.current = { current, ownerCss, onStage, onStop, onClose };
+export function EffectTrialPanel({ window: host = globalThis.window, binding, title, current, onStage, onStop, onClose }) {
+  const panel = useRef(null), life = useRef(null), latest = useRef(null);
+  latest.current = { current, onStage, onStop, onClose };
   const stop = close => {
     const entry = life.current; if (!entry || (close ? entry.closed : entry.dead)) return;
     if (close) entry.closed = true;
@@ -17,21 +18,23 @@ export function EffectTrialPanel({ window: host = globalThis.window, binding, ti
     try { (close ? entry.onClose : entry.onStop)?.("stopped"); } catch { /* lease already ended */ }
   };
   useLayoutEffect(() => {
-    const entry = { dead: false, closed: false, api: null, onStop, onClose }; life.current = entry;
+    const entry = { dead: false, closed: false, api: null, shadow: null, onStop, onClose }; life.current = entry;
     const ended = reason => { if (entry.dead) return; entry.dead = true; try { entry.onStop?.(reason); } catch { /* never revive */ } };
     try {
-      entry.api = createEffectTrialStage({ window: host, panel: panel.current, stage: stage.current, binding,
-        current: own => !entry.dead && life.current === entry && latest.current.current?.(own) === true,
-        ownerCss: () => latest.current.ownerCss?.(), onStop: ended });
-      if (!entry.api) ended("stage_unavailable");
-      else { latest.current.onStage?.(entry.api); }
+      entry.shadow = createEffectTrialShadow({ window: host, panel: panel.current, title,
+        labels: { label: t("effectTrial.label"), close: t("effectTrial.close"), stop: t("effectTrial.stop"), note: t("effectTrial.note") },
+        onStop: () => stop(false), onClose: () => stop(true), onError: ended,
+        onReady(shell) {
+          if (entry.dead || life.current !== entry) return;
+          entry.api = createEffectTrialStage({ window: host, panel: panel.current, stage: shell.stage, binding,
+            current: own => !entry.dead && life.current === entry && latest.current.current?.(own) === true, onStop: ended });
+          if (!entry.api) ended("stage_unavailable");
+          else { try { latest.current.onStage?.(entry.api); } catch { entry.api.dispose(); ended("stage_unavailable"); } }
+        } });
+      if (!entry.shadow) ended("stage_unavailable");
     } catch { entry.api?.dispose(); ended("stage_unavailable"); }
-    return () => { entry.api?.dispose(); entry.dead = true; if (life.current === entry) life.current = null; };
+    return () => { entry.api?.dispose(); ended("stopped"); entry.shadow?.dispose(); entry.dead = true; if (life.current === entry) life.current = null; };
   }, [host, binding]);
-  return html`<aside ref=${panel} data-trust="preview" class="pv-panel effect-trial-panel" aria-label=${t("effectTrial.label")}>
-    <header class="effect-trial-head"><strong>${t("effectTrial.label")}</strong><span>${typeof title === "string" ? title : ""}</span><button type="button" class="btn" onClick=${() => stop(true)}>${t("effectTrial.close")}</button></header>
-    <div class="effect-trial-controls"><button type="button" class="btn" onClick=${() => stop(false)}>${t("effectTrial.stop")}</button></div>
-    <div class="effect-trial-body"><div ref=${stage} class="effect-trial-stage" aria-hidden="true"></div></div>
-    <p class="effect-trial-note">${t("effectTrial.note")}</p>
-  </aside>`;
+  useLayoutEffect(() => { life.current?.shadow?.text(title, { label: t("effectTrial.label"), close: t("effectTrial.close"), stop: t("effectTrial.stop"), note: t("effectTrial.note") }); });
+  return html`<aside ref=${panel} data-trust="preview" class="pv-panel effect-trial-panel" aria-label=${t("effectTrial.label")}></aside>`;
 }

package/dist/ui/fleet-canvas-layout.js

@@ -0,0 +1,111 @@
+// #1918: the org canvas's layout (fleet-canvas.js draws it; fleet-traffic.js routes lines through its empty lanes).
+// Fixed slots, no layout engine: the same structure always gives the same picture.
+
+/** Sizes in canvas units. NW×NH a member card, LW×LH a General card; FOLDED a folded (or empty) team's height. */
+export const OC = { NW: 184, NH: 56, GAP: 18, PAD: 24, HEAD: 34, TEAM_GAP: 56, ROW_GAP: 96, ROW_MAX: 1400, ROW_MAX_NARROW: 460, LW: 232, LH: 68, TOP_Y: 20, BUS: 44, FOLDED: 64, TRUNK: -30 };
+const colsFor = (n, narrow) => (n <= 1 ? 1 : n <= 4 || narrow ? 2 : 3);
+/** The key a team folds by (per device): its name; the instances in no team have one of their own no team name can be. */
+export const REST_KEY = "\u0000rest";
+
+/**
+ * Where everything goes, from buildOrgView's answer and the folded teams' keys: `tops` (General's cards), `boxes`
+ * (each team: its slot, its header, its member cells unless folded), the tree lines (`tree`: SVG path data) and the
+ * size of the whole. `narrow`: a phone's packing.
+ */
+export function canvasLayout(view, folded = new Set(), { narrow = false, label = (s, n) => `${n} ${s}` } = {}) {
+  const { NW, NH, GAP, PAD, HEAD } = OC;
+  const groups = [...view.teams.map((tm) => ({ key: tm.name, name: tm.name, loose: false, nodes: tm.nodes, counts: tm.counts })),
+    ...(view.rest.nodes.length ? [{ key: REST_KEY, name: null, loose: true, nodes: view.rest.nodes, counts: view.rest.counts }] : [])];
+  const rows = [];
+  let row = [], x = 0;
+  for (const g of groups) {
+    const n = g.nodes.length, cols = colsFor(n, narrow), lines = Math.ceil(n / cols);
+    const w = PAD * 2 + cols * NW + (cols - 1) * GAP;
+    const fullH = n ? HEAD + PAD + lines * NH + (lines - 1) * GAP + PAD : OC.FOLDED;
+    if (row.length && x + w > (narrow ? OC.ROW_MAX_NARROW : OC.ROW_MAX)) { rows.push(row); row = []; x = 0; }
+    row.push({ ...g, cols, w, fullH, x });
+    x += w + OC.TEAM_GAP;
+  }
+  if (row.length) rows.push(row);
+  const boxes = [];
+  let y = view.top.length ? OC.TOP_Y + OC.LH + 100 : OC.BUS + 16;
+  for (const r of rows) {
+    const slotH = Math.max(...r.map((b) => b.fullH));
+    for (const b of r) {
+      const isFolded = b.nodes.length > 0 && folded.has(b.key);
+      // Folded: its members' states in rows that fit the box (never wider; never taller than its open slot).
+      const summary = isFolded ? summaryRows(b.counts, b.w, label) : [];
+      const box = { key: b.key, name: b.name, loose: b.loose, nodes: b.nodes, counts: b.counts, cols: b.cols, x: b.x, y, w: b.w,
+        h: isFolded ? Math.min(b.fullH, Math.max(OC.FOLDED, HEAD + 10 + summary.length * SUM_LINE)) : b.fullH, slotH, folded: isFolded, summary,
+        busY: y - OC.BUS, cells: [] };
+      if (!isFolded) b.nodes.forEach((node, i) => box.cells.push({ node, key: `${b.key}/${node.name}`,
+        x: b.x + PAD + (i % b.cols) * (NW + GAP), y: y + HEAD + PAD + Math.floor(i / b.cols) * (NH + GAP), w: NW, h: NH }));
+      boxes.push(box);
+    }
+    y += slotH + OC.ROW_GAP;
+  }
+  const rowsW = boxes.length ? Math.max(...boxes.map((b) => b.x + b.w)) : 0;
+  const topW = view.top.length * OC.LW + Math.max(0, view.top.length - 1) * GAP;
+  const width = Math.max(rowsW, topW);
+  const tops = view.top.map((node, i) => ({ node, key: `\u0000top/${node.name}`, x: width / 2 - topW / 2 + i * (OC.LW + GAP), y: OC.TOP_Y, w: OC.LW, h: OC.LH }));
+  const height = boxes.length ? y - OC.ROW_GAP : tops.length ? OC.TOP_Y + OC.LH : 0;
+  return { tops, boxes, width, height, tree: treeLines(tops, boxes) };
+}
+
+/** A folded team's summary line height, and a label's width estimate (canvas units: wide for CJK, narrow otherwise). */
+export const SUM_LINE = 20;
+const textWidth = (s) => [...s].reduce((w, ch) => w + (ch.codePointAt(0) >= 0x2e80 ? 12 : 6.6), 0);
+/**
+ * A folded team's states as rows of { s, n, label, dx } that fit a box `w` wide (dx from the box's left), most pressing
+ * first; an item never splits, and one wider than a row has the row to itself.
+ */
+export function summaryRows(counts, w, label) {
+  const rows = [];
+  let row = [], x = 14;
+  for (const [s, n] of counts) {
+    const text = label(s, n), iw = 24 + textWidth(text);
+    if (row.length && x + iw > w - 14) { rows.push(row); row = []; x = 14; }
+    row.push({ s, n, label: text, dx: x });
+    x += iw;
+  }
+  if (row.length) rows.push(row);
+  return rows;
+}
+
+/** General's stem, a bus over each row of teams, the trunk joining the rows at the left, one drop per team. */
+function treeLines(tops, boxes) {
+  const d = [];
+  const teamed = boxes.filter((b) => !b.loose);
+  if (!teamed.length) return d;
+  const buses = [...new Set(teamed.map((b) => b.busY))].sort((a, b) => a - b);
+  const first = buses[0], last = buses[buses.length - 1];
+  let stemX = null;
+  if (tops.length) {
+    const cx = tops.map((tp) => tp.x + tp.w / 2), bottom = tops[0].y + tops[0].h;
+    stemX = (Math.min(...cx) + Math.max(...cx)) / 2;
+    if (tops.length > 1) {
+      const joinY = bottom + 16;
+      for (const x of cx) d.push(`M${x} ${bottom} V${joinY}`);
+      d.push(`M${Math.min(...cx)} ${joinY} H${Math.max(...cx)}`, `M${stemX} ${joinY} V${first}`);
+    } else d.push(`M${stemX} ${bottom} V${first}`);
+  }
+  if (last > first) d.push(`M${OC.TRUNK} ${first} V${last}`);
+  for (const busY of buses) {
+    const xs = teamed.filter((b) => b.busY === busY).map((b) => b.x + b.w / 2);
+    const ends = busY === first ? [...xs, ...(stemX === null ? [] : [stemX]), ...(last > first ? [OC.TRUNK] : [])] : [...xs, OC.TRUNK];
+    d.push(`M${Math.min(...ends)} ${busY} H${Math.max(...ends)}`);
+  }
+  for (const b of teamed) d.push(`M${b.x + b.w / 2} ${b.busY} V${b.y}`);
+  return d;
+}
+
+/** The region the canvas opens on: General and the first row of teams (the whole canvas when there is neither). */
+export function openingRegion(L) {
+  const firstBus = L.boxes.length ? Math.min(...L.boxes.map((b) => b.busY)) : null;
+  // The trunk at the left joins the rows: in view too, not cut by the edge.
+  const trunk = L.boxes.some((b) => b.busY !== firstBus) ? [{ x: OC.TRUNK - 8, y: firstBus, w: 1, h: 1 }] : [];
+  const parts = [...L.tops, ...L.boxes.filter((b) => b.busY === firstBus).map((b) => ({ x: b.x, y: b.y, w: b.w, h: b.slotH })), ...trunk];
+  if (!parts.length) return { x: 0, y: 0, w: Math.max(1, L.width), h: Math.max(1, L.height) };
+  const x0 = Math.min(...parts.map((p) => p.x)), y0 = Math.min(...parts.map((p) => p.y));
+  return { x: x0, y: y0, w: Math.max(...parts.map((p) => p.x + p.w)) - x0, h: Math.max(...parts.map((p) => p.y + p.h)) - y0 };
+}