@saadnvd1/agent-os 0.3.481 → 0.3.483

package/README.md

@@ -323,11 +323,11 @@ The ring in the tab bar (in the composer on a phone) is how full the
 conversation's context is, measured against the room before auto-compact:
 amber past 60%, red past 85%. Tap it for the breakdown and **Compact now**.
 
-Chats and tasks compact at 150k tokens of context by default (Settings →
-Workspaces → Compact; off sets it to never), not near the model's window:
-AgentOS launches Claude Code with `CLAUDE_CODE_AUTO_COMPACT_WINDOW` set to
-that size (its floor is 100k), so the agent compacts itself mid-turn. Between
-turns AgentOS catches what it didn't: a chat over the threshold is compacted
+Two thresholds (Settings → Workspaces → Compact; 0 turns one off). Mid-turn,
+the agent compacts itself at 300k by default: AgentOS launches Claude Code
+with `CLAUDE_CODE_AUTO_COMPACT_WINDOW` set to that size (its floor is 100k),
+high enough that a long job isn't cut in half. Between
+turns AgentOS catches what it didn't: a chat over its 150k threshold is compacted
 before the next message, and so is one idle past its prompt cache (5 minutes
 or an hour, read from the agent's own usage), whose next message would
 re-read the whole conversation at the cache-write price. A chip above the
@@ -339,6 +339,13 @@ shows one quiet line with the context before and after. An orchestrator
 isn't compacted (a summary would lose the fence around what it read from
 tasks and CI): it starts a fresh conversation from its brief and the current
 state at its fresh-start threshold, or earlier once idle past its cache.
+What survives a compaction: the summary is asked to keep the task, scope
+changes, every edited file by path, what's done, in progress and next, and
+the decisions. Right after it, AgentOS hands back a note built from its own
+records (a task's brief and scope changes, the files it edited, its todos,
+the latest message and `git status`), which doesn't depend on what the
+summary kept, and tells the agent not to re-read or rewrite whole files.
+Terminal agents don't get the note yet.
 On a desktop browser the screen button attaches a screenshot of a screen or
 window you pick; on a phone, attach a screenshot as a photo.
 
@@ -349,8 +356,8 @@ turn ends. **Gate reviews** below it shows what the orchestrator's
 independent reviewer and scope check cost, by PR: they run as `claude -p`
 and leave no transcript, so each run's tokens, model and duration are read
 from its JSON result into `check_runs`, and the review's verdict says them
-too. Every compaction is kept in `chat_compactions` (who ran it, and the
-context before and after), so cost per task can be compared by date.
+too. Every compaction is kept in `chat_compactions` (who ran it, whether it
+fired `mid_turn` or `between_turns`, and the context before and after), so cost per task can be compared by date.
 
 **Esc** stops a running turn, as it does in Claude Code's terminal, unless a
 menu, dialog or the command list is open (those close first). On a phone the

package/app/api/fresh-start/route.ts

@@ -3,7 +3,8 @@ import { refreshSettings, setRefreshSettings } from "@/lib/chat/refresh";
 
 // When a chat's conversation starts over (lib/chat/refresh): context
 // tokens for orchestrators and for tasks, and at which chats and tasks
-// compact (lib/chat/stale); 0 for never.
+// compact: between turns (lib/chat/stale) and mid-turn, by the agent itself;
+// 0 for never.
 export async function GET() {
   return NextResponse.json(refreshSettings());
 }
@@ -16,6 +17,7 @@ export async function PUT(request: NextRequest) {
       taskTokens: body.taskTokens,
       // Its name before it also set the agents' own auto-compact.
       compactTokens: body.compactTokens ?? body.staleCompactTokens,
+      autoCompactTokens: body.autoCompactTokens,
     });
     return NextResponse.json(refreshSettings());
   } catch (error) {

package/app/globals.css

@@ -245,6 +245,13 @@ body {
   background: hsl(var(--background));
 }
 
+/* A conversation's rows stay in the page (so a selection can span them), and
+   the ones off screen skip layout and paint until they are near. */
+.chat-row {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 90px;
+}
+
 /* Streaming chat text ends in a blinking caret. */
 .streaming-cursor .prose > :last-child::after {
   content: "▍";

package/components/Chat/ChatPanel.tsx

@@ -1,8 +1,16 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { LegendList, type LegendListRef } from "@legendapp/list/react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ArrowDown, Loader2 } from "lucide-react";
+import type { ClipboardEvent } from "react";
 import { useChat } from "@/data/chat/useChat";
 import {
   groupTimeline,
@@ -42,6 +50,7 @@ import { SetupCard } from "./SetupCard";
 import { UserTurn } from "./EventRow";
 import { useViewport } from "@/hooks/useViewport";
 import { useChatCommands } from "./useChatCommands";
+import { copySelection } from "./copy-selection";
 import { arrivalKey, useStickToBottom } from "./stick-to-bottom";
 import {
   AssistantMessage,
@@ -139,8 +148,6 @@ function Timeline({
 }
 
 const blockKey = (b: TimelineBlock) => (b.type === "item" ? b.item.id : b.id);
-const blockType = (b: TimelineBlock) =>
-  b.type === "item" ? b.item.kind : b.type;
 
 // One block, re-rendered only when its items or the actions change: a long
 // conversation doesn't redraw every message for each streamed word.
@@ -173,6 +180,27 @@ const Block = memo(
     prev.actions === next.actions && sameBlock(prev.block, next.block)
 );
 
+// The conversation's rows in the page's flow, not a virtualized list: a
+// selection follows the DOM, and a list that recycles and re-orders its rows
+// breaks it (docs/decisions/2026-10-11-chat-timeline-in-flow.md).
+export function TimelineRows({
+  blocks,
+  actions,
+}: {
+  blocks: TimelineBlock[];
+  actions: ItemActions;
+}) {
+  return blocks.map((b) => (
+    <div
+      key={blockKey(b)}
+      data-block={blockKey(b)}
+      className="chat-row mx-auto w-full max-w-3xl px-4 pb-4"
+    >
+      <Block block={b} actions={actions} />
+    </div>
+  ));
+}
+
 export function ChatPanel({
   sessionId,
   sessionName,
@@ -232,7 +260,7 @@ export function ChatPanel({
   } = useChat(sessionId, (text) => setPrefill({ text, at: Date.now() }));
   const { isMobile } = useViewport();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<LegendListRef>(null);
+  const listRef = useRef<HTMLDivElement>(null);
   // Follows new output only while the reader is at the end; sending brings
   // them back there, wherever they'd scrolled.
   const {
@@ -339,10 +367,34 @@ export function ChatPanel({
     () => ({ bodies: toolBodies, request: requestToolBody, connected }),
     [toolBodies, requestToolBody, connected]
   );
-  const blocksRef = useRef(blocks);
+  const itemsById = useMemo(
+    () => new Map(items.map((i) => [i.id, i])),
+    [items]
+  );
+  const itemsByIdRef = useRef(itemsById);
+  useEffect(() => {
+    itemsByIdRef.current = itemsById;
+  });
+  const onCopy = useCallback(
+    (e: ClipboardEvent<HTMLDivElement>) =>
+      copySelection(e, itemsByIdRef.current),
+    []
+  );
+  // Starts at the end; older pages load as the reader nears the top.
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [sessionId]);
+  const olderRef = useRef({ hasMore, loadingOlder, loadOlder });
   useEffect(() => {
-    blocksRef.current = blocks;
+    olderRef.current = { hasMore, loadingOlder, loadOlder };
   });
+  const onListScroll = useCallback(() => {
+    const el = listRef.current;
+    const o = olderRef.current;
+    if (el && o.hasMore && !o.loadingOlder && el.scrollTop < el.clientHeight)
+      o.loadOlder();
+  }, []);
   const find = useFind({
     search,
     items,
@@ -352,18 +404,13 @@ export function ChatPanel({
     rows: rowState,
     release,
     scrollToBlock: useCallback(async (key: string) => {
-      const index = blocksRef.current.findIndex((b) => blockKey(b) === key);
-      if (index !== -1)
-        await listRef.current?.scrollToIndex({
-          index,
-          viewPosition: 0.3,
-          animated: false,
-        });
-    }, []),
-    scroller: useCallback(() => {
-      const el = listRef.current?.getScrollableNode();
-      return el instanceof HTMLElement ? el : null;
+      // The row may only just have been added.
+      await new Promise((r) => requestAnimationFrame(r));
+      listRef.current
+        ?.querySelector(`[data-block="${CSS.escape(key)}"]`)
+        ?.scrollIntoView({ block: "center" });
     }, []),
+    scroller: useCallback(() => listRef.current, []),
   });
   const activeRef = useRef(active);
   useEffect(() => {
@@ -423,56 +470,39 @@ export function ChatPanel({
       <div ref={scrollRef} className="relative min-h-0 flex-1">
         <RowState.Provider value={rowState}>
           <ToolBodies.Provider value={bodies}>
-            <LegendList<TimelineBlock>
-              // A new conversation starts its list over, scrolled to the end.
+            <div
+              // A new conversation starts over, scrolled to the end.
               key={sessionId}
               ref={listRef}
-              data={blocks}
-              extraData={actions}
-              keyExtractor={blockKey}
-              getItemType={blockType}
-              renderItem={({ item }) => (
-                <div
-                  data-block={blockKey(item)}
-                  className="mx-auto w-full max-w-3xl px-4 pb-4"
-                >
-                  <Block block={item} actions={actions} />
-                </div>
-              )}
-              estimatedItemSize={90}
-              initialScrollAtEnd
-              // Older pages land above without moving what the reader sees.
-              maintainVisibleContentPosition
-              onStartReached={hasMore ? loadOlder : undefined}
-              onStartReachedThreshold={1}
-              style={{ height: "100%" }}
-              className="overscroll-y-contain"
-              ListHeaderComponent={
-                <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 pt-5 pb-4">
-                  {hasMore && (
-                    <div className="text-muted-foreground flex min-h-11 items-center justify-center text-xs">
-                      {loadingOlder ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <button
-                          type="button"
-                          onClick={loadOlder}
-                          className="hover:text-foreground min-h-11 px-3"
-                        >
-                          Show earlier messages
-                        </button>
-                      )}
-                    </div>
-                  )}
-                  <SetupCard sessionId={sessionId} />
-                  {blocks.length === 0 && !queue.length && (
-                    <p className="text-muted-foreground py-16 text-center text-sm">
-                      Ask anything to start.
-                    </p>
-                  )}
-                </div>
-              }
-            />
+              onScroll={onListScroll}
+              onCopy={onCopy}
+              className="h-full overflow-y-auto overscroll-y-contain"
+            >
+              <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 pt-5 pb-4">
+                {hasMore && (
+                  <div className="text-muted-foreground flex min-h-11 items-center justify-center text-xs">
+                    {loadingOlder ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={loadOlder}
+                        className="hover:text-foreground min-h-11 px-3"
+                      >
+                        Show earlier messages
+                      </button>
+                    )}
+                  </div>
+                )}
+                <SetupCard sessionId={sessionId} />
+                {blocks.length === 0 && !queue.length && (
+                  <p className="text-muted-foreground py-16 text-center text-sm">
+                    Ask anything to start.
+                  </p>
+                )}
+              </div>
+              <TimelineRows blocks={blocks} actions={actions} />
+            </div>
           </ToolBodies.Provider>
         </RowState.Provider>
         {find.open && (

package/components/Chat/Code.tsx

@@ -119,7 +119,10 @@ export function CodeBlock({
   if (language === "mermaid") return <Mermaid code={code} />;
   return (
     <div className="bg-foreground/[0.04] not-prose my-3 overflow-hidden rounded-xl">
-      <div className="text-muted-foreground flex items-center justify-between pr-1 pl-3 font-mono text-[11px]">
+      <div
+        data-copy-skip
+        className="text-muted-foreground flex items-center justify-between pr-1 pl-3 font-mono text-[11px]"
+      >
         <span>{language || "text"}</span>
         <CopyButton text={code} label="Copy code" />
       </div>

package/components/Chat/Messages.tsx

@@ -34,12 +34,12 @@ export function UserMessage({
   return (
     <div className="group flex flex-col items-end gap-1">
       {item.from && (
-        <span className="label-mono text-muted-foreground">
+        <span data-copy-skip className="label-mono text-muted-foreground">
           from {item.from}
         </span>
       )}
       {item.images?.length ? (
-        <div className="flex flex-wrap justify-end gap-1.5">
+        <div data-copy-skip className="flex flex-wrap justify-end gap-1.5">
           {item.images.map((img, i) => (
             <ImageThumb
               key={i}

package/components/Chat/copy-selection.ts

@@ -0,0 +1,82 @@
+import type { ClipboardEvent } from "react";
+import type { ChatItem } from "@/lib/chat/events";
+import {
+  formatTranscript,
+  sourceText,
+  speakerOf,
+  type TranscriptPart,
+} from "@/lib/chat/copy-selection";
+
+// What isn't part of a message's words: buttons, times, and labels that
+// only the interface shows.
+const SKIP = "button, time, [aria-hidden='true'], [data-copy-skip]";
+
+// Range's own constants, which tests without a browser global don't have.
+const START_TO_START = 0;
+const END_TO_END = 2;
+
+const covers = (range: Range, el: Element) => {
+  const whole = el.ownerDocument.createRange();
+  whole.selectNodeContents(el);
+  return (
+    range.compareBoundaryPoints(START_TO_START, whole) <= 0 &&
+    range.compareBoundaryPoints(END_TO_END, whole) >= 0
+  );
+};
+
+// The part of a message inside the selection, as it reads on screen.
+function clippedText(range: Range, el: Element): string {
+  const doc = el.ownerDocument;
+  const whole = doc.createRange();
+  whole.selectNodeContents(el);
+  const part = range.cloneRange();
+  if (part.compareBoundaryPoints(START_TO_START, whole) < 0)
+    part.setStart(whole.startContainer, whole.startOffset);
+  if (part.compareBoundaryPoints(END_TO_END, whole) > 0)
+    part.setEnd(whole.endContainer, whole.endOffset);
+  const holder = doc.createElement("div");
+  holder.style.cssText =
+    "position:fixed;left:-9999px;top:0;width:600px;white-space:pre-wrap";
+  holder.append(part.cloneContents());
+  for (const skip of holder.querySelectorAll(SKIP)) skip.remove();
+  doc.body.append(holder);
+  const text = holder.innerText ?? holder.textContent ?? "";
+  holder.remove();
+  return text.replace(/\n{3,}/g, "\n\n");
+}
+
+/**
+ * Copy across several messages as a transcript: who said what, a blank line
+ * between. A selection inside one message is left to the browser, which
+ * already copies that cleanly.
+ */
+export function copySelection(
+  e: ClipboardEvent,
+  itemsById: ReadonlyMap<string, ChatItem>
+) {
+  const root = e.currentTarget as Element;
+  const sel = root.ownerDocument.getSelection();
+  if (!sel || sel.isCollapsed || !sel.rangeCount) return;
+  const ranges = Array.from({ length: sel.rangeCount }, (_, i) =>
+    sel.getRangeAt(i)
+  );
+  const parts: (TranscriptPart & { el: Element })[] = [];
+  for (const el of root.querySelectorAll("[data-item]")) {
+    const item = itemsById.get(el.getAttribute("data-item") ?? "");
+    const speaker = item && speakerOf(item);
+    if (!item || !speaker) continue;
+    const hit = ranges.filter((r) => r.intersectsNode(el));
+    if (!hit.length) continue;
+    const whole = hit.some((r) => covers(r, el));
+    parts.push({
+      el,
+      speaker,
+      text: whole
+        ? sourceText(item)
+        : hit.map((r) => clippedText(r, el)).join("\n"),
+    });
+  }
+  if (parts.length < 2) return;
+  e.clipboardData.setData("text/plain", formatTranscript(parts));
+  e.preventDefault();
+}

package/components/Chat/stick-to-bottom.test.ts

@@ -219,15 +219,75 @@ describe("stickToBottom", () => {
     expect(box.top).toBe(top);
   });
 
-  it("doesn't count a press inside the content as a scrollbar drag", () => {
+  it("doesn't count a click inside the content as a scrollbar drag", () => {
     const row = document.createElement("p");
     el.append(row);
     row.dispatchEvent(new window.Event("pointerdown", { bubbles: true }));
+    window.dispatchEvent(new window.Event("pointerup"));
+    clock += 300;
     box.height -= 300;
     el.scrollTop = box.top - 50; // moved by the page, not the reader
     expect(ctl.isStuck()).toBe(true);
   });
 
+  describe("while text is being selected", () => {
+    const text = () => {
+      const p = document.createElement("p");
+      p.textContent = "some words to select";
+      el.append(p);
+      return p;
+    };
+    const select = (node: Node) => {
+      const sel = document.getSelection()!;
+      sel.removeAllRanges();
+      const r = document.createRange();
+      r.selectNodeContents(node);
+      sel.addRange(r);
+    };
+    afterEach(() => document.getSelection()?.removeAllRanges());
+
+    it("doesn't pin under a drag in progress, and catches up when it ends", () => {
+      const p = text();
+      p.dispatchEvent(new window.Event("pointerdown", { bubbles: true }));
+      const top = box.top;
+      grow(300);
+      expect(box.top).toBe(top);
+      window.dispatchEvent(new window.Event("pointerup"));
+      expect(box.top).toBe(box.height - box.view);
+    });
+
+    it("doesn't pin under a standing selection, and catches up when it clears", () => {
+      select(text());
+      const top = box.top;
+      grow(300);
+      expect(box.top).toBe(top);
+      expect(ctl.isStuck()).toBe(true);
+      document.getSelection()!.removeAllRanges();
+      document.dispatchEvent(new window.Event("selectionchange"));
+      expect(box.top).toBe(box.height - box.view);
+    });
+
+    it("pins as usual for a selection elsewhere on the page", () => {
+      const outside = document.createElement("p");
+      outside.textContent = "composer text";
+      document.body.append(outside);
+      select(outside);
+      grow(300);
+      expect(box.top).toBe(box.height - box.view);
+      outside.remove();
+    });
+
+    it("lets go when the drag autoscrolls up", () => {
+      text().dispatchEvent(new window.Event("pointerdown", { bubbles: true }));
+      el.scrollTop -= 200;
+      expect(ctl.isStuck()).toBe(false);
+      window.dispatchEvent(new window.Event("pointerup"));
+      const top = box.top;
+      grow(300);
+      expect(box.top).toBe(top);
+    });
+  });
+
   it("stops counting scrolls as the reader's once the drag ends", () => {
     el.dispatchEvent(new window.Event("pointerdown"));
     window.dispatchEvent(new window.Event("pointerup"));
@@ -309,7 +369,7 @@ describe("useStickToBottom", () => {
   let hook: Hook;
   let el: HTMLElement;
   let box: { top: number; height: number; view: number };
-  let list: RefObject<{ getScrollableNode(): unknown } | null>;
+  let list: RefObject<HTMLElement | null>;
 
   function Probe(props: {
     id: string;
@@ -329,7 +389,7 @@ describe("useStickToBottom", () => {
   beforeEach(async () => {
     ({ el, box } = scroller());
     list = createRef();
-    (list as { current: unknown }).current = { getScrollableNode: () => el };
+    (list as { current: unknown }).current = el;
     root = createRoot(document.createElement("div"));
     await render("s1", "a:0");
   });
@@ -371,12 +431,12 @@ describe("useStickToBottom", () => {
     expect(box.top).toBe(box.height - box.view);
   });
 
-  it("binds once the list has mounted its scroller", async () => {
+  it("binds once the scroller has mounted", async () => {
     act(() => root.unmount());
     (list as { current: unknown }).current = null;
     root = createRoot(document.createElement("div"));
     await render("s1", "a:0");
-    (list as { current: unknown }).current = { getScrollableNode: () => el };
+    (list as { current: unknown }).current = el;
     await frame();
     scrollUp();
     expect(hook.stuck).toBe(false);

package/components/Chat/stick-to-bottom.ts

@@ -8,9 +8,14 @@
  * Content growing, rows expanding and images loading never let go, since only
  * the reader's own scrolling does. While they're away from the end, the text
  * under their eyes is held in place the way CSS scroll anchoring would (the
- * virtualized list turns that off, and Safari lacks it): the element at the
- * top of the view is remembered, and when a layout change moves it, the
- * scroll moves by the same amount.
+ * list turns that off, and Safari lacks it): the element at the top of the
+ * view is remembered, and when a layout change moves it, the scroll moves by
+ * the same amount.
+ *
+ * Nothing is pinned while the reader is selecting text in the conversation
+ * (a drag in progress, or a selection left standing): moving the view under a
+ * selection drags its end along or loses it. The catch-up happens once the
+ * selection is gone.
  */
 
 import {
@@ -81,6 +86,9 @@ export function stickToBottom(
   let touching = false;
   let touchY = 0;
   let dragging = false;
+  // A press inside the content: a text selection drag, or a tap.
+  let pressing = false;
+  let wasSelecting = false;
   let anchors: { node: Element; top: number }[] = [];
   const doc = el.ownerDocument;
   const win = doc.defaultView;
@@ -120,8 +128,18 @@ export function stickToBottom(
     }
     pickAnchors();
   };
+  const selecting = () => {
+    if (pressing) return true;
+    const sel = doc.getSelection?.();
+    if (!sel || sel.isCollapsed || !sel.rangeCount) return false;
+    return el.contains(sel.anchorNode) || el.contains(sel.focusNode);
+  };
   const pin = () => {
     if (!stuck) return holdAnchor();
+    if (selecting()) {
+      wasSelecting = true;
+      return;
+    }
     const end = el.scrollHeight - el.clientHeight;
     if (el.scrollTop < end) el.scrollTop = end;
     prevTop = el.scrollTop;
@@ -134,7 +152,7 @@ export function stickToBottom(
   };
 
   const onScroll = () => {
-    const byUser = touching || dragging || now() < intentUntil;
+    const byUser = touching || dragging || pressing || now() < intentUntil;
     set(nextStuck(stuck, { prevTop, metrics: el, byUser }));
     prevTop = el.scrollTop;
     pickAnchors();
@@ -165,11 +183,21 @@ export function stickToBottom(
   // Only a press on the container itself is its scrollbar.
   const onPointerDown = (e: PointerEvent) => {
     if (e.target === el) dragging = true;
+    else pressing = true;
   };
   const onPointerUp = () => {
-    if (!dragging) return;
+    const was = dragging || pressing;
     dragging = false;
+    pressing = false;
+    if (!was) return;
     intentUntil = now() + INTENT_MS;
+    catchUp();
+  };
+  // Following resumes the moment the selection that held it back is gone.
+  const catchUp = () => {
+    const live = selecting();
+    if (wasSelecting && !live && stuck) pin();
+    wasSelecting = live;
   };
 
   const passive = { passive: true } as const;
@@ -182,11 +210,12 @@ export function stickToBottom(
   el.addEventListener("keydown", onKeyDown);
   el.addEventListener("pointerdown", onPointerDown, passive);
   win?.addEventListener("pointerup", onPointerUp, passive);
+  win?.addEventListener("pointercancel", onPointerUp, passive);
+  doc.addEventListener("selectionchange", catchUp);
 
   // Content or the container changing size keeps a stuck reader at the end.
-  // The rows are watched too (the list's are three levels down, and come and
-  // go as it virtualizes), so a row growing is corrected before it's painted
-  // rather than a frame later, when the list catches up.
+  // The rows are watched too, so a row growing is corrected before it's
+  // painted rather than a frame later.
   const resize =
     typeof ResizeObserver === "undefined"
       ? null
@@ -196,7 +225,7 @@ export function stickToBottom(
         });
   function observeRows() {
     for (const row of el.querySelectorAll(
-      ":scope > *, :scope > * > *, :scope > * > * > *, :scope > * > * > * > *"
+      ":scope > *, :scope > * > *, :scope > * > * > *"
     ))
       resize?.observe(row);
   }
@@ -227,18 +256,20 @@ export function stickToBottom(
       el.removeEventListener("keydown", onKeyDown);
       el.removeEventListener("pointerdown", onPointerDown);
       win?.removeEventListener("pointerup", onPointerUp);
+      win?.removeEventListener("pointercancel", onPointerUp);
+      doc.removeEventListener("selectionchange", catchUp);
     },
   };
 }
 
 /**
- * The hook over `stickToBottom`, for a list that exposes its scroll
- * container (`key` re-binds when it's replaced); `latest` changes whenever
+ * The hook over `stickToBottom`, for a scroll container in a ref (`key`
+ * re-binds when it's replaced); `latest` changes whenever
  * something new arrives, which pins a stuck reader and marks it unread for
  * one who has scrolled away.
  */
 export function useStickToBottom(
-  list: RefObject<{ getScrollableNode(): unknown } | null>,
+  scroller: RefObject<HTMLElement | null>,
   key: unknown,
   latest: unknown
 ) {
@@ -249,10 +280,9 @@ export function useStickToBottom(
 
   useEffect(() => {
     let frame = 0;
-    // The list mounts its scroller a frame after it renders.
     const bind = () => {
-      const el = list.current?.getScrollableNode();
-      if (!(el instanceof HTMLElement)) {
+      const el = scroller.current;
+      if (!el) {
         frame = requestAnimationFrame(bind);
         return;
       }
@@ -267,7 +297,7 @@ export function useStickToBottom(
       ctl.current = null;
       setAway(null);
     };
-  }, [list, key]);
+  }, [scroller, key]);
 
   useEffect(() => {
     latestRef.current = latest;