@songsid/agend 2.2.0-beta.9 → 2.3.0-beta.1

package/dist/ui/shared/app.css

@@ -69,10 +69,12 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .sidebar {
   width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-sidebar);
   position: relative;   /* #1722: the resize handle sits on its right edge (the width above: tokens.css, or this device's) */
-  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
+  padding: 0 0 env(safe-area-inset-bottom) env(safe-area-inset-left);   /* the top inset is the head's, as the page header's is */
 }
 .sb-collapsed .sidebar { display: none; }
-.side-head { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-2) var(--s-2) var(--s-4); }
+/* The brand row is the page header's row: the same height, padding and centre line (--header-h; .panel-head, .panel-title). */
+.side-head { display: flex; align-items: center; gap: var(--s-1); box-sizing: content-box; min-height: calc(var(--header-h) - 2 * var(--s-1));
+  padding: max(var(--s-1), env(safe-area-inset-top)) var(--s-2) var(--s-1) var(--s-4); }
 .brand { flex: 1; font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
 .side-nav { display: flex; flex-direction: column; padding: var(--s-1) var(--s-2); gap: 1px; }
 .side-row {
@@ -110,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 */
@@ -150,6 +171,10 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .s-device { display: flex; flex-direction: column; gap: var(--s-3); }
 .s-device .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
 .s-device-row { display: flex; gap: var(--s-2); }
+/* #1827: the person's web name — its field takes the card's width; a refusal reads in the danger colour. */
+.s-profile .field { display: flex; flex-direction: column; gap: var(--s-1); }
+.s-profile .field input { max-width: 24rem; }
+.s-profile .err { color: var(--danger); }
 /* #1620: Settings → Web — the lead, and the read-only list of what is set in fleet.yaml. */
 .s-web .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
 .s-web-fields:disabled select { opacity: 0.6; }   /* over the public link: dimmed like the inputs (.field input:disabled) */
@@ -195,14 +220,17 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 .panel-head .sb-open { display: none; }
 .sb-collapsed .panel-head .sb-open { display: inline-flex; }
-.panel-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s-3); }
+/* One row of --header-h on every page (a phone's instance tabs wrap below it): the title, its status and badges on one centre line. */
+.panel-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--header-h) - 2 * var(--s-1)); }
 .panel-title h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; outline: none; }
 .panel-sub { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
 .status { display: inline-flex; align-items: center; gap: 6px; }
 .panel-actions { display: flex; align-items: center; gap: var(--s-1); }
 /* #1523 N2: the instance view switch — beside the title on a wide screen; on a phone, a row of tabs under the header. */
 .inst-switch.seg { padding: 0; margin: 0; width: auto; max-width: none; flex-shrink: 0; }
-.inst-switch .seg-item { min-height: 30px; }
+.inst-switch .seg-item { min-height: 30px; flex-direction: column; justify-content: center; gap: 0; }
+/* The label again in the current tab's weight, taking width but no height and never seen: the bar's size does not change with the tab. */
+.inst-switch .seg-item::after { content: attr(data-label); font-weight: var(--fw-semibold); height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }
 /* #1523 N3 (Q2 = A): the text size, one custom property from the root's data-text-size (header-tools.js). The chat's
    messages, Details and the Fleet tabs scale the type tokens by it; View's terminal scales itself (VIEW_SCALE). */
 :root { --text-scale: 1; }
@@ -248,6 +276,10 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .p-log .log-older, .p-log .log-start { text-align: center; margin: var(--s-2) 0; }
 .p-log .log-off { padding: var(--s-6) var(--s-4); }
 .p-details .d-edit { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
+/* The header's controls are one height, the icon buttons' (36 px): its small buttons, and the instance tabs when they share
+   its row (a phone puts them on a row of their own, under it). */
+.panel-head .btn-sm { min-height: 36px; }
+@media (min-width: 900px) { .panel-head .inst-switch .seg-item { min-height: 36px; } }
 @media (max-width: 899px) {
   .panel-head:has(.inst-switch) { flex-wrap: wrap; }
   .inst-switch.seg { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 0 var(--s-1); }
@@ -264,8 +296,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .empty-title { color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .empty-hint { font-size: var(--fs-sm); }
 .empty .btn { margin-top: var(--s-3); }
-/* #1519 P7: the first-run card (a fleet with no chat connection), above an empty chat or a Settings list. */
-.first-run-stack { width: 100%; max-width: var(--col); }
+/* #1519 P7: the first-run card (a fleet with no chat connection), above a Settings list (#1854: no longer on Chat). */
 .first-run h3 { display: flex; align-items: center; gap: var(--s-2); }
 .first-run p { color: var(--text-2); font-size: var(--fs-sm); }
 .error-state { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); color: var(--danger); text-align: center; }
@@ -334,6 +365,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); }
@@ -370,6 +403,13 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    such as 「昨天 下午03:58」, ticks) — and a block body would stretch to it; fit-content keeps a short message short, on
    the right under its meta, and a long one still wraps at the message's max-width. */
 .msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); width: fit-content; max-width: 100%; margin-left: auto; }
+/* A person's click on a reply button: the bubble shows 🔘 and the button's label (never the value the agent was given);
+   live, the label is a button that shows the reply its buttons were on. */
+.click-chip { display: flex; }
+.click-chip .click-link, .click-chip .click-text { display: inline-flex; align-items: baseline; gap: var(--s-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; }
+.click-chip .click-link { cursor: pointer; }
+.click-chip .click-link:hover, .click-chip .click-link:focus-visible { text-decoration: underline; }
+.click-mark { flex: none; }
 .msg.agent { align-self: stretch; }
 /* #1672: a status line (another instance's message, a daemon notice): muted plain text, no bubble; a long one folds.
    Its class is `status-line`, never `status`: that is the header's inline-flex badge class, and on a message it turned
@@ -400,10 +440,13 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .text-card { margin-top: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
 .text-card .tc-head { display: flex; align-items: center; gap: var(--s-2); }
 .text-card .tc-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-2); }
-.text-card .tc-body { margin-top: var(--s-2); max-height: 480px; overflow: auto; }
+/* #1812: the scroller spans the card's padding box and insets its own content — 12px on both sides, from the border on
+   the left and from the scrollbar (or the border, with overlay scrollbars) on the right. A stable gutter keeps a
+   classic scrollbar off the content, and the content from shifting when the scrollbar comes and goes. */
+.text-card .tc-body { margin: var(--s-2) calc(-1 * var(--s-3)) 0; padding: 0 var(--s-3); max-height: 480px; overflow: auto; scrollbar-gutter: stable; }
 .text-card .tc-body[hidden] { display: none; }
 .text-card .tc-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-xs); }
-.text-card .tc-table-wrap { overflow-x: auto; }
+.text-card .tc-table-wrap { overflow-x: auto; padding-bottom: var(--s-3); }
 .text-card .tc-table { border-collapse: collapse; font-size: var(--fs-xs); }
 .text-card .tc-table th, .text-card .tc-table td { border: 1px solid var(--border); padding: 2px 6px; text-align: left; vertical-align: top; }
 .text-card .tc-more { margin-top: var(--s-2); }
@@ -436,10 +479,17 @@ html.lb-open .scroller { overflow: hidden; }
 .msg .md ul { list-style: disc; } .msg .md ol { list-style: decimal; }
 .msg .md li > ul, .msg .md li > ol { margin: 2px 0; }
 .msg .md hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-3) 0; }
-.msg .md .tbl { overflow-x: auto; margin: var(--s-2) 0; }
+/* #1812: a table too wide for its message scrolls in this wrapper (see the cell rule below); the bottom padding keeps an
+   overlay scrollbar off the last row. */
+.msg .md .tbl { overflow-x: auto; margin: var(--s-2) 0 0; padding-bottom: var(--s-3); }
 .msg .md table { border-collapse: collapse; font-size: var(--fs-sm); }
 .msg .md th, .msg .md td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
 .msg .md th { background: var(--surface); font-weight: var(--fw-semibold); }
+/* #1812: table cells keep their words whole. The message's `overflow-wrap: anywhere` also shrinks a cell's minimum
+   width, so auto table layout squeezed the columns and split words ("directo|r"); `break-word` breaks a word only when
+   it alone is wider than its line and leaves the minimum at whole words, so a wide table overflows into its scrolling
+   wrapper instead. A column keeps at least 5em: CJK text can break between any two characters. */
+.msg .md th, .msg .md td, .text-card .tc-table th, .text-card .tc-table td { overflow-wrap: break-word; word-break: normal; min-width: 5em; }
 .msg .md .al-c { text-align: center; } .msg .md .al-r { text-align: right; }
 .msg .md h3, .msg .md h4, .msg .md h5, .msg .md h6 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
 .msg .md .tk-k { color: var(--tk-k); } .msg .md .tk-s { color: var(--tk-s); } .msg .md .tk-n { color: var(--tk-n); } .msg .md .tk-c { color: var(--tk-c); font-style: italic; }
@@ -472,6 +522,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); }
@@ -516,6 +580,10 @@ html.lb-open .scroller { overflow: hidden; }
 .rb-btn { max-width: 100%; white-space: normal; text-align: left; }
 .rb-btn.chosen, .rb-btn.chosen:disabled { border-color: var(--ok); color: var(--text); background: color-mix(in srgb, var(--ok) 14%, transparent); font-weight: var(--fw-semibold); opacity: 1; }
 .rb-btn:disabled:not(.chosen) { opacity: 0.55; }
+/* #1823: a poll — its closed buttons show the tally, so they stay readable; the time left keeps its width. */
+.rb-row.poll .rb-btn:disabled { opacity: 0.85; }
+.rb-row.poll .poll-left { font-variant-numeric: tabular-nums; }
+.poll-voters { margin: var(--s-1) 0 0; padding-left: var(--s-4); color: var(--text-2); font-size: var(--fs-sm); }
 .rb-note { font-size: var(--fs-xs); color: var(--text-3); }
 .pv-menu { position: relative; }
 .pv-menu > summary { list-style: none; cursor: pointer; padding: 2px var(--s-2); border-radius: var(--r-sm); color: var(--text-3); }
@@ -534,6 +602,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); }
@@ -577,6 +648,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); }
@@ -704,7 +827,15 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
 .nav-facet-reset { font-size: var(--fs-xs); }
 
-.p-view .panel-actions .btn { gap: var(--s-1); }
+/* One gap on every page (View's, #1448): the header's controls are the same size on every tab. */
+.panel-actions .btn { gap: var(--s-1); }
+/* Aa's names share one cell, only the current one shown: the button is as wide as its widest name on every page. */
+.hd-text-names { display: inline-grid; }
+.hd-text-names > span { grid-area: 1 / 1; visibility: hidden; }
+.hd-text-names > .on { visibility: visible; }
+.hd-slot { visibility: hidden; pointer-events: none; }
+/* #1844 Fleet overview → Docs: the arrow says "opens a new tab". */
+.hd-docs .hd-ext { color: var(--text-3); }
 .v-term { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 5px 6px; background: #000000; position: relative; }
 .v-pre { margin: 0; min-width: 100%; min-height: 100%; font-family: var(--font-mono); line-height: 1.2; white-space: pre; color: #d0d0d0; }
 .v-pre .ansi[data-b] { font-weight: var(--fw-bold); }
@@ -1041,6 +1172,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .cmd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
 .cmd-name { font-weight: var(--fw-semibold); }
 .cmd-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-ui); color: var(--text-2); }
+.cmd-phase { color: var(--text); font-weight: var(--fw-semibold); }
 .cmd-choices { display: flex; flex-wrap: wrap; gap: var(--s-1); max-height: 180px; overflow-y: auto; }
 .cmd-choices .btn.current { border-color: var(--accent); color: var(--accent); }
 .quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
@@ -1057,3 +1189,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: "隱藏卡片",
+  },
+});