@songsid/agend 2.2.0-alpha.6 → 2.2.0-alpha.8

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

@@ -421,6 +421,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/shared/app-i18n.js

@@ -46,6 +46,7 @@ register("app", {
     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.",
@@ -75,6 +76,7 @@ register("app", {
     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: "建立一個就能開始聊天。",

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

@@ -227,10 +227,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;
+  if (connection === "reconnecting") return html`<${Reconnecting} />`;
+  if (connection === "live" || connection === "none" || connection === "ended") return null;   // ended: agend-auth's banner
   const text = connection === "polling" ? t("app.connPolling") : connection === "down" ? t("app.connDown") : null;
   return text ? html`<div class="conn" role="status">${text}</div>` : 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());
 function useTick(on, ms = 1000) {

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

@@ -14,21 +14,53 @@
 // applied they are replayed in arrival order, so an answer or a new prompt that came meanwhile is never undone by the
 // older snapshot. A failed read is retried a few times with a growing delay, and then waits for the person (Retry);
 // the state is told as "hydration" events. Polls never overlap: a poll asked for while one runs follows it.
+//
+// Reconnecting (#1580): a fleet restart drops every open tab's stream at once, and used to have each tab retry through
+// the browser's own EventSource loop (about every 3 s) AND poll every 5 s, both forever, hidden or not — through a
+// relay (WSL2's wslrelay, a tunnel) that is dozens of fresh connections per tab per minute. Now this file owns it:
+// - a dropped stream is closed (no browser retry) and reopened on a capped exponential backoff with jitter (about
+//   1, 2, 4, 8, 16, then 30 s; each 50–100 % of its step). One EventSource at a time, ever.
+// - a stream that fails before it speaks is followed by ONE /ui/poll probe: answered → the fleet is up and only the
+//   stream is broken (a buffering proxy): poll every 5 s as before, and keep retrying the stream on the backoff; not
+//   answered → "reconnecting", and no poll loop at all. The public link's poll loop backs off the same way.
+// - a step due while the tab is hidden waits until it is shown again (a live stream stays open: Needs you).
+// - 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).
+// - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
 const EVENTS = ["status", "message", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons"];
 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
 const MAX_OVERFLOW_READS = 3;            // reads again after dropped live events, within one catch-up
+// #1580: the reconnect backoff — step n waits min(cap, base·2ⁿ), drawn from 50–100 % of that (jitter: tabs that lost
+// the fleet together do not come back together).
+export const RECONNECT = { baseMs: 1000, capMs: 30000 };
+export function reconnectDelay(step, random = Math.random) {
+  const full = Math.min(RECONNECT.capMs, RECONNECT.baseMs * 2 ** Math.min(step, 20));
+  return Math.round(full * (0.5 + random() * 0.5));
+}
 
 export function createStream(opts) {
   const env = opts.env || globalThis;
   const listeners = new Map();          // event name → Set of handlers
   const state = { connection: "connecting", cursor: "", hydration: "none" };
-  let sse = null, pollTimer = null, silentTimer = null, errorTimer = null, closed = false, started = false;
+  let sse = null, pollTimer = null, silentTimer = null, closed = false, started = false;
+  // #1580: the reconnect step waiting, how many failed in a row, a step waiting for the tab to be shown, a page that left.
+  let reconnectTimer = null, attempts = 0, waitingVisible = false, suspended = false, ended = false, retryAt = 0;
+  const random = typeof env.random === "function" ? env.random : Math.random;
+  const doc = env.document || null;
+  const hidden = () => !!(doc && doc.hidden);
+  const now = () => (env.performance && typeof env.performance.now === "function" ? env.performance.now() : Date.now());
   let polling = null, pollAgain = false, pollSeq = 0;   // the poll in flight, whether another was asked for meanwhile
   let held = null;                                // live events held while a catch-up read is in flight
-  let catching = null, retryTimer = null;
+  let catching = null, retryTimer = null, retryWake = null;
+  // #1580 review: who owns the work in flight. `readEpoch` moves when the page lets everything go (suspend, end,
+  // close): a read, a catch-up or a queued poll begun before it neither emits, nor releases, nor queues, nor decides
+  // anything. `epoch` also moves when the stream comes back live: a fallback read's or a probe's late failure must not
+  // turn a healthy stream into "reconnecting" — those control decisions belong to the epoch they started in.
+  let readEpoch = 0, epoch = 0;
 
   function emit(name, data, extra) {
     const set = listeners.get(name);
@@ -69,12 +101,14 @@ export function createStream(opts) {
    */
   function pollOnce(opts = {}) {
     if (polling) { if (!opts.join) pollAgain = true; return polling; }
-    const mine = ++pollSeq;
+    const mine = ++pollSeq, ep = readEpoch;
+    let status = 0;                                  // this read's HTTP status — its own, never another read's
     if (sse && !held) held = [];
     let limit = null;
     const read = (async () => {
       try {
         const r = await env.fetch(`/ui/poll?after=${encodeURIComponent(state.cursor)}`, { cache: "no-store" });
+        status = r.status | 0;
         if (closed || mine !== pollSeq || !r.ok) return false;
         const d = await r.json();
         if (closed || mine !== pollSeq) return false;
@@ -89,65 +123,168 @@ export function createStream(opts) {
       } catch { return false; /* the next tick, or the catch-up's retry, tries again */ }
     })();
     const timedOut = new Promise((resolve) => { limit = env.setTimeout(() => { if (mine === pollSeq) pollSeq++; resolve(false); }, POLL_LIMIT_MS); });
-    polling = Promise.race([read, timedOut]).then((ok) => {
+    const p = polling = Promise.race([read, timedOut]).then((ok) => {
       env.clearTimeout(limit);
+      // Let go of (suspend, end, close) while it was out: it decides nothing — and touches nothing that is newer.
+      if (ep !== readEpoch) return { ok: false, overflow: false, status, stale: true };
       if (mine === pollSeq) pollSeq++;               // whatever this read still does from here on is ignored
-      polling = null;
-      if (closed) { held = null; return { ok: false, overflow: false }; }
+      if (polling === p) polling = null;
+      if (closed) { held = null; return { ok: false, overflow: false, status }; }
+      // #1580: the session ended, whichever read heard it — everything stops here, queued work included.
+      if (status === 401) { held = null; end(); return { ok: false, overflow: false, status }; }
       const overflow = release();
       // Live events were dropped: what they changed is recovered by catching up — inside its lifecycle, so a failed
       // recovery read is retried and shown, never taken for done (#1425 review). A catch-up awaiting this read loops.
       if (overflow && !catching) catchUp();
       if (pollAgain) { pollAgain = false; pollOnce(); }
-      return { ok, overflow };
+      return { ok, overflow, status };
     });
-    return polling;
+    return p;
   }
-  function startPolling() {
-    if (pollTimer || closed) return;
+  /** #1580 review: the page lets go of everything in flight — reads, the queued poll, the catch-up and its retry wait. */
+  function cancelWork() {
+    readEpoch++; epoch++;
+    pollSeq++; polling = null; pollAgain = false; held = null;
+    env.clearTimeout(retryTimer); retryTimer = null;
+    const wake = retryWake; retryWake = null;
+    catching = null;
+    if (wake) wake();                                // the old catch-up settles (false) instead of waiting forever
+  }
+  /** The 5 s poll: the public link's transport, and a reachable fleet whose stream does not get through. */
+  function startPolling(pollNow = true) {
+    if (pollTimer || closed || suspended || ended) return;
     setConnection("polling");
-    pollOnce();
-    pollTimer = env.setInterval(pollOnce, 5000);
+    if (pollNow) pollTick();
+    pollTimer = env.setInterval(pollTick, 5000);
+  }
+  async function pollTick() {
+    const ep = epoch;
+    const r = await pollOnce();
+    if (closed || suspended || ended || ep !== epoch || r.stale || r.ok || r.overflow) return;
+    // Not answered: the fleet is not there (a restart). The loop stops — no poll storm — and the backoff takes over.
+    stopPolling();
+    setConnection("reconnecting");
+    scheduleStep();
   }
   function stopPolling() { if (pollTimer) { env.clearInterval(pollTimer); pollTimer = null; } }
   function alive() {
+    if (state.connection !== "live") epoch++;      // back live: earlier fallback/probe failures decide nothing now
     stopPolling();
-    env.clearTimeout(errorTimer); errorTimer = null;
+    attempts = 0;
+    env.clearTimeout(reconnectTimer); reconnectTimer = null; waitingVisible = false;
     env.clearTimeout(silentTimer); silentTimer = env.setTimeout(startPolling, 30000);
     setConnection("live");
   }
 
+  // ── #1580: reconnecting ──
+  function closeStream() {
+    if (sse) { sse.onerror = null; try { sse.close(); } catch { /* already closed */ } }
+    sse = null;
+    env.clearTimeout(silentTimer); silentTimer = null;
+  }
+  /** Open the one EventSource. `again`: a reconnect — once it speaks, catch up on what was said while it was away. */
+  function openStream(again) {
+    closeStream();
+    const es = sse = new env.EventSource("/ui/events");
+    let spoke = false;
+    silentTimer = env.setTimeout(startPolling, 15000);   // the server sends a status frame the moment a stream opens
+    for (const name of EVENTS) {
+      es.addEventListener(name, (e) => {
+        if (es !== sse) return;                          // a stream this page already let go of
+        let data;
+        try { data = JSON.parse(e.data); } catch { return; }
+        if (!spoke) { spoke = true; alive(); if (again) catchUp(); }
+        else alive();
+        live(name, data, name === "message" ? e.lastEventId : null);
+      });
+    }
+    es.onerror = () => {
+      if (es !== sse) return;
+      closeStream();                                     // never the browser's own retry loop
+      if (closed || suspended || ended) return;
+      if (spoke) { setConnection("reconnecting"); scheduleStep(); return; }
+      probe();
+    };
+  }
+  /** The stream failed before it spoke: is the fleet there at all? One poll says. */
+  async function probe() {
+    if (pollTimer) { scheduleStep(); return; }          // already polling: that loop is the probe
+    const ep = epoch;
+    const r = await pollOnce({ join: true });
+    if (closed || suspended || ended || ep !== epoch || r.stale) return;
+    if (r.ok) startPolling(false);                       // reachable, the stream does not get through: poll meanwhile
+    else setConnection("reconnecting");
+    scheduleStep();
+  }
+  function scheduleStep() {
+    if (reconnectTimer || closed || suspended || ended) return;
+    const ms = reconnectDelay(attempts++, random);
+    retryAt = now() + ms;
+    emit("retry", { inMs: ms });
+    reconnectTimer = env.setTimeout(() => { reconnectTimer = null; step(); }, ms);
+  }
+  function step() {
+    if (closed || suspended || ended) return;
+    if (hidden()) { waitingVisible = true; return; }    // not while nobody looks: the next step waits to be shown
+    if (opts.transport === "poll") { pollProbe(); return; }
+    openStream(true);
+  }
+  /** The public link's reconnect step: one poll; answered → the 5 s loop again (it just read), else the next step. */
+  async function pollProbe() {
+    const ep = epoch;
+    const r = await pollOnce();
+    if (closed || suspended || ended || ep !== epoch || r.stale) return;
+    if (r.ok) { attempts = 0; startPolling(false); }
+    else scheduleStep();
+  }
+  function onVisible() {
+    if (!hidden() && waitingVisible) { waitingVisible = false; step(); }
+  }
+  function end() {
+    if (ended) return;
+    ended = true;
+    cancelWork();
+    closeStream(); stopPolling();
+    env.clearTimeout(reconnectTimer); reconnectTimer = null;
+    setConnection("ended");
+  }
+
   /**
    * Read what is current now, once, ordered against the live stream (see the top). Resolves true once a read was
    * applied. While retries are spent it resolves false and the state stays "failed" until catchUp() is called again.
    * It opens no transport: still the one EventSource, and no polling loop.
    */
   function catchUp() {
-    if (closed) return Promise.resolve(false);
+    if (closed || ended) return Promise.resolve(false);
     if (catching) return catching;
     env.clearTimeout(retryTimer); retryTimer = null;
     setHydration("catching");
-    catching = (async () => {
+    const ep = readEpoch;
+    // Settles this catch-up; the page's current one is cleared only if it is still this one (a resume may have
+    // started a newer one meanwhile).
+    const done = (value, hydration) => { if (catching === me) { catching = null; if (hydration) setHydration(hydration); } return value; };
+    const me = (async () => {
       let failures = 0, overflows = 0;
       for (;;) {
         // A poll already on its way will do (its answer reaches the listener that just attached); nothing is queued.
         const { ok, overflow } = await pollOnce({ join: true });
-        if (closed) return false;
-        if (ok && !overflow) { catching = null; setHydration("ok"); return true; }
+        if (closed || ep !== readEpoch) return done(false);   // let go of (suspend, end — a 401 — or close): no retry
+        if (ok && !overflow) return done(true, "ok");
         if (ok) {
           // Read, but live events were dropped meanwhile: not done until a read without that succeeds. At once (nothing
           // failed), and bounded: a stream that floods every read gives up as failed, with Retry.
-          if (++overflows > MAX_OVERFLOW_READS) { catching = null; setHydration("failed"); return false; }
+          if (++overflows > MAX_OVERFLOW_READS) return done(false, "failed");
           continue;
         }
-        if (failures >= RETRY_DELAYS.length) { catching = null; setHydration("failed"); return false; }
+        if (failures >= RETRY_DELAYS.length) return done(false, "failed");
         setHydration("retrying");
-        await new Promise((resolve) => { retryTimer = env.setTimeout(resolve, RETRY_DELAYS[failures++]); });
-        retryTimer = null;
-        if (closed) return false;
+        await new Promise((resolve) => { retryWake = resolve; retryTimer = env.setTimeout(resolve, RETRY_DELAYS[failures++]); });
+        retryTimer = null; retryWake = null;
+        if (closed || ep !== readEpoch) return done(false);
       }
     })();
-    return catching;
+    catching = me;
+    return me;
   }
 
   /** Open the transport. Called once every listener that must see the first frames is attached (the chat's store):
@@ -155,24 +292,10 @@ export function createStream(opts) {
   function start() {
     if (started || closed) return;
     started = true;
+    if (opts.mode === "full" && doc && typeof doc.addEventListener === "function") doc.addEventListener("visibilitychange", onVisible);
     if (opts.mode === "full" && opts.transport === "poll") startPolling();
-    else if (opts.mode === "full") {
-      sse = new env.EventSource("/ui/events");
-      silentTimer = env.setTimeout(startPolling, 15000);   // the server sends a status frame the moment a stream opens
-      for (const name of EVENTS) {
-        sse.addEventListener(name, (e) => {
-          alive();
-          let data;
-          try { data = JSON.parse(e.data); } catch { return; }
-          live(name, data, name === "message" ? e.lastEventId : null);
-        });
-      }
-      sse.onerror = () => {
-        if (state.connection === "live") setConnection("down");
-        // Armed once, not re-armed: the browser retries every few seconds and each retry fires this again.
-        if (!errorTimer) errorTimer = env.setTimeout(startPolling, 5000);
-      };
-    } else setConnection("none");
+    else if (opts.mode === "full") openStream(false);
+    else setConnection("none");
   }
 
   return {
@@ -189,13 +312,33 @@ export function createStream(opts) {
     hydration: () => state.hydration,
     cursor: () => state.cursor,
     usesEventSource: () => sse !== null,
+    /** #1580: ms until the next reconnect step (0 when none is waiting). */
+    retryIn: () => (reconnectTimer ? Math.max(0, retryAt - now()) : 0),
+    /** #1580: the page is leaving (pagehide): the stream and every timer go — nothing is left half-open. */
+    suspend() {
+      if (closed || !started || suspended) return;
+      suspended = true;
+      cancelWork();
+      closeStream(); stopPolling();
+      env.clearTimeout(reconnectTimer); reconnectTimer = null; waitingVisible = false;
+    },
+    /** #1580: back from the back-forward cache (pageshow, persisted): reconnect at once and catch up. */
+    resume() {
+      if (closed || !suspended || ended) return;
+      suspended = false;
+      epoch++;
+      attempts = 0;
+      if (opts.transport === "poll") { startPolling(); return; }
+      openStream(true);
+    },
     /** For tests and page unload: nothing is emitted after this. */
     close() {
       closed = true;
-      held = null;
+      cancelWork();
       stopPolling();
-      env.clearTimeout(silentTimer); env.clearTimeout(errorTimer); env.clearTimeout(retryTimer);
-      if (sse) sse.close();
+      closeStream();
+      env.clearTimeout(reconnectTimer); env.clearTimeout(retryTimer);
+      if (doc && typeof doc.removeEventListener === "function") doc.removeEventListener("visibilitychange", onVisible);
     },
     _pollOnce: pollOnce,
   };

package/dist/ui/shared/app.css

@@ -292,6 +292,20 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg .att-img { cursor: zoom-in; }
 /* #1565: a file from before the fleet restarted that could not be served again — its name only, nothing to fetch. */
 .att-file.att-gone { opacity: 0.6; cursor: default; text-decoration: none; }
+/* #1589: media plays inline (native controls); text attachments open in a card, escaped. */
+.att-media { margin-top: var(--s-2); }
+.att-media .att-video { display: block; max-width: min(100%, 480px); max-height: 360px; border-radius: var(--r-sm); background: #000; }
+.att-media .att-audio { display: block; width: min(100%, 420px); }
+.text-card { margin-top: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
+.text-card .tc-head { display: flex; align-items: center; gap: var(--s-2); }
+.text-card .tc-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-2); }
+.text-card .tc-body { margin-top: var(--s-2); max-height: 480px; overflow: auto; }
+.text-card .tc-body[hidden] { display: none; }
+.text-card .tc-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-xs); }
+.text-card .tc-table-wrap { overflow-x: auto; }
+.text-card .tc-table { border-collapse: collapse; font-size: var(--fs-xs); }
+.text-card .tc-table th, .text-card .tc-table td { border: 1px solid var(--border); padding: 2px 6px; text-align: left; vertical-align: top; }
+.text-card .tc-more { margin-top: var(--s-2); }
 /* A chat image, full size, in the page (image-lightbox.js): the whole viewport, dark, the image fitted to it. */
 html.lb-open .scroller { overflow: hidden; }
 .lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
@@ -567,6 +581,8 @@ html.lb-open .scroller { overflow: hidden; }
 .v-term { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 5px 6px; background: #000000; position: relative; }
 .v-pre { margin: 0; min-width: 100%; min-height: 100%; font-family: var(--font-mono); line-height: 1.2; white-space: pre; color: #d0d0d0; }
 .v-pre .ansi[data-b] { font-weight: var(--fw-bold); }
+/* #1582: faint text (SGR 2) — a CLI's suggestion or placeholder, never input — stays faint here. */
+.v-pre .ansi[data-dim] { opacity: .5; }
 .v-term-note { position: absolute; left: var(--s-3); right: var(--s-3); top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--warn-bg); border: 1px solid var(--warn-line); color: #f0f0f0; font-size: var(--fs-sm); }
 .v-probe { position: absolute; visibility: hidden; white-space: pre; left: -9999px; top: 0; font-size: 100px; }
 .v-card { flex-shrink: 0; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--bg); padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); }

package/dist/ui/shared/app.js

@@ -37,6 +37,12 @@ if (mode === "full") {
   stream.on("status", applyStatus);
   stream.on("activity", applyActivity);
   stream.on("connection", (connection) => appStore.set({ connection }));
+  // #1580: when the next reconnect try is (the connection line counts down to it; monotonic, like the stream's clock).
+  stream.on("retry", (r) => appStore.set({ retryAt: (typeof performance !== "undefined" ? performance.now() : Date.now()) + r.inMs }));
+  // #1580: a page that leaves closes its stream and every timer (nothing half-open behind it); one restored from the
+  // back-forward cache reconnects and catches up.
+  window.addEventListener("pagehide", () => stream.suspend());
+  window.addEventListener("pageshow", (e) => { if (e.persisted) stream.resume(); });
   // A chat that loaded late catches up on what is open now; the shell shows that while it is not done, with Retry.
   stream.on("hydration", (hydration) => appStore.set({ hydration }));
   appStore.set({ retryHydration: () => stream.catchUp() });