@design.estate/dees-catalog 6.7.0 → 6.8.0

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

@@ -13,9 +13,13 @@ import {
 import { themeDefaultStyles } from '../../00theme.js';
 import type {
   IHarnessMessage,
+  IHarnessMessageViewState,
   IHarnessPermissionRequest,
+  IHarnessPermissionViewState,
   IHarnessQuestionRequest,
+  IHarnessQuestionViewState,
   IHarnessStatus,
+  IHarnessTranscriptViewState,
   THarnessMessageStreamDelta,
   THarnessStreamDelta,
 } from '../interfaces.js';
@@ -36,6 +40,10 @@ declare global {
 }
 
 const pinThresholdPx = 48;
+const virtualizationThreshold = 40;
+const virtualOverscanPx = 800;
+const virtualGapPx = 8;
+const maximumToolMessagesPerGroup = 4;
 
 type TMessageTimelineItem = {
   kind: 'message';
@@ -73,11 +81,10 @@ interface IToolGroupTimelineItem {
 type TTimelineRenderItem = Exclude<TTimelineItem, TMessageTimelineItem> | TMessageTimelineItem | IToolGroupTimelineItem;
 
 /**
- * Scrollable, streaming-safe message log. Messages render through a keyed
- * repeat (stable DOM per message id); `applyDelta()` routes incremental
- * updates to the affected message element only. Auto-follows the bottom
- * while the user is pinned there; otherwise new content raises a
- * "jump to latest" chip instead of yanking the scroll position.
+ * Scrollable, streaming-safe message log. Short transcripts keep stable keyed
+ * DOM; long transcripts mount a bounded, measured window and retain row state
+ * by id. `applyDelta()` targets a mounted row or updates its offscreen model.
+ * Auto-follow stays at the bottom until the user intentionally scrolls away.
  */
 @customElement('dees-harness-message-list')
 export class DeesHarnessMessageList extends DeesElement {
@@ -114,6 +121,9 @@ export class DeesHarnessMessageList extends DeesElement {
   @property({ attribute: false })
   accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
 
+  @property({ attribute: false })
+  accessor viewState: IHarnessTranscriptViewState | undefined = undefined;
+
   /** Nested transcripts set this false to prevent recursive inline streams. */
   @property({ type: Boolean })
   accessor allowSubtaskStreams: boolean = true;
@@ -145,6 +155,47 @@ export class DeesHarnessMessageList extends DeesElement {
   private readonly toolGroupIdByMessageId = new Map<string, string>();
   private nextToolGroupId = 1;
   private timelineRenderItems: TTimelineRenderItem[] = [];
+  private timelineRegistryRevision = -1;
+  private readonly knownContentKeys = new Set<string>();
+  private currentNewContentKeys = new Set<string>();
+  private readonly localViewState: IHarnessTranscriptViewState = {
+    messages: {},
+    permissions: {},
+    questions: {},
+  };
+  private readonly measuredVirtualHeights = new Map<string, number>();
+  private timelineIndexByKey = new Map<string, number>();
+  private virtualOffsets: number[] = [];
+  private virtualTotalHeight = 0;
+  private virtualStartIndex = 0;
+  private virtualEndIndex = 0;
+  private retainedVirtualKeys = new Set<string>();
+  private selectionGestureKeys = new Set<string>();
+  private selectionGestureActive = false;
+  private selectionGestureStartOwner: Element | undefined;
+  private selectionGestureCrossesOwners = false;
+  private selectionGestureSnapshot: {
+    anchorNode: Node | null;
+    anchorOffset: number;
+    focusNode: Node | null;
+    focusOffset: number;
+    rangeCount: number;
+  } | undefined;
+  private explicitRetainedVirtualKey: string | undefined;
+  private virtualRowResizeObserver: ResizeObserver | null = null;
+  private virtualViewportResizeObserver: ResizeObserver | null = null;
+  private virtualMeasureFrame: number | null = null;
+  private virtualRangeFrame: number | null = null;
+  private lastVirtualViewportWidth = 0;
+  private pendingVirtualAnchor: { key: string; offset: number } | undefined;
+  private pendingFullAnchor: { key: string; offset: number } | undefined;
+  private measurementAnchor: { key: string; offset: number } | undefined;
+  private pendingVirtualRepin = false;
+  private virtualizationEnabled = false;
+  private virtualizationEnablePending = false;
+  private virtualizationDisablePending = false;
+  private virtualizationActivationFrame: number | null = null;
+  private selectionChangeListening = false;
 
   public static styles = [
     themeDefaultStyles,
@@ -162,6 +213,7 @@ export class DeesHarnessMessageList extends DeesElement {
       .scroll {
         height: 100%;
         overflow-y: auto;
+        overflow-anchor: none;
         overscroll-behavior: contain;
         scrollbar-width: thin;
         scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
@@ -230,6 +282,19 @@ export class DeesHarnessMessageList extends DeesElement {
         grid-column: 1 / -1;
       }
 
+      .virtualStack {
+        position: relative;
+        flex: 0 0 auto;
+        min-width: 0;
+      }
+
+      .virtualItem {
+        position: absolute;
+        inset: 0 0 auto;
+        min-width: 0;
+        transform: translate3d(0, var(--harness-virtual-offset), 0);
+      }
+
       .toolGroup {
         min-width: 0;
       }
@@ -423,7 +488,21 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
     super.willUpdate(changedProperties);
-    this.timelineRenderItems = this.buildTimelineRenderItems();
+    if (changedProperties.has('viewState') && this.viewState) {
+      this.clearTranscriptViewState(this.localViewState);
+    }
+    const registryChanged = this.timelineRegistryRevision !== this.toolRegistry.revision;
+    if (
+      this.timelineRegistryRevision < 0
+      || changedProperties.has('messages')
+      || changedProperties.has('permissions')
+      || changedProperties.has('questions')
+      || changedProperties.has('toolRegistry')
+      || changedProperties.has('viewState')
+      || registryChanged
+    ) {
+      this.rebuildTimeline();
+    }
   }
 
   private appendToolRun(
@@ -432,20 +511,231 @@ export class DeesHarnessMessageList extends DeesElement {
     layoutArg: THarnessToolLayout,
     usedGroupIdsArg: Set<string>,
   ): void {
-    const groupId = runArg
-      .map((item) => this.toolGroupIdByMessageId.get(item.message.id))
-      .find((candidate): candidate is string => candidate !== undefined && !usedGroupIdsArg.has(candidate))
-      ?? `tool-group-${this.nextToolGroupId++}`;
-    usedGroupIdsArg.add(groupId);
-    for (const item of runArg) {
-      this.toolGroupIdByMessageId.set(item.message.id, groupId);
-    }
-    targetArg.push({
-      kind: 'tool-group',
-      key: groupId,
-      layout: layoutArg,
-      messages: runArg,
-    });
+    for (let offset = 0; offset < runArg.length; offset += maximumToolMessagesPerGroup) {
+      const messages = runArg.slice(offset, offset + maximumToolMessagesPerGroup);
+      const groupId = messages
+        .map((item) => this.toolGroupIdByMessageId.get(item.message.id))
+        .find((candidate): candidate is string => candidate !== undefined && !usedGroupIdsArg.has(candidate))
+        ?? `tool-group-${this.nextToolGroupId++}`;
+      usedGroupIdsArg.add(groupId);
+      for (const item of messages) {
+        this.toolGroupIdByMessageId.set(item.message.id, groupId);
+      }
+      targetArg.push({
+        kind: 'tool-group',
+        key: groupId,
+        layout: layoutArg,
+        messages,
+      });
+    }
+  }
+
+  private rebuildTimeline(): void {
+    const container = this.scrollContainer;
+    const preserveAnchor = this.userUnpinned || !this.autoFollow;
+    const anchor = container && preserveAnchor
+      ? this.captureCurrentAnchor(container)
+      : undefined;
+    const nextItems = this.buildTimelineRenderItems();
+    const retainedKeys = new Set(nextItems.map((item) => item.key));
+    const contentKeys = [
+      ...this.messages.map((message) => `message:${message.id}`),
+      ...this.permissions.map((request) => `permission:${request.id}`),
+      ...this.questions.map((request) => `question:${request.id}`),
+    ];
+    this.currentNewContentKeys = new Set(
+      contentKeys.filter((key) => !this.knownContentKeys.has(key)),
+    );
+    this.knownContentKeys.clear();
+    for (const key of contentKeys) this.knownContentKeys.add(key);
+    for (const key of this.measuredVirtualHeights.keys()) {
+      if (!retainedKeys.has(key)) this.measuredVirtualHeights.delete(key);
+    }
+    if (this.explicitRetainedVirtualKey && !retainedKeys.has(this.explicitRetainedVirtualKey)) {
+      this.explicitRetainedVirtualKey = undefined;
+    }
+    for (const key of this.retainedVirtualKeys) {
+      if (!retainedKeys.has(key)) this.retainedVirtualKeys.delete(key);
+    }
+    const messageIds = new Set(this.messages.map((message) => message.id));
+    const permissionIds = new Set(this.permissions.map((request) => request.id));
+    const questionIds = new Set(this.questions.map((request) => request.id));
+    const effectiveViewState = this.effectiveViewState;
+    for (const key of Object.keys(effectiveViewState.messages)) {
+      if (!messageIds.has(key)) delete effectiveViewState.messages[key];
+    }
+    for (const key of Object.keys(effectiveViewState.permissions)) {
+      if (!permissionIds.has(key)) delete effectiveViewState.permissions[key];
+    }
+    for (const key of Object.keys(effectiveViewState.questions)) {
+      if (!questionIds.has(key)) delete effectiveViewState.questions[key];
+    }
+    for (const message of this.messages) effectiveViewState.messages[message.id] ??= {};
+    for (const request of this.permissions) effectiveViewState.permissions[request.id] ??= {};
+    for (const request of this.questions) effectiveViewState.questions[request.id] ??= {};
+    for (const message of this.messages) this.syncSubtaskViewState(message);
+    this.timelineRenderItems = nextItems;
+    this.timelineIndexByKey = new Map(nextItems.map((item, index) => [item.key, index]));
+    this.timelineRegistryRevision = this.toolRegistry.revision;
+    const shouldVirtualize = contentKeys.length > virtualizationThreshold;
+    if (!this.virtualizationEnabled && shouldVirtualize) {
+      this.virtualizationDisablePending = false;
+      if (this.activeTimelineKey()) {
+        this.virtualizationEnablePending = true;
+        this.connectSelectionChangeListener();
+      } else {
+        this.captureFullTimelineMeasurements();
+        this.virtualizationEnabled = true;
+        this.virtualizationEnablePending = false;
+        this.disconnectSelectionChangeListener();
+      }
+    } else if (this.virtualizationEnabled && !shouldVirtualize) {
+      this.virtualizationEnablePending = false;
+      if (this.activeTimelineKey()) {
+        this.virtualizationDisablePending = true;
+        this.connectSelectionChangeListener();
+      } else {
+        this.virtualizationEnabled = false;
+        this.virtualizationDisablePending = false;
+        this.retainedVirtualKeys.clear();
+        this.disconnectSelectionChangeListener();
+      }
+    } else {
+      this.virtualizationEnablePending = false;
+      this.virtualizationDisablePending = false;
+      if (this.activeSelectionKeys().length === 0) this.disconnectSelectionChangeListener();
+    }
+    this.recomputeVirtualOffsets();
+    if (anchor && container) {
+      if (this.virtualizationActive) {
+        this.pendingVirtualAnchor = anchor;
+        this.measurementAnchor = anchor;
+        this.setVirtualRangeAround(anchor.key);
+      } else {
+        this.pendingVirtualAnchor = undefined;
+        this.pendingFullAnchor = anchor;
+        this.setInitialVirtualRange();
+      }
+    } else {
+      this.measurementAnchor = undefined;
+      this.setInitialVirtualRange();
+    }
+  }
+
+  private pruneViewState(
+    stateArg: IHarnessTranscriptViewState,
+    messageIdsArg: string[],
+    permissionIdsArg: string[],
+    questionIdsArg: string[],
+  ): void {
+    const messageIds = new Set(messageIdsArg);
+    const permissionIds = new Set(permissionIdsArg);
+    const questionIds = new Set(questionIdsArg);
+    for (const key of Object.keys(stateArg.messages)) if (!messageIds.has(key)) delete stateArg.messages[key];
+    for (const key of Object.keys(stateArg.permissions)) if (!permissionIds.has(key)) delete stateArg.permissions[key];
+    for (const key of Object.keys(stateArg.questions)) if (!questionIds.has(key)) delete stateArg.questions[key];
+  }
+
+  private clearTranscriptViewState(stateArg: IHarnessTranscriptViewState): void {
+    for (const key of Object.keys(stateArg.messages)) delete stateArg.messages[key];
+    for (const key of Object.keys(stateArg.permissions)) delete stateArg.permissions[key];
+    for (const key of Object.keys(stateArg.questions)) delete stateArg.questions[key];
+  }
+
+  private syncSubtaskViewState(messageArg: IHarnessMessage): void {
+    const messageState = this.effectiveViewState.messages[messageArg.id];
+    if (!messageState) return;
+    const subtask = messageArg.toolCall?.subtask;
+    if (
+      !this.allowSubtaskStreams
+      || !subtask
+      || subtask.previewState !== 'ready'
+      || subtask.status.type !== 'busy'
+    ) {
+      delete messageState.subtaskTranscript;
+      delete messageState.subtaskTranscriptSessionId;
+      return;
+    }
+    if (
+      messageState.subtaskTranscriptSessionId !== subtask.sessionId
+      || !messageState.subtaskTranscript
+    ) {
+      messageState.subtaskTranscriptSessionId = subtask.sessionId;
+      messageState.subtaskTranscript = { messages: {}, permissions: {}, questions: {} };
+    }
+    this.pruneViewState(
+      messageState.subtaskTranscript,
+      subtask.messages.map((entry) => entry.id),
+      (subtask.permissions ?? []).map((entry) => entry.id),
+      (subtask.questions ?? []).map((entry) => entry.id),
+    );
+  }
+
+  private get virtualizationActive(): boolean {
+    return this.virtualizationEnabled;
+  }
+
+  private estimatedVirtualHeight(itemArg: TTimelineRenderItem): number {
+    if (itemArg.kind === 'permission') return 150;
+    if (itemArg.kind === 'question') return 180;
+    if (itemArg.kind === 'tool-group') {
+      if (itemArg.layout === 'subtask') return 320;
+      return itemArg.layout === 'full-row' ? 120 * itemArg.messages.length : 110;
+    }
+    if (itemArg.message.reasoning?.some((part) => !part.endedAt)) return 220;
+    return itemArg.message.text.length > 1_000 ? 180 : 96;
+  }
+
+  private recomputeVirtualOffsets(): void {
+    const offsets: number[] = [];
+    let offset = 0;
+    for (const item of this.timelineRenderItems) {
+      offsets.push(offset);
+      offset += this.measuredVirtualHeights.get(item.key) ?? this.estimatedVirtualHeight(item);
+      offset += virtualGapPx;
+    }
+    this.virtualOffsets = offsets;
+    this.virtualTotalHeight = Math.max(0, offset - virtualGapPx);
+  }
+
+  private setInitialVirtualRange(): void {
+    if (!this.virtualizationActive) {
+      this.virtualStartIndex = 0;
+      this.virtualEndIndex = this.timelineRenderItems.length;
+      return;
+    }
+    const initialCount = Math.min(this.timelineRenderItems.length, 24);
+    this.virtualEndIndex = this.autoFollow ? this.timelineRenderItems.length : initialCount;
+    this.virtualStartIndex = this.autoFollow ? this.virtualEndIndex - initialCount : 0;
+  }
+
+  private setVirtualRangeAround(keyArg: string): void {
+    const anchorIndex = this.timelineIndexByKey.get(keyArg);
+    if (anchorIndex === undefined) {
+      this.setInitialVirtualRange();
+      return;
+    }
+    this.virtualStartIndex = Math.max(0, anchorIndex - 12);
+    this.virtualEndIndex = Math.min(this.timelineRenderItems.length, anchorIndex + 13);
+  }
+
+  private captureFullTimelineMeasurements(): void {
+    for (const element of this.shadowRoot?.querySelectorAll<HTMLElement>('.stack > [data-timeline-key]') ?? []) {
+      const key = element.dataset.timelineKey;
+      const height = element?.getBoundingClientRect().height ?? 0;
+      if (key && height > 0) this.measuredVirtualHeights.set(key, height);
+    }
+  }
+
+  private captureCurrentAnchor(containerArg: HTMLElement): { key: string; offset: number } | undefined {
+    if (this.virtualizationActive) return this.captureVirtualAnchor(containerArg);
+    const containerTop = containerArg.getBoundingClientRect().top;
+    const itemElements = Array.from(
+      this.shadowRoot?.querySelectorAll<HTMLElement>('.stack > [data-timeline-key]') ?? [],
+    );
+    const element = itemElements.find((candidate) => candidate.getBoundingClientRect().bottom > containerTop);
+    const key = element?.dataset.timelineKey;
+    return key ? { key, offset: containerTop - element.getBoundingClientRect().top } : undefined;
   }
 
   public render(): TemplateResult {
@@ -456,37 +746,18 @@ export class DeesHarnessMessageList extends DeesElement {
         @scroll=${this.handleScroll}
         @wheel=${this.handleUserScrollIntent}
         @touchmove=${this.handleUserScrollIntent}
-        @pointerdown=${this.handleUserScrollIntent}
+        @pointerdown=${this.handlePointerDown}
+        @pointerup=${this.handlePointerUp}
+        @pointercancel=${this.handlePointerCancel}
         @keydown=${this.handleUserScrollIntent}
+        @keyup=${this.handleProtectedStateChange}
+        @focusout=${this.handleProtectedStateChange}
+        @harness-card-retention=${this.handleCardRetention}
       >
         <div class="scrollContent">
         <slot name="leading"></slot>
         ${items.length
-          ? html`
-              <div class="stack">
-                ${repeat(
-                  items,
-                  (item) => item.key,
-                  (item) => item.kind === 'tool-group'
-                    ? this.renderToolGroup(item)
-                    : item.kind === 'message'
-                      ? this.renderMessage(item)
-                    : item.kind === 'permission'
-                      ? html`
-                          <dees-harness-permission-card
-                            .request=${item.request}
-                            .busy=${this.permissionsBusy}
-                          ></dees-harness-permission-card>
-                        `
-                      : html`
-                          <dees-harness-question-card
-                            .request=${item.question}
-                            .busy=${this.permissionsBusy}
-                          ></dees-harness-question-card>
-                        `,
-                )}
-              </div>
-            `
+          ? this.virtualizationActive ? this.renderVirtualTimeline() : this.renderFullTimeline(items)
           : html`
               <div class="empty">
                 <slot name="empty">
@@ -511,9 +782,94 @@ export class DeesHarnessMessageList extends DeesElement {
     `;
   }
 
-  private renderMessage(itemArg: TMessageTimelineItem): TemplateResult {
+  private renderFullTimeline(itemsArg: TTimelineRenderItem[]): TemplateResult {
+    return html`
+      <div class="stack" role="log" aria-label="Conversation transcript">
+        ${repeat(
+          itemsArg,
+          (item) => item.key,
+          (item, index) => this.renderTimelineItem(item, index),
+        )}
+      </div>
+    `;
+  }
+
+  private renderVirtualTimeline(): TemplateResult {
+    const indexedItems = this.virtualRenderedIndexes().map((index) => ({
+      index,
+      item: this.timelineRenderItems[index]!,
+    }));
+    return html`
+      <div
+        class="virtualStack"
+        role="log"
+        aria-label="Conversation transcript"
+        style=${`height: ${this.virtualTotalHeight}px;`}
+      >
+        ${repeat(
+          indexedItems,
+          (entry) => entry.item.key,
+          (entry) => html`
+            <article
+              class="virtualItem"
+              data-virtual-key=${entry.item.key}
+              aria-posinset=${entry.index + 1}
+              aria-setsize=${this.timelineRenderItems.length}
+              style=${`--harness-virtual-offset: ${this.virtualOffsets[entry.index] ?? 0}px;`}
+            >
+              ${this.renderTimelineItem(entry.item, entry.index)}
+            </article>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  private virtualRenderedIndexes(): number[] {
+    const indexes: number[] = [];
+    for (let index = this.virtualStartIndex; index < this.virtualEndIndex; index += 1) {
+      indexes.push(index);
+    }
+    for (const retainedKey of this.retainedVirtualKeys) {
+      const retainedIndex = this.timelineIndexByKey.get(retainedKey);
+      if (retainedIndex !== undefined && !indexes.includes(retainedIndex)) indexes.push(retainedIndex);
+    }
+    return indexes.sort((left, right) => left - right);
+  }
+
+  private renderTimelineItem(itemArg: TTimelineRenderItem, logicalIndexArg: number): TemplateResult {
+    if (itemArg.kind === 'tool-group') return this.renderToolGroup(itemArg);
+    if (itemArg.kind === 'message') return this.renderMessage(itemArg, itemArg.key);
+    if (itemArg.kind === 'permission') {
+      return html`
+        <dees-harness-permission-card
+          data-timeline-key=${itemArg.key}
+          aria-posinset=${logicalIndexArg + 1}
+          aria-setsize=${this.timelineRenderItems.length}
+          .request=${itemArg.request}
+          .busy=${this.permissionsBusy}
+          .viewState=${this.permissionViewState(itemArg.request.id)}
+          .suppressEntry=${!this.entryAnimationsEnabled || !this.currentNewContentKeys.has(itemArg.key)}
+        ></dees-harness-permission-card>
+      `;
+    }
+    return html`
+      <dees-harness-question-card
+        data-timeline-key=${itemArg.key}
+        aria-posinset=${logicalIndexArg + 1}
+        aria-setsize=${this.timelineRenderItems.length}
+        .request=${itemArg.question}
+        .busy=${this.permissionsBusy}
+        .viewState=${this.questionViewState(itemArg.question.id)}
+        .suppressEntry=${!this.entryAnimationsEnabled || !this.currentNewContentKeys.has(itemArg.key)}
+      ></dees-harness-question-card>
+    `;
+  }
+
+  private renderMessage(itemArg: TMessageTimelineItem, timelineKeyArg: string): TemplateResult {
     return html`
       <dees-harness-message
+        data-timeline-key=${timelineKeyArg}
         data-message-id=${itemArg.message.id}
         data-tool-layout=${itemArg.toolLayout ?? 'message'}
         .message=${itemArg.message}
@@ -521,17 +877,35 @@ export class DeesHarnessMessageList extends DeesElement {
         .showTimestamp=${this.showTimestamps}
         .toolRegistry=${this.toolRegistry}
         .allowSubtaskStreams=${this.allowSubtaskStreams}
-        .suppressEntry=${!this.entryAnimationsEnabled}
+        .viewState=${this.messageViewState(itemArg.message.id)}
+        .suppressEntry=${!this.entryAnimationsEnabled || !this.currentNewContentKeys.has(itemArg.key)}
       ></dees-harness-message>
     `;
   }
 
+  private messageViewState(messageIdArg: string): IHarnessMessageViewState {
+    return this.effectiveViewState.messages[messageIdArg]!;
+  }
+
+  private permissionViewState(requestIdArg: string): IHarnessPermissionViewState {
+    return this.effectiveViewState.permissions[requestIdArg]!;
+  }
+
+  private questionViewState(requestIdArg: string): IHarnessQuestionViewState {
+    return this.effectiveViewState.questions[requestIdArg]!;
+  }
+
+  private get effectiveViewState(): IHarnessTranscriptViewState {
+    return this.viewState ?? this.localViewState;
+  }
+
   private renderToolGroup(groupArg: IToolGroupTimelineItem): TemplateResult {
     const count = groupArg.messages.length;
     const countClass = count >= 4 ? 'toolCount4' : `toolCount${count}`;
     return html`
       <section
         class="toolGroup"
+        data-timeline-key=${groupArg.key}
         data-tool-group-id=${groupArg.key}
         data-tool-layout=${groupArg.layout}
       >
@@ -539,7 +913,7 @@ export class DeesHarnessMessageList extends DeesElement {
           ${repeat(
             groupArg.messages,
             (item) => item.key,
-            (item) => this.renderMessage(item),
+            (item) => this.renderMessage(item, groupArg.key),
           )}
         </div>
       </section>
@@ -591,9 +965,15 @@ export class DeesHarnessMessageList extends DeesElement {
         else harnessApplyMessageDelta(this.messages, delta);
         break;
       case 'tool-update':
+        const previousLayout = message.toolCall ? this.toolRegistry.resolveLayout(message.toolCall) : null;
         message.toolCall = { ...(message.toolCall ?? { id: delta.tool.id, name: '', status: 'pending' }), ...delta.tool };
+        const nextLayout = this.toolRegistry.resolveLayout(message.toolCall);
+        this.syncSubtaskViewState(message);
         element?.requestUpdate();
-        this.requestUpdate();
+        if (previousLayout !== nextLayout) {
+          this.rebuildTimeline();
+          this.requestUpdate();
+        }
         break;
       case 'message-end':
         if (element) element.endStream(delta.usage, delta.error);
@@ -676,6 +1056,7 @@ export class DeesHarnessMessageList extends DeesElement {
     ) return;
     if (event.type === 'pointerdown' && event.target !== this.scrollContainer) return;
     this.userUnpinned = true;
+    this.measurementAnchor = undefined;
   };
 
   public scrollToBottom(force = false): void {
@@ -683,6 +1064,7 @@ export class DeesHarnessMessageList extends DeesElement {
     if (!container) return;
     if (force) {
       this.userUnpinned = false;
+      this.measurementAnchor = undefined;
     }
     if (force || this.isPinnedToBottom) {
       container.scrollTop = container.scrollHeight;
@@ -705,8 +1087,113 @@ export class DeesHarnessMessageList extends DeesElement {
       }
     }
     this.lastObservedScrollTop = top;
+    this.scheduleVirtualRangeUpdate();
+    this.schedulePendingVirtualizationActivation();
+  };
+
+  private schedulePendingVirtualizationActivation(): void {
+    if (
+      (!this.virtualizationEnablePending && !this.virtualizationDisablePending)
+      || this.virtualizationActivationFrame !== null
+    ) return;
+    this.virtualizationActivationFrame = requestAnimationFrame(() => {
+      this.virtualizationActivationFrame = null;
+      if (!this.isConnected || this.activeTimelineKey()) return;
+      const container = this.scrollContainer;
+      const anchor = container ? this.captureCurrentAnchor(container) : undefined;
+      if (this.virtualizationEnablePending) {
+        this.captureFullTimelineMeasurements();
+        this.virtualizationEnabled = true;
+        this.virtualizationEnablePending = false;
+        this.recomputeVirtualOffsets();
+        if (anchor) {
+          this.pendingVirtualAnchor = anchor;
+          this.setVirtualRangeAround(anchor.key);
+        } else {
+          this.setInitialVirtualRange();
+        }
+      } else if (this.virtualizationDisablePending) {
+        this.virtualizationEnabled = false;
+        this.virtualizationDisablePending = false;
+        this.retainedVirtualKeys.clear();
+        if (anchor) this.pendingFullAnchor = anchor;
+        this.setInitialVirtualRange();
+      }
+      this.disconnectSelectionChangeListener();
+      this.requestUpdate();
+    });
+  }
+
+  private readonly handleSelectionChange = (): void => {
+    const selection = document.getSelection();
+    if (
+      !selection
+      || selection.rangeCount === 0
+      || (
+        !this.selectionGestureActive
+        && this.selectionGestureSnapshot
+        && !this.selectionMatchesGestureSnapshot(selection)
+      )
+      || (
+        !this.selectionGestureActive
+        && selection.isCollapsed
+        && !this.hasCrossShadowSelectionFallback
+      )
+    ) this.clearSelectionGesture();
+    this.scheduleVirtualRangeUpdate();
+    this.schedulePendingVirtualizationActivation();
+  };
+
+  private readonly handlePointerDown = (eventArg: PointerEvent): void => {
+    this.handleUserScrollIntent(eventArg);
+    if (eventArg.button !== 0) return;
+    this.clearSelectionGesture();
+    this.selectionGestureActive = true;
+    this.selectionGestureStartOwner = this.selectionOwnerForEvent(eventArg);
+    const key = this.timelineKeyForEvent(eventArg);
+    if (key) this.selectionGestureKeys.add(key);
+  };
+
+  private readonly handlePointerUp = (eventArg: PointerEvent): void => {
+    if (eventArg.button !== 0) return;
+    const key = this.timelineKeyForEvent(eventArg);
+    if (key) this.selectionGestureKeys.add(key);
+    const endOwner = this.selectionOwnerForEvent(eventArg);
+    this.selectionGestureCrossesOwners = Boolean(
+      this.selectionGestureStartOwner
+      && endOwner
+      && this.selectionGestureStartOwner !== endOwner,
+    );
+    this.selectionGestureActive = false;
+    this.selectionGestureSnapshot = this.captureSelectionSnapshot(document.getSelection());
+    if (!this.hasCrossShadowSelectionFallback && document.getSelection()?.isCollapsed !== false) {
+      this.clearSelectionGesture();
+    }
+    this.handleProtectedStateChange();
   };
 
+  private readonly handlePointerCancel = (): void => {
+    this.clearSelectionGesture();
+    this.handleProtectedStateChange();
+  };
+
+  private readonly handleProtectedStateChange = (): void => {
+    this.scheduleVirtualRangeUpdate();
+    this.schedulePendingVirtualizationActivation();
+  };
+
+  private connectSelectionChangeListener(): void {
+    if (this.selectionChangeListening) return;
+    document.addEventListener('selectionchange', this.handleSelectionChange);
+    this.selectionChangeListening = true;
+  }
+
+  private disconnectSelectionChangeListener(): void {
+    if (!this.selectionChangeListening) return;
+    document.removeEventListener('selectionchange', this.handleSelectionChange);
+    this.selectionChangeListening = false;
+  }
+
   public updated(changedProperties: Map<string, any>): void {
     super.updated(changedProperties);
     if (changedProperties.has('messages') || changedProperties.has('status') || changedProperties.has('permissions') || changedProperties.has('questions')) {
@@ -725,6 +1212,23 @@ export class DeesHarnessMessageList extends DeesElement {
       || changedProperties.has('permissions')
       || changedProperties.has('questions')
     ) this.syncScrollEdgeFades();
+    if (this.virtualizationActive) {
+      this.connectVirtualObservers();
+      if (this.pendingVirtualAnchor) {
+        this.restoreVirtualAnchor(this.scrollContainer!, this.pendingVirtualAnchor);
+        this.pendingVirtualAnchor = undefined;
+      } else if (this.pendingVirtualRepin) {
+        this.repinToBottom();
+        this.pendingVirtualRepin = false;
+      }
+      this.scheduleVirtualRangeUpdate();
+    } else {
+      this.disconnectVirtualObservers();
+      if (this.pendingFullAnchor) {
+        this.restoreFullAnchor(this.scrollContainer!, this.pendingFullAnchor);
+        this.pendingFullAnchor = undefined;
+      }
+    }
   }
 
   public firstUpdated(changedProperties: Map<string, any>): void {
@@ -733,6 +1237,7 @@ export class DeesHarnessMessageList extends DeesElement {
     this.connectContentResizeObserver();
     this.repinToBottom();
     this.syncScrollEdgeFades();
+    if (this.virtualizationActive) this.connectVirtualObservers();
     // let the initial batch paint without entry animations, then enable them
     this.entryFrame = requestAnimationFrame(() => {
       this.entryFrame = null;
@@ -747,7 +1252,14 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public async connectedCallback(): Promise<void> {
     const connected = super.connectedCallback();
-    if (this.hasUpdated) this.connectContentResizeObserver();
+    if (this.virtualizationEnablePending || this.virtualizationDisablePending) {
+      this.connectSelectionChangeListener();
+    }
+    if (this.hasUpdated) {
+      this.connectContentResizeObserver();
+      if (this.virtualizationActive) this.connectVirtualObservers();
+      this.schedulePendingVirtualizationActivation();
+    }
     await connected;
   }
 
@@ -767,6 +1279,369 @@ export class DeesHarnessMessageList extends DeesElement {
     this.observedScrollContent = content;
   }
 
+  private connectVirtualObservers(): void {
+    const container = this.scrollContainer;
+    if (!container) return;
+    this.virtualViewportResizeObserver ??= new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      if (width > 0 && Math.abs(width - this.lastVirtualViewportWidth) > 0.5) {
+        const preserveAnchor = this.userUnpinned || !this.autoFollow;
+        const anchor = preserveAnchor ? this.captureVirtualMetricAnchor(container) : undefined;
+        this.lastVirtualViewportWidth = width;
+        this.measuredVirtualHeights.clear();
+        this.recomputeVirtualOffsets();
+        if (anchor) this.pendingVirtualAnchor = anchor;
+        else this.pendingVirtualRepin = true;
+        this.requestUpdate();
+        this.scheduleVirtualRangeUpdate(true);
+      }
+    });
+    this.virtualViewportResizeObserver.disconnect();
+    this.virtualViewportResizeObserver.observe(container);
+    this.lastVirtualViewportWidth ||= container.getBoundingClientRect().width;
+
+    this.virtualRowResizeObserver ??= new ResizeObserver(() => this.scheduleVirtualMeasurements());
+    this.virtualRowResizeObserver.disconnect();
+    for (const row of this.shadowRoot?.querySelectorAll<HTMLElement>('.virtualItem') ?? []) {
+      this.virtualRowResizeObserver.observe(row);
+    }
+  }
+
+  private scheduleVirtualMeasurements(): void {
+    if (this.virtualMeasureFrame !== null) return;
+    this.virtualMeasureFrame = requestAnimationFrame(() => {
+      this.virtualMeasureFrame = null;
+      this.measureVirtualRows();
+    });
+  }
+
+  private measureVirtualRows(): void {
+    const container = this.scrollContainer;
+    if (!container || !this.virtualizationActive) return;
+    const preserveAnchor = this.userUnpinned || !this.autoFollow;
+    const anchor = preserveAnchor
+      ? (this.measurementAnchor ?? this.captureVirtualMetricAnchor(container))
+      : undefined;
+    let changed = false;
+    for (const row of this.shadowRoot?.querySelectorAll<HTMLElement>('.virtualItem') ?? []) {
+      const key = row.dataset.virtualKey;
+      if (!key) continue;
+      const height = row.getBoundingClientRect().height;
+      if (height <= 0 || Math.abs((this.measuredVirtualHeights.get(key) ?? 0) - height) <= 0.5) continue;
+      this.measuredVirtualHeights.set(key, height);
+      changed = true;
+    }
+    if (!changed) {
+      this.measurementAnchor = undefined;
+      return;
+    }
+    this.recomputeVirtualOffsets();
+    if (anchor) this.pendingVirtualAnchor = anchor;
+    else this.pendingVirtualRepin = true;
+    this.requestUpdate();
+    if (this.measurementAnchor) this.scheduleVirtualMeasurements();
+  }
+
+  private captureVirtualAnchor(containerArg: HTMLElement): { key: string; offset: number } | undefined {
+    const containerTop = containerArg.getBoundingClientRect().top;
+    const row = Array.from(this.shadowRoot?.querySelectorAll<HTMLElement>('.virtualItem') ?? [])
+      .find((candidate) => candidate.getBoundingClientRect().bottom > containerTop);
+    const key = row?.dataset.virtualKey;
+    if (row && key) return { key, offset: containerTop - row.getBoundingClientRect().top };
+    const localTop = this.virtualLocalScrollTop(containerArg);
+    return this.captureVirtualOffsetAnchorAt(localTop);
+  }
+
+  private captureVirtualMetricAnchor(
+    containerArg: HTMLElement,
+  ): { key: string; offset: number } | undefined {
+    const localTop = this.virtualLocalScrollTop(containerArg);
+    for (const row of this.shadowRoot?.querySelectorAll<HTMLElement>('.virtualItem') ?? []) {
+      const key = row.dataset.virtualKey;
+      const index = key ? this.timelineIndexByKey.get(key) : undefined;
+      if (index === undefined) continue;
+      const item = this.timelineRenderItems[index]!;
+      const offset = this.virtualOffsets[index] ?? 0;
+      const height = this.measuredVirtualHeights.get(item.key) ?? this.estimatedVirtualHeight(item);
+      if (offset + height > localTop) return { key: item.key, offset: localTop - offset };
+    }
+    return this.captureVirtualOffsetAnchorAt(localTop);
+  }
+
+  private captureVirtualOffsetAnchorAt(localTopArg: number): { key: string; offset: number } | undefined {
+    let index = this.virtualIndexAtOffset(localTopArg);
+    const item = this.timelineRenderItems[index];
+    const itemHeight = item
+      ? (this.measuredVirtualHeights.get(item.key) ?? this.estimatedVirtualHeight(item))
+      : 0;
+    if (
+      item
+      && localTopArg > (this.virtualOffsets[index] ?? 0) + itemHeight
+      && index + 1 < this.timelineRenderItems.length
+    ) index += 1;
+    const anchorItem = this.timelineRenderItems[index];
+    return anchorItem
+      ? { key: anchorItem.key, offset: localTopArg - (this.virtualOffsets[index] ?? 0) }
+      : undefined;
+  }
+
+  private restoreVirtualAnchor(
+    containerArg: HTMLElement,
+    anchorArg: { key: string; offset: number },
+  ): void {
+    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;
+  }
+
+  private restoreFullAnchor(
+    containerArg: HTMLElement,
+    anchorArg: { key: string; offset: number },
+  ): void {
+    const element = this.shadowRoot?.querySelector<HTMLElement>(
+      `.stack > [data-timeline-key="${CSS.escape(anchorArg.key)}"]`,
+    );
+    if (!element) return;
+    containerArg.scrollTop += element.getBoundingClientRect().top
+      - containerArg.getBoundingClientRect().top
+      + anchorArg.offset;
+  }
+
+  private virtualLocalScrollTop(containerArg: HTMLElement): number {
+    const stack = this.shadowRoot?.querySelector<HTMLElement>('.virtualStack');
+    return Math.max(0, containerArg.scrollTop - (stack?.offsetTop ?? 0));
+  }
+
+  private virtualIndexAtOffset(offsetArg: number, offsetsArg = this.virtualOffsets): number {
+    if (offsetsArg.length === 0) return 0;
+    let low = 0;
+    let high = offsetsArg.length - 1;
+    while (low < high) {
+      const middle = Math.floor((low + high + 1) / 2);
+      if ((offsetsArg[middle] ?? 0) <= offsetArg) low = middle;
+      else high = middle - 1;
+    }
+    return low;
+  }
+
+  private scheduleVirtualRangeUpdate(force = false): void {
+    if (!this.virtualizationActive) return;
+    if (force && this.virtualRangeFrame !== null) {
+      cancelAnimationFrame(this.virtualRangeFrame);
+      this.virtualRangeFrame = null;
+    }
+    if (this.virtualRangeFrame !== null) return;
+    this.virtualRangeFrame = requestAnimationFrame(() => {
+      this.virtualRangeFrame = null;
+      this.updateVirtualRange();
+    });
+  }
+
+  private updateVirtualRange(): void {
+    const container = this.scrollContainer;
+    if (!container || !this.virtualizationActive) return;
+    const localTop = this.virtualLocalScrollTop(container);
+    const startTarget = Math.max(0, localTop - virtualOverscanPx);
+    const endTarget = localTop + container.clientHeight + virtualOverscanPx;
+    const start = Math.max(0, this.virtualIndexAtOffset(startTarget) - 1);
+    const end = Math.min(this.timelineRenderItems.length, this.virtualIndexAtOffset(endTarget) + 2);
+    const retainedKeys = new Set(this.activeVirtualKeys());
+    if (
+      start === this.virtualStartIndex
+      && end === this.virtualEndIndex
+      && retainedKeys.size === this.retainedVirtualKeys.size
+      && [...retainedKeys].every((key) => this.retainedVirtualKeys.has(key))
+    ) return;
+    this.virtualStartIndex = start;
+    this.virtualEndIndex = end;
+    this.retainedVirtualKeys = retainedKeys;
+    if (this.activeSelectionKeys().length > 0) this.connectSelectionChangeListener();
+    else if (!this.virtualizationEnablePending && !this.virtualizationDisablePending) {
+      this.disconnectSelectionChangeListener();
+    }
+    this.requestUpdate();
+  }
+
+  private activeVirtualKeys(): string[] {
+    const focusKey = this.activeFocusKey();
+    return [
+      ...(this.explicitRetainedVirtualKey ? [this.explicitRetainedVirtualKey] : []),
+      ...(focusKey ? [focusKey] : []),
+      ...this.activeSelectionKeys(),
+    ].filter((key, index, keys) => keys.indexOf(key) === index);
+  }
+
+  private activeTimelineKey(): string | undefined {
+    if (this.explicitRetainedVirtualKey) return this.explicitRetainedVirtualKey;
+    return this.activeFocusKey() ?? this.activeSelectionKeys()[0];
+  }
+
+  private activeFocusKey(): string | undefined {
+    const activeElement = this.shadowRoot?.activeElement;
+    if (activeElement instanceof Element) {
+      const focusedKey = this.ownedTimelineElement(activeElement)?.dataset.timelineKey
+        ?? this.ownedVirtualRow(activeElement)?.dataset.virtualKey;
+      if (focusedKey) return focusedKey;
+    }
+    return undefined;
+  }
+
+  private activeSelectionKeys(): string[] {
+    if (this.selectionGestureActive) return [...this.selectionGestureKeys];
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0) return [];
+    if (selection.isCollapsed) {
+      return this.hasCrossShadowSelectionFallback ? [...this.selectionGestureKeys] : [];
+    }
+    const range = selection.getRangeAt(0);
+    const nodes: Array<Node | null> = [
+      selection.anchorNode,
+      selection.focusNode,
+      range.startContainer,
+      range.endContainer,
+    ];
+    if ('getComposedRanges' in selection && typeof selection.getComposedRanges === 'function') {
+      const composedRanges = selection.getComposedRanges({
+        shadowRoots: this.mountedShadowRoots(),
+      });
+      const composedRange = composedRanges[0];
+      if (composedRange) nodes.push(composedRange.startContainer, composedRange.endContainer);
+    }
+    return [
+      ...nodes
+      .filter((node): node is Node => node !== null)
+      .map((node) => this.timelineKeyForNode(node))
+      .filter((key): key is string => key !== undefined),
+      ...this.selectionGestureKeys,
+    ]
+      .filter((key, index, keys) => keys.indexOf(key) === index);
+  }
+
+  private mountedShadowRoots(): ShadowRoot[] {
+    const roots: ShadowRoot[] = [];
+    const collect = (rootArg: ShadowRoot): void => {
+      for (const element of rootArg.querySelectorAll<HTMLElement>('*')) {
+        if (!element.shadowRoot) continue;
+        roots.push(element.shadowRoot);
+        collect(element.shadowRoot);
+      }
+    };
+    if (this.shadowRoot) collect(this.shadowRoot);
+    return roots;
+  }
+
+  private timelineKeyForNode(nodeArg: Node): string | undefined {
+    let node: Node | null = nodeArg;
+    while (node) {
+      if (node instanceof HTMLElement && node.classList.contains('virtualItem')) {
+        const ownedRow = this.ownedVirtualRow(node);
+        if (ownedRow) return ownedRow.dataset.virtualKey;
+      }
+      if (node instanceof HTMLElement) {
+        const timelineElement = this.ownedTimelineElement(node);
+        if (timelineElement) return timelineElement.dataset.timelineKey;
+      }
+      const root = node.getRootNode();
+      node = node.parentNode ?? (root instanceof ShadowRoot ? root.host : null);
+    }
+    return undefined;
+  }
+
+  private timelineKeyForEvent(eventArg: Event): string | undefined {
+    for (const candidate of eventArg.composedPath()) {
+      if (!(candidate instanceof Element)) continue;
+      const rowKey = this.ownedVirtualRow(candidate)?.dataset.virtualKey;
+      if (rowKey) return rowKey;
+      const timelineKey = this.ownedTimelineElement(candidate)?.dataset.timelineKey;
+      if (timelineKey) return timelineKey;
+    }
+    return undefined;
+  }
+
+  private selectionOwnerForEvent(eventArg: Event): Element | undefined {
+    for (const candidate of eventArg.composedPath()) {
+      if (!(candidate instanceof HTMLElement)) continue;
+      if (
+        (
+          candidate.tagName === 'DEES-HARNESS-MESSAGE'
+          || candidate.tagName === 'DEES-HARNESS-PERMISSION-CARD'
+          || candidate.tagName === 'DEES-HARNESS-QUESTION-CARD'
+        )
+        && this.timelineKeyForNode(candidate)
+      ) return candidate;
+    }
+    return eventArg.composedPath()
+      .filter((candidate): candidate is Element => candidate instanceof Element)
+      .map((candidate) => this.ownedTimelineElement(candidate) ?? this.ownedVirtualRow(candidate))
+      .find((candidate): candidate is HTMLElement => candidate !== undefined);
+  }
+
+  private get hasCrossShadowSelectionFallback(): boolean {
+    return this.selectionGestureKeys.size > 1 || this.selectionGestureCrossesOwners;
+  }
+
+  private captureSelectionSnapshot(selectionArg: Selection | null): typeof this.selectionGestureSnapshot {
+    if (!selectionArg) return undefined;
+    return {
+      anchorNode: selectionArg.anchorNode,
+      anchorOffset: selectionArg.anchorOffset,
+      focusNode: selectionArg.focusNode,
+      focusOffset: selectionArg.focusOffset,
+      rangeCount: selectionArg.rangeCount,
+    };
+  }
+
+  private selectionMatchesGestureSnapshot(selectionArg: Selection): boolean {
+    const snapshot = this.selectionGestureSnapshot;
+    return Boolean(
+      snapshot
+      && snapshot.anchorNode === selectionArg.anchorNode
+      && snapshot.anchorOffset === selectionArg.anchorOffset
+      && snapshot.focusNode === selectionArg.focusNode
+      && snapshot.focusOffset === selectionArg.focusOffset
+      && snapshot.rangeCount === selectionArg.rangeCount,
+    );
+  }
+
+  private clearSelectionGesture(): void {
+    this.selectionGestureKeys.clear();
+    this.selectionGestureActive = false;
+    this.selectionGestureStartOwner = undefined;
+    this.selectionGestureCrossesOwners = false;
+    this.selectionGestureSnapshot = undefined;
+  }
+
+  private readonly handleCardRetention = (eventArg: CustomEvent<{ active?: boolean }>): void => {
+    const pathElements = eventArg.composedPath()
+      .filter((candidate): candidate is HTMLElement => candidate instanceof HTMLElement);
+    const row = pathElements.map((candidate) => this.ownedVirtualRow(candidate))
+      .find((candidate): candidate is HTMLElement => candidate !== undefined);
+    const timelineElement = pathElements.map((candidate) => this.ownedTimelineElement(candidate))
+      .find((candidate): candidate is HTMLElement => candidate !== undefined);
+    const key = row?.dataset.virtualKey ?? timelineElement?.dataset.timelineKey;
+    if (eventArg.detail?.active === true && key) this.explicitRetainedVirtualKey = key;
+    else if (!key || this.explicitRetainedVirtualKey === key) this.explicitRetainedVirtualKey = undefined;
+    this.retainedVirtualKeys = new Set(this.activeVirtualKeys());
+    this.scheduleVirtualRangeUpdate();
+    this.schedulePendingVirtualizationActivation();
+  };
+
+  private ownedVirtualRow(elementArg: Element): HTMLElement | undefined {
+    const row = elementArg.closest<HTMLElement>('.virtualItem');
+    return row?.getRootNode() === this.shadowRoot ? row : undefined;
+  }
+
+  private ownedTimelineElement(elementArg: Element): HTMLElement | undefined {
+    const timelineElement = elementArg.closest<HTMLElement>('[data-timeline-key]');
+    return timelineElement?.getRootNode() === this.shadowRoot ? timelineElement : undefined;
+  }
+
+  private disconnectVirtualObservers(): void {
+    this.virtualRowResizeObserver?.disconnect();
+    this.virtualViewportResizeObserver?.disconnect();
+  }
+
   private repinAfterContentGrowth(): void {
     const content = this.observedScrollContent;
     if (!content) return;
@@ -804,16 +1679,33 @@ export class DeesHarnessMessageList extends DeesElement {
   }
 
   public async disconnectedCallback(): Promise<void> {
+    this.disconnectSelectionChangeListener();
     if (this.followFrame !== null) cancelAnimationFrame(this.followFrame);
     if (this.followSecondFrame !== null) cancelAnimationFrame(this.followSecondFrame);
     if (this.entryFrame !== null) cancelAnimationFrame(this.entryFrame);
     if (this.entrySecondFrame !== null) cancelAnimationFrame(this.entrySecondFrame);
+    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.entryFrame = null;
     this.entrySecondFrame = null;
+    this.virtualMeasureFrame = null;
+    this.virtualRangeFrame = null;
+    this.virtualizationActivationFrame = null;
+    this.pendingVirtualAnchor = undefined;
+    this.pendingFullAnchor = undefined;
+    this.measurementAnchor = undefined;
+    this.pendingVirtualRepin = false;
+    this.explicitRetainedVirtualKey = undefined;
+    this.retainedVirtualKeys.clear();
+    this.clearSelectionGesture();
     this.entryAnimationsEnabled = true;
     this.disconnectContentResizeObserver();
+    this.disconnectVirtualObservers();
+    this.virtualRowResizeObserver = null;
+    this.virtualViewportResizeObserver = null;
     await super.disconnectedCallback();
   }
 }