@@ -3,6 +3,7 @@ import { onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { render } from "solid-js/web"
 import { LanguageProvider } from "../src/runtime/i18n/language"
+import { createTimelineFollow } from "../src/session/timeline/follow"
 import { createTimelineVirtualizer } from "../src/session/timeline/virtualizer"
 
 export function mountTimelineVirtualizer(input: {
@@ -19,7 +20,8 @@ export function mountTimelineVirtualizer(input: {
   document.body.appendChild(host)
 
   function Fixture() {
-    const [state, setState] = createStore({ pinned: true, ready: false, grown: false })
+    const [state, setState] = createStore({ ready: false, grown: false })
+    const follow = createTimelineFollow(() => "cold-reveal-fixture")
 
     const rows = Array.from(
       { length: input.count },
@@ -44,7 +46,7 @@ export function mountTimelineVirtualizer(input: {
         messageLastRowIndex: () => indexes,
       },
       showHeader: () => false,
-      pinned: () => state.pinned,
+      follow,
       scroll: () => ({ overflow: false, jump: false }),
       setScrollRef: (element) => {
         if (!element) return
@@ -56,14 +58,11 @@ export function mountTimelineVirtualizer(input: {
         content = host.querySelector<HTMLDivElement>("[data-timeline-virtual-content]")!
         reveal.observe(content, { attributes: true, attributeFilter: ["style"] })
       },
-      onPin: () => setState("pinned", true),
-      onUnpin: () => setState("pinned", false),
       onScheduleScrollState: (element) => {
         host.dataset.scrolls = String(Number(host.dataset.scrolls) + 1)
         host.dataset.lastScrollTop = String(element.scrollTop)
       },
       onResumeScroll: () => {},
-      onSelectionInteraction: () => {},
       onUserScroll: () => {},
       onHistoryScroll: () => {},
       canRenderImmediately: () => input.immediate ?? false,
@@ -100,7 +99,7 @@ export function mountTimelineVirtualizer(input: {
     })
 
     return (
-      <div data-testid="timeline-controls" data-pinned={state.pinned}>
+      <div data-testid="timeline-controls" data-pinned={follow.following()}>
         <button type="button" onClick={() => setState("ready", true)}>
           Complete Markdown
         </button>
 
@@ -131,7 +131,7 @@ function SessionScreenContent(props: {
     sessionID: session.identity.sessionID,
     scrollRef: timeline.scroller,
     revealMessage: timeline.actions.revealMessage,
-    pauseAutoScroll: timeline.view.unpin,
+    pauseAutoScroll: () => timeline.follow.dispatch({ type: "detach" }),
   })
 
   const messagesReady = timeline.ready
@@ -312,12 +312,9 @@ function SessionScreenContent(props: {
             onResumeScroll={timeline.actions.resume}
             setScrollRef={timeline.view.setScrollRef}
             onScheduleScrollState={timeline.view.scheduleScrollState}
-            onPin={timeline.view.pin}
-            onUnpin={timeline.view.unpin}
+            follow={timeline.follow}
             onUserScroll={timeline.view.markUserScroll}
             onHistoryScroll={timeline.view.onHistoryScroll}
-            onSelectionInteraction={timeline.view.selectionInteraction}
-            pinned={timeline.view.pinned()}
             centered={screen.centered()}
             reserveReviewToggle={!sideVisible()}
             onContentResize={timeline.view.contentResized}
 
@@ -0,0 +1,40 @@
+import { createMemo, createSignal, untrack, type Accessor } from "solid-js"
+import { createFollowState, followAnchor, isFollowing, transitionFollow, type FollowEvent } from "./machine"
+
+// Each session gets a fresh machine. Reading the state recomputes it for a changed key, so a view that mounts for the
+// new session starts out following, whatever order the flush runs its computations in.
+export function createTimelineFollow(sessionKey: Accessor<string>) {
+  const machine = createMemo(() => {
+    sessionKey()
+
+    return createSignal(createFollowState())
+  })
+
+  const state = () => machine()[0]()
+  const peek = () => untrack(state)
+  const following = createMemo(() => isFollowing(state()))
+  const anchor = createMemo(() => followAnchor(state()))
+  let attempts = 0
+
+  // The signal skips an unchanged state, which the transition returns as the same object.
+  const dispatch = (event: FollowEvent) => {
+    untrack(machine)[1](transitionFollow(peek(), event))
+  }
+
+  return {
+    state,
+    peek,
+    following,
+    anchor,
+    dispatch,
+    /** Queues a return to the end and returns its attempt, which the frame that scrolls hands back in `return.run`. */
+    beginReturn: () => {
+      attempts += 1
+      dispatch({ type: "return.start", attempt: attempts })
+
+      return attempts
+    },
+  }
+}
+
+export type TimelineFollow = ReturnType<typeof createTimelineFollow>
@@ -7,6 +7,7 @@ import { frameLoop } from "@opencode/ui/motion"
 import { useLayout } from "@/shell/state/layout"
 import type { SessionModel } from "../model"
 import { useSessionHashScroll } from "../use-session-hash-scroll"
+import { createTimelineFollow } from "./follow"
 import { createTimelineModel } from "./model"
 
 export function createSessionTimelineInteraction(session: SessionModel) {
@@ -18,7 +19,6 @@ export function createSessionTimelineInteraction(session: SessionModel) {
     messageID: string | undefined
     pendingMessage: string | undefined
     scroll: { overflow: boolean; jump: boolean }
-    follow: { sessionKey: string; pinned: boolean }
     /** The composer region's height; the timeline scrolls on underneath it and fades out at its top. */
     inset: number
     refs: {
@@ -33,10 +33,6 @@ export function createSessionTimelineInteraction(session: SessionModel) {
       overflow: false,
       jump: false,
     },
-    follow: {
-      sessionKey: session.identity.sessionKey(),
-      pinned: true,
-    },
     inset: 0,
     refs: {
       scroller: undefined,
@@ -45,15 +41,10 @@ export function createSessionTimelineInteraction(session: SessionModel) {
     },
   })
 
-  // The single source of truth for "follow the newest content". The virtualizer pins and unpins
-  // it from scroll geometry; everything else only expresses explicit intent.
-  const pinned = () => state.follow.sessionKey !== session.identity.sessionKey() || state.follow.pinned
-  const pin = () => setState("follow", { sessionKey: session.identity.sessionKey(), pinned: true })
-
-  const unpin = () => {
-    if (!scroller || scroller.scrollHeight - scroller.clientHeight <= 1) return
-    setState("follow", { sessionKey: session.identity.sessionKey(), pinned: false })
-  }
+  // The single source of truth for "follow the newest content". The virtualizer feeds it scroll geometry and the
+  // reader's input; everything else only expresses explicit intent.
+  const follow = createTimelineFollow(session.identity.sessionKey)
+  const detach = () => follow.dispatch({ type: "detach" })
 
   let scroller: HTMLDivElement | undefined
   // The history entry whose tool call was already revealed.
@@ -163,9 +154,9 @@ export function createSessionTimelineInteraction(session: SessionModel) {
     setPendingMessage: (value) => setState("pendingMessage", value),
     setActiveMessage,
     follow: {
-      unpin,
+      detach,
       toBottom: () => {
-        pin()
+        follow.dispatch({ type: "follow" })
         scrollToEnd()
       },
     },
@@ -180,13 +171,17 @@ export function createSessionTimelineInteraction(session: SessionModel) {
 
   const resume = (behavior?: ScrollBehavior) => {
     setState("messageID", undefined)
-    pin()
+    const attempt = follow.beginReturn()
     // Scrolls on the next frame, before it paints. A submit resumes from its key handler right after changing the
-    // DOM, where reading the scroll range would force a layout that the frame then repeats.
+    // DOM, where reading the scroll range would force a layout that the frame then repeats. Input that stops
+    // following before then makes the attempt stale, and the machine drops it.
     resumeFrame?.()
     resumeFrame = frameLoop.add(() => {
       resumeFrame = undefined
-      scrollToEnd(behavior, true)
+      const before = follow.peek()
+      follow.dispatch({ type: "return.run", attempt })
+
+      if (follow.peek() !== before) scrollToEnd(behavior, true)
 
       return false
     })
@@ -211,7 +206,7 @@ export function createSessionTimelineInteraction(session: SessionModel) {
       return
     }
 
-    unpin()
+    detach()
     scrollToMessage(messages[target], "auto")
   }
 
@@ -225,12 +220,6 @@ export function createSessionTimelineInteraction(session: SessionModel) {
     scrollMark += 1
   }
 
-  const selectionInteraction = () => {
-    const selection = window.getSelection()
-
-    if (selection && selection.toString().length > 0) unpin()
-  }
-
   const setScrollRef = (element: HTMLDivElement | undefined) => {
     scroller = element
     setState("refs", "scroller", element)
@@ -255,7 +244,7 @@ export function createSessionTimelineInteraction(session: SessionModel) {
 
     if (!owner.current() || timeline.messages().length <= before) return
 
-    if (pinned() || !scroller || scroller.scrollTop >= 200 || !timeline.history.more()) return
+    if (follow.following() || !scroller || scroller.scrollTop >= 200 || !timeline.history.more()) return
 
     if (historyContinuationFrame !== undefined) cancelAnimationFrame(historyContinuationFrame)
     historyContinuationFrame = requestAnimationFrame(() => {
@@ -268,7 +257,7 @@ export function createSessionTimelineInteraction(session: SessionModel) {
     if (
       historyRequests.has(session.ownership.key()) ||
       timeline.history.loading() ||
-      pinned() ||
+      follow.following() ||
       !scroller ||
       scroller.scrollTop >= 200
     )
@@ -285,7 +274,7 @@ export function createSessionTimelineInteraction(session: SessionModel) {
         short =
           !!session.identity.params.id &&
           timeline.ready() &&
-          pinned() &&
+          follow.following() &&
           !timeline.history.loading() &&
           !!scroller &&
           scroller.scrollHeight <= scroller.clientHeight + 1
@@ -313,7 +302,6 @@ export function createSessionTimelineInteraction(session: SessionModel) {
     on(
       session.identity.sessionKey,
       () => {
-        pin()
         setState("messageID", undefined)
         setState("pendingMessage", undefined)
         setState("scroll", { overflow: false, jump: false })
@@ -326,14 +314,14 @@ export function createSessionTimelineInteraction(session: SessionModel) {
       () => session.identity.params.id,
       (id, previous) => {
         if (!id || !previous || id === previous || state.messageID || state.pendingMessage || location.hash) return
-        pin()
+        follow.dispatch({ type: "follow" })
         scrollToEnd()
       },
     ),
   )
   createEffect(
     on(
-      pinned,
+      follow.following,
       (value) => {
         if (!value) return
         setState("messageID", undefined)
@@ -350,7 +338,7 @@ export function createSessionTimelineInteraction(session: SessionModel) {
           timeline.ready(),
           timeline.history.more(),
           timeline.history.loading(),
-          pinned(),
+          follow.following(),
           visibleUserMessages().length,
         ] as const,
       ([id, ready, more, loading, following]) => {
@@ -371,7 +359,8 @@ export function createSessionTimelineInteraction(session: SessionModel) {
 
       // Measured before the new inset applies: a shrinking region also keeps a reader whose end it uncovers.
       const stick = scroller
-        ? pinned() || scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop < 10 + Math.max(0, -delta)
+        ? follow.following() ||
+          scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop < 10 + Math.max(0, -delta)
         : false
 
       setState("inset", next)
@@ -409,13 +398,11 @@ export function createSessionTimelineInteraction(session: SessionModel) {
     scroller: () => state.refs.scroller,
     /** The part of the timeline not covered by the composer region. */
     visible: () => state.refs.visible,
+    follow,
     view: {
       anchor,
       markUserScroll,
       onHistoryScroll,
-      pin,
-      pinned,
-      selectionInteraction,
       scheduleScrollState,
       contentResized: () => {
         if (scroller) scheduleScrollState(scroller)
@@ -447,7 +434,6 @@ export function createSessionTimelineInteraction(session: SessionModel) {
       setPage: (scroll: (direction: 1 | -1) => void) => {
         page = scroll
       },
-      unpin,
     },
   }
 }