@songsid/agend 2.3.1 → 2.3.2-beta.10

package/dist/ui/shared/app.css

@@ -130,17 +130,22 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    A short box that clips to its corners (.msg-quote) moves the bar in (--lbar-left) and shortens it (--lbar-inset) so
    the corner never cuts its ends round.
    tests/web-left-bar-2330.test.ts keeps a coloured border-left off rounded boxes. */
-.lbar, .reply-bar, .msg-quote, .p-log .log-item.k-error, .p-log .log-item.s-failed, .org-node, .us-basis, .us-partial, .cmd-card.bad, .tb-tile,
+.lbar, .reply-bar, .msg-quote, .p-log .log-item.k-error, .p-log .log-item.s-failed, .org-node, .us-basis, .us-partial, .cmd-card.bad, .tb-tile, .s-dirty,
 .search-row.on, .search-recent-item:hover, .search-recent-item:focus-visible, .search-ctx-line.here, .tw-line:hover, .tw-line:focus-visible,
-.u-crow:focus-visible { position: relative; }
+.u-crow:focus-visible, .p-settings .s-nav .seg-item.active, .s-find-item.on { position: relative; }
 .lbar::before, .reply-bar::before, .msg-quote::before, .p-log .log-item.k-error::before, .p-log .log-item.s-failed::before, .org-node::before,
-.us-basis::before, .us-partial::before, .cmd-card.bad::before, .tb-tile::before,
+.us-basis::before, .us-partial::before, .cmd-card.bad::before, .tb-tile::before, .s-dirty::before,
 /* #2478 item 7 (the user's fixed template): a selected, hovered or keyboard-focused row is the straight bar and a flat
    background at most — never a rounded fill, a curved inset edge or a rounded ring. */
 .search-row.on::before, .search-recent-item:hover::before, .search-recent-item:focus-visible::before, .search-ctx-line.here::before,
-.tw-line:hover::before, .tw-line:focus-visible::before, .u-crow:focus-visible::before {
+.tw-line:hover::before, .tw-line:focus-visible::before, .u-crow:focus-visible::before,
+.p-settings .s-nav .seg-item.active::before, .s-find-item.on::before {
   content: ""; position: absolute; left: var(--lbar-left, 0); top: var(--lbar-inset, var(--s-2)); bottom: var(--lbar-inset, var(--s-2)); width: 3px;
   background: var(--lbar-color, var(--accent)); pointer-events: none; }
+/* #2347: a Settings field edited and not saved yet — the shared straight bar (above), a light tint, and the 3px the bar
+   takes added to its padding (and taken back from its margin), so the field's text stays put. */
+.s-dirty { --lbar-color: var(--accent); --lbar-inset: var(--s-1); background: color-mix(in srgb, var(--accent) 7%, transparent);
+  padding-left: calc(var(--s-2) + 3px); margin-left: calc(-1 * (var(--s-2) + 3px)); border-radius: 0; align-self: start; }
 .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; }
@@ -229,6 +234,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 /* #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) */
+/* #2347: forms that write what an unsaved fleet.yaml edit writes — off, with the way to that edit above them. */
+.s-yaml-lock:disabled select { opacity: 0.6; }
+.s-yaml-lock-note { margin: 0 0 var(--s-3); }
 .s-web-ro { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--fs-sm); }
 .s-web-ro > div { display: contents; }
 .s-web-ro dt { color: var(--text-3); }
@@ -385,6 +393,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .dlg-wide { width: min(640px, calc(100vw - 32px)); }
 .dlg::backdrop { background: var(--scrim); }
 .dlg-box { display: flex; flex-direction: column; max-height: 85vh; }
+.dlg-box:focus { outline: none; }   /* the open dialog's first stop (ui-dialog.js): no ring; Tab moves on with one */
 .dlg-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-2) var(--s-5); }
 .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); }
@@ -440,6 +449,99 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .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; }
+/* #2347: the sections in two groups, "You" and "Fleet", each with its name; a column on the left on a wide screen. */
+.s-nav { align-items: center; column-gap: var(--s-3); }
+/* #2347, the fixed template (#2330): Settings' sections are square; the one shown is the shared straight bar and a flat
+   background (no rounded pill). `.seg` elsewhere (Fleet's tabs, the chat header) is not changed here. */
+.p-settings .s-nav .seg-item { border-radius: 0; }
+.p-settings .s-nav .seg-item.active { background: var(--surface-2); }
+.s-nav-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
+.s-nav-head { font-size: var(--fs-xs); color: var(--text-3, var(--text-2)); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--s-2); }
+.s-anchor { scroll-margin-top: var(--s-4); }
+/* #2347 §6: settings search — on top of the section nav; results grouped by section, the config key small; a setting
+   opened from it flashes for 2 s (a tint, no coloured edge). */
+/* One column (`.p-settings .seg` wraps, which in a column would start a second one beside it). */
+.p-settings > .s-nav { flex-direction: column; align-items: stretch; flex-wrap: nowrap; row-gap: var(--s-2); }
+.s-nav-groups { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1); }
+/* The search never makes the nav wider than its column or row (a flex item's min-content would: a long config key). */
+.s-find, .s-find-results, .s-find-group { min-width: 0; max-width: 100%; }
+.s-find .s-search { width: 100%; box-sizing: border-box; min-width: 0; }
+.s-find .s-search input { text-overflow: ellipsis; }
+.s-find-results { max-height: min(60vh, 420px); overflow-y: auto; margin-top: var(--s-1);
+  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-1) 0; }
+.s-find-head { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); color: var(--text-2); }
+.s-find-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--s-2); padding: var(--s-2) var(--s-3); cursor: pointer; min-width: 0; }
+.s-find-label { min-width: 0; overflow-wrap: anywhere; }
+.s-find-item.on { background: var(--surface-2); }
+.s-find-item mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; }
+.s-find-key { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.s-find-none, .s-find-foot { padding: var(--s-2) var(--s-3); margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
+.s-find-foot { border-top: 1px solid var(--border); }
+/* #2382 review: "Fix N field(s) in <section> to save" goes there. */
+.s-pending button.s-fix { border: 0; background: none; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }
+@keyframes s-flash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
+.s-flash { animation: s-flash 2s ease-out; }
+@media (prefers-reduced-motion: reduce) { .s-flash { animation: none; background: color-mix(in srgb, var(--accent) 12%, transparent); } }
+/* #2347: on a phone the sections keep their names (bare icons could not be told apart), on one row that scrolls
+   sideways, each group after its name. */
+@media (max-width: 479px) {
+  .p-settings > .s-nav .s-nav-groups { flex-wrap: nowrap; overflow-x: auto; }
+  .p-settings > .s-nav .s-nav-group { flex-wrap: nowrap; flex-shrink: 0; }
+}
+/* #2347 §7: on a phone (the app's narrow layout) Settings itself (/settings) is the list of sections — search on top,
+   the two groups as full-width rows — and a section opens on its own with "‹ Settings" back to the list. The strip
+   that scrolled sideways (and cut its ends) is gone there. Wider screens keep the list beside the section. */
+.p-settings .s-back { display: none; }
+@media (max-width: 899px) {
+  .p-settings[data-view="index"] > .panel-body { display: none; }
+  .p-settings[data-view="section"] > .s-nav { display: none; }
+  .p-settings > .panel-body .s-back { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin: 0 0 var(--s-2);
+    color: var(--accent); font-size: var(--fs-sm); text-decoration: none; }
+  .p-settings .s-back .s-back-here { margin-left: auto; color: var(--text); font-weight: var(--fw-semibold); }
+  .p-settings[data-view="index"] > .s-nav { flex-direction: column; align-items: stretch; padding: 0 var(--s-4) var(--s-4); }
+  .p-settings[data-view="index"] > .s-nav .s-nav-groups { flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow: visible; gap: var(--s-4); }
+  .p-settings[data-view="index"] > .s-nav .s-nav-group { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
+  .p-settings[data-view="index"] > .s-nav .s-nav-head { padding: var(--s-2) var(--s-3) var(--s-1); }
+  .p-settings[data-view="index"] > .s-nav .seg-item { min-height: var(--tap); padding: 0 var(--s-3); font-size: var(--fs-md); white-space: normal;
+    border-bottom: 1px solid var(--border); }
+  /* In the list no section is open: none is marked as the one shown — every row alike. */
+  .p-settings[data-view="index"] > .s-nav .seg-item, .p-settings[data-view="index"] > .s-nav .seg-item.active { color: var(--text); }
+  .p-settings[data-view="index"] > .s-nav .seg-item.active { background: none; font-weight: inherit; }
+  /* The list fills the screen, so unsaved changes' bar stays at the bottom (above the tabs), not right under a short list;
+     on a short screen (a small phone, one turned) it takes the room there is and scrolls (#2501 review). */
+  .p-settings[data-view="index"] > .s-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+  /* The bar on a phone: the app's 16 px gutter, and Discard / Save a full tap target. */
+  .p-settings > .s-pending { padding-left: var(--s-4); padding-right: var(--s-4); }
+  .p-settings > .s-pending .btn { min-height: var(--tap); }
+  /* Settings' dialogs are full-screen sheets (§7): an agent's or a connection's fields get the whole screen, the title on
+     top and the actions at the bottom, inside it. The app's own questions (ask()) stay bottom sheets. */
+  .p-settings .dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
+  .p-settings .dlg-box { height: 100%; max-height: 100dvh; }
+  .p-settings .dlg-head { padding-top: max(var(--s-3), env(safe-area-inset-top)); border-bottom: 1px solid var(--border); }
+  .p-settings .dlg-body { flex: 1; padding-top: var(--s-4); }
+  .p-settings .dlg-actions { border-top: 1px solid var(--border); padding-top: var(--s-3); }
+  /* Effect tags wrap under the label (§7): whole, on their own line, where the label's text starts — beside a long label
+     on a narrow screen they were squeezed or broken mid-tag. */
+  .p-settings .field > label:not(.check) .impact, .p-settings .field > legend .impact { display: block; margin: 2px 0 0; white-space: nowrap; }
+  /* A checkbox row: the box, the text (and its "default" mark), then the tag on a line of its own under the text. */
+  .p-settings .check:has(> .impact) { flex-wrap: wrap; row-gap: 2px; }
+  .p-settings .check:has(> .impact) > input { flex: none; width: 16px; height: 16px; margin: 0; }
+  .p-settings .check > .impact { flex: 1 0 calc(100% - 16px - var(--s-2)); margin-left: calc(16px + var(--s-2)); white-space: nowrap; }
+  /* A tag inside a note (a dialog's status-emoji line) goes to the next line whole, never broken mid-tag. */
+  .p-settings .note > .impact { display: inline-block; white-space: nowrap; }
+  .p-settings[data-view="index"] > .s-nav .seg-item.active::before { display: none; }
+}
+@media (min-width: 1100px) {
+  .p-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
+  .p-settings > :not(.s-nav):not(.panel-body) { grid-column: 1 / -1; }
+  .p-settings > .s-nav { grid-column: 1; grid-row: 2; margin: 0; max-width: none; min-width: 0; padding: var(--s-2) var(--s-2) var(--s-4) var(--s-4); overflow-x: hidden; overflow-y: auto; }
+  .p-settings > .s-nav .s-nav-groups { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--s-3); }
+  .p-settings > .s-nav .s-nav-group { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
+  .p-settings > .s-nav .s-nav-head { padding: var(--s-1) var(--s-3); }
+  .p-settings > .s-nav .seg-item { border-radius: 0; }
+  .p-settings > .panel-body { grid-column: 2; grid-row: 2; }
+  .p-settings > .s-pending { grid-column: 1 / -1; grid-row: 3; }
+}
 .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); }
@@ -471,6 +573,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    the message's overflow-wrap: anywhere that is one character wide (the #1672 status line's time, one glyph per line). */
 .msg .time { font-family: var(--font-mono); white-space: nowrap; flex: none; }
 .msg.user { align-self: flex-end; max-width: min(80%, 620px); }
+/* Full width (the header's ⋯ menu, this browser's choice): the thread and the composer take the panel, less their own
+   padding, for wide tables and code; a person's bubble keeps its cap (above). A phone's column is the screen already. */
+@media (min-width: 900px) { .p-chat[data-width="full"] .thread, .p-chat[data-width="full"] .dock-col { max-width: none; } }
 .msg.user .meta { justify-content: flex-end; }
 /* #1773: the bubble hugs its text. The message is as wide as its widest child — usually the meta row (sender, a time
    such as 「昨天 下午03:58」, ticks) — and a block body would stretch to it; fit-content keeps a short message short, on
@@ -821,15 +926,47 @@ img.amb-p { object-fit: contain; }
   padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
   box-shadow: var(--shadow-2); }
 .webauth-tip[hidden] { display: none; }
-/* #1920 phase 3: Settings → Web → Guests. */
+/* #1920 phase 3 / #2348: Settings → Access & security → Guests. The fixed template (#2330): flat rows split by a rule,
+   no rounded box or fill; an edited row is .s-dirty (the shared straight bar + tint, square). A state is coloured text. */
 .s-guests .guest-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px var(--s-3); max-height: 220px; overflow: auto;
-  padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
+  padding: var(--s-1) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
 .s-guests .guest-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.s-guests .guest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
-.s-guests .guest-row { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
-.s-guests .guest-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
+/* #2667: the ClassicBot rooms follow the fleet's instances under their own heading, across the grid. */
+.s-guests .guest-names-group { grid-column: 1 / -1; margin-top: var(--s-2); }
+.s-guests .guest-list, .s-guests .g-pick { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
+.s-guests .guest-row, .s-guests .g-cand { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); min-width: 0; }
+.s-guests .guest-row.s-dirty { border-radius: 0; margin-left: 0; align-self: stretch; padding-left: calc(var(--s-2) + 3px); padding-right: var(--s-2); }
+.s-guests .guest-row.g-removed .g-id strong { text-decoration: line-through; color: var(--text-3); }
+.s-guests .g-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
+.s-guests .g-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
+  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
+.s-guests .g-id { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
+.s-guests .g-id .note { white-space: normal; }
+.s-guests .g-state { flex: 0 1 auto; max-width: 100%; margin-left: auto; font-size: var(--fs-sm); color: var(--text-3); text-align: right; }
+.s-guests .g-state.on { color: var(--ok); }
+.s-guests .g-state.sent { color: var(--accent); }
+.s-guests .g-state.warn { color: var(--danger); text-align: left; flex-basis: 100%; margin-left: calc(28px + var(--s-2)); }
+.s-guests .g-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0 0 calc(28px + var(--s-2)); }
+.s-guests .g-chip { padding: 1px var(--s-2); border: 1px solid color-mix(in srgb, var(--text-3) 55%, transparent); border-radius: 0; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
+.s-guests .g-edit { margin: var(--s-2) 0 0 calc(28px + var(--s-2)); }
+.s-guests .guest-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0 0 calc(28px + var(--s-2)); }
+.s-guests .g-error { color: var(--danger); margin-left: calc(28px + var(--s-2)); }
+.s-guests .g-search { width: 100%; max-width: 360px; margin: var(--s-1) 0 var(--s-2); }
+.s-guests .g-cand { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); }
+.s-guests .g-legacy { margin: var(--s-2) 0; }
+.s-guests .g-audit { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
+.s-guests .g-audit-row { padding: var(--s-1) 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
+.s-guests .g-audit-row .g-when { color: var(--text-3); }
+.s-guests .g-add { color: var(--ok); }
+.s-guests .g-del { color: var(--danger); }
+.s-guests .g-when, .s-guests .g-wrote { white-space: nowrap; }
 .s-guests .guest-narrow-edit { margin-top: var(--s-2); }
 .s-guests .guest-away { color: var(--text-3); }
+@media (max-width: 560px) {
+  .s-guests .g-state { flex-basis: 100%; margin-left: calc(28px + var(--s-2)); text-align: left; }
+  .s-guests .g-cand { grid-template-columns: 28px minmax(0, 1fr); }
+  .s-guests .g-cand > .btn { grid-column: 2; justify-self: start; }
+}
 /* #1939 S2b: this browser's authorization, under the composer and in the session menu (one compact line). */
 .webauth-chip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: var(--s-1) 0 0; font-size: var(--fs-xs); }
 .webauth-chip .webauth-ok { color: var(--ok); }
@@ -1213,6 +1350,18 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 @media (prefers-reduced-motion: no-preference) { .u-crow { transition: background-color 0.15s var(--ease); } }
 .u-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
 @media (max-width: 1199px) { .u-rail { display: none; } }
+/* #2585: the docked side panel (side-panel.js), in the usage rail's place beside the page — a non-modal dialog, so the
+   shared dialog's head, body and actions, laid out as a full-height column. Below the rail's width it is never drawn
+   (the editor is the centred Dialog there). */
+.dlg.side-panel { position: static; inset: auto; margin: 0; width: 400px; max-width: 400px; height: auto; max-height: none; flex-shrink: 0;
+  display: flex; flex-direction: column; min-height: 0; border-radius: 0; box-shadow: none; border-left: 1px solid var(--border); background: var(--bg); color: var(--text); }
+.side-panel .dlg-box { flex: 1; min-height: 0; max-height: none; }
+.side-panel .dlg-head { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); }
+.side-panel .dlg-body { flex: 1; min-height: 0; padding-top: var(--s-4); }
+.side-panel .dlg-actions { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); }
+@media (max-width: 1199px) { .dlg.side-panel { display: none; } }
+/* A toast (Offices saved.) beside a docked panel, not over its Cancel and Save. */
+@media (min-width: 1200px) { .shell:has(> .side-panel) .toasts { right: calc(400px + var(--s-6)); } }
 @media (max-width: 899px) {
   .hide-narrow { display: none; }
   .v-id { padding-left: var(--s-3); padding-right: var(--s-3); }
@@ -1224,7 +1373,7 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .s-toolbar { display: flex; gap: var(--s-2); margin: var(--s-2) 0; }
 .s-search { flex: 1; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); border-radius: var(--r-sm); background: var(--surface); color: var(--text-3); }
 .s-search:focus-within { box-shadow: 0 0 0 2px var(--focus); }
-.s-search input { flex: 1; min-width: 0; height: 36px; border: 0; background: transparent; color: var(--text); outline: none; font-size: var(--fs-sm); }
+.s-search input { flex: 1; min-width: 0; height: 36px; border: 0; background: transparent; color: var(--text); outline: none; font-size: var(--fs-sm); text-overflow: ellipsis; }
 .s-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s-4); }
 .s-group { margin-bottom: var(--s-2); }
 .s-group-head { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-2); border: 0; background: transparent; color: var(--text-3);
@@ -1259,6 +1408,10 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
 .override { display: flex; flex-direction: column; gap: var(--s-1); }
 .inherit-row { font-size: var(--fs-xs); color: var(--text-3); }
+/* #2347 §10: the value in effect (an empty field's, an inherited one's) in plain text; "default" marks what nobody set. */
+.s-effect, .s-inherited { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
+.s-inherited a { color: var(--accent); }
+.tag.s-default { font-weight: var(--fw-regular); }
 .impact { font-size: 11px; font-weight: var(--fw-regular); color: var(--text-3); margin-left: var(--s-1); }
 .check .impact { margin-left: auto; }
 .feedback { font-size: var(--fs-xs); color: var(--text-2); }
@@ -1283,6 +1436,12 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .btn.on { background: var(--surface-2); color: var(--text); font-weight: var(--fw-semibold); }
 .card h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
 .pill.ver { text-transform: none; letter-spacing: 0; }
+/* #2347 §7: Settings' title stays whole on a narrow phone (at 320 px it was cut to "S…"): the version beside it takes the
+   room that is left — shortened, or not shown when too little is. */
+.p-settings .panel-title h1 { flex: none; }
+.p-settings .panel-sub { flex: 1 1 0; min-width: 0; container: settings-ver / inline-size; }
+.p-settings .panel-sub .pill.ver { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
+@container settings-ver (max-width: 56px) { .p-settings .panel-sub .pill.ver { display: none; } }
 .s-key { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) 0; border-top: 1px solid var(--border); }
 .s-key:first-of-type { border-top: 0; }
 .s-key-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
@@ -1316,6 +1475,7 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .s-pending { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-5);
   background: var(--bg); border-top: 1px solid var(--border); box-shadow: var(--shadow-2); }
 .s-pending .grow { flex: 1; }
+.s-pending-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
 .s-op { border: 1px solid var(--border); }
 .s-op.failed { border-color: var(--danger-line); }
 .s-op-head { display: flex; align-items: center; gap: var(--s-2); }
@@ -1357,6 +1517,10 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .op-line { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
 .op-line.ok { color: var(--ok); }
 .op-line.bad { color: var(--danger); }
+/* #2347: saved changes waiting for an AgEnD restart — one line, the shared straight bar on its left. */
+.restart-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-2); color: var(--text);
+  --lbar-color: var(--warn); }
+.restart-line .restart-keys { font-family: var(--font-mono); }
 /* #2233: the backend sign-in dialog and Settings' list */
 .signin-field { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) 0; }
 .signin-label { color: var(--text-2); font-size: var(--fs-xs); min-width: 6em; }
@@ -1379,6 +1543,7 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
   .shell:has(.s-pending) .pending-stack { bottom: calc(64px + 64px + var(--s-3)); }
   .shell:has(.s-pending) .toasts { bottom: auto; }
   .s-pending { padding: var(--s-2) var(--s-3); }
+  .s-pending-actions { flex-basis: 100%; justify-content: flex-end; }
 }
 
 /* ── Needs you (#1408 step 4 = #1386 part b) ── */
@@ -1569,8 +1734,18 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .oc-mini { display: none; }
 }
 /* ── Fleet → Org chart → Office (fleet-office.js): the fleet as a pixel office on one <canvas>. Its size is set through
-   the CSSOM (never a style attribute, #1300); the stage scrolls, the page around it too. ── */
-.oo { display: flex; flex-direction: column; gap: var(--s-2); }
+   the CSSOM (never a style attribute, #1300). #2540: it fills the Fleet panel — no frame or margins around the canvas,
+   the bars above it keep the column's padding; the stage pans and zooms (touch gestures are its own, touch-action:
+   none on it only) and the page around it no longer scrolls sideways. The column's `margin: 0 auto` must go too: in
+   the panel's flex column an auto margin shrinks the column to its content (the bars: the canvas is absolutely placed
+   and adds no width) and centres it — the Office was as wide as its toolbar, not the panel. ── */
+.p-fleet .panel-body:has(> .col > .oc-office) { display: flex; flex-direction: column; }
+.p-fleet .panel-body > .col:has(> .oc-office) { flex: 1 0 auto; display: flex; flex-direction: column; max-width: none; padding: 0; margin: 0; width: 100%; align-self: stretch; }
+.oc-office { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; width: 100%; }
+.oc-office > .oc-bar { margin: 0; padding: var(--s-3) var(--s-5) var(--s-2); }
+.oc-office > .oc-legend { margin: 0 var(--s-5) var(--s-2); }
+.oo { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; width: 100%; }
+.oo > :not(.oo-stage):not(dialog) { margin-left: var(--s-5); margin-right: var(--s-5); }   /* not the editors' dialogs: they centre themselves (#2585) */
 .oo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
 .oo-pick { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
 .oo-pick .tb-select { max-width: 200px; }
@@ -1586,6 +1761,13 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oe-label { font-size: var(--fs-xs); color: var(--text-2); }
 .oe-name { min-width: 0; width: 16em; max-width: 100%; }
 .oe-remove { margin-left: auto; }
+/* #2513: the skin packs the host keeps — a row each with its delete, then the upload buttons (a hidden file input each). */
+.oe-packs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
+.oe-packs > legend, .oe-packs > .note { flex-basis: 100%; }
+.oe-pack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex-basis: 100%; }
+.oe-pack { display: flex; align-items: center; gap: var(--s-2); overflow-wrap: anywhere; }
+.oe-pack-remove { margin-left: auto; }
+.oe-upload { position: relative; cursor: pointer; }
 .oe-members { display: flex; flex-wrap: wrap; gap: var(--s-3); }
 .oe-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 12em; max-height: 240px; overflow-y: auto; }
 .oe-group legend { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); padding: 0; margin-bottom: 4px; }
@@ -1596,24 +1778,103 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oo-people-list { list-style: none; margin: 0; padding: 0; }
 .oo-people-list label { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: var(--fs-xs); color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
 .oo-note { font-size: var(--fs-xs); }
-.oo-stage { position: relative; height: clamp(420px, calc(100dvh - 280px), 960px); overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
-.oo-canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
+.oo-stage { position: relative; flex: 1 1 auto; min-height: 340px; overflow: hidden; background: var(--bg); touch-action: none; user-select: none; -webkit-user-select: none; }
+/* #2554: clip, not a scroll container — nothing past the edge (a tile's label) can scroll the stage and its controls. */
+.oo-stage { overflow: clip; }
+.oo-canvas { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; cursor: grab; touch-action: none; }
+.oo-canvas:active { cursor: grabbing; }
+.oo-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
 .oo-canvas.hot { cursor: pointer; }
+/* The canvas controls, as the org chart canvas's (.oc-zoom, .oc-mini): over the stage's corners. */
+.oo-zoom { z-index: 6; }
+.oo-zoom .icon-btn { color: var(--text); }
+/* The overview's box (left, top, width, height) is set by the page, inside the stage and scaled to it (miniBox). */
+.oo-mini { z-index: 6; right: auto; bottom: auto; overflow: hidden; }
+.oo-zoom-pct { display: block; padding: 3px 0; font-size: 11px; line-height: 14px; text-align: center; color: var(--text-2); font-variant-numeric: tabular-nums;
+  border-bottom: 1px solid var(--border); user-select: none; }
+.oo-zoom .oo-fill { font-size: 11px; font-weight: var(--fw-semibold); }
+.oo-zoom .oo-fill.on { background: var(--accent-dim); color: var(--text); }
+.oo-stage.editing .oo-mini { display: none; }
+.oo-mini-scene { fill: var(--bg); }
+.oo-mini-room { fill: var(--surface); stroke: var(--border-strong); stroke-width: 6; }
+.oo-mini-dot { fill: var(--text-3); }
+.oo-mini-dot.st-working { fill: var(--ok); }
+.oo-mini-dot.st-needs, .oo-mini-dot.st-stuck { fill: var(--warn); }
+.oo-mini-dot.st-crashed { fill: var(--danger); }
+.oo-mini-dot.match { fill: var(--focus); }
 .oo-tip { position: absolute; left: 0; top: 0; z-index: 5; max-width: 240px; pointer-events: none; padding: 6px 10px; font-size: var(--fs-xs); line-height: 1.4;
   color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow-wrap: anywhere; }
+/* #2554: All offices — each tile's label (office name and head count) just above the tile, placed by the page (left, top,
+   max-width through the CSSOM); a button that opens the office, the lobby's a plain chip. */
+.oo-tile-label { position: absolute; left: 0; top: 0; z-index: 3; transform: translateY(calc(-100% - 4px)); max-width: 240px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; padding: 2px 8px; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 18px; color: var(--text);
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
+button.oo-tile-label { cursor: pointer; }
+button.oo-tile-label:hover { border-color: var(--accent); }
+button.oo-tile-label:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.oo-tile-label.lobby { color: var(--text-2); }
+.oo-lobby-tile { font-size: var(--fs-xs); color: var(--text-2); }
 /* The desks as a list: for a screen reader, and shown (over the stage's corner) while the keyboard is in it. */
 .oo-desks { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; list-style: none; }
-.oo-desks:focus-within { position: sticky; left: var(--s-2); bottom: var(--s-2); width: auto; height: auto; max-height: 40%; margin: 0; padding: var(--s-1); clip: auto; overflow-y: auto;
+.oo-desks:focus-within { position: absolute; z-index: 7; left: var(--s-2); bottom: var(--s-2); width: auto; height: auto; max-height: 40%; margin: 0; padding: var(--s-1); clip: auto; overflow-y: auto;
   display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 2 * var(--s-2)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); white-space: normal; }
 .oo-desk { font-size: var(--fs-xs); padding: 2px 6px; border-radius: var(--r-sm); background: var(--bg); color: var(--text); border: 1px solid var(--border); }
 .oo-desk:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 -2px 0 var(--focus); }
+/* #2513: Edit layout (fleet-office-layout.js) — an SVG over the canvas (placed and sized through the CSSOM), its 1280×720
+   grid, the areas, corridors and a handle for each seat, item, the door and waypoint; its bar sticks to the stage's foot. */
+.oo-hide-asleep { font-size: var(--fs-xs); color: var(--text-2); }
+/* #2540: fullscreen. The container is the page's fullscreen element (the Fullscreen API: the top layer), or, where the page
+   cannot take one (an iPhone) or the browser refused, "immersive": it covers the window. Only the stage shows (the bars,
+   notes and Edit offices are left out), the safe areas kept clear; floating over it the zoom controls, the overview
+   (not on a phone) and a compact office switcher. Immersive lifts the Fleet panel's band (stock content, level 1) over
+   the header (2), the phone's nav (35) and the drawer and Needs-you stack (40); menus (60) and toasts (100) stay above. */
+.oo.fs { gap: 0; margin: 0; background: var(--bg); box-sizing: border-box;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
+.oo.fs > :not(.oo-stage) { display: none; }
+.oo.fs > .oo-stage { flex: 1 1 auto; min-height: 0; }
+.oo.fs.immersive { position: fixed; inset: 0; z-index: 50; width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; }
+html.oo-immersive, html.oo-immersive body { overflow: hidden; }
+html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
+.oo-fs-bar { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 6; display: flex; align-items: center; gap: var(--s-2); }
+.oo-fs-bar .tb-select { max-width: 180px; }
+.ol-overlay { position: absolute; left: 0; top: 0; z-index: 4; }
+.ol-svg { display: block; overflow: visible; touch-action: none; }
+.ol-grid { stroke: var(--text-3); stroke-opacity: 0.25; stroke-width: 1; }
+.ol-label, .ol-coord { fill: var(--text); font-size: 12px; font-family: var(--font-mono, monospace); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
+.ol-area { fill: none; stroke: var(--text-2); stroke-dasharray: 6 4; stroke-width: 1.5; }
+.ol-edge { stroke: var(--focus); stroke-width: 3; stroke-opacity: 0.7; }
+.ol-handle { cursor: grab; outline: none; }
+.ol-handle > circle, .ol-handle > rect { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
+.ol-seat > circle { fill: var(--ok); }
+.ol-furniture > rect { fill: var(--warn); }
+.ol-door > rect { fill: var(--danger); }
+/* #2665: an item's night place — a moon on a faint disc, a thin dashed line to its day place. */
+.ol-night > circle { fill: var(--surface); fill-opacity: 0.85; }
+.ol-night > .ol-moon { fill: var(--warn); stroke: none; pointer-events: none; }
+.ol-night-line { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-opacity: 0.8; pointer-events: none; }
+.ol-waypoint > circle { fill: var(--focus); }
+.ol-handle.on > circle, .ol-handle.on > rect, .ol-handle:focus-visible > circle, .ol-handle:focus-visible > rect { stroke: var(--focus); stroke-width: 4; }
+.ol-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2);
+  background: var(--surface); border-top: 1px solid var(--border); }
+.ol-actions { display: inline-flex; gap: var(--s-2); margin-left: auto; }
+/* #2585: Edit layout's controls docked in the side panel (a wide desk): one column, the waypoint's own row wrapping. */
+.ol-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
+.ol-side .ol-corridors { display: flex; flex-wrap: wrap; gap: var(--s-2); }
+.ol-corridors { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.ol-msg { flex-basis: 100%; margin: 0; }
 @media (max-width: 640px) {
-  .oo-stage { height: calc(100dvh - 300px); min-height: 340px; }
+  /* A phone: the bars at the column's narrower padding; the stage at least most of a screen; no overview (as the canvas). */
+  .oc-office > .oc-bar { padding: var(--s-2) var(--s-3); }
+  .oc-office > .oc-legend { margin: 0 var(--s-3) var(--s-2); }
+  .oo > :not(.oo-stage):not(dialog) { margin-left: var(--s-3); margin-right: var(--s-3); }
+  .oo-stage { min-height: max(300px, calc(100dvh - 300px)); }
   .oo-pick .tb-select { max-width: 150px; }
+  .oo-mini { display: none; }
+  .oo-zoom .icon-btn { width: 40px; height: 40px; }
 }
 /* A phone: Fleet's five tabs fit when only the open one shows its label (the others keep theirs for screen readers). */
 @media (max-width: 479px) {
-  .p-fleet .seg-item:not(.active) > span, .p-settings .seg-item:not(.active) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .p-fleet .seg-item:not(.active) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 }
 
 /* ── Cache analysis (#1468): Fleet → Cache. Bars are SVG attributes; nothing here is an inline style. ── */
@@ -1681,6 +1942,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .us-bar { display: block; width: 100%; height: 6px; margin: 4px 0; }
 .us-bar-bg { fill: var(--surface-2); } .us-bar-fg { fill: var(--us-0); }
 .us-meta { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
+.us-est { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-3); }
 .us-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
 .us-trend, .us-heat { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
 .us-trend h3, .us-heat h3, .us-rest h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
@@ -2248,3 +2510,31 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .msg.user .msg-reactions { justify-content: flex-end; }
 .msg-reactions .reaction { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px;
   border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); font-family: var(--font-emoji); font-size: 15px; line-height: 1; }
+
+/* #2636: an Office share link's page (office-share-page.js) — the Office alone, filling the window under a one-line head. */
+.share-page { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); color: var(--text); }
+.share-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
+.share-head .share-note { margin-left: auto; }
+.share-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: var(--s-2); }
+.share-loading, .share-page > .note { padding: var(--s-4); }
+.share-ended { align-items: center; justify-content: center; padding: var(--s-6); text-align: center; }
+@media (max-width: 640px) { .share-head .share-note { margin-left: 0; flex-basis: 100%; } }
+
+/* #2636: Office share links — the Share… dialog and the open links (office-share-dialog.js; Settings → Access & security). */
+.os { display: flex; flex-direction: column; gap: var(--s-3); }
+.os > p { margin: 0; }
+.os-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: end; }
+.os-form .check, .os-form .note { grid-column: 1 / -1; margin: 0; }
+.os-made { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.os-url { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
+  background: var(--bg); color: var(--text); font-size: var(--fs-sm); outline: none; }
+.os-url:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-dim); }
+.os-made .note { flex-basis: 100%; margin: 0; }
+.os-head { margin: var(--s-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
+.os-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.os-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
+.os-what { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
+.os-all { margin-top: var(--s-2); }
+.os-none { margin: 0; }
+.os-form .os-err { grid-column: 1 / -1; margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--danger); border-radius: var(--r-sm); }
+@media (max-width: 480px) { .os-form { grid-template-columns: 1fr; } }

package/dist/ui/shared/app.js

@@ -87,6 +87,9 @@ if (mode === "full") {
   if (!guest) {
     panels.set("fleet", { load: () => loadFleet().then((m) => m.FleetPanel) });
     panels.set("settings", { load: () => loadSettings().then((m) => m.SettingsPanel) });
+    // #2347: the restart banner's Restart now, in any panel — the Settings runner (behind the session) does it.
+    const loadApply = retryable((a) => import(retryUrl("/ui/js/settings-apply.js", a)));
+    appStore.set({ restartRunner: (jobId) => loadApply().then((m) => m.restartPendingChanges(jobId)) });
     panels.set("needs", { load: () => loadNeeds().then((m) => m.NeedsPanel) });
     // #1523 N2: one instance's Details (/ui/fleet/agent/<name>).
     panels.set("details", { load: () => loadDetails().then((m) => m.DetailsPanel) });

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

@@ -212,6 +212,6 @@ export function stockEffectTrust(host, { frameRoot = null, ownerCss = "unknown"
     if (doc.fullscreenElement || doc.pictureInPictureElement) barrier = true;
     // Focus alone does not change protected paint bounds. Composer/controls stay clipped; editable focus
     // separately suppresses pointer delivery in the registry, and keyboard events never enter a Worker.
-    return { ok: true, rects, front: !barrier, reason: barrier ? "stock_overlay" : "stock", agentFront: !barrier && ownerCss === "off", agentReason: barrier ? "stock_overlay" : ownerCss === "off" ? "stock" : "owner_css", settingsHref: "/settings/appearance" };
+    return { ok: true, rects, front: !barrier, reason: barrier ? "stock_overlay" : "stock", agentFront: !barrier && ownerCss === "off", agentReason: barrier ? "stock_overlay" : ownerCss === "off" ? "stock" : "owner_css", settingsHref: "/settings/look" };
   } catch { return fail("stock_trust_unknown"); }
 }

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

@@ -4,7 +4,7 @@
 // paints the sidebar row through the CSSOM (no style attribute, #1300), and holds the Color dialog.
 //   colour: a person's pick > the agent's (themes shown) > its own bot's role colour > automatic (a few soft colours)
 //   places: a person's choice > the agent's (themes shown) > this host's default (color.show) > all three (#2056)
-//   Settings → Web appearance can turn colours off for the host (color.off): nothing is painted, every pick is kept.
+//   Settings → Look can turn colours off for the host (color.off): nothing is painted, every pick is kept.
 import { html, useEffect, useState } from "./app-html.js";
 import { createStore, useStore } from "./app-store.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
@@ -108,7 +108,7 @@ export const colorPrefsStore = createStore({ n: 0 });
 const bump = () => colorPrefsStore.set((s) => ({ n: s.n + 1 }));
 onPrefsChanged((changed) => { if (changed.has("color.show") || changed.has("color.off")) bump(); });
 const readLocal = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
-/** Where colours show by default on this host (Settings → Web appearance). */
+/** Where colours show by default on this host (Settings → Look). */
 export function defaultPlaces() {
   const f = prefInForce("color.show");
   let v = f ? f.value : undefined;
@@ -251,7 +251,7 @@ register("color", {
     src_person: "Shown now: picked by a person.", src_agent: "Shown now: the agent's own colour.", src_role: "Shown now: the colour of its bot's Discord role.",
     src_auto: "Shown now: an automatic colour.", save: "Save", cancel: "Cancel", reset: "Reset",
     saved: "Colour saved for {0}", failed: "Couldn't save the colour: {0}",
-    offNote: "Colours are turned off on this host (Settings → Web appearance). What you pick here is kept for when they're on.",
+    offNote: "Colours are turned off on this host (Settings → Look). What you pick here is kept for when they're on.",
     p_red: "Red", p_orange: "Orange", p_amber: "Amber", p_lime: "Lime", p_green: "Green", p_teal: "Teal", p_cyan: "Cyan", p_blue: "Blue",
     p_indigo: "Indigo", p_violet: "Violet", p_pink: "Pink", p_slate: "Slate",
   },
@@ -261,7 +261,7 @@ register("color", {
     src_person: "目前顯示：有人挑選的顏色。", src_agent: "目前顯示：agent 自己的顏色。", src_role: "目前顯示：它的 bot 在 Discord 身分組的顏色。",
     src_auto: "目前顯示：自動配色。", save: "儲存", cancel: "取消", reset: "重設",
     saved: "已儲存 {0} 的顏色", failed: "無法儲存顏色：{0}",
-    offNote: "這台主機已關閉顏色（設定 → 網頁外觀）。在這裡挑的顏色會保留，重新開啟後就會出現。",
+    offNote: "這台主機已關閉顏色（設定 → 外觀）。在這裡挑的顏色會保留，重新開啟後就會出現。",
     p_red: "紅", p_orange: "橙", p_amber: "琥珀", p_lime: "萊姆", p_green: "綠", p_teal: "青綠", p_cyan: "青", p_blue: "藍",
     p_indigo: "靛", p_violet: "紫", p_pink: "粉紅", p_slate: "石板灰",
   },