diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2ac7ce..e6b8742 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,12 +27,24 @@ All notable user-visible changes to this project are documented in this file.
 
 ### Changed
 
+- New snippets no longer steal the scroll position: the viewer only follows
+  them when already at the bottom of the stream, and shows a "new snippet ↓"
+  pill otherwise.
+- Activity the user isn't looking at — another session, or any session while
+  the tab is hidden — badges the tab title with an unread count.
 - The Claude Code skill now documents the repo-local CLI fallback and a
   checkpoint-drain feedback pattern for harnesses that cannot surface
   background watcher output.
 
 ### Fixed
 
+- A comment that failed to send was silently lost (input cleared, no error).
+  The viewer now echoes comments immediately (pending until confirmed) and on
+  failure restores the text to the input with an error toast.
+- After an SSE reconnect the viewer refetches the selected session, so
+  snippets and comments that arrived during the gap can no longer be
+  silently missing from a live-looking board.
+
 - Comments not attached to a snippet (e.g. `sideshow comment` without
   `--snippet`) were stored and delivered to agents but never shown in the
   viewer; they now render in the session thread.
diff --git a/e2e/viewer.spec.ts b/e2e/viewer.spec.ts
index 31c5a56..9a29ae8 100644
--- a/e2e/viewer.spec.ts
+++ b/e2e/viewer.spec.ts
@@ -86,6 +86,103 @@ test("session thread shows snippet-less comments and messages the agent", async
   await expect(page.locator("#stream > .card")).toHaveCount(3);
 });
 
+test("a failed comment send restores the input instead of losing the message", async ({
+  page,
+  server,
+}) => {
+  await publish(server.url, { html: "<p>x</p>", title: "Doc", agent: "e2e" });
+
+  await page.goto(server.url);
+  const card = page.locator(".card:not(#sessionThread)");
+  await page.route("**/api/comments", (route) =>
+    route.request().method() === "POST" ? route.abort() : route.fallback(),
+  );
+
+  const input = card.locator(".composer input");
+  await input.fill("important feedback");
+  await input.press("Enter");
+
+  await expect(page.locator("#toast")).toContainText("Couldn't send");
+  await expect(input).toHaveValue("important feedback");
+  await expect(card.locator(".cmt")).toHaveCount(0);
+
+  // and once the network is back, the same send goes through
+  await page.unroute("**/api/comments");
+  await input.press("Enter");
+  await expect(card.locator(".cmt .txt")).toHaveText("important feedback");
+});
+
+test("a comment echoes immediately, before the SSE round-trip confirms it", async ({
+  page,
+  server,
+}) => {
+  await publish(server.url, { html: "<p>x</p>", title: "Doc", agent: "e2e" });
+
+  await page.goto(server.url);
+  const card = page.locator(".card:not(#sessionThread)");
+  // hold the POST open so only the optimistic echo can render
+  await page.route("**/api/comments", async (route) => {
+    if (route.request().method() !== "POST") return route.fallback();
+    await new Promise((r) => setTimeout(r, 1500));
+    await route.continue();
+  });
+
+  const input = card.locator(".composer input");
+  await input.fill("instant echo");
+  await input.press("Enter");
+
+  const cmt = card.locator(".cmt");
+  await expect(cmt).toHaveClass(/pending/);
+  await expect(cmt.locator(".txt")).toHaveText("instant echo");
+  // settles into a confirmed comment, still exactly one copy
+  await expect(cmt).not.toHaveClass(/pending/, { timeout: 10_000 });
+  await expect(card.locator(".cmt")).toHaveCount(1);
+});
+
+test("a snippet published while scrolled up shows a pill instead of yanking", async ({
+  page,
+  server,
+}) => {
+  const first = await publish(server.url, {
+    html: '<div style="height: 1400px">tall content</div>',
+    title: "Tall",
+    agent: "e2e",
+  });
+
+  await page.goto(server.url);
+  const main = page.locator("main");
+  // wait for the bridge to grow the iframe so the stream actually overflows
+  await expect
+    .poll(() => main.evaluate((m) => m.scrollHeight - m.clientHeight), { timeout: 15_000 })
+    .toBeGreaterThan(400);
+  await main.evaluate((m) => (m.scrollTop = 0));
+
+  await publish(server.url, { html: "<p>new</p>", title: "Later", session: first.sessionId });
+
+  await expect(page.locator("#newPill")).toBeVisible();
+  expect(await main.evaluate((m) => m.scrollTop)).toBe(0); // reading position kept
+
+  await page.locator("#newPill").click();
+  await expect(page.locator("#newPill")).toBeHidden();
+  await expect.poll(() => main.evaluate((m) => m.scrollTop)).toBeGreaterThan(200);
+});
+
+test("activity in an unselected session badges the tab title until viewed", async ({
+  page,
+  server,
+}) => {
+  await publish(server.url, { html: "<p>a</p>", title: "First", agent: "one" });
+
+  await page.goto(server.url);
+  await expect(page).toHaveTitle("sideshow");
+
+  await publish(server.url, { html: "<p>b</p>", title: "Second", agent: "two" });
+
+  await expect(page).toHaveTitle("(1) sideshow");
+  await page.locator(".sess", { hasText: "two" }).click();
+  await expect(page).toHaveTitle("sideshow");
+});
+
 test("version select appears live after an update", async ({ page, server }) => {
   const snippet = await publish(server.url, { html: "<p>v1</p>", title: "Doc", agent: "e2e" });
 
diff --git a/viewer/index.html b/viewer/index.html
index 68afcd3..8db15fa 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -345,6 +345,25 @@
         color: var(--text);
         background: var(--hover);
       }
+      .cmt.pending {
+        opacity: 0.55;
+      }
+      #newPill {
+        position: fixed;
+        left: 50%;
+        bottom: 64px;
+        transform: translateX(-50%);
+        font-family: inherit;
+        font-size: 12.5px;
+        color: var(--accent);
+        background: var(--accent-bg);
+        border: 0.5px solid var(--accent);
+        border-radius: 999px;
+        padding: 6px 14px;
+        cursor: pointer;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+        z-index: 40;
+      }
 
       .empty {
         text-align: center;
@@ -480,6 +499,7 @@ <h2>or try it yourself</h2>
       </main>
     </div>
     <div id="toast" role="status" aria-live="polite"></div>
+    <button id="newPill" hidden>new snippet ↓</button>
     <script>
       const $ = (id) => document.getElementById(id);
       const state = {
@@ -577,6 +597,7 @@ <h2>or try it yourself</h2>
         }
         $("onboard").hidden = state.sessions.length > 0;
         $("sessionView").hidden = state.sessions.length === 0;
+        document.title = state.unread.size ? `(${state.unread.size}) sideshow` : "sideshow";
       }
 
       async function refreshSessions() {
@@ -621,6 +642,7 @@ <h2>or try it yourself</h2>
       async function select(id) {
         state.selected = id;
         state.unread.delete(id);
+        $("newPill").hidden = true;
         renderSidebar();
         renderSessionHead();
         const stream = $("stream");
@@ -660,21 +682,48 @@ <h2>or try it yourself</h2>
             <button>Send</button>
           </div>
         </div>`;
+        wireComposer(card, (text) => ({ session: state.selected, text, author: "user" }));
+        $("stream").appendChild(card);
+      }
+
+      // Shared composer behavior: echo the comment immediately (pending until
+      // the POST confirms), and on failure put the text back in the input —
+      // a user message must never be silently lost.
+      function wireComposer(card, makeBody) {
         const input = card.querySelector(".composer input");
         const send = async () => {
           const text = input.value.trim();
           if (!text) return;
           input.value = "";
-          await api("/api/comments", {
-            method: "POST",
-            body: JSON.stringify({ session: state.selected, text, author: "user" }),
-          });
+          const el = renderComment(
+            { author: "user", text, createdAt: new Date().toISOString() },
+            card,
+          );
+          el?.classList.add("pending");
+          try {
+            const created = await api("/api/comments", {
+              method: "POST",
+              body: JSON.stringify(makeBody(text)),
+            });
+            // the SSE refetch may have rendered it already; keep one copy
+            if (card.querySelector(`[data-cid="${created.id}"]`)) el?.remove();
+            else if (el) {
+              el.dataset.cid = created.id;
+              el.classList.remove("pending");
+            }
+          } catch (err) {
+            el?.remove();
+            if (!input.value) input.value = text;
+            input.focus();
+            toast(
+              `Couldn't send — ${err.message || "network error"}. Your message is back in the box.`,
+            );
+          }
         };
         input.onkeydown = (e) => {
           if (e.key === "Enter") send();
         };
         card.querySelector(".composer button").onclick = send;
-        $("stream").appendChild(card);
       }
 
       // --- snippet cards ---
@@ -706,20 +755,7 @@ <h2>or try it yourself</h2>
             <button>Send</button>
           </div>
         </div>`;
-          const input = card.querySelector(".composer input");
-          const send = async () => {
-            const text = input.value.trim();
-            if (!text) return;
-            input.value = "";
-            await api("/api/comments", {
-              method: "POST",
-              body: JSON.stringify({ snippet: s.id, text, author: "user" }),
-            });
-          };
-          input.onkeydown = (e) => {
-            if (e.key === "Enter") send();
-          };
-          card.querySelector(".composer button").onclick = send;
+          wireComposer(card, (text) => ({ snippet: s.id, text, author: "user" }));
           card.querySelector(".del").onclick = async () => {
             if (
               confirm(`Delete "${state.cards.get(s.id).querySelector(".card-title").textContent}"?`)
@@ -764,17 +800,34 @@ <h2>or try it yourself</h2>
         const src = `/s/${s.id}?cb=${s.version}`;
         if (iframe.getAttribute("src") !== src) iframe.src = src;
 
-        if (fresh && scroll) card.scrollIntoView({ behavior: "smooth", block: "start" });
+        // Follow new snippets only when the user is already at the bottom;
+        // never yank them away from whatever they're reading mid-scroll.
+        if (fresh && scroll) {
+          if (nearBottom()) card.scrollIntoView({ behavior: "smooth", block: "start" });
+          else showNewPill(s.id);
+        }
+      }
+
+      function nearBottom() {
+        const m = document.querySelector("main");
+        return m.scrollHeight - m.scrollTop - m.clientHeight < 200;
       }
 
-      function renderComment(c) {
-        const card = c.snippetId ? state.cards.get(c.snippetId) : $("sessionThread");
-        if (!card) return;
+      function showNewPill(snippetId) {
+        const pill = $("newPill");
+        pill.dataset.target = snippetId;
+        pill.hidden = false;
+      }
+
+      function renderComment(c, targetCard) {
+        const card =
+          targetCard || (c.snippetId ? state.cards.get(c.snippetId) : $("sessionThread"));
+        if (!card) return null;
         const cmts = card.querySelector(".cmts");
-        if (cmts.querySelector(`[data-cid="${c.id}"]`)) return;
+        if (c.id && cmts.querySelector(`[data-cid="${c.id}"]`)) return null;
         const el = document.createElement("div");
         el.className = "cmt" + (c.author === "user" ? " user" : "");
-        el.dataset.cid = c.id;
+        if (c.id) el.dataset.cid = c.id;
         const who = document.createElement("span");
         who.className = "who";
         who.textContent = c.author === "user" ? "you" : c.author;
@@ -786,6 +839,7 @@ <h2>or try it yourself</h2>
         when.textContent = relTime(c.createdAt);
         el.append(who, txt, when);
         cmts.appendChild(el);
+        return el;
       }
 
       // --- bridge messages from sandboxed snippets ---
@@ -818,33 +872,63 @@ <h2>or try it yourself</h2>
 
       function connect() {
         const es = new EventSource("/api/events");
-        es.onopen = () => $("live").classList.add("on");
+        let everConnected = false;
+        es.onopen = async () => {
+          $("live").classList.add("on");
+          // events that fired during a gap are gone for good — refetch so the
+          // board can't silently go stale while still looking live
+          if (everConnected) await resyncSelected();
+          everConnected = true;
+        };
         es.onerror = () => $("live").classList.remove("on");
         es.onmessage = async (ev) => {
           const e = JSON.parse(ev.data);
+          // activity the user isn't looking at — other session or hidden tab —
+          // marks the session unread, which also badges the tab title
+          const away = e.sessionId && (e.sessionId !== state.selected || document.hidden);
           if (e.type.startsWith("session-")) {
             await refreshSessions();
           } else if (e.type === "snippet-created" || e.type === "snippet-updated") {
+            if (away) state.unread.add(e.sessionId);
             if (e.sessionId === state.selected) await upsertCard(e.id);
-            else state.unread.add(e.sessionId);
             await refreshSessionsQuiet();
           } else if (e.type === "snippet-deleted") {
             state.cards.get(e.id)?.remove();
             state.cards.delete(e.id);
             await refreshSessionsQuiet();
           } else if (e.type === "comment-created") {
+            if (away) state.unread.add(e.sessionId);
             if (e.sessionId === state.selected) {
               const query = e.snippetId ? `snippet=${e.snippetId}` : `session=${e.sessionId}`;
               const { comments } = await api(`/api/comments?${query}`);
               for (const c of comments) renderComment(c);
-            } else {
-              state.unread.add(e.sessionId);
-              renderSidebar();
             }
+            renderSidebar();
           }
         };
       }
 
+      // Re-fetch the selected session's snippets and comments after an SSE
+      // reconnect; cards reconcile by id and comments dedupe by data-cid.
+      async function resyncSelected() {
+        const before = state.selected;
+        await refreshSessions();
+        if (!state.selected || state.selected !== before) return; // select() rebuilt the stream
+        const snippets = await api(`/api/sessions/${state.selected}/snippets`).catch(() => []);
+        const ids = new Set(snippets.map((s) => s.id));
+        for (const [id, card] of [...state.cards]) {
+          if (!ids.has(id)) {
+            card.remove();
+            state.cards.delete(id);
+          }
+        }
+        for (const meta of snippets) await upsertCard(meta.id, { scroll: false });
+        const { comments } = await api(`/api/comments?session=${state.selected}`).catch(() => ({
+          comments: [],
+        }));
+        for (const c of comments) renderComment(c);
+      }
+
       async function refreshSessionsQuiet() {
         state.sessions = await api("/api/sessions");
         renderSidebar();
@@ -863,6 +947,27 @@ <h2>or try it yourself</h2>
         };
       }
 
+      $("newPill").onclick = () => {
+        const card = state.cards.get($("newPill").dataset.target);
+        card?.scrollIntoView({ behavior: "smooth", block: "start" });
+        $("newPill").hidden = true;
+      };
+      document.querySelector("main").addEventListener(
+        "scroll",
+        () => {
+          if (nearBottom()) $("newPill").hidden = true;
+        },
+        { passive: true },
+      );
+
+      // returning to the tab counts as seeing the selected session
+      document.addEventListener("visibilitychange", () => {
+        if (!document.hidden && state.selected) {
+          state.unread.delete(state.selected);
+          renderSidebar();
+        }
+      });
+
       setInterval(() => {
         if (state.sessions.length > 0) refreshSessionsQuiet();
       }, 45000);