@songsid/agend 2.3.0-beta.15 → 2.3.0-beta.17

package/dist/ui/chat-thread.js

@@ -28,6 +28,7 @@ const P = () => globalThis.AgendPreview;
 /** #1672: a status line longer than this (lines, or characters) is folded until it is opened. */
 export const STATUS_FOLD_LINES = 6;
 export const STATUS_FOLD_CHARS = 600;
+const REPLY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>';
 const COPY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 
 /** Escapes & " ' < >: safe for text and inside a quoted attribute. */
@@ -141,7 +142,22 @@ export function createThread(list, scroller, opts) {
     const buttons = x.role === "agent" ? replyButtonsHtml(x.buttons) : "";
     // A person's click on a reply button shows as the button's label, never the line the agent was given (its value).
     const clicked = x.role === "user" && x.click && typeof x.click.label === "string";
-    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div><div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${tools}</div>`;
+    // #2272: reply to it — a hover strip at its top right (phones: swipe left or long-press; R on a focused message).
+    const key = msgKey(x);
+    const act = opts.canReply?.() === false ? "" : `<div data-trust="thread-control" class="msg-actions"><button type="button" class="chip-btn icon-only" data-act="reply" data-arg="${escAttr(key)}" title="${escAttr(tr("chat.reply"))}" aria-label="${escAttr(tr("chat.reply"))}">${REPLY}</button></div>`;
+    return `<div class="msg ${u ? "user" : "agent"}" data-key="${escAttr(key)}" tabindex="-1">${act}<div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div>${quoteHtml(x.replyTo)}<div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${tools}</div>`;
+  }
+  /**
+   * #2272: what a reply quotes, above its body — the quoted sender and first words (or that it had files), as the server
+   * read them when it was sent; a button that shows that message. A guest that may not see it gets only "an earlier
+   * message". Text only: everything is escaped.
+   */
+  function quoteHtml(q) {
+    if (!q || typeof q !== "object" || typeof q.boot !== "string" || typeof q.id !== "number") return "";
+    const words = q.hidden ? tr("chat.replyHidden")
+      : (typeof q.text === "string" && q.text) || (q.media === "photo" ? tr("chat.replyPhoto") : q.media === "document" ? tr("chat.replyFile") : "");
+    const who = !q.hidden && typeof q.sender === "string" && q.sender ? `<span class="quote-sender">${escAttr(q.sender)}</span> ` : "";
+    return `<button type="button" data-trust="thread-control" class="msg-quote" data-act="jumpQuote" data-arg="${escAttr(`${q.boot}-${q.id}`)}" title="${escAttr(tr("chat.replyJump"))}"><span class="quote-mark">${REPLY}</span> ${who}<span class="quote-text">${escAttr(words)}</span></button>`;
   }
   /**
    * A button click as a chip: 🔘 and the label (escaped: the label is the agent's text). With `of` (live, while its
@@ -656,8 +672,20 @@ export function createThread(list, scroller, opts) {
     }
     armDay();
     armPolls();
+    rove();
     return added;
   }
+  /**
+   * #2272 (review): one message in the thread is in the Tab order — the last one focused while it is still drawn, else
+   * the newest; ↑/↓ move between messages (chat-msg-actions.js). The rest are -1, so Tab passes the thread in one step.
+   */
+  let roving = null;
+  function rove(key) {
+    if (key !== undefined) roving = key;
+    const at = (roving && nodes.has(roving) ? nodes.get(roving).node : null) || [...list.querySelectorAll(".msg[data-key]")].at(-1) || null;
+    for (const el of list.querySelectorAll('.msg[data-key][tabindex="0"]')) if (el !== at) el.setAttribute("tabindex", "-1");
+    if (at) at.setAttribute("tabindex", "0");
+  }
 
   function onScroll() {
     // #2158: the thread got shorter under a pinned view (text settling on a cold load, a card) and the browser clamped
@@ -742,7 +770,21 @@ export function createThread(list, scroller, opts) {
       if (trialStatus(row) === "ready" && opts.canTryEffect?.(row) === true) opts.startEffectTrial?.(row);
       else opts.fixEffectTrial?.(row, trialStatus(row));
     } else if (act === "showButtons") { const x = msgs.find(y => y.buttons && y.buttons.id === el.dataset.arg); if (x) reveal(msgKey(x)); }
+    else if (act === "reply") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) opts.startReply?.(x); }
+    else if (act === "jumpQuote") void jumpTo(el.dataset.arg);
   }
+  /**
+   * #2272: show the message a reply quotes, flashed — drawn now, or after the chat reads back the longest history the
+   * server keeps; otherwise it says it is no longer there.
+   */
+  async function jumpTo(key) {
+    if (typeof key !== "string" || !key) return;
+    if (reveal(key)) return;
+    const found = opts.findQuoted ? await opts.findQuoted(key) : false;
+    if (!found || !reveal(key)) opts.notice?.(tr("chat.replyGone"));
+  }
+  /** #2272: a drawn message's row (for the message menu and gestures), or undefined. */
+  function messageOf(key) { return msgs.find(y => msgKey(y) === key); }
 
   /** The thread goes (the chat left, or another instance opened): every preview in it stops first. */
   /**
@@ -785,5 +827,5 @@ export function createThread(list, scroller, opts) {
     armPolls();
   }
 
-  return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, park, attach, dispose, nodes, get unseen() { return unseen; } };
+  return { render, onScroll, onClick, jumpLatest, reveal, jumpTo, messageOf, rove, refreshCards, park, attach, dispose, nodes, get unseen() { return unseen; } };
 }

package/dist/ui/panel-chat.js

@@ -66,6 +66,7 @@ import "./chat-strings.js";
 import { confirmedWrite, selfConfirmed } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
 import { createThread, msgKey } from "./chat-thread.js";
+import { installMessageActions } from "./chat-msg-actions.js";
 import { createEmojiIndex } from "./chat-emojis.js";
 import { pollPublicPreview } from "./preview-status.js";
 import { createMentionIndex } from "./chat-mentions.js";
@@ -419,6 +420,10 @@ function threadEntry(name, doc) {
     canTryEffect: x => getAppEffects()?.canTry(x) === true,
     startEffectTrial: x => { const seq = navStore.get().seq; void getAppEffects()?.startTrial(x).then(ok => { if (!ok && e.sink && navStore.get().seq === seq && document.hasFocus?.() === true && document.visibilityState === "visible") toast(t("chat.effectTrialUnavailable")); }); },
     clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
+    // #2272: reply to a message (the bar above the composer), and show the one a reply quotes.
+    startReply: (x) => { store.startReply(name, x); doc.getElementById("msgIn")?.focus(); },
+    findQuoted: (key) => store.findQuoted(name, key),
+    notice: (text) => toast(text, false),
     replyButtonBusy: (id) => store.state.rbBusy.has(id),
     pollMine: (id) => store.state.pollMine[id],                            // #1823: this device's own vote
     serverNow: () => Date.now() + store.state.clockSkew,                   // #1823: the deadline is the server's
@@ -484,8 +489,18 @@ function Thread({ name, th }) {
     const onScroll = () => { store.state.scrollMemo[name] = thread.onScroll(); };
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
+    // #2272: the message menu, swipe left / long-press on a phone, R on a focused message.
+    const offActions = installMessageActions(ls, {
+      t, messageOf: thread.messageOf, rove: thread.rove, reply: (x) => { store.startReply(name, x); document.getElementById("msgIn")?.focus(); },
+      copyText, notice: (text, ok = true) => toast(text, ok),
+      linkOf: (x) => `${location.origin}/ui/chat/${encodeURIComponent(name)}#m=${msgKey(x)}`,
+    });
+    // A copied message link (#m=<boot>-<id>): show that message, flashed.
+    const linked = /^#m=([0-9a-f]{1,32}-\d{1,15})$/.exec(location.hash);
+    if (linked) void thread.jumpTo(linked[1]);
     return () => {
       unfollow();
+      offActions();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       e.sink = null;
@@ -525,6 +540,13 @@ function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
   </div></div>`;
 }
 
+/** #2233: the public link's page — the dashboard's Sign in is refused there, so it is never offered (#2262 review). */
+const publicLinkPage = () => typeof document !== "undefined" && !!document.body && document.body.dataset.publicLink === "1";
+/** #2233: a backend's "not signed in" choice offers Sign in (the module behind the session gate, loaded when asked). */
+function openBackendSignIn(backend) {
+  import("./backend-signin.js").then((m) => m.openSignIn({ backend }), () => toast(t("app.loadFailed"), false));
+}
+
 /** #1269: what the last chat command answered — its text, why it was refused, or a list to choose from. */
 function CommandCard({ name, lease }) {
   const c = store.state.commands[name];
@@ -543,6 +565,8 @@ function CommandCard({ name, lease }) {
     ${c.choices ? html`<div class="cmd-choices" role="group" aria-label=${t("chat.cmdChoose")}>${c.choices.options.map((o) => html`<button key=${o.id} type="button"
       class=${`btn btn-sm${o.id === c.choices.current ? " current" : ""}`} aria-current=${o.id === c.choices.current ? "true" : undefined}
       disabled=${!!o.disabled} title=${o.disabled || undefined} onClick=${() => { if (!o.disabled) run(o.id); }}>${o.label}</button>`)}</div>` : null}
+    ${c.choices && c.choices.options.some((o) => o.signIn) && !publicLinkPage() ? html`<div class="cmd-choices" role="group" aria-label=${t("chat.cmdSignIn")}>${c.choices.options.filter((o) => o.signIn).map((o) => html`<button
+      key=${`signin:${o.signIn}`} type="button" class="btn btn-sm btn-primary" onClick=${() => openBackendSignIn(o.signIn)}>${t("chat.cmdSignInTo", o.signIn)}</button>`)}</div>` : null}
   </div>`;
 }
 
@@ -589,6 +613,12 @@ function WorkBar({ name, lease, exec, awaiting, workingLabel }) {
       : html`<span class="elapsed" title=${t("chat.elapsedTitle")} aria-hidden="true">${since == null ? "" : R().formatElapsed(performance.now() - since)}</span>`}</div>`;
 }
 
+/** #2272: the reply bar's quote — the first ~80 characters, or what it had instead of text. */
+function replySnippet(r) {
+  const text = r.text ? (r.text.length > 80 ? `${r.text.slice(0, 79).trimEnd()}…` : r.text) : "";
+  return text || (r.media === "photo" ? t("chat.replyPhoto") : r.media === "document" ? t("chat.replyFile") : "");
+}
+
 function Composer({ name, lease, busy }) {
   const s = store.state;
   const input = useRef(null), fileIn = useRef(null);
@@ -597,6 +627,7 @@ function Composer({ name, lease, busy }) {
   const [closedFor, setClosedFor] = useState(null);    // the draft the palette was closed on (Esc); it opens again on change
   const value = s.drafts[name] || "";
   const files = s.pendingFiles[name] || [];
+  const reply = s.replies[name];                       // #2272: the message this one will reply to
   const content = !!value.trim() || files.length > 0;
   // A file waiting: what goes is a message with its file, never a command (no palette, no command line). A guest never
   // runs one (#1920: the server refuses its slash text), so it has no palette either.
@@ -637,6 +668,7 @@ function Composer({ name, lease, busy }) {
     }
     if (pick && e.key === "Tab" && !e.shiftKey) { e.preventDefault(); complete(pick); return; }
     if (palette && e.key === "Escape" && !e.isComposing) { e.preventDefault(); setClosedFor(value); return; }
+    if (reply && e.key === "Escape" && !e.isComposing) { e.preventDefault(); store.clearReply(name); return; }   // #2272
     if (R().composerKey(e) === "send") { e.preventDefault(); submit(); }
   };
   const onInput = (e) => { setValue(e.target.value); };
@@ -655,6 +687,11 @@ function Composer({ name, lease, busy }) {
           <span class="cmd-name mono">/${c.name}${c.arg ? html` <span class="cmd-arg">${c.arg}</span>` : null}</span><span class="cmd-desc">${t(`chat.cmd_${c.name}`)}</span></li>`)
         : html`<li class="cmd-none" role="option" aria-selected="false">${t("chat.cmdNotCommand")}</li>`}
     </ul>` : null}
+    ${reply ? html`<div class="reply-bar" data-trust="composer" role="status">
+      <span class="reply-mark" aria-hidden="true"><svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg></span><span class="reply-label">${t("chat.replyingTo", reply.sender)}</span>
+      <span class="reply-text">${replySnippet(reply)}</span>
+      <button type="button" class="icon-btn reply-cancel" title=${t("chat.replyCancel")} aria-label=${t("chat.replyCancel")} onClick=${() => { store.clearReply(name); input.current?.focus(); }}><${Icon} name="close" size=${14} /></button>
+    </div>` : null}
     ${files.length ? html`<div class="pending-files">${files.map((f, i) => html`<${FileChip} key=${`${f.name}-${i}`} f=${f} i=${i} name=${name} />`)}</div>` : null}
     <div class="composer">
       <button id="attachBtn" type="button" class="icon-btn" title=${t("chat.attachTitle")} aria-label=${t("chat.attachTitle")} onClick=${() => fileIn.current && fileIn.current.click()}><${Icon} name="attach" /></button>

package/dist/ui/panel-needs.js

@@ -20,11 +20,12 @@ import { Empty } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { notifyStore, notifySupport, reasonText, refreshNotify, setNotify } from "/assets/app-needs.js";
+import { openSignIn, signInOffered } from "./backend-signin.js";
 
 register("needs", {
   en: {
     title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in your chat app's General.", emptyHintWeb: "When an agent waits for you, it shows here.",
-    open: "Open chat", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
+    open: "Open chat", signIn: "Sign in", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
     ageNow: "just now", ageMin: "{0} min", ageHour: "{0} h", ageDay: "{0} d",
     notifyTitle: "Notify me on this device", notifyOn: "Notifications are on for this browser while a tab is open.",
     notifyOff: "Get a desktop notification when something new needs you while this tab is in the background.",
@@ -36,7 +37,7 @@ register("needs", {
   },
   "zh-TW": {
     title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在聊天 app 的 General。", emptyHintWeb: "agent 在等你時，會出現在這裡。",
-    open: "開啟聊天", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
+    open: "開啟聊天", signIn: "登入", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
     ageNow: "剛剛", ageMin: "{0} 分鐘", ageHour: "{0} 小時", ageDay: "{0} 天",
     notifyTitle: "在這台裝置通知我", notifyOn: "這個瀏覽器的通知已開啟（需要開著分頁）。",
     notifyOff: "分頁在背景時，有新的事等你處理就跳出桌面通知。",
@@ -185,6 +186,7 @@ function NeedsItem({ item, nowMs, owner }) {
             disabled=${promptBusy} onClick=${() => answer(a.id)}>${(p ? p.busy : fallback === "busy") ? tn("answering") : a.label}</button>`) : null}
         ${item.type === "delivery" ? html`<button type="button" class="btn btn-sm" disabled=${!!ack} onClick=${acknowledge}>
             <${Icon} name="check" size=${14} />${ack === "busy" ? tn("acknowledging") : tn("acknowledge")}</button>` : null}
+        ${item.reason === "auth_paused" && item.signIn && signInOffered() ? html`<button type="button" class="btn btn-sm btn-primary" onClick=${() => openSignIn(item.signIn)}>${tn("signIn")}</button>` : null}
         <a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn("open")}</a>
       </div>
     </div>

package/dist/ui/panel-settings.js

@@ -45,6 +45,7 @@ import "./chat-strings.js";
 import { AppearanceSection } from "./settings-appearance.js";
 import { GuestsCard } from "./settings-guests.js";
 import { WebAuthorityCard } from "./settings-web-authority.js";
+import { SignInList } from "./backend-signin.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 /** What a refused change says to a person: the server's code in words (the code itself only for one not listed). */
@@ -475,8 +476,10 @@ function Agents({ ctx, search, openDialog }) {
   };
   const head = html`<div class="list-head"><span>${Object.keys(insts).length === 1 ? tn("countAgent") : tn("countAgents", Object.keys(insts).length)}</span>
     <button type="button" class="btn btn-primary" onClick=${() => openDialog({ kind: "create" })}><${Icon} name="plus" size=${16} />${tn("newAgent")}</button></div>`;
-  if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />`;
-  if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />`;
+  // #2233: after the agents, each login on this machine with Sign in (backend-signin.js).
+  const signIns = html`<${SignInList} />`;
+  if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />${signIns}`;
+  if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />${signIns}`;
   return html`${head}<div class="s-list">${groups.map(({ group, names }) => {
     const folded = collapsed.has(group) && !search.trim();      // searching opens every group
     return html`<section key=${group} class="s-group">
@@ -508,7 +511,7 @@ function Agents({ ctx, search, openDialog }) {
         </div>`;
       })}
     </section>`;
-  })}</div>`;
+  })}</div>${signIns}`;
 }
 
 function ConnectionRetry({ id, ctx }) {

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

@@ -20,7 +20,7 @@ import { OwnerCssKeepBar } from "./owner-css.js";
 import { AgentWidget, fleetBinds, sidebarWidget, sidebarWidgetStore } from "./agent-widget.js";
 
 /** Shell state shared with panels: the phone drawer, the collapsed sidebar, extensions a panel module adds. */
-export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null });
+export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null, banner: null });
 
 /**
  * The mounted panel's own sidebar section, in place of the instance list (View's roster: its groups, filter and order,
@@ -617,6 +617,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     <main id="main" class="main" tabindex="-1" inert=${shell.drawer && narrow() ? true : undefined}>
       <${ConnectionLine} />
       ${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} />
     </main>
     ${guest ? null : html`<${UsageRail} route=${nav.route} />`}

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

@@ -32,7 +32,8 @@
 // #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
 // #1918: traffic — a message between instances moved; delegation — a task opened, or its report closed it (SSE only: the
 // org canvas reads /ui/traffic when it has no stream).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation"];
+// #2233: backend_login — a dashboard sign-in started, moved or ended (no details: the page reads its own view).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation", "backend_login"];
 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

@@ -626,6 +626,24 @@ img.amb-p { object-fit: contain; }
 .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); }
 .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; }
+.msg[data-key]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
+.msg-actions { position: absolute; top: -6px; right: 0; z-index: 2; display: flex; gap: var(--s-1); padding: 2px; border-radius: var(--r-sm);
+  background: var(--surface); box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
+.msg:hover > .msg-actions, .msg:focus-within > .msg-actions { opacity: 1; pointer-events: auto; }
+@media (hover: none) { .msg-actions { display: none; } }
+.msg-quote { display: flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 0 4px; padding: 2px var(--s-2); border: 0;
+  border-left: 3px solid var(--border-strong, var(--border)); border-radius: var(--r-sm); background: transparent; color: var(--text-3);
+  font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; overflow: hidden; }
+.msg.user .msg-quote { margin-left: auto; }
+.msg-quote:hover, .msg-quote:focus-visible { color: var(--text-2); background: var(--surface-2); outline: none; }
+.msg-quote .quote-sender { font-weight: var(--fw-semibold); white-space: nowrap; }
+.msg-quote .quote-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg-menu { position: fixed; z-index: 60; min-width: 180px; padding: var(--s-1); border-radius: var(--r-md); background: var(--surface);
+  box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
+.msg[data-key] { transition: transform var(--t-fast); }
+.msg.swipe-ready { box-shadow: 3px 0 0 var(--accent); border-radius: var(--r-sm); }   /* let go now: a reply */
 @media (max-width: 899px) {
   .only-wide { display: none; }
   .pv-divider { display: none; }
@@ -741,6 +759,13 @@ img.amb-p { object-fit: contain; }
 /* #1920: a guest's note under the composer — on a phone too, where the key hints are hidden. */
 .guest-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
 .pending-files { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
+/* #2272: replying — the bar above the composer (who and what is answered; ✕ / Esc cancels). */
+.reply-bar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: var(--s-2) var(--s-2) 0; padding: 4px var(--s-2) 4px var(--s-3);
+  border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
+.reply-bar .reply-mark { color: var(--accent); }
+.reply-bar .reply-label { font-weight: var(--fw-semibold); white-space: nowrap; }
+.reply-bar .reply-text { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.reply-bar .reply-cancel { flex: none; width: 28px; height: 28px; }
 .file-chip { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 4px var(--s-2); border-radius: var(--r-md); background: var(--bg); max-width: 320px; }
 .file-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
 .file-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@@ -1026,6 +1051,11 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .u-meter { height: 10px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
 .u-fill { height: 100%; width: 0; min-width: 3px; border-radius: var(--r-full); background: var(--accent); transition: width 0.3s var(--ease); }
 .u-fill.warn { background: var(--warn); } .u-fill.crit { background: var(--danger); }
+/* Last known numbers (the live read failed): greyed, so they never read as live; the mark says when they were read. */
+.u-provider.is-stale .u-pct, .u-provider.is-stale .u-val, .u-provider.is-stale .u-status { color: var(--text-3); }
+.u-provider.is-stale .u-fill { background: var(--text-3); }
+.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; }
 .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); }
@@ -1181,6 +1211,18 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .op-line { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
 .op-line.ok { color: var(--ok); }
 .op-line.bad { color: var(--danger); }
+/* #2233: the backend sign-in dialog and Settings' list */
+.signin-field { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) 0; }
+.signin-label { color: var(--text-2); font-size: var(--fs-xs); min-width: 6em; }
+.signin-value { font-size: var(--fs-md); letter-spacing: 0.04em; user-select: all; word-break: break-all; }
+.signin-url { color: var(--text-2); font-size: var(--fs-xs); word-break: break-all; }
+.signin-note { color: var(--text-2); font-size: var(--fs-xs); }
+.signin-ok { color: var(--ok); }
+.signin-message { white-space: pre-wrap; }
+.signin-lines { margin: var(--s-2) 0 0; padding-left: 1.2em; color: var(--text-2); font-size: var(--fs-xs); white-space: pre-wrap; }
+.signin-list { margin-top: var(--s-4); }
+.signin-list code { font-size: var(--fs-xs); word-break: break-all; }
+.signin-list .s-meta { white-space: normal; max-width: none; overflow: visible; }
 @media (max-width: 899px) {
   .grid2 { grid-template-columns: minmax(0, 1fr); }
   .se-row { grid-template-columns: minmax(0, 1fr) auto auto; }

package/dist/ui/shared/app.js

@@ -93,6 +93,8 @@ if (mode === "full") {
     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)) });
+    // #2233: a backend sign-in running anywhere is shown on every admin page (the module lives behind the session gate).
+    import("/ui/js/backend-signin.js").then((m) => m.installSignIn(), () => {});
   }
   // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
   // A guest's page only reads them (prefsWritable is false there).

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

@@ -39,6 +39,24 @@ function resetText(iso) {
   if (ms <= 0) return tn("usage.reset.soon");
   return usageText("", { key: "usage.reset.in", args: [usageDuration(ms)] });
 }
+/** "14:05" today, "10/19 14:05" another day, in this browser's time: when last known numbers were read, a window reset. */
+export function usageClock(iso, now = Date.now()) {
+  const at = new Date(iso || "");
+  if (Number.isNaN(at.getTime())) return "";
+  const hm = `${String(at.getHours()).padStart(2, "0")}:${String(at.getMinutes()).padStart(2, "0")}`;
+  return new Date(now).toDateString() === at.toDateString() ? hm : `${at.getMonth() + 1}/${at.getDate()} ${hm}`;
+}
+/**
+ * A row showing its last known numbers (the live read failed; #2236 follow-up): "已過期 · 快取於 14:05" and, for an expiry
+ * or another failure, what to do on a second line (its full text is the mark's tooltip too). A row from an older
+ * server (no `cachedAt`) says its hint, as before.
+ */
+export function staleNote(p) {
+  if (!p.stale) return null;
+  if (!p.cachedAt || !p.staleCause) return { mark: usageText(p.hint || "", p.hintI18n), detail: "" };
+  const detail = p.staleCause !== "transient" && (p.hint || p.hintI18n) ? usageText(p.hint || "", p.hintI18n) : "";
+  return { mark: usageText("", { key: `usage.stale.${p.staleCause}`, args: [usageClock(p.cachedAt)] }), detail };
+}
 function expiryText(iso) {
   if (!iso) return "";
   const at = new Date(iso), ms = at.getTime() - Date.now();
@@ -48,6 +66,8 @@ function expiryText(iso) {
 export function UsageMetric({ m }) {
   const bar = useRef(null);
   const label = usageText(m.label, m.labelI18n);
+  // Its window has reset since these numbers were read: no number and no bar — an old one is never shown as current.
+  if (m.resetPassed) return html`<div class="u-metric u-reset-since"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${usageText("", { key: "usage.metric.reset_since", args: [usageClock(m.resetsAt)] })}</span></div></div>`;
   const note = m.note ? usageText(m.note, m.noteI18n) : "";
   const pct = m.type === "percent" ? Math.min(100, Math.max(0, m.used ?? 0)) : 0;
   useLayoutEffect(() => { if (bar.current) bar.current.style.width = `${pct}%`; }, [pct]);   // CSSOM (#1300)
@@ -70,10 +90,13 @@ export function UsageMetric({ m }) {
 /**
  * #2014: a row's title. A credential profile's row (`profile`; its API `name` is "Claude (<profile>)") shows the
  * provider name on the title line beside the plan badge, and the profile on its own full-width muted line under it;
- * the full name is the tooltip, and the dialog shows the profile unclipped. Any other row: its name.
+ * the full name is the tooltip, and the dialog shows the profile unclipped. The default login's row beside profiles
+ * (`defaultLogin`; "Claude (default)", #2236) does the same with "default" in the page's language, never a clipped
+ * "Claude (d…". Any other row: its name.
  */
 export function providerTitle(p) {
   const name = String((p && p.name) || ""), profile = p && typeof p.profile === "string" && p.profile ? p.profile : "";
+  if (!profile && p && p.defaultLogin === true && name.endsWith(" (default)")) return { base: name.slice(0, -" (default)".length), profile: tn("usage.default_login") };
   const suffix = ` (${profile})`;
   return profile && name.endsWith(suffix) ? { base: name.slice(0, -suffix.length), profile } : { base: name, profile };
 }
@@ -145,14 +168,14 @@ export function UsageBody({ owner }) {
   else {
     const providers = ordered(data.providers);
     content = html`${!providers.length ? html`<p class="note">${tn("usage.empty_active")}</p>` : null}
-      ${providers.map((p, i) => html`<section key=${key(p)} class="u-provider">
+      ${providers.map((p, i) => html`<section key=${key(p)} class=${p.stale ? "u-provider is-stale" : "u-provider"}>
         <div class="u-head"><strong title=${p.name}>${providerTitle(p).base}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
           <span class="u-order">
             <button type="button" class="icon-btn" disabled=${i === 0} aria-label=${tn("usageMoveUp")} title=${tn("usageMoveUp")} onClick=${() => move(key(p), -1, data.providers)}><${Icon} name="up" size=${14} /></button>
             <button type="button" class="icon-btn" disabled=${i === providers.length - 1} aria-label=${tn("usageMoveDown")} title=${tn("usageMoveDown")} onClick=${() => move(key(p), 1, data.providers)}><${Icon} name="down" size=${14} /></button>
           </span></div>
         ${providerTitle(p).profile ? html`<div class="u-profile" title=${p.name}>${providerTitle(p).profile}</div>` : null}
-        ${p.stale ? html`<p class="note">${usageText(p.hint || "", p.hintI18n)}</p>` : null}
+        ${p.stale ? html`<p class="note u-stale" title=${staleNote(p).detail || null}>${staleNote(p).mark}</p>${staleNote(p).detail ? html`<p class="note u-stale-detail">${staleNote(p).detail}</p>` : null}` : null}
         ${p.status === "error" && !p.transient ? html`<p class="u-err">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
           : p.status === "error" && p.transient ? html`<p class="note">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
           : p.status === "no-credentials" ? html`<p class="note">${tn("usage.not_logged_in")}</p>${p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : null}`

package/dist/ui/shared/view-strings.js

@@ -75,6 +75,7 @@ register("view", {
   "usage.title_plain": "AI subscription usage",
   "usage.empty_active": "No active backends with usage tracking",
   "usage.not_logged_in": "not logged in",
+  "usage.default_login": "default",
   "usage.error_fallback": "error",
   "usage.no_data": "no data",
   "usage.reset.in": "resets in {0}",
@@ -137,6 +138,10 @@ register("view", {
   "usage.error.rate_limited": "Rate limited by {0} — try again later.",
   "usage.error.rate_limited_transient": "{0}: can't fetch usage right now (rate limited). This does not affect your agents.",
   "usage.stale_rate_limited": "data from {0} min ago — can't refresh right now",
+  "usage.stale.expired": "expired · cached at {0}",
+  "usage.stale.transient": "not updated · cached at {0}",
+  "usage.stale.error": "couldn't read · cached at {0}",
+  "usage.metric.reset_since": "reset since {0}",
   "usage.error.http": "Usage request failed (HTTP {0}).",
   "usage.error.billing_http": "Billing request failed (HTTP {0}).",
   "usage.error.invalid_response": "Invalid response from usage endpoint.",
@@ -303,6 +308,7 @@ register("view", {
   "usage.title_plain": "AI 訂閱用量",
   "usage.empty_active": "沒有使用中且支援用量追蹤的 Backend",
   "usage.not_logged_in": "未登入",
+  "usage.default_login": "預設",
   "usage.error_fallback": "錯誤",
   "usage.no_data": "無資料",
   "usage.reset.in": "{0} 後重置",
@@ -365,6 +371,10 @@ register("view", {
   "usage.error.rate_limited": "{0} 暫時限制請求速率，請稍後再試。",
   "usage.error.rate_limited_transient": "暫時查不到 {0} 用量（{0} 限制查詢頻率），不影響你的 agent。",
   "usage.stale_rate_limited": "{0} 分鐘前的資料，暫時無法更新",
+  "usage.stale.expired": "已過期 · 快取於 {0}",
+  "usage.stale.transient": "暫時無法更新 · 快取於 {0}",
+  "usage.stale.error": "讀取失敗 · 快取於 {0}",
+  "usage.metric.reset_since": "已於 {0} 重置",
   "usage.error.http": "用量請求失敗（HTTP {0}）。",
   "usage.error.billing_http": "計費請求失敗（HTTP {0}）。",
   "usage.error.invalid_response": "用量端點回傳了無效資料。",

package/dist/ui/web-terminal/terminal.html

@@ -17,7 +17,7 @@
 </header>
 <section id="gate">
   <p>This terminal is connected to <strong>one command only</strong> and closes when it exits or when the time limit lapses. There is no shell behind it.</p>
-  <p>Paste the <strong>access token</strong> you received in chat. It is separate from this link; the link alone grants nothing.</p>
+  <p>Paste the <strong>access token</strong> you were given: privately in chat, or in the dashboard's sign-in dialog. It is separate from this link; the link alone grants nothing.</p>
   <form id="gate-form" autocomplete="off">
     <input id="token" type="text" inputmode="text" autocapitalize="characters" spellcheck="false" placeholder="access token" maxlength="40" required>
     <button type="submit">Open</button>

package/dist/update-launch.d.ts

@@ -43,11 +43,20 @@ export declare function openUpdateLog(logPath: string, header: string): {
 } | null;
 export interface UpdateLaunchDeps {
     platform: string;
+    /** This process's uid: a system manager's scope is root's to ask for (#2274). */
+    uid?(): number;
     cgroup(): Promise<string>;
     version(): Promise<string | null>;
     nonce(): string;
 }
 export declare const defaultUpdateLaunchDeps: UpdateLaunchDeps;
+/**
+ * Which systemd manager runs the service the fleet is in: "user" (a unit below user@UID.service — com.agend.fleet),
+ * "system" (a unit of the system manager — the legacy /etc/systemd/system/agend.service, #2274), false (no service: a
+ * detached fleet), null (unknown: unreadable, or rows that disagree). Unknown is not proof that a detached child can
+ * escape a service's KillMode.
+ */
+export declare function serviceManagerOf(text: string): "user" | "system" | false | null;
 /** Unknown is not proof that a detached child can escape a service's KillMode. */
 export declare function inServiceCgroup(text: string): boolean | null;
 export type UpdateLaunch = {

package/dist/update-launch.js

@@ -69,14 +69,16 @@ function updateTarget(output) {
  */
 export function updateFixHint(output, opts = {}) {
     const target = updateTarget(output);
+    // #2264: one repair for an install left half-done — the installer, which puts back or removes what npm left aside.
+    const installer = `\`curl -fsSL https://songsid.github.io/AgEnD/install.sh | ${target === "<version>" ? "" : `AGEND_VERSION=${target} `}bash\``;
     if (opts.agendGone)
-        return `\`npm install -g @songsid/agend@${target}\``;
+        return installer;
     if (/^npm (?:ERR!|error) code ENOTEMPTY\b/im.test(output)) {
         const named = /^npm (?:ERR!|error) dest (.+)$/im.exec(output)?.[1] ?? /ENOTEMPTY[^\n]*rename '[^'\n]+' -> '([^'\n]+)'/.exec(output)?.[1];
         const ours = named && isAbsolute(named) && !/['"\s\\`$]/.test(named)
             && basename(dirname(named)) === "@songsid" && /^\.agend[A-Za-z0-9._-]*$/.test(basename(named));
         if (ours)
-            return t("update.failure.remove_staging", `\`rm -rf '${named}' && agend update\``);
+            return t("update.failure.remove_staging", installer);
         return null;
     }
     if (/systemd does not know /.test(output))
@@ -144,6 +146,7 @@ function readRunTail(logPath, offset) {
 }
 export const defaultUpdateLaunchDeps = {
     platform: process.platform,
+    uid: () => (typeof process.getuid === "function" ? process.getuid() : -1),
     cgroup: async () => {
         const started = performance.now();
         const result = await readFile("/proc/self/cgroup", { encoding: "utf8", signal: AbortSignal.timeout(2000) });
@@ -165,20 +168,38 @@ export const defaultUpdateLaunchDeps = {
     },
     nonce: () => randomBytes(16).toString("hex"),
 };
-/** Unknown is not proof that a detached child can escape a service's KillMode. */
-export function inServiceCgroup(text) {
+/**
+ * Which systemd manager runs the service the fleet is in: "user" (a unit below user@UID.service — com.agend.fleet),
+ * "system" (a unit of the system manager — the legacy /etc/systemd/system/agend.service, #2274), false (no service: a
+ * detached fleet), null (unknown: unreadable, or rows that disagree). Unknown is not proof that a detached child can
+ * escape a service's KillMode.
+ */
+export function serviceManagerOf(text) {
     if (!text || text.length > 64 * 1024 || text.includes("\0"))
         return null;
     const rows = text.trimEnd().split("\n");
-    let service = false;
+    const managers = new Set();
     for (const row of rows) {
         const parsed = /^(\d+):([^:]*):(\/[^\r\n]*)$/.exec(row);
         if (!parsed || parsed[3].split("/").some(part => part === "." || part === ".."))
             return null;
-        // user@UID.service is the user manager itself, not a fleet stop boundary.
-        service ||= parsed[3].split("/").some(part => part.endsWith(".service") && !/^user@\d+\.service$/.test(part));
+        // user@UID.service is the user manager itself, not a fleet stop boundary: the units below it are the user's.
+        let underUserManager = false;
+        for (const part of parsed[3].split("/")) {
+            if (/^user@\d+\.service$/.test(part))
+                underUserManager = true;
+            else if (part.endsWith(".service"))
+                managers.add(underUserManager ? "user" : "system");
+        }
     }
-    return service;
+    if (managers.size > 1)
+        return null;
+    return managers.size ? [...managers][0] : false;
+}
+/** Unknown is not proof that a detached child can escape a service's KillMode. */
+export function inServiceCgroup(text) {
+    const manager = serviceManagerOf(text);
+    return manager === null ? null : manager !== false;
 }
 /** Same UID, no privileged or remote manager, no credentials in argv. No unsafe detached fallback. */
 export async function resolveUpdateLaunch(agend, deps = defaultUpdateLaunchDeps) {
@@ -192,11 +213,16 @@ export async function resolveUpdateLaunch(agend, deps = defaultUpdateLaunchDeps)
     catch {
         return { ok: false, reason: "cannot read the fleet's service cgroup" };
     }
-    const service = inServiceCgroup(before);
-    if (service === null)
+    const manager = serviceManagerOf(before);
+    if (manager === null)
         return { ok: false, reason: "cannot identify the fleet's service cgroup" };
-    if (!service)
+    if (!manager)
         return { ok: true, ...plain };
+    // #2274: a fleet under the system manager (the legacy agend.service, root) has no user bus; its updater's scope is the
+    // system manager's — which only root may ask for.
+    if (manager === "system" && (deps.uid?.() ?? -1) !== 0) {
+        return { ok: false, reason: "the fleet runs as a system service, and only root can give its updater a scope of its own" };
+    }
     let version;
     try {
         version = await deps.version();
@@ -222,7 +248,7 @@ export async function resolveUpdateLaunch(agend, deps = defaultUpdateLaunchDeps)
     }
     const scope = `agend-updater-${nonce}.scope`;
     return { ok: true, command: "systemd-run", scope, args: [
-            "--user", "--scope", "--quiet", "--collect", "--no-ask-password", `--unit=${scope}`,
+            ...(manager === "user" ? ["--user"] : []), "--scope", "--quiet", "--collect", "--no-ask-password", `--unit=${scope}`,
             ...expansion, "--", plain.command, ...plain.args,
         ] };
 }