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

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-swipe.js

@@ -0,0 +1,89 @@
+// #1605: on a phone (whenever the sidebar is a drawer), a swipe right in the main area opens the drawer and a swipe left
+// on the drawer or its scrim closes it — through the same open/close as ☰, so focus, the scrim and Esc are unchanged.
+//
+// Never in the way of anything that owns a sideways drag or a touch:
+// - the left screen edge (the first EDGE px) belongs to the browser: on iOS Safari a swipe from there is "back";
+// - a gesture that starts in something that scrolls sideways (a code block, a wide table or CSV card — found as the
+//   nearest horizontally scrollable ancestor, not a fixed list), in the terminal view (xterm), in the composer or any
+//   input, or while a dialog, the image lightbox or the preview panel is open, is left alone;
+// - vertical scrolling is never taken: only a mostly-horizontal swipe counts (dx ≥ MIN_DX and |dy| < |dx|/2), and the
+//   listeners are passive — nothing is ever prevented, the browser scrolls as it always does.
+
+export const SWIPE = { EDGE: 24, MIN_DX: 60 };
+
+/** Elements a sideways gesture belongs to (their own scrolling, selection, typing or drag). */
+function owns(el) {
+  const tag = (el.tagName || "").toLowerCase();
+  if (tag === "input" || tag === "textarea" || tag === "select" || tag === "pre" || tag === "table" || tag === "iframe") return true;
+  if (el.isContentEditable || (el.getAttribute && el.getAttribute("contenteditable") === "true")) return true;
+  const cl = el.classList;
+  return !!cl && (cl.contains("xterm") || cl.contains("composer") || cl.contains("composer-box") || cl.contains("pv-panel")
+    || cl.contains("lb") || cl.contains("csv-card") || cl.contains("codeblock"));
+}
+/** Scrolls sideways (and has room to): the gesture is the content's. */
+function scrollsSideways(el, win) {
+  if (!(el.scrollWidth > el.clientWidth + 1)) return false;
+  const cs = win && typeof win.getComputedStyle === "function" ? win.getComputedStyle(el) : null;
+  const ox = cs ? cs.overflowX : "";
+  return ox === "auto" || ox === "scroll";
+}
+function blocked(target, win) {
+  for (let el = target; el && el.nodeType === 1; el = el.parentNode) {
+    if (owns(el) || scrollsSideways(el, win)) return true;
+  }
+  return false;
+}
+function inside(target, test) {
+  for (let el = target; el && el.nodeType === 1; el = el.parentNode) if (test(el)) return true;
+  return false;
+}
+
+/**
+ * Install once per page. `isDrawer()`: the sidebar is a drawer now (phone width); `isOpen()`; `open()` / `close()`: the
+ * same paths ☰ and the scrim use. Returns the uninstall function.
+ */
+export function installSwipe({ doc = document, win = window, isDrawer, isOpen, open, close }) {
+  let start = null;   // { x, y, opening }
+  const modalUp = () => !!(doc.querySelector && (doc.querySelector("dialog[open]") || doc.querySelector(".pv-panel")))
+    || !!(doc.documentElement && doc.documentElement.classList && doc.documentElement.classList.contains("lb-open"));
+  function onStart(e) {
+    start = null;
+    if (!e.touches || e.touches.length !== 1 || !isDrawer()) return;
+    const t = e.touches[0], target = e.target;
+    if (modalUp() || blocked(target, win)) return;
+    if (isOpen()) {
+      // Closing: a swipe left that starts on the drawer or its scrim.
+      if (inside(target, (el) => el.id === "sidebar" || (el.classList && el.classList.contains("scrim")))) start = { x: t.clientX, y: t.clientY, opening: false };
+      return;
+    }
+    // Opening: in the main area, and never from the edge the browser owns.
+    if (t.clientX < SWIPE.EDGE) return;
+    if (!inside(target, (el) => el.id === "main")) return;
+    start = { x: t.clientX, y: t.clientY, opening: true };
+  }
+  function onEnd(e) {
+    const s = start;
+    start = null;
+    if (!s || !e.changedTouches || !e.changedTouches.length || !isDrawer()) return;
+    // A dialog, the lightbox or the preview panel that came up during the gesture still owns it (#1609 review).
+    if (modalUp()) return;
+    const t = e.changedTouches[0];
+    const dx = t.clientX - s.x, dy = t.clientY - s.y;
+    if (Math.abs(dx) < SWIPE.MIN_DX || Math.abs(dy) >= Math.abs(dx) / 2) return;   // short, or mostly vertical: a scroll
+    if (s.opening && dx > 0 && !isOpen()) open();
+    else if (!s.opening && dx < 0 && isOpen()) close();
+  }
+  function onCancel() { start = null; }
+  function onMove(e) { if (start && e.touches && e.touches.length !== 1) start = null; }   // a second finger: a pinch
+  const opts = { passive: true };
+  doc.addEventListener("touchstart", onStart, opts);
+  doc.addEventListener("touchmove", onMove, opts);
+  doc.addEventListener("touchend", onEnd, opts);
+  doc.addEventListener("touchcancel", onCancel, opts);
+  return () => {
+    doc.removeEventListener("touchstart", onStart, opts);
+    doc.removeEventListener("touchmove", onMove, opts);
+    doc.removeEventListener("touchend", onEnd, opts);
+    doc.removeEventListener("touchcancel", onCancel, opts);
+  };
+}

package/dist/ui/shared/app.css

@@ -108,7 +108,22 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
   flex-shrink: 0; font-size: 11px; line-height: 16px; font-weight: var(--fw-semibold); padding: 0 var(--s-2); border-radius: var(--r-full);
   background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); white-space: nowrap;
 }
-.side-foot { display: flex; flex-direction: column; gap: 1px; padding: var(--s-2); }
+/* #1604: one row — Settings and Session (the anonymous View reader: Sign in and the theme/language popover). Their
+   pop-ups open over the whole footer's width. */
+.side-foot { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2); position: relative; }
+.side-foot > .side-row, .side-foot > .session { flex: 1; min-width: 0; }
+.side-foot > .session { position: static; }
+.side-foot .side-row span:not(.dot):not(.meta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.side-foot .session .meta { display: none; }
+.prefs-pop > summary { list-style: none; cursor: pointer; }
+.prefs-pop > summary::-webkit-details-marker { display: none; }
+.prefs.labelled { flex-direction: column; gap: var(--s-2); padding: 0; }
+.prefs.labelled .pref { flex: none; gap: var(--s-2); color: var(--text); }
+.prefs.labelled .pref-label { min-width: 7em; font-size: var(--fs-sm); }
+.prefs.labelled .pref select { flex: 0 1 14em; height: 34px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: var(--fs-sm); padding: 0 var(--s-2); }
+.s-device { display: flex; flex-direction: column; gap: var(--s-3); }
+.s-device .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
+.s-device-row { display: flex; gap: var(--s-2); }
 .prefs { display: flex; gap: var(--s-2); padding: var(--s-1) var(--s-3); }
 .pref { display: flex; align-items: center; gap: var(--s-1); color: var(--text-2); flex: 1; min-width: 0; }
 .pref select { flex: 1; min-width: 0; height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; }
@@ -292,6 +307,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 +596,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

@@ -6,7 +6,8 @@
 // reached only by the dynamic imports below, in "full" mode. A test walks the static imports over real HTTP and asserts
 // none of them names /ui/.
 import { html, render } from "./app-html.js";
-import { Shell, handleKey, showDialog, closeDrawer, retryable, setNewInstanceOpener } from "./app-shell.js";
+import { Shell, handleKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener } from "./app-shell.js";
+import { installSwipe } from "./app-swipe.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
 import { appStore, applyStatus, applyActivity } from "./app-store.js";
@@ -37,6 +38,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() });
@@ -91,5 +98,12 @@ startRouter(window);
 }
 
 document.addEventListener("keydown", handleKey);
+// #1605: on a phone (the sidebar is a drawer), swipe right in the main area to open it, left to close it — the same
+// open/close as ☰ and the scrim. Nothing that owns a sideways drag (code, tables, the terminal, inputs, dialogs) and
+// never the left edge (iOS: "back").
+installSwipe({
+  isDrawer: () => typeof matchMedia === "function" && matchMedia("(max-width: 899px)").matches,
+  isOpen: () => shellStore.get().drawer, open: openDrawer, close: closeDrawer,
+});
 
 render(html`<${Shell} panels=${panels} onNewInstance=${onNewInstance} viewOnly=${mode === "view-only"} />`, document.getElementById("app"));

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

@@ -18,6 +18,9 @@ import { readStream } from "./read-stream.js";
 export { UsageMetric } from "./usage-dialog.js";
 import { backendLabel, STATUS_KEYS } from "./instance-nav.js";
 import { viewStore } from "./view-roster-store.js";
+
+/** #1580: the app's stream says the fleet is not answering (a restart): the View's polls skip their turn until it is. */
+const fleetUnreachable = () => appStore.get().connection === "reconnecting";
 import { navigate } from "./app-nav.js";
 import { viewPath } from "./app-route.js";
 import { Dialog } from "./ui-dialog.js";
@@ -34,9 +37,11 @@ function tn(key, values = {}) {
 const stored = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
 const store = (k, v) => { try { localStorage.setItem(k, v); } catch { /* this page only */ } };
 
-// ── ANSI (SGR) → markup ── A coloured run is <span class="ansi" data-fg data-bg data-b>, never a style attribute (#1300);
-// paintAnsi() sets the colours through the style object once it is on the page. The colours are the palette's or rgb()
-// of numbers — nothing from the pane's text.
+// ── ANSI (SGR) → markup ── A coloured run is <span class="ansi" data-fg data-bg data-b data-dim>, never a style attribute
+// (#1300); paintAnsi() sets the colours through the style object once it is on the page. The colours are the palette's or
+// rgb() of numbers — nothing from the pane's text. Dim (SGR 2) is kept because a CLI paints text that is not input dim:
+// Claude Code's prompt suggestion and empty-box placeholder sit in the composer exactly like typed text but faint (#1582,
+// suzuke/agend-terminal#3744). Reverse video (7) swaps the run's colours, the terminal's own standing in for unset ones.
 const BASE = ["#000000", "#cd3131", "#0dbc79", "#e5e510", "#2472c8", "#bc3fbc", "#11a8cd", "#e5e5e5"];
 const BRIGHT = ["#666666", "#f14c4c", "#23d18b", "#f5f543", "#3b8eea", "#d670d6", "#29b8db", "#ffffff"];
 export const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
@@ -46,14 +51,17 @@ function xterm256(n) {
   if (n < 232) { n -= 16; const r = Math.floor(n / 36), g = Math.floor((n % 36) / 6), b = n % 6; const v = (x) => (x ? x * 40 + 55 : 0); return `rgb(${v(r)},${v(g)},${v(b)})`; }
   const l = (n - 232) * 10 + 8; return `rgb(${l},${l},${l})`;
 }
+/** The `.v-pre` terminal's own colours (app.css), for a reversed run whose colours were not set. */
+const TERM_FG = "#d0d0d0", TERM_BG = "#000000";
 export function ansiToHtml(text) {
-  let out = "", fg = null, bg = null, bold = false, open = false;
+  let out = "", fg = null, bg = null, bold = false, dim = false, reverse = false, open = false;
   const attrs = () => {
     let f = fg;
     if (bold && typeof f === "number" && f < 8) f = BRIGHT[f];
     else if (typeof f === "number") f = BASE[f];
-    const b = bg == null ? null : typeof bg === "number" ? BASE[bg] : bg;
-    return (f ? ` data-fg="${esc(f)}"` : "") + (b ? ` data-bg="${esc(b)}"` : "") + (bold ? " data-b" : "");
+    let b = bg == null ? null : typeof bg === "number" ? BASE[bg] : bg;
+    if (reverse) [f, b] = [b ?? TERM_BG, f ?? TERM_FG];
+    return (f ? ` data-fg="${esc(f)}"` : "") + (b ? ` data-bg="${esc(b)}"` : "") + (bold ? " data-b" : "") + (dim ? " data-dim" : "");
   };
   const flush = () => { if (open) { out += "</span>"; open = false; } };
   const openSpan = () => { const a = attrs(); if (a) { out += `<span class="ansi"${a}>`; open = true; } };
@@ -68,9 +76,12 @@ export function ansiToHtml(text) {
     if (codes.length === 0) codes.push(0);
     for (let i = 0; i < codes.length; i++) {
       const c = codes[i];
-      if (c === 0) { fg = bg = null; bold = false; }
+      if (c === 0) { fg = bg = null; bold = dim = reverse = false; }
       else if (c === 1) bold = true;
-      else if (c === 22) bold = false;
+      else if (c === 2) dim = true;
+      else if (c === 22) bold = dim = false;   // "normal intensity": neither bold nor faint
+      else if (c === 7) reverse = true;
+      else if (c === 27) reverse = false;
       else if (c === 39) fg = null;
       else if (c === 49) bg = null;
       else if (c >= 30 && c <= 37) fg = c - 30;
@@ -129,6 +140,7 @@ export function ViewPanel({ route, navKey }) {
     const reads = readStream(lease);
     const load = async () => {
       if (typeof document !== "undefined" && document.hidden) return;
+      if (fleetUnreachable()) return;                      // #1580: the app's stream is reconnecting — no read storm
       const token = reads.begin();
       if (!token) return;
       try {
@@ -213,6 +225,7 @@ function Terminal({ name, lease, density }) {
     const reads = readStream(lease);
     const refresh = async () => {
       if (document.hidden) return;
+      if (fleetUnreachable()) return;                      // #1580: every 0.8 s would be a connection storm through a relay
       // A selection inside the pane is being copied: keep this frame until it is released.
       const sel = typeof window.getSelection === "function" ? window.getSelection() : null;
       if (sel && sel.toString().length > 0 && sel.anchorNode && pre.current && pre.current.contains(sel.anchorNode)) return;

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

@@ -65,6 +65,14 @@ export function UsageMetric({ m }) {
   const sub = [note, expiryText(m.expiresAt)].filter(Boolean).join(" · ");
   return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${val}</span></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}</div>`;
 }
+/** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
+export function updatedAgo(fetchedAt, now = Date.now()) {
+  const ms = now - new Date(fetchedAt).getTime();
+  if (!Number.isFinite(ms) || ms < 60_000) return tn("usageUpdatedJustNow");
+  const min = Math.floor(ms / 60_000);
+  return tn("usageUpdatedAgo", { age: min < 60 ? tn("usageMinutes", { n: min }) : tn("usageHours", { n: Math.floor(min / 60) }) });
+}
+
 /** `owner`: the navigation that opened it — its reads and the minute's timer live and end with it. */
 export function UsageDialog({ onClose, owner = "" }) {
   const lease = useLease(`usage-dialog:${owner}`);
@@ -84,6 +92,13 @@ export function UsageDialog({ onClose, owner = "" }) {
     finally { reads.end(token); }
   };
   useEffect(() => { load(false); lease.interval(() => load(false), 60_000); }, [lease]);
+  // #1585: the server answered with the last snapshot while it fetches a fresh one — read again shortly (the same
+  // cache: no vendor call of its own) so the fresh numbers replace it without waiting for the minute's tick.
+  useEffect(() => {
+    if (!data || !data.refreshing) return undefined;
+    const timer = setTimeout(() => load(false), 4_000);
+    return () => clearTimeout(timer);
+  }, [data]);
   const key = (p) => String(p.id || p.name || "");
   const ordered = (providers) => {
     const rank = new Map(order.map((id, i) => [id, i]));
@@ -118,7 +133,7 @@ export function UsageDialog({ onClose, owner = "" }) {
           : html`${(p.metrics || []).map((m, j) => html`<${UsageMetric} key=${j} m=${m} />`)}
             ${!p.stale && p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : !(p.metrics || []).length ? html`<p class="note">${tn("usage.no_data")}</p>` : null}`}
       </section>`)}
-      <div class="u-foot"><span class="note">${tn("usageUpdated")} ${new Date(data.fetchedAt).toLocaleTimeString()}</span>
+      <div class="u-foot"><span class="note" title=${new Date(data.fetchedAt).toLocaleString()}>${updatedAgo(data.fetchedAt)}${data.refreshing ? html` · <span class="u-refreshing">${tn("usageRefreshing")}</span>` : null}</span>
         <button type="button" class="btn btn-sm" onClick=${() => load(true)}>${tn("usageRefresh")}</button></div>`;
   }
   return html`<${Dialog} title=${tn("usage.title")} onClose=${onClose} wide=${true}>${content}</${Dialog}>`;