@saadnvd1/agent-os 0.3.479 → 0.3.482

package/README.md

@@ -745,6 +745,22 @@ next minute until the brake lifts or a newer run is due (Run now obeys them
 too, once). A schedule whose project has moved to another workspace fails
 until it's edited. Removing a schedule keeps its history.
 
+**One-off schedules.** Pick **Once** in the form (a date and time in the
+schedule's zone), or `aos schedule add --at "tomorrow 10am" ...` (an ISO time,
+`in 2h`, a weekday; America/Chicago unless `--tz`). It works with every kind,
+runs once and then turns itself off; the run stays in its history, marked
+done, and the schedule moves to the **Done** group. Upcoming one-offs are
+listed first with their run time, how far off it is and who made it (you or an
+orchestrator), each with Run now, Edit and Cancel; the count shows in the
+sidebar menu and the orchestrator's header. The same claim-in-SQLite rule
+applies, so it never runs twice, and one AgentOS missed while off runs when it
+returns, marked **caught up**. Pause holds a one-off until you resume rather
+than skipping it, and the brakes apply as for any run. A past time is refused.
+Run now uses up its only run; edit it to a new time to run it again. An
+orchestrator makes its own with `remind_me`: at least ten minutes ahead, 20
+pending at most, in its own workspace, and it arrives as a scheduled prompt,
+never an approval.
+
 Task and session schedules run at most hourly, message schedules at most
 every 10 minutes and skip a run (`still working`) while their session is
 still busy, mid-turn or holding a queued message. A task schedule waits
@@ -993,7 +1009,7 @@ it may do on its own, and the lines that always come back to you as asks.
   workspace, or the project already at that path moves in from no workspace;
   folders that hold secrets and projects of another workspace are refused),
   `note`,
-  `rule_add`, `rule_remove`, `review`, `sign_off`, `arm`, `disarm` and `ask_saad`. All are served in-process to its chat, refuse
+  `rule_add`, `rule_remove`, `review`, `sign_off`, `arm`, `disarm`, `remind_me`, `reminders`, `cancel_reminder` and `ask_saad`. All are served in-process to its chat, refuse
   any target outside its workspace, and validate their arguments. The one
   exception is other orchestrators: `orchestrators` lists every workspace and
   whether it has one, and `message_orchestrator` messages another workspace's

package/app/api/schedules/route.ts

@@ -28,6 +28,7 @@ export async function POST(request: NextRequest) {
             from: body.from ? String(body.from) : null,
             every: body.every,
             cron: body.cron,
+            at: body.at,
             prompt: String(body.prompt ?? ""),
             name: body.name,
             timezone: body.timezone,

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;