diff --git a/app/components/channel-container.hbs b/app/components/channel-container.hbs
index c1f22dfa..cbbf46e7 100644
--- a/app/components/channel-container.hbs
+++ b/app/components/channel-container.hbs
@@ -1,5 +1,5 @@
 <div id="channel" {{on-render this.onAfterRender}}
-                  {{on-channel-change this.channelChanged}}>
+                  {{on-change @channel this.channelChanged}}>
   <main>
     <header id="channel-header">
       <h2 id="channel-name"
@@ -28,22 +28,30 @@
 
     <div class="content-container {{@sidebarClass}} {{if @showChannelMenu "channel-menu-open"}}">
       <div class="content">
-        <section id="channel-content" class="main pt-4 pb-8 bg-white text-neutral-800">
-          {{#if @channel.isLogged}}
-            <a {{on "click" this.loadPreviousMessages}} class="block px-4 text-sm" role="button">
-              Load previous messages
-            </a>
+        <ChatScroller id="channel-content"
+                      class="main pt-4 pb-8 bg-white text-neutral-800"
+                      tabindex="-1"
+                      @items={{this.renderedMessages}}
+                      @resetKey={{@channel}}
+                      @hasOlder={{this.canLoadOlderMessages}}
+                      @isLoadingOlder={{this.isLoadingOlderMessages}}
+                      @historyCursor={{@channel.searchedPreviousLogsUntilDate}}
+                      @onLoadOlder={{this.loadOlderMessages}}
+                      as |scroll|>
+          {{#if this.historyLoadFailed}}
+            <div class="history-load-error pt-4 text-center text-sm text-neutral-600" role="alert">
+              Couldn’t load older messages.
+              <button type="button" class="retry" {{on "click" this.retryLoadOlderMessages}}>Retry</button>
+            </div>
+          {{else if this.showHistoryStart}}
+            <div class="history-start pt-4 text-center text-sm text-neutral-600">
+              Beginning of history
+            </div>
           {{/if}}
 
           <ul class="list-none">
-            <li>
-              <ScrollingObserver @rootElement="#channel-content"
-                                 @rootMargin={{this.partialRenderingObserverMargin}}
-                                 @enabled={{this.partialRenderingEnabled}}
-                                 @onIntersect={{this.increaseRenderedMessagesCount}} />
-            </li>
-            {{#each this.renderedMessages as |message|}}
-              <li {{on-render this.messagesUpdated}}>
+            {{#each this.renderedMessages key="key" as |message|}}
+              <li data-message-key={{message.key}}>
                 {{#if (eq message.type "message-chat-me")}}
                   <MessageChatMe @message={{message}} @channel={{@channel}}
                                  @sendMessage={{@onMessage}}
@@ -69,16 +77,30 @@
               {{/if}}
               </li>
             {{/each}}
-            <li>
-            <ScrollingObserver @rootElement="#channel"
-                               @rootMargin="0px"
-                               @threshold={{1}}
-                               @retriggeringEnabled={{false}}
-                               @onIntersect={{fn this.setAutomaticScrolling true}}
-                               @onDiverge={{fn this.setAutomaticScrolling false}} />
-            </li>
           </ul>
-        </section>
+
+          {{! Zero-height sticky zone so the button is pinned to the viewport edge
+              without ever contributing to the scroll content's height. If the
+              button were in flow, adding/removing it would change scrollHeight
+              and shift the view by the button's height. }}
+          <div class="jump-to-latest-zone">
+            {{#unless scroll.isAtBottom}}
+              <button type="button"
+                      class="jump-to-latest {{if scroll.showJumpToLatest "has-new-messages"}}"
+                      title="Scroll to latest messages"
+                      {{on "click" scroll.scrollToBottom}}>
+                <span aria-hidden="true"><Icon::chevron-down /></span>
+                <span class="sr-only">Scroll to latest messages</span>
+                {{#if scroll.newMessageCount}}
+                  <span>
+                    {{scroll.newMessageCount}}
+                    {{if (eq scroll.newMessageCount 1) "new message" "new messages"}}
+                  </span>
+                {{/if}}
+              </button>
+            {{/unless}}
+          </div>
+        </ChatScroller>
 
         <footer>
           <MessageInput @message={{@newMessage}}
diff --git a/app/components/channel-container.js b/app/components/channel-container.js
index e920641a..bcf29d32 100644
--- a/app/components/channel-container.js
+++ b/app/components/channel-container.js
@@ -1,42 +1,78 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import Hammer from 'hammerjs';
 import { action } from '@ember/object';
 
-function scrollToBottom () {
-  let elem = document.getElementById('channel-content');
-  if (elem) {
-    elem.scrollTop = elem.scrollHeight;
-  }
-}
+const INITIAL_RENDERED_MESSAGES = 50;
+const RENDERED_MESSAGES_INCREMENT = 50;
 
 export default class ChannelContainerComponent extends Component {
 
   @service router;
   @service coms;
 
-  @tracked automaticScrollingEnabled = true;
-  @tracked partialRenderingEnabled = true;
-
-  @tracked partialRenderingObserverMargin = '200px';
+  // Index into `channel.sortedMessages` at which the rendered window starts.
+  // We render from here to the end, so appending new messages at the bottom
+  // never shifts the content the user is looking at.
+  //
+  // `null` means "auto": render the latest `INITIAL_RENDERED_MESSAGES`. This is
+  // the initial state and is important because the IRC archive is loaded
+  // asynchronously after the component mounts; deriving the window from the live
+  // message list (rather than sizing it once at mount) means the initial batch
+  // is windowed correctly. It becomes a fixed index once the user starts reading
+  // older history.
+  //
+  // TODO: bound the window size while detached and shed older DOM nodes
+  // (Element-style, with height reservation) for very deep history. Session
+  // message volumes are currently small enough that this is not yet needed.
+  @tracked renderedStartIndex = null;
+  @tracked historyLoaded = false;
+  @tracked historyLoadFailed = false;
+
+  @cached
+  get renderedMessages () {
+    const all = this.args.channel.sortedMessages;
+    if (this.renderedStartIndex === null) {
+      return all.slice(Math.max(0, all.length - INITIAL_RENDERED_MESSAGES));
+    }
+    return all.slice(this.renderedStartIndex);
+  }
 
-  @tracked renderedMessagesCount = 0; // maximum number of messages to render
-  renderedMessagesAddendumAmount = 30; // number of messages to increase rendering count by
+  get hasOlderMessages () {
+    return this.args.channel.hasOlderMessages;
+  }
 
-  get renderedMessages () {
-    if (this.partialRenderingEnabled) {
-      return this.args.channel.sortedMessages.slice(-this.renderedMessagesCount);
-    } else {
-      return this.args.channel.sortedMessages;
+  // Whether there is anything older to reveal or fetch: either older messages
+  // already in memory (window not at the start) or more archive pages. A failed
+  // page stops auto-loading (see `historyLoadFailed`) so we don't retry the same
+  // failing request in a loop; the user can retry explicitly.
+  get canLoadOlderMessages () {
+    if (this.historyLoadFailed) return false;
+    const channel = this.args.channel;
+    if (this.renderedStartIndex === null) {
+      return channel.hasOlderMessages || channel.sortedMessages.length > INITIAL_RENDERED_MESSAGES;
     }
+    return this.renderedStartIndex > 0 || channel.hasOlderMessages;
+  }
+
+  get isLoadingOlderMessages () {
+    return this.args.channel.loadingOlderMessages;
+  }
+
+  // Only show the "beginning of history" marker once older history has
+  // actually been loaded/revealed for this channel.
+  get showHistoryStart () {
+    return this.historyLoaded && !this.historyLoadFailed && !this.canLoadOlderMessages;
   }
 
   @action
   channelChanged () {
-    this.renderedMessagesCount = this.renderedMessagesAddendumAmount;
-    this.partialRenderingEnabled = true;
-    this.automaticScrollingEnabled = true;
+    // `null` = auto-window the latest messages (see `renderedStartIndex`).
+    this.renderedStartIndex = null;
+    this.historyLoaded = false;
+    this.historyLoadFailed = false;
+
     setTimeout(() => {
       if (this.isDestroyed || this.isDestroying) return;
       this.menu('global', 'hide');
@@ -44,49 +80,88 @@ export default class ChannelContainerComponent extends Component {
   }
 
   @action
-  messagesUpdated () {
-    if (this.automaticScrollingEnabled) {
-      requestAnimationFrame(() => {
-        if (this.isDestroyed || this.isDestroying) return;
-        scrollToBottom();
-      });
-    }
-  }
-
-  @action
-  onAfterRender (element) {
-    // TODO update the config when window is resized
-    this.partialRenderingObserverMargin = `${element.clientHeight/3}px`;
-
+  onAfterRender () {
     // We need to define an empty handler for swipe events on the
     // #channel-content element, so that the actual handler of the app container
     // component gets triggered
     Hammer(document.getElementById('channel-content')).on('swipe', function (){});
   }
 
-  focusMessageInputField () {
-    const inputEl = document.querySelector('input#message-field');
-    inputEl.focus();
-  }
+  /**
+   * Reveals the next page of older messages. Older messages already in memory
+   * are revealed first; a new archive page is fetched once the window reaches
+   * the beginning of what we have.
+   */
+  @action
+  async loadOlderMessages () {
+    const channel = this.args.channel;
+    if (channel.loadingOlderMessages) return;
+
+    if (this.renderedStartIndex === null) {
+      // Materialize the auto-window and reveal one increment of older messages.
+      const length = channel.sortedMessages.length;
+      this.renderedStartIndex = Math.max(
+        0,
+        length - INITIAL_RENDERED_MESSAGES - RENDERED_MESSAGES_INCREMENT
+      );
+      this.historyLoaded = true;
+      // Only stop here when the auto-window was actually hiding older in-memory
+      // messages (`length > INITIAL_RENDERED_MESSAGES`). For a short channel the
+      // window already showed everything, so this revealed nothing and the DOM
+      // won't resize to re-trigger auto-loading — fall through and fetch an
+      // archive page instead of returning without making progress.
+      if (length > INITIAL_RENDERED_MESSAGES) return;
+    }
+
+    if (this.renderedStartIndex > 0) {
+      this.renderedStartIndex = Math.max(0, this.renderedStartIndex - RENDERED_MESSAGES_INCREMENT);
+      this.historyLoaded = true;
+      return;
+    }
 
-  @tracked loadingPreviousMessages = false;
+    if (!channel.hasOlderMessages) return;
 
-  @action
-  async loadPreviousMessages () {
-    if (this.loadingPreviousMessages) return;
-    this.loadingPreviousMessages = true;
-    this.automaticScrollingEnabled = false;
+    const lengthBefore = channel.sortedMessages.length;
+
+    channel.loadingOlderMessages = true;
+    this.historyLoaded = true;
     try {
-      await this.coms.loadArchiveMessages(
-        this.args.channel,
-        this.args.channel.searchedPreviousLogsUntilDate,
-        { minMessages: 1, maxDays: 1 }
-      );
+      await this.coms.loadOlderMessages(channel);
+    } catch (error) {
+      // Guard against the channel having changed or the component being torn
+      // down while the request was in flight, so we don't show the new
+      // channel's retry error or hide its history loading.
+      if (this.args.channel !== channel || this.isDestroyed || this.isDestroying) return;
+      // Stop auto-loading so we don't retry the same failing page in a loop or
+      // leave an unhandled rejection; the user can retry explicitly.
+      this.historyLoadFailed = true;
+      console.error('[channel] Failed to load older messages', error);
+      return;
     } finally {
-      this.loadingPreviousMessages = false;
+      channel.loadingOlderMessages = false;
+    }
+
+    // Keep the currently rendered messages visible and reveal a page of the
+    // newly loaded ones. `ChatScroller` restores the scroll position around it.
+    if (this.args.channel !== channel || this.isDestroyed || this.isDestroying) return;
+
+    const added = channel.sortedMessages.length - lengthBefore;
+    if (added > 0) {
+      this.renderedStartIndex = Math.max(0, added - RENDERED_MESSAGES_INCREMENT);
     }
   }
 
+  @action
+  retryLoadOlderMessages () {
+    this.historyLoadFailed = false;
+    this.loadOlderMessages();
+  }
+
+  focusMessageInputField () {
+    const inputEl = document.querySelector('input#message-field');
+    inputEl.focus();
+  }
+
   // TODO make dynamic based on active sidebar content
   get headerNavButtonUsersActive () {
     if (window.innerWidth > 900) return true;
@@ -116,18 +191,6 @@ export default class ChannelContainerComponent extends Component {
     this.focusMessageInputField();
   }
 
-  @action
-  increaseRenderedMessagesCount () {
-    let newMessagesCount = this.renderedMessagesCount + this.renderedMessagesAddendumAmount;
-    this.renderedMessagesCount =newMessagesCount;
-    this.partialRenderingEnabled = newMessagesCount < this.args.channel.sortedMessages.length;
-  }
-
-  @action
-  setAutomaticScrolling (state) {
-    this.automaticScrollingEnabled = state;
-  }
-
   @action
   leaveChannel (channel) {
     this.args.onLeaveChannel(channel);
diff --git a/app/components/chat-scroller.hbs b/app/components/chat-scroller.hbs
new file mode 100644
index 00000000..547a0b21
--- /dev/null
+++ b/app/components/chat-scroller.hbs
@@ -0,0 +1,15 @@
+<div
+  ...attributes
+  {{chat-scroll
+    onReady=this.handleReady
+    onScroll=this.handleScroll
+    onScrollEnd=this.handleScrollEnd
+    onContentResize=this.handleContentResize}}
+  {{on-change @items this.handleItemsChanged}}
+  {{on-change @resetKey this.handleReset}}
+  {{on-change @isLoadingOlder this.handleLoadingOlderChanged}}
+>
+  <div class="channel-scroll-content">
+    {{yield this.scrollApi}}
+  </div>
+</div>
diff --git a/app/components/chat-scroller.js b/app/components/chat-scroller.js
new file mode 100644
index 00000000..c671ca68
--- /dev/null
+++ b/app/components/chat-scroller.js
@@ -0,0 +1,628 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { registerDestructor } from '@ember/destroyable';
+import { buildWaiter } from '@ember/test-waiters';
+import {
+  ScrollAction,
+  createScrollState,
+  reduceScrollState,
+  isNearTop,
+} from 'hyperchannel/utils/chat-scroll-state';
+
+const MAINTENANCE_TIMEOUT = 150; // ms
+// Safety net for the user-initiated smooth scroll to the bottom: it keeps the
+// maintenance lock while animating, so this only fires if frames stop (e.g. a
+// backgrounded tab) or the animation makes no progress.
+const SMOOTH_SCROLL_TIMEOUT = 4000; // ms
+// Reference frame length and per-frame remainder fraction for the
+// scroll-to-bottom animation. The fraction is normalized by the actual frame
+// time, so the motion feels the same on 60Hz and 120Hz displays.
+const SMOOTH_SCROLL_FRAME_MS = 1000 / 60;
+const SMOOTH_SCROLL_DECAY_PER_FRAME = 0.78;
+const FILL_MAX_NO_PROGRESS = 2;
+
+// Tracks the component's deferred async work (maintenance timer, frame
+// callbacks) so `settled()` can synchronize deterministically in tests.
+const scrollerWaiter = buildWaiter('chat-scroller');
+
+function itemKey (item) {
+  if (!item) return '';
+  return item.key ?? item.id ?? '';
+}
+
+function escapeAttributeValue (value) {
+  const stringValue = String(value ?? '');
+  if (typeof CSS !== 'undefined' && CSS.escape) {
+    return CSS.escape(stringValue);
+  }
+  return stringValue.replace(/["\\]/g, '\\$&');
+}
+
+/**
+ * Scroll container for a chat message list.
+ *
+ * Owns all scroll behavior for the channel: sticking to the bottom, detaching
+ * when the user scrolls up, restoring the visual position when older messages
+ * are revealed/loaded, and triggering automatic history loading near the top.
+ *
+ * Auto-loading is level-triggered and single-flight (near the top, or filling
+ * a short list), with a separate no-progress guard. All programmatic position
+ * changes happen under a maintenance lock so they are never mistaken for user
+ * intent (which caused feedback loops in the past). Layout corrections are
+ * applied synchronously with the DOM update so the viewport never jumps.
+ *
+ * The decision making lives in `hyperchannel/utils/chat-scroll-state`; this
+ * component is the DOM adapter that applies the resulting effects.
+ *
+ * Yields a small API to the surrounding template:
+ *   scroll.isAtBottom, scroll.newMessageCount, scroll.showJumpToLatest, scroll.scrollToBottom
+ */
+export default class ChatScrollerComponent extends Component {
+  @tracked isAtBottom = true;
+  @tracked newMessageCount = 0;
+  @tracked showJumpToLatest = false;
+
+  scrollState = createScrollState();
+  scrollElement = null;
+  itemKeys = null;
+
+  // Programmatic scroll maintenance lock (does not trigger reactive updates).
+  maintainingScroll = false;
+  maintenanceTimer = null;
+  maintenanceTarget = null;
+  maintenanceObservedTop = 0;
+  maintenanceWaiterToken = null;
+  smoothAnimationFrame = null;
+  smoothScrollAnimating = false;
+  smoothScrollRequested = false;
+
+  // Auto-load bookkeeping.
+  olderRequestPending = false;
+  fillNoProgress = 0;
+  lastFillHeight = 0;
+  lastFillCursor = null;
+  resizeScheduled = false;
+
+  constructor () {
+    super(...arguments);
+    registerDestructor(this, () => {
+      if (this.maintenanceTimer) {
+        clearTimeout(this.maintenanceTimer);
+        this.maintenanceTimer = null;
+      }
+      if (this.smoothAnimationFrame) {
+        cancelAnimationFrame(this.smoothAnimationFrame);
+        this.smoothAnimationFrame = null;
+      }
+      this.endMaintenanceWaiter();
+    });
+  }
+
+  // Runs `callback` on the next frame, tracked by a test waiter so `settled()`
+  // can synchronize deterministically instead of tests relying on sleeps.
+  runInFrame (callback) {
+    const token = scrollerWaiter.beginAsync();
+    requestAnimationFrame(() => {
+      try {
+        callback();
+      } finally {
+        scrollerWaiter.endAsync(token);
+      }
+    });
+  }
+
+  endMaintenanceWaiter () {
+    if (this.maintenanceWaiterToken) {
+      scrollerWaiter.endAsync(this.maintenanceWaiterToken);
+      this.maintenanceWaiterToken = null;
+    }
+  }
+
+  get scrollApi () {
+    return {
+      isAtBottom: this.isAtBottom,
+      newMessageCount: this.newMessageCount,
+      showJumpToLatest: this.showJumpToLatest,
+      scrollToBottom: this.scrollToBottom,
+    };
+  }
+
+  getContentElement () {
+    return this.scrollElement?.firstElementChild ?? null;
+  }
+
+  metricsFrom (element) {
+    if (!element) return { scrollTop: 0, scrollHeight: 0, clientHeight: 0 };
+    return {
+      scrollTop: element.scrollTop,
+      scrollHeight: element.scrollHeight,
+      clientHeight: element.clientHeight,
+    };
+  }
+
+  metrics () {
+    return this.metricsFrom(this.scrollElement);
+  }
+
+  contentFits (metrics = this.metrics()) {
+    return metrics.clientHeight > 0 && metrics.scrollHeight <= metrics.clientHeight + 1;
+  }
+
+  reduceAndApply (event) {
+    const { state, effects } = reduceScrollState(this.scrollState, event);
+    this.scrollState = state;
+    this.syncTrackedState();
+    this.applyEffects(effects);
+  }
+
+  // Modifier callbacks (`on-change`) run during the render transaction, so we
+  // defer state changes and DOM effects to the next frame. Setting tracked
+  // state during render would invalidate and re-run the modifier recursively.
+  scheduleReduce (event) {
+    this.runInFrame(() => {
+      if (this.isDestroyed || this.isDestroying) return;
+      this.reduceAndApply(event);
+    });
+  }
+
+  syncTrackedState () {
+    const { atBottom, newMessageCount, showJumpToLatest } = this.scrollState;
+    if (this.isAtBottom !== atBottom) this.isAtBottom = atBottom;
+    if (this.newMessageCount !== newMessageCount) this.newMessageCount = newMessageCount;
+    if (this.showJumpToLatest !== showJumpToLatest) this.showJumpToLatest = showJumpToLatest;
+  }
+
+  applyEffects (effects) {
+    for (const effect of effects) {
+      switch (effect) {
+        case ScrollAction.ScrollToBottom:
+          this.applyScrollToBottom();
+          break;
+        case ScrollAction.CaptureAnchor:
+          this.captureAnchor();
+          break;
+        case ScrollAction.RestoreAnchor:
+          this.restoreAnchor();
+          break;
+        case ScrollAction.LoadOlder:
+          this.args.onLoadOlder?.();
+          break;
+      }
+    }
+  }
+
+  // --- Programmatic scroll maintenance --------------------------------------
+
+  beginMaintenance (timeout = MAINTENANCE_TIMEOUT) {
+    if (this.maintenanceTimer) {
+      clearTimeout(this.maintenanceTimer);
+    }
+    this.endMaintenanceWaiter();
+    this.maintenanceWaiterToken = scrollerWaiter.beginAsync();
+    this.maintainingScroll = true;
+    this.maintenanceObservedTop = this.scrollElement?.scrollTop ?? 0;
+    this.maintenanceTimer = setTimeout(() => {
+      this.maintenanceTimer = null;
+      if (this.isDestroyed || this.isDestroying) return;
+      this.endMaintenance();
+    }, timeout);
+  }
+
+  endMaintenance () {
+    if (this.maintenanceTimer) {
+      clearTimeout(this.maintenanceTimer);
+      this.maintenanceTimer = null;
+    }
+    if (this.smoothAnimationFrame) {
+      cancelAnimationFrame(this.smoothAnimationFrame);
+      this.smoothAnimationFrame = null;
+    }
+    this.endMaintenanceWaiter();
+    const wasMaintaining = this.maintainingScroll;
+    const target = this.maintenanceTarget;
+    this.maintainingScroll = false;
+    this.maintenanceTarget = null;
+    this.smoothScrollAnimating = false;
+
+    // Transition to "at bottom" only once a programmatic scroll has finished
+    // *and reached its target*. Doing it earlier removes the jump button
+    // mid-animation, and its removal resizes the observed content wrapper, whose
+    // correction would turn a smooth scroll into an instant jump. If the safety
+    // timeout cut the scroll short, `reached` is false and the settled state is
+    // skipped, leaving the button available to retry.
+    if (wasMaintaining) {
+      const element = this.scrollElement;
+      const reached =
+        target === null || !element || Math.abs(element.scrollTop - target) <= 1;
+      this.reduceAndApply({ type: 'scroll-settled', reached });
+    }
+  }
+
+  prefersReducedMotion () {
+    return typeof window !== 'undefined' &&
+      typeof window.matchMedia === 'function' &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  }
+
+  applyScrollToBottom () {
+    const element = this.scrollElement;
+    if (!element) return;
+
+    const smooth = this.smoothScrollRequested && !this.prefersReducedMotion();
+    this.smoothScrollRequested = false;
+
+    if (smooth) {
+      this.startSmoothScrollToBottom(element);
+      return;
+    }
+
+    // A smooth scroll is already heading to the bottom; don't override it.
+    if (this.smoothScrollAnimating) return;
+
+    this.beginMaintenance();
+    // Clamp to the real maximum: assigning past it can itself trigger an
+    // overscroll on some engines.
+    element.scrollTop = element.scrollHeight - element.clientHeight;
+    this.maintenanceTarget = element.scrollTop;
+    // For an instant scroll the position is already at the target, so any
+    // deviating scroll event means the user interrupted: treat it as such
+    // immediately instead of waiting for the maintenance timeout.
+    this.maintenanceObservedTop = element.scrollTop;
+  }
+
+  // Drives the user-initiated scroll-to-bottom ourselves rather than using the
+  // browser's `scrollTo({ behavior: 'smooth' })`. Setting `scrollTop` directly
+  // each frame never overshoots and leaves native overscroll for user scrolls
+  // untouched.
+  //
+  // The motion is a time-normalized exponential decay: the first frame(s) are
+  // capped so starting from far away doesn't lurch, then it decays as a long,
+  // monotonic ease-out (a symmetric ease-in-out compresses the deceleration
+  // into the end of its timeline and lands abruptly).
+  startSmoothScrollToBottom (element) {
+    // Idempotent: the jump button stays rendered until the scroll settles, so a
+    // rapid second activation could otherwise start a second, parallel
+    // requestAnimationFrame loop. That doubles the movement and overwrites the
+    // tracked frame id, leaving the first loop uncancellable.
+    if (this.smoothScrollAnimating) return;
+    this.smoothScrollAnimating = true;
+    this.animateScrollToBottom(element);
+  }
+
+  animateScrollToBottom (element) {
+    const start = element.scrollTop;
+    const end = element.scrollHeight - element.clientHeight;
+    const distance = end - start;
+
+    if (distance <= 1) {
+      // Already there: settle immediately.
+      this.beginMaintenance();
+      element.scrollTop = end;
+      this.maintenanceTarget = element.scrollTop;
+      this.maintenanceObservedTop = element.scrollTop;
+      this.endMaintenance();
+      return;
+    }
+
+    // Maximum distance moved in a single reference frame, scaled with the
+    // distance but bounded so the start never reads as a jump.
+    const stepCap = Math.max(24, Math.min(96, distance * 0.05));
+
+    // Safety net in case animation frames stop (e.g. a backgrounded tab).
+    this.beginMaintenance(SMOOTH_SCROLL_TIMEOUT);
+    // Seed the target synchronously: a scroll event queued from a previous
+    // programmatic scroll can arrive before the first animation frame, and
+    // `handleScroll` ends maintenance immediately when the target is null.
+    this.maintenanceTarget = end;
+    this.maintenanceObservedTop = start;
+
+    let lastTime = performance.now();
+
+    const step = (now) => {
+      this.smoothAnimationFrame = null;
+      if (this.isDestroyed || this.isDestroying || !this.maintainingScroll) return;
+
+      // If content changed mid-animation (a history page landed), restart from
+      // the current position so the moving target can't jump or land short.
+      if (Math.abs((element.scrollHeight - element.clientHeight) - end) > 1) {
+        this.animateScrollToBottom(element);
+        return;
+      }
+
+      const dt = Math.min(100, now - lastTime);
+      lastTime = now;
+
+      const remaining = end - element.scrollTop;
+      if (remaining <= 1) {
+        element.scrollTop = end;
+        this.endMaintenance();
+        return;
+      }
+
+      // Fraction of the remaining distance per reference frame, normalized by
+      // the actual frame time so the feel is display-refresh independent. The
+      // absolute cap keeps a delayed frame from jumping.
+      const frameScale = dt / SMOOTH_SCROLL_FRAME_MS;
+      const decay = 1 - Math.pow(SMOOTH_SCROLL_DECAY_PER_FRAME, frameScale);
+      const delta = Math.min(remaining * decay, stepCap);
+      // Always advance by at least one device pixel: the exponential would
+      // otherwise asymptote a couple of pixels short and never finish.
+      element.scrollTop += Math.max(1, Math.min(delta, remaining));
+      this.maintenanceObservedTop = element.scrollTop;
+
+      this.smoothAnimationFrame = requestAnimationFrame(step);
+    };
+
+    this.smoothAnimationFrame = requestAnimationFrame(step);
+  }
+
+  // --- Anchoring ------------------------------------------------------------
+
+  captureAnchor () {
+    const element = this.scrollElement;
+    const content = this.getContentElement();
+    if (!element || !content) return;
+
+    const containerTop = element.getBoundingClientRect().top;
+    const nodes = content.querySelectorAll('[data-message-key]');
+
+    for (const node of nodes) {
+      const rect = node.getBoundingClientRect();
+      if (rect.bottom > containerTop) {
+        this.scrollState = {
+          ...this.scrollState,
+          anchor: { key: node.dataset.messageKey, offset: rect.top - containerTop },
+        };
+        return;
+      }
+    }
+
+    this.scrollState = { ...this.scrollState, anchor: null };
+  }
+
+  restoreAnchor () {
+    // A smooth scroll to the bottom is in progress; don't fight it.
+    if (this.smoothScrollAnimating) return;
+
+    const anchor = this.scrollState.anchor;
+    const element = this.scrollElement;
+    const content = this.getContentElement();
+    if (!anchor || !element || !content) return;
+
+    const node = content.querySelector(
+      `[data-message-key="${escapeAttributeValue(anchor.key)}"]`
+    );
+    if (!node) return;
+
+    const containerTop = element.getBoundingClientRect().top;
+    const rect = node.getBoundingClientRect();
+    const delta = (rect.top - containerTop) - anchor.offset;
+    if (Math.abs(delta) <= 1) return; // tolerate sub-pixel/fractional scroll values
+
+    this.beginMaintenance();
+    const maxTop = element.scrollHeight - element.clientHeight;
+    element.scrollTop = Math.min(maxTop, element.scrollTop + delta);
+    this.maintenanceTarget = element.scrollTop;
+    // Instant scroll: see applyScrollToBottom.
+    this.maintenanceObservedTop = element.scrollTop;
+  }
+
+  // --- Auto-loading ---------------------------------------------------------
+
+  /**
+   * Genuine user scroll: update stickiness and request older messages when the
+   * user is near the top.
+   */
+  handleUserScroll (metrics) {
+    this.reduceAndApply({ type: 'user-scroll', metrics });
+    this.requestOlderIfNeeded();
+  }
+
+  /**
+   * Requests the next page of older messages when appropriate.
+   *
+   * Level-triggered (not a one-shot edge) but single-flight via
+   * `olderRequestPending`, so it can be safely re-checked after a load
+   * completes, on resize, and on scroll end. This ensures that reaching the top
+   * while a page is already loading still loads the next page once the current
+   * one finishes, instead of requiring the user to scroll down and back up.
+   */
+  requestOlderIfNeeded () {
+    if (this.isDestroyed || this.isDestroying) return;
+    if (this.args.isLoadingOlder || !this.args.hasOlder) return;
+    if (this.olderRequestPending) return;
+
+    const metrics = this.metrics();
+    if (metrics.clientHeight === 0) return;
+
+    const nearTop = isNearTop(metrics);
+    const fits = this.contentFits(metrics);
+    if (!nearTop && !fits) return;
+
+    if (fits) {
+      // Fill the viewport: keep loading while the content is shorter than the
+      // window, but stop once loading stops making progress. Progress is either
+      // the content growing *or* the archive cursor advancing — sparse archives
+      // legitimately return empty/duplicate pages that don't change the height
+      // while still moving through history. Only a few consecutive attempts
+      // with neither signal stop the automatic burst.
+      const cursor = this.args.historyCursor ?? null;
+      if (metrics.scrollHeight === this.lastFillHeight && cursor === this.lastFillCursor) {
+        this.fillNoProgress += 1;
+      } else {
+        this.fillNoProgress = 0;
+        this.lastFillHeight = metrics.scrollHeight;
+        this.lastFillCursor = cursor;
+      }
+      if (this.fillNoProgress > FILL_MAX_NO_PROGRESS) return;
+    }
+    // The `!nearTop && !fits` check above already excludes the bottom of a
+    // genuinely long list, so there is no separate "we are sticking to the
+    // bottom" guard here: with a small overflow (<= AT_BOTTOM_THRESHOLD) every
+    // scroll position reads as "at bottom", and blocking on `stickToBottom`
+    // would make older history unreachable.
+
+    this.olderRequestPending = true;
+    this.reduceAndApply({ type: 'reached-top', hasOlder: true, isLoadingOlder: false });
+  }
+
+  // --- DOM event handlers ---------------------------------------------------
+
+  @action
+  handleReady (element) {
+    this.scrollElement = element;
+  }
+
+  @action
+  handleReset () {
+    this.endMaintenance();
+    this.olderRequestPending = false;
+    this.fillNoProgress = 0;
+    this.lastFillHeight = 0;
+    this.lastFillCursor = null;
+    this.scheduleReduce({ type: 'reset' });
+  }
+
+  @action
+  handleItemsChanged (items) {
+    // Content changed, so the previous request has been satisfied.
+    this.olderRequestPending = false;
+
+    const keys = (items ?? []).map(itemKey);
+    const previousKeys = this.itemKeys;
+    this.itemKeys = keys;
+
+    if (!previousKeys) return; // initial render; reset handled separately
+
+    const previousSet = new Set(previousKeys);
+    const firstKey = keys[0];
+    const lastKey = keys[keys.length - 1];
+
+    // Detect both ends independently: a live message can arrive at the same time
+    // as a history page, and the prepend must still be handled.
+    const prepended = firstKey !== undefined && !previousSet.has(firstKey);
+    const appended = lastKey !== undefined && !previousSet.has(lastKey);
+
+    if (prepended) {
+      // `older-prepended` only restores the scroll position (no tracked writes),
+      // so apply it synchronously. Doing this in the same turn as the DOM update
+      // (before paint) prevents a visible jump and stops a concurrent user
+      // scroll from capturing a shifted anchor.
+      this.reduceAndApply({ type: 'older-prepended' });
+    }
+
+    if (appended) {
+      let count = 0;
+      for (let i = keys.length - 1; i >= 0 && !previousSet.has(keys[i]); i--) {
+        if (items?.[i]?.type !== 'date-headline') count += 1;
+      }
+      if (this.scrollState.stickToBottom) {
+        // The sticky branch only scrolls to the bottom (no tracked writes).
+        this.reduceAndApply({ type: 'content-appended', count });
+      } else {
+        // Detached: this updates newMessageCount/showJumpToLatest (tracked), so
+        // defer it to avoid writing tracked state during render.
+        this.scheduleReduce({ type: 'content-appended', count });
+      }
+    }
+
+    if (!prepended && !appended) {
+      // No tracked writes either; apply synchronously for the same reason.
+      this.reduceAndApply({ type: 'content-resized' });
+    }
+  }
+
+  @action
+  handleScroll (event) {
+    const metrics = this.metricsFrom(event.currentTarget);
+
+    if (this.maintainingScroll) {
+      const target = this.maintenanceTarget;
+
+      if (target === null) {
+        this.endMaintenance();
+      } else {
+        const distance = Math.abs(metrics.scrollTop - target);
+        const previousDistance = Math.abs(this.maintenanceObservedTop - target);
+        const reachedTarget = distance <= 1;
+        // Moving away from the target means the user interrupted (e.g. scrolled
+        // up mid-animation); everything else is our own scroll in progress.
+        const movingAway = distance > previousDistance;
+
+        this.maintenanceObservedTop = metrics.scrollTop;
+
+        if (!reachedTarget && !movingAway) {
+          return;
+        }
+
+        this.endMaintenance();
+        if (reachedTarget) return;
+        // Otherwise fall through and treat it as a user scroll.
+      }
+    }
+
+    this.handleUserScroll(metrics);
+  }
+
+  @action
+  handleScrollEnd () {
+    // Our own animation sets `scrollTop` each frame, so the browser fires
+    // `scrollend` between frames. Ignore those; the animation ends itself.
+    if (this.smoothScrollAnimating) return;
+    // Do not re-apply scroll here: re-correcting from scrollend caused runaway
+    // feedback loops. Layout corrections are driven by ResizeObserver instead.
+    this.endMaintenance();
+    // Coalesced scroll events can skip the exact position where the top zone was
+    // entered, so re-check here as well.
+    this.requestOlderIfNeeded();
+  }
+
+  @action
+  handleContentResize () {
+    // ResizeObserver callbacks run after layout but before paint, so applying
+    // the layout correction here keeps the scroll position stable without a
+    // one-frame jump. `content-resized` performs no tracked writes (it only
+    // adjusts scrollTop), and setting scrollTop does not resize the observed
+    // element, so this is safe inside the callback.
+    this.reduceAndApply({ type: 'content-resized' });
+
+    // Defer the auto-load request: it can add content, which must not happen
+    // inside the ResizeObserver callback (that causes the "ResizeObserver loop
+    // completed with undelivered notifications" error).
+    if (this.resizeScheduled) return;
+    this.resizeScheduled = true;
+
+    this.runInFrame(() => {
+      this.resizeScheduled = false;
+      if (this.isDestroyed || this.isDestroying) return;
+      this.requestOlderIfNeeded();
+    });
+  }
+
+  @action
+  handleLoadingOlderChanged (isLoading) {
+    if (isLoading) return;
+
+    // The in-flight page finished; allow requesting the next one if we are
+    // still near the top (e.g. the user reached the top while it was loading).
+    this.olderRequestPending = false;
+    this.runInFrame(() => {
+      if (this.isDestroyed || this.isDestroying) return;
+      this.requestOlderIfNeeded();
+    });
+  }
+
+  @action
+  scrollToBottom () {
+    // Once we settle at the bottom the jump button is removed from the DOM, so
+    // move focus into the message list first, otherwise keyboard/screen-reader
+    // focus would be dropped to <body>. `preventScroll` keeps this from
+    // fighting the animation that follows.
+    this.scrollElement?.focus({ preventScroll: true });
+    // Request a smooth scroll only for this explicit, user-initiated action.
+    this.smoothScrollRequested = true;
+    this.reduceAndApply({ type: 'scroll-to-bottom' });
+    this.smoothScrollRequested = false;
+  }
+}
diff --git a/app/components/user-list.hbs b/app/components/user-list.hbs
index 443ab781..3267157e 100644
--- a/app/components/user-list.hbs
+++ b/app/components/user-list.hbs
@@ -1,4 +1,4 @@
-<section id="user-list" class="main py-6" {{on-users-change this.usersChanged}}>
+<section id="user-list" class="main py-6" {{on-change @channel this.usersChanged}}>
   {{#if @users}}
     <h2 class="px-4 mb-2 text-xs uppercase opacity-80">{{@users.length}} Online</h2>
   {{/if}}
diff --git a/app/components/user-list.js b/app/components/user-list.js
index bf319e2e..041500c1 100644
--- a/app/components/user-list.js
+++ b/app/components/user-list.js
@@ -22,13 +22,14 @@ export default class UserListComponent extends Component {
 
   // called when changing list of users (i.e. when switching channels)
   @action
-  usersChanged (element) {
+  usersChanged () {
     this.renderedUsersCount = this.renderedUsersAddendumAmount;
     this.partialRenderingEnabled = true;
 
     requestAnimationFrame(() => {
       if (this.isDestroyed || this.isDestroying) return;
-      this.scrollToTop(element);
+      const element = document.getElementById('user-list');
+      if (element) this.scrollToTop(element);
     });
   }
 
diff --git a/app/models/base_channel.js b/app/models/base_channel.js
index 3af79dde..9cbb2085 100644
--- a/app/models/base_channel.js
+++ b/app/models/base_channel.js
@@ -3,6 +3,7 @@ import { tracked, cached } from '@glimmer/tracking';
 import { TrackedArray } from 'tracked-built-ins';
 import Message from 'hyperchannel/models/message';
 import domainFromId from 'hyperchannel/utils/domain-from-id';
+import { messageKey, dateHeadlineKey } from 'hyperchannel/utils/message-key';
 import moment from 'moment';
 
 export default class BaseChannel {
@@ -18,6 +19,8 @@ export default class BaseChannel {
   @tracked messages = new TrackedArray([]);
   @tracked unreadMessages = false;
   @tracked unreadMentions = false;
+  @tracked hasOlderMessages = false;
+  @tracked loadingOlderMessages = false;
   @tracked visible = false; // Current/active channel
   @tracked roomInfoLoaded = false;
   @tracked description = null;
@@ -124,6 +127,7 @@ export default class BaseChannel {
     if (existingDateHeadline) { return; }
 
     let dateMessage = new Message({ type: 'date-headline', date: headlineDate });
+    dateMessage.key = dateHeadlineKey(headlineDate);
     this.messages.push(dateMessage);
   }
 
@@ -133,6 +137,16 @@ export default class BaseChannel {
       return;
     }
 
+    if (!message.key) {
+      message.key = messageKey(message);
+    }
+
+    // Ignore duplicates: the same transport message delivered twice, or an
+    // id-less archive message whose derived key matches an existing one.
+    if (this.messages.some(m => m.key === message.key)) {
+      return;
+    }
+
     this.addDateHeadline(message);
 
     // Find the last non-date-headline message for grouping check
diff --git a/app/models/channel.js b/app/models/channel.js
index 1af6787f..0b3c4bbf 100644
--- a/app/models/channel.js
+++ b/app/models/channel.js
@@ -1,4 +1,5 @@
 import { htmlSafe } from '@ember/template';
+import { tracked } from '@glimmer/tracking';
 import { isPresent } from '@ember/utils';
 import BaseChannel from 'hyperchannel/models/base_channel';
 import config from 'hyperchannel/config/environment';
@@ -6,7 +7,9 @@ import linkifyStr from 'linkify-string';
 
 export default class Channel extends BaseChannel {
 
-  searchedPreviousLogsUntilDate = null;
+  // Archive cursor: the `previous` date of the last fetched page. Tracked so the
+  // scroller observes cursor progress (see ChatScrollerComponent#requestOlderIfNeeded).
+  @tracked searchedPreviousLogsUntilDate = null;
 
   get formattedTopic () {
     if (isPresent(this.topic)) {
diff --git a/app/models/message.js b/app/models/message.js
index 567a058e..5465a83e 100644
--- a/app/models/message.js
+++ b/app/models/message.js
@@ -10,6 +10,10 @@ export default class Message {
   @tracked edited = false;
   @tracked grouped = false;
 
+  // Stable identity used for list keys and scroll anchoring. Assigned by
+  // `BaseChannel.addMessage` / `addDateHeadline`; see `utils/message-key`.
+  key = null;
+
   constructor (props) {
     Object.assign(this, props);
   }
diff --git a/app/modifiers/chat-scroll.js b/app/modifiers/chat-scroll.js
new file mode 100644
index 00000000..ea9c23da
--- /dev/null
+++ b/app/modifiers/chat-scroll.js
@@ -0,0 +1,38 @@
+import { modifier } from 'ember-modifier';
+
+/**
+ * Sets up DOM observation for a chat scroll container.
+ *
+ * Observes both the scroll container and its content wrapper with a
+ * `ResizeObserver` (so content growth/reflow is detected even when the
+ * container itself doesn't change size), and forwards scroll and `scrollend`
+ * events. All scroll policy lives in the component; this modifier only wires
+ * up and tears down observers/listeners.
+ */
+export default modifier((element, _positional, { onReady, onScroll, onScrollEnd, onContentResize }) => {
+  onReady?.(element);
+
+  // Observe the content wrapper, not the scroll container itself: the container
+  // resizes when a scrollbar appears/disappears, which would otherwise cause a
+  // resize/scroll feedback loop. Window resizes are handled separately.
+  const content = element.firstElementChild ?? element;
+
+  const resizeObserver = new ResizeObserver(() => onContentResize?.());
+  resizeObserver.observe(content);
+
+  const windowResizeHandler = () => onContentResize?.();
+  window.addEventListener('resize', windowResizeHandler);
+
+  const scrollHandler = (event) => onScroll?.(event);
+  element.addEventListener('scroll', scrollHandler, { passive: true });
+
+  const scrollEndHandler = () => onScrollEnd?.();
+  element.addEventListener('scrollend', scrollEndHandler);
+
+  return () => {
+    resizeObserver.disconnect();
+    window.removeEventListener('resize', windowResizeHandler);
+    element.removeEventListener('scroll', scrollHandler);
+    element.removeEventListener('scrollend', scrollEndHandler);
+  };
+}, { eager: false });
diff --git a/app/modifiers/on-change.js b/app/modifiers/on-change.js
new file mode 100644
index 00000000..a978fdf8
--- /dev/null
+++ b/app/modifiers/on-change.js
@@ -0,0 +1,22 @@
+import { modifier } from 'ember-modifier';
+import { untrack } from '@glimmer/validator';
+
+/**
+ * Runs `callback` immediately and again whenever `value` changes.
+ *
+ * This is the `did-update` semantics that `ember-render-modifiers` used to
+ * provide. Unlike a plain `on-render` (install-only) modifier, it autotracks
+ * `value`, so it is safe to use for reacting to changed arguments such as the
+ * current channel or rendered messages.
+ *
+ * The callback is run inside `untrack`: ember-modifier autotracks every tracked
+ * value the modifier function accesses, including values read inside the
+ * callback. Callbacks often read other tracked state (e.g. `channelChanged`
+ * reads `channel.sortedMessages`), which must not become a dependency of this
+ * modifier, otherwise it re-runs on unrelated changes.
+ */
+export default modifier((element, [value, callback]) => {
+  untrack(() => callback(value));
+
+  return () => {};
+}, { eager: false });
diff --git a/app/modifiers/on-channel-change.js b/app/modifiers/on-channel-change.js
deleted file mode 100644
index 4489275f..00000000
--- a/app/modifiers/on-channel-change.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier((element, [onChannelChange]) => {
-  // Call immediately on mount
-  onChannelChange();
-
-  return () => {};
-}, { eager: false });
diff --git a/app/modifiers/on-users-change.js b/app/modifiers/on-users-change.js
deleted file mode 100644
index a719f43e..00000000
--- a/app/modifiers/on-users-change.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier((element, [onUsersChange]) => {
-  // Call immediately on mount
-  onUsersChange(element);
-
-  // No cleanup needed, but we return a cleanup function anyway
-  return () => {};
-}, { eager: false });
diff --git a/app/services/coms.js b/app/services/coms.js
index 26039f07..ca1c7c62 100644
--- a/app/services/coms.js
+++ b/app/services/coms.js
@@ -386,6 +386,7 @@ export default class ComsService extends Service {
 
     let messagesCount = 0;
     let archivesCount = 0;
+    let added = 0;
 
     while ((messagesCount < options.minMessages) &&
            (archivesCount < options.maxDays)) {
@@ -401,15 +402,39 @@ export default class ComsService extends Service {
         });
 
         channel.addMessage(channelMessage);
+        if (channel.messages.includes(channelMessage)) added += 1;
       });
 
       messagesCount += archive.today?.messages?.length || 0;
       archivesCount += 1;
 
       dateStr = archive.today?.previous;
-      channel.searchedPreviousLogsUntilDate = dateStr;
       if (isEmpty(dateStr)) break;
     }
+
+    channel.searchedPreviousLogsUntilDate = dateStr;
+    channel.hasOlderMessages = !isEmpty(dateStr);
+
+    return { added, hasMore: channel.hasOlderMessages };
+  }
+
+  /**
+   * Fetches an additional page of older messages into the channel.
+   *
+   * Returns `{ added, hasMore }` so the caller can reveal them and know whether
+   * more history is available.
+   */
+  async loadOlderMessages (channel, options = {}) {
+    if (isEmpty(channel.searchedPreviousLogsUntilDate)) {
+      channel.hasOlderMessages = false;
+      return { added: 0, hasMore: false };
+    }
+
+    return this.loadArchiveMessages(channel, channel.searchedPreviousLogsUntilDate, {
+      minMessages: 30,
+      maxDays: 3,
+      ...options
+    });
   }
 
   createUserChannel (account, name) {
diff --git a/app/styles/components/channel-container.scss b/app/styles/components/channel-container.scss
index fb9e0177..71504841 100644
--- a/app/styles/components/channel-container.scss
+++ b/app/styles/components/channel-container.scss
@@ -147,6 +147,21 @@
   }
 
   #channel-content {
+    // We manage scroll anchoring ourselves (see ChatScrollerComponent), so opt
+    // out of the browser's anchoring to avoid double-correction.
+    overflow-anchor: none;
+    // Reserve space for the scrollbar so its appearance/disappearance doesn't
+    // reflow the message list (which fed the resize/scroll feedback loop).
+    scrollbar-gutter: stable;
+
+    // Focused programmatically when the jump-to-latest button is activated (see
+    // ChatScrollerComponent#scrollToBottom), so the button can be removed
+    // without dropping keyboard focus to <body>. It is not a tab stop, so the
+    // outline is suppressed.
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
     a {
       color: #aaa;
       text-decoration: underline;
@@ -169,6 +184,75 @@
         }
       }
     }
+
+    .history-load-error {
+      button.retry {
+        padding: 0;
+        border: none;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-decoration: underline;
+        cursor: pointer;
+
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+
+    // Sticky, zero-height positioning context. It stays pinned to the viewport
+    // bottom while the list is scrolled up, but contributes no height to the
+    // scroll content, so the absolutely-positioned button can appear/disappear
+    // without changing `scrollHeight` (which would shift the view by the
+    // button's height).
+    .jump-to-latest-zone {
+      position: sticky;
+      bottom: 0;
+      z-index: 10;
+      height: 0;
+    }
+
+    .jump-to-latest {
+      position: absolute;
+      bottom: 0;
+      // Pin to the bottom-right corner. The content already has bottom padding,
+      // so no extra offset is needed.
+      right: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+      width: fit-content;
+      margin: 0;
+      padding: 0.5rem;
+      border: none;
+      border-radius: 9999px;
+      // Neutral "scroll to bottom" state: filled grey circle, white chevron.
+      background-color: #9ca3af;
+      color: #fff;
+      font-size: 0.875rem;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+      cursor: pointer;
+
+      &:hover {
+        background-color: #6b7280;
+      }
+
+      svg {
+        width: 1.1rem;
+        height: 1.1rem;
+      }
+
+      // With new messages: blue pill, chevron followed by the count.
+      &.has-new-messages {
+        padding: 0.5rem 1rem;
+        background-color: #1d4ed8;
+
+        &:hover {
+          background-color: #1e40af;
+        }
+      }
+    }
   }
 }
 
diff --git a/app/utils/chat-scroll-state.js b/app/utils/chat-scroll-state.js
new file mode 100644
index 00000000..d76e029c
--- /dev/null
+++ b/app/utils/chat-scroll-state.js
@@ -0,0 +1,172 @@
+/**
+ * Pure scroll policy for chat message lists.
+ *
+ * This module contains no DOM access: given the current state and an event it
+ * returns the next state plus a list of effects for the DOM adapter
+ * (`ChatScrollerComponent`) to apply. Keeping the policy pure makes the tricky
+ * parts (stickiness, anchoring, history loading) straightforward to unit test.
+ */
+
+export const AT_BOTTOM_THRESHOLD = 50; // px
+export const AT_TOP_THRESHOLD = 200; // px
+
+export const ScrollAction = Object.freeze({
+  ScrollToBottom: 'ScrollToBottom',
+  CaptureAnchor: 'CaptureAnchor',
+  RestoreAnchor: 'RestoreAnchor',
+  LoadOlder: 'LoadOlder',
+});
+
+export function isAtBottom (
+  { scrollTop, scrollHeight, clientHeight },
+  threshold = AT_BOTTOM_THRESHOLD
+) {
+  // When the content fits entirely, we are always at the bottom.
+  if (scrollHeight <= clientHeight) return true;
+  // Use a small margin so fractional/DPI-related scroll values don't cause flicker.
+  return scrollHeight - scrollTop - clientHeight <= threshold;
+}
+
+export function isNearTop (
+  { scrollTop, scrollHeight, clientHeight },
+  threshold = AT_TOP_THRESHOLD
+) {
+  // Only meaningful when there is actually something to scroll. This prevents
+  // short channels without a scrollbar from auto-loading their entire history.
+  if (scrollHeight <= clientHeight) return false;
+  return scrollTop <= threshold;
+}
+
+export function createScrollState () {
+  return {
+    atBottom: true,
+    stickToBottom: true,
+    anchor: null,
+    programmaticScroll: false,
+    newMessageCount: 0,
+    showJumpToLatest: false,
+  };
+}
+
+/**
+ * @param {object} state current scroll state (see createScrollState)
+ * @param {object} event one of:
+ *   { type: 'reset' }
+ *   { type: 'scroll-to-bottom' }
+ *   { type: 'scroll-settled', reached }
+ *   { type: 'programmatic-scroll-started' }
+ *   { type: 'programmatic-scroll-ended' }
+ *   { type: 'user-scroll', metrics }
+ *   { type: 'content-appended', count }
+ *   { type: 'content-resized' }
+ *   { type: 'older-prepended' }
+ *   { type: 'reached-top', hasOlder, isLoadingOlder }
+ * @returns {{ state: object, effects: string[] }}
+ */
+export function reduceScrollState (state, event) {
+  switch (event.type) {
+    case 'reset':
+      // TODO: When read status is cached/persisted, scroll to the first unread
+      // message instead of the bottom (see issue #285 and the unread divider plan).
+      return {
+        state: createScrollState(),
+        effects: [ScrollAction.ScrollToBottom],
+      };
+
+    case 'scroll-to-bottom':
+      // Don't mark `atBottom` yet: the jump button lives inside the observed
+      // content wrapper, so removing it immediately would resize the wrapper and
+      // trigger a non-smooth correction that cancels a smooth scroll. Settle it
+      // in `scroll-settled` once the scroll has finished.
+      return {
+        state: {
+          ...state,
+          stickToBottom: true,
+          newMessageCount: 0,
+          showJumpToLatest: false,
+        },
+        effects: [ScrollAction.ScrollToBottom],
+      };
+
+    case 'scroll-settled':
+      // Only claim "at bottom" when the programmatic scroll actually reached its
+      // target (`reached`). If it was cut short (e.g. the safety timeout fired
+      // on a backgrounded tab, or a very long scroll), stay detached so the jump
+      // button remains and the user can retry.
+      if (!state.stickToBottom || event.reached === false) {
+        return { state, effects: [] };
+      }
+      return { state: { ...state, atBottom: true }, effects: [] };
+
+    case 'programmatic-scroll-started':
+      return { state: { ...state, programmaticScroll: true }, effects: [] };
+
+    case 'programmatic-scroll-ended':
+      return { state: { ...state, programmaticScroll: false }, effects: [] };
+
+    case 'user-scroll': {
+      if (isAtBottom(event.metrics)) {
+        return {
+          state: {
+            ...state,
+            atBottom: true,
+            stickToBottom: true,
+            newMessageCount: 0,
+            showJumpToLatest: false,
+          },
+          effects: [],
+        };
+      }
+      return {
+        state: { ...state, atBottom: false, stickToBottom: false },
+        effects: [ScrollAction.CaptureAnchor],
+      };
+    }
+
+    case 'content-appended': {
+      if (state.stickToBottom) {
+        return { state, effects: [ScrollAction.ScrollToBottom] };
+      }
+      const newMessageCount = state.newMessageCount + Math.max(1, event.count ?? 1);
+      return {
+        state: { ...state, newMessageCount, showJumpToLatest: true },
+        effects: [],
+      };
+    }
+
+    case 'content-resized': {
+      if (state.stickToBottom) {
+        return { state, effects: [ScrollAction.ScrollToBottom] };
+      }
+      return { state, effects: [ScrollAction.RestoreAnchor] };
+    }
+
+    case 'older-prepended':
+      // While sticking to the bottom, keep the view there: a completed history
+      // load must not restore an anchor captured before the user returned to the
+      // bottom (e.g. a request that started while reading history but finished
+      // after they clicked "scroll to latest"). Only anchored reading restores
+      // the position.
+      if (state.stickToBottom) {
+        return { state, effects: [ScrollAction.ScrollToBottom] };
+      }
+      return { state, effects: [ScrollAction.RestoreAnchor] };
+
+    case 'reached-top': {
+      if (!event.hasOlder || event.isLoadingOlder) {
+        return { state, effects: [] };
+      }
+      // While sticking to the bottom (e.g. filling a short history), don't
+      // anchor: the new page should keep the newest message in view. When the
+      // user is reading history, capture the anchor so their position is kept
+      // while older messages are revealed/loaded above.
+      const effects = state.stickToBottom
+        ? [ScrollAction.LoadOlder]
+        : [ScrollAction.CaptureAnchor, ScrollAction.LoadOlder];
+      return { state, effects };
+    }
+
+    default:
+      return { state, effects: [] };
+  }
+}
diff --git a/app/utils/message-key.js b/app/utils/message-key.js
new file mode 100644
index 00000000..328cb3ef
--- /dev/null
+++ b/app/utils/message-key.js
@@ -0,0 +1,38 @@
+import { sha1 } from '@noble/hashes/legacy.js';
+import { bytesToHex, utf8ToBytes } from '@noble/hashes/utils.js';
+
+/**
+ * Stable identity for a message, used for list keys and scroll anchoring.
+ *
+ * - A server-assigned stanza id (`sid`) is unique within a room, so it is used
+ *   as-is.
+ * - Other transport ids (e.g. XMPP stanza `id`s) are sender/stream scoped, so
+ *   they are combined with the author. Otherwise two senders using the same id
+ *   would collapse into one when `BaseChannel.addMessage` dedupes channel-wide.
+ * - Older archive messages (e.g. remoteStorage IRC logs) have no id, so one is
+ *   derived from the timestamp plus a hash of the author and content.
+ *
+ * The author/id tuple is JSON-encoded rather than joined with a control
+ * character: keys are used as `data-message-key` attribute values and looked up
+ * with `CSS.escape` (see ChatScrollerComponent#restoreAnchor), and `CSS.escape`
+ * rewrites U+0000 to U+FFFD, which would make such selectors never match.
+ * JSON is injective for string tuples and CSS-safe.
+ *
+ * Note: two byte-identical messages in the same timestamp tick will produce the
+ * same key and are treated as duplicates when added (`BaseChannel.addMessage`).
+ * That is intentional; distinguishing such messages is not a supported feature.
+ */
+export function messageKey (message) {
+  if (message.sid) return `sid:${message.sid}`;
+  if (message.id) return JSON.stringify([message.nickname ?? '', message.id]);
+
+  const timestamp = message.date ? new Date(message.date).getTime() : 0;
+  const identity = `${message.nickname ?? ''}\u0000${message.content ?? ''}`;
+  const hash = bytesToHex(sha1(utf8ToBytes(identity))).slice(0, 10);
+
+  return `${timestamp}-${hash}`;
+}
+
+export function dateHeadlineKey (date) {
+  return `date-${new Date(date).getTime()}`;
+}
diff --git a/tests/integration/components/channel-container-test.js b/tests/integration/components/channel-container-test.js
index f8a244bc..9feb4b18 100644
--- a/tests/integration/components/channel-container-test.js
+++ b/tests/integration/components/channel-container-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, settled, waitUntil, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import Service from '@ember/service';
 import Channel from 'hyperchannel/models/channel';
@@ -11,6 +11,15 @@ class comsStub extends Service {
   loadArchiveMessages () {}
 }
 
+const TEMPLATE = hbs`
+  <ChannelContainer @channel={{this.channel}}
+                    @onMessage={{this.noop}}
+                    @onCommand={{this.noop}}
+                    @onMenu={{this.noop}}
+                    @onLeaveChannel={{this.noop}}
+                    @addUsernameMentionToMessage={{this.noop}} />
+`;
+
 module('Integration | Component | channel-container', function (hooks) {
   setupRenderingTest(hooks);
 
@@ -51,4 +60,97 @@ module('Integration | Component | channel-container', function (hooks) {
     assert.strictEqual(messageContents.length, 1, 'renders only the chat message with MessageChat');
     assert.strictEqual(messageContents[0].innerText.trim(), 'hello world', 'renders the chat message content');
   });
+
+  test('stops auto-loading and offers a retry when loading older messages fails', async function (assert) {
+    let calls = 0;
+    class FailingComs extends Service {
+      async loadOlderMessages () {
+        calls += 1;
+        throw new Error('boom');
+      }
+    }
+    this.owner.register('service:coms', FailingComs);
+
+    this.channel.hasOlderMessages = true;
+
+    await render(TEMPLATE);
+
+    // Constrain the scroller so the "fill the viewport" auto-load path runs.
+    const scroller = document.getElementById('channel-content');
+    scroller.style.height = '400px';
+    scroller.style.overflowY = 'auto';
+    window.dispatchEvent(new Event('resize'));
+
+    await waitUntil(() => calls >= 1, { timeout: 2000 });
+    await settled();
+
+    assert.strictEqual(calls, 1, 'does not retry the failing request in a loop');
+    assert.dom('.history-load-error').exists('shows a retry affordance');
+    assert.dom('.history-start').doesNotExist('does not claim the beginning of history was reached');
+
+    await click('.history-load-error button');
+    await waitUntil(() => calls >= 2, { timeout: 2000 });
+
+    assert.strictEqual(calls, 2, 'retry calls the loader again');
+  });
+
+  test('applies the initial render window when the async archive batch arrives', async function (assert) {
+    // A freshly joined channel has no messages yet; the archive is loaded
+    // asynchronously after the component has sized its window.
+    this.channel = new Channel({ account: ircAccount, name: '#big', displayName: '#big' });
+
+    await render(TEMPLATE);
+
+    // Constrain the scroller so the fill path doesn't reveal the whole batch.
+    const scroller = document.getElementById('channel-content');
+    scroller.style.flex = '0 0 400px';
+    scroller.style.height = '400px';
+    scroller.style.overflowY = 'auto';
+    scroller.style.overflowAnchor = 'none';
+    await settled();
+
+    for (let i = 0; i < 120; i++) {
+      this.channel.addMessage(new Message({
+        type: 'message-chat',
+        id: `m${i}`,
+        date: new Date(Date.now() + i * 1000),
+        nickname: 'alice',
+        content: `message ${i}`
+      }));
+    }
+    await settled();
+
+    assert.strictEqual(
+      this.element.querySelectorAll('#channel-content .msg-content').length,
+      50,
+      'renders the initial window of 50 messages, not the whole batch'
+    );
+  });
+
+  test('fetches older history when the in-memory batch is within the render window', async function (assert) {
+    let calls = 0;
+    class LoadingComs extends Service {
+      async loadOlderMessages () {
+        calls += 1;
+      }
+    }
+    this.owner.register('service:coms', LoadingComs);
+
+    // A short channel: fewer in-memory messages than the render window, but the
+    // archive has older pages.
+    this.channel.hasOlderMessages = true;
+
+    await render(TEMPLATE);
+
+    // Constrain the scroller so the "fill the viewport" auto-load path runs.
+    const scroller = document.getElementById('channel-content');
+    scroller.style.height = '400px';
+    scroller.style.overflowY = 'auto';
+    window.dispatchEvent(new Event('resize'));
+
+    await waitUntil(() => calls >= 1, { timeout: 2000 });
+
+    assert.ok(calls >= 1, 'fetches an archive page instead of returning without progress');
+  });
 });
+
diff --git a/tests/integration/components/chat-scroller-test.js b/tests/integration/components/chat-scroller-test.js
new file mode 100644
index 00000000..f30d7fc6
--- /dev/null
+++ b/tests/integration/components/chat-scroller-test.js
@@ -0,0 +1,463 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, settled, waitUntil } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+function items (count, startAt = 0) {
+  return Array.from({ length: count }, (_, index) => ({ id: `m${startAt + index}` }));
+}
+
+function isScrolledToBottom (element) {
+  return element.scrollTop + element.clientHeight >= element.scrollHeight - 2;
+}
+
+function anchoredNode (scroller) {
+  const containerTop = scroller.getBoundingClientRect().top;
+  for (const node of scroller.querySelectorAll('[data-message-key]')) {
+    if (node.getBoundingClientRect().bottom > containerTop) return node;
+  }
+  return null;
+}
+
+function offsetWithin (scroller, node) {
+  return node.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+}
+
+const TEMPLATE = hbs`
+  {{! template-lint-disable no-inline-styles }}
+  <ChatScroller id="scroller"
+                @items={{this.items}}
+                @resetKey={{this.resetKey}}
+                @hasOlder={{this.hasOlder}}
+                @isLoadingOlder={{this.isLoadingOlder}}
+                @historyCursor={{this.historyCursor}}
+                @onLoadOlder={{this.onLoadOlder}}
+                as |scroll|>
+    {{#unless scroll.isAtBottom}}
+      <button type="button"
+              class="jump-to-latest {{if scroll.showJumpToLatest "has-new-messages"}}"
+              {{on "click" scroll.scrollToBottom}}>
+        <span class="chevron">v</span>
+        {{#if scroll.newMessageCount}}
+          <span class="count">{{scroll.newMessageCount}} new</span>
+        {{/if}}
+      </button>
+    {{/unless}}
+    {{#each this.items key="id" as |item|}}
+      <div data-message-key={{item.id}} style="height: 40px;">{{item.id}}</div>
+    {{/each}}
+  </ChatScroller>
+`;
+
+module('Integration | Component | chat-scroller', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.resetKey = 'channel-a';
+    this.hasOlder = false;
+    this.isLoadingOlder = false;
+    this.historyCursor = null;
+    this.onLoadOlder = () => {};
+  });
+
+  async function renderScroller () {
+    await render(TEMPLATE);
+    const scroller = document.getElementById('scroller');
+    scroller.style.height = '200px';
+    scroller.style.overflowY = 'auto';
+    await settled();
+    return scroller;
+  }
+
+  test('scrolls to the bottom on initial render', async function (assert) {
+    this.items = items(20);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    assert.true(isScrolledToBottom(scroller), 'is scrolled to the bottom');
+  });
+
+  test('stays at the bottom when items are appended while at the bottom', async function (assert) {
+    this.items = items(20);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    this.set('items', items(25));
+    await settled();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    assert.true(isScrolledToBottom(scroller), 'still at the bottom after appending');
+    assert.dom('.jump-to-latest').doesNotExist('does not show the jump-to-latest button');
+  });
+
+  test('shows the scroll-to-bottom button when scrolled up without new messages', async function (assert) {
+    this.items = items(20);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+    assert.dom('.jump-to-latest').doesNotExist('hidden while at the bottom');
+
+    scroller.scrollTop = 0;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+
+    assert.dom('.jump-to-latest').exists('shows the button when scrolled up');
+    assert.dom('.jump-to-latest').doesNotHaveClass(
+      'has-new-messages',
+      'is in the neutral (no new messages) state'
+    );
+  });
+
+  test('detaches when scrolled up and offers a way back for new messages', async function (assert) {
+    this.items = items(20);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    // Simulate a user scrolling away from the bottom.
+    scroller.scrollTop = 0;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+
+    assert.dom('.jump-to-latest').exists('shows the scroll-to-bottom button when scrolled up');
+    assert.dom('.jump-to-latest').doesNotHaveClass(
+      'has-new-messages',
+      'neutral until new messages arrive'
+    );
+
+    // A new message arriving while detached should not yank the viewport down,
+    // but should offer a way back.
+    this.set('items', items(21));
+    await settled();
+    await waitUntil(() => document.querySelector('.jump-to-latest.has-new-messages'), { timeout: 2000 });
+
+    assert.dom('.jump-to-latest').hasClass('has-new-messages', 'switches to the new-messages state');
+    assert.dom('.jump-to-latest .count').hasText('1 new', 'shows the new message count');
+    assert.false(isScrolledToBottom(scroller), 'did not jump to the bottom automatically');
+
+    await document.querySelector('.jump-to-latest').click();
+    await settled();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    assert.true(isScrolledToBottom(scroller), 'jumped to the bottom when clicked');
+    assert.dom('.jump-to-latest').doesNotExist('hides the button after jumping');
+  });
+
+  test('reaches the bottom when items are appended during the scroll animation', async function (assert) {
+    this.items = items(20);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    // Detach so the scroll-to-bottom button appears.
+    scroller.scrollTop = 0;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+    await waitUntil(() => document.querySelector('.jump-to-latest'), { timeout: 2000 });
+
+    // Start the animation, then grow the content while it is running.
+    document.querySelector('.jump-to-latest').click();
+    this.set('items', items(30));
+
+    await settled();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    assert.true(isScrolledToBottom(scroller), 'reaches the bottom despite content growth');
+  });
+
+  test('starts the scroll-to-bottom animation gently from far away', async function (assert) {
+    // A long list so a first-frame "jump" (e.g. a fixed fraction of the
+    // remaining distance) would be large and obvious.
+    this.items = items(60); // 2400px in a 200px window
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    scroller.scrollTop = 0;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+    await waitUntil(() => document.querySelector('.jump-to-latest'), { timeout: 2000 });
+
+    const before = scroller.scrollTop;
+    document.querySelector('.jump-to-latest').click();
+
+    const afterFirstFrame = await new Promise((resolve) => {
+      requestAnimationFrame(() => resolve(scroller.scrollTop));
+    });
+    const firstStep = afterFirstFrame - before;
+
+    assert.true(
+      firstStep < 150,
+      `first animation step is small (${Math.round(firstStep)}px of 2400px)`
+    );
+
+    await settled();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+    assert.true(isScrolledToBottom(scroller), 'still reaches the bottom');
+  });
+
+  test('eases out gently into the bottom (long tail)', async function (assert) {
+    this.items = items(60); // 2400px in a 200px window
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    scroller.scrollTop = 0;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+    await waitUntil(() => document.querySelector('.jump-to-latest'), { timeout: 2000 });
+
+    const end = scroller.scrollHeight - scroller.clientHeight;
+    let enteredTailAt = null;
+    const onScroll = () => {
+      if (enteredTailAt === null && end - scroller.scrollTop <= 40) {
+        enteredTailAt = performance.now();
+      }
+    };
+    scroller.addEventListener('scroll', onScroll);
+
+    document.querySelector('.jump-to-latest').click();
+    await settled();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 3000 });
+    scroller.removeEventListener('scroll', onScroll);
+
+    assert.ok(enteredTailAt !== null, 'reached the last 40px during the animation');
+    const tailMs = performance.now() - enteredTailAt;
+    assert.true(
+      tailMs >= 150,
+      `the last 40px is eased out over time (${Math.round(tailMs)}ms)`
+    );
+  });
+
+  test('does not start a second scroll animation when activated twice', async function (assert) {
+    this.items = items(60);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    // Detach so the scroll-to-bottom button appears.
+    scroller.scrollTop = 0;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+    await waitUntil(() => document.querySelector('.jump-to-latest'), { timeout: 2000 });
+
+    const button = document.querySelector('.jump-to-latest');
+    const raf = sinon.spy(window, 'requestAnimationFrame');
+    try {
+      // Two synchronous activations, before any frame runs.
+      button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+      assert.strictEqual(raf.callCount, 1, 'only one animation loop is started');
+    } finally {
+      raf.restore();
+    }
+
+    await settled();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 3000 });
+    assert.true(isScrolledToBottom(scroller), 'still reaches the bottom');
+  });
+
+  test('loads older history until the viewport is filled', async function (assert) {
+    this.items = items(2); // 80px in a 200px window
+
+    let calls = 0;
+    this.onLoadOlder = () => {
+      calls += 1;
+      const older = [{ id: `old${calls}a` }, { id: `old${calls}b` }];
+      this.set('items', [...older, ...this.items]);
+    };
+
+    const scroller = await renderScroller();
+
+    // Enable history loading only once the container is constrained to a
+    // fixed height, otherwise the content trivially "fits" during layout.
+    this.set('hasOlder', true);
+    await settled();
+    window.dispatchEvent(new Event('resize'));
+
+    // Auto-loading continues until the list is long enough that the bottom is
+    // no longer within the top zone (AT_TOP_THRESHOLD), not merely until it
+    // starts to overflow: a small overflow still reads as "at bottom" at every
+    // position, so stopping at the first pixel of overflow would strand history.
+    await waitUntil(
+      () => scroller.scrollHeight - scroller.clientHeight > 200,
+      { timeout: 3000 }
+    );
+    await settled();
+
+    assert.true(scroller.scrollHeight > scroller.clientHeight, 'viewport is filled');
+    assert.ok(calls >= 2, `loaded multiple pages to fill the viewport (${calls})`);
+
+    const callsWhenFilled = calls;
+    window.dispatchEvent(new Event('resize'));
+    await settled();
+
+    assert.strictEqual(calls, callsWhenFilled, 'does not keep loading once the viewport is filled');
+  });
+
+  test('keeps filling through sparse archive pages that only advance the cursor', async function (assert) {
+    this.items = items(2); // content fits the 200px window
+
+    let calls = 0;
+    this.onLoadOlder = () => {
+      calls += 1;
+      // A sparse page: no new messages, but the archive cursor still advances.
+      this.set('historyCursor', `cursor-${calls}`);
+    };
+
+    await renderScroller();
+
+    this.set('hasOlder', true);
+    await settled();
+    window.dispatchEvent(new Event('resize'));
+    await waitUntil(() => calls >= 1, { timeout: 2000 });
+
+    // Simulate each in-flight load completing, which releases the single-flight
+    // lock and lets the scroller request the next page.
+    for (let i = 0; i < 5; i++) {
+      this.set('isLoadingOlder', true);
+      await settled();
+      this.set('isLoadingOlder', false);
+      await settled();
+    }
+
+    // The previous height-only guard stopped after three attempts without
+    // growth; cursor progress must keep the automatic fill going.
+    assert.ok(calls >= 4, `kept loading past the height-only limit (${calls})`);
+  });
+
+  test('requests older history once when entering the top zone', async function (assert) {
+    this.items = items(20);
+
+    let calls = 0;
+    this.onLoadOlder = () => {
+      calls += 1;
+    };
+
+    const scroller = await renderScroller();
+    this.set('hasOlder', true);
+    await settled();
+
+    // Enter the top zone.
+    scroller.scrollTop = 100;
+    scroller.dispatchEvent(new Event('scroll'));
+    await waitUntil(() => calls >= 1, { timeout: 2000 });
+
+    // Keep firing scroll events while "holding" in the top zone.
+    for (const scrollTop of [120, 90]) {
+      scroller.scrollTop = scrollTop;
+      scroller.dispatchEvent(new Event('scroll'));
+      await settled();
+    }
+
+    assert.strictEqual(calls, 1, 'only requests history once while within the top zone');
+  });
+
+  test('does not request older history while a load is in flight', async function (assert) {
+    this.items = items(20);
+
+    let calls = 0;
+    this.onLoadOlder = () => {
+      calls += 1;
+    };
+
+    const scroller = await renderScroller();
+    this.set('hasOlder', true);
+    this.set('isLoadingOlder', true);
+    await settled();
+
+    scroller.scrollTop = 100;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+
+    assert.strictEqual(calls, 0, 'does not request a new page while loading');
+  });
+
+  test('loads the next page after the in-flight load finishes when at the top', async function (assert) {
+    this.items = items(20);
+
+    let calls = 0;
+    this.onLoadOlder = () => {
+      calls += 1;
+    };
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 }); // let the initial programmatic scroll release its lock
+
+    this.set('hasOlder', true);
+    this.set('isLoadingOlder', true);
+    await settled();
+
+    // Reach the top while a page is still loading; the request is deferred.
+    scroller.scrollTop = 100;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled(); // let native scroll/scrollend events fully settle
+    assert.strictEqual(calls, 0, 'does not start a concurrent load');
+
+    // When the in-flight load finishes, the next page is requested automatically
+    // without having to scroll down and back up.
+    this.set('isLoadingOlder', false);
+    await settled();
+    await waitUntil(() => calls >= 1, { timeout: 2000 });
+
+    assert.strictEqual(calls, 1, 'requests the next page once loading finishes');
+  });
+
+  test('keeps the anchored message in place when older messages are prepended', async function (assert) {
+    this.items = items(20);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    scroller.scrollTop = 120;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+
+    const before = anchoredNode(scroller);
+    assert.ok(before, 'has an anchored message');
+    const beforeKey = before.dataset.messageKey;
+    const beforeOffset = offsetWithin(scroller, before);
+
+    const older = [{ id: 'old1' }, { id: 'old2' }, { id: 'old3' }];
+    this.set('items', [...older, ...this.items]);
+    await settled();
+
+    const after = scroller.querySelector(`[data-message-key="${beforeKey}"]`);
+    assert.ok(after, 'the anchored message is still rendered');
+    assert.ok(
+      Math.abs(offsetWithin(scroller, after) - beforeOffset) <= 2,
+      `anchor offset preserved (before=${beforeOffset}, after=${offsetWithin(scroller, after)})`
+    );
+  });
+
+  test('keeps the anchored message in place when older messages are prepended and a new message is appended', async function (assert) {
+    this.items = items(20);
+
+    const scroller = await renderScroller();
+    await waitUntil(() => isScrolledToBottom(scroller), { timeout: 2000 });
+
+    scroller.scrollTop = 120;
+    scroller.dispatchEvent(new Event('scroll'));
+    await settled();
+
+    const before = anchoredNode(scroller);
+    assert.ok(before, 'has an anchored message');
+    const beforeKey = before.dataset.messageKey;
+    const beforeOffset = offsetWithin(scroller, before);
+
+    const older = [{ id: 'old1' }, { id: 'old2' }, { id: 'old3' }];
+    this.set('items', [...older, ...this.items, { id: 'new1' }]);
+    await settled();
+
+    const after = scroller.querySelector(`[data-message-key="${beforeKey}"]`);
+    assert.ok(after, 'the anchored message is still rendered');
+    assert.ok(
+      Math.abs(offsetWithin(scroller, after) - beforeOffset) <= 2,
+      `anchor offset preserved (before=${beforeOffset}, after=${offsetWithin(scroller, after)})`
+    );
+  });
+});
diff --git a/tests/integration/modifiers/on-change-test.js b/tests/integration/modifiers/on-change-test.js
new file mode 100644
index 00000000..061e49f4
--- /dev/null
+++ b/tests/integration/modifiers/on-change-test.js
@@ -0,0 +1,61 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, settled } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { tracked } from '@glimmer/tracking';
+
+class State {
+  @tracked counter = 0;
+}
+
+module('Integration | Modifier | on-change', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('runs on install and when the value changes, but not on unrelated rerenders', async function (assert) {
+    this.calls = [];
+    this.value = 'a';
+    this.other = 0;
+    this.handleChange = (value) => this.calls.push(value);
+
+    await render(hbs`
+      <div {{on-change this.value this.handleChange}} data-other={{this.other}}></div>
+    `);
+
+    assert.deepEqual(this.calls, ['a'], 'runs once on install');
+
+    this.set('other', 1);
+    await settled();
+
+    assert.deepEqual(this.calls, ['a'], 'does not rerun on an unrelated rerender');
+
+    this.set('value', 'b');
+    await settled();
+
+    assert.deepEqual(this.calls, ['a', 'b'], 'reruns when the value changes');
+  });
+
+  test('does not rerun when tracked state read by the callback changes', async function (assert) {
+    this.calls = [];
+    this.value = 'a';
+    this.state = new State();
+    this.handleChange = (value) => this.calls.push(`${value}:${this.state.counter}`);
+
+    await render(hbs`
+      <div {{on-change this.value this.handleChange}}></div>
+    `);
+
+    assert.deepEqual(this.calls, ['a:0'], 'runs once on install');
+
+    // The callback reads `state.counter`; changing it must not retrigger the
+    // modifier (which would have reset unrelated state, e.g. the render window).
+    this.state.counter = 1;
+    await settled();
+
+    assert.deepEqual(this.calls, ['a:0'], 'does not rerun when the callback reads changed tracked state');
+
+    this.set('value', 'b');
+    await settled();
+
+    assert.deepEqual(this.calls, ['a:0', 'b:1'], 'reruns when the value changes');
+  });
+});
diff --git a/tests/unit/models/base-channel-test.js b/tests/unit/models/base-channel-test.js
index 47b980aa..5e8d64c1 100644
--- a/tests/unit/models/base-channel-test.js
+++ b/tests/unit/models/base-channel-test.js
@@ -270,6 +270,118 @@ module('Unit | Model | base-channel', function (hooks) {
     assert.notOk(addDateHeadlineStub.calledOnce);
   });
 
+  test('#addMessage assigns a stable key', function (assert) {
+    const channel = new BaseChannel({ account: xmppAccount });
+    const message = new Message({
+      type: 'message-chat', date: new Date(), nickname: 'alice',
+      content: 'hello', id: 'key-1'
+    });
+
+    channel.addMessage(message);
+
+    assert.strictEqual(message.key, JSON.stringify(['alice', 'key-1']), 'keys the transport id by author');
+    const stored = channel.messages.find(item => item.type === 'message-chat');
+    assert.strictEqual(stored.key, JSON.stringify(['alice', 'key-1']));
+  });
+
+  test('#addMessage uses a server stanza id as the key', function (assert) {
+    const channel = new BaseChannel({ account: xmppAccount });
+    const message = new Message({
+      type: 'message-chat', date: new Date(), nickname: 'alice',
+      content: 'hello', id: 'client-id', sid: 'stanza-42'
+    });
+
+    channel.addMessage(message);
+
+    assert.strictEqual(message.key, 'sid:stanza-42');
+  });
+
+  test('#addMessage keeps the same transport id from different authors', function (assert) {
+    const channel = new BaseChannel({ account: xmppAccount });
+
+    channel.addMessage(new Message({
+      type: 'message-chat', date: new Date(), nickname: 'alice',
+      content: 'from alice', id: 'shared'
+    }));
+    channel.addMessage(new Message({
+      type: 'message-chat', date: new Date(), nickname: 'bob',
+      content: 'from bob', id: 'shared'
+    }));
+
+    assert.strictEqual(
+      channel.messages.filter(item => item.type === 'message-chat').length,
+      2,
+      'keeps both messages despite the shared id'
+    );
+  });
+
+  test('#addMessage derives a key for id-less messages', function (assert) {
+    const channel = new BaseChannel({ account: xmppAccount });
+    const message = new Message({
+      type: 'message-chat', date: new Date('2024-01-02T03:04:05.678Z'),
+      nickname: 'alice', content: 'hello'
+    });
+
+    channel.addMessage(message);
+
+    assert.ok(message.key.startsWith('1704164645678-'), `derives a composite key (${message.key})`);
+  });
+
+  test('#addMessage ignores duplicates with the same id', function (assert) {
+    const channel = new BaseChannel({ account: xmppAccount });
+    const date = new Date();
+
+    channel.addMessage(new Message({
+      type: 'message-chat', date, nickname: 'alice', content: 'hello', id: 'dup-1'
+    }));
+    channel.addMessage(new Message({
+      type: 'message-chat', date, nickname: 'alice', content: 'hello', id: 'dup-1'
+    }));
+
+    assert.strictEqual(
+      channel.messages.filter(item => item.type === 'message-chat').length,
+      1,
+      'only adds the message once'
+    );
+  });
+
+  test('#addMessage dedupes id-less messages with identical timestamp and content', function (assert) {
+    const channel = new BaseChannel({ account: xmppAccount });
+    const date = new Date('2024-01-02T03:04:05.678Z');
+
+    channel.addMessage(new Message({
+      type: 'message-chat', date, nickname: 'alice', content: 'hello'
+    }));
+    channel.addMessage(new Message({
+      type: 'message-chat', date, nickname: 'alice', content: 'hello'
+    }));
+
+    assert.strictEqual(
+      channel.messages.filter(item => item.type === 'message-chat').length,
+      1,
+      'only adds the message once'
+    );
+  });
+
+  test('#addMessage keeps id-less messages with the same content at different times', function (assert) {
+    const channel = new BaseChannel({ account: xmppAccount });
+
+    channel.addMessage(new Message({
+      type: 'message-chat', date: new Date('2024-01-02T03:04:05.678Z'),
+      nickname: 'alice', content: 'hello'
+    }));
+    channel.addMessage(new Message({
+      type: 'message-chat', date: new Date('2024-01-02T03:04:06.678Z'),
+      nickname: 'alice', content: 'hello'
+    }));
+
+    assert.strictEqual(
+      channel.messages.filter(item => item.type === 'message-chat').length,
+      2,
+      'keeps both messages'
+    );
+  });
+
   //
   // replaceMessage
   //
diff --git a/tests/unit/services/coms-test.js b/tests/unit/services/coms-test.js
index dc1ab76c..e929f089 100644
--- a/tests/unit/services/coms-test.js
+++ b/tests/unit/services/coms-test.js
@@ -5,9 +5,25 @@ import Channel from 'hyperchannel/models/channel';
 import Message from 'hyperchannel/models/message';
 import { ircAccount, xmppAccount } from '../../fixtures/accounts';
 
+function jsonResponse (body) {
+  return Promise.resolve({ json: () => Promise.resolve(body) });
+}
+
+function archivePage (messages, previous) {
+  return { today: { messages, previous } };
+}
+
+function archiveMessage (id, from = 'alice', text = `message ${id}`) {
+  return { id, from, text, timestamp: '2024-01-05T00:00:00.000Z' };
+}
+
 module('Unit | Service | coms', function (hooks) {
   setupTest(hooks);
 
+  hooks.afterEach(function () {
+    sinon.restore();
+  });
+
   test('#connectServer calls connect on the appropriate transport service', function (assert) {
     const ircStub = { connect: function () {} };
     const connectStub = sinon.stub(ircStub, 'connect');
@@ -246,4 +262,66 @@ module('Unit | Service | coms', function (hooks) {
     assert.strictEqual(channel.roomInfoData.occupants.value, 12);
     assert.strictEqual(channel.roomConfigData.changesubject.value, true);
   });
+
+  test('#loadOlderMessages returns an empty result when there is no cursor', async function (assert) {
+    const channel = new Channel({ account: ircAccount, name: '#kosmos' });
+    const service = this.owner.factoryFor('service:coms').create();
+
+    const result = await service.loadOlderMessages(channel);
+
+    assert.deepEqual(result, { added: 0, hasMore: false }, 'reports nothing to add');
+    assert.false(channel.hasOlderMessages, 'leaves hasOlderMessages false');
+  });
+
+  test('#loadOlderMessages loads a page, filters duplicates, and advances the cursor', async function (assert) {
+    const channel = new Channel({ account: ircAccount, name: '#kosmos' });
+    channel.searchedPreviousLogsUntilDate = '2024-01-05';
+
+    // Pre-existing message that the archive page will deliver again.
+    channel.addMessage(new Message({
+      type: 'message-chat', date: new Date(), nickname: 'alice',
+      content: 'message dup', id: 'dup'
+    }));
+
+    const messages = [
+      archiveMessage('dup', 'alice', 'message dup'),
+      ...Array.from({ length: 30 }, (_, i) => archiveMessage(`m${i}`))
+    ];
+
+    const fetchStub = sinon.stub(globalThis, 'fetch').callsFake(url => {
+      assert.true(url.endsWith('/2024-01-05'), `requests the cursor date (${url})`);
+      return jsonResponse(archivePage(messages, '2024-01-04'));
+    });
+
+    const service = this.owner.factoryFor('service:coms').create();
+    const result = await service.loadOlderMessages(channel);
+
+    assert.true(fetchStub.calledOnce, 'fetches a single page once it has enough messages');
+    assert.strictEqual(result.added, 30, 'counts only the newly added messages');
+    assert.true(result.hasMore, 'reports that more history is available');
+    assert.strictEqual(channel.searchedPreviousLogsUntilDate, '2024-01-04', 'advances the cursor');
+    assert.true(channel.hasOlderMessages, 'updates hasOlderMessages');
+  });
+
+  test('#loadOlderMessages follows the cursor across pages until history is exhausted', async function (assert) {
+    const channel = new Channel({ account: ircAccount, name: '#kosmos' });
+    channel.searchedPreviousLogsUntilDate = '2024-01-05';
+
+    const firstPage = Array.from({ length: 2 }, (_, i) => archiveMessage(`first${i}`));
+    const secondPage = Array.from({ length: 30 }, (_, i) => archiveMessage(`second${i}`));
+
+    const fetchStub = sinon.stub(globalThis, 'fetch').callsFake(url => {
+      if (url.endsWith('/2024-01-05')) return jsonResponse(archivePage(firstPage, '2024-01-04'));
+      if (url.endsWith('/2024-01-04')) return jsonResponse(archivePage(secondPage, null));
+      throw new Error(`unexpected URL ${url}`);
+    });
+
+    const service = this.owner.factoryFor('service:coms').create();
+    const result = await service.loadOlderMessages(channel);
+
+    assert.strictEqual(fetchStub.callCount, 2, 'fetches the next page using the previous cursor');
+    assert.strictEqual(result.added, 32, 'adds messages from both pages');
+    assert.false(result.hasMore, 'reports exhaustion once there is no previous cursor');
+    assert.false(channel.hasOlderMessages, 'clears hasOlderMessages at the end of history');
+  });
 });
diff --git a/tests/unit/utils/chat-scroll-state-test.js b/tests/unit/utils/chat-scroll-state-test.js
new file mode 100644
index 00000000..b45bbd01
--- /dev/null
+++ b/tests/unit/utils/chat-scroll-state-test.js
@@ -0,0 +1,236 @@
+import { module, test } from 'qunit';
+import {
+  ScrollAction,
+  createScrollState,
+  isAtBottom,
+  isNearTop,
+  reduceScrollState,
+} from 'hyperchannel/utils/chat-scroll-state';
+
+const metrics = (scrollTop, scrollHeight, clientHeight) => ({
+  scrollTop,
+  scrollHeight,
+  clientHeight,
+});
+
+module('Unit | Utility | chat scroll state', function () {
+  module('isAtBottom', function () {
+    test('is true when the content fits entirely', function (assert) {
+      assert.true(isAtBottom(metrics(0, 300, 500)));
+    });
+
+    test('is true within the threshold of the bottom', function (assert) {
+      assert.true(isAtBottom(metrics(700, 1250, 500))); // 50px remaining
+    });
+
+    test('is false when scrolled away from the bottom', function (assert) {
+      assert.false(isAtBottom(metrics(400, 1250, 500))); // 350px remaining
+    });
+  });
+
+  module('isNearTop', function () {
+    test('is false when the content fits entirely', function (assert) {
+      assert.false(isNearTop(metrics(0, 300, 500)));
+    });
+
+    test('is true within the threshold of the top', function (assert) {
+      assert.true(isNearTop(metrics(150, 1250, 500)));
+    });
+
+    test('is false away from the top', function (assert) {
+      assert.false(isNearTop(metrics(600, 1250, 500)));
+    });
+  });
+
+  module('reduceScrollState', function () {
+    test('reset returns to a sticky bottom state and scrolls down', function (assert) {
+      const dirty = {
+        ...createScrollState(),
+        atBottom: false,
+        stickToBottom: false,
+        newMessageCount: 4,
+        showJumpToLatest: true,
+      };
+
+      const { state, effects } = reduceScrollState(dirty, { type: 'reset' });
+
+      assert.true(state.stickToBottom);
+      assert.strictEqual(state.newMessageCount, 0);
+      assert.strictEqual(state.showJumpToLatest, false);
+      assert.deepEqual(effects, [ScrollAction.ScrollToBottom]);
+    });
+
+    test('scroll-to-bottom keeps the detached state until the scroll settles', function (assert) {
+      const detached = {
+        ...createScrollState(),
+        atBottom: false,
+        stickToBottom: false,
+        newMessageCount: 2,
+        showJumpToLatest: true,
+      };
+
+      const { state, effects } = reduceScrollState(detached, { type: 'scroll-to-bottom' });
+
+      assert.true(state.stickToBottom);
+      assert.false(state.atBottom, 'stays detached until the scroll finishes');
+      assert.strictEqual(state.newMessageCount, 0);
+      assert.strictEqual(state.showJumpToLatest, false);
+      assert.deepEqual(effects, [ScrollAction.ScrollToBottom]);
+    });
+
+    test('scroll-settled marks the list at the bottom while sticking', function (assert) {
+      const detached = { ...createScrollState(), atBottom: false, stickToBottom: true };
+
+      const { state, effects } = reduceScrollState(detached, { type: 'scroll-settled' });
+
+      assert.true(state.atBottom);
+      assert.deepEqual(effects, []);
+    });
+
+    test('scroll-settled does nothing when not sticking to the bottom', function (assert) {
+      const detached = { ...createScrollState(), atBottom: false, stickToBottom: false };
+
+      const { state } = reduceScrollState(detached, { type: 'scroll-settled' });
+
+      assert.false(state.atBottom);
+    });
+
+    test('scroll-settled stays detached when the target was not reached', function (assert) {
+      const detached = { ...createScrollState(), atBottom: false, stickToBottom: true };
+
+      const { state, effects } = reduceScrollState(detached, {
+        type: 'scroll-settled',
+        reached: false,
+      });
+
+      assert.false(state.atBottom, 'does not claim to be at the bottom');
+      assert.true(state.stickToBottom, 'keeps the stickiness intent');
+      assert.deepEqual(effects, []);
+    });
+
+    test('a user scroll to the bottom re-enables stickiness and clears the pill', function (assert) {
+      const detached = {
+        ...createScrollState(),
+        stickToBottom: false,
+        newMessageCount: 3,
+        showJumpToLatest: true,
+      };
+
+      const { state, effects } = reduceScrollState(detached, {
+        type: 'user-scroll',
+        metrics: metrics(750, 1250, 500),
+      });
+
+      assert.true(state.stickToBottom);
+      assert.true(state.atBottom);
+      assert.strictEqual(state.newMessageCount, 0);
+      assert.strictEqual(state.showJumpToLatest, false);
+      assert.deepEqual(effects, []);
+    });
+
+    test('a user scroll away from the bottom detaches and captures an anchor', function (assert) {
+      const { state, effects } = reduceScrollState(createScrollState(), {
+        type: 'user-scroll',
+        metrics: metrics(300, 1250, 500),
+      });
+
+      assert.false(state.stickToBottom);
+      assert.false(state.atBottom);
+      assert.deepEqual(effects, [ScrollAction.CaptureAnchor]);
+    });
+
+    test('appended content scrolls to the bottom while sticky', function (assert) {
+      const { effects } = reduceScrollState(createScrollState(), {
+        type: 'content-appended',
+        count: 1,
+      });
+
+      assert.deepEqual(effects, [ScrollAction.ScrollToBottom]);
+    });
+
+    test('appended content while detached counts new messages', function (assert) {
+      const detached = { ...createScrollState(), stickToBottom: false };
+
+      const first = reduceScrollState(detached, { type: 'content-appended', count: 2 });
+      const second = reduceScrollState(first.state, { type: 'content-appended', count: 1 });
+
+      assert.strictEqual(second.state.newMessageCount, 3);
+      assert.true(second.state.showJumpToLatest);
+      assert.deepEqual(second.effects, []);
+    });
+
+    test('resized content keeps the anchor while detached', function (assert) {
+      const detached = { ...createScrollState(), stickToBottom: false };
+
+      const { effects } = reduceScrollState(detached, { type: 'content-resized' });
+
+      assert.deepEqual(effects, [ScrollAction.RestoreAnchor]);
+    });
+
+    test('prepended older messages restore the anchor', function (assert) {
+      const detached = { ...createScrollState(), stickToBottom: false };
+
+      const { effects } = reduceScrollState(detached, { type: 'older-prepended' });
+
+      assert.deepEqual(effects, [ScrollAction.RestoreAnchor]);
+    });
+
+    test('prepended older messages stay at the bottom while sticking', function (assert) {
+      // A stale anchor from earlier history reading must not yank the viewport
+      // back up once the user has returned to the bottom.
+      const sticky = {
+        ...createScrollState(),
+        atBottom: true,
+        stickToBottom: true,
+        anchor: { key: 'old', offset: 0 },
+      };
+
+      const { state, effects } = reduceScrollState(sticky, { type: 'older-prepended' });
+
+      assert.deepEqual(effects, [ScrollAction.ScrollToBottom]);
+      assert.true(state.stickToBottom);
+    });
+
+    test('reaching the top loads older messages without anchoring while stuck to the bottom', function (assert) {
+      const { effects } = reduceScrollState(createScrollState(), {
+        type: 'reached-top',
+        hasOlder: true,
+        isLoadingOlder: false,
+      });
+
+      assert.deepEqual(effects, [ScrollAction.LoadOlder]);
+    });
+
+    test('reaching the top captures an anchor and loads older messages while reading history', function (assert) {
+      const detached = { ...createScrollState(), stickToBottom: false };
+
+      const { effects } = reduceScrollState(detached, {
+        type: 'reached-top',
+        hasOlder: true,
+        isLoadingOlder: false,
+      });
+
+      assert.deepEqual(effects, [ScrollAction.CaptureAnchor, ScrollAction.LoadOlder]);
+    });
+
+    test('reaching the top does not load when there is nothing older', function (assert) {
+      const { effects } = reduceScrollState(createScrollState(), {
+        type: 'reached-top',
+        hasOlder: false,
+        isLoadingOlder: false,
+      });
+
+      assert.deepEqual(effects, []);
+    });
+
+    test('reaching the top does not load while a load is in flight', function (assert) {
+      const { effects } = reduceScrollState(createScrollState(), {
+        type: 'reached-top',
+        hasOlder: true,
+        isLoadingOlder: true,
+      });
+
+      assert.deepEqual(effects, []);
+    });
+  });
+});
diff --git a/tests/unit/utils/message-key-test.js b/tests/unit/utils/message-key-test.js
new file mode 100644
index 00000000..4a10a67b
--- /dev/null
+++ b/tests/unit/utils/message-key-test.js
@@ -0,0 +1,91 @@
+import { module, test } from 'qunit';
+import { messageKey, dateHeadlineKey } from 'hyperchannel/utils/message-key';
+import Message from 'hyperchannel/models/message';
+
+function chatMessage (props) {
+  return new Message({
+    type: 'message-chat',
+    date: new Date('2024-01-02T03:04:05.678Z'),
+    nickname: 'alice',
+    content: 'hello world',
+    ...props
+  });
+}
+
+module('Unit | Utility | message key', function () {
+  test('scopes a transport id by author', function (assert) {
+    const message = chatMessage({ id: 'abc123' });
+
+    assert.strictEqual(messageKey(message), JSON.stringify(['alice', 'abc123']));
+  });
+
+  test('produces CSS-selector-safe keys', function (assert) {
+    // Keys are used as `data-message-key` values and matched with a selector
+    // built via `CSS.escape`, which rewrites U+0000 to U+FFFD. A key containing
+    // NUL would therefore never be found, silently breaking anchor restoration.
+    const messages = [
+      chatMessage({ id: 'abc123' }),
+      chatMessage({ id: 'has "quote" and \\backslash' }),
+      chatMessage(),
+      chatMessage({ id: 'abc123', sid: 'stanza-9' }),
+    ];
+
+    for (const message of messages) {
+      const key = messageKey(message);
+      assert.notOk(key.includes('\u0000'), `"${key}" contains no NUL`);
+    }
+  });
+
+  test('uses a server stanza id as-is', function (assert) {
+    const message = chatMessage({ id: 'abc123', sid: 'stanza-9' });
+
+    assert.strictEqual(messageKey(message), 'sid:stanza-9');
+  });
+
+  test('does not collapse the same id sent by different authors', function (assert) {
+    const alice = chatMessage({ id: 'shared' });
+    const bob = chatMessage({ nickname: 'bob', id: 'shared' });
+
+    assert.notStrictEqual(messageKey(alice), messageKey(bob));
+  });
+
+  test('derives a key from the timestamp and content when there is no id', function (assert) {
+    const message = chatMessage();
+
+    const key = messageKey(message);
+
+    assert.ok(key.startsWith('1704164645678-'), `includes the timestamp (${key})`);
+    assert.notStrictEqual(key, '1704164645678-', 'includes a content hash');
+  });
+
+  test('derives the same key for identical id-less messages', function (assert) {
+    assert.strictEqual(messageKey(chatMessage()), messageKey(chatMessage()));
+  });
+
+  test('derives different keys for different content', function (assert) {
+    const first = messageKey(chatMessage());
+    const second = messageKey(chatMessage({ content: 'goodbye world' }));
+
+    assert.notStrictEqual(first, second);
+  });
+
+  test('derives different keys for different timestamps', function (assert) {
+    const first = messageKey(chatMessage());
+    const second = messageKey(chatMessage({ date: new Date('2024-01-02T03:04:06.678Z') }));
+
+    assert.notStrictEqual(first, second);
+  });
+
+  test('derives different keys for different authors', function (assert) {
+    const first = messageKey(chatMessage());
+    const second = messageKey(chatMessage({ nickname: 'bob' }));
+
+    assert.notStrictEqual(first, second);
+  });
+
+  test('date headlines get a date- prefixed key', function (assert) {
+    const date = new Date('2024-01-02T00:00:00.000Z');
+
+    assert.strictEqual(dateHeadlineKey(date), `date-${date.getTime()}`);
+  });
+});