@design.estate/dees-catalog 6.1.0 → 6.2.0

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

@@ -11,9 +11,17 @@ import {
   directives,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessMessage, IHarnessPermissionRequest, IHarnessQuestionRequest, IHarnessStatus, THarnessStreamDelta } from '../interfaces.js';
+import type {
+  IHarnessMessage,
+  IHarnessPermissionRequest,
+  IHarnessQuestionRequest,
+  IHarnessStatus,
+  THarnessMessageStreamDelta,
+  THarnessStreamDelta,
+} from '../interfaces.js';
 import { DeesHarnessMessage } from '../dees-harness-message/dees-harness-message.js';
-import { DeesHarnessToolRegistry } from '../toolregistry.js';
+import { DeesHarnessToolRegistry, type THarnessToolLayout } from '../toolregistry.js';
+import { harnessApplyMessageDelta } from '../harness.helpers.js';
 import '../dees-harness-status/dees-harness-status.js';
 import '../dees-harness-permission-card/dees-harness-permission-card.js';
 import '../dees-harness-question-card/dees-harness-question-card.js';
@@ -29,11 +37,28 @@ declare global {
 
 const pinThresholdPx = 48;
 
+type TMessageTimelineItem = {
+  kind: 'message';
+  time: number;
+  key: string;
+  message: IHarnessMessage;
+  toolLayout: THarnessToolLayout | null;
+};
+
 type TTimelineItem =
-  | { kind: 'message'; time: number; key: string; message: IHarnessMessage }
+  | TMessageTimelineItem
   | { kind: 'permission'; time: number; key: string; request: IHarnessPermissionRequest }
   | { kind: 'question'; time: number; key: string; question: IHarnessQuestionRequest };
 
+interface IToolGroupTimelineItem {
+  kind: 'tool-group';
+  key: string;
+  layout: THarnessToolLayout;
+  messages: TMessageTimelineItem[];
+}
+
+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
@@ -67,9 +92,19 @@ export class DeesHarnessMessageList extends DeesElement {
   @property({ type: Boolean })
   accessor autoFollow: boolean = true;
 
+  @property({ type: Boolean })
+  accessor hideScrollbar: boolean = false;
+
+  @property({ type: Boolean })
+  accessor fadeScrollEdges: boolean = false;
+
   @property({ attribute: false })
   accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
 
+  /** Nested transcripts set this false to prevent recursive inline streams. */
+  @property({ type: Boolean })
+  accessor allowSubtaskStreams: boolean = true;
+
   @property({ type: Boolean })
   accessor showRoles: boolean = true;
 
@@ -88,6 +123,16 @@ export class DeesHarnessMessageList extends DeesElement {
   @state()
   accessor entryAnimationsEnabled: boolean = false;
 
+  @state()
+  accessor scrollFadeTop: boolean = false;
+
+  @state()
+  accessor scrollFadeBottom: boolean = false;
+
+  private readonly toolGroupIdByMessageId = new Map<string, string>();
+  private nextToolGroupId = 1;
+  private timelineRenderItems: TTimelineRenderItem[] = [];
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -104,10 +149,47 @@ export class DeesHarnessMessageList extends DeesElement {
       .scroll {
         height: 100%;
         overflow-y: auto;
+        overscroll-behavior: contain;
         scrollbar-width: thin;
         scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
         padding: var(--dees-spacing-md);
         box-sizing: border-box;
+        container: harness-transcript / inline-size;
+      }
+
+      .scroll.hideScrollbar {
+        scrollbar-width: none;
+      }
+
+      .scroll.hideScrollbar::-webkit-scrollbar {
+        display: none;
+      }
+
+      .scroll.fadeTop {
+        -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 40px, black 100%);
+        mask-image: linear-gradient(to bottom, transparent 0, black 40px, black 100%);
+      }
+
+      .scroll.fadeBottom {
+        -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 40px), transparent 100%);
+        mask-image: linear-gradient(to bottom, black 0, black calc(100% - 40px), transparent 100%);
+      }
+
+      .scroll.fadeTop.fadeBottom {
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          transparent 0,
+          black 40px,
+          black calc(100% - 40px),
+          transparent 100%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          transparent 0,
+          black 40px,
+          black calc(100% - 40px),
+          transparent 100%
+        );
       }
 
       /* observed by the follow ResizeObserver; fills the viewport so the
@@ -118,14 +200,62 @@ export class DeesHarnessMessageList extends DeesElement {
         flex-direction: column;
       }
 
-      .stack {
+      ::slotted([slot='leading']) {
         display: block;
+        min-width: 0;
+        margin-bottom: var(--dees-spacing-sm);
       }
 
-      /* spacing via sibling margins (not grid gap) so a new entry's margin
-         animates together with its height while it fades in */
-      .stack > * + * {
-        margin-top: var(--dees-spacing-sm);
+      .stack {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--dees-spacing-sm);
+      }
+
+      .stack > * {
+        min-width: 0;
+        grid-column: 1 / -1;
+      }
+
+      .toolGroup {
+        min-width: 0;
+      }
+
+      .toolGrid {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--dees-spacing-sm);
+        min-width: 0;
+      }
+
+      .toolGrid > dees-harness-message {
+        min-width: 0;
+        align-self: start;
+      }
+
+      .toolGrid > dees-harness-message[data-tool-layout='full-row'] {
+        grid-column: 1 / -1;
+      }
+
+      @container harness-transcript (min-width: 760px) {
+        .toolGrid.toolCount2,
+        .toolGrid.toolCount3,
+        .toolGrid.toolCount4 {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+
+      @container harness-transcript (min-width: 1120px) {
+        .toolGrid.toolCount3,
+        .toolGrid.toolCount4 {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+      }
+
+      @container harness-transcript (min-width: 1480px) {
+        .toolGrid.toolCount4 {
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
       }
 
       .statusRow {
@@ -175,35 +305,19 @@ export class DeesHarnessMessageList extends DeesElement {
       .jumpChip:hover {
         background: var(--dees-material-thick-bg);
       }
+
     `,
   ];
 
   /** messages and permissions merged chronologically (stable ids as keys) */
   private get timelineItems(): TTimelineItem[] {
-    // Running subagents pin near the end — live activity belongs where the
-    // eye is — ordered by start time among themselves, and still ABOVE
-    // pending permission/question cards (those demand action). On completion
-    // a subagent returns to its chronological position in the flow.
-    // Stale ones do not pin: a "running" call is orphaned when the session
-    // itself is idle (nothing can still be running it), or ancient when 20+
-    // messages have passed it by.
-    const runningSubagentBase = Number.MAX_SAFE_INTEGER / 2;
-    const sessionActive = this.status?.type === 'busy';
-    const items: TTimelineItem[] = this.messages.map((message, index) => {
-      const call = message.toolCall;
-      const runningSubagent = Boolean(call)
-        && (call!.name === 'task' || call!.name === 'subagent' || call!.kind === 'subtask')
-        && (call!.status === 'pending' || call!.status === 'running');
-      const stale = !sessionActive || this.messages.length - 1 - index >= 20;
-      return {
-        kind: 'message' as const,
-        time: runningSubagent && !stale
-          ? runningSubagentBase + (message.createdAt || 0)
-          : message.createdAt || 0,
-        key: message.id,
-        message,
-      };
-    });
+    const items: TTimelineItem[] = this.messages.map((message) => ({
+      kind: 'message' as const,
+      time: message.createdAt || 0,
+      key: `message:${message.id}`,
+      message,
+      toolLayout: message.toolCall ? this.toolRegistry.resolveLayout(message.toolCall) : null,
+    }));
     for (const request of this.permissions) {
       items.push({
         kind: 'permission' as const,
@@ -212,7 +326,7 @@ export class DeesHarnessMessageList extends DeesElement {
         time: request.response
           ? (request.respondedAt ?? request.createdAt ?? 0)
           : Number.MAX_SAFE_INTEGER,
-        key: `perm:${request.id}`,
+        key: `permission:${request.id}`,
         request,
       });
     }
@@ -229,33 +343,93 @@ export class DeesHarnessMessageList extends DeesElement {
     return items.sort((left, right) => left.time - right.time);
   }
 
-  public render(): TemplateResult {
+  private buildTimelineRenderItems(): TTimelineRenderItem[] {
     const items = this.timelineItems;
+    const retainedToolIds = new Set(
+      items
+        .filter((item): item is TMessageTimelineItem => item.kind === 'message' && item.toolLayout !== null)
+        .map((item) => item.message.id),
+    );
+    for (const messageId of this.toolGroupIdByMessageId.keys()) {
+      if (!retainedToolIds.has(messageId)) this.toolGroupIdByMessageId.delete(messageId);
+    }
+
+    const result: TTimelineRenderItem[] = [];
+    const usedGroupIds = new Set<string>();
+    for (let index = 0; index < items.length;) {
+      const item = items[index];
+      if (item.kind !== 'message' || item.toolLayout === null) {
+        result.push(item);
+        index += 1;
+        continue;
+      }
+
+      const layout = item.toolLayout;
+      const run: TMessageTimelineItem[] = [];
+      while (index < items.length) {
+        const candidate = items[index];
+        if (
+          candidate.kind !== 'message'
+          || candidate.toolLayout !== layout
+        ) break;
+        run.push(candidate);
+        index += 1;
+      }
+      this.appendToolRun(result, run, layout, usedGroupIds);
+    }
+    return result;
+  }
+
+  public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changedProperties);
+    this.timelineRenderItems = this.buildTimelineRenderItems();
+  }
+
+  private appendToolRun(
+    targetArg: TTimelineRenderItem[],
+    runArg: TMessageTimelineItem[],
+    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,
+    });
+  }
+
+  public render(): TemplateResult {
+    const items = this.timelineRenderItems;
     return html`
       <div
-        class="scroll"
+        class=${`scroll ${this.hideScrollbar ? 'hideScrollbar' : ''} ${this.scrollFadeTop ? 'fadeTop' : ''} ${this.scrollFadeBottom ? 'fadeBottom' : ''}`}
         @scroll=${this.handleScroll}
         @wheel=${this.handleUserScrollIntent}
         @touchmove=${this.handleUserScrollIntent}
+        @pointerdown=${this.handleUserScrollIntent}
+        @keydown=${this.handleUserScrollIntent}
       >
         <div class="scrollContent">
+        <slot name="leading"></slot>
         ${items.length
           ? html`
               <div class="stack">
                 ${repeat(
                   items,
                   (item) => item.key,
-                  (item) => item.kind === 'message'
-                    ? html`
-                        <dees-harness-message
-                          data-message-id=${item.message.id}
-                          .message=${item.message}
-                          .showRole=${this.showRoles}
-                          .showTimestamp=${this.showTimestamps}
-                          .toolRegistry=${this.toolRegistry}
-                          .suppressEntry=${!this.entryAnimationsEnabled}
-                        ></dees-harness-message>
-                      `
+                  (item) => item.kind === 'tool-group'
+                    ? this.renderToolGroup(item)
+                    : item.kind === 'message'
+                      ? this.renderMessage(item)
                     : item.kind === 'permission'
                       ? html`
                           <dees-harness-permission-card
@@ -296,6 +470,41 @@ export class DeesHarnessMessageList extends DeesElement {
     `;
   }
 
+  private renderMessage(itemArg: TMessageTimelineItem): TemplateResult {
+    return html`
+      <dees-harness-message
+        data-message-id=${itemArg.message.id}
+        data-tool-layout=${itemArg.toolLayout ?? 'message'}
+        .message=${itemArg.message}
+        .showRole=${this.showRoles}
+        .showTimestamp=${this.showTimestamps}
+        .toolRegistry=${this.toolRegistry}
+        .allowSubtaskStreams=${this.allowSubtaskStreams}
+        .suppressEntry=${!this.entryAnimationsEnabled}
+      ></dees-harness-message>
+    `;
+  }
+
+  private renderToolGroup(groupArg: IToolGroupTimelineItem): TemplateResult {
+    const count = groupArg.messages.length;
+    const countClass = count >= 4 ? 'toolCount4' : `toolCount${count}`;
+    return html`
+      <section
+        class="toolGroup"
+        data-tool-group-id=${groupArg.key}
+        data-tool-layout=${groupArg.layout}
+      >
+        <div class=${`toolGrid ${countClass}`}>
+          ${repeat(
+            groupArg.messages,
+            (item) => item.key,
+            (item) => this.renderMessage(item),
+          )}
+        </div>
+      </section>
+    `;
+  }
+
   // ------------------------------------------------------------------ deltas
 
   /**
@@ -304,51 +513,50 @@ export class DeesHarnessMessageList extends DeesElement {
    * idempotent; only the target element re-renders.
    */
   public applyDelta(delta: THarnessStreamDelta): void {
+    if (delta.parentMessageId) {
+      if (!this.allowSubtaskStreams) return;
+      const parentMessage = this.messages.find((candidate) => candidate.id === delta.parentMessageId);
+      if (!parentMessage) return;
+      const parentElement = this.messageElement(delta.parentMessageId);
+      const { parentMessageId: _parentMessageId, ...childDelta } = delta;
+      const localDelta = childDelta as THarnessMessageStreamDelta;
+      const appliedByElement = parentElement?.applySubtaskDelta(localDelta) ?? false;
+      if (!appliedByElement && parentMessage.toolCall?.subtask?.previewState === 'ready') {
+        if (harnessApplyMessageDelta(parentMessage.toolCall.subtask.messages, localDelta)) {
+          parentElement?.requestUpdate();
+        }
+      }
+      this.followAfterContentChange();
+      return;
+    }
     const message = this.messages.find((candidate) => candidate.id === delta.messageId);
     if (!message) return;
     const element = this.messageElement(delta.messageId);
     switch (delta.type) {
       case 'text':
         if (element) element.appendTextDelta(delta.delta);
-        else {
-          message.text += delta.delta;
-          message.streaming = true;
-        }
+        else harnessApplyMessageDelta(this.messages, delta);
         break;
       case 'reasoning-start':
         if (element) element.appendReasoningDelta(delta.partId, '', delta.startedAt);
-        else {
-          message.reasoning ??= [];
-          message.reasoning.push({ id: delta.partId, text: '', startedAt: delta.startedAt ?? Date.now() });
-        }
+        else harnessApplyMessageDelta(this.messages, delta);
         break;
       case 'reasoning':
         if (element) element.appendReasoningDelta(delta.partId, delta.delta);
-        else {
-          message.reasoning ??= [];
-          const part = message.reasoning.find((candidate) => candidate.id === delta.partId);
-          if (part) part.text += delta.delta;
-          else message.reasoning.push({ id: delta.partId, text: delta.delta, startedAt: Date.now() });
-        }
+        else harnessApplyMessageDelta(this.messages, delta);
         break;
       case 'reasoning-end':
         if (element) element.endReasoning(delta.partId, delta.endedAt);
-        else {
-          const part = message.reasoning?.find((candidate) => candidate.id === delta.partId);
-          if (part) part.endedAt = delta.endedAt ?? Date.now();
-        }
+        else harnessApplyMessageDelta(this.messages, delta);
         break;
       case 'tool-update':
         message.toolCall = { ...(message.toolCall ?? { id: delta.tool.id, name: '', status: 'pending' }), ...delta.tool };
         element?.requestUpdate();
+        this.requestUpdate();
         break;
       case 'message-end':
         if (element) element.endStream(delta.usage, delta.error);
-        else {
-          message.streaming = false;
-          if (delta.usage) message.usage = delta.usage;
-          if (delta.error) message.error = delta.error;
-        }
+        else harnessApplyMessageDelta(this.messages, delta);
         break;
     }
     this.followAfterContentChange();
@@ -372,8 +580,14 @@ export class DeesHarnessMessageList extends DeesElement {
   }
 
   private contentResizeObserver: ResizeObserver | null = null;
+  private observedScrollContent: Element | null = null;
+  private observedContentBlockSize: number | null = null;
+  private followFrame: number | null = null;
+  private followSecondFrame: number | null = null;
+  private entryFrame: number | null = null;
+  private entrySecondFrame: number | null = null;
   // Intent-based following: the list stays pinned until the user explicitly
-  // moves away from the bottom (wheel/touch upward or a scrollbar drag), and
+  // moves away from the bottom (wheel/touch/keyboard or a scrollbar drag), and
   // re-pins the moment they return. Late layout growth — async markdown
   // parses, images, entry animations — re-pins through the content
   // ResizeObserver for as long as the user has not left the bottom, so
@@ -395,13 +609,31 @@ export class DeesHarnessMessageList extends DeesElement {
       this.showJumpChip = true;
       return;
     }
-    this.repinToBottom();
-    // catch the first post-render layout; later growth re-pins via the observer
-    requestAnimationFrame(() => requestAnimationFrame(this.repinToBottom));
+    this.repinAfterContentGrowth();
+    // Catch post-render growth; later asynchronous growth uses the observer.
+    if (this.followFrame !== null || this.followSecondFrame !== null) return;
+    this.followFrame = requestAnimationFrame(() => {
+      this.followFrame = null;
+      if (!this.isConnected) return;
+      this.repinAfterContentGrowth();
+      this.followSecondFrame = requestAnimationFrame(() => {
+        this.followSecondFrame = null;
+        if (!this.isConnected) return;
+        this.repinAfterContentGrowth();
+      });
+    });
   }
 
   private handleUserScrollIntent = (event: Event): void => {
+    if (event.composedPath().some(
+      (candidate) => candidate instanceof DeesHarnessMessageList && candidate !== this,
+    )) return;
     if (event.type === 'wheel' && (event as WheelEvent).deltaY >= 0) return;
+    if (
+      event.type === 'keydown'
+      && !['ArrowUp', 'PageUp', 'Home'].includes((event as KeyboardEvent).key)
+    ) return;
+    if (event.type === 'pointerdown' && event.target !== this.scrollContainer) return;
     this.userUnpinned = true;
   };
 
@@ -416,21 +648,20 @@ export class DeesHarnessMessageList extends DeesElement {
       this.lastObservedScrollTop = container.scrollTop;
       this.showJumpChip = false;
     }
+    this.syncScrollEdgeFades();
   }
 
   private handleScroll = (): void => {
     const container = this.scrollContainer;
     if (!container) return;
     const top = container.scrollTop;
+    this.syncScrollEdgeFades();
     if (this.isPinnedToBottom) {
       // reaching the bottom — by any means — resumes following
       this.userUnpinned = false;
       if (this.showJumpChip) {
         this.showJumpChip = false;
       }
-    } else if (top < this.lastObservedScrollTop - 1) {
-      // moved up without our doing (scrollbar drag, keyboard): stop following
-      this.userUnpinned = true;
     }
     this.lastObservedScrollTop = top;
   };
@@ -440,26 +671,108 @@ export class DeesHarnessMessageList extends DeesElement {
     if (changedProperties.has('messages') || changedProperties.has('status') || changedProperties.has('permissions') || changedProperties.has('questions')) {
       this.followAfterContentChange();
     }
+    if (changedProperties.has('autoFollow')) {
+      if (this.autoFollow) {
+        this.connectContentResizeObserver();
+        this.scrollToBottom(true);
+      }
+      else this.disconnectContentResizeObserver();
+    }
+    if (
+      changedProperties.has('fadeScrollEdges')
+      || changedProperties.has('messages')
+      || changedProperties.has('permissions')
+      || changedProperties.has('questions')
+    ) this.syncScrollEdgeFades();
   }
 
   public firstUpdated(changedProperties: Map<string, any>): void {
     super.firstUpdated(changedProperties);
-    const content = this.shadowRoot?.querySelector('.scrollContent');
-    if (content) {
-      this.contentResizeObserver = new ResizeObserver(this.repinToBottom);
-      this.contentResizeObserver.observe(content);
-    }
+    if (!this.isConnected) return;
+    this.connectContentResizeObserver();
+    this.repinToBottom();
+    this.syncScrollEdgeFades();
     // let the initial batch paint without entry animations, then enable them
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
+    this.entryFrame = requestAnimationFrame(() => {
+      this.entryFrame = null;
+      if (!this.isConnected) return;
+      this.entrySecondFrame = requestAnimationFrame(() => {
+        this.entrySecondFrame = null;
+        if (!this.isConnected) return;
         this.entryAnimationsEnabled = true;
       });
     });
   }
 
-  public async disconnectedCallback(): Promise<void> {
+  public async connectedCallback(): Promise<void> {
+    const connected = super.connectedCallback();
+    if (this.hasUpdated) this.connectContentResizeObserver();
+    await connected;
+  }
+
+  private connectContentResizeObserver(): void {
+    if (!this.isConnected || !this.autoFollow) return;
+    const content = this.shadowRoot?.querySelector('.scrollContent');
+    if (!content || (this.contentResizeObserver && content === this.observedScrollContent)) return;
+    this.contentResizeObserver?.disconnect();
+    this.observedContentBlockSize = content.getBoundingClientRect().height;
+    this.contentResizeObserver = new ResizeObserver((entries) => {
+      const entry = entries.find((candidate) => candidate.target === this.observedScrollContent);
+      if (!entry) return;
+      const blockSize = entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height;
+      this.handleContentBlockSize(blockSize);
+    });
+    this.contentResizeObserver.observe(content);
+    this.observedScrollContent = content;
+  }
+
+  private repinAfterContentGrowth(): void {
+    const content = this.observedScrollContent;
+    if (!content) return;
+    this.handleContentBlockSize(content.getBoundingClientRect().height);
+  }
+
+  private handleContentBlockSize(blockSizeArg: number): void {
+    const previousBlockSize = this.observedContentBlockSize;
+    this.observedContentBlockSize = blockSizeArg;
+    // Disclosure collapse and window eviction are not new streamed content.
+    // Let the browser handle shrink instead of fighting it with repins.
+    if (previousBlockSize !== null && blockSizeArg > previousBlockSize + 0.5) {
+      this.repinToBottom();
+    }
+    this.syncScrollEdgeFades();
+  }
+
+  private syncScrollEdgeFades(): void {
+    const container = this.scrollContainer;
+    const fadeTop = Boolean(this.fadeScrollEdges && container && container.scrollTop > 1);
+    const fadeBottom = Boolean(
+      this.fadeScrollEdges
+      && container
+      && container.scrollHeight - container.scrollTop - container.clientHeight > 1,
+    );
+    if (this.scrollFadeTop !== fadeTop) this.scrollFadeTop = fadeTop;
+    if (this.scrollFadeBottom !== fadeBottom) this.scrollFadeBottom = fadeBottom;
+  }
+
+  private disconnectContentResizeObserver(): void {
     this.contentResizeObserver?.disconnect();
     this.contentResizeObserver = null;
+    this.observedScrollContent = null;
+    this.observedContentBlockSize = null;
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    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);
+    this.followFrame = null;
+    this.followSecondFrame = null;
+    this.entryFrame = null;
+    this.entrySecondFrame = null;
+    this.entryAnimationsEnabled = true;
+    this.disconnectContentResizeObserver();
     await super.disconnectedCallback();
   }
 }

package/ts_web/elements/00group-harness/dees-harness-overflow-text.demo.ts

@@ -0,0 +1,31 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .overflowTextDemo {
+      display: grid;
+      gap: 16px;
+      max-width: 360px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-secondary);
+    }
+    .overflowTextDemo .label {
+      color: var(--dees-color-text-muted);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+  </style>
+  <div class="overflowTextDemo">
+    <div class="label">short text</div>
+    <dees-harness-overflow-text>
+      Fits without a fade
+    </dees-harness-overflow-text>
+    <div class="label">overflowing text</div>
+    <dees-harness-overflow-text>
+      This long activity description reveals its hidden ending after the initial delay or on hover
+    </dees-harness-overflow-text>
+  </div>
+`;