@cotal-ai/web 0.24.0 → 0.25.0

package/dist/web/app.js

@@ -119,6 +119,37 @@ function setConn(live) {
   el.querySelector(".t").textContent = live ? "live" : "disconnected";
 }
 
+/** Say WHICH sources are showing their last good value, and why. Visible, not a console line: the
+ *  whole point of keeping the snapshot is that the reader knows they are looking at it. Cleared by
+ *  the next refresh in which everything landed, which is what recovery looks like from here. */
+/** What the marker is currently saying, so a source read OUTSIDE the poll can add to it without
+ *  erasing the poll's own findings. `refresh()` sets the four polled sources; the open channel's
+ *  history is read later, inside `select()`, and a bare `setStale([channel])` there would drop the
+ *  roster/channels/dms/activity refusals from the same label. */
+let staleNow = [];
+function setStale(stale) {
+  staleNow = stale;
+  renderStale();
+}
+/** Mark ONE source, or clear it, leaving every other source's mark alone. A successful read clears
+ *  its own mark and nobody else's, which is what makes recovery per source rather than all-or-nothing. */
+function markStale(name, entry) {
+  const rest = staleNow.filter((s) => s.name !== name);
+  setStale(entry ? [...rest, entry] : rest);
+}
+function renderStale() {
+  const el = $("stale");
+  if (!el) return;
+  const label = window.COTAL_SNAPSHOT.staleLabel(staleNow);
+  el.hidden = !label;
+  // CLEARED, NOT JUST HIDDEN. Returning early on recovery left the previous label and its tooltip
+  // sitting in the element. Hidden text is invisible until something else unhides it, and then the
+  // reader is told a source is stale that recovered some time ago. Recovery has to erase the claim,
+  // not park it.
+  el.querySelector(".t").textContent = label;
+  el.title = staleNow.map((s) => `${s.name}: ${s.reason}`).join("\n");
+}
+
 // ── Header: golden-signal tiles ───────────────────────────────────────────────
 // Fifth tile is last-heartbeat freshness (Presence.ts), NOT blocked-duration — we cannot know
 // how long someone has been waiting (no statusSince on the wire). Label it honestly.
@@ -790,6 +821,12 @@ function refreshDerived() {
 }
 
 let loadSeq = 0;
+/** The channel `channelMsgs` currently holds, so a refused re-read of THE SAME channel can keep what
+ *  is on screen. `selected` cannot answer this: `select()` assigns it before the clear below, so by
+ *  then it already names the channel being opened rather than the one being displayed. Without this,
+ *  retention would show the previous channel's messages under the new channel's name, which is worse
+ *  than an empty view. */
+let shownChannel = null;
 /** The in-flight channel bootstrap: `{key, promise}`, so a second call for the same channel shares it. */
 let selecting = null;
 async function select(key) {
@@ -808,6 +845,9 @@ async function select(key) {
     // because returning early is exactly what left the buffer undrained.
     if (selecting && selecting.key === key) return selecting.promise;
     const seq = ++loadSeq;
+    // HELD BEFORE THE CLEAR, and only when it belongs to THIS channel. A fresh selection must not
+    // inherit the last channel's messages, so a switch holds nothing and starts empty as before.
+    const held = shownChannel === key ? channelMsgs : [];
     channelMsgs = [];
     // ARMED BEFORE THE FETCH IS ISSUED, which is the whole ordering. Re-armed on every selection
     // because each one is a fresh two-phase bootstrap: a new history read, and a live tap that is
@@ -818,15 +858,32 @@ async function select(key) {
     let release;
     selecting = { key, promise: new Promise((r) => (release = r)) };
     renderCenter();
-    // Same reason as the activity feed: a failed history read is an empty batch, not a reason to
-    // leave the boundary unpassed and the frames of this channel held out of the view that was
-    // opened to look at them.
+    // Same reason as the activity feed: a failed history read must not leave the boundary unpassed
+    // and the frames of this channel held out of the view that was opened to look at them. What it
+    // is NOT any more is an empty batch: it is the last history that was actually read, so a refused
+    // poll on the open channel keeps what is on screen instead of emptying it.
     let msgs = [];
+    let refused = null;
     try {
-      msgs = await (await fetch(`/api/channels/${encodeURIComponent(key)}/history?limit=200`)).json();
+      // READ THROUGH THE SAME GATE AS EVERY OTHER SOURCE. This was the one read on either page that
+      // still consumed a body without consulting the status, and it is the read behind the open
+      // channel. A 500 here answers `{"error":"..."}`, which is valid JSON that `fetch` does not
+      // reject, so the catch below never fired: the object was handed to the order machine as a
+      // history, the channel drew empty, and nothing said why. Measured on the shipped code before
+      // this line changed: last-good gone, no backfill-failed note, no stale mark.
+      msgs = await window.COTAL_SNAPSHOT.readJson(
+        await fetch(`/api/channels/${encodeURIComponent(key)}/history?limit=200`),
+        `#${key} history`,
+      );
     } catch (err) {
-      msgs = [];
-      noteOrder([{ type: "backfill-failed", channel: key, reason: err && err.message ? err.message : String(err) }]);
+      // A REFUSED READ KEEPS WHAT THE READER ALREADY HAD, for the same reason the four polled
+      // sources do. `refresh()` re-selects the open channel on EVERY poll, so on a link where the
+      // read keeps missing, an empty batch here emptied the open channel once per poll. The held
+      // messages take the place of the history that could not be read, which keeps the merge and
+      // the ordering below identical to the successful path.
+      refused = err && err.message ? err.message : String(err);
+      msgs = held;
+      noteOrder([{ type: "backfill-failed", channel: key, reason: refused }]);
     } finally {
       // SETTLED ON EVERY PATH, INCLUDING THE STALE ONE. A superseded load must not rebind the view it
       // no longer owns, and it must still drain the machine it armed; skipping the settle is what
@@ -842,6 +899,12 @@ async function select(key) {
         const ids = new Set(merged.map((m) => m && m.id));
         for (const m of channelMsgs) if (m && !ids.has(m.id)) merged.push(m);
         channelMsgs = merged.slice(-500);
+        shownChannel = key;
+        // SAID, NOT JUST KEPT. Retention without the mark shows old messages as though they were
+        // current, which is the half of this rule that turns a silent wipe into a silent lie. Marked
+        // per source: a refused history does not erase the poll's other marks, and a read that lands
+        // clears this one without touching theirs.
+        markStale(`#${key} history`, refused ? { kind: "refused", name: `#${key} history`, reason: refused } : null);
       }
       if (selecting && selecting.key === key) selecting = null;
       release();
@@ -885,54 +948,118 @@ async function refresh() {
   // The batch the settle will use. Only the all-activity path fills it; every other path settles on
   // empty, which is the machine's specified empty-history arm rather than a shortcut.
   let batch = [];
+  let activityPage = null;
   try {
-    roster = await (await fetch("/api/roster")).json();
-    refreshDerived();
-    const list = await (await fetch("/api/channels")).json();
-    // L2 shape is flat {channel,messages,description?,replay,replayWindow?,deliveryClass}.
-    // Tolerate a nested-config server briefly (pre-restart) without re-deriving defaults.
-    channels = new Map(
-      list.map((c) => {
-        if (c.replay !== undefined || c.deliveryClass !== undefined || (c.description && !c.config))
-          return [c.channel, c];
-        const cfg = c.config || {};
-        return [
-          c.channel,
-          {
-            messages: c.messages,
-            description: cfg.description,
-            replay: cfg.replay,
-            replayWindow: cfg.replayWindow,
-            deliveryClass: cfg.deliveryClass,
-          },
-        ];
-      }),
-    );
-    dms = await (await fetch("/api/dms?limit=500")).json();
+    // ── A FAILED READ KEEPS WHAT IS ON SCREEN ─────────────────────────────────────────────────────
+    //
+    // This was a sequential chain of `(await fetch(u)).json()`, and both of its properties were
+    // wrong on a slow link. A 500 body is valid JSON and `fetch` does not reject on one, so the
+    // REFUSAL was assigned into `roster` / `channels` / `dms` as if it were the snapshot; and the
+    // first read that did throw skipped every read after it, so one slow route emptied the feed and
+    // left the rest of the page un-refreshed with nothing saying so. Measured against a broker
+    // behind a 160ms link: `/api/activity` 500 `{"error":"timeout"}` produced
+    // `Uncaught TypeError: activity is not iterable` fifteen times in twenty-five seconds.
+    //
+    // `refreshAll` reads all four concurrently, applies ONLY the ones that succeeded, and returns
+    // what did not land. `apply` is the only writer, so a refusal cannot reach page state at all.
+    const SNAP = window.COTAL_SNAPSHOT;
+    // The all-activity backfill is a source ONLY when the reader is on all-activity. The other three
+    // lenses settle the order machine on an empty batch, which is its specified empty-history arm,
+    // and asking for a page nobody will draw is exactly the per-channel fan-out this change bounded.
+    const onAllActivity = !agentSel && !dmSel && selected === "*";
+    const stale = await SNAP.refreshAll([
+      // The space name used to be a one-shot at boot with a bare `fetch().then((r) => r.json())`, so
+      // a refusal arrived as data and the header read `· undefined` for the rest of the session:
+      // the same defect as the rest of this change, on the one read that never came back to correct
+      // itself. It is a source like any other now, so it is gated, named when it is stale, and
+      // replaced by the next poll that lands. `/api/meta` is `{space, pid}` computed in process, so
+      // reading it every poll costs no broker work.
+      {
+        name: "space",
+        read: async () => SNAP.readJson(await fetch("/api/meta"), "space"),
+        apply: (meta) => { $("space").textContent = `· ${meta.space}`; document.title = `Cotal · ${meta.space}`; },
+      },
+      {
+        name: "peers",
+        read: async () => SNAP.readJson(await fetch("/api/roster"), "peers"),
+        apply: (v) => { roster = v; refreshDerived(); },
+      },
+      {
+        name: "channels",
+        read: async () => SNAP.readJson(await fetch("/api/channels"), "channels"),
+        // L2 shape is flat {channel,messages,description?,replay,replayWindow?,deliveryClass}.
+        // Tolerate a nested-config server briefly (pre-restart) without re-deriving defaults.
+        apply: (list) => {
+          channels = new Map(
+            list.map((c) => {
+              if (c.replay !== undefined || c.deliveryClass !== undefined || (c.description && !c.config))
+                return [c.channel, c];
+              const cfg = c.config || {};
+              return [
+                c.channel,
+                {
+                  messages: c.messages,
+                  description: cfg.description,
+                  replay: cfg.replay,
+                  replayWindow: cfg.replayWindow,
+                  deliveryClass: cfg.deliveryClass,
+                },
+              ];
+            }),
+          );
+        },
+      },
+      {
+        name: "direct messages",
+        read: async () => SNAP.readJson(await fetch("/api/dms?limit=500"), "direct messages"),
+        apply: (v) => { dms = v; },
+      },
+      // Read alongside the other three rather than after them, so a refusal on it is reported in the
+      // same place instead of being swallowed, and so it no longer waits for them on a slow link.
+      //
+      // `/api/activity` answers an ENVELOPE now, never a bare array, and the shape change is a guard
+      // rather than a nuisance: a caller that ignores `partial` breaks here instead of rendering a
+      // short page as a complete one. NO TOLERANCE FOR A BARE ARRAY either, and that is not
+      // pedantry: `[].entries` is a real Array METHOD, so a `page.entries ?? page` tolerance quietly
+      // hands a FUNCTION to the merge when the answer is a list. It is read exactly one way.
+      ...(onAllActivity
+        ? [{
+            name: "activity",
+            read: async () => SNAP.readJson(await fetch(`/api/activity?limit=200`), "activity"),
+            apply: (page) => { batch = page.entries; activityPage = page; },
+          }]
+        : []),
+    ]);
+    // A PARTIAL PAGE IS NOT A REFUSAL AND IS NOT SILENCE. The entries it carries are real and are
+    // applied; what the reader is told is that some sources did not answer in time, which sources,
+    // and how many did. Reported on the same marker as a refusal so there is one place to look.
+    if (activityPage && activityPage.partial)
+      stale.push({
+        kind: "partial",
+        name: "activity",
+        reason: `${activityPage.read} of ${activityPage.of} sources answered within ${activityPage.deadlineMs}ms; missing ${activityPage.missing.join(", ")}`,
+      });
+    setStale(stale);
+    // The order machine's own failure arm keeps its own note: a refused history read is what makes a
+    // backfill incomplete, and the notice that draws it is about ordering. The other three sources
+    // are carried by the stale pill and are not backfill failures, so they are not reported as ones.
+    const backfillRefused = stale.find((s) => s.name === "activity" && s.kind !== "partial");
+    if (backfillRefused) noteOrder([{ type: "backfill-failed", reason: backfillRefused.reason }]);
     renderSidebarNav();
-    if (agentSel) {
-      renderCenter();
-    } else if (dmSel) {
+    // THE BOUNDARY MUST PASS EVEN WHEN THE FETCH DOES NOT, and this is not a soft failure mode
+    // invented here. `pending` is drained only by the settle, so a rejected request used to mean the
+    // machine never settled and every frame held during it stayed invisible for the life of the page,
+    // with nothing on screen saying so. That is strictly worse than what this code replaced, where a
+    // failed fetch simply left the live arrivals in place.
+    //
+    // A failed history read IS an empty history batch: the machine already specifies that case, and
+    // specifies that the baseline then comes from the earliest BUFFERED frame. So the boundary is
+    // settled on empty rather than skipped, and the refusal is SURFACED (as a stale mark above and a
+    // note here) instead of being swallowed. Reporting it is what keeps this from being a silent degrade.
+    if (agentSel || dmSel) {
       renderCenter();
     } else if (selected !== "*") {
       select(selected);
-    } else {
-      // THE BOUNDARY MUST PASS EVEN WHEN THE FETCH DOES NOT, and this is not a soft failure mode
-      // invented here. `pending` is drained only by the settle, so a rejected request used to mean the
-      // machine never settled and every frame held during it stayed invisible for the life of the page,
-      // with nothing on screen saying so. That is strictly worse than what this code replaced, where a
-      // failed fetch simply left the live arrivals in place.
-      //
-      // A failed history read IS an empty history batch: the machine already specifies that case, and
-      // specifies that the baseline then comes from the earliest BUFFERED frame. So the boundary is
-      // settled on empty rather than skipped, and the failure is SURFACED as a note instead of being
-      // swallowed. Reporting it is what keeps this from being a silent degrade.
-      try {
-        batch = await (await fetch("/api/activity?limit=200")).json();
-      } catch (err) {
-        batch = [];
-        noteOrder([{ type: "backfill-failed", reason: err && err.message ? err.message : String(err) }]);
-      }
     }
   } finally {
     // ── THE SETTLE, ON EVERY EXIT PATH ────────────────────────────────────────────────────────────
@@ -942,8 +1069,9 @@ async function refresh() {
     // machine that this function had armed and would never settle, and none of them reached the feed.
     // Switching back to all activity showed a feed that had never received them, and the next refresh
     // replaced the machine and took the buffer with it. A `finally` is the only placement that
-    // survives all four branches plus a throw from any of the fetches above, and an unguarded
-    // `/api/roster` was one of those throws.
+    // survives all four branches plus a throw from anything between the arm and here. The source
+    // reads no longer supply that throw, because a refusal is reported rather than propagated; the
+    // renders below the reads still can, and the cost of missing it is the same.
     activity = batch;
     // Same trust rule as the live feed: the backfill is tagged with the channel the SERVER
     // requested, so the payload claim is overwritten at ingress rather than downstream.
@@ -1274,12 +1402,6 @@ if (isDemo) {
   document.title = "Cotal · demo";
   renderDemo();
 } else {
-  fetch("/api/meta")
-    .then((r) => r.json())
-    .then((m) => {
-      $("space").textContent = `· ${m.space}`;
-      document.title = `Cotal · ${m.space}`;
-    });
   refresh();
   connect();
 }

package/dist/web/graph.html

@@ -178,6 +178,7 @@
       </span>
       <a class="navlink" href="/">← Monitor</a>
       <span class="pill down" id="conn"><span class="d"></span><span class="t">connecting</span></span>
+      <span class="pill stale" id="stale" hidden><span class="d"></span><span class="t"></span></span>
       <span class="pill off" id="feed" hidden><span class="d"></span><span class="t">membership</span></span>
       <div class="ctrls">
         <div class="grp" id="modes">
@@ -213,6 +214,7 @@
     <aside id="detail" class="glass"></aside>
     <div class="hint" id="hint">click a node for detail · scroll to zoom · drag to pan</div>
 
+    <script src="/snapshot.js"></script>
     <script src="/harness.js"></script>
     <script src="/parts.js"></script>
     <script src="/agui-frame.js"></script>

package/dist/web/graph.js

@@ -269,6 +269,30 @@
   // into it: they are different facts and the pill has to say which one.
   function membershipUnreadable() { feed.unreadable = true; setFeed(); }
 
+  // ── THE BOOTSTRAP MUST NOT OUTRANK THE LIVE FEED ────────────────────────────────────────────
+  //
+  // Every bootstrap read is ISSUED before its value is applied: `refreshAll` starts all six, awaits
+  // all six, and only then applies each. So a snapshot is always at least as old as the moment the
+  // page asked for it, while an SSE event is by definition newer than that moment. Now that the feed
+  // opens FIRST, a live `roster` or `membership` can land while those reads are still in flight, and
+  // applying the older snapshot afterwards silently reverts it: `updateRoster` on an empty list marks
+  // every unseen agent `present = false` and deletes it outright unless it is still a feed member,
+  // and `applyMembership` on an empty set clears `memberOf`. The agent the feed just announced
+  // vanishes from the graph.
+  //
+  // Both channels carry a FULL snapshot through the SAME apply function, so a live event does not
+  // need merging with the older read, it REPLACES it. Once the feed has spoken for a source, that
+  // source's bootstrap value is stale on arrival and is dropped rather than applied.
+  //
+  // WHAT IS SUPERSEDED IS THE SOURCE, NOT THE SNAPSHOT. `membership` speaks in two sentences, a
+  // snapshot and a REFUSAL, and each side can say either one. Writing the rule only onto the apply
+  // wrappers covered the snapshots and left both refusals loose, in opposite directions: a live
+  // refusal erased by an older successful read, and a successful live snapshot overruled by a
+  // bootstrap read that refused after it. Both end in the header pill making a claim about the mesh
+  // that is really a claim about one read, which is the one thing this pill exists not to do.
+  const liveApplied = new Set();
+  const supersededByFeed = (name, apply) => (value) => { if (!liveApplied.has(name)) apply(value); };
+
   function applyMembership(snap) {
     if (!snap) return;
     feed.unreadable = false; // a snapshot arrived, whatever it contains
@@ -683,31 +707,76 @@
   $("legendToggle").onclick = () => $("legend").classList.toggle("collapsed");
   function setConn(live) { const el = $("conn"); el.classList.toggle("down", !live); el.querySelector(".t").textContent = live ? "live" : "disconnected"; }
 
+  /** Say which sources are showing their last good value. Visible, not a console line. */
+  function setStale(stale) {
+    const el = $("stale");
+    if (!el) return;
+    const label = window.COTAL_SNAPSHOT.staleLabel(stale);
+    el.hidden = !label;
+    if (!label) return;
+    el.querySelector(".t").textContent = label;
+    el.title = stale.map((s) => `${s.name}: ${s.reason}`).join("\n");
+  }
+
   // ── boot ──
   async function load() {
-    const [meta, roster, chans, membership, activity, dmHist] = await Promise.all([
-      fetch("/api/meta").then((r) => r.json()), fetch("/api/roster").then((r) => r.json()), fetch("/api/channels").then((r) => r.json()),
+    // ── ONE REFUSED READ MUST NOT EMPTY THE PAGE ────────────────────────────────────────────────
+    //
+    // This was a six-way `Promise.all` of `fetch(u).then((r) => r.json())`. `fetch` does not reject
+    // on a 500 and this server's 500 body is `{"error": "..."}`, which parses, so the refusal
+    // arrived as DATA and the first `for (const c of chans)` threw `chans is not iterable` out of
+    // the whole bootstrap. The `.catch(() => [])` guards on activity and dms never fired for the
+    // same reason: there was nothing to catch. Because `load()` rejected, `connect()`, which runs
+    // as `load().then(connect)`, was never called, so the page sat at `disconnected` with no peers
+    // and no channel hubs and could not recover without a reload. Measured against a broker behind
+    // a 160ms link, where `/api/channels` and `/api/activity` both returned 500 `timeout`.
+    //
+    // Now every source is read independently, only successful reads are applied, and what did not
+    // land is named on screen. Nothing here can prevent `connect()` from running.
+    const SNAP = window.COTAL_SNAPSHOT;
+    let activityPage = null;
+    const stale = await SNAP.refreshAll([
+      { name: "space", read: async () => SNAP.readJson(await fetch("/api/meta"), "space"),
+        apply: (meta) => { $("space").textContent = "· " + meta.space; } },
+      { name: "channels", read: async () => SNAP.readJson(await fetch("/api/channels"), "channels"),
+        apply: (chans) => { for (const c of chans) { const h = ensureHub(c.channel); h.msgs = c.messages || 0; h.desc = c.description || ""; h.deliveryClass = c.deliveryClass; h.replay = c.replay; h.replayWindow = c.replayWindow; } } },
+      { name: "peers", read: async () => SNAP.readJson(await fetch("/api/roster"), "peers"),
+        apply: supersededByFeed("peers", (roster) => updateRoster(roster)) },
       // `.catch(() => ({members: []}))` here turned a failed fetch into an empty snapshot, which the
       // pill then reported as "traffic-only" — the client half of the same defect the server had.
       // A non-200 is not a snapshot either: `r.json()` on the refusal body would parse fine and
-      // arrive as data, so the status is checked before the body is trusted.
-      fetch("/api/membership")
-        .then((r) => (r.ok ? r.json() : { unreadable: true }))
-        .catch(() => ({ unreadable: true })),
-      fetch("/api/activity?limit=400").then((r) => r.json()).catch(() => []), fetch("/api/dms?limit=400").then((r) => r.json()).catch(() => []),
+      // arrive as data, so the status is checked before the body is trusted. That check now lives in
+      // `readJson`, and an unreadable feed reaches `membershipUnreadable()` through the stale path.
+      { name: "membership", read: async () => SNAP.readJson(await fetch("/api/membership"), "membership"),
+        apply: supersededByFeed("membership", (m) => applyMembership(m)) },
+      // `/api/activity` answers an ENVELOPE, never a bare array; a caller that ignored `partial`
+      // would break here rather than seed a short page as though it were the whole backfill.
+      { name: "activity", read: async () => SNAP.readJson(await fetch("/api/activity?limit=400"), "activity"),
+        apply: (page) => { activityPage = page; seedActivity(page.entries); } },
+      { name: "direct messages", read: async () => SNAP.readJson(await fetch("/api/dms?limit=400"), "direct messages"),
+        apply: (dmHist) => seedDms(dmHist) },
     ]);
-    $("space").textContent = "· " + meta.space;
-    for (const c of chans) { const h = ensureHub(c.channel); h.msgs = c.messages || 0; h.desc = c.description || ""; h.deliveryClass = c.deliveryClass; h.replay = c.replay; h.replayWindow = c.replayWindow; }
-    updateRoster(roster);
-    // authoritative spokes BEFORE traffic seeding (no skeleton flicker) — unless the read refused,
-    // in which case there are no spokes to draw and the pill has to say so rather than imply a mesh
-    // with no feed.
-    if (membership && membership.unreadable) membershipUnreadable();
-    else applyMembership(membership);
+    if (activityPage && activityPage.partial)
+      stale.push({
+        kind: "partial",
+        name: "activity",
+        reason: `${activityPage.read} of ${activityPage.of} sources answered within ${activityPage.deadlineMs}ms; missing ${activityPage.missing.join(", ")}`,
+      });
+    setStale(stale);
+    // A bootstrap read that REFUSED is a sentence about the membership source like any other, so it
+    // obeys the same rule as the snapshot beside it: it is a fact about that one read, and the live
+    // feed may already have said something newer. Routed through `supersededByFeed` rather than a
+    // second copy of the condition, because two spellings of one rule is how two halves drift apart.
+    if (stale.some((s) => s.name === "membership")) supersededByFeed("membership", membershipUnreadable)();
+    alpha = 1; for (let i = 0; i < 200; i++) physics(); // pre-warm to a settled layout
+    const f = fitTarget(); cam.x = f.x; cam.y = f.y; cam.scale = f.scale;
+  }
+
+  /** Seed traffic glow + the `recent` buffer from the activity backfill so the channel detail's
+   *  "recently active" tags and the "recent" section aren't empty until the first live SSE message
+   *  arrives. Its own function so the read that feeds it can fail without taking the boot with it. */
+  function seedActivity(activity) {
     for (const e of activity) { const m = e.msg; if (m) m.channel = e.channel; const a = m?.from?.id && agents.get(m.from.id); if (e.mode === "chat" && m?.channel && a) chatHit(a, m.channel, m.ts || now()); }
-    for (const m of dmHist) { const a = m.from?.id && agents.get(m.from.id), b = typeof m.to === "string" && agents.get(m.to); if (a && b && a !== b) dmHit(a, b, m.ts || now()); }
-    // Seed the `recent` buffer from the activity backfill so the channel detail's "recently active" tags +
-    // the "recent" section aren't empty until the first live SSE message arrives (norman).
     for (const e of activity.slice(-80)) {
       const m = e.msg; if (!m) continue;
       const to = e.mode === "unicast" ? (typeof m.to === "string" ? (agents.get(m.to)?.name || shortId(m.to)) : m.to?.name) : e.mode === "anycast" ? "@" + (m.toService || "") : null;
@@ -715,13 +784,26 @@
     }
     recent.sort((a, b) => a.ts - b.ts);
     if (recent.length > 80) recent.splice(0, recent.length - 80);
-    alpha = 1; for (let i = 0; i < 200; i++) physics(); // pre-warm to a settled layout
-    const f = fitTarget(); cam.x = f.x; cam.y = f.y; cam.scale = f.scale;
   }
-  function connect() { const es = new EventSource("/feed"); es.onopen = () => setConn(true); es.onerror = () => setConn(false); es.addEventListener("roster", (e) => updateRoster(JSON.parse(e.data))); es.addEventListener("membership", (e) => applyMembership(JSON.parse(e.data))); es.addEventListener("membership-read-failed", () => membershipUnreadable()); es.addEventListener("message", (e) => onMessage(JSON.parse(e.data))); }
+
+  function seedDms(dmHist) {
+    for (const m of dmHist) { const a = m.from?.id && agents.get(m.from.id), b = typeof m.to === "string" && agents.get(m.to); if (a && b && a !== b) dmHit(a, b, m.ts || now()); }
+  }
+  function connect() { const es = new EventSource("/feed"); es.onopen = () => setConn(true); es.onerror = () => setConn(false); es.addEventListener("roster", (e) => { liveApplied.add("peers"); updateRoster(JSON.parse(e.data)); }); es.addEventListener("membership", (e) => { liveApplied.add("membership"); applyMembership(JSON.parse(e.data)); }); es.addEventListener("membership-read-failed", () => { liveApplied.add("membership"); membershipUnreadable(); }); es.addEventListener("message", (e) => onMessage(JSON.parse(e.data))); }
 
   resize();
   setInterval(setFeed, 5000); // age "live" → "stale" even without new events
-  load().then(connect).catch((err) => { console.error(err); setConn(false); });
+  // THE FEED IS NOT GATED ON THE BOOTSTRAP, IN EITHER SENSE. It was once chained behind `load()`
+  // RESOLVING, so a single refused read left the page permanently disconnected with nothing on it.
+  // That was fixed by making `load()` never reject, which guaranteed `connect()` would RUN but not
+  // that it would run SOON: chained with `.then`, it still waited for the whole bootstrap, and that
+  // bootstrap reads `/api/activity?limit=400` and `/api/dms?limit=400`, both bounded by the
+  // aggregation deadline. On a slow link the page therefore read `disconnected` for the entire load
+  // window. Observed across a WAN link as "always showing disconnected, and taking long to show the
+  // graph". The live feed is exactly what a page showing stale data needs most, so it opens FIRST
+  // and the bootstrap fills in around it. The Monitor page has always done this: `app.js` ends with
+  // `refresh(); connect();`, concurrent, not chained.
+  connect();
+  load().catch((err) => console.error(err));
   requestAnimationFrame(frame);
 })();

package/dist/web/index.html

@@ -52,6 +52,9 @@
       .pill .t { font-size: 11px; font-weight: 600; color: var(--green); }
       .pill.down { background: #2a1717; }
       .pill.down .d { background: var(--red); } .pill.down .t { color: var(--red); }
+      /* last-good data on screen, refresh refused - amber, and it carries a text label, never colour alone */
+      .pill.stale { background: var(--tint-amber); }
+      .pill.stale .d { background: var(--amber); } .pill.stale .t { color: var(--amber); }
 
       /* HealthBand tiles */
       .tiles { margin-left: auto; display: flex; gap: 10px; }
@@ -474,6 +477,7 @@
         <span class="title">Cotal</span>
         <span class="space" id="space"></span>
         <span class="pill down" id="conn"><span class="d"></span><span class="t">connecting</span></span>
+        <span class="pill stale" id="stale" hidden><span class="d"></span><span class="t"></span></span>
         <a class="brand-graph" href="/graph">Graph view →</a>
       </span>
       <div class="tiles" id="tiles"></div>
@@ -502,6 +506,7 @@
     </main>
     <script src="/vendor/marked.umd.js"></script>
     <script src="/vendor/purify.min.js"></script>
+    <script src="/snapshot.js"></script>
     <script src="/harness.js"></script>
     <script src="/parts.js"></script>
     <script src="/agui-frame.js"></script>

package/dist/web/snapshot.js

@@ -0,0 +1,99 @@
+// How this dashboard survives a poll that fails, on both pages.
+//
+// A REFUSAL IS NOT DATA, AND THIS SURFACE COULD NOT TELL THEM APART. The server answers a failed
+// route with a 500 whose body is `{"error": "..."}` - valid JSON. `fetch()` does not reject on a
+// 500 either, so `fetch(u).then((r) => r.json())` resolves with the REFUSAL, and the page then
+// treats it as the snapshot. Measured on the shipped pages against a broker behind a 160ms link:
+// `/api/activity` returned 500 `{"error":"timeout"}`, `/graph` threw `TypeError: chans is not
+// iterable` out of its bootstrap and never reached `connect()`, so the pill said `disconnected`
+// with no peers and no channels and the page never recovered; `/` threw `activity is not iterable`
+// fifteen times in twenty-five seconds. Both are the same bug: the status was never consulted, so
+// the one thing that separated a refusal from an empty result never reached the code.
+//
+// THE ORDER OF THE TWO RULES IS THE FIX. First, a non-200 is turned into a THROW that names its
+// condition. Second, a throwing read leaves the value the page already holds exactly where it is
+// and is reported STALE. Either rule alone is not enough: checking the status without keeping the
+// last good snapshot converts a silent corruption into a visible wipe, and keeping the last good
+// snapshot without checking the status keeps nothing, because the refusal arrived as a successful
+// parse and was never a failure to begin with.
+//
+// WHAT STALE MEANS HERE, AND WHY IT IS NOT A FALLBACK. The page keeps showing data it already had
+// and SAYS SO. It does not invent a value, does not substitute a default, and does not silently
+// degrade: the reader is told, per source, that what they are looking at is the last thing that
+// was actually read and why the refresh did not land. Recovery is the next successful read, which
+// replaces the value and clears the mark.
+(() => {
+  /** Parse a JSON response, refusing a non-200 rather than handing its body back as data. The
+   *  refusal names the source and the status, and carries the server's own `error` text when the
+   *  body has one, so a caller that only logs it still says something true. */
+  async function readJson(res, what) {
+    if (!res.ok) {
+      let detail = "";
+      try {
+        const body = await res.json();
+        if (body && typeof body.error === "string") detail = `: ${body.error}`;
+      } catch {
+        /* a refusal need not be JSON; the status is the fact that matters */
+      }
+      throw new Error(`${what} refused with HTTP ${res.status}${detail}`);
+    }
+    return res.json();
+  }
+
+  /** Read every source concurrently and apply ONLY the ones that succeeded.
+   *
+   *  `sources` is `[{ name, read, apply }]`. `apply` is called with the value of a successful read
+   *  and is the ONLY place a source's state is written, so a failed read cannot reach it - the
+   *  retention is structural rather than a rule someone has to remember at each call site.
+   *  Returns the stale list, `[{ name, reason }]`, empty when everything landed.
+   *
+   *  Concurrent, not sequential: on a slow link the pre-existing sequential chain made every source
+   *  wait for the slowest one, and a throw part-way through skipped the rest entirely.
+   *
+   *  WHAT IS CAUGHT IS THE READ, AND ONLY THE READ. A refusal or a network failure is this function's
+   *  business and is turned into a named entry. An `apply` that throws is a defect in the page, not a
+   *  fact about the link, and it is allowed to propagate: swallowing it would hide a broken renderer
+   *  behind a stale marker that says the network is at fault. The cost is stated rather than hidden:
+   *  a throwing apply ends the loop, so the sources after it are not applied and the caller does not
+   *  reach its marker. Every apply here is a plain assignment or a render the page owns. */
+  async function refreshAll(sources) {
+    const settled = await Promise.all(
+      sources.map(async (s) => {
+        try {
+          return { value: await s.read() };
+        } catch (e) {
+          return { error: e };
+        }
+      }),
+    );
+    const stale = [];
+    for (let i = 0; i < settled.length; i++) {
+      const r = settled[i];
+      if ("error" in r) {
+        const e = r.error;
+        stale.push({ kind: "refused", name: sources[i].name, reason: e && e.message ? e.message : String(e) });
+        continue;
+      }
+      sources[i].apply(r.value);
+    }
+    return stale;
+  }
+
+  /** One line for the header: what is stale, what is partial, and nothing when neither.
+   *
+   *  The two are DIFFERENT FACTS and the label keeps them apart. Stale means the page is showing the
+   *  last value that was read because the refresh was refused. Partial means the refresh DID land and
+   *  is short: some sources did not answer inside the request's deadline. Folding them into one word
+   *  would tell a reader that data is old when it is actually new and incomplete. */
+  function staleLabel(stale) {
+    if (!stale.length) return "";
+    const refused = stale.filter((s) => s.kind !== "partial").map((s) => s.name);
+    const partial = stale.filter((s) => s.kind === "partial").map((s) => s.name);
+    const parts = [];
+    if (refused.length) parts.push(`stale: ${refused.join(", ")}`);
+    if (partial.length) parts.push(`partial: ${partial.join(", ")}`);
+    return parts.join(" · ");
+  }
+
+  window.COTAL_SNAPSHOT = { readJson, refreshAll, staleLabel };
+})();