@songsid/agend 2.3.0 → 2.3.2-beta.1

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); }
@@ -791,6 +893,7 @@ img.amb-p { object-fit: contain; }
 .composer-field { position: relative; flex: 1; min-width: 0; display: flex; }
 .composer-ph { position: absolute; left: var(--s-1); right: var(--s-1); top: 7px; pointer-events: none; color: var(--text-3);
   font-size: var(--fs-md); line-height: var(--lh-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.composer-field textarea:not(:placeholder-shown) + .composer-ph { display: none; }   /* text in the box, composing text too */
 .btn-send { width: 36px; padding: 0; }
 .btn-send .send-label { display: none; }
 /* A narrow phone: Stop reply beside Send leaves the message box no room — the label is for screen readers there. */
@@ -820,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); }
@@ -1191,11 +1324,14 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .u-crow-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text); }
 .u-crow .u-plan { flex: 0 100 auto; min-width: 22px; max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   padding-block: 0; line-height: 16px; font-size: 10.5px; }
-.u-crow-reset { margin-left: auto; flex: none; padding-left: 6px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
-.u-cm { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 3.4em; align-items: center; gap: 7px; min-width: 0; }
+/* Last known numbers: a small muted "cached at …" at the name line's end (why, in its tooltip). */
+.u-crow-stale { margin-left: auto; flex: none; padding-left: 6px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.u-cm { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 2.9em 3.7em; align-items: center; gap: 5px; min-width: 0; }
+/* Each window's own reset, after its percent: muted, tabular, right-aligned (an empty cell keeps the columns lined up). */
+.u-cm-reset { text-align: right; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; }
 .u-cm-tag { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 /* #2240: an account of several pools (agy) names each pool's line: a wider label, ending in an ellipsis if it must. */
-.u-crow.is-pooled .u-cm { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 3.4em; }
+.u-crow.is-pooled .u-cm { grid-template-columns: minmax(0, 7.0em) minmax(0, 1fr) 2.9em 3.7em; column-gap: 7px; }
 .u-cm-bar { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
 .u-cm-fill { display: block; height: 100%; width: 0; min-width: 2px; border-radius: var(--r-full); background: var(--accent); }
 .u-cm-fill.warn { background: var(--warn); } .u-cm-fill.crit { background: var(--danger); }
@@ -1204,6 +1340,8 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .u-crow-note { font-size: var(--fs-xs); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .u-crow-note.is-alert::before { content: "●"; margin-right: 5px; color: var(--danger); }
 .u-crow.is-stale .u-crow-note.is-alert::before { color: var(--warn); }
+/* Last known numbers in compact: as the full card shows them (#2386), muted — not current. */
+.u-crow.is-stale .u-cm-pct { color: var(--text-3); } .u-crow.is-stale .u-cm-fill { background: var(--text-3); }
 @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; } }
@@ -1218,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);
@@ -1253,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); }
@@ -1277,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; }
@@ -1310,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); }
@@ -1351,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; }
@@ -1373,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) ── */
@@ -1563,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; }
@@ -1580,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; }
@@ -1590,24 +1761,84 @@ 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; }
+.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; }
 /* 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/usage-dialog.js

@@ -214,18 +214,27 @@ export function compactPools(p) {
   return [...pools.values()].map((x) => ({ ...x, worst: x.metrics.reduce((a, b) => ((b.used ?? 0) > (a.used ?? 0) ? b : a)) }));
 }
 const pctOf = (m) => Math.min(100, Math.max(0, m.used ?? 0));
+/** When a window resets, at the clock ("14:05", "10/19 14:05"), for a tooltip; "" when unknown or already past. */
+function resetClock(m, now = Date.now()) {
+  const at = new Date((m && m.resetsAt) || "").getTime();
+  return Number.isFinite(at) && at > now ? `↻ ${usageClock(m.resetsAt, now)}` : "";
+}
 /**
- * One window on its own line: its few characters ("5h"), a full-width bar and the percent, coloured as the full card.
- * A pool's line (#2240): the pool's name in place of the window, its every window in the tooltip.
+ * One window on its own line: its few characters ("5h"), a full-width bar, the percent coloured as the full card, and
+ * when this window resets ("↻ 8m"; the user's ask, 2026-10-23: a week's reset was hidden behind the 5 h one's). A pool's
+ * line (#2240): the pool's name in place of the window, the reset of the window its percent is, every window (with its
+ * reset time) in the tooltip.
  */
 function CompactMeter({ m, tag, title }) {
   const bar = useRef(null);
   const pct = Math.min(100, Math.max(0, m.used ?? 0)), cls = level(pct);
   useLayoutEffect(() => { if (bar.current) bar.current.style.width = `${pct}%`; }, [pct]);   // CSSOM (#1300)
   const word = cls === "crit" ? tn("usageNear") : cls === "warn" ? tn("usageHigh") : "";
-  return html`<span class="u-cm" title=${title || `${usageText(m.label, m.labelI18n)}: ${pct.toFixed(0)}%${word ? ` (${word})` : ""}`}>
+  const reset = soonestReset([m]), clock = resetClock(m);
+  return html`<span class="u-cm" title=${title || `${usageText(m.label, m.labelI18n)}: ${pct.toFixed(0)}%${word ? ` (${word})` : ""}${clock ? ` · ${clock}` : ""}`}>
     <span class="u-cm-tag">${tag || windowTag(m)}</span><span class="u-cm-bar"><span ref=${bar} class=${`u-cm-fill ${cls}`}></span></span>
-    <span class=${`u-cm-pct ${cls}`}>${pct.toFixed(0)}%</span></span>`;
+    <span class=${`u-cm-pct ${cls}`}>${pct.toFixed(0)}%</span>
+    <span class="u-cm-reset">${reset ? html`${reset.short}<span class="sr-only"> (${reset.full})</span>` : null}</span></span>`;
 }
 /** What a login says instead of numbers (not logged in, an error), or "" when it has numbers. */
 function rowNote(p) {
@@ -234,26 +243,27 @@ function rowNote(p) {
   return "";
 }
 /**
- * A login in three short lines, under its provider's name (the user's pick, 2026-10-22): its name and plan with the
- * soonest reset on the right; then its short window and its long one, each a labelled full-width bar and the percent.
+ * A login in three short lines, under its provider's name (the user's pick, 2026-10-22): its name and plan; then its
+ * short window and its long one, each a labelled full-width bar, the percent and that window's own reset.
  * Numbers not current, a failed read or no login: one muted line in place of the bars, what is wrong as its tooltip.
  * Pressed, it opens its full card.
  */
 export function CompactRow({ p, onExpand }) {
   const title = providerTitle(p), failed = p.status === "error" || p.status === "no-credentials";
-  const pools = failed || p.stale ? null : compactPools(p);
-  const metrics = failed || p.stale ? [] : pools ? pools.flatMap((x) => x.metrics) : compactMetrics(p);
+  // Last known numbers (stale, e.g. an expired token) show as the others do (the user, 2026-10-23; the full card has since
+  // #2386), with a small "cached at 07:47" on the name line; a window that reset since is left out (compactSlots).
+  const pools = failed ? null : compactPools(p);
+  const metrics = failed ? [] : pools ? pools.flatMap((x) => x.metrics) : compactMetrics(p);
   const note = rowNote(p), stale = p.stale ? staleNote(p) : null;
   const say = stale ? stale.mark : note || tn("usage.no_data");
   const detail = stale ? [stale.mark, stale.detail].filter(Boolean).join(" — ") : say;
-  const reset = soonestReset(metrics);
   const name = title.profile || title.base;
   return html`<button type="button" class=${`u-crow${p.stale ? " is-stale" : ""}${pools ? " is-pooled" : ""}`} aria-expanded="false" title=${`${p.name} — ${tn("usageExpand")}`} onClick=${onExpand}>
     <span class="u-crow-head"><span class="u-crow-name">${name}</span>
       ${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
-      ${reset ? html`<span class="u-crow-reset" title=${reset.full}>${reset.short}<span class="sr-only"> (${reset.full})</span></span>` : null}</span>
+      ${stale && metrics.length ? html`<span class="u-crow-stale" title=${detail}>${p.cachedAt ? tn("usageCachedAt", { at: usageClock(p.cachedAt) }) : stale.mark}<span class="sr-only"> (${detail})</span></span>` : null}</span>
     ${pools ? pools.map((x) => html`<${CompactMeter} key=${x.pool.label} m=${x.worst} tag=${usageText(x.pool.label, x.pool.labelI18n)}
-        title=${x.metrics.map((m) => `${usageText(m.label, m.labelI18n)}: ${pctOf(m).toFixed(0)}%`).join(" · ")} />`)
+        title=${x.metrics.map((m) => { const c = resetClock(m); return `${usageText(m.label, m.labelI18n)}: ${pctOf(m).toFixed(0)}%${c ? ` (${c})` : ""}`; }).join(" · ")} />`)
       : metrics.length ? metrics.map((m, j) => html`<${CompactMeter} key=${j} m=${m} />`)
       : html`<span class=${`u-crow-note${(stale || (p.status === "error" && !p.transient)) ? " is-alert" : ""}`} title=${detail}>${say}</span>`}
   </button>`;