@songsid/agend 2.3.1 → 2.3.2-beta.2

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); }
@@ -821,15 +923,45 @@ 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); }
+.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); }
@@ -1224,7 +1356,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 +1391,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 +1419,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 +1458,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 +1500,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 +1526,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 +1717,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) { margin-left: var(--s-5); margin-right: var(--s-5); }
 .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 +1744,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 +1761,96 @@ 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); }
+.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; }
+.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) { 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. ── */

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: "石板灰",
   },

package/dist/ui/shared/signin.js

@@ -15,7 +15,7 @@
       label: "One-time code", submit: "Sign in", working: "Signing in…",
       hint: "No code? Send /web in General, then press a sign-in button to get one.",
       nobot: "No chat bot?", nobot_body: "Ask the operator to run agend web --code on the AgEnD computer.",
-      safe: "Page looks wrong after signing in?", safe_body: "Your custom CSS may be hiding something. Add ?safe=1 to the end of the address to load the page without it, then fix it or turn it off in Settings → Web appearance.",
+      safe: "Page looks wrong after signing in?", safe_body: "Your custom CSS may be hiding something. Add ?safe=1 to the end of the address to load the page without it, then fix it or turn it off in Settings → Look.",
       refused: "The code is invalid or no longer works. Send /web in General, then press a sign-in button for a new code.",
       unconfirmed: "Sign-in could not be confirmed. Get a new code and try again; if it keeps failing, contact the operator.",
       paused: "Too many wrong codes — sign-in is paused for a few minutes.",
@@ -29,7 +29,7 @@
       label: "一次性登入碼", submit: "登入", working: "登入中…",
       hint: "沒收到？在 General 傳 /web，再按登入按鈕取碼。",
       nobot: "沒有聊天 bot？", nobot_body: "請管理員在 AgEnD 電腦執行 agend web --code。",
-      safe: "登入後畫面不對勁？", safe_body: "可能是你的自訂 CSS 把東西藏起來了。在網址最後加上 ?safe=1，就會不套用它地載入；再到「設定 → 網頁外觀」修正或關閉。",
+      safe: "登入後畫面不對勁？", safe_body: "可能是你的自訂 CSS 把東西藏起來了。在網址最後加上 ?safe=1，就會不套用它地載入；再到「設定 → 外觀」修正或關閉。",
       refused: "登入碼無效或已失效。請在 General 傳 /web，再按登入按鈕取新碼。",
       unconfirmed: "登入暫時無法確認。請重新取碼再試；若仍失敗，請聯絡管理員。",
       paused: "錯誤次數過多，登入暫停幾分鐘。",

package/dist/ui/shared/ui-dialog.js

@@ -19,6 +19,11 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     const d = ref.current;
     opener.current = typeof document !== "undefined" ? document.activeElement : null;
     if (d && typeof d.showModal === "function" && !d.open) d.showModal();
+    // The browser's own first stop is the × (WebKit paints its focus ring at once): the dialog's box takes that focus
+    // instead, so opening shows no ring; Tab then reaches the × and every field with the keyboard's ring. A field a
+    // dialog focuses itself (autofocus) keeps it.
+    const x = d && d.querySelector ? d.querySelector(".dlg-x") : null, box = d && d.querySelector ? d.querySelector(".dlg-box") : null;
+    if (box && x && typeof document !== "undefined" && document.activeElement === x && typeof box.focus === "function") box.focus({ preventScroll: true });
     return () => {
       if (d && d.open && typeof d.close === "function") d.close();
       const back = opener.current;
@@ -37,7 +42,7 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
   }, [onClose]);
   return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}${drawer ? " dlg-drawer" : ""}`} aria-label=${label || title}>
-    <div class="dlg-box">
+    <div class="dlg-box" tabindex="-1">
       <div class="dlg-head"><h2 class="dlg-title">${title}</h2>${tools ? html`<span class="dlg-tools">${tools}</span>` : null}
         <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${() => { if (!busyRef.current) onClose(); }}><${Icon} name="close" /></button></div>
       <div class="dlg-body">${children}</div>

package/dist/ui/shared/ui-icons.js

@@ -9,6 +9,8 @@ const P = {
   plus: () => html`<path d="M12 5v14M5 12h14"/>`,
   minus: () => html`<path d="M5 12h14"/>`,                                        // #2333: the lightbox's zoom out
   fitwidth: () => html`<path d="M3 4v16M21 4v16M7 12h10M10 9l-3 3 3 3M14 9l3 3-3 3"/>`,   // #2333: fit width
+  fullscreen: () => html`<path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/>`,           // #2540: the Office's fullscreen
+  fullscreenexit: () => html`<path d="M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5"/>`,       // …and its way out
   edit: () => html`<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/>`,
   more: () => html`<circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/>`,
   chat: () => html`<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>`,

package/dist/ui/shared/web-authorize.js

@@ -12,7 +12,6 @@ register("webauth", {
     authorize: "Authorize this browser",
     waiting: "Waiting for your Confirm in Discord or Telegram ({0})",
     sent: "Sent — confirm it in your DM within 5 minutes.",
-    publicLink: "Not on the temporary public link: open the dashboard directly to authorize.",
     reason_disabled: "Web authority is turned off.",
     reason_loopback_only: "Only this computer can authorize, and this browser is not on it.",
     reason_no_account: "This browser was not signed in as an account (agend web): sign in with /web to authorize.",
@@ -20,7 +19,8 @@ register("webauth", {
     reason_not_admin_session: "Guests can't authorize.",
     reason_token_rotated: "The dashboard's token changed: sign in again.",
     reason_public_link: "Not on the temporary public link.",
-    reason_named_link_off: "Over your named link: turn on \"Also over my named link\" in Settings → Web on this computer.",
+    reason_named_link_off: "Over your named link: turn on \"Also over my named link\" in Settings → Access & security on this computer.",
+    reason_quick_link_off: "Over the temporary public link: turn on \"Also over the temporary public link\" in Settings → Access & security on this computer.",
     reason_not_session: "Sign in to authorize.",
     reason_other: "This browser can't be authorized here.",
     refusal_pending: "A request is already waiting in your DM.",
@@ -39,7 +39,6 @@ register("webauth", {
     authorize: "授權這個瀏覽器",
     waiting: "等你在 Discord 或 Telegram 按下確認（{0}）",
     sent: "已送出——請在 5 分鐘內到私訊確認。",
-    publicLink: "臨時公開連結上無法授權：請直接開啟儀表板再授權。",
     reason_disabled: "網頁授權已關閉。",
     reason_loopback_only: "只有這台電腦可以授權，而這個瀏覽器不在這台電腦上。",
     reason_no_account: "這個瀏覽器不是用帳號登入的（agend web）：請用 /web 登入後再授權。",
@@ -47,7 +46,8 @@ register("webauth", {
     reason_not_admin_session: "訪客無法授權。",
     reason_token_rotated: "儀表板的 token 已變更：請重新登入。",
     reason_public_link: "臨時公開連結上無法授權。",
-    reason_named_link_off: "透過固定網域：請在這台電腦的 設定 → 網頁 開啟「也允許透過我的固定網域」。",
+    reason_named_link_off: "透過固定網域：請在這台電腦的 設定 → 存取與安全 開啟「也允許透過我的固定網域」。",
+    reason_quick_link_off: "透過臨時公開連結：請在這台電腦的 設定 → 存取與安全 開啟「也允許透過臨時公開連結」。",
     reason_not_session: "登入後才能授權。",
     reason_other: "這個瀏覽器在這裡無法授權。",
     refusal_pending: "已經有一個請求在你的私訊中等待。",
@@ -62,7 +62,9 @@ register("webauth", {
   },
 });
 const tn = (k, ...v) => t(`webauth.${k}`, ...v);
-const REASONS = ["disabled", "loopback_only", "no_account", "not_admin", "not_admin_session", "token_rotated", "public_link", "named_link_off", "not_session"];
+// The switch and "Only this computer" are changed in Settings on this computer — never over the public link (#2525 review).
+const fixable = (reason) => (reason === "disabled" || reason === "loopback_only") && globalThis.document?.body?.dataset?.publicLink !== "1";
+const REASONS = ["disabled", "loopback_only", "no_account", "not_admin", "not_admin_session", "token_rotated", "public_link", "named_link_off", "quick_link_off", "not_session"];
 // Until when: the time, with the day when it isn't today (an authorization lasts up to 48 h).
 const clock = (ms) => {
   const d = new Date(ms), today = new Date().toDateString() === d.toDateString();
@@ -70,7 +72,6 @@ const clock = (ms) => {
     : d.toLocaleString([], { weekday: "short", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 };
 const mmss = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
-const publicLink = () => globalThis.document?.body?.dataset?.publicLink === "1";
 
 // One read per page load, shared by every line that shows it (the composer's, the session menu's): coming back to a chat
 // reads nothing (#1374). It is read again only after an ask, and while a card is pending.
@@ -98,7 +99,9 @@ export function useWebAuthorization() {
   const [deadline, setDeadline] = useState(0), [now, setNow] = useState(() => Date.now());
   const alive = useRef(true);
   const load = async () => {
-    if (publicLink() || guestPage()) return;
+    // §0.2 / §0.3: over the public link too — the server says whether this browser may be authorized there (its link's
+    // option on) or why not; a guest never asks.
+    if (guestPage()) return;
     const body = await readStatus();
     if (!alive.current) return;
     if (signedOut) { setSt(null); setNotice(null); return; }
@@ -144,7 +147,6 @@ export function resetWebAuthorization() { shared = null; answered = false; infli
 export function AuthorizeChip() {
   const a = useWebAuthorization();
   if (guestPage()) return null;
-  if (publicLink()) return html`<p class="webauth-chip note" data-state="public">${tn("publicLink")}</p>`;
   if (!a.st) return null;
   return html`<div class="webauth-chip" data-state=${a.st.state}>${body(a)}${a.notice ? html` <span class="note" role="status">${a.notice}</span>` : null}</div>`;
 }
@@ -163,7 +165,6 @@ export function ComposerAuth() {
   const tip = useRef("wa-tip-" + Math.random().toString(36).slice(2, 8));
   useEffect(() => { setOpen(false); }, [a.st && a.st.state]);              // a new state closes the bubble
   if (guestPage()) return null;
-  if (publicLink()) return html`<span class="webauth-row note" data-state="public" title=${tn("publicLink")}>${tn("publicLink")}</span>`;
   if (!a.st) return null;
   const st = a.st, id = tip.current;
   const said = a.notice ? html`<span class="webauth-notice" role="status">${a.notice}</span>` : null;
@@ -184,8 +185,8 @@ export function ComposerAuth() {
       title=${tn("authorizeWhy")} aria-label=${tn("authorizeWhy")} onClick=${a.ask}>${tn("authorizeShort")}</button>${said}</span>`;
   }
   const why = REASONS.includes(st.reason) ? tn(`reason_${st.reason}`) : tn("reason_other");
-  return html`<span class="webauth-row" data-state="none"><span class="note" title=${why}>${tn("notVerified")}<span class="sr-only">: ${why}</span></span>${st.reason === "disabled" || st.reason === "loopback_only"
-    ? html` · <a href="/settings/web" title=${why}>${tn("settings")}</a>` : null}</span>`;
+  return html`<span class="webauth-row" data-state="none"><span class="note" title=${why}>${tn("notVerified")}<span class="sr-only">: ${why}</span></span>${fixable(st.reason)
+    ? html` · <a href="/settings/access" title=${why}>${tn("settings")}</a>` : null}</span>`;
 }
 
 function body(a) {
@@ -196,5 +197,5 @@ function body(a) {
     return html`<span class="note">${tn("notVerified")} ·</span> <button type="button" class="btn btn-sm" onClick=${a.ask}>${tn("authorize")}</button>`;
   const why = REASONS.includes(st.reason) ? tn(`reason_${st.reason}`) : tn("reason_other");
   // The fix, where there is one the person can take here: the switch lives in Settings → Web.
-  return html`<span class="note">${tn("notVerified")}: ${why}</span>${st.reason === "disabled" || st.reason === "loopback_only" ? html` <a href="/settings/web">${tn("settings")}</a>` : null}`;
+  return html`<span class="note">${tn("notVerified")}: ${why}</span>${fixable(st.reason) ? html` <a href="/settings/access">${tn("settings")}</a>` : null}`;
 }