@songsid/agend 2.3.3 → 2.3.4-beta.10

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

@@ -27,6 +27,9 @@
 // - every reconnect catches up once the new stream speaks (catchUp(), with the page's cursor — #1566/#1578), so what
 //   was said meanwhile is shown, once.
 // - a 401 is the session ending: nothing is retried (agend-auth.js says so).
+// - M-2260: a catch-up after a long absence carries only the newest messages (the server's budget) and says so
+//   (`truncated`): "gap" tells the chats to read their newest history again — it converges like a reload, never by
+//   asking a slow link for hours of replies in one answer.
 // - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
 // #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
@@ -37,7 +40,7 @@
 // offices — the stored offices changed ({ rev }; SSE only: the Office view reads /ui/offices again).
 // office_skins — a skin pack was uploaded or deleted ({ rev }; SSE only: the Office view reads /ui/office-skins again).
 // office_acts — the agents' live acts in the Office view changed ({ acts }, #2578; a poll page reads /ui/office-acts).
-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", "office_skins", "office_acts", "office_pack_changes"];
+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", "office_skins", "office_acts", "office_pack_changes", "notice"];
 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
@@ -79,6 +82,22 @@ export function createStream(opts) {
     try { return Object.freeze({ source: "sse", receivedAt: now() }); } catch { return undefined; }
   }
   function setConnection(c) { if (state.connection !== c) { state.connection = c; emit("connection", c); } }
+
+  // M-2260: a tab the browser froze for hours gets every heartbeat it missed at once when it wakes — thousands of status
+  // frames, each a whole snapshot, each redrawing the page (seconds of work before the newest message shows). A status
+  // that comes after a quiet moment is delivered at once, as before; more statuses before the next turn of the page's
+  // task loop replace the waiting one, delivered then — or before any other event, so the order of events never changes.
+  // The next turn is a 0 ms timer: in a hidden tab the browser may run it late (a minute when throttled) — a status
+  // then waits that long while nobody looks (Needs you, the title's count and notifications ride `needs`, never held).
+  let pendingStatus = null, statusBurst = false;
+  const turn = () => env.setTimeout(endBurst, 0);
+  function endBurst() { statusBurst = false; flushStatus(); }
+  function flushStatus() { const d = pendingStatus; pendingStatus = null; if (d !== null) live("status", d, null); }
+  function liveStatus(data) {
+    if (statusBurst) { pendingStatus = data; return; }
+    statusBurst = true; turn();
+    live("status", data, null);
+  }
   function setHydration(h) { if (state.hydration !== h) { state.hydration = h; emit("hydration", h); } }
 
   /** A live event: delivered now, or held (in order) while a catch-up snapshot is on its way. */
@@ -115,6 +134,7 @@ export function createStream(opts) {
     if (polling) { if (!opts.join) pollAgain = true; return polling; }
     const mine = ++pollSeq, ep = readEpoch;
     let status = 0;                                  // this read's HTTP status — its own, never another read's
+    flushStatus();                                   // a status that came before this read is older than its snapshot
     if (sse && !held) held = [];
     let limit = null;
     const read = (async () => {
@@ -128,6 +148,9 @@ export function createStream(opts) {
         if (d.status) emit("status", d.status);
         for (const m of d.messages || []) emit("message", m, { source: "poll" });
         if (typeof d.cursor === "string") state.cursor = d.cursor;
+        // M-2260: the server sent only the newest messages of a long absence (its catch-up budget): the chats read their
+        // newest history again, as a reload would, instead of this read carrying everything that was missed.
+        if (d.truncated === true) emit("gap", {});
         if (Array.isArray(d.deliveries)) emit("deliveries", d.deliveries);
         if (Array.isArray(d.prompts)) emit("prompts", d.prompts);
         if (Array.isArray(d.reply_buttons)) for (const u of d.reply_buttons) emit("reply_buttons", u);   // #1266
@@ -157,6 +180,7 @@ export function createStream(opts) {
   }
   /** #1580 review: the page lets go of everything in flight — reads, the queued poll, the catch-up and its retry wait. */
   function cancelWork() {
+    pendingStatus = null;                            // a page let go of (suspend, end, close) draws no waiting status
     readEpoch++; epoch++;
     pollSeq++; polling = null; pollAgain = false; held = null;
     env.clearTimeout(retryTimer); retryTimer = null;
@@ -225,6 +249,8 @@ export function createStream(opts) {
         else alive();
         // #1823: a clock reading is about now, not about order: it is never held behind a catch-up (it would be stale).
         if (name === "clock") { emit(name, data); return; }
+        if (name === "status") { liveStatus(data); return; }
+        flushStatus();                                   // a status waiting goes first: the order never changes
         live(name, data, name === "message" ? e.lastEventId : null, ingress);
       });
     }

package/dist/ui/shared/app.css

@@ -623,9 +623,21 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    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); }
+/* Each line is a row (.st-ln); the line breaks between rows are text for copying, not extra rows. */
+.msg.status-line .st-text { border-left: 2px solid var(--border); padding-left: var(--s-3); }
+.msg.status-line .st-ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.msg.status-line .st-ln:empty::after { content: " "; }
+/* Folded (the user, hmsg-d6ac6dfb): two lines — the header and the first line — each one row with an ellipsis; the
+   button sits at the end of line 2. The text opens it too. */
+.msg.status-line.folded .body { display: flex; align-items: flex-end; gap: var(--s-2); }
+.msg.status-line.folded .st-text { flex: 1 1 auto; min-width: 0; }
+.msg.status-line.folded.overflows .st-text { cursor: pointer; }
+/* Its control only while something is hidden (two short rows that fit: plain, no control). */
+.msg.status-line.folded:not(.overflows) .st-more { display: none; }
+.msg.status-line.folded .st-ln { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
+.msg.status-line.folded .st-ln:nth-child(n+3) { display: none; }
 .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.folded .st-more { flex: none; padding: 0 var(--s-2) 0 0; white-space: nowrap; }
 .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); }
 /* #2147: bounded stock toolbar paint, including fixed descendants. Padding preserves focus outlines. */
@@ -807,6 +819,39 @@ img.amb-p { object-fit: contain; }
 .preview-frame.fill { flex: 1; height: 100%; min-height: 0; }
 .pv-code { flex: 1; min-height: 0; margin: 0; overflow: auto; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
   background: var(--surface); border-radius: var(--r-sm); padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
+/* preview panel chrome (M-2216) — #2911: the version step and the Changes view. */
+.pv-ver { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); color: var(--text-2); }
+.pv-ver-at { min-width: 6ch; text-align: center; font-variant-numeric: tabular-nums; }
+.pv-panel > .pv-ver-note { margin: 0 var(--s-3) var(--s-2); }
+.pv-diff-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.pv-diff-head { font-size: var(--fs-xs); color: var(--text-2); }
+.pv-diff { white-space: pre; overflow-wrap: normal; }
+.pv-diff > code > span { display: block; }
+.pv-diff .d-add { background: var(--ok-bg); color: var(--ok); }
+.pv-diff .d-del { background: var(--danger-bg); color: var(--danger); }
+.pv-diff .d-hunk { color: var(--text-3); }
+.pv-diff-note { margin: 0; }
+/* #2911 (2): the page at a phone's or a tablet's width, centred; a panel narrower than that scrolls sideways. */
+.pv-panel-body.w-phone, .pv-panel-body.w-tablet { overflow-x: auto; }
+/* The frame keeps its 2px warning border (.preview-frame): the holder is that much wider, so the page itself lays out
+   at exactly 390 / 768 CSS px (its innerWidth, its min-width media queries) — #2918 review. */
+.pv-panel-body.w-phone .pv-holder { flex: 1 0 auto; width: calc(390px + 2 * 2px); max-width: none; margin-inline: auto; }
+.pv-panel-body.w-tablet .pv-holder { flex: 1 0 auto; width: calc(768px + 2 * 2px); max-width: none; margin-inline: auto; }
+.pv-width { font: inherit; font-size: var(--fs-xs); padding: 2px var(--s-1); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
+/* Full screen: the API's (:fullscreen), or the panel over the whole window where the page may not use it. */
+/* Three classes, so it wins over the desktop split's ".chat-split > .pv-panel { position: relative; z-index: 1 }" — #2918 review. */
+.pv-panel.pv-fs.pv-fs-native, .pv-panel.pv-fs.pv-fs-immersive { width: auto; min-width: 0; max-width: none; }
+.chat-split > .pv-panel.pv-fs-immersive, .pv-panel.pv-fs.pv-fs-immersive { position: fixed; inset: 0; z-index: 60; }
+/* #2911 (6): the thread's pages. */
+.pv-pages { list-style: none; margin: 0; padding: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--s-1); }
+.pv-page { width: 100%; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--border);
+  border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
+.pv-page.on { border-color: var(--accent); }
+.pv-page-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pv-page-meta { flex: none; color: var(--text-3); font-size: var(--fs-xs); }
+.pv-pages-toggle { flex: none; }
+/* A narrow panel: two rows — versions and views; then the width, the run controls, the page's actions and Download. */
+@container (max-width: 560px) { .pv-panel-bar .grow { flex-basis: 100%; height: 0; } }
 .msg.flash { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); transition: outline-color var(--t-med); }
 /* #2272: a message's reply action (top right, on hover or focus), the quote a reply shows, the message menu, a swipe. */
 .msg[data-key] { position: relative; }
@@ -837,6 +882,10 @@ img.amb-p { object-fit: contain; }
 @container (max-width: 560px) {
   .pv-panel-bar :not(.pv-panel-run) > .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 }
+/* preview feedback (M-2217, #2911): the errors chip — its count stays when a narrow bar hides the word. */
+.pv-fb-errors { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
+.pv-fb-pick.on { color: var(--warn); border-color: var(--warn); }
+.pv-fb-errors .pv-fb-n { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
 /* #1266: an agent reply's buttons — choices under the text; one answers for everyone. */
 .rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
 .rb-btn { max-width: 100%; white-space: normal; text-align: left; }
@@ -1286,6 +1335,21 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 /* #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; }
+/* M-2262: the terminal's box — the scrolling terminal, and its scrollback controls over it (they never scroll with it). */
+/* --v-term-rev: the View's mark (panel-view.js VIEW_REV): a tab still on an older stylesheet reads this one again. */
+.v-term-box { --v-term-rev: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
+.v-term:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.v-term-earlier, .v-term-latest { position: absolute; right: var(--s-4); z-index: 2; display: inline-flex; align-items: center; gap: 4px; opacity: .88; }
+.v-term-earlier { top: var(--s-2); }
+.v-term-latest { bottom: var(--s-3); opacity: 1; }
+.v-term-logbar { flex-shrink: 0; margin: 0; padding: var(--s-2) var(--s-4); background: #111111; border-bottom: 1px solid #2a2a2a; text-align: right; font-size: var(--fs-sm); }
+.v-term-logbar a { display: inline-flex; align-items: center; gap: 4px; color: #9cc8ff; text-decoration: underline; text-underline-offset: 2px; min-height: 28px; }
+@media (pointer: coarse) { .v-term-logbar a { min-height: 44px; } }
+.v-term-latest.has-new { background: var(--accent-fill); border-color: transparent; color: var(--on-accent); }
+.v-term-earlier:hover, .v-term-earlier:focus-visible { opacity: 1; }
+.v-term-history-note { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 2; margin: 0; padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: rgba(20, 20, 20, .92); border: 1px solid #3a3a3a; color: #e0e0e0; font-size: var(--fs-sm); }
+@media (max-width: 600px) { .v-term-history-note { left: var(--s-4); right: var(--s-4); } }
+@media (pointer: coarse) { .v-term-earlier, .v-term-latest { min-height: 44px; padding-left: var(--s-3); padding-right: var(--s-3); } }
 .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); }
 /* #1582: faint text (SGR 2) — a CLI's suggestion or placeholder, never input — stays faint here. */
@@ -1328,6 +1392,11 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .u-stale { font-weight: var(--fw-semibold); }
 .u-stale-detail { color: var(--text-3); font-size: var(--fs-xs); }
 .u-sub { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
+/* #3066 §1: a weekly quota's measured 100% under its bar, and its notes (the fleet-only limit always). */
+.u-cap { margin-top: 4px; font-size: var(--fs-xs); }
+.u-cap-line { color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.u-cap-wait .u-cap-line { color: var(--text-3); }
+.u-cap-note { color: var(--text-3); overflow-wrap: anywhere; }
 .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). */
@@ -1595,6 +1664,11 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .n-detail { color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; white-space: pre-wrap; }
 .n-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
 .n-notify { display: flex; flex-direction: column; gap: var(--s-1); }
+/* #2910 D2: Notices (a web-only fleet's General) — the Needs you rows; a new one has an accent edge and a "New" tag. */
+.n-item.notice.unread { box-shadow: inset 3px 0 0 var(--accent); }
+.n-item.notice:not(.bad) .n-icon { color: var(--text-2); }
+.notice-new { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-semibold); }
+.notice-sub { margin: 0 var(--s-1) var(--s-3); }
 .confirm-text { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--text-2); }
 
 /* ── Org chart (#1389): General → teams → instances. Connectors are borders and pseudo-elements; no inline style.
@@ -1818,6 +1892,12 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oo-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
 .oo-canvas.hot { cursor: pointer; }
 /* The canvas controls, as the org chart canvas's (.oc-zoom, .oc-mini): over the stage's corners. */
+/* #2946: the key to the items carried between desks — a strip under the bar, as the org chart's (.oc-legend). */
+.oo-key { font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 10px; }
+.oo-key-rows { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; }
+.oo-key-row { display: inline-flex; align-items: center; gap: 6px; }
+.oo-key-icon { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
+.oo-key-btn.on { border-color: var(--accent); }
 .oo-zoom { z-index: 6; }
 .oo-zoom .icon-btn { color: var(--text); }
 /* The overview's box (left, top, width, height) is set by the page, inside the stage and scaled to it (miniBox). */
@@ -2036,6 +2116,16 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .us-meta { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
 .us-est { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-3); }
 .us-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+/* #3066 §3: a row's numbers carry small marks (◐ partly priced, † the CLI's amount, ≈ estimated) and "—" with a reason,
+   each said in its tooltip; the key under the table names only the marks that appear. */
+.us-mark { margin-left: 2px; color: var(--text-3); font-size: var(--fs-xs); cursor: help; }
+.us-mark.us-approx { margin-left: 0; margin-right: 1px; }
+.us-none { cursor: help; }
+.us-key { margin-top: 6px; }
+/* #3066 §2: each model's speed after the first token. */
+.us-speed { margin-top: 12px; }
+.us-speed .row-item { gap: 8px; flex-wrap: wrap; }
+.us-speed .num { font-variant-numeric: tabular-nums; }
 .us-trend, .us-heat { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
 .us-trend h3, .us-heat h3, .us-rest h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
 .us-scroll { overflow-x: auto; max-width: 100%; }
@@ -2242,9 +2332,9 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 @media (min-width: 900px) { .chat-split > .pv-divider, .chat-split > .pv-panel { position: relative; z-index: 1; } }
 /* #1629: full-app bounded stock surfaces. Panel roots stay neutral; effects never raise the whole app. */
 .p-fleet > .seg, .p-settings > .seg,
-.p-fleet > .panel-body, .p-needs > .panel-body, .p-settings > .panel-body,
+.p-fleet > .panel-body, .p-needs > .panel-body, .p-notices > .panel-body, .p-settings > .panel-body,
 .p-log > .panel-body, .p-details > .panel-body, .p-view > .panel-body,
-.p-log > .log-bar, .p-view > .v-term, .p-view > .v-id, .p-view > .v-watching { position: relative; z-index: 1; }
+.p-log > .log-bar, .p-view > .v-term-box, .p-view > .v-id, .p-view > .v-watching { position: relative; z-index: 1; }
 /* Keep the existing Apply bar's sticky behavior, in its own bounded stock band. */
 .p-settings > .s-pending { z-index: 1; }
 

package/dist/ui/shared/app.js

@@ -13,7 +13,7 @@ import { installSwipe } from "./app-swipe.js";
 import { installTextUndo } from "./text-undo.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
-import { appStore, applyStatus, applyActivity, guestPage, guestTrusted } from "./app-store.js";
+import { appStore, applyStatus, applyActivity, guestPage, guestTrusted, addNotice, createNoticesSync } from "./app-store.js";
 import { chatPath } from "./app-route.js";
 import { startNeedsNotifier } from "./app-needs.js";
 import { toast } from "./ui-toast.js";
@@ -91,6 +91,27 @@ if (mode === "full") {
     const loadApply = retryable((a) => import(retryUrl("/ui/js/settings-apply.js", a)));
     appStore.set({ restartRunner: (jobId) => loadApply().then((m) => m.restartPendingChanges(jobId)) });
     panels.set("needs", { load: () => loadNeeds().then((m) => m.NeedsPanel) });
+    // #2910 D2: a web-only fleet's Notices (/ui/notices): read once the status says there is no chat connection (and
+    // again after a reconnect: a poll page hears no `notice`), then each new one from the stream.
+    const loadNotices = retryable((a) => import(retryUrl("/ui/js/panel-notices.js", a)));
+    panels.set("notices", { load: () => loadNotices().then((m) => m.NoticesPanel) });
+    // A list read and a live notice can cross: each is merged into what the page has (app-store.js mergeNoticeList); a
+    // read that leaves the page behind what the status frame names is asked again (createNoticesSync).
+    const notices = createNoticesSync({ store: appStore,
+      fetchList: () => fetch("/ui/notices/list", { credentials: "same-origin", cache: "no-store" }).then((r) => (r.ok ? r.json() : null)) });
+    const readNotices = () => notices.read();
+    appStore.set({ readNotices });
+    appStore.subscribe((s) => {
+      if (s.connections === 0) notices.start();
+      notices.recheck();                       // a polling page hears no `notice`: the status frame's newest id is its catch-up
+    });
+    stream.on("connection", (c) => { if ((c === "live" || c === "polling") && notices.started()) readNotices(); });
+    stream.on("notice", (d) => {
+      const cur = appStore.get().notices;
+      if (!cur || !cur.enabled) { readNotices(); return; }
+      const next = addNotice(cur, d && d.notice);
+      if (next !== cur) appStore.set({ notices: next });
+    });
     // #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>).