@songsid/agend 2.2.0-alpha.7 → 2.2.0-alpha.9

package/dist/ui/chat-thread.js

@@ -11,6 +11,16 @@ import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
 
 const R = () => globalThis.AgendChatRender;
+/** #1589: the public link shows attachments as downloads only (its page says so: <body data-public-link="1">). */
+const PUBLIC_LINK = () => globalThis.document?.body?.dataset?.publicLink === "1";
+/** #1589: how much of a text attachment is shown before "Show all". */
+export const TEXT_PREVIEW_LINES = 200;
+/** #1589: the most elements one formatted text card may build (table cells, highlight spans, Markdown elements), Show all
+ *  included. Lines and the 1 MiB read do not bound it (one 200 KB line can be 100,000 cells): past it the card is plain
+ *  text, one text node. */
+export const TEXT_PREVIEW_NODES = 4000;
+/** A csv/tsv wider than this is shown as text, as Markdown tables are capped at 20 columns. */
+export const TEXT_PREVIEW_COLUMNS = 50;
 const P = () => globalThis.AgendPreview;
 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>';
 
@@ -46,7 +56,7 @@ export function createThread(list, scroller, opts) {
     const ticks = u && x.delivery ? R().deliveryHtml(x.delivery, TICKS()) : "";
     const tools = u ? "" : `<div class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
     const buttons = x.role === "agent" ? replyButtonsHtml(x.buttons) : "";
-    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span><span class="time">${time}</span>${ticks}</div><div class="body"><div class="md">${R().renderMarkdown(x.text, x.role === "agent" ? { htmlCards: true } : undefined)}</div>${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable") })}${buttons}</div>${tools}</div>`;
+    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span><span class="time">${time}</span>${ticks}</div><div class="body"><div class="md">${R().renderMarkdown(x.text, x.role === "agent" ? { htmlCards: true } : undefined)}</div>${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${tools}</div>`;
   }
   /**
    * #1266: an agent reply's buttons. Labels are text (escaped, never Markdown); the click names the set and the index,
@@ -69,6 +79,7 @@ export function createThread(list, scroller, opts) {
     const node = tpl.content.firstElementChild;
     decorateCode(node);
     if (x) decorateHtmlCards(node, x, stoppedKeys || []);
+    if (x) decorateTextCards(node, x);
     return node;
   }
 
@@ -117,6 +128,114 @@ export function createThread(list, scroller, opts) {
       buildCard(ph, x, `${msgKey(x)}:a${att.id}`, { att: { id: att.id, name: att.name, size: att.size } }, stoppedKeys);
     }
   }
+  // #1589: a text attachment (md, csv, json, code, plain) gets a card: Show reads the file once (the same capped,
+  // same-origin read as an HTML attachment's) and shows it — Markdown through renderMarkdown (it escapes first), code
+  // through the highlighter (escaped), csv as a table and anything else as text, all built with textContent. Nothing in
+  // the file is ever run: no frame, no script, no HTML of its own.
+  function decorateTextCards(node, x) {
+    const atts = Array.isArray(x.attachments) ? x.attachments : [];
+    for (const ph of node.querySelectorAll(".text-card[data-att]")) {
+      const att = atts.find(a => a && a.id === ph.dataset.att);
+      const type = att ? R().attachmentPreviewType(att) : null;
+      if (!att || !type || type !== ph.dataset.type) continue;
+      buildTextCard(ph, att, type);
+    }
+  }
+  function buildTextCard(ph, att, type) {
+    const doc = list.ownerDocument;
+    const el = (tag, cls, text) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
+    ph.textContent = "";
+    const head = el("div", "tc-head");
+    const label = el("span", "tc-label", att.name);
+    const show = el("button", "btn btn-sm tc-show", tr("chat.tcShow")); show.type = "button";
+    const dl = el("a", "btn btn-sm tc-dl", tr("chat.tcDownload")); dl.href = `/ui/file/${att.id}`; dl.setAttribute("download", att.name);
+    head.append(label, show, dl);
+    const note = el("div", "pv-note");
+    const body = el("div", "tc-body"); body.hidden = true;
+    ph.append(head, note, body);
+    let text = null, reading = false, all = false;
+    const draw = () => {
+      body.textContent = "";
+      const lines = text.split(/\r?\n/);
+      const cut = !all && lines.length > TEXT_PREVIEW_LINES;
+      const shown = cut ? lines.slice(0, TEXT_PREVIEW_LINES) : lines;
+      const src = shown.join("\n");
+      // Formatting is built only within TEXT_PREVIEW_NODES: the markup is measured as a string first, never as DOM.
+      const plain = () => {
+        const pre = el("pre", "tc-pre"), code = el("code", null, src);
+        pre.append(code); body.append(el("div", "pv-note", tr("chat.tcPlain")), pre);
+      };
+      if (type === "md") {
+        const html = R().renderMarkdown(src);
+        if (tagCount(html) > TEXT_PREVIEW_NODES) plain();
+        else { const md = el("div", "md"); md.innerHTML = html; body.append(md); }
+      } else if (type === "csv" || type === "tsv") {
+        const table = csvTable(src, type === "tsv" ? "\t" : ",", el);
+        if (table) body.append(table); else plain();
+      } else {
+        const lang = type === "json" ? "json" : type.startsWith("code:") ? type.slice(5) : "";
+        const lit = lang ? R().highlight(src, lang) : null;
+        if (lit != null && tagCount(lit) > TEXT_PREVIEW_NODES) plain();
+        else {
+          const pre = el("pre", "tc-pre"), code = el("code");
+          if (lit != null) code.innerHTML = lit; else code.textContent = src;
+          pre.append(code); body.append(pre);
+        }
+      }
+      if (cut) {
+        const more = el("button", "btn btn-sm tc-more", trf("chat.tcShowAll", lines.length)); more.type = "button";
+        more.onclick = () => { all = true; draw(); };
+        body.append(more);
+      }
+    };
+    show.onclick = async () => {
+      if (reading) return;
+      if (text !== null) { body.hidden = !body.hidden; show.textContent = tr(body.hidden ? "chat.tcShow" : "chat.tcHide"); return; }
+      reading = true; note.textContent = tr("chat.pvLoading");
+      const r = await loadHtmlAttachment({ id: att.id, name: att.name, size: att.size });
+      reading = false;
+      if (!ph.isConnected) return;                       // the card left the page while it was read: nothing to draw
+      if (!r.ok) { note.textContent = r.reason === "over" ? tr("chat.tcOver") : attReason(r.reason); return; }
+      note.textContent = "";
+      text = r.code;
+      if (type === "json") { try { text = JSON.stringify(JSON.parse(text), null, 2); } catch { /* shown as written */ } }
+      draw();
+      body.hidden = false; show.textContent = tr("chat.tcHide");
+    };
+  }
+  /** How many elements an HTML string would build: its opening tags (escaped text has none). */
+  function tagCount(html) {
+    let n = 0;
+    for (let i = html.indexOf("<"); i !== -1; i = html.indexOf("<", i + 1)) { const c = html.charCodeAt(i + 1); if ((c | 32) >= 97 && (c | 32) <= 122) n++; }
+    return n;
+  }
+  /** A csv/tsv as a table: quoted fields ("a, b", "say ""hi""") kept whole; every cell is textContent. */
+  function csvTable(src, sep, el) {
+    const rows = [];
+    let row = [], cell = "", quoted = false;
+    for (let i = 0; i < src.length; i++) {
+      const c = src[i];
+      if (quoted) {
+        if (c === '"') { if (src[i + 1] === '"') { cell += '"'; i++; } else quoted = false; }
+        else cell += c;
+      } else if (c === '"' && cell === "") quoted = true;
+      else if (c === sep) { row.push(cell); cell = ""; }
+      else if (c === "\n") { row.push(cell.replace(/\r$/, "")); rows.push(row); row = []; cell = ""; }
+      else cell += c;
+    }
+    if (cell !== "" || row.length) { row.push(cell.replace(/\r$/, "")); rows.push(row); }
+    // Within the card's budget, or not a table at all (the caller shows it as text).
+    let cells = 0;
+    for (const r of rows) { cells += r.length; if (r.length > TEXT_PREVIEW_COLUMNS || cells + rows.length > TEXT_PREVIEW_NODES) return null; }
+    const table = el("table", "tc-table");
+    rows.forEach((r, i) => {
+      const tr_ = el("tr");
+      for (const v of r) tr_.append(el(i === 0 ? "th" : "td", null, v));
+      table.append(tr_);
+    });
+    const wrap = el("div", "tc-table-wrap"); wrap.append(table);
+    return wrap;
+  }
   /** Why an attachment's HTML could not be read, for the card's note. */
   const attReason = (reason) => tr(reason === "over" ? "chat.pvAttOver" : reason === "gone" ? "chat.pvAttGone" : "chat.pvAttFailed");
   /** One card: `source` is { n, code } for a fence or { att } for an attachment (its HTML read on the first click). */
@@ -201,11 +320,17 @@ export function createThread(list, scroller, opts) {
     for (const node of list.querySelectorAll(".html-card[data-card], .html-card[data-att]")) { const f = cardRefresh.get(node); if (f) f(); }
   }
 
+  // Near the bottom (48 px slack): where the READER counts as at the newest message — for the pill and for pinning on scroll.
   const nearBottom = () => R().isNearBottom(scroller.scrollTop, scroller.clientHeight, scroller.scrollHeight);
+  // #1584: at the exact bottom — what a pinned view is kept at. The slack is the reader's, not the layout's: a dock that
+  // grew by less than 48 px (the working line, a command card, the composer shrinking after a send) used to leave the
+  // newest bubble clipped behind it, and the next growth past 48 px put the pill over it.
+  const atBottom = () => R().isNearBottom(scroller.scrollTop, scroller.clientHeight, scroller.scrollHeight, 1);
   function reportJump() { opts.onJump({ show: !nearBottom(), unseen }); }
   function toBottom() { scroller.scrollTop = scroller.scrollHeight; pinned = true; lastTop = scroller.scrollTop; }
-  // Sizes change without a scroll event (layout after the render): follow them while pinned.
-  const resized = () => { if (pinned && !nearBottom()) toBottom(); reportJump(); };
+  // Sizes change without a scroll event (layout after the render, the dock under the thread): while pinned, the view
+  // stays flush with the bottom; a reader who scrolled up is never moved.
+  const resized = () => { if (pinned && !atBottom()) toBottom(); reportJump(); };
   const ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
   if (ro) { ro.observe(list); ro.observe(scroller); }
 

package/dist/ui/panel-chat.js

@@ -10,7 +10,7 @@ import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-
 import { t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
-import { PanelHeader, onPanelKey, setTitle, addFooterItem, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
+import { PanelHeader, onPanelKey, setTitle, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
 import { detailsPath } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
 import { HeaderTools } from "/assets/header-tools.js";
@@ -27,7 +27,7 @@ import { createChatStore } from "./chat-store.js";
 import { createThread, msgKey } from "./chat-thread.js";
 import { PreviewPanel, openPanel, panelStore, shownKey } from "./preview-panel.js";
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
-import { installTour, refreshTourSpot, startTour } from "./chat-tour.js";
+import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { FirstRunCard } from "./first-run.js";
 import { LightboxHost, openLightbox } from "./image-lightbox.js";
 
@@ -77,21 +77,11 @@ export function boot({ stream, boot: bootData, deps = {} }) {
     if (auth && typeof auth.sessionHandle === "function") auth.sessionHandle().then((h) => P().setBannerScope(h), () => P().setBannerScope(null));
     else P().setBannerScope(null);
   }
-  addFooterItem("previews", PreviewOptIn);
-  addFooterItem("tour", TourButton);
+  // #1604: the preview opt-in and Tour live in Settings → This device now (and on each preview card's menu).
   installTour();
   return store;
 }
 
-function PreviewOptIn() {
-  const [on, setOn] = useState(P() ? P().optedIn() : false);
-  useEffect(() => (P() ? P().onChange(() => setOn(P().optedIn())) : undefined), []);
-  return html`<label class="side-row toggle"><input type="checkbox" checked=${on} onChange=${(e) => { const want = e.target.checked; setPreviewOptIn(want).then(setOn); }} />
-    <span>${t("chat.previews")}</span></label>`;
-}
-function TourButton() {
-  return html`<button type="button" id="tourBtn" class="side-row" title=${t("chat.tourBtnTitle")} onClick=${startTour}><${Icon} name="info" /><span>${t("chat.tour")}</span></button>`;
-}
 
 // ── Code wrap: this browser's choice (agend_code_wrap). On a phone, code wraps whatever it is (app.css).
 const stored = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
@@ -421,6 +411,7 @@ function Composer({ name, lease, busy }) {
       <button id="stopBtn" type="button" class="btn btn-stop" hidden=${!busy} title=${t("chat.stopReplyTitle")}
         disabled=${!!s.cancelling[name]} onClick=${() => store.cancelReply(name)}><${Icon} name="stop" size=${14} /><span class="stop-label">${t("chat.stopReply")}</span></button>
       <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${busy && !content} disabled=${!content || !!s.sending[name]}
+        onMouseDown=${(e) => e.preventDefault()}
         aria-label=${t("chat.send")} title=${t("chat.send")} onClick=${submit}><${Icon} name="send" size=${16} /><span class="send-label">${t("chat.send")}</span></button>
     </div></div>`;
 }

package/dist/ui/panel-settings.js

@@ -12,9 +12,9 @@ import { html, useEffect, useMemo, useRef, useState } from "/assets/app-html.js"
 import { t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
-import { PanelHeader, PendingChanges, setTitle } from "/assets/app-shell.js";
-import { navigate, setLeaveGuard } from "/assets/app-nav.js";
-import { settingsPath, SETTINGS_SECTIONS } from "/assets/app-route.js";
+import { DevicePrefs, PanelHeader, PendingChanges, setTitle } from "/assets/app-shell.js";
+import { navigate, navStore, setLeaveGuard } from "/assets/app-nav.js";
+import { chatPath, settingsPath, SETTINGS_SECTIONS } from "/assets/app-route.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
@@ -37,9 +37,13 @@ import { SetupWizard } from "./settings-wizard.js";
 import { CreateInstanceDialog } from "./panel-fleet.js";
 import { FirstRunCard, takeWizardRequest } from "./first-run.js";
 import { takeAgentRequest } from "./settings-request.js";
+// #1604: This device — the preview opt-in (one path: the app's confirm, then preview.js) and the tour, from the chat.
+import { setPreviewOptIn } from "./panel-chat.js";
+import { startTour } from "./chat-tour.js";
+import "./chat-strings.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
-const ICONS = { agents: "bot", bots: "plug", classic: "room", general: "sliders", advanced: "code" };
+const ICONS = { device: "user", agents: "bot", bots: "plug", classic: "room", general: "sliders", advanced: "code" };
 const RELEASES = "https://github.com/songsid/AgEnD/releases";
 
 /** GET under the panel's lease → { ok, status, body }. */
@@ -218,7 +222,9 @@ export function SettingsPanel({ route, navKey }) {
     const insts = (ctx.fleet && ctx.fleet.instances) || {};
     if (own(insts, want.name)) setDialog({ kind: "agent", name: want.name, inst: insts[want.name], key: navKey });
   }, [!!ctx, navKey]);
-  const sectionBody = !data ? html`<${Skeleton} lines=${6} />`
+  // #1604: This device needs no configuration: shown at once, whatever the configuration read does.
+  const sectionBody = section === "device" ? html`<${DeviceSection} />`
+    : !data ? html`<${Skeleton} lines=${6} />`
     : data.error ? html`<${ErrorState} message=${tn("configLoadFailed")} onRetry=${reload} />`
     : section === "agents" ? html`<${Agents} ctx=${ctx} search=${search} openDialog=${(d) => setDialog({ ...d, key: navKey })} />`
     : section === "bots" ? html`<${Bots} ctx=${ctx} search=${search} openDialog=${(d) => setDialog({ ...d, key: navKey })} />`
@@ -250,6 +256,49 @@ export function SettingsPanel({ route, navKey }) {
   </div>`;
 }
 
+/**
+ * #1604: what this browser chooses for itself — moved here from the sidebar footer, each with the storage it always had:
+ * theme (theme.js), language (app-i18n.js), HTML previews on this device (preview.js, through the app's confirm), and
+ * the chat tour (replayed on the chat it points at).
+ */
+export function DeviceSection() {
+  const P = () => globalThis.AgendPreview;
+  const [on, setOn] = useState(P() ? P().optedIn() : false);
+  useEffect(() => (P() ? P().onChange(() => setOn(P().optedIn())) : undefined), []);
+  const replay = () => {
+    let last = null;
+    try { last = localStorage.getItem("agend_last_instance"); } catch { /* none */ }
+    navigate(last ? chatPath(last) : "/ui");
+    // This replay belongs to the navigation it just made — that one, by its sequence number, not by URL (A → B → A, or
+    // the same path again, is a new navigation). It did not happen (a leave guard said no) or it is not the chat:
+    // nothing. Left meanwhile (another page, another navigation): nothing (#1609 review).
+    const nav = navStore.get();
+    if (!nav.route || nav.route.panel !== "chat") return;
+    const mine = nav.seq;
+    const current = () => navStore.get().seq === mine;
+    // The tour points at the chat's own controls: start it once the CHAT has drawn — its Send button, not #main (the
+    // shell's landmark is on every page, Settings included) — waiting at most ~3 s (#1608 review); a chat that has not
+    // drawn by then (its module failed, an unknown instance) gets no tour. The focus goes to the composer first: the
+    // tour returns it there when it ends, not to this button, which is gone.
+    let tries = 0;
+    const go = () => {
+      if (!current()) return;
+      if (!document.getElementById("sendBtn")) { if (++tries <= 30) setTimeout(go, 100); return; }
+      const here = document.getElementById("msgIn") || document.getElementById("main");
+      if (here && typeof here.focus === "function") here.focus();
+      if (current()) startTour();
+    };
+    setTimeout(go, 0);
+  };
+  return html`<section class="card s-device"><h3>${tn("sec_device")}</h3>
+    <p class="sub">${tn("deviceLead")}</p>
+    <${DevicePrefs} labels=${true} />
+    ${P() ? html`<label class="check"><input type="checkbox" checked=${on} onChange=${(e) => { const want = e.target.checked; setPreviewOptIn(want).then(setOn); }} />
+      <span>${t("chat.previews")}</span></label>` : null}
+    <div class="s-device-row"><button type="button" id="tourBtn" class="btn" title=${t("chat.tourBtnTitle")} onClick=${replay}><${Icon} name="info" size=${16} />${t("chat.tour")}</button></div>
+  </section>`;
+}
+
 /** The operation in hand still owns Apply: its writes and job, or a restart of AgEnD from the press to its end. */
 const opBusy = (op) => !!op && (["writing", "posting", "watching"].includes(op.phase) || op.restart === "busy");
 function dropSecrets(staged) { for (const c of staged.values()) if (c.connectionSecret) c.connectionSecret.secret = ""; }

package/dist/ui/settings-strings.js

@@ -217,6 +217,7 @@ register("settings", {
     concurrencyWarning: "May exceed CPU capacity on smaller hosts",
     staggerRange: "Must be between 0 and 30000",
     staggerWarning: "Very low values can cause startup spikes",
+    sec_device: "This device", deviceLead: "Choices for this browser only — other devices keep their own.",
     sec_agents: "Agents",
     sec_bots: "Connections",
     sec_classic: "ClassicBot",
@@ -561,6 +562,7 @@ register("settings", {
     concurrencyWarning: "在較小的主機上可能超出 CPU 負荷",
     staggerRange: "必須介於 0 到 30000",
     staggerWarning: "數值太低可能造成啟動尖峰",
+    sec_device: "這台裝置", deviceLead: "只套用在這個瀏覽器，其他裝置保留各自的設定。",
     sec_agents: "Agent",
     sec_bots: "連線",
     sec_classic: "ClassicBot",

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

@@ -45,11 +45,11 @@ register("app", {
     needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
     textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage",
     statusRunning: "running", statusStopped: "stopped", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
-    connPolling: "Live updates paused — refreshing every 5 s", connDown: "Disconnected — trying again…", connConnecting: "Connecting…",
+    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…",
     noInstances: "No instances yet", noInstancesHint: "Create one to start chatting.",
-    session: "Session", signIn: "Sign in", signedIn: "Signed in", signedOut: "Not signed in", thisDevice: "This device",
+    session: "Session", signIn: "Sign in", signedIn: "Signed in", signedOut: "Not signed in", thisDevice: "This device", devicePrefs: "Theme and language",
     lastActive: "active {0}", justNow: "just now", minAgo: "{0} min ago", hrAgo: "{0} h ago", signOut: "Sign out",
     signOutAll: "Sign out everywhere", devices: "Signed-in devices", expires: "Ends by {0} at the latest, or after {1} unused",
     failed: "That did not work — try again.", close: "Close", more: "More actions", menu: "Menu",
@@ -74,11 +74,11 @@ register("app", {
     needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",
     textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "剛好填滿", usage: "用量",
     statusRunning: "執行中", statusStopped: "已停止", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
-    connPolling: "即時更新暫停中——每 5 秒重新整理", connDown: "已斷線——正在重試…", connConnecting: "連線中…",
+    connReconnecting: "連不上 AgEnD——可能正在重新啟動。正在重新連線…", connReconnectingIn: "連不上 AgEnD——可能正在重新啟動。{0} 秒後再試。",
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",
     skip: "跳到對話", loadFailed: "無法載入。", retry: "再試一次", loading: "載入中…",
     noInstances: "還沒有 instance", noInstancesHint: "建立一個就能開始聊天。",
-    session: "登入狀態", signIn: "登入", signedIn: "已登入", signedOut: "尚未登入", thisDevice: "這台裝置",
+    session: "登入狀態", signIn: "登入", signedIn: "已登入", signedOut: "尚未登入", thisDevice: "這台裝置", devicePrefs: "主題與語言",
     lastActive: "{0}活動", justNow: "剛剛", minAgo: "{0} 分鐘前", hrAgo: "{0} 小時前", signOut: "登出",
     signOutAll: "全部登出", devices: "已登入的裝置", expires: "最晚 {0} 結束；閒置 {1} 也會結束",
     failed: "沒有成功，請再試一次。", close: "關閉", more: "更多動作", menu: "選單",

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

@@ -2,7 +2,7 @@
 // a test runs both over one list of cases). Pure: no DOM, no history.
 
 export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "config"];
-export const SETTINGS_SECTIONS = ["agents", "bots", "classic", "general", "advanced"];
+export const SETTINGS_SECTIONS = ["device", "agents", "bots", "classic", "general", "advanced"];   // #1604: device first
 const MAX_INSTANCE_NAME = 128;
 const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;
 

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

@@ -14,7 +14,7 @@ import { ErrorState, Skeleton } from "./ui-states.js";
 import { InstanceNav, RosterNav } from "./instance-nav.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(), footer: [], keyboard: false, dialog: null, side: null });
+export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null });
 
 /**
  * The mounted panel's own sidebar section, in place of the instance list (View's roster: its groups, filter and order,
@@ -49,10 +49,6 @@ export function toggleSidebar() {
   shellStore.set({ collapsed });
   try { localStorage.setItem("agend_sidebar", collapsed ? "hidden" : "shown"); } catch { /* this page only */ }
 }
-/** A panel module adds a control to the sidebar footer (the chat adds the preview opt-in and the tour). */
-export function addFooterItem(key, Component) {
-  shellStore.set(s => ({ ...s, footer: [...s.footer.filter(x => x.key !== key), { key, Component }] }));
-}
 
 // ── Keys ── One document listener for the page. Esc closes what is on top first (the drawer); then the panel's own
 // handlers run — only for the mounted panel, and only when the focus is inside it or on nothing (the body).
@@ -125,8 +121,8 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       <nav class="side-nav" aria-label=${t("app.menu")}>${navLink("view", "/view", "view", t("app.view"))}</nav>
       ${shell.side ? html`<${shell.side.Component} />` : html`<${ViewOnlyNav} route=${route} />`}
       <div class="side-foot">
-        <${Prefs} />
         <a class="side-row" href=${signInHref()}><${Icon} name="user" /><span>${t("app.signIn")}</span></a>
+        <${PrefsPopover} />
       </div>
     </aside>`;
   }
@@ -145,8 +141,6 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
         exec=${app.exec} awaiting=${app.awaiting} onPick=${closeDrawer} />`}
     <div class="side-foot">
       ${navLink("settings", settingsPath(), "settings", t("app.settings"))}
-      ${shell.footer.map(({ key, Component }) => html`<${Component} key=${key} />`)}
-      <${Prefs} />
       <${SessionMenu} />
     </div>
   </aside>`;
@@ -157,19 +151,31 @@ function ViewOnlyNav({ route }) {
   return html`<${RosterNav} route=${route} viewOnly=${true} onPick=${closeDrawer} />`;
 }
 
-function Prefs() {
+/**
+ * This browser's theme and language (#1604: Settings → This device; for the anonymous View reader, the footer's
+ * popover). The same stores as ever: AgendTheme (theme.js) and setLang (app-i18n.js) — only where they are shown moved.
+ */
+export function DevicePrefs({ labels = false } = {}) {
   const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
   const [l, setL] = useState(lang());
-  return html`<div class="prefs">
-    <label class="pref"><${Icon} name="sun" size=${16} /><span class="sr-only">${t("app.theme")}</span>
+  return html`<div class=${`prefs${labels ? " labelled" : ""}`}>
+    <label class="pref"><${Icon} name="sun" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.theme")}</span>
       <select value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); }}>
         <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>
-    <label class="pref"><${Icon} name="globe" size=${16} /><span class="sr-only">${t("app.language")}</span>
+    <label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
       <select value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); }}>
         <option value="en">English</option><option value="zh-TW">中文</option></select></label>
   </div>`;
 }
 
+/** #1604: the anonymous View reader has no Settings: theme and language from one compact control beside Sign in. */
+function PrefsPopover() {
+  return html`<details class="prefs-pop">
+    <summary class="icon-btn" aria-label=${t("app.devicePrefs")} title=${t("app.devicePrefs")}><${Icon} name="sun" /></summary>
+    <div class="pop" role="group" aria-label=${t("app.devicePrefs")}><${DevicePrefs} labels=${true} /></div>
+  </details>`;
+}
+
 /**
  * The header every panel shows: ☰ (phone, or a collapsed sidebar), its title and status, then its actions. `nav`
  * (#1523 N2): an instance page's view switch — beside the title on a wide screen, a row of tabs under it on a phone.
@@ -227,9 +233,18 @@ function ConnectionLine() {
     return html`<div class="conn" role="status">${hydration === "failed" ? t("app.hydrateFailed") : t("app.hydrating")}
       ${hydration === "failed" && retryHydration ? html` <button type="button" class="btn btn-sm" onClick=${() => retryHydration()}>${t("app.retry")}</button>` : null}</div>`;
   }
-  if (connection === "live" || connection === "none") return null;
-  const text = connection === "polling" ? t("app.connPolling") : connection === "down" ? t("app.connDown") : null;
-  return text ? html`<div class="conn" role="status">${text}</div>` : null;
+  if (connection === "reconnecting") return html`<${Reconnecting} />`;
+  // #1603: polling is a working transport (the public link polls by design; a buffering proxy makes a page poll), not
+  // a fault — messages still arrive, at most ~5 s late, and there is nothing to do: no strip. Live, none, and ended
+  // (agend-auth's banner says that) draw nothing either; only reconnecting and a failed catch-up are shown.
+  return null;
+}
+/** #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);
+  useTick(true);
+  const s = typeof retryAt === "number" ? Math.max(0, Math.ceil((retryAt - NOW()) / 1000)) : 0;
+  return html`<div class="conn reconnecting" role="status">${s > 0 ? t("app.connReconnectingIn", s) : t("app.connReconnecting")}</div>`;
 }
 
 const NOW = () => (typeof performance !== "undefined" ? performance.now() : Date.now());