@songsid/agend 2.3.0-beta.25 → 2.3.0-beta.27

package/dist/ui/shared/app-i18n.js

@@ -69,7 +69,7 @@ register("app", {
     needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", log: "Log", instanceViews: "Views of {0}",
     textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage", usageHide: "Hide usage",
     ownerCssKeep: "Keep this custom CSS?", ownerCssKeepLeft: "Reverts in {0} s", ownerCssKeepYes: "Keep", ownerCssKeepNo: "Revert",
-    statusRunning: "running", statusStopped: "stopped", statusPaused: "paused", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
+    statusQueued: "queued", statusStarting: "starting", fleetStarting: "Fleet starting {0}/{1}…", statusRunning: "running", statusStopped: "stopped", statusPaused: "paused", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
     connReconnecting: "Can't reach AgEnD — it may be restarting. Reconnecting…", connReconnectingIn: "Can't reach AgEnD — it may be restarting. Trying again in {0} s.",
     hydrating: "Loading what is open now…", hydrateFailed: "Could not load what is open now (prompts, ticks).",
     skip: "Skip to the conversation", loadFailed: "This could not be loaded.", retry: "Try again", loading: "Loading…",
@@ -106,7 +106,7 @@ register("app", {
     needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", log: "紀錄", instanceViews: "{0} 的檢視",
     textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "填滿", usage: "用量", usageHide: "隱藏用量",
     ownerCssKeep: "保留這份自訂 CSS？", ownerCssKeepLeft: "{0} 秒後還原", ownerCssKeepYes: "保留", ownerCssKeepNo: "還原",
-    statusRunning: "執行中", statusStopped: "已停止", statusPaused: "已暫停", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
+    statusQueued: "等待啟動", statusStarting: "啟動中", fleetStarting: "Fleet 啟動中 {0}/{1}…", statusRunning: "執行中", statusStopped: "已停止", statusPaused: "已暫停", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
     connReconnecting: "連不上 AgEnD——可能正在重新啟動。正在重新連線…", connReconnectingIn: "連不上 AgEnD——可能正在重新啟動。{0} 秒後再試。",
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",
     skip: "跳到對話", loadFailed: "無法載入。", retry: "再試一次", loading: "載入中…",

package/dist/ui/shared/app-prefs.js

@@ -45,6 +45,8 @@ export const SYNCED = {
   "color.show": { ls: "agend_color_show", ...json },
   "theme.pageByInstance": { ls: "agend_theme_page", ...json },   // #2196
   "color.off": { ls: "agend_color_off", toLocal: (v) => (v === true ? "on" : null), fromLocal: (s) => (s === "on" ? true : undefined) },
+  // The AI usage view's compact mode: one line per login (usage-dialog.js), in the dialog and the rail alike.
+  "usage.compact": { ls: "agend_usage_compact", toLocal: (v) => (v === true ? "on" : null), fromLocal: (s) => (s === "on" ? true : undefined) },
 };
 // #1629: fixed personal scope. A separate session-bound owner-effect store synchronizes these, never this host cache.
 export const OWNER_EFFECT_PREF_KEYS = Object.freeze(["fx.sidebar", "fx.header", "fx.page", "fx.box", "fx.cursor"]);

package/dist/ui/shared/app-shell.js

@@ -70,12 +70,14 @@ export const isMacLike = () => typeof navigator !== "undefined" && /Mac|iPhone|i
 /** What the row and tooltips show: ⌘K on a Mac, Ctrl K elsewhere. */
 export const searchShortcut = () => (isMacLike() ? "⌘K" : "Ctrl K");
 /**
- * Whether this page offers search: an admin's page reached directly. A guest's never, and never over the public link —
- * the server refuses it there (#2298 review), so no entry, no shortcut, and Ctrl+F stays the browser's.
+ * Whether this page offers search: an admin's page. A guest's never. #2478 (the user's request): over the public link
+ * too, unless the fleet keeps it off there (web.search.public_link: false — the page says data-search-link="0", the
+ * server refuses it), so then no entry, no shortcut, and Ctrl+F stays the browser's.
  */
 export function searchOffered(admin) {
-  const onLink = typeof document !== "undefined" && !!document.body && document.body.dataset.publicLink === "1";
-  return !!admin && !guestPage() && !onLink;
+  const body = typeof document !== "undefined" ? document.body : null;
+  const offLink = !!body && body.dataset.publicLink === "1" && body.dataset.searchLink === "0";
+  return !!admin && !guestPage() && !offLink;
 }
 let searchModule = null;
 /** Open search; `preset.instance`: narrowed to that agent (Ctrl+F in its chat). */
@@ -284,6 +286,8 @@ appStore.subscribe((s) => {
 
 function statusLabel(i, exec, awaiting) {
   if (awaiting != null) return t("app.needsYou");
+  if (i.startup_phase === "queued") return t("app.statusQueued");
+  if (i.startup_phase === "starting") return t("app.statusStarting");
   if (i.status !== "running") return i.status === "crashed" ? t("app.statusCrashed") : t("app.statusStopped");
   if (exec === "working") return t("app.statusWorking");
   if (exec === "stuck") return t("app.statusStuck");
@@ -291,6 +295,8 @@ function statusLabel(i, exec, awaiting) {
 }
 export function statusClass(i, exec, awaiting) {
   if (awaiting != null) return "warn";
+  if (i?.startup_phase === "starting") return "busy";
+  if (i?.startup_phase === "queued") return "off";
   if (!i || i.status !== "running") return i && i.status === "crashed" ? "bad" : "off";
   return exec === "working" ? "busy" : exec === "stuck" ? "warn" : "ok";
 }
@@ -500,6 +506,13 @@ function ConnectionLine() {
   // (agend-auth's banner says that) draw nothing either; only reconnecting and a failed catch-up are shown.
   return null;
 }
+
+/** A connected fleet is still bringing up agents; this is distinct from the reconnect banner. */
+export function StartupLine() {
+  const { startup } = useStore(appStore);
+  if (!startup) return null;
+  return html`<div data-trust="status" class="conn fleet-starting" role="status">${t("app.fleetStarting", startup.ready, startup.total)}</div>`;
+}
 /** #1580: the fleet is not answering (a restart): said, with when the next try is — never a silent stale page. */
 function Reconnecting() {
   const { retryAt } = useStore(appStore);
@@ -633,6 +646,20 @@ function usePageTheme(ref, route) {
   }, [agent]);
 }
 
+/** #2478: how far short of its tallest the view must be, with a text field focused, to be a keyboard (not a browser bar). */
+export const KEYBOARD_MIN_PX = 150;
+/** #2478: the on-screen keyboard is up — something is being typed into, and the view is well short of its tallest. */
+export function keyboardUp(height, tallest, typing) { return !!typing && tallest - height > KEYBOARD_MIN_PX; }
+const NOT_TYPED = /^(button|checkbox|radio|range|color|file|submit|reset|image|hidden)$/i;
+/** #2478: an element the keyboard types into — a textarea, a text-like input, or an editable region. */
+export function isTextEntry(el) {
+  if (!el || !el.tagName) return false;
+  const tag = String(el.tagName).toUpperCase();
+  if (tag === "TEXTAREA") return !el.readOnly && !el.disabled;
+  if (tag === "INPUT") return !NOT_TYPED.test(el.type || "text") && !el.readOnly && !el.disabled;
+  return el.isContentEditable === true;
+}
+
 export function Shell({ panels, onNewInstance, viewOnly = false }) {
   const nav = useStore(navStore);
   const shell = useStore(shellStore);
@@ -642,13 +669,38 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
   // A language switch re-renders everything and gives the panel a new lease (its key includes the language).
   useEffect(() => onLang(() => relang(n => n + 1)), []);
   useEffect(() => { closeDrawer(); }, [nav.seq]);
-  // The bottom tabs give their room to the keyboard on a phone.
+  // The bottom tabs (and the line under the composer) give their room to the keyboard on a phone (#2478).
   useEffect(() => {
     const vv = typeof window !== "undefined" ? window.visualViewport : null;
-    if (!vv) return undefined;
-    const onResize = () => shellStore.set({ keyboard: window.innerHeight - vv.height > 150 });
-    vv.addEventListener("resize", onResize);
-    return () => vv.removeEventListener("resize", onResize);
+    if (!vv || typeof document === "undefined") return undefined;
+    // The tallest the view has been at this width: what it is with no keyboard. innerHeight is no measure on its own —
+    // it shrinks with the keyboard on iOS Safari and, under interactive-widget=resizes-content, on Android — so
+    // innerHeight − height stayed near 0 and the strips stayed between the composer and the keyboard.
+    // Only a touch screen (a coarse pointer) has an on-screen keyboard: a narrow desk window made shorter is not one.
+    // Turned with the keyboard up and the field still focused, the new width has no height without it yet: the keyboard
+    // stays up until the field is left, or the view grows from its lowest by more than a keyboard (put away).
+    let width = -1, tallest = 0, held = false, lowest = 0;
+    const coarse = () => typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
+    const check = () => {
+      const w = Math.round(vv.width), h = vv.height;
+      const typing = coarse() && isTextEntry(document.activeElement);
+      if (w !== width) {                                              // turned, or a new width: measured again
+        held = width !== -1 && typing && shellStore.get().keyboard;
+        width = w; tallest = 0; lowest = h;
+      }
+      if (held) {
+        lowest = Math.min(lowest, h);
+        if (!typing || h - lowest > KEYBOARD_MIN_PX) held = false;    // left the field, or the keyboard was put away
+      }
+      if (!held) tallest = Math.max(tallest, window.innerHeight || 0, typing ? 0 : h);   // the view itself only when not typing
+      const up = held || keyboardUp(h, tallest, typing);
+      if (up !== shellStore.get().keyboard) shellStore.set({ keyboard: up });
+    };
+    check();
+    vv.addEventListener("resize", check);
+    document.addEventListener("focusin", check);
+    document.addEventListener("focusout", check);
+    return () => { vv.removeEventListener("resize", check); document.removeEventListener("focusin", check); document.removeEventListener("focusout", check); };
   }, []);
   const guest = guestPage();             // #1920: a guest's page — no operations, usage, pending changes or owner CSS
   const cls = ["shell", shell.collapsed ? "sb-collapsed" : "", shell.drawer ? "sb-open" : "", shell.keyboard ? "kb-open" : "", guest ? "guest" : ""].filter(Boolean).join(" ");
@@ -658,6 +710,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     <div class="scrim" onClick=${closeDrawer} aria-hidden="true"></div>
     <main id="main" class="main" tabindex="-1" inert=${shell.drawer && narrow() ? true : undefined}>
       <${ConnectionLine} />
+      <${StartupLine} />
       ${viewOnly || guest ? null : html`<${OperationLine} route=${nav.route} />`}
       ${viewOnly || guest || !shell.banner ? null : html`<${shell.banner} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />

package/dist/ui/shared/app-store.js

@@ -50,6 +50,7 @@ export function applyStatus(d) {
     if (i.state === "awaiting_input") awaiting[i.name] = typeof i.interaction_summary === "string" ? i.interaction_summary : "";
   }
   appStore.set({ canvasWorker: d.canvas_worker === true, ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
+    startup: d.startup?.phase === "starting" ? d.startup : null,
     connections: typeof d.connections === "number" ? d.connections : null,
     // #1665: the host preferences' revision (app-prefs.js re-reads them when it moves).
     prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null,

package/dist/ui/shared/app-stream.js

@@ -34,7 +34,8 @@
 // org canvas reads /ui/traffic when it has no stream).
 // #2233: backend_login — a dashboard sign-in started, moved or ended (no details: the page reads its own view).
 // tasks — the task board changed: the card numbers a write touched (SSE only: the board reads again when it is shown).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks"];
+// offices — the stored offices changed ({ rev }; SSE only: the Office view reads /ui/offices again).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed

package/dist/ui/shared/app.css

@@ -130,9 +130,15 @@ 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 { position: relative; }
+.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,
+.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; }
 .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,
+/* #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 {
   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; }
 .idc-swatches, .idc-places { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -470,6 +476,36 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    such as 「昨天 下午03:58」, ticks) — and a block body would stretch to it; fit-content keeps a short message short, on
    the right under its meta, and a long one still wraps at the message's max-width. */
 .msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); width: fit-content; max-width: 100%; margin-left: auto; }
+/* A message this page is sending (chat-thread.js outgoingHtml): shown at once, its text dimmed with "Sending…" until the
+   server takes it; failed, a straight red bar with Retry and Delete. Each file: a picture as itself (or a document mark),
+   its name, a square-ended bar and its percentage, moved in place. */
+.msg.user.out .meta { align-items: center; gap: var(--s-2); }
+.msg.out.out-queued .body, .msg.out.out-sending .body { color: var(--text-3); }
+.msg.out.out-queued .body .md, .msg.out.out-sending .body .md { opacity: .72; }
+.out-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
+.out-spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: out-spin .8s linear infinite; }
+@keyframes out-spin { to { transform: rotate(360deg); } }
+.out-files { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
+.msg.out .body .out-files:first-child { margin-top: 0; }
+.out-file { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.out-pic { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); flex: none; background: var(--surface-2); }
+.msg.out.out-queued .out-pic, .msg.out.out-sending .out-pic { opacity: .7; }
+.out-doc { width: 32px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
+.out-file-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s-2); min-width: 0; flex: 1; min-width: 140px; }
+.out-name { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.out-pct { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
+.out-bar { grid-column: 1 / -1; height: 3px; background: var(--border); overflow: hidden; }
+.out-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
+.out-file[data-state="done"] .out-bar, .out-file[data-state="done"] .out-pct { visibility: hidden; }
+.out-file[data-state="failed"] .out-fill { background: var(--danger); }
+.out-file[data-state="failed"] .out-pct { color: var(--danger); }
+.msg.out.out-sent .out-file .out-bar, .msg.out.out-sent .out-file .out-pct { visibility: hidden; }
+/* Hugs its words under the bubble's right edge, as the bubble does: the bar stays beside them, never across the row. */
+.out-note { --lbar-color: var(--danger); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); width: fit-content; max-width: 100%;
+  margin: var(--s-2) 0 0 auto; padding: var(--s-1) 0 var(--s-1) calc(var(--s-2) + 3px); font-size: var(--fs-xs); color: var(--danger); }
+.out-error { overflow-wrap: anywhere; }
+.out-actions { display: inline-flex; gap: var(--s-1); }
+@media (prefers-reduced-motion: reduce) { .out-spin { animation: none; border-right-color: currentColor; opacity: .6; } .out-fill { transition: none; } }
 /* 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; }
@@ -615,8 +651,8 @@ html.lb-open .scroller { overflow: hidden; }
 .p-chat > .panel-head { --bg: var(--chrome-bg); --surface: var(--chrome-surface); --text: var(--chrome-text); --text-2: var(--chrome-text-2); --accent: var(--chrome-accent); background: var(--bg); color: var(--text); }
 .p-chat.th { background: var(--bg); color: var(--text); }
 .p-chat.th .msg.user .body { border-radius: var(--bubble-radius, var(--r-xl)); }
-.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea { font-family: system-ui, -apple-system, "Segoe UI", sans-serif, var(--font-emoji); }
-.p-chat.th-font-mono .thread, .p-chat.th-font-mono .composer textarea { font-family: var(--font-mono); }
+.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea, .p-chat.th-font-system .composer-ph { font-family: system-ui, -apple-system, "Segoe UI", sans-serif, var(--font-emoji); }
+.p-chat.th-font-mono .thread, .p-chat.th-font-mono .composer textarea, .p-chat.th-font-mono .composer-ph { font-family: var(--font-mono); }
 .p-chat.th-bubble-thin .msg.user .body { box-shadow: inset 0 0 0 1px var(--border); }
 .p-chat.th-bubble-accent .msg.user .body { box-shadow: inset 0 0 0 1px var(--accent); }
 .p-chat.th-agent-bubble .msg.agent .body { background: var(--agent-bubble); border-radius: var(--bubble-radius, var(--r-xl)); padding: 10px var(--s-4); }
@@ -750,6 +786,11 @@ img.amb-p { object-fit: contain; }
   font-size: var(--fs-md); line-height: var(--lh-md); resize: none; min-height: 24px; max-height: 240px; overflow-y: auto;
 }
 .composer textarea::placeholder { color: var(--text-3); }
+/* #2478: the placeholder, drawn over the empty box at its text's place: one line ending in "…" (a textarea's own is
+   clipped, never ellipsized). The same size and line as the box's text; it never takes a tap. */
+.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; }
 .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. */
@@ -795,6 +836,8 @@ img.amb-p { object-fit: contain; }
 /* #1939 S2a: Settings → Web → Web authority. */
 .s-web-authority .s-va-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
 .s-web-authority .s-va-sessions li { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; }
+/* #2453: "over your named link" stays one phrase (the list item may break anywhere, CJK included). */
+.s-web-authority .s-va-named { white-space: nowrap; }
 .s-web-authority .s-va-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
 .s-web-authority .save-row { flex-wrap: wrap; }
 /* #1920: a guest's note under the composer — on a phone too, where the key hints are hidden. */
@@ -920,6 +963,8 @@ img.amb-p { object-fit: contain; }
     padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
   .kb-open .tabs { display: none; }
+  /* #2478: with the keyboard up the line under the composer goes too — the box sits on the keyboard; back on blur. */
+  .kb-open .composer-row { display: none; }
   .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; justify-content: center; font-size: 11px; color: var(--text-2); position: relative; }
   .tab.active { color: var(--text); font-weight: var(--fw-semibold); }
   .tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: var(--danger-fill); color: var(--on-danger); font-size: 10px; line-height: 16px; text-align: center; }
@@ -1032,7 +1077,21 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
    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; }
+/* #2401: the count, "shown" under it and Clear under that. The word's width is held by ::before (its text from
+   data-reserve) and idle Clear's by the button itself, both at no height, unseen and out of reach (visibility): the column —
+   and the headers' box beside it — is as wide with a facet set as without. */
+.nav-facet-end { flex: none; margin: 0 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
+.nav-facets .nav-shown { margin: 0; padding: 2px 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
+.nav-shown-word { display: block; }
+.nav-facet-end::before { content: attr(data-reserve); display: block; height: 0; overflow: hidden; visibility: hidden; font-size: var(--fs-xs); white-space: nowrap; }
+.nav-facet-end .is-idle { visibility: hidden; height: 0; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; overflow: hidden; }
+/* No open list beside it (.compact): one cell of one line, as wide as the count or Clear; a facet set, Clear in the count's
+   place (the count transparent, still read; the word for a screen reader only, so its width is not held here). */
+.nav-facets.compact .nav-facet-end { display: grid; justify-items: end; align-items: center; }
+.nav-facets.compact .nav-facet-end > * { grid-area: 1 / 1; margin: 0; }
+.nav-facets.compact .nav-facet-end::before { display: none; }
+.nav-facets.compact .nav-shown.is-set { opacity: 0; pointer-events: none; }
+.nav-facets.compact .nav-shown-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 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);
@@ -1041,10 +1100,15 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .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); }
+/* #2401: the summary takes only the room its line has left — never counted when the headers wrap (contain: inline-size,
+   its gap taken back), so a facet set never sends a header to a line of its own; the header holding it grows into the rest. */
+.nav-facet.has-sum { flex-grow: 1; }
+.nav-facet.has-sum .nav-facet-head { width: 100%; }
+.nav-facet-sum { contain: inline-size; flex: 1 1 0; margin-left: calc(-1 * var(--s-1)); padding-left: var(--s-1); }
 .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); }
+.nav-facet-reset { font-size: var(--fs-xs); flex: none; white-space: nowrap; margin-top: 2px; padding: 2px 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); }
@@ -1102,7 +1166,45 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 /* #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-head h2 { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
+/* The usage view's compact mode (usage-dialog.js CompactGroup / CompactRow), the user's pick (2026-10-22): the logins
+   grouped by provider (its name once, in small capitals), each in three short lines — its name and plan with the
+   soonest reset on the right, then each window as a labelled full-width bar and the percent. */
+.dlg-tools { display: inline-flex; align-items: center; flex: none; }
+.u-compact-toggle { flex: none; }
+/* flex: none — a group never shrinks to fit the rail (it would clip its accounts): the rail scrolls instead. */
+.u-cgroup { flex: none; display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+.u-cg-head { display: flex; align-items: baseline; gap: 4px; padding: 7px var(--s-3) 3px; font-size: 11px; font-weight: var(--fw-semibold);
+  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
+.u-cg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-cg-count { flex: none; }
+.u-crow { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; padding: 6px var(--s-3); border: 0; border-top: 1px solid var(--border);
+  background: transparent; color: inherit; font: inherit; line-height: 1.3; text-align: left; cursor: pointer; }
+.u-cg-head + .u-crow { border-top: 0; }
+.u-crow:hover { background: var(--surface-2); }
+/* #2478 (Prism r1): the compact rows sit in .u-cgroup, rounded and clipping (overflow: hidden) — the bar keeps clear of
+   its 12 px corners (4 px in, 6 px off the row's ends) and there is no full-width underline to be rounded at the ends:
+   the bar is the focus mark (hover has none). */
+.u-crow:focus-visible { outline: none; background: var(--surface-2); --lbar-left: var(--s-1); --lbar-inset: 6px; }
+/* The name never gives way to the plan (#2415); the reset keeps its room on the right. */
+.u-crow-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); }
+.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; }
+.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-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); }
+.u-cm-pct { text-align: right; font-size: 13px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text); }
+.u-cm-pct.warn { color: var(--warn); } .u-cm-pct.crit { color: var(--danger); }
+.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); }
+@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; } }
 @media (max-width: 899px) {
@@ -1460,6 +1562,49 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .oc-tools { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: var(--s-2); }
   .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); }
+.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; }
+.oo-people { position: relative; }
+/* #2399: the offices' minimal editor (fleet-office-editor.js) — one row per office, its members unfolded under it. */
+.oe-form { border: 0; margin: 0; padding: 0; min-width: 0; }
+/* #2431: after a 409, the two ways on (keep my edits, load theirs), side by side; they wrap on a phone. */
+.oe-conflict { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
+.oe-list { list-style: none; margin: var(--s-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
+.oe-row { padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2); }
+.oe-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
+.oe-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.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; }
+.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; }
+.oo-people > .btn.on { border-color: var(--accent); }
+.oo-people-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(280px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
+.oo-people-pop input[type="search"] { width: 100%; height: 32px; }
+.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-canvas.hot { cursor: pointer; }
+.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;
+  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); }
+@media (max-width: 640px) {
+  .oo-stage { height: calc(100dvh - 300px); min-height: 340px; }
+  .oo-pick .tb-select { max-width: 150px; }
+}
 /* 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; }
@@ -1779,6 +1924,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .chat-fx-notice > span { display: block; }
 
 /* ── #2293: global search — the sidebar row's shortcut, the header's button (collapsed sidebar, phone), the dialog ── */
+/* #2478: a touch screen has no Ctrl/⌘ K — the shortcut's hint is not shown there (the row is). */
+@media (pointer: coarse) { .side-search .kbd-hint { display: none; } }
 .kbd-hint { font: inherit; font-size: var(--fs-xs); color: var(--text-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 var(--s-1); line-height: 18px; white-space: nowrap; }
 .panel-head .sb-search { display: none; }
 .sb-collapsed .panel-head .sb-search { display: inline-flex; }
@@ -1804,15 +1951,17 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .search-note { color: var(--warn); }
 .search-recent-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3) 0; color: var(--text-3); font-size: var(--fs-xs); }
 .search-recent ul { list-style: none; margin: 0; padding: 0; }
-.search-recent-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
-.search-recent-item:hover { background: var(--surface-2); }
+.search-recent-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; border: 0; border-radius: 0; --lbar-inset: 4px; background: transparent; color: var(--text); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
+.search-recent-item:hover, .search-recent-item:focus-visible { background: var(--surface-2); }
+/* Keyboard focus: the bar and a straight underline (no rounded ring). */
+.search-recent-item:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--focus); }
 .search-recent-item svg { color: var(--text-3); flex: none; }
 .search-results.stale { opacity: 0.6; }
 .search-group + .search-group { margin-top: var(--s-2); }
 .search-group-head { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
 .search-count { color: var(--text-3); font-weight: var(--fw-regular); }
-.search-row { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer; }
-.search-row.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
+.search-row { padding: var(--s-2) var(--s-3); border-radius: 0; cursor: pointer; }
+.search-row.on { background: var(--surface-2); }
 .search-row-top { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
 .search-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .search-kind { color: var(--text-3); }
@@ -1826,8 +1975,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .search-detail-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-2); font-size: var(--fs-sm); }
 .search-detail-head .chip-btn { display: inline-flex; align-items: center; gap: 4px; }
 .search-ctx { list-style: none; margin: 0; padding: 0 var(--s-1); display: flex; flex-direction: column; gap: var(--s-1); }
-.search-ctx-line { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
-.search-ctx-line.here { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
+.search-ctx-line { padding: var(--s-2) var(--s-3); border-radius: 0; }
+.search-ctx-line.here { background: var(--surface-2); }
 .search-ctx-text { margin-top: 2px; font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
 .search-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-1) var(--s-1); }
 @media (max-width: 899px) {
@@ -2003,9 +2152,9 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .tw-desc { margin: 0; font-size: var(--fs-xs); overflow-wrap: anywhere; }
 .tw-none { margin: 0; font-size: var(--fs-xs); }
 .tw-lines { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
-.tw-line { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; padding: 2px var(--s-1); background: none; border: 0; border-radius: var(--r-sm); color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tw-line { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; padding: 2px var(--s-1); background: none; border: 0; border-radius: 0; --lbar-inset: 2px; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
 .tw-line:hover { background: var(--surface-2); }
-.tw-line:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.tw-line:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--focus); }
 .tw-kind { flex-shrink: 0; min-width: 4.5em; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-2); }
 .tw-kind.k-doing { color: var(--accent); }
 .tw-kind.k-blocked, .tw-kind.k-back { color: var(--danger); }

package/dist/ui/shared/guest-refused.js

@@ -0,0 +1,35 @@
+// What a guest's browser is shown for a page it cannot open. Loaded from /assets/guest-refused.js.
+//
+// The gate answers a guest's navigation with this page instead of its JSON (#2399 smoke): "members" for a page that is
+// not a guest's (Fleet, Settings…), "ended" when no chat is shared with the guest any more. The page's words are in
+// the browser's language, as the sign-in page's are; the HTML carries the English for a browser without scripts.
+(() => {
+  "use strict";
+  const T = {
+    en: {
+      members_title: "This page is not open to guests",
+      members_lead: "This page is for the fleet's members. As a guest you can use the chats shared with you.",
+      members_go: "Open your chats",
+      ended_title: "No chats are shared with you",
+      ended_lead: "Your guest access on this fleet has no chat now — you may have left the room it came from. Ask whoever invited you to share a chat with you again.",
+    },
+    "zh-TW": {
+      members_title: "訪客無法開啟這個頁面",
+      members_lead: "這個頁面只給 fleet 的成員使用。身為訪客，你可以使用分享給你的聊天。",
+      members_go: "打開你的聊天",
+      ended_title: "目前沒有分享給你的聊天",
+      ended_lead: "你在這個 fleet 的訪客權限目前沒有任何聊天——你可能已經離開當初的頻道。請聯絡邀請你的人，再分享聊天給你。",
+    },
+  };
+  const lang = /^zh/i.test(navigator.language || "") ? "zh-TW" : "en";
+  const t = (k) => T[lang][k] || T.en[k] || k;
+  document.documentElement.lang = lang === "zh-TW" ? "zh-Hant" : "en";
+  const main = document.getElementById("refused");
+  const why = main && main.dataset.why === "ended" ? "ended" : "members";
+  document.getElementById("title").textContent = t(`${why}_title`);
+  document.getElementById("lead").textContent = t(`${why}_lead`);
+  // Nothing to open when no chat is shared (the chats would answer this page again): no button then.
+  const go = document.getElementById("go");
+  if (go) { if (why === "ended") go.remove(); else go.textContent = t("members_go"); }
+  document.title = `AgEnD — ${t(`${why}_title`)}`;
+})();

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

@@ -9,7 +9,7 @@ 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 { UsageBody, UsageDialog } from "./usage-dialog.js";
+import { UsageBody, UsageCompactToggle, UsageDialog } from "./usage-dialog.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
@@ -126,7 +126,7 @@ export function UsageRail({ route }) {
   const { open } = useStore(usageRailStore);
   if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) return null;
   return html`<aside data-trust="usage" class="u-rail" aria-label=${t("view.usage.title_plain")}>
-    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2>
+    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2><${UsageCompactToggle} />
       <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>`;