@songsid/agend 2.2.0-beta.2 → 2.2.0-beta.20

package/dist/ui/shared/app.css

@@ -68,10 +68,13 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 
 .sidebar {
   width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-sidebar);
-  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
+  position: relative;   /* #1722: the resize handle sits on its right edge (the width above: tokens.css, or this device's) */
+  padding: 0 0 env(safe-area-inset-bottom) env(safe-area-inset-left);   /* the top inset is the head's, as the page header's is */
 }
 .sb-collapsed .sidebar { display: none; }
-.side-head { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-2) var(--s-2) var(--s-4); }
+/* The brand row is the page header's row: the same height, padding and centre line (--header-h; .panel-head, .panel-title). */
+.side-head { display: flex; align-items: center; gap: var(--s-1); box-sizing: content-box; min-height: calc(var(--header-h) - 2 * var(--s-1));
+  padding: max(var(--s-1), env(safe-area-inset-top)) var(--s-2) var(--s-1) var(--s-4); }
 .brand { flex: 1; font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
 .side-nav { display: flex; flex-direction: column; padding: var(--s-1) var(--s-2); gap: 1px; }
 .side-row {
@@ -112,18 +115,23 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .av.ring { box-shadow: 0 0 0 2px var(--ring, transparent); }
 .av-text { overflow: hidden; }
 .av .av-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar); }
+/* #1722: the CLI as a letter on the avatar's top-left corner — monochrome (the #1630 ring keeps the colour), cut out like the dot */
+.av-cli { position: absolute; left: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
+  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 0 0 1.5px var(--bg-sidebar);
+  color: var(--text-2); font-size: 9px; line-height: 12px; font-weight: var(--fw-semibold); text-align: center; pointer-events: auto; }
+.inst.active .av .av-cli, .inst:hover .av .av-cli { box-shadow: 0 0 0 1.5px var(--surface-2); }
 .inst.active .av .av-dot, .inst:hover .av .av-dot { box-shadow: 0 0 0 2px var(--surface-2); }
 .dot.hollow { background: transparent; border: 1.5px solid var(--text-3); }
 /* On a grey avatar a grey dot needs more contrast: stopped is a stronger grey, paused a clear ring around the sidebar colour. */
 .av .av-dot.off { background: var(--text-2); }
 .av .av-dot.hollow { box-sizing: border-box; width: 10px; height: 10px; background: var(--bg-sidebar); border: 2.5px solid var(--text-2); }
 .inst .av { margin-top: 1px; }
-.inst-id { font-family: var(--font-mono); }
 .inst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .inst-name { font-size: var(--fs-sm); line-height: var(--lh-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #1722: the other name, under the one that leads — smaller, muted, truncated on its own */
+.inst-alt { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .inst.active .inst-name { font-weight: var(--fw-semibold); }
 .inst-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
-.inst-alias { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
 .badge-await {
   flex-shrink: 0; font-size: 11px; line-height: 16px; font-weight: var(--fw-semibold); padding: 0 var(--s-2); border-radius: var(--r-full);
   background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); white-space: nowrap;
@@ -144,6 +152,10 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .s-device { display: flex; flex-direction: column; gap: var(--s-3); }
 .s-device .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
 .s-device-row { display: flex; gap: var(--s-2); }
+/* #1827: the person's web name — its field takes the card's width; a refusal reads in the danger colour. */
+.s-profile .field { display: flex; flex-direction: column; gap: var(--s-1); }
+.s-profile .field input { max-width: 24rem; }
+.s-profile .err { color: var(--danger); }
 /* #1620: Settings → Web — the lead, and the read-only list of what is set in fleet.yaml. */
 .s-web .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
 .s-web-fields:disabled select { opacity: 0.6; }   /* over the public link: dimmed like the inputs (.field input:disabled) */
@@ -189,20 +201,23 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 .panel-head .sb-open { display: none; }
 .sb-collapsed .panel-head .sb-open { display: inline-flex; }
-.panel-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s-3); }
+/* One row of --header-h on every page (a phone's instance tabs wrap below it): the title, its status and badges on one centre line. */
+.panel-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--header-h) - 2 * var(--s-1)); }
 .panel-title h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; outline: none; }
 .panel-sub { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
 .status { display: inline-flex; align-items: center; gap: 6px; }
 .panel-actions { display: flex; align-items: center; gap: var(--s-1); }
 /* #1523 N2: the instance view switch — beside the title on a wide screen; on a phone, a row of tabs under the header. */
 .inst-switch.seg { padding: 0; margin: 0; width: auto; max-width: none; flex-shrink: 0; }
-.inst-switch .seg-item { min-height: 30px; }
+.inst-switch .seg-item { min-height: 30px; flex-direction: column; justify-content: center; gap: 0; }
+/* The label again in the current tab's weight, taking width but no height and never seen: the bar's size does not change with the tab. */
+.inst-switch .seg-item::after { content: attr(data-label); font-weight: var(--fw-semibold); height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }
 /* #1523 N3 (Q2 = A): the text size, one custom property from the root's data-text-size (header-tools.js). The chat's
    messages, Details and the Fleet tabs scale the type tokens by it; View's terminal scales itself (VIEW_SCALE). */
 :root { --text-scale: 1; }
 :root[data-text-size="s"] { --text-scale: 0.9; }
 :root[data-text-size="l"] { --text-scale: 1.15; }
-.thread, .p-details .panel-body, .p-fleet .panel-body {
+.thread, .p-details .panel-body, .p-fleet .panel-body, .p-log .panel-body {
   --fs-xs: calc(12px * var(--text-scale)); --lh-xs: calc(16px * var(--text-scale));
   --fs-sm: calc(13px * var(--text-scale)); --lh-sm: calc(18px * var(--text-scale));
   --fs-md: calc(15px * var(--text-scale)); --lh-md: calc(24px * var(--text-scale));
@@ -211,10 +226,44 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 /* #1523 N2: Details. */
 .p-details .d-tags { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
+/* #1218: an instance's Log — one column of steps, newest at the bottom; the filter bar above it. Classes only (#1300). */
+.p-log .log-bar { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); flex: none; }
+.p-log .log-bar .chip-btn.on { color: var(--text); background: var(--surface-2); font-weight: var(--fw-semibold); }
+.p-log .log-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
+.p-log .log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
+.p-log .log-item { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); min-width: 0; overflow-wrap: anywhere; }
+.p-log .log-item.turn-start { margin-top: var(--s-4); }
+.p-log .log-item.k-user { background: var(--user-bubble); }
+.p-log .log-item.k-turn_end, .p-log .log-item.k-state, .p-log .log-item.k-event { background: transparent; color: var(--text-3); padding-block: 2px; font-size: var(--fs-sm); }
+.p-log .log-item.k-error, .p-log .log-item.s-failed { border-left: 3px solid var(--danger); }
+.p-log .log-head { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
+.p-log .log-icon { flex: none; }
+.p-log .log-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.p-log .log-cat { font-weight: var(--fw-semibold); }
+.p-log .log-subject { font-size: var(--fs-sm); }
+.p-log .log-time { flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.p-log .log-status { flex: none; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.p-log .log-status.done { color: var(--ok); }
+.p-log .log-status.failed { color: var(--danger); }
+.p-log .log-status.interrupted { color: var(--warn, var(--text-3)); }
+.p-log .log-status .spinner { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
+.p-log .log-repeat { flex: none; font-size: var(--fs-xs); padding: 0 6px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
+.p-log .log-text { white-space: pre-wrap; margin-top: var(--s-1); font-size: var(--fs-sm); }
+.p-log .log-text.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
+.p-log .log-text.folded { max-height: 10.5em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); }
+.p-log .link-btn { border: 0; background: none; padding: 2px 0; color: var(--accent); cursor: pointer; font-size: var(--fs-xs); }
+.p-log .log-detail { margin-top: var(--s-1); display: flex; flex-direction: column; gap: var(--s-2); }
+.p-log .log-sec-h { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
+.p-log .log-older, .p-log .log-start { text-align: center; margin: var(--s-2) 0; }
+.p-log .log-off { padding: var(--s-6) var(--s-4); }
 .p-details .d-edit { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
+/* The header's controls are one height, the icon buttons' (36 px): its small buttons, and the instance tabs when they share
+   its row (a phone puts them on a row of their own, under it). */
+.panel-head .btn-sm { min-height: 36px; }
+@media (min-width: 900px) { .panel-head .inst-switch .seg-item { min-height: 36px; } }
 @media (max-width: 899px) {
   .panel-head:has(.inst-switch) { flex-wrap: wrap; }
-  .inst-switch.seg { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 0 var(--s-1); }
+  .inst-switch.seg { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 0 var(--s-1); }
   .inst-switch .seg-item { justify-content: center; border-radius: var(--r-sm); }
 }
 .panel-body { flex: 1; min-height: 0; overflow-y: auto; }
@@ -228,8 +277,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .empty-title { color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .empty-hint { font-size: var(--fs-sm); }
 .empty .btn { margin-top: var(--s-3); }
-/* #1519 P7: the first-run card (a fleet with no chat connection), above an empty chat or a Settings list. */
-.first-run-stack { width: 100%; max-width: var(--col); }
+/* #1519 P7: the first-run card (a fleet with no chat connection), above a Settings list (#1854: no longer on Chat). */
 .first-run h3 { display: flex; align-items: center; gap: var(--s-2); }
 .first-run p { color: var(--text-2); font-size: var(--fs-sm); }
 .error-state { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); color: var(--danger); text-align: center; }
@@ -307,6 +355,16 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .pill.open { background: var(--accent-dim); color: var(--accent); }
 .pill.claimed { background: var(--warn-bg); color: var(--warn); }
 .pill.done { color: var(--ok); }
+/* #1724: a disabled schedule — its own look (not the green of "done"): a dashed, muted badge and a dimmed row */
+.pill.off { background: transparent; color: var(--text-3); border: 1px dashed var(--border-strong); }
+.row-item.is-off { opacity: 0.62; }
+.row-item.sched { flex-wrap: nowrap; }
+.row-item.sched .sched-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
+.sched-actions { display: inline-flex; flex: none; gap: var(--s-1); }
+.sched-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sched-sub { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 899px) { .sched-sub { white-space: normal; } }   /* a phone: the run time wraps rather than being cut */
+.sched-mode { margin-bottom: var(--s-2); }
 .save-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
 
 /* ── Chat ── */
@@ -315,11 +373,31 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg { font-size: var(--fs-md); line-height: var(--lh-md); overflow-wrap: anywhere; min-width: 0; }
 .msg .meta { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--s-1); }
 .msg .sender { font-weight: var(--fw-semibold); color: var(--text-2); }
-.msg .time { font-family: var(--font-mono); }
+/* The time never wraps or gives up its width to a long neighbour: a flex child shrinks to its min-content, and with
+   the message's overflow-wrap: anywhere that is one character wide (the #1672 status line's time, one glyph per line). */
+.msg .time { font-family: var(--font-mono); white-space: nowrap; flex: none; }
 .msg.user { align-self: flex-end; max-width: min(80%, 620px); }
 .msg.user .meta { justify-content: flex-end; }
-.msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); }
+/* #1773: the bubble hugs its text. The message is as wide as its widest child — usually the meta row (sender, a time
+   such as 「昨天 下午03:58」, ticks) — and a block body would stretch to it; fit-content keeps a short message short, on
+   the right under its meta, and a long one still wraps at the message's max-width. */
+.msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); width: fit-content; max-width: 100%; margin-left: auto; }
+/* A person's click on a reply button: the bubble shows 🔘 and the button's label (never the value the agent was given);
+   live, the label is a button that shows the reply its buttons were on. */
+.click-chip { display: flex; }
+.click-chip .click-link, .click-chip .click-text { display: inline-flex; align-items: baseline; gap: var(--s-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; }
+.click-chip .click-link { cursor: pointer; }
+.click-chip .click-link:hover, .click-chip .click-link:focus-visible { text-decoration: underline; }
+.click-mark { flex: none; }
 .msg.agent { align-self: stretch; }
+/* #1672: a status line (another instance's message, a daemon notice): muted plain text, no bubble; a long one folds.
+   Its class is `status-line`, never `status`: that is the header's inline-flex badge class, and on a message it turned
+   the meta, body and tools into one flex row. */
+.msg.status-line { align-self: stretch; font-size: var(--fs-sm); color: var(--text-3); }
+.msg.status-line .st-text { white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: var(--s-3); }
+.msg.status-line.folded .st-text { max-height: 9em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); }
+.msg.status-line .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
+.msg.status-line .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
 .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
 @media (hover: none) { .msg-tools { opacity: 1; } }
@@ -341,10 +419,13 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .text-card { margin-top: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
 .text-card .tc-head { display: flex; align-items: center; gap: var(--s-2); }
 .text-card .tc-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-2); }
-.text-card .tc-body { margin-top: var(--s-2); max-height: 480px; overflow: auto; }
+/* #1812: the scroller spans the card's padding box and insets its own content — 12px on both sides, from the border on
+   the left and from the scrollbar (or the border, with overlay scrollbars) on the right. A stable gutter keeps a
+   classic scrollbar off the content, and the content from shifting when the scrollbar comes and goes. */
+.text-card .tc-body { margin: var(--s-2) calc(-1 * var(--s-3)) 0; padding: 0 var(--s-3); max-height: 480px; overflow: auto; scrollbar-gutter: stable; }
 .text-card .tc-body[hidden] { display: none; }
 .text-card .tc-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-xs); }
-.text-card .tc-table-wrap { overflow-x: auto; }
+.text-card .tc-table-wrap { overflow-x: auto; padding-bottom: var(--s-3); }
 .text-card .tc-table { border-collapse: collapse; font-size: var(--fs-xs); }
 .text-card .tc-table th, .text-card .tc-table td { border: 1px solid var(--border); padding: 2px 6px; text-align: left; vertical-align: top; }
 .text-card .tc-more { margin-top: var(--s-2); }
@@ -377,10 +458,17 @@ html.lb-open .scroller { overflow: hidden; }
 .msg .md ul { list-style: disc; } .msg .md ol { list-style: decimal; }
 .msg .md li > ul, .msg .md li > ol { margin: 2px 0; }
 .msg .md hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-3) 0; }
-.msg .md .tbl { overflow-x: auto; margin: var(--s-2) 0; }
+/* #1812: a table too wide for its message scrolls in this wrapper (see the cell rule below); the bottom padding keeps an
+   overlay scrollbar off the last row. */
+.msg .md .tbl { overflow-x: auto; margin: var(--s-2) 0 0; padding-bottom: var(--s-3); }
 .msg .md table { border-collapse: collapse; font-size: var(--fs-sm); }
 .msg .md th, .msg .md td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
 .msg .md th { background: var(--surface); font-weight: var(--fw-semibold); }
+/* #1812: table cells keep their words whole. The message's `overflow-wrap: anywhere` also shrinks a cell's minimum
+   width, so auto table layout squeezed the columns and split words ("directo|r"); `break-word` breaks a word only when
+   it alone is wider than its line and leaves the minimum at whole words, so a wide table overflows into its scrolling
+   wrapper instead. A column keeps at least 5em: CJK text can break between any two characters. */
+.msg .md th, .msg .md td, .text-card .tc-table th, .text-card .tc-table td { overflow-wrap: break-word; word-break: normal; min-width: 5em; }
 .msg .md .al-c { text-align: center; } .msg .md .al-r { text-align: right; }
 .msg .md h3, .msg .md h4, .msg .md h5, .msg .md h6 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
 .msg .md .tk-k { color: var(--tk-k); } .msg .md .tk-s { color: var(--tk-s); } .msg .md .tk-n { color: var(--tk-n); } .msg .md .tk-c { color: var(--tk-c); font-style: italic; }
@@ -457,6 +545,10 @@ html.lb-open .scroller { overflow: hidden; }
 .rb-btn { max-width: 100%; white-space: normal; text-align: left; }
 .rb-btn.chosen, .rb-btn.chosen:disabled { border-color: var(--ok); color: var(--text); background: color-mix(in srgb, var(--ok) 14%, transparent); font-weight: var(--fw-semibold); opacity: 1; }
 .rb-btn:disabled:not(.chosen) { opacity: 0.55; }
+/* #1823: a poll — its closed buttons show the tally, so they stay readable; the time left keeps its width. */
+.rb-row.poll .rb-btn:disabled { opacity: 0.85; }
+.rb-row.poll .poll-left { font-variant-numeric: tabular-nums; }
+.poll-voters { margin: var(--s-1) 0 0; padding-left: var(--s-4); color: var(--text-2); font-size: var(--fs-sm); }
 .rb-note { font-size: var(--fs-xs); color: var(--text-3); }
 .pv-menu { position: relative; }
 .pv-menu > summary { list-style: none; cursor: pointer; padding: 2px var(--s-2); border-radius: var(--r-sm); color: var(--text-3); }
@@ -589,11 +681,32 @@ html.lb-open .scroller { overflow: hidden; }
 .caret.folded { transform: rotate(-90deg); }
 .caret.flipped { transform: rotate(180deg); }   /* the card's toggle: up when closed (it opens upwards) */
 .v-inst { align-items: center; }
+/* #1664: favorites — the star after a row (on hover or focus on a desktop, always when starred; on a phone in Edit) */
+.inst-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
+.inst-head .side-label { flex: 1; min-width: 0; }
+.fav-edit { margin-right: var(--s-2); display: inline-flex; align-items: center; gap: var(--s-1); }
+.v-li { display: flex; align-items: center; gap: 2px; }
+.v-li > .inst { flex: 1; min-width: 0; }
+.inst-star, .inst-move { flex: none; width: 28px; height: 28px; padding: 0; color: var(--text-3); }
+.inst-star.on { color: var(--warn); }
+.inst-star.on svg, .fav-mark { fill: currentColor; }
+.fav-head { cursor: default; }
+.fav-mark { color: var(--warn); }
+.inst-nav:not(.fav-editing) .inst-star:not(.on) { visibility: hidden; }
+/* As specific as the rule that hides it (and later), so hover and focus win. */
+@media (hover: hover) { .inst-nav:not(.fav-editing) .v-li:hover .inst-star, .inst-nav:not(.fav-editing) .v-li:focus-within .inst-star { visibility: visible; } }
+@media (hover: none) { .inst-nav:not(.fav-editing) .inst-star { display: none; } }
+/* Edit: room for ↑ ↓ ☆ — the context and CLI marks step aside so the name keeps its width. */
+.fav-editing .v-li .v-meta { display: none; }
+@media (max-width: 899px) { .fav-editing .inst-star, .fav-editing .inst-move { width: 36px; height: 36px; } }
 .v-inst .dot { margin-top: 0; }
 .v-meta { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
-.cli-icon { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; border: 1px solid var(--border-strong); }
-.cli-claude-code { background: #c678dd; } .cli-kiro-cli { background: #58a6ff; } .cli-codex { background: #3fb950; }
-.cli-grok { background: #0d1117; border-color: #f0f6fc; } .cli-antigravity { background: #f85149; } .cli-opencode { background: #f0f6fc; } .cli-other { background: #6e7681; }
+/* #1722: the sidebar's width — a separator on its right edge (drag, arrows, Home/End, double-click resets); not on a phone */
+.side-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; z-index: 5; cursor: col-resize; touch-action: none; }
+.side-resize:hover, .side-resize:focus-visible, .side-resize.dragging { background: var(--accent-dim, var(--border-strong)); }
+.side-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-select: none; }
+@media (max-width: 899px) { .side-resize { display: none; } }
 .dragging { opacity: 0.4; }
 .drop-before { box-shadow: inset 0 2px 0 var(--accent); }
 .drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
@@ -604,21 +717,35 @@ html.lb-open .scroller { overflow: hidden; }
 .v-filter-box input::placeholder { color: var(--text-3); }
 .v-filter-clear { width: 28px; height: 28px; }
 .v-filter .note { padding: var(--s-1) var(--s-1) 0; font-variant-numeric: tabular-nums; }
-/* alpha.2 (N1): status and CLI chips under the filter box — each a <details> with checkboxes. */
-.nav-facets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-1) 0; }
-.nav-facet { font-size: var(--fs-xs); color: var(--text-2); }
-.nav-facet > summary { cursor: pointer; list-style: none; padding: 2px var(--s-2); border-radius: var(--r-sm); }
-.nav-facet > summary::-webkit-details-marker { display: none; }
-.nav-facet > summary::after { content: " ▾"; color: var(--text-3); }
-.nav-facet[open] > summary::after { content: " ▴"; }
-.nav-facet > summary:hover { background: var(--hover); }
-.nav-facet > summary:focus-visible { outline: 2px solid var(--accent); }
+/* alpha.2 (N1): status and CLI chips under the filter box — each a group of checkboxes under its header (#1700). */
+/* #1776: the "N / M" count is on the headers' row, at its right end — not a row of its own. The headers (and an open
+   group's list, the reset) wrap in their own box beside it, so a filter's summary or a narrow sidebar moves a header
+   down, never the count; the count is as tall as a header, so the row does not grow. */
+.nav-facets { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-1) 0; }
+.nav-facet-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); flex: 1 1 auto; min-width: 0; }
+.nav-facets .nav-shown { flex: none; margin: 0 0 0 auto; padding: 2px 0; white-space: nowrap; }
+.nav-facet { font-size: var(--fs-xs); color: var(--text-2); min-width: 0; max-width: 100%; }
+/* #1700: a facet group's header — the whole row toggles its list; folded with a filter set, a short summary. */
+.nav-facet-head { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: 2px var(--s-2); border: 0; border-radius: var(--r-sm);
+  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; white-space: nowrap; }
+.nav-facet-head:hover { background: var(--hover); }
+.nav-facet-head:focus-visible { outline: 2px solid var(--accent); }
+.nav-facet-head .caret { color: var(--text-3); flex: none; }
+.nav-facet-sum { min-width: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }
 .nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
 .nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
 .nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
 .nav-facet-reset { font-size: var(--fs-xs); }
 
-.p-view .panel-actions .btn { gap: var(--s-1); }
+/* One gap on every page (View's, #1448): the header's controls are the same size on every tab. */
+.panel-actions .btn { gap: var(--s-1); }
+/* Aa's names share one cell, only the current one shown: the button is as wide as its widest name on every page. */
+.hd-text-names { display: inline-grid; }
+.hd-text-names > span { grid-area: 1 / 1; visibility: hidden; }
+.hd-text-names > .on { visibility: visible; }
+.hd-slot { visibility: hidden; pointer-events: none; }
+/* #1844 Fleet overview → Docs: the arrow says "opens a new tab". */
+.hd-docs .hd-ext { color: var(--text-3); }
 .v-term { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 5px 6px; background: #000000; position: relative; }
 .v-pre { margin: 0; min-width: 100%; min-height: 100%; font-family: var(--font-mono); line-height: 1.2; white-space: pre; color: #d0d0d0; }
 .v-pre .ansi[data-b] { font-weight: var(--fw-bold); }
@@ -642,8 +769,11 @@ html.lb-open .scroller { overflow: hidden; }
 .help-list { list-style: disc; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
 .err { color: var(--danger); font-size: var(--fs-sm); }
 .u-provider { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2); }
-.u-head { display: flex; align-items: center; gap: var(--s-2); }
-.u-order { margin-left: auto; display: flex; gap: 2px; }
+.u-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+/* #1749: one line beside ↑↓ — the name gives way first, then the plan badge (each with an ellipsis); ↑↓ never wrap. */
+.u-head strong { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-plan { min-width: 0; flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-order { margin-left: auto; display: flex; gap: 2px; flex: none; }
 .u-order .icon-btn { width: 28px; height: 28px; }
 .u-order .icon-btn:disabled { opacity: 0.3; }
 .u-metric { display: flex; flex-direction: column; gap: var(--s-1); }
@@ -660,6 +790,12 @@ html.lb-open .scroller { overflow: hidden; }
 .u-sub { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
 .u-err { color: var(--warn); font-size: var(--fs-sm); }
 .u-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
+/* #1673: the usage rail beside the page on a wide screen (header-tools.js UsageRail; shown only at min-width 1200px). */
+.u-rail { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--bg); }
+.u-rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); }
+.u-rail-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
+.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; } }
 @media (max-width: 899px) {
   .hide-narrow { display: none; }
   .v-card { padding-left: var(--s-3); padding-right: var(--s-3); }
@@ -946,6 +1082,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .cmd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
 .cmd-name { font-weight: var(--fw-semibold); }
 .cmd-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-ui); color: var(--text-2); }
+.cmd-phase { color: var(--text); font-weight: var(--fw-semibold); }
 .cmd-choices { display: flex; flex-wrap: wrap; gap: var(--s-1); max-height: 180px; overflow-y: auto; }
 .cmd-choices .btn.current { border-color: var(--accent); color: var(--accent); }
 .quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
@@ -959,3 +1096,6 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* #1630: a Discord server emoji in a chat message, the size of the text around it. */
 .md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }
+/* #1682: a mention, as Discord draws one — accent text on a tint of it; the id (or the Telegram handle) on hover. */
+.md .mention { display: inline; padding: 0 0.2em; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-dim);
+  font-weight: var(--fw-medium); white-space: nowrap; }

package/dist/ui/shared/app.js

@@ -5,6 +5,8 @@
 // session, and so is View (panel-view.js, loaded on demand). The panels that need a session live under /ui/js/ and are
 // reached only by the dynamic imports below, in "full" mode. A test walks the static imports over real HTTP and asserts
 // none of them names /ui/.
+// #1665 first: the host's preferences go into this browser's cache before any module below reads its key.
+import { bootPrefs } from "./app-prefs.js";
 import { html, render } from "./app-html.js";
 import { Shell, handleKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener } from "./app-shell.js";
 import { installSwipe } from "./app-swipe.js";
@@ -15,11 +17,12 @@ import { chatPath } from "./app-route.js";
 import { startNeedsNotifier } from "./app-needs.js";
 import { toast } from "./ui-toast.js";
 import { t } from "./app-i18n.js";
-import { initTextSize } from "./header-tools.js";
+import { initTextSize, initUsageRail } from "./header-tools.js";
 
 const boot = document.body.dataset;
 // #1523 N3: this device's text size, on the root before the first paint of any panel.
 initTextSize();
+initUsageRail();
 // "full": a signed-in page. "view-only": an anonymous reader of /view under web.view_access: open — no stream, no
 // session-only panel, nothing under /ui/ is ever imported or read (#1408 §3).
 const mode = boot.mode === "view-only" ? "view-only" : "full";
@@ -48,6 +51,8 @@ if (mode === "full") {
   stream.on("hydration", (hydration) => appStore.set({ hydration }));
   appStore.set({ retryHydration: () => stream.catchUp() });
   stream.on("needs", (d) => appStore.set({ needs: Array.isArray(d && d.items) ? d.items : [] }));
+  // #1218: a panel's way to hear one stream event (the Log's steps_tick), unsubscribed by its lease.
+  appStore.set({ streamOn: (name, fn) => stream.on(name, fn) });
   appStore.set({ connection: stream.connection() });
 
   // The chat's store must hear every message from the first frame, whatever panel is open: its module boots once,
@@ -64,6 +69,7 @@ if (mode === "full") {
   const loadSettings = retryable((a) => import(retryUrl("/ui/js/panel-settings.js", a)));
   const loadNeeds = retryable((a) => import(retryUrl("/ui/js/panel-needs.js", a)));
   const loadDetails = retryable((a) => import(retryUrl("/ui/js/panel-details.js", a)));
+  const loadLog = retryable((a) => import(retryUrl("/ui/js/panel-log.js", a)));
   // The stream opens once the chat listens, so the frames sent on connect (status, open prompts, ticks) reach it too.
   // If the chat cannot load (a session that just ended), the stream still opens for the sidebar.
   const chatBoot = loadChat();
@@ -77,8 +83,12 @@ if (mode === "full") {
   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) });
+  // #1218: one instance's Log (/ui/log/<name>).
+  panels.set("log", { load: () => loadLog().then((m) => m.LogPanel) });
   // #1386 §6.3: desktop notifications for new "Needs you" items, in any panel, while this signed-in page is open.
   startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
+  // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
+  bootPrefs();
   onNewInstance = async () => {
     closeDrawer();                                 // on a phone the dialog opens from the drawer: the drawer goes first
     let m;

package/dist/ui/shared/fonts/README.md

@@ -8,7 +8,7 @@
   - The optical-size axis is fixed at its text size (`opsz=14`).
   - The font is subset to Latin, with the same range as `unicode-range` in `tokens.css`.
   - It is saved as WOFF2. About 44 KB, against 352 KB for the full variable font.
-- Chinese and other scripts fall back to the system fonts named in `--font-ui` (PingFang TC → Noto Sans TC → Microsoft JhengHei → the system stack).
+- Chinese and other scripts fall back to the system fonts named in `--font-ui` (PingFang TC → PingFang SC → Noto Sans TC → Noto Sans SC → Noto Sans CJK TC → Noto Sans CJK SC → Microsoft JhengHei → Microsoft YaHei → the system stack).
 
 Rebuilt with fontTools 4.59 (and `brotli` for WOFF2):
 

package/dist/ui/shared/header-tools.js

@@ -1,16 +1,20 @@
 // #1523 N3 (§3.4, Q2 = A): the controls every page's header has, in one order on Chat, View, Details and Fleet —
 //   Aa  text size, shared per device: S / M / L (View also keeps Fit, its own extra choice);
 //   ◔   AI usage, unless the fleet turned it off (web.usage_panel: false — said by the page itself, no probe read).
+//       #1673: on a wide screen it is a right rail beside the page (shown or hidden per device); ◔ toggles it. On a
+//       narrower one, ◔ opens the dialog.
 // The size is one attribute on the root (data-text-size); CSS turns it into one custom property the chat, Details and
 // Fleet read (#1300: no style attribute). View's terminal multiplies its fitted size by VIEW_SCALE, as its density did.
-import { html, useState } from "./app-html.js";
+import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { createStore, useStore } from "./app-store.js";
 import { Icon } from "./ui-icons.js";
-import { UsageDialog } from "./usage-dialog.js";
+import { UsageBody, UsageDialog } from "./usage-dialog.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
+/** #1869: set once this device's View Fit was put back (a size chosen on another page used to turn it off). */
+export const VIEW_FIT_RESTORED_KEY = "agend_view_fit_1869";
 const LEGACY_DENSITY_KEY = "agend_view_density";
 export const TEXT_SIZES = ["s", "m", "l"];
 /** View's terminal: its fitted size times this (S / M / L are View's old compact / – / comfortable). */
@@ -22,6 +26,7 @@ const write = (k, v) => { try { localStorage.setItem(k, v); } catch { /* this pa
 /**
  * This device's choice: `agend_text_size` (+ View's Fit), else — once — from View's `agend_view_density`:
  * comfortable → L, compact → S (Fit off); fit, or nothing → M with View on Fit (View's default, as before).
+ * #1869: until then any page's S / M / L also turned View's Fit off, so a Fit off from before is put back once.
  */
 export function loadTextSize() {
   let size = read(TEXT_SIZE_KEY), fit = read(VIEW_FIT_KEY);
@@ -29,7 +34,11 @@ export function loadTextSize() {
     const legacy = read(LEGACY_DENSITY_KEY);
     size = legacy === "comfortable" ? "l" : legacy === "compact" ? "s" : "m";
     fit = legacy === "comfortable" || legacy === "compact" ? "0" : "1";
-    write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, fit);
+    write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, fit); write(VIEW_FIT_RESTORED_KEY, "1");
+  }
+  if (read(VIEW_FIT_RESTORED_KEY) !== "1") {
+    if (fit === "0") { fit = "1"; write(VIEW_FIT_KEY, fit); }
+    write(VIEW_FIT_RESTORED_KEY, "1");
   }
   return { size, viewFit: fit !== "0" };
 }
@@ -48,15 +57,22 @@ export function initTextSize() {
     window.addEventListener("storage", (e) => { if (!e || e.key === TEXT_SIZE_KEY || e.key === VIEW_FIT_KEY || e.key === null) textSizeStore.set(loadTextSize()); });
   }
 }
-/** A size chosen anywhere is the size everywhere (View's Fit included: the last choice wins). */
-export function setTextSize(size) {
+/**
+ * A size chosen anywhere is the size everywhere. View's Fit is left only from View's own Aa (`view`): a size chosen on
+ * another page keeps View on Fit (#1869).
+ */
+export function setTextSize(size, { view = false } = {}) {
   if (!TEXT_SIZES.includes(size)) return;
-  write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, "0");
-  textSizeStore.set({ size, viewFit: false });
+  write(TEXT_SIZE_KEY, size);
+  if (view) write(VIEW_FIT_KEY, "0");
+  textSizeStore.set((s) => ({ size, viewFit: view ? false : s.viewFit }));
 }
 export function setViewFit() { write(VIEW_FIT_KEY, "1"); textSizeStore.set((s) => ({ ...s, viewFit: true })); }
 
-/** Aa: S → M → L → S; on View, Fit → S → M → L → Fit. */
+/**
+ * Aa: S → M → L → S; on View, Fit → S → M → L → Fit. Every page's button is as wide as its widest name (Fit's
+ * included): switching pages or sizes never moves the controls beside it.
+ */
 export function TextSizeButton({ view = false }) {
   const st = useStore(textSizeStore);
   const cur = view && st.viewFit ? "fit" : st.size;
@@ -64,8 +80,9 @@ export function TextSizeButton({ view = false }) {
   const next = order[(order.indexOf(cur) + 1) % order.length];
   const name = t(`app.textSize_${cur}`);
   const label = t("app.textSize", name);
-  return html`<button type="button" class="btn btn-ghost btn-sm hd-text" onClick=${() => (next === "fit" ? setViewFit() : setTextSize(next))}
-    title=${label} aria-label=${label}><${Icon} name="type" size=${16} /><span class="hide-narrow" aria-hidden="true">${name}</span></button>`;
+  return html`<button type="button" class="btn btn-ghost btn-sm hd-text" onClick=${() => (next === "fit" ? setViewFit() : setTextSize(next, { view }))}
+    title=${label} aria-label=${label}><${Icon} name="type" size=${16} /><span class="hide-narrow" aria-hidden="true"><span class="hd-text-names">${
+      ["fit", ...TEXT_SIZES].map(k => html`<span key=${k} class=${k === cur ? "on" : undefined}>${t(`app.textSize_${k}`)}</span>`)}</span></span></button>`;
 }
 
 /** Whether the fleet serves the usage panel: the page says so (data-usage-panel); "0" only when turned off. */
@@ -73,16 +90,65 @@ export function usageOffered() {
   try { return document.body && document.body.dataset ? document.body.dataset.usagePanel !== "0" : true; } catch { return true; }
 }
 
+// #1673: the rail. Wide enough for it beside the sidebar and the page: RAIL_MEDIA (followed as it changes). Shown or
+// hidden is this device's choice (agend_usage_rail; "1" = shown, "0" = hidden) — a layout choice, not synced (#1665).
+// #1854 (rank 7): a device that never chose starts with it hidden — a quiet first page; ◔ shows it (and remembers).
+export const RAIL_MEDIA = "(min-width: 1200px)";
+export const RAIL_KEY = "agend_usage_rail";
+/** The pages whose header has ◔ — the rail is theirs (Log's too: one frame on every tab of an instance). */
+export const RAIL_PANELS = ["chat", "view", "log", "details", "fleet"];
+export const usageRailStore = createStore({ open: false });
+/** A page load: this device's choice; none made yet = hidden. */
+export function initUsageRail() { usageRailStore.set({ open: read(RAIL_KEY) === "1" }); }
+export function setUsageRail(open) { write(RAIL_KEY, open ? "1" : "0"); usageRailStore.set({ open: !!open }); }
+const railQuery = () => { try { return typeof matchMedia === "function" ? matchMedia(RAIL_MEDIA) : null; } catch { return null; } };
+/** Whether the screen is wide enough for the rail, now and as it changes. */
+export function useRailWidth() {
+  const [wide, setWide] = useState(() => !!railQuery()?.matches);
+  useEffect(() => {
+    const q = railQuery();
+    if (!q) return undefined;
+    const on = () => setWide(!!q.matches);
+    on();
+    if (typeof q.addEventListener === "function") { q.addEventListener("change", on); return () => q.removeEventListener("change", on); }
+    if (typeof q.addListener === "function") { q.addListener(on); return () => q.removeListener(on); }
+    return undefined;
+  }, []);
+  return wide;
+}
+
+/**
+ * The rail: beside the page on a wide screen, on the pages with ◔, while this device shows it. Its reads are its own
+ * lease: they go on across navigation and end when it is hidden, the screen narrows, or it goes.
+ */
+export function UsageRail({ route }) {
+  const wide = useRailWidth();
+  const { open } = useStore(usageRailStore);
+  if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) return null;
+  return html`<aside class="u-rail" aria-label=${t("view.usage.title_plain")}>
+    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2>
+      <button type="button" class="icon-btn" onClick=${() => setUsageRail(false)} aria-label=${t("app.usageHide")} title=${t("app.usageHide")}><${Icon} name="close" size=${16} /></button></div>
+    <div class="u-rail-body"><${UsageBody} owner="usage-rail" /></div>
+  </aside>`;
+}
+
 /**
- * ◔: the usage dialog (usage-dialog.js). It belongs to the navigation that opened it (`navKey`, #1408 §4; #1563
+ * ◔: on a wide screen, shows or hides the rail (#1673); otherwise the usage dialog (usage-dialog.js). It belongs to the navigation that opened it (`navKey`, #1408 §4; #1563
  * review): another route, the same route again, another tab of the panel or a language switch closes it, and its
  * reads and timer end with it — the dialog's lease is that navigation's.
  */
 export function UsageButton({ navKey }) {
   const [openFor, setOpenFor] = useState(null);
+  const wide = useRailWidth();
+  const rail = useStore(usageRailStore);
+  // Widening ends a dialog opened on the narrower screen — closed for good, not hidden while wide: narrowing again
+  // (after the rail was hidden, or with this device's rail hidden) never brings it back (#1679 review).
+  useEffect(() => { if (wide) setOpenFor(null); }, [wide]);
   if (!usageOffered()) return null;
-  const open = openFor !== null && openFor === navKey;
-  return html`<button type="button" class="btn btn-ghost btn-sm hd-usage" onClick=${() => setOpenFor(navKey)} aria-label=${t("app.usage")} title=${t("app.usage")}>
+  const open = !wide && openFor !== null && openFor === navKey;
+  const click = () => (wide ? setUsageRail(!rail.open) : setOpenFor(navKey));
+  return html`<button type="button" class="btn btn-ghost btn-sm hd-usage" onClick=${click} aria-label=${t("app.usage")} title=${t("app.usage")}
+      aria-pressed=${wide ? (rail.open ? "true" : "false") : undefined}>
       <${Icon} name="chart" size=${16} /><span class="hide-narrow" aria-hidden="true">${t("app.usage")}</span></button>
     ${open ? html`<${UsageDialog} key=${navKey} owner=${navKey} onClose=${() => setOpenFor(null)} />` : null}`;
 }
@@ -91,3 +157,7 @@ export function UsageButton({ navKey }) {
 export function HeaderTools({ view = false, navKey }) {
   return html`<${TextSizeButton} view=${view} /><${UsageButton} navKey=${navKey} />`;
 }
+/** Where a page with no control of its own after the shared ones (Log) keeps the room Chat's ⋯ takes: the same box on every tab. */
+export function HeaderSlot() {
+  return html`<span class="icon-btn hd-slot" aria-hidden="true"></span>`;
+}