@songsid/agend 2.2.0 → 2.3.0-beta.2

package/dist/ui/shared/app.css

@@ -112,7 +112,26 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
 .av.av-emoji { background: transparent; font-size: 18px; font-weight: normal; }
 .av.av-emoji img { width: 22px; height: 22px; border-radius: 0; object-fit: contain; }
-.av.ring { box-shadow: 0 0 0 2px var(--ring, transparent); }
+/* #1958: an instance's identity colour — both modes' values set on the row through the CSSOM (identity-color.js), the
+   page's mode picks one (the same selectors as tokens.css). Places: .id-ring (the avatar's ring, every face), .id-bar (a
+   bar at the row's left edge), .id-name (the name, in a shade readable on the page and the sidebar). */
+.idc { --id: var(--id-dark); --id-name: var(--id-name-dark); }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .idc { --id: var(--id-light); --id-name: var(--id-name-light); } }
+:root[data-theme="light"] .idc { --id: var(--id-light); --id-name: var(--id-name-light); }
+.idc.id-ring .av { box-shadow: 0 0 0 2px var(--id); }
+.idc.id-bar { box-shadow: inset 3px 0 0 var(--id); }
+.idc.id-name .inst-name { color: var(--id-name); }
+.idc-swatches, .idc-places { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.idc-swatches legend, .idc-places legend { font-weight: var(--fw-semibold); margin-bottom: 6px; width: 100%; }
+.idc-swatch { --sw: var(--sw-dark); width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .idc-swatch { --sw: var(--sw-light); } }
+:root[data-theme="light"] .idc-swatch { --sw: var(--sw-light); }
+.idc-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
+.idc-custom { display: inline-flex; gap: 6px; align-items: center; }
+.idc-custom input[type="color"] { width: 32px; height: 28px; padding: 0; border: 0; background: none; }
+.idc-hex { width: 9ch; font-family: var(--font-mono, monospace); }
+.dlg-actions .dlg-spacer { flex: 1 1 auto; }
+.idc-preview { padding: 6px; border-radius: 10px; background: var(--bg-sidebar); max-width: 260px; }
 .av-text { overflow: hidden; }
 .av .av-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar); }
 /* #1722: the CLI as a letter on the avatar's top-left corner — monochrome (the #1630 ring keeps the colour), cut out like the dot */
@@ -138,7 +157,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 /* #1604: one row — Settings and Session (the anonymous View reader: Sign in and the theme/language popover). Their
    pop-ups open over the whole footer's width. */
-.side-foot { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2); position: relative; }
+/* #1922: a divider above the footer, with the filter block's bottom padding and the footer's top padding trimmed to
+   --s-1: the gap reads as a section break, not an empty ~20 px band (the two --s-2 paddings used to stack). */
+.side-foot { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2) var(--s-2); border-top: 1px solid var(--border); position: relative; }
 .side-foot > .side-row, .side-foot > .session { flex: 1; min-width: 0; }
 .side-foot > .session { position: static; }
 .side-foot .side-row span:not(.dot):not(.meta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -346,6 +367,8 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .seg-item { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 34px; padding: 0 var(--s-3); border-radius: var(--r-full); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
 .seg-item:hover { background: var(--surface); color: var(--text); }
 .seg-item.active { background: var(--surface-2); color: var(--text); font-weight: var(--fw-semibold); }
+/* #1629: Settings has eight sections (Appearance added): they wrap to a second row rather than hide behind a scroll. */
+.p-settings .seg { flex-wrap: wrap; row-gap: var(--s-1); overflow-x: visible; }
 .list-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
 .rows { display: flex; flex-direction: column; gap: var(--s-1); }
 .row-item { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
@@ -501,6 +524,20 @@ html.lb-open .scroller { overflow: hidden; }
    CSSOM), a full-screen sheet on a narrow one. The frame is the card's (preview.js), sized by the panel here. */
 .chat-split { flex: 1; min-height: 0; display: flex; }
 .chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+/* #1629: an agent's theme on its own chat surface — custom properties set on .p-chat through the CSSOM, choices as
+   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-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); }
+.p-chat.th-agent-bubble .msg.agent .body { background: var(--agent-bubble); border-radius: var(--bubble-radius, var(--r-xl)); padding: 10px var(--s-4); }
+.chat-main.has-th-bg { position: relative; }
+.chat-main.has-th-bg > :not(.th-bg) { position: relative; z-index: 1; }
+.th-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--th-bg-opacity, 1); pointer-events: none; z-index: 0; user-select: none; }
+.th-bg-cover { object-fit: cover; }
+.th-bg-contain { object-fit: contain; }
 .pv-divider { flex: 0 0 8px; cursor: col-resize; background: var(--bg); border-left: 1px solid var(--border); touch-action: none; position: relative; }
 .pv-divider::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 32px; margin-top: -16px; border-radius: 2px; background: var(--border-strong); }
 .pv-divider:hover::after, .pv-divider:focus-visible::after, .chat-split.resizing .pv-divider::after { background: var(--accent); }
@@ -567,6 +604,9 @@ html.lb-open .scroller { overflow: hidden; }
 .prompt { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--warn-bg); border: 1px solid var(--warn-line); }
 .prompt.done { background: transparent; border-style: dashed; color: var(--text-2); }
 .prompt .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
+/* #1990: a name in a status line or a prompt that opens that instance in the app. */
+.st-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+.st-link:hover { text-decoration-thickness: 2px; }
 .prompt .acts { display: flex; gap: var(--s-2); margin-top: var(--s-2); align-items: center; flex-wrap: wrap; }
 .prompt .wait { font-size: var(--fs-xs); color: var(--text-3); }
 .work-bar { display: flex; gap: var(--s-2); align-items: center; padding: 0 var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
@@ -610,6 +650,58 @@ html.lb-open .scroller { overflow: hidden; }
 .drop-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); color: var(--accent); font-weight: var(--fw-semibold); }
 
 /* ── Toasts ── */
+/* #1629 r4 §3: Settings → Appearance (owner CSS). */
+.s-css-text, .s-widget-text { font-family: var(--font-mono); font-size: var(--fs-sm); width: 100%; min-height: 12rem; resize: vertical; tab-size: 2; }
+.s-widget-preview { max-width: 320px; }
+/* #1629 r4-5: Settings → Appearance → Mods — the plan is shown in full before anything is applied. */
+.s-mod-plan { display: flex; flex-direction: column; gap: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3); }
+.s-mod-plan h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
+.s-mod-plan h4 .muted { font-size: var(--fs-sm); font-weight: var(--fw-regular); }
+.s-mod-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
+.s-mod-item { display: flex; flex-direction: column; gap: var(--s-1); }
+.s-mod-detail { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-left: 1.75rem; color: var(--text-2); font-size: var(--fs-sm); min-width: 0; }
+.s-mod-widget { display: block; max-width: min(360px, 100%); }
+.s-mod-theme { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; width: 100%; }
+.s-mod-kv { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; min-width: 0; }
+.s-mod-kv .k { color: var(--text-3); font-size: var(--fs-xs); min-width: 9em; }
+.s-mod-kv .v { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
+.s-mod-sws { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
+.s-mod-sw { display: inline-flex; align-items: center; gap: var(--s-1); }
+.s-mod-sw-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--sw, transparent); }
+.s-mod-pic { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.s-mod-pic img { width: 64px; height: 40px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }
+.s-mod-raw summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); }
+.s-mod-widget .aw-chat_header { border-width: 1px; border-radius: var(--r-md); }
+.s-mod-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.s-mod-warn { color: var(--warn); font-size: var(--fs-sm); padding-left: 1.75rem; }
+.s-mod-css-text { margin: 0 0 0 1.75rem; max-height: 240px; overflow: auto; padding: var(--s-2); border-radius: var(--r-sm); background: var(--code-bg); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
+.s-mod-err { white-space: pre-line; }
+.s-mod-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.s-mod-list li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
+.s-mod-list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.s-mod-proposals { display: flex; flex-direction: column; gap: var(--s-2); }
+.s-mod-proposals h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
+.s-mod-export summary { cursor: pointer; font-weight: var(--fw-medium); }
+.s-mod-export[open] { display: flex; flex-direction: column; gap: var(--s-2); }
+.s-mod-boxes { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
+.s-css-actions, .s-widget-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
+.s-css-status { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
+.s-css-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.s-css-list li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
+.s-css-list code { overflow-wrap: anywhere; }
+.s-owner-css h4 { margin: var(--s-2) 0 0; font-size: var(--fs-sm); }
+/* #1629 r4 §3: keep-or-revert after saving custom CSS — on every page, above everything but dialogs' scrim. */
+.oc-keep { position: fixed; top: var(--s-3); left: 50%; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: var(--s-2);
+  flex-wrap: wrap; max-width: calc(100vw - 32px); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface);
+  color: var(--text-1); border: 1px solid var(--border); box-shadow: var(--shadow-2); font-size: var(--fs-sm); }
+.oc-keep-text { display: inline-flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
+.oc-keep-q { font-weight: var(--fw-medium); }
+.oc-keep-left { color: var(--text-3); font-variant-numeric: tabular-nums; }
+/* A phone: one row across the top — the question over the seconds left, then Keep and Revert. */
+@media (max-width: 479px) {
+  .oc-keep { left: var(--s-2); right: var(--s-2); transform: none; max-width: none; flex-wrap: nowrap; }
+  .oc-keep-text { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; }
+}
 .toasts { position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); pointer-events: none; }
 .toast { padding: 10px var(--s-4); max-width: min(420px, calc(100vw - 32px)); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--shadow-2); background: var(--accent-fill); color: var(--on-accent); animation: toast-in var(--t-med) var(--ease); }
 .toast.err { background: var(--danger-fill); color: var(--on-danger); }
@@ -691,6 +783,9 @@ html.lb-open .scroller { overflow: hidden; }
 .inst-star.on { color: var(--warn); }
 .inst-star.on svg, .fav-mark { fill: currentColor; }
 .fav-head { cursor: default; }
+/* #1936: the open instance, pinned on top while a filter is on — its header reads "Current", a line under it. */
+.pinned-head { cursor: default; }
+.v-pinned { border-bottom: 1px solid var(--border); padding-bottom: var(--s-2); margin-bottom: var(--s-1); }
 .fav-mark { color: var(--warn); }
 .inst-nav:not(.fav-editing) .inst-star:not(.on) { visibility: hidden; }
 /* As specific as the rule that hides it (and later), so hover and focus win. */
@@ -710,7 +805,7 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .dragging { opacity: 0.4; }
 .drop-before { box-shadow: inset 0 2px 0 var(--accent); }
 .drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
-.v-filter { flex: none; padding: var(--s-2) var(--s-3) var(--s-2); border-top: 1px solid var(--border); }
+.v-filter { flex: none; padding: var(--s-2) var(--s-3) var(--s-1); border-top: 1px solid var(--border); }
 .v-filter-box { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-1) 0 var(--s-3); border-radius: var(--r-sm); background: var(--surface); color: var(--text-3); }
 .v-filter-box:focus-within { box-shadow: 0 0 0 2px var(--focus); }
 .v-filter-box input { flex: 1; min-width: 0; height: 34px; border: 0; background: transparent; color: var(--text); font-size: var(--fs-sm); outline: none; }
@@ -773,6 +868,10 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 /* #1749: one line beside ↑↓ — the name gives way first, then the plan badge (each with an ellipsis); ↑↓ never wrap. */
 .u-head strong { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .u-plan { min-width: 0; flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #2014: a credential profile's row — the provider name beside the plan badge, and the profile on its own full-width
+   muted line under the head (one line in the rail, whole in the dialog). */
+.u-profile { margin-top: calc(-1 * var(--s-2) + 2px); color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dlg .u-profile { white-space: normal; overflow-wrap: anywhere; }
 .u-order { margin-left: auto; display: flex; gap: 2px; flex: none; }
 .u-order .icon-btn { width: 28px; height: 28px; }
 .u-order .icon-btn:disabled { opacity: 0.3; }
@@ -1099,3 +1198,126 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 /* #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; }
+
+/* #1629 r4 §1 / r4.1 Q3 (a): the identity card (identity-card.js). The size is a class token; its heights are here
+   (S 160 / M 240 / L 360 px, on a phone 120 / 180 / 240); the banner scales with the portrait. Never a style attribute. */
+.id-card { --id-h: 240px; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+.id-card.card-s { --id-h: 160px; }
+.id-card.card-l { --id-h: 360px; }
+.id-card.card-c { --id-h: 96px; margin: 0; border: 0; border-radius: 0; background: none; }
+.id-banner { display: block; width: 100%; height: calc(var(--id-h) / 2); object-fit: cover; }
+.id-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
+.id-portrait { display: block; flex-shrink: 0; height: var(--id-h); width: auto; max-width: min(calc(var(--id-h) * 0.75), 100%); object-fit: cover; border-radius: var(--r-sm); }
+.id-text { flex: 1; min-width: 0; }
+.id-tagline { margin: 0 0 var(--s-1); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
+.id-bio { margin: 0; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
+.card-size { display: flex; flex-shrink: 0; gap: var(--s-1); }
+.card-size .seg-item { min-height: 28px; padding: 0 var(--s-2); border: 1px solid transparent; background: none; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
+.card-size .seg-item.active { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
+.chat-card { flex-shrink: 0; border-bottom: 1px solid var(--border); }
+/* #1629 r4-4: widgets — the page's own components, from a declarative spec (agent-widget.js). The host draws the 1px
+   frame and the ✦ chip, outside anything the spec chooses; nothing in a widget takes a click or focus. Colours are the
+   theme's tokens (an agent's chat header sits inside its themed chat), so a person's own CSS can restyle them too. */
+.aw { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; overflow: clip; user-select: text; }
+.aw-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.aw-chip { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.aw-by { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.aw-items { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
+.aw-item { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-sm); }
+.aw-label { color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
+.aw-value { color: var(--text); font-weight: var(--fw-medium); overflow-wrap: anywhere; min-width: 0; }
+.aw-stat .aw-value { margin-left: auto; font-variant-numeric: tabular-nums; }
+.aw-unit { margin-left: 2px; color: var(--text-2); font-weight: var(--fw-regular); }
+.aw-text .aw-value { font-weight: var(--fw-regular); }
+.aw-bar { flex: 1; min-width: 48px; height: 6px; appearance: none; border: 0; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
+.aw-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-full); }
+.aw-bar::-webkit-progress-value { background: var(--accent); border-radius: var(--r-full); }
+.aw-bar::-moz-progress-bar { background: var(--accent); border-radius: var(--r-full); }
+.aw-progress .aw-value { margin-left: auto; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
+.aw-list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
+.aw-list ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
+.aw-badge { display: inline-block; padding: 1px var(--s-2); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
+.aw-tone-ok { background: var(--ok-bg); color: var(--ok); }
+.aw-tone-warn { background: var(--warn-bg); color: var(--warn); }
+.aw-tone-bad { background: var(--danger-bg); color: var(--danger); }
+.aw-tone-info { background: var(--accent-dim); color: var(--accent); }
+.aw-spark { flex: 1; min-width: 48px; height: 24px; }
+.aw-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+.aw-spark-item .aw-value { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
+/* The chat header strip: one compact row under the card, in that agent's chat only. When it is wider than the chat (a
+   phone), the row scrolls sideways inside its own box — never wraps out of it, never cuts an item. */
+.aw-chat_header { flex-shrink: 0; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--s-4); border-width: 0 0 1px; border-radius: 0; padding: var(--s-1) var(--s-4); min-height: 32px; max-height: 72px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
+.aw-chat_header .aw-head { flex-shrink: 0; }
+.aw-chat_header .aw-items { flex-direction: row; flex: 1 0 auto; gap: var(--s-4); }
+.aw-chat_header .aw-item { flex: 0 0 auto; white-space: nowrap; }
+.aw-chat_header .aw-value { white-space: nowrap; }
+.aw-chat_header .aw-text .aw-value { display: inline-block; max-width: 24em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
+.aw-chat_header .aw-stat .aw-value { margin-left: 0; }
+.aw-chat_header .aw-bar { flex: 0 0 auto; width: 96px; }
+/* On a phone the strip may run past the edge: a fade says there is more to scroll to (the last item scrolls clear of it). */
+@media (max-width: 899px) { .aw-chat_header { padding-right: var(--s-7); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent); } }
+.aw-details { background: var(--surface); margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); }
+.side-widget { padding: 0 var(--s-3) var(--s-2); }
+.aw-sidebar { max-height: 240px; overflow: auto; }
+
+.chat-card-toggle { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 32px; padding: 0 var(--s-4); border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: pointer; }
+.chat-card-peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
+@media (max-width: 479px) {
+  .id-card.card-s { --id-h: 120px; }
+  .id-card.card-m { --id-h: 180px; }
+  .id-card.card-l { --id-h: 240px; }
+  .id-row { flex-wrap: wrap; }
+  .id-text { flex-basis: 100%; }
+}
+/* #1629 r4 §1: the card in View (above the profile row) and its part of Edit profile. */
+.v-id { flex-shrink: 0; padding: var(--s-2) var(--s-4) 0; background: var(--bg); }
+.v-id .id-card { margin: 0; }
+.form-sub { margin: var(--s-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
+/* #1629 r4.1 Q3 (b): Settings → Appearance, the card's upload limits (three to a row; one on a phone). */
+.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
+.s-limit-warnings { margin: var(--s-2) 0; padding-left: var(--s-4); }
+@media (max-width: 479px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
+
+/* #1629 B2: effect library controls. No runtime layer is created by this card. */
+.s-fx-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
+.s-fx-item { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
+.s-fx-item h4 { margin: 0; }
+.s-fx-poster { display: block; max-width: min(240px, 100%); max-height: 160px; object-fit: contain; border-radius: var(--r-sm); }
+
+.s-fx-chat, .s-fx-params label:not(.check) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
+.s-fx-chat { margin: var(--s-2) 0; }
+.s-fx-params { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0; max-width: 100%; }
+.s-fx-target, .s-fx-params input:not([type=checkbox]), .s-fx-params select { min-height: 36px; min-width: 0; max-width: 100%; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
+
+/* #1629: stock paint bands. Structural ancestors remain neutral; only bounded content owns level 1.
+   The viewport effect root is a direct body sibling: behind 0 / stock content 1 (header 2) / front 20.
+   Nested menus cannot cross a content stacking context: the unmounted trust guard suspends fronts for overlays. */
+.app-root { z-index: auto; }
+.conn, .panel-head, .chat-card, .aw-chat_header, .chat-main > .scroller, .chat-main > .dock,
+.sidebar > .side-head, .sidebar > .side-nav, .sidebar > .side-section, .sidebar > .side-widget, .sidebar > .side-foot,
+.u-rail > .u-rail-head, .u-rail > .u-rail-body { position: relative; z-index: 1; }
+/* Header menus must stay above the later scroller stacking context. */
+.panel-head { z-index: 2; }
+@media (min-width: 900px) { .chat-split > .pv-divider, .chat-split > .pv-panel { position: relative; z-index: 1; } }
+/* #1629: owner choices share the existing control font floor. */
+.s-fx-owner{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--border)}
+.s-fx-owner-row{display:flex;align-items:end;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
+.s-fx-owner-row>label{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;flex:1}
+
+/* #1629: host-created static poster IMG; geometry and visibility belong to the trusted CSSOM binding. */
+.agend-effect-poster { object-fit: cover !important; object-position: center !important; user-select: none; }
+
+/* #1629: full-app bounded stock surfaces. Panel roots stay neutral; effects never raise the whole app. */
+.p-fleet > .seg, .p-settings > .seg,
+.p-fleet > .panel-body, .p-needs > .panel-body, .p-settings > .panel-body,
+.p-log > .panel-body, .p-details > .panel-body, .p-view > .panel-body,
+.p-log > .log-bar, .p-view > .v-term, .p-view > .v-id, .p-view > .v-card { position: relative; z-index: 1; }
+/* Keep the existing Apply bar's sticky behavior, in its own bounded stock band. */
+.p-settings > .s-pending { z-index: 1; }
+
+/* #1629: host-owned local Trial panel. Only its canvas frame lives inside the paint-contained stage. */
+.effect-trial-head, .effect-trial-controls, .effect-trial-note { position: relative; z-index: 1; background: var(--bg); padding: var(--s-3); margin: 0; }
+.effect-trial-head { display: flex; align-items: center; gap: var(--s-2); border-bottom: 1px solid var(--border); }
+.effect-trial-head > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.effect-trial-body { flex: 1; min-height: 0; display: flex; padding: var(--s-3); }
+.effect-trial-stage { position: relative; z-index: 0; flex: 1; min-width: 0; min-height: 0; contain: paint; overflow: clip; padding: 0; border: 0; outline: none; box-shadow: none; }

package/dist/ui/shared/app.js

@@ -18,6 +18,8 @@ import { startNeedsNotifier } from "./app-needs.js";
 import { toast } from "./ui-toast.js";
 import { t } from "./app-i18n.js";
 import { initTextSize, initUsageRail } from "./header-tools.js";
+import { installOwnerCss } from "./owner-css.js";
+import { startThemes } from "./app-themes.js";
 
 const boot = document.body.dataset;
 // #1523 N3: this device's text size, on the root before the first paint of any panel.
@@ -89,6 +91,8 @@ if (mode === "full") {
   startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
   // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
   bootPrefs();
+  // #1629: agents' themes, read when the status frame's themes_rev moves.
+  startThemes();
   onNewInstance = async () => {
     closeDrawer();                                 // on a phone the dialog opens from the drawer: the drawer goes first
     let m;
@@ -99,6 +103,8 @@ if (mode === "full") {
 } else appStore.set({ connection: "none" });
 
 startRouter(window);
+// #1629 r4 §3: the person's owner CSS (full app only; never on Settings, in safe mode or where this device turned it off).
+installOwnerCss();
 // /ui on its own opens the chat this browser had open last (an unknown name shows the panel's "not found").
 {
   const r = navStore.get().route;

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

@@ -0,0 +1,28 @@
+// #1629 r4 §1 / r4.1: the identity card's words (card.*), in English and zh-TW. Public (/assets/): View's anonymous
+// reader sees a card too.
+import { register } from "./app-i18n.js";
+
+register("card", {
+  en: {
+    label: "Identity card of {0}",
+    portraitAlt: "{0}'s portrait",
+    size: "Card size",
+    sizeS: "S", sizeM: "M", sizeL: "L",
+    sizeSName: "Small", sizeMName: "Medium", sizeLName: "Large",
+    byHuman: "set by a person",
+    byAgent: "set by the agent",
+    show: "Show card",
+    hide: "Hide card",
+  },
+  "zh-TW": {
+    label: "{0} 的身分卡",
+    portraitAlt: "{0} 的肖像",
+    size: "卡片大小",
+    sizeS: "小", sizeM: "中", sizeL: "大",
+    sizeSName: "小", sizeMName: "中", sizeLName: "大",
+    byHuman: "由人設定",
+    byAgent: "由 agent 設定",
+    show: "顯示卡片",
+    hide: "隱藏卡片",
+  },
+});

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

@@ -0,0 +1,248 @@
+/** #1629: app-owned pool; Chat contributes a lease, never another registry/loader. */
+import { createEffectTrialSource } from "./effect-trial-source.js";
+import { createOwnerEffectSource } from "./effect-owner-source.js";
+import { createEffectRuntimeLoader } from "./effect-runtime-loader.js";
+import { createEffectRegistry } from "./effect-registry.js";
+import { createEffectSafety } from "./effect-safety.js";
+import { stockEffectTrust } from "./effect-stock-trust.js";
+import { createEffectProfileCollector } from "./effect-profiles.js";
+import { chatEffectIdentity, createEffectWriter } from "./effect-chat-runtime.js";
+
+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;
+  const bindings = new Map(), profiles = new Map();
+  const identity = chatEffectIdentity(host), auth = host?.AgendAuth;
+  const safe = fn => { try { return fn(); } catch { return null; } };
+  const alive = () => { if (dead) return false; const value = safe(() => current() === true && !auth.sessionEnded()); return !dead && value === true; };
+  const sourceAlive = s => {
+    if (!s || !alive() || s !== source || s.dead) return false;
+    const value = safe(() => s.current() === true && s.element.isConnected === true);
+    return !dead && s === source && !s.dead && value === true;
+  };
+  const placementIdentity = p => JSON.stringify([p.by, p.manifest.layer, p.params]);
+  const clock = () => host.performance.now();
+  let offAuth = null;
+  const snapshot = s => ({ error: error ?? s?.error ?? null, rows: registry?.snapshot().filter(row => s?.bindings.get(row.id)?.key === row.key) ?? [], effects: s?.metadata?.effects ?? [], loading: !!s && !s.dead && s.metadata === null && !s.error });
+  function tell() {
+    const s = source, value = snapshot(s); if (dead) return;
+    if (sourceAlive(s)) safe(() => s.onChange(value));
+    if (!dead) safe(() => onChange(snapshot(source)));
+  }
+  function discard(s) {
+    if (!s || s.dead) return;
+    s.dead = true; s.generation++; s.metadata = null;
+    if (source === s) source = null;
+    safe(() => trial?.stopFor(s));
+    for (const b of s.bindings.values()) bindings.delete(b.key); s.bindings.clear();
+    if (pending?.source === s) safe(() => pending.controller.abort());
+    revision++; stamp = null;
+  }
+  function dispose() {
+    if (dead) return; 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 }));
+  }
+  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.
+  if (!alive()) { dispose(); return unavailable; }
+  try {
+    offAuth = auth.onSessionEnd(dispose);
+    if (!alive()) { dispose(); safe(() => offAuth?.()); return unavailable; }
+    host.addEventListener?.("pagehide", dispose);
+  } catch { fail("runtime_unavailable"); return unavailable; }
+  const make = (key, fn) => factories[key] ?? fn;
+  function bindingAlive(b) { if (b?.kind === "trial") return trial?.current(b) === true; if (b?.kind === "owner") return personal?.current(b) === true; return !!b && sourceAlive(b.source) && b.source.generation === b.generation && bindings.get(b.key) === b && b.source.bindings.get(b.id) === b; }
+  const bindingFor = (key, id) => { const b = bindings.get(key) ?? trial?.binding(key, id) ?? personal?.binding(key, id); return b?.id === id && bindingAlive(b) ? b : null; };
+  try {
+    writer = createEffectWriter(host, alive);
+    loader = make("loader", createEffectRuntimeLoader)({ window: host, ownerEpoch: identity.epoch, current: alive, onRevoke: () => fail("runtime_unavailable") });
+    if (!loader.ok || typeof loader.placementsSettled !== "function" || typeof loader.resourceSettled !== "function") throw Error("runtime_unavailable");
+    registry = make("registry", createEffectRegistry)({ window: host, origin: host.document.body.dataset.previewOrigin, boot: host.document.body.dataset.previewBoot,
+      load: async (descriptor, signal) => {
+        const b = bindingFor(descriptor.key, descriptor.id);
+        if (!bindingAlive(b) || descriptor.id !== b.id || signal.aborted) return null;
+        if (b.kind === "trial") return trial.load(b, signal);
+        if (b.kind === "owner") return personal.load(b, signal);
+        const value = await loader.resourceSettled({ id: b.id, instance: b.source.name }, signal);
+        if (!bindingAlive(b) || signal.aborted) return null;
+        if (!value) { refuseSource(b.source); return null; }
+        return value;
+      },
+      safety: make("safety", createEffectSafety)({ storage: host.localStorage, crypto: host.crypto }),
+      stockSnapshot: ({ frameRoot }) => make("stock", stockEffectTrust)(host, { frameRoot, ownerCss: observe().ownerCss }),
+      onChange() { try { tell(); emit(); } catch { fail("runtime_unavailable"); } },
+      onMount(owner) {
+        const b = bindingFor(owner.key, owner.id); if (!bindingAlive(b) || b.id !== owner.id || !owner.current()) return;
+        const collector = make("collector", createEffectProfileCollector)({ key: owner.key, id: owner.id, device: owner.device, clock });
+        const began = safe(clock);
+        if (collector.ok && Number.isFinite(began) && began >= 0 && bindingAlive(b) && owner.current()) profiles.set(owner, { binding: b, collector, began, attempted: null }); else collector.dispose?.();
+      },
+      onRetire(owner) { profiles.get(owner)?.collector.dispose(); profiles.delete(owner); },
+      onProfile(raw, owner) {
+        const row = profiles.get(owner); if (!row || !bindingAlive(row.binding) || !owner.current()) return;
+        row.collector.add(raw); if (row.binding.kind === "trial") return; // Diagnostic samples stay transient; shared safety still runs in registry.
+        const now = clock();
+        if (!Number.isFinite(now) || now < row.began || now - row.began < 10000 && raw.verdict !== "paused" || row.attempted !== null && now - row.attempted < 10000) return;
+        const report = row.collector.report(); if (!report || !bindingAlive(row.binding) || !owner.current()) return;
+        row.attempted = now;
+        const query = row.binding.kind === "owner" ? "" : `instance=${encodeURIComponent(row.binding.source.name)}&`;
+        void writer.post(`/ui/effects/profile/${owner.id}?${query}ownerEpoch=${identity.epoch}`, report.profile);
+      }, clock,
+    });
+    if (!registry.ok) throw Error("runtime_unavailable");
+    trial = make("trialSource", createEffectTrialSource)({ window: host, current: () => {
+      if (!alive()) return false; const v = observe(), c = v.context;
+      return alive() && v.ownerCss === "off" && c.enabled === true && c.show === true && c.previewReady === true && c.optIn === true
+        && c.safe === false && c.publicLink === false && c.reducedMotion === false && c.saveData === false && c.hidden === false;
+    }, ownerCurrent: (s, name) => sourceAlive(s) && s.name === name,
+      stock: () => registry.frameRoot ? make("stock", stockEffectTrust)(host, { frameRoot: registry.frameRoot, ownerCss: observe().ownerCss }) : null,
+      readResource: (spec, signal) => typeof loader.trialResourceSettled === "function" ? loader.trialResourceSettled(spec, signal) : Promise.resolve(null),
+      onChange() { revision++; stamp = null; sync(); tell(); },
+    });
+    if (typeof resolveOwnerTarget === "function") {
+      if (typeof loader.ownerSettled !== "function") throw Error("runtime_unavailable");
+      personal = createOwnerEffectSource({ current: alive,
+        readMetadata: signal => loader.ownerSettled(signal), readResource: (spec, signal) => loader.resourceSettled(spec, signal), resolveTarget: resolveOwnerTarget,
+        stock: () => registry.frameRoot ? make("stock", stockEffectTrust)(host, { frameRoot: registry.frameRoot, ownerCss: observe().ownerCss }) : null,
+        onChange() { revision++; stamp = null; sync(); tell(); }, onUnavailable: (slot, id) => safe(() => onOwnerUnavailable(slot, id)),
+      });
+      if (!personal.ok) throw Error("runtime_unavailable");
+    }
+  } catch { fail("runtime_unavailable"); return unavailable; }
+  function descriptors(s) {
+    if (!sourceAlive(s) || s.error) return [];
+    return (s.metadata?.effects ?? []).filter(p => p.manifest.regions.includes("chat")).map((p, order) => {
+      let b = s.bindings.get(p.id); const identity = placementIdentity(p);
+      if (!b || b.identity !== identity) {
+        if (b) bindings.delete(b.key);
+        b = Object.freeze({ key: `chat:${s.serial}:${p.id}`, id: p.id, source: s, generation: s.generation, identity });
+        s.bindings.set(p.id, b); bindings.set(b.key, b);
+      }
+      return { key: b.key, id: p.id, by: p.by, region: "chat", layer: p.manifest.layer, order, paused: s.paused.get(p.id) === identity, visible: true, instance: s.name, params: p.params, element: s.element };
+    });
+  }
+  function observation() {
+    const value = observe();
+    return { ...value, context: { ...value.context, openInstance: sourceAlive(source) ? source.name : null } };
+  }
+  function emit() {
+    if (!alive() || !registry?.ok) return;
+    const s = source, value = observation();
+    if (sourceAlive(s)) { const state = safe(() => s.observe().state); if (sourceAlive(s) && ["idle", "working", "needs_you", "stopped"].includes(state)) registry.publish("state", { state }, s.name); }
+    if (alive() && ["light", "dark"].includes(value.mode)) registry.publish("theme", { mode: value.mode });
+  }
+  function refuseSource(s) {
+    if (!sourceAlive(s)) return;
+    s.error = "resource_unavailable"; s.metadata = null; s.generation++;
+    for (const b of s.bindings.values()) bindings.delete(b.key); s.bindings.clear(); revision++; stamp = null; sync(); tell();
+  }
+  function queueSync() {
+    if (queued || dead) return; queued = true;
+    Promise.resolve().then(() => { queued = false; if (alive()) sync(); else dispose(); });
+  }
+  function sync() {
+    if (!alive()) { dispose(); return; } if (syncing) { queueSync(); return; }
+    syncing = true;
+    try {
+      const candidate = source;
+      if (candidate && !sourceAlive(candidate)) discard(candidate);
+      const before = revision, value = observation(), s = source;
+      if (!alive() || revision !== before || s !== source) { if (alive()) queueSync(); return; }
+      const entries = [...(personal?.descriptors() ?? []), ...(trial?.descriptors() ?? []), ...descriptors(s)];
+      if (!alive() || revision !== before || s !== source) { stamp = null; if (alive()) queueSync(); return; }
+      const next = JSON.stringify([revision, value.context, entries.map(d => [d.key, d.paused])]);
+      if (stamp !== next) {
+        if (!alive() || revision !== before || s !== source) { stamp = null; if (alive()) queueSync(); return; }
+        stamp = next; registry.update(entries, value.context);
+      }
+      if (!alive() || revision !== before || s !== source) { stamp = null; if (alive()) queueSync(); return; }
+      emit();
+      const c = value.context;
+      if (!pending && c.enabled && c.show && c.previewReady && c.optIn && !c.safe && !c.publicLink && !c.reducedMotion && !c.saveData && !c.hidden) {
+        const ownerNeeds = personal?.needsMetadata() === true, chatNeeds = sourceAlive(s) && !s.error && !s.metadata;
+        if (!alive() || revision !== before || s !== source) { if (alive()) queueSync(); return; }
+        if (ownerNeeds && (!chatNeeds || lastMetadata !== "owner")) void readPersonal();
+        else if (chatNeeds) void read(s);
+      }
+    } catch { fail("runtime_unavailable"); }
+    finally { syncing = false; }
+  }
+  async function readPersonal() {
+    if (!personal || pending || !personal.needsMetadata() || !alive()) return;
+    const op = { source: personal, controller: new host.AbortController() }; pending = op; lastMetadata = "owner";
+    try { await personal.read(op.controller.signal); }
+    catch { fail("runtime_unavailable"); }
+    finally { if (pending === op) { pending = null; if (alive()) sync(); } }
+  }
+  function changedOwner() {
+    if (!personal || !alive()) return;
+    if (pending?.source === personal) safe(() => pending.controller.abort());
+    personal.invalidate();
+  }
+  function ownerSnapshot() {
+    return { ...(personal?.snapshot() ?? { error: null, rev: -1, loading: false, slots: {} }),
+      rows: registry?.snapshot().flatMap(row => { const b = personal?.binding(row.key, row.id); return b ? [{ ...row, slot: b.slot }] : []; }) ?? [] };
+  }
+  async function cursorImageSettled(selection, signal) {
+    const own = personal?.cursorSelection();
+    if (!alive() || !own || !personal.cursorCurrent(selection) || signal?.aborted) return null;
+    let value; try { value = await loader.cursorImageSettled(own.id, signal); } catch { value = null; }
+    if (!alive() || !personal.cursorCurrent(own) || !personal.cursorCurrent(selection) || signal?.aborted) return null;
+    if (!value) { personal.refuseCursor(own); return null; }
+    return value;
+  }
+  async function read(s) {
+    if (!sourceAlive(s) || pending || s.error) return;
+    const op = { source: s, generation: s.generation, controller: new host.AbortController() }; pending = op; lastMetadata = "chat";
+    try {
+      const answer = await loader.placementsSettled(s.name, op.controller.signal);
+      if (!sourceAlive(s) || op.generation !== s.generation || pending !== op || op.controller.signal.aborted) return;
+      if (!answer) { refuseSource(s); return; }
+      s.metadata = answer;
+      for (const [id, identity] of s.paused) if (!answer.effects.some(p => p.id === id && placementIdentity(p) === identity)) s.paused.delete(id);
+      revision++; stamp = null; sync(); tell();
+    } catch { if (sourceAlive(s) && op.generation === s.generation) refuseSource(s); }
+    finally { if (pending === op) { pending = null; if (alive()) sync(); } }
+  }
+  function changedSource(s) {
+    if (!sourceAlive(s) || s.error) return;
+    s.generation++; s.metadata = null;
+    for (const b of s.bindings.values()) bindings.delete(b.key); s.bindings.clear();
+    if (pending?.source === s) safe(() => pending.controller.abort()); revision++; stamp = null; sync(); tell();
+  }
+  function publishReply(s, event) { if (sourceAlive(s) && !s.error && event.instance === s.name) registry.publish("reply", {}, s.name); }
+  function attachChat(options) {
+    discard(source); const expected = revision; sync();
+    if (!alive() || revision !== expected || source !== null) return null;
+    const { name, element, current: ownCurrent, observe: ownObserve, onChange: ownChange = () => {} } = options ?? {};
+    if (!alive() || typeof name !== "string" || name.length < 1 || name.length > 128 || !element || element.isConnected !== true || typeof ownCurrent !== "function" || typeof ownObserve !== "function" || safe(() => ownCurrent() === true) !== true || revision !== expected || source !== null) return null;
+    const s = { name, element, current: ownCurrent, observe: ownObserve, onChange: ownChange, serial: ++serial, generation: 0, dead: false, error: null, metadata: null, bindings: new Map(), paused: new Map() };
+    source = s; revision++; stamp = null;
+    const placement = id => sourceAlive(s) && !s.error ? s.metadata?.effects.find(p => p.id === id) : null;
+    const changed = () => changedSource(s);
+    const api = { ok: true, sync,
+      changed,
+      reply(event) { publishReply(s, event); },
+      pause(id) { const p = placement(id); if (!p) return false; s.paused.set(id, placementIdentity(p)); revision++; sync(); return true; },
+      resume(id) { const p = placement(id); if (!p) return false; s.paused.delete(id); revision++; sync(); const b = s.bindings.get(id); return bindingAlive(b) && registry.resume(b.key); },
+      async remove(id) { const p = placement(id); if (!p) return false; const generation = s.generation; const ok = await writer.post("/ui/effects/remove", { instance: s.name, id }); if (!sourceAlive(s) || generation !== s.generation) return false; if (ok) changed(); return ok; },
+      snapshot: () => sourceAlive(s) ? snapshot(s) : { error: null, rows: [], effects: [], loading: false },
+      dispose() { if (source !== s) return; discard(s); sync(); },
+    };
+    sync(); tell(); return sourceAlive(s) ? api : null;
+  }
+  return { ok: true, sync, attachChat, changedOwner, ownerSnapshot,
+    attachTrial(options) { const s = source; return sourceAlive(s) ? trial.attach(options, s) : null; },
+    stopTrial() { trial?.stop(); },
+    trialSnapshot() { return { rows: registry?.snapshot().filter(row => trial?.binding(row.key, row.id)) ?? [] }; },
+    cursorSelection: () => personal?.cursorSelection() ?? null, cursorImageSettled,
+    pauseOwner(slot) { return personal?.pause(slot) === true; },
+    resumeOwner(slot) { if (!personal?.unpause(slot)) return false; const b = personal.slotBinding(slot); return bindingAlive(b) && registry.resume(b.key); },
+    changedChat() { changedSource(source); }, reply(event) { publishReply(source, event); }, detachChat() { discard(source); sync(); }, snapshot: () => snapshot(source), dispose };
+}