@songsid/agend 2.3.0-beta.22 → 2.3.0-beta.24

package/dist/ui/shared/app.css

@@ -383,6 +383,17 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .dlg-title { flex: 1; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .dlg-body { padding: var(--s-2) var(--s-5) var(--s-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); }
 .dlg-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); }
+/* A drawer (ui-dialog.js `drawer`): on a desk, the right edge at full height, the page in view beside it. A phone keeps
+   the bottom sheet (the rules below are for 900 px and up only). */
+@media (min-width: 900px) {
+  .dlg.dlg-drawer { width: min(620px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0;
+    background: var(--bg); box-shadow: var(--shadow-2); animation: dlg-drawer-in 0.18s var(--ease); }
+  .dlg-drawer .dlg-box { height: 100%; max-height: 100dvh; }
+  .dlg-drawer .dlg-head { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); }
+  .dlg-drawer .dlg-body { flex: 1; padding-top: var(--s-4); padding-bottom: var(--s-8); }
+}
+@keyframes dlg-drawer-in { from { transform: translateX(28px); opacity: 0.6; } }
+@media (prefers-reduced-motion: reduce) { .dlg.dlg-drawer { animation: none; } }
 
 /* ── Forms ── */
 .form { display: flex; flex-direction: column; gap: var(--s-3); }
@@ -514,8 +525,19 @@ html.lb-open .scroller { overflow: hidden; }
 .lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
   background: rgba(0, 0, 0, 0.95); color: #fff; overflow: hidden; overscroll-behavior: contain; }
 .lb::backdrop { background: rgba(0, 0, 0, 0.6); }
-.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box; }
-.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
+.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box;
+  overflow: hidden; touch-action: none; }
+/* #2333: the picture at its own size, placed and scaled by a CSSOM transform from its top-left corner (image-zoom.js);
+   hidden until it has loaded and been fitted. One that fails to load is shown where the browser puts a broken one. */
+.lb-img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; display: block; transform-origin: 0 0; will-change: transform;
+  visibility: hidden; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
+.lb-img.lb-ready { visibility: visible; }
+.lb-img.lb-err { position: static; max-width: 100%; max-height: 100%; visibility: visible; transform: none; cursor: default; }
+.lb-stage.lb-zoomed .lb-img { cursor: grab; }
+.lb-stage.lb-zoomed .lb-img:active { cursor: grabbing; }
+.lb-zoom { display: inline-flex; align-items: center; gap: 2px; }
+.lb .lb-level { min-width: 4.5em; justify-content: center; color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); font-variant-numeric: tabular-nums; }
+.lb .lb-fit-width.on { background: rgba(255, 255, 255, 0.22); }
 .lb-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
   background: rgba(0, 0, 0, 0.75); }
 .lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
@@ -1040,26 +1062,17 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .v-pre .ansi[data-dim] { opacity: .5; }
 .v-term-note { position: absolute; left: var(--s-3); right: var(--s-3); top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--warn-bg); border: 1px solid var(--warn-line); color: #f0f0f0; font-size: var(--fs-sm); }
 .v-probe { position: absolute; visibility: hidden; white-space: pre; left: -9999px; top: 0; font-size: 100px; }
-.v-card { flex-shrink: 0; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--bg); padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); }
-.v-card.open { align-items: flex-start; padding-top: var(--s-3); padding-bottom: var(--s-3); }
-.v-avatar { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
-.v-card.open .v-avatar { width: 48px; height: 48px; }
-.v-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.v-initial { color: var(--text-2); font-weight: var(--fw-semibold); text-transform: uppercase; }
-.v-card-body { flex: 1; min-width: 0; }
-.v-card-line { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-sm); min-width: 0; }
-.v-card-line strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.v-role { color: var(--accent); font-size: var(--fs-xs); white-space: nowrap; }
-.v-card-meta { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.v-card.open .v-card-meta { white-space: normal; }
-.v-card-desc { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); white-space: pre-wrap; }
 .help-list { list-style: disc; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
 .err { color: var(--danger); font-size: var(--fs-sm); }
 .u-provider { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2); }
 .u-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
-/* #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; }
+/* #1749 / #2412: one line beside ↑↓, by flexing alone (no widths assumed: ↑↓ are larger on a phone). The plan badge
+   starts at its minimum (40 px) and grows up to its own width into the room the name and ↑↓ leave, so a long badge ends
+   in an ellipsis (the full name its tooltip) while the name keeps every pixel (#2415 review: a shared shrink, however
+   weighted, still took a fraction of one and painted "Meta Muse Co…"). Only when the name, that minimum badge and ↑↓
+   cannot all fit (a 320 px phone) does the name shrink and end in an ellipsis — nothing leaves the card. */
+.u-head strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-plan { flex: 1 0 40px; max-width: max-content; min-width: 0; 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; }
@@ -1094,8 +1107,8 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 @media (max-width: 1199px) { .u-rail { display: none; } }
 @media (max-width: 899px) {
   .hide-narrow { display: none; }
-  .v-card { padding-left: var(--s-3); padding-right: var(--s-3); }
-  .v-card .btn { min-height: var(--tap); }
+  .v-id { padding-left: var(--s-3); padding-right: var(--s-3); }
+  .v-id-actions .btn { min-height: var(--tap); }
 }
 
 /* ── Settings (#1408 step 3): lists, forms, the pending bar, the Apply in hand ── */
@@ -1187,8 +1200,6 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
   .s-dev-bar .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   /* An agent's row: name and model on the first line, its tags and buttons from the second, on every row alike. */
   .s-br { display: block; flex-basis: 100%; height: 0; }
-  /* View: the profile line wraps to two lines instead of hiding the model and context. */
-  .v-card-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
   /* A text button in Needs you lines up with the text above it, first in its row or wrapped onto a line of its own;
      a row's trailing Delete sits at the right. */
   .n-actions > .btn-ghost { padding-left: 0; padding-right: 0; margin-left: -1px; }
@@ -1704,9 +1715,10 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .id-card.card-c .id-tagline { -webkit-line-clamp: 2; line-clamp: 2; }
   .id-card.card-c .id-bio { -webkit-line-clamp: 3; line-clamp: 3; }
 }
-/* #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); }
+/* #1629 r4 §1: the identity card in View, with Edit profile under it. */
+.v-id { flex-shrink: 0; padding: var(--s-2) var(--s-4); background: var(--bg); padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); }
 .v-id .id-card { margin: 0; }
+.v-id-actions { display: flex; justify-content: flex-end; padding-top: var(--s-2); }
 .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); }
@@ -1750,7 +1762,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .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; }
+.p-log > .log-bar, .p-view > .v-term, .p-view > .v-id { 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; }
 
@@ -1920,19 +1932,22 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .tb-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-3); }
 .tb-drop-line { height: 3px; border-radius: 2px; background: var(--accent); }
 
-.tb-tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 2px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); --lbar-color: var(--text-3); cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
-.tb-tile:hover { border-color: var(--border-strong); }
+.tb-tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 2px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-1); --lbar-color: transparent; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tb-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
+/* As taskhall: the shared straight bar (#2330) only while the card is under way (in progress, blocked, waiting for
+   you); none on to do or done, and a done tile is dimmed. */
 .tb-tile.st-claimed { --lbar-color: var(--accent); }
 .tb-tile.st-blocked { --lbar-color: var(--danger); }
 .tb-tile.st-review { --lbar-color: var(--warn); }
-.tb-tile.st-done { --lbar-color: var(--ok); }
+.tb-tile.st-done { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); box-shadow: none; }
+.tb-tile.st-done .tb-tile-title { color: var(--text-2); }
 .tb-tile.dragging { opacity: 0.4; }
 .tb-tile.flash { animation: tb-flash 1.6s var(--ease); }
 @keyframes tb-flash { from { box-shadow: 0 0 0 3px var(--accent-dim); background: var(--accent-dim); } to { box-shadow: none; } }
 .tb-tile-top { display: flex; align-items: center; gap: var(--s-2); }
-.tb-size { font-size: var(--fs-xs); color: var(--text-3); }
+.tb-size { padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; font-weight: var(--fw-bold); line-height: 16px; color: var(--text-3); }
 /* The tile's control: its title, a plain-looking button (Enter opens the card, Alt+arrows move it). */
-.tb-tile-title { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; font-weight: var(--fw-medium); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+.tb-tile-title { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; font-weight: var(--fw-semibold); line-height: 1.4; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
 .tb-tile-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
 .tb-tile:has(.tb-tile-title:focus-visible) { border-color: var(--focus); }
 .tb-tile-note { display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
@@ -1959,12 +1974,47 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .tb-sub-blocked { padding-left: 22px; font-size: var(--fs-xs); color: var(--danger); overflow-wrap: anywhere; }
 .tb-sub-more { font-size: var(--fs-xs); padding-left: var(--s-1); }
 .tb-tile-foot { display: flex; align-items: center; gap: var(--s-2); }
-.tb-tile-foot > .tb-who { flex: 1; min-width: 0; max-width: none; }
+.tb-tile-foot > .tb-who, .tb-tile-foot > .tb-person, .tb-tile-foot > .tb-people { flex: 1; min-width: 0; max-width: none; }
+.tb-people { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
+/* Who (fleet-task-common.js): a round initial — the instance's identity colour when it has one — then the name. */
+.tb-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.tb-person > .tb-who { min-width: 0; }
+.tb-person.none > .tb-who { color: var(--text-3); }
+.tb-av { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
+  background: color-mix(in srgb, var(--id, var(--text-3)) 16%, var(--bg)); color: var(--id-name, var(--text-2)); }
 .tb-tile-stats { display: inline-flex; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); }
 .tb-tile-stats > span { display: inline-flex; align-items: center; gap: 2px; }
 .tb-tile-stats > .all { color: var(--ok); }
 .tb-tile-stats > .reply { color: var(--accent); }
 
+/* #2246 step 3: who works on what (fleet-task-work.js) — the board's Instance drawer and the Details page's block. */
+.tw { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
+.tw-head { margin: 0; font-size: var(--fs-sm); }
+.tw-error { margin: 0; color: var(--danger); font-size: var(--fs-sm); }
+.tw-group { display: flex; flex-direction: column; gap: var(--s-2); }
+.tw-group-head { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
+.tw-inst { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); min-width: 0; }
+.tw-inst-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.tw-inst-head .av { width: 24px; height: 24px; font-size: 11px; }
+.tw-inst-head .av .av-dot { box-shadow: 0 0 0 2px var(--bg); }
+.tw-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.tw-state { font-size: var(--fs-xs); white-space: nowrap; }
+.tw-alt { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.tw-desc { margin: 0; font-size: var(--fs-xs); overflow-wrap: anywhere; }
+.tw-none { margin: 0; font-size: var(--fs-xs); }
+.tw-lines { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.tw-line { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; padding: 2px var(--s-1); background: none; border: 0; border-radius: var(--r-sm); color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tw-line:hover { background: var(--surface-2); }
+.tw-line:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.tw-kind { flex-shrink: 0; min-width: 4.5em; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-2); }
+.tw-kind.k-doing { color: var(--accent); }
+.tw-kind.k-blocked, .tw-kind.k-back { color: var(--danger); }
+.tw-kind.k-review { color: var(--warn); }
+.tw-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tw-note { flex-shrink: 0; font-size: var(--fs-xs); white-space: nowrap; }
+.tw-unread { flex-shrink: 0; display: inline-flex; color: var(--accent); }
+.d-board .tw-lines { margin-top: var(--s-1); }
+
 /* One card, in the app's dialog. */
 .tc { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
 .tc-head { display: flex; align-items: center; gap: var(--s-2); }
@@ -1974,7 +2024,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .tc-ver { font-size: var(--fs-xs); }
 .tc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
 .tc-hint { font-size: var(--fs-xs); }
-.tc-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--fs-sm); align-items: center; }
+.tc-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); align-items: center; }
 .tc-meta dt { color: var(--text-2); }
 .tc-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; min-width: 0; }
 .tc-value { color: var(--text); overflow-wrap: anywhere; }
@@ -2012,6 +2062,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .tb-col { min-height: 0; }
   .tb-form-row { grid-template-columns: minmax(0, 1fr); }
   .tb-search { flex: 1 1 100%; }
+  /* The card's sheet keeps its fields full width (the grey block is the desk drawer's). */
+  .tc-meta { padding: 0; background: none; }
   /* #2299: a phone's waiting row: pill and title on one line, the actions under them (assignee left, buttons right). */
   .tb-wait-main > .tb-pill { min-width: 0; }
   .tb-wait-actions { flex-basis: 100%; margin-left: 0; }
@@ -2022,6 +2074,15 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   /* …and they do not pile down the board: an older confirmation gives way to two newer toasts; an error never does. */
   .shell:has(.tb-home, .tb-board-page) .toasts > .toast.ok:nth-last-child(n+3) { display: none; }
 }
+/* On a desk a project's columns reach the bottom of the page, as taskhall's: a card drops anywhere down a column, and
+   an empty column still reads as one. The page's column, the board and its scroller pass the height down as flex. */
+@media (min-width: 900px) {
+  .col:has(> .tb > .tb-board-page) { display: flex; flex-direction: column; min-height: 100%; }
+  .tb:has(> .tb-board-page) { flex: 1; }
+  .tb-board-page { display: flex; flex-direction: column; flex: 1; }
+  .tb-board-page > .tb-scroll { display: flex; flex-direction: column; flex: 1; }
+  .tb-board-page .tb-columns { flex: 1; align-items: stretch; }
+}
 @media (prefers-reduced-motion: reduce) {
   .tb-tile.flash { animation: none; }
   .tb-chev { transition: none; }

package/dist/ui/shared/app.js

@@ -8,8 +8,9 @@
 // #1665 first: the host's preferences go into this browser's cache before any module below reads its key.
 import { bootPrefs } from "./app-prefs.js";
 import { html, render } from "./app-html.js";
-import { Shell, handleKey, handleSearchKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener } from "./app-shell.js";
+import { Shell, handleKey, handleSearchKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener, isMacLike } from "./app-shell.js";
 import { installSwipe } from "./app-swipe.js";
+import { installTextUndo } from "./text-undo.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
 import { appStore, applyStatus, applyActivity, guestPage } from "./app-store.js";
@@ -125,6 +126,9 @@ if (!guest) installOwnerCss();
 document.addEventListener("keydown", handleKey);
 // #2293: Ctrl+K / ⌘K (and Ctrl+F in a chat) — an admin's full app only; the server refuses a guest's search anyway.
 if (mode === "full" && !guest) document.addEventListener("keydown", handleSearchKey);
+// #2342: Ctrl/⌘+Z and Ctrl+Shift+Z / Ctrl+Y / ⌘⇧Z in every text field, one history per field (the browser's is one
+// for the whole page, and any script write wipes it).
+installTextUndo({ mac: isMacLike() });
 // #1605: on a phone (the sidebar is a drawer), swipe right in the main area to open it, left to close it — the same
 // open/close as ☰ and the scrim. Nothing that owns a sideways drag (code, tables, the terminal, inputs, dialogs) and
 // never the left edge (iOS: "back").

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

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

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

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

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

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

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

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

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

@@ -42,6 +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 finishDisposed; const disposed = new Promise(resolve => { finishDisposed = resolve; });
   let readingStock = false, stockFailure = "stock_evidence_invalid", warned = null;
   let root, geometry, observer, resize, longTasks = null, longTasksSupported = false;
   const time = () => {
@@ -342,7 +343,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       }).catch(() => { if (current(s)) retire(s, "resource_unavailable"); }).finally(() => {
         if (request.timer !== null) host.clearTimeout(request.timer);
         loads.delete(request); if (s.request === request) s.request = null;
-        if (!dead) reconcile(); else if (loads.size === 0 && registries.get(host) === api) registries.delete(host);
+        if (!dead) reconcile(); else if (loads.size === 0) { if (registries.get(host) === api) registries.delete(host); finishDisposed(); }
       });
     }
     schedule(); tell();
@@ -530,11 +531,12 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       }
       return sent;
     },
+    whenDisposed: () => disposed,
     dispose() {
       if (dead) return; dead = true; revision++; stopAll("disposed");
       if (raf !== null) host.cancelAnimationFrame(raf); if (timer !== null) host.clearTimeout(timer);
       observer.disconnect(); resize.disconnect(); longTasks?.disconnect(); for (const off of offs) off();
-      geometry.dispose(); root.remove(); observed.clear(); if (loads.size === 0 && registries.get(host) === api) registries.delete(host);
+      geometry.dispose(); root.remove(); observed.clear(); if (loads.size === 0) { if (registries.get(host) === api) registries.delete(host); finishDisposed(); }
     },
   };
   // Read-only host geometry seam; no selector guessing among poster and live roots.

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

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

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

@@ -11,10 +11,10 @@ const SPECS = [
   ["confirmation", ".shell > .pending-stack, .shell .p-settings > .panel-body > .col > .pending-stack.inline"], ["preview", ".shell .chat-split > .pv-panel, .shell .chat-split > .pv-divider"],
   ["preview-menu", ".shell .thread details.pv-menu"], ["palette", ".shell .dock .cmd-palette"],
   ["drop", ".shell .p-chat > .drop-overlay"],
-  ["thread-control", ".shell .chat-main > .amb-note, .shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
+  ["thread-control", ".shell .chat-main > .amb-note, .shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .msg > div.msg-actions, .shell .thread .msg > button.msg-quote, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
   ["link", ".shell .thread .md a, .shell .thread .st-text > a.st-link, .shell .dock .prompts .txt > a.st-link"], ["attachment", ".shell .thread .atts"], ["media", ".shell .thread .att-media"],
   ["panel-navigation", ".shell .p-fleet > .seg, .shell .p-settings > .seg"],
-  ["panel-content", ".shell .p-fleet > .panel-body, .shell .p-needs > .panel-body, .shell .p-settings > .panel-body, .shell .p-log > .panel-body, .shell .p-details > .panel-body, .shell .p-view > .panel-body, .shell .p-view > .v-term, .shell .p-view > .v-id, .shell .p-view > .v-card"],
+  ["panel-content", ".shell .p-fleet > .panel-body, .shell .p-needs > .panel-body, .shell .p-settings > .panel-body, .shell .p-log > .panel-body, .shell .p-details > .panel-body, .shell .p-view > .panel-body, .shell .p-view > .v-term, .shell .p-view > .v-id"],
   ["panel-controls", ".shell .p-log > .log-bar, .shell .p-settings > .s-pending"],
   ["session-ended", "body > .agend-session-ended[role=alert]"],
 ];
@@ -28,7 +28,7 @@ const PANELS = Object.freeze({
   settings: { required: [".panel-head", ".seg", ".panel-body"], optional: [".s-pending"] },
   log: { required: [".panel-head", ".panel-body"], optional: [".log-bar"] },
   details: { required: [".panel-head", ".panel-body"], optional: [] },
-  view: { required: [".panel-head"], optional: [".panel-body", ".v-term", ".v-id", ".v-card"] },
+  view: { required: [".panel-head"], optional: [".panel-body", ".v-term", ".v-id"] },
 });
 function panelSurface(doc, chat) {
   if (chat) return { panel: chat, structural: STRUCTURAL, content: CONTENT, kind: "chat" };
@@ -37,8 +37,8 @@ function panelSurface(doc, chat) {
   const children = [...panel.children], count = selector => children.filter(el => el.matches(selector)).length;
   if (spec.required.some(selector => count(selector) !== 1) || spec.optional.some(selector => count(selector) > 1)
     || children.some(el => !el.matches([...spec.required, ...spec.optional, "dialog.dlg", "dialog.lb"].join(",")))) return null;
-  if (kind === "view" && !(count(".panel-body") === 1 && !count(".v-term") && !count(".v-id") && !count(".v-card")
-    || !count(".panel-body") && count(".v-term") === 1 && count(".v-card") === 1)) return null;
+  if (kind === "view" && !(count(".panel-body") === 1 && !count(".v-term") && !count(".v-id")
+    || !count(".panel-body") && count(".v-term") === 1 && count(".v-id") === 1)) return null;
   const prefix = `.p-${kind} > `;
   return { panel, kind, structural: [...STRUCTURAL.slice(0, 5), `.main > .p-${kind}`],
     content: [...CONTENT.filter(selector => !selector.startsWith(".p-chat") && !selector.startsWith(".chat-main")),

package/dist/ui/shared/feature-flags.js

@@ -0,0 +1,127 @@
+// Product feature policy only: this module imports no experimental runtime.
+import { appStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
+import { ownerEffectsChosen, onOwnerEffectsChanged } from "./app-prefs.js";
+import { register } from "./app-i18n.js";
+import { html, useEffect, useState } from "./app-html.js";
+register("cwControls", { en: { title: "Effects" }, "zh-TW": { title: "效果" } });
+export function canvasWorkerEnabled() { return appStore.get().canvasWorker === true; }
+export function onCanvasWorkerChange(fn) {
+  let value = canvasWorkerEnabled();
+  return appStore.subscribe(() => { const next = canvasWorkerEnabled(); if (next !== value) { value = next; fn(next); } });
+}
+export function useCanvasWorker() {
+  const [value, setValue] = useState(canvasWorkerEnabled);
+  useEffect(() => { setValue(canvasWorkerEnabled()); return onCanvasWorkerChange(setValue); }, []);
+  return value;
+}
+// Never evaluate the optional module before admission. An obsolete import may finish, but cannot mount.
+export function experimentalComponent(load, select) {
+  return function ExperimentalComponent(props) {
+    const enabled = useCanvasWorker(), [component, setComponent] = useState(null);
+    useEffect(() => {
+      let current = true;
+      if (enabled) load().then(module => { if (current && canvasWorkerEnabled()) setComponent(() => select(module)); }, () => {});
+      return () => { current = false; };
+    }, [enabled]);
+    return enabled && component ? html`<${component} ...${props} />` : null;
+  };
+}
+
+/** effect_chat_v of a chat with no placements: sha256(JSON.stringify([])), first 32 hex (fleet-manager's status row). */
+export const EMPTY_CHAT_EFFECTS = "4f53cda18c2baa0c0354bb5f9a3ecbe5";
+
+let mod = null, waking = null, chatStore = null, started = false, generation = 0, awakeGeneration = -1, retiring = Promise.resolve();
+const awakeListeners = new Set();
+
+/** Whether `name`'s chat has Canvas Worker placements (as the status rows say). */
+export function chatHasEffects(name, app = appStore.get()) {
+  const v = name ? app.instances?.find(i => i.name === name)?.effect_chat_v : undefined;
+  return canvasWorkerEnabled() && typeof v === "string" && /^[a-f0-9]{32}$/.test(v) && v !== EMPTY_CHAT_EFFECTS;
+}
+
+/** The running effects owner, or null while dormant (or when it could not start: as getAppEffects always was). */
+export function getAppEffects(host) { return canvasWorkerEnabled() && mod ? mod.getAppEffects(host) : null; }
+
+/** Whether the runtime has been asked to start on this page. */
+export function effectsAwake() { return waking !== null; }
+/** Whether its module has loaded (started, or found it could not: getAppEffects() then says which). */
+export function effectsLoaded() { return mod !== null && awakeGeneration === generation; }
+
+/** Follow every completed runtime episode, including a replacement after an experimental off/on. */
+export function onEffectsAwake(fn) {
+  if (typeof fn !== "function") return () => {};
+  awakeListeners.add(fn);
+  if (effectsLoaded()) { try { fn(); } catch { /* a listener's error is its own */ } }
+  return () => awakeListeners.delete(fn);
+}
+
+/** Load lazily; each explicitly enabled episode owns its startup and cancellation. */
+export function wakeEffects() {
+  if (!canvasWorkerEnabled()) return Promise.resolve(null);
+  if (waking) return waking;
+  const episode = generation;
+  waking = (mod ? Promise.resolve(mod) : import("/ui/js/app-effects.js")).then(async m => {
+    mod = m;
+    await retiring;
+    if (episode !== generation || !canvasWorkerEnabled()) return null;
+    const owner = chatStore ? m.startAppEffects({ store: chatStore }) : null;
+    awakeGeneration = episode;
+    for (const fn of [...awakeListeners]) { try { fn(); } catch { /* the rest still hear */ } }
+    return owner;
+  }, () => null);
+  return waking;
+}
+
+/** Wake when the open chat has placements or the person has a personal effect. */
+function check() {
+  if (!canvasWorkerEnabled()) {
+    generation++;
+    const owner = mod?.getAppEffects();
+    if (owner) retiring = Promise.resolve(owner.dispose?.(true));
+    waking = null;
+    return;
+  }
+  if (waking) return;
+  const route = navStore.get().route;
+  if ((route?.panel === "chat" && chatHasEffects(route.instance)) || ownerEffectsChosen()) void wakeEffects();
+}
+
+/** Boot (once per page, with the Chat store the runtime binds to). Starts nothing but the watch. */
+export function startEffectsWaker({ store }) {
+  chatStore = store;
+  if (started) return;
+  started = true;
+  appStore.subscribe(check); navStore.subscribe(check); onOwnerEffectsChanged(check);
+  check();
+}
+
+// Full Canvas Worker metadata stays in the experimental graph, never in ordinary chat boot.
+let metadata = null, metadataPending = null;
+const metadataListeners = new Set();
+export function onCanvasMetadataChange(fn) { metadataListeners.add(fn); return () => metadataListeners.delete(fn); }
+export function loadCanvasWorkerMetadata() {
+  if (!canvasWorkerEnabled()) return Promise.resolve(null);
+  if (metadata) return Promise.resolve(metadata);
+  if (metadataPending?.episode === generation) return metadataPending.promise;
+  const episode = generation, op = { episode, promise: null };
+  metadataPending = op;
+  op.promise = import("./effect-display-metadata.js").then(value => {
+    if (episode !== generation || !canvasWorkerEnabled()) return null;
+    metadata = value;
+    for (const fn of [...metadataListeners]) { try { fn(); } catch { /* independent viewers */ } }
+    appStore.set({ canvasMetadataEpoch: episode });
+    return metadata;
+  }, () => null).finally(() => { if (metadataPending === op) metadataPending = null; });
+  return op.promise;
+}
+export function readCanvasTrialMessage(message) {
+  if (!canvasWorkerEnabled()) return null;
+  if (!metadata) { void loadCanvasWorkerMetadata(); return undefined; }
+  return metadata.effectTrialMessage(message);
+}
+export function canvasWorkerMenuAvailable(host) {
+  if (!canvasWorkerEnabled()) return false;
+  if (!metadata) { void loadCanvasWorkerMetadata(); return false; }
+  return metadata.chatEffectIdentity(host) !== null;
+}

package/dist/ui/shared/identity-color.js

@@ -196,6 +196,8 @@ function ColorDialog({ name, it, onClose }) {
   }, [name]);
   // The preview: the instance as it would be drawn with the choice here.
   const preview = identityOf({ ...(it || {}), color: { ...((it && it.color) || {}), person: color || undefined }, color_show: { ...((it && it.color_show) || {}), person: places || undefined } }, { off: false });
+  // #2342: a swatch (or "no pick") is a choice, not text: it starts the hex field's undo history afresh (undoing the
+  // text back to a typed colour would leave the box and the chosen colour apart — Save would send the other one).
   const pick = (c) => { setColor(c); setHex(c && HEX.test(c) ? c : ""); setError(""); };
   const togglePlace = (p) => {
     const base = places || preview.show;
@@ -211,7 +213,8 @@ function ColorDialog({ name, it, onClose }) {
       onClose();
     } catch (err) { setError(t("color.failed", (err && err.message) || "network")); setBusy(false); }
   }
-  const onHex = (v) => { setHex(v); const c = /^#[0-9a-fA-F]{6}$/.test(v) ? v.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
+  // The text as typed (#2342: trimming it in the box would rewrite it, losing its undo); spaces around it are ignored.
+  const onHex = (v) => { setHex(v); const w = v.trim(), c = /^#[0-9a-fA-F]{6}$/.test(w) ? w.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
   const off = colorsOff();
   return html`<${Dialog} title=${t("color.title", name)} onClose=${onClose} busy=${busy}
       actions=${html`<button type="button" class="btn" disabled=${busy || !loaded} onClick=${() => save({ color: null, color_show: null })}>${t("color.reset")}</button>
@@ -226,8 +229,8 @@ function ColorDialog({ name, it, onClose }) {
         ref=${(el) => { if (el && el.style) { el.style.setProperty("--sw-light", p.light); el.style.setProperty("--sw-dark", p.dark); } }}
         onClick=${() => pick(`preset:${p.id}`)}></button>`)}
       <label class="idc-custom">${t("color.custom")}
-        <input type="color" value=${HEX.test(hex) ? hex : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
-        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value.trim())} aria-label=${t("color.hex")} /></label>
+        <input type="color" value=${HEX.test(hex.trim()) ? hex.trim() : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
+        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.hex")} /></label>
       <button type="button" class="btn btn-sm" disabled=${!color} onClick=${() => pick(null)}>${t("color.noPick")}</button>
     </fieldset>
     <fieldset class="idc-places"><legend>${t("color.places")}</legend>