@design.estate/dees-catalog 6.9.1 → 6.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "6.9.1",
+  "version": "6.10.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/readme.md

@@ -1815,15 +1815,17 @@ chat.applyDelta({
 });
 ```
 
-Key props: `messages`, `permissions`, `questions`, `status`, `usage`, `todos`/`showTodosPanel`, `sessionMetrics`, `scratchpad`/`scratchpadBusy`/`scratchpadError`, `sessionIntelligenceEnabled`/`intelligenceExchanges`/`intelligenceBusy`/`intelligenceError`, `showSessionSidebar`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `suggestions`, `account`/`accountOptions`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `mode`/`modeOptions`, `toolRegistry`. `suggestions` is forwarded unchanged to the controlled composer. Account options use human-readable `label` values and opaque stable `value` identifiers. The status line renders inside the transcript column (it never pushes between the session panel and the composer), and both the toolbar and the docked composer cast a subtle shadow over the scrolling messages.
+Key props: `messages`, `permissions`, `questions`, `status`, `transcriptKey`, `hasEarlierMessages`/`loadingEarlier`, `usage`, `todos`/`showTodosPanel`, `sessionMetrics`, `scratchpad`/`scratchpadBusy`/`scratchpadError`, `sessionIntelligenceEnabled`/`intelligenceExchanges`/`intelligenceBusy`/`intelligenceError`, `showSessionSidebar`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `suggestions`, `account`/`accountOptions`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `mode`/`modeOptions`, `toolRegistry`. `suggestions` is forwarded unchanged to the controlled composer. Account options use human-readable `label` values and opaque stable `value` identifiers. The status line renders inside the transcript column (it never pushes between the session panel and the composer), and both the toolbar and the docked composer cast a subtle shadow over the scrolling messages.
 
 A **session side panel** shows Tasks, Tools & Subagents, Tokens, Session Scratchpad, and Session Intelligence next to the transcript. Its sections form a single-open accordion: opening one collapses the others, clicking the open heading collapses all, and each expanded section owns its scrolling while every heading remains visible. Collapsed sections retain their region wrapper but omit the content subtree until expansion; sidebar-owned scratchpad and intelligence drafts survive that lazy remount. Tools & Subagents separates active calls from terminal history and derives both directly from top-level tool messages still present in the host's retained transcript window; evicted calls are not cached. Long activity labels and descriptions use a 40px right-edge fade instead of ellipses, reveal the full line on hover, and run through once after the two-second delay when their section has measurable width. Session Intelligence keeps its exchange history scrollable above a docked, chat-style question composer. Set `.todos` explicitly, or leave it empty and the chat derives tasks from the newest todo tool call in `messages`; `showTodosPanel={false}` hides only that section. Unknown token metrics remain absent. The toolbar controls the session panel; host-owned navigation controls belong outside the chat component. In narrow containers the session panel becomes an accessible overlay; when the toolbar is disabled, an inline Session details control keeps it reachable. `showSessionSidebar={false}` disables the complete panel. Methods: `applyDelta()`, `focusComposer()`, `clearComposer()`, `scrollToBottom()`. Events (also from children, all composed): `harness-send`, `harness-steer`, `harness-abort`, `harness-input`, `harness-attachments-change`, `harness-attachment-error`, `harness-account-change`, `harness-model-change`, `harness-mode-change`, `harness-permission-response`, `harness-question-response`, `harness-subtask-open`, `harness-scratchpad-save`, `harness-session-intelligence-ask`.
 
+History paging adds the composed child event `harness-load-earlier`.
+
 #### `DeesHarnessMessageList`
 
-Scrollable streaming-safe log. Up to 40 canonical entries (`messages` + `permissions` + `questions`) keep keyed full-timeline DOM; larger inputs activate a measured variable-height window with 800px overscan and return to full rendering when they shrink. Rows outside that overscanned window are unmounted, except focused rows, both endpoints of an active selection, and fullscreen-owned cards, which remain mounted until the interaction ends; threshold-mode changes are likewise deferred while protected DOM is active. `applyDelta()` targets a mounted message or mutates its offscreen backing model. Markdown output, disclosures, reasoning expansion, question drafts, permission choices, diff layout, terminal scroll state, and live nested-transcript state restore from retained data after an actual eviction. Hosts may pass a stable mutable `IHarnessTranscriptViewState` through `viewState`; it must contain `messages`, `permissions`, and `questions` maps. The list creates entries for current canonical IDs, deletes records for removed IDs, and session-keys and prunes live nested-subtask records. Without that prop, equivalent state remains list-local.
+Scrollable streaming-safe log. Up to 40 canonical entries (`messages` + `permissions` + `questions`) keep keyed full-timeline DOM; larger inputs activate a measured variable-height window with 800px overscan and return to full rendering when they shrink. Rows outside that overscanned window are unmounted, except focused rows, both endpoints of an active selection, and fullscreen-owned cards, which remain mounted until the interaction ends; threshold-mode changes are likewise deferred while protected DOM is active. `applyDelta()` targets a mounted message or mutates its offscreen backing model. Markdown output, disclosures, reasoning expansion, question drafts, permission choices, diff layout, terminal scroll state, and live nested-transcript state restore from retained data after an actual eviction. Hosts may pass a stable mutable `IHarnessTranscriptViewState` through `viewState`; it must contain `messages`, `permissions`, and `questions` maps. The list creates entries for current canonical IDs, deletes records for removed IDs, and session-keys and prunes live nested-subtask records. Without that prop, equivalent state remains list-local. Set `transcriptKey` to the stable identity of the displayed transcript so reused components reset scroll-local state between chats. When `hasEarlierMessages` is true, an intentional upward gesture reaching the top emits one bubbling, composed `harness-load-earlier` event. Set `loadingEarlier` while handling it; the next `true` to `false` transition rearms the event. Initial rendering, anchor restoration, and other component-owned scrolling never emit it.
 
-Producers with authoritative source chronology can set `IHarnessMessage.order` to `{ messageIndex, partIndex }`; explicitly ordered messages retain that relative order while timestamps continue to place legacy messages and ancillary cards. Consecutive tool calls use one generic responsive-grid pipeline at their chronological position, partitioned by descriptor layout: compact tools share rows with compact tools, subagents share rows only with subagents, and terminal plus file-write cards span a whole row. Consecutive same-layout runs are always capped at four cards per group row, even when their tool kinds differ. Columns respond to transcript content width rather than the viewport, and status changes never regroup cards. Untouched projected subtask cards collapse individually on completion with the normal disclosure animation; other cards retain their descriptor or user-selected disclosure state. Auto-follow responds to streamed growth but does not repeatedly repin while a disclosure shrinks. Permission requests, questions, and nested-stream limits behave as before. Props: `messages`, `permissions`/`permissionsBusy`, `questions`, `status`, `viewState`, `autoFollow`, `hideScrollbar`, `fadeScrollEdges`, `showRoles`, `showTimestamps`, `allowSubtaskStreams`, `emptyTitle`/`emptyText` (+ `slot="empty"`). Native browser find and selection cover the mounted window; hosts that require complete-history search or copy should operate on their canonical `messages`, `permissions`, and `questions` models.
+Producers with authoritative source chronology can set `IHarnessMessage.order` to `{ messageIndex, partIndex }`; explicitly ordered messages retain that relative order while timestamps continue to place legacy messages and ancillary cards. Consecutive tool calls use one generic responsive-grid pipeline at their chronological position, partitioned by descriptor layout: compact tools share rows with compact tools, subagents share rows only with subagents, and terminal plus file-write cards span a whole row. Consecutive same-layout runs are always capped at four cards per group row, even when their tool kinds differ. Columns respond to transcript content width rather than the viewport, and status changes never regroup cards. Untouched projected subtask cards collapse individually on completion with the normal disclosure animation; other cards retain their descriptor or user-selected disclosure state. Auto-follow responds to streamed growth but does not repeatedly repin while a disclosure shrinks. Permission requests, questions, and nested-stream limits behave as before. Props: `messages`, `permissions`/`permissionsBusy`, `questions`, `status`, `viewState`, `transcriptKey`, `hasEarlierMessages`, `loadingEarlier`, `autoFollow`, `hideScrollbar`, `fadeScrollEdges`, `showRoles`, `showTimestamps`, `allowSubtaskStreams`, `emptyTitle`/`emptyText` (+ `slot="empty"`). Native browser find and selection cover the mounted window; hosts that require complete-history search or copy should operate on their canonical `messages`, `permissions`, and `questions` models.
 
 #### `DeesHarnessMessage`
 

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '6.9.1',
+  version: '6.10.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.ts

@@ -72,6 +72,15 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor status: IHarnessStatus = { type: 'idle' };
 
+  @property()
+  accessor transcriptKey: string = '';
+
+  @property({ type: Boolean })
+  accessor hasEarlierMessages: boolean = false;
+
+  @property({ type: Boolean })
+  accessor loadingEarlier: boolean = false;
+
   @property({ attribute: false })
   accessor usage: IHarnessUsage = {};
 
@@ -575,6 +584,9 @@ export class DeesHarnessChat extends DeesElement {
             .permissionsBusy=${this.disabled}
             .questions=${this.questions}
             .status=${this.status}
+            .transcriptKey=${this.transcriptKey}
+            .hasEarlierMessages=${this.hasEarlierMessages}
+            .loadingEarlier=${this.loadingEarlier}
             .showRoles=${this.showRoles}
             .showTimestamps=${this.showTimestamps}
             .toolRegistry=${this.toolRegistry}

package/ts_web/elements/00group-harness/dees-harness-message-list/dees-harness-message-list.ts

@@ -40,6 +40,8 @@ declare global {
 }
 
 const pinThresholdPx = 48;
+const loadEarlierThresholdPx = 24;
+const scrollIntentSettlementMs = 250;
 const virtualizationThreshold = 40;
 const virtualOverscanPx = 800;
 const virtualGapPx = 8;
@@ -112,6 +114,16 @@ export class DeesHarnessMessageList extends DeesElement {
   @property({ type: Boolean })
   accessor autoFollow: boolean = true;
 
+  /** Stable host-owned identity for one transcript and its scroll context. */
+  @property()
+  accessor transcriptKey: string = '';
+
+  @property({ type: Boolean })
+  accessor hasEarlierMessages: boolean = false;
+
+  @property({ type: Boolean })
+  accessor loadingEarlier: boolean = false;
+
   @property({ type: Boolean })
   accessor hideScrollbar: boolean = false;
 
@@ -200,6 +212,16 @@ export class DeesHarnessMessageList extends DeesElement {
   private virtualizationDisablePending = false;
   private virtualizationActivationFrame: number | null = null;
   private selectionChangeListening = false;
+  private loadEarlierLatched = false;
+  private loadingEarlierObserved = false;
+  private earlierScrollIntent = false;
+  private scrollbarGestureActive = false;
+  private touchScrollY: number | undefined;
+  private scrollIntentTimer: ReturnType<typeof setTimeout> | undefined;
+  private programmaticScrollTop: number | undefined;
+  private programmaticScrollGeneration = 0;
+  private programmaticScrollFrame: number | null = null;
+  private programmaticScrollSecondFrame: number | null = null;
 
   public static styles = [
     themeDefaultStyles,
@@ -492,6 +514,20 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
     super.willUpdate(changedProperties);
+    if (changedProperties.has('transcriptKey')) this.resetTranscriptContext();
+    if (changedProperties.has('hasEarlierMessages') && !this.hasEarlierMessages) {
+      this.loadEarlierLatched = false;
+      this.loadingEarlierObserved = false;
+      this.clearEarlierScrollIntent();
+    }
+    if (changedProperties.has('loadingEarlier')) {
+      const wasLoadingEarlier = changedProperties.get('loadingEarlier') === true;
+      if (this.loadingEarlier) this.loadingEarlierObserved = true;
+      else if (wasLoadingEarlier && this.loadingEarlierObserved) {
+        this.loadEarlierLatched = false;
+        this.loadingEarlierObserved = false;
+      }
+    }
     if (changedProperties.has('viewState') && this.viewState) {
       this.clearTranscriptViewState(this.localViewState);
     }
@@ -503,6 +539,7 @@ export class DeesHarnessMessageList extends DeesElement {
       || changedProperties.has('questions')
       || changedProperties.has('toolRegistry')
       || changedProperties.has('viewState')
+      || changedProperties.has('transcriptKey')
       || registryChanged
     ) {
       this.rebuildTimeline();
@@ -766,8 +803,12 @@ export class DeesHarnessMessageList extends DeesElement {
       <div
         class=${`scroll ${this.hideScrollbar ? 'hideScrollbar' : ''} ${this.scrollFadeTop ? 'fadeTop' : ''} ${this.scrollFadeBottom ? 'fadeBottom' : ''}`}
         @scroll=${this.handleScroll}
+        @scrollend=${this.handleScrollEnd}
         @wheel=${this.handleUserScrollIntent}
+        @touchstart=${this.handleTouchStart}
         @touchmove=${this.handleUserScrollIntent}
+        @touchend=${this.handleTouchEnd}
+        @touchcancel=${this.handleTouchCancel}
         @pointerdown=${this.handlePointerDown}
         @pointerup=${this.handlePointerUp}
         @pointercancel=${this.handlePointerCancel}
@@ -1042,8 +1083,7 @@ export class DeesHarnessMessageList extends DeesElement {
     if (!this.autoFollow || this.userUnpinned) return;
     const container = this.scrollContainer;
     if (!container) return;
-    container.scrollTop = container.scrollHeight;
-    this.lastObservedScrollTop = container.scrollTop;
+    this.setProgrammaticScrollTop(container, container.scrollHeight);
   };
 
   private followAfterContentChange(): void {
@@ -1068,26 +1108,213 @@ export class DeesHarnessMessageList extends DeesElement {
   }
 
   private handleUserScrollIntent = (event: Event): void => {
-    if (event.composedPath().some(
-      (candidate) => candidate instanceof DeesHarnessMessageList && candidate !== this,
-    )) return;
+    if (this.eventComesFromNestedMessageList(event)) return;
     if (event.type === 'wheel') {
       this.cancelFullAnchorRestore();
-      if ((event as WheelEvent).deltaY >= 0) return;
+      const deltaY = (event as WheelEvent).deltaY;
+      if (deltaY < 0) {
+        this.armEarlierScrollIntent();
+        this.requestEarlierIfAtTop();
+        this.markUserUnpinned();
+      } else if (deltaY > 0) {
+        this.clearEarlierScrollIntent();
+      }
+      return;
     }
-    if (
-      event.type === 'keydown'
-      && !['ArrowUp', 'PageUp', 'Home'].includes((event as KeyboardEvent).key)
-    ) {
-      if (['ArrowDown', 'PageDown', 'End', ' '].includes((event as KeyboardEvent).key)) {
+    if (event.type === 'keydown') {
+      if (this.keyboardEventOriginIsInteractive(event as KeyboardEvent)) return;
+      const key = (event as KeyboardEvent).key;
+      if (['ArrowUp', 'PageUp', 'Home'].includes(key)) {
+        this.cancelFullAnchorRestore();
+        this.armEarlierScrollIntent();
+        this.requestEarlierIfAtTop();
+        this.markUserUnpinned();
+      } else if (['ArrowDown', 'PageDown', 'End', ' '].includes(key)) {
+        this.clearEarlierScrollIntent();
         this.cancelFullAnchorRestore();
       }
       return;
     }
-    if (event.type === 'pointerdown' && event.target !== this.scrollContainer) return;
-    this.cancelFullAnchorRestore();
+    if (event.type === 'touchmove') {
+      const currentY = (event as TouchEvent).touches[0]?.clientY;
+      const previousY = this.touchScrollY;
+      this.touchScrollY = currentY;
+      if (currentY === undefined || previousY === undefined) return;
+      if (currentY > previousY + 0.5) {
+        this.armEarlierScrollIntent();
+        this.requestEarlierIfAtTop();
+      } else if (currentY < previousY - 0.5) {
+        this.clearEarlierScrollIntent();
+      } else {
+        return;
+      }
+      this.cancelFullAnchorRestore();
+      this.markUserUnpinned();
+      return;
+    }
+    if (event.type === 'pointerdown') {
+      if ((event as PointerEvent).button !== 0) return;
+      if (event.target !== this.scrollContainer) return;
+      this.scrollbarGestureActive = true;
+      this.cancelFullAnchorRestore();
+      this.markUserUnpinned();
+    }
+  };
+
+  private markUserUnpinned(): void {
     this.userUnpinned = true;
     this.measurementAnchor = undefined;
+  }
+
+  private eventComesFromNestedMessageList(eventArg: Event): boolean {
+    return eventArg.composedPath().some(
+      (candidate) => candidate instanceof DeesHarnessMessageList && candidate !== this,
+    );
+  }
+
+  private keyboardEventOriginIsInteractive(eventArg: KeyboardEvent): boolean {
+    return eventArg.composedPath().some((candidate) => (
+      candidate instanceof HTMLElement
+      && candidate !== this
+      && (
+        candidate.isContentEditable
+        || candidate.matches('input, textarea, select, button, [contenteditable]')
+      )
+    ));
+  }
+
+  private armEarlierScrollIntent(): void {
+    this.earlierScrollIntent = true;
+    this.scheduleScrollIntentSettlement();
+  }
+
+  private scheduleScrollIntentSettlement(): void {
+    if (this.scrollIntentTimer) clearTimeout(this.scrollIntentTimer);
+    this.scrollIntentTimer = setTimeout(() => {
+      this.scrollIntentTimer = undefined;
+      this.earlierScrollIntent = false;
+    }, scrollIntentSettlementMs);
+  }
+
+  private clearEarlierScrollIntent(): void {
+    if (this.scrollIntentTimer) clearTimeout(this.scrollIntentTimer);
+    this.scrollIntentTimer = undefined;
+    this.earlierScrollIntent = false;
+  }
+
+  private requestEarlierIfAtTop(): void {
+    const container = this.scrollContainer;
+    if (
+      !container
+      || container.scrollTop > loadEarlierThresholdPx
+      || !this.hasEarlierMessages
+      || this.loadingEarlier
+      || this.loadEarlierLatched
+    ) return;
+    this.loadEarlierLatched = true;
+    this.clearEarlierScrollIntent();
+    this.dispatchEvent(new CustomEvent('harness-load-earlier', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private resetLoadEarlierState(): void {
+    this.loadEarlierLatched = false;
+    this.loadingEarlierObserved = false;
+    this.scrollbarGestureActive = false;
+    this.touchScrollY = undefined;
+    this.clearEarlierScrollIntent();
+  }
+
+  private setProgrammaticScrollTop(containerArg: HTMLElement, topArg: number): void {
+    this.clearProgrammaticScrollMarker();
+    const generation = ++this.programmaticScrollGeneration;
+    containerArg.scrollTop = topArg;
+    this.programmaticScrollTop = containerArg.scrollTop;
+    this.lastObservedScrollTop = containerArg.scrollTop;
+    this.programmaticScrollFrame = requestAnimationFrame(() => {
+      this.programmaticScrollFrame = null;
+      if (generation !== this.programmaticScrollGeneration) return;
+      this.programmaticScrollSecondFrame = requestAnimationFrame(() => {
+        this.programmaticScrollSecondFrame = null;
+        if (generation === this.programmaticScrollGeneration) {
+          this.programmaticScrollTop = undefined;
+        }
+      });
+    });
+  }
+
+  private consumeProgrammaticScroll(topArg: number): boolean {
+    if (this.programmaticScrollTop === undefined) return false;
+    const matches = Math.abs(this.programmaticScrollTop - topArg) <= 1;
+    this.clearProgrammaticScrollMarker();
+    return matches;
+  }
+
+  private clearProgrammaticScrollMarker(): void {
+    this.programmaticScrollGeneration += 1;
+    if (this.programmaticScrollFrame !== null) cancelAnimationFrame(this.programmaticScrollFrame);
+    if (this.programmaticScrollSecondFrame !== null) cancelAnimationFrame(this.programmaticScrollSecondFrame);
+    this.programmaticScrollFrame = null;
+    this.programmaticScrollSecondFrame = null;
+    this.programmaticScrollTop = undefined;
+  }
+
+  private resetTranscriptContext(): void {
+    this.cancelFullAnchorRestore();
+    if (this.followFrame !== null) cancelAnimationFrame(this.followFrame);
+    if (this.followSecondFrame !== null) cancelAnimationFrame(this.followSecondFrame);
+    if (this.virtualMeasureFrame !== null) cancelAnimationFrame(this.virtualMeasureFrame);
+    if (this.virtualRangeFrame !== null) cancelAnimationFrame(this.virtualRangeFrame);
+    if (this.virtualizationActivationFrame !== null) cancelAnimationFrame(this.virtualizationActivationFrame);
+    this.followFrame = null;
+    this.followSecondFrame = null;
+    this.virtualMeasureFrame = null;
+    this.virtualRangeFrame = null;
+    this.virtualizationActivationFrame = null;
+    this.pendingVirtualAnchor = undefined;
+    this.pendingFullAnchor = undefined;
+    this.measurementAnchor = undefined;
+    this.pendingVirtualRepin = false;
+    this.virtualizationEnabled = false;
+    this.virtualizationEnablePending = false;
+    this.virtualizationDisablePending = false;
+    this.virtualStartIndex = 0;
+    this.virtualEndIndex = 0;
+    this.retainedVirtualKeys.clear();
+    this.explicitRetainedVirtualKey = undefined;
+    this.measuredVirtualHeights.clear();
+    this.virtualOffsets = [];
+    this.virtualTotalHeight = 0;
+    this.toolGroupIdByMessageId.clear();
+    this.nextToolGroupId = 1;
+    this.timelineRegistryRevision = -1;
+    this.knownContentKeys.clear();
+    this.currentNewContentKeys.clear();
+    this.clearTranscriptViewState(this.localViewState);
+    this.clearSelectionGesture();
+    this.disconnectSelectionChangeListener();
+    this.userUnpinned = false;
+    this.lastObservedScrollTop = 0;
+    this.showJumpChip = false;
+    this.resetLoadEarlierState();
+    this.clearProgrammaticScrollMarker();
+  }
+
+  private readonly handleTouchStart = (eventArg: TouchEvent): void => {
+    if (this.eventComesFromNestedMessageList(eventArg)) return;
+    this.touchScrollY = eventArg.touches[0]?.clientY;
+  };
+
+  private readonly handleTouchEnd = (): void => {
+    this.touchScrollY = undefined;
+    if (this.earlierScrollIntent) this.scheduleScrollIntentSettlement();
+  };
+
+  private readonly handleTouchCancel = (): void => {
+    this.touchScrollY = undefined;
+    this.clearEarlierScrollIntent();
   };
 
   public scrollToBottom(force = false): void {
@@ -1099,8 +1326,7 @@ export class DeesHarnessMessageList extends DeesElement {
       this.measurementAnchor = undefined;
     }
     if (force || this.isPinnedToBottom) {
-      container.scrollTop = container.scrollHeight;
-      this.lastObservedScrollTop = container.scrollTop;
+      this.setProgrammaticScrollTop(container, container.scrollHeight);
       this.showJumpChip = false;
     }
     this.syncScrollEdgeFades();
@@ -1110,6 +1336,20 @@ export class DeesHarnessMessageList extends DeesElement {
     const container = this.scrollContainer;
     if (!container) return;
     const top = container.scrollTop;
+    const previousTop = this.lastObservedScrollTop;
+    const programmatic = this.consumeProgrammaticScroll(top);
+    if (programmatic) {
+      this.clearEarlierScrollIntent();
+    } else {
+      if (this.scrollbarGestureActive && top < previousTop - 0.5) {
+        this.armEarlierScrollIntent();
+      } else if (top > previousTop + 0.5) {
+        this.clearEarlierScrollIntent();
+      } else if (this.earlierScrollIntent) {
+        this.scheduleScrollIntentSettlement();
+      }
+      if (this.earlierScrollIntent) this.requestEarlierIfAtTop();
+    }
     this.syncScrollEdgeFades();
     if (this.isPinnedToBottom) {
       // reaching the bottom — by any means — resumes following
@@ -1123,6 +1363,10 @@ export class DeesHarnessMessageList extends DeesElement {
     this.schedulePendingVirtualizationActivation();
   };
 
+  private readonly handleScrollEnd = (): void => {
+    this.clearEarlierScrollIntent();
+  };
+
   private schedulePendingVirtualizationActivation(): void {
     if (
       (!this.virtualizationEnablePending && !this.virtualizationDisablePending)
@@ -1187,6 +1431,7 @@ export class DeesHarnessMessageList extends DeesElement {
   };
 
   private readonly handlePointerUp = (eventArg: PointerEvent): void => {
+    this.scrollbarGestureActive = false;
     if (eventArg.button !== 0) return;
     const key = this.timelineKeyForEvent(eventArg);
     if (key) this.selectionGestureKeys.add(key);
@@ -1205,6 +1450,8 @@ export class DeesHarnessMessageList extends DeesElement {
   };
 
   private readonly handlePointerCancel = (): void => {
+    this.scrollbarGestureActive = false;
+    this.clearEarlierScrollIntent();
     this.clearSelectionGesture();
     this.handleProtectedStateChange();
   };
@@ -1228,6 +1475,13 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public updated(changedProperties: Map<string, any>): void {
     super.updated(changedProperties);
+    if (changedProperties.has('transcriptKey')) {
+      const container = this.scrollContainer;
+      if (container) {
+        if (this.autoFollow) this.scrollToBottom(true);
+        else this.setProgrammaticScrollTop(container, 0);
+      }
+    }
     if (changedProperties.has('messages') || changedProperties.has('status') || changedProperties.has('permissions') || changedProperties.has('questions')) {
       this.followAfterContentChange();
     }
@@ -1424,7 +1678,10 @@ export class DeesHarnessMessageList extends DeesElement {
     const index = this.timelineIndexByKey.get(anchorArg.key);
     if (index === undefined) return;
     const stack = this.shadowRoot?.querySelector<HTMLElement>('.virtualStack');
-    containerArg.scrollTop = (stack?.offsetTop ?? 0) + (this.virtualOffsets[index] ?? 0) + anchorArg.offset;
+    this.setProgrammaticScrollTop(
+      containerArg,
+      (stack?.offsetTop ?? 0) + (this.virtualOffsets[index] ?? 0) + anchorArg.offset,
+    );
   }
 
   private restoreFullAnchor(
@@ -1435,9 +1692,13 @@ export class DeesHarnessMessageList extends DeesElement {
       `.stack > [data-timeline-key="${CSS.escape(anchorArg.key)}"]`,
     );
     if (!element) return;
-    containerArg.scrollTop += element.getBoundingClientRect().top
-      - containerArg.getBoundingClientRect().top
-      + anchorArg.offset;
+    this.setProgrammaticScrollTop(
+      containerArg,
+      containerArg.scrollTop
+        + element.getBoundingClientRect().top
+        - containerArg.getBoundingClientRect().top
+        + anchorArg.offset,
+    );
   }
 
   private scheduleFullAnchorRestore(
@@ -1774,6 +2035,8 @@ export class DeesHarnessMessageList extends DeesElement {
     this.explicitRetainedVirtualKey = undefined;
     this.retainedVirtualKeys.clear();
     this.clearSelectionGesture();
+    this.resetLoadEarlierState();
+    this.clearProgrammaticScrollMarker();
     this.entryAnimationsEnabled = true;
     this.disconnectContentResizeObserver();
     this.disconnectVirtualObservers();