@design.estate/dees-catalog 6.7.1 → 6.8.1

package/ts_web/elements/00group-harness/dees-harness-permission-card/dees-harness-permission-card.ts

@@ -10,7 +10,11 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessPermissionRequest, THarnessPermissionResponse } from '../interfaces.js';
+import type {
+  IHarnessPermissionRequest,
+  IHarnessPermissionViewState,
+  THarnessPermissionResponse,
+} from '../interfaces.js';
 import { harnessStringifyValue } from '../harness.helpers.js';
 import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-feedback/dees-badge/dees-badge.js';
@@ -45,6 +49,12 @@ export class DeesHarnessPermissionCard extends DeesElement {
   @property({ type: Boolean })
   accessor busy: boolean = false;
 
+  @property({ attribute: false })
+  accessor viewState: IHarnessPermissionViewState | undefined = undefined;
+
+  @property({ type: Boolean })
+  accessor suppressEntry: boolean = false;
+
   @state()
   accessor remember: boolean = false;
 
@@ -53,7 +63,11 @@ export class DeesHarnessPermissionCard extends DeesElement {
   accessor answered: THarnessPermissionResponse | undefined = undefined;
 
   public get effectiveResponse(): THarnessPermissionResponse | undefined {
-    return this.request.response ?? this.answered;
+    return this.request.response ?? this.answered ?? this.viewState?.answered;
+  }
+
+  private get effectiveRemember(): boolean {
+    return this.remember || this.viewState?.remember === true;
   }
 
   public static styles = [
@@ -82,6 +96,10 @@ export class DeesHarnessPermissionCard extends DeesElement {
         }
       }
 
+      :host(.no-entry) {
+        animation: none;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         :host {
           animation: none;
@@ -183,7 +201,7 @@ export class DeesHarnessPermissionCard extends DeesElement {
           : ''}
         <div class="actions">
           ${this.effectiveResponse
-            ? html`<span class="answeredNote">Answered: ${this.effectiveResponse}${this.remember ? ' (remembered)' : ''}</span>`
+            ? html`<span class="answeredNote">Answered: ${this.effectiveResponse}${this.effectiveRemember ? ' (remembered)' : ''}</span>`
             : html`
                 <dees-button type="accent" size="sm" ?disabled=${disabled} @clicked=${() => this.respond('once')}>
                   Allow Once
@@ -197,11 +215,12 @@ export class DeesHarnessPermissionCard extends DeesElement {
                 <label class="rememberLabel">
                   <input
                     type="checkbox"
-                    .checked=${this.remember}
+                    .checked=${this.effectiveRemember}
                     ?disabled=${disabled}
-                    @change=${(event: Event) => {
-                      this.remember = (event.currentTarget as HTMLInputElement).checked;
-                    }}
+                      @change=${(event: Event) => {
+                        this.remember = (event.currentTarget as HTMLInputElement).checked;
+                        if (this.viewState) this.viewState.remember = this.remember;
+                      }}
                   />
                   remember for this session
                 </label>
@@ -213,13 +232,18 @@ export class DeesHarnessPermissionCard extends DeesElement {
 
   private respond(response: THarnessPermissionResponse): void {
     if (this.busy || this.effectiveResponse !== undefined) return;
+    const remember = this.effectiveRemember || response === 'always';
     this.answered = response;
+    if (this.viewState) {
+      this.viewState.answered = response;
+      this.viewState.remember = remember;
+    }
     this.dispatchEvent(
       new CustomEvent('harness-permission-response', {
         detail: {
           requestId: this.request.id,
           response,
-          remember: this.remember || response === 'always',
+          remember,
           request: this.request,
         },
         bubbles: true,
@@ -227,4 +251,9 @@ export class DeesHarnessPermissionCard extends DeesElement {
       }),
     );
   }
+
+  public firstUpdated(changedPropertiesArg: Map<string, unknown>): void {
+    super.firstUpdated(changedPropertiesArg);
+    if (this.suppressEntry) this.classList.add('no-entry');
+  }
 }

package/ts_web/elements/00group-harness/dees-harness-question-card/dees-harness-question-card.ts

@@ -10,7 +10,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessQuestionRequest } from '../interfaces.js';
+import type { IHarnessQuestionRequest, IHarnessQuestionViewState } from '../interfaces.js';
 import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
@@ -38,6 +38,12 @@ export class DeesHarnessQuestionCard extends DeesElement {
   @property({ type: Boolean })
   accessor busy: boolean = false;
 
+  @property({ attribute: false })
+  accessor viewState: IHarnessQuestionViewState | undefined = undefined;
+
+  @property({ type: Boolean })
+  accessor suppressEntry: boolean = false;
+
   /** local optimistic answer; request.response (host echo) takes precedence */
   @state()
   accessor answered: string[] | undefined = undefined;
@@ -49,7 +55,17 @@ export class DeesHarnessQuestionCard extends DeesElement {
   accessor customText: string = '';
 
   public get effectiveResponse(): string[] | undefined {
-    return this.request.response ?? this.answered;
+    return this.request.response ?? this.answered ?? this.viewState?.answered;
+  }
+
+  private get effectiveSelected(): ReadonlySet<string> {
+    return this.selected.size > 0
+      ? this.selected
+      : new Set(this.viewState?.selected ?? []);
+  }
+
+  private get effectiveCustomText(): string {
+    return this.customText || this.viewState?.customText || '';
   }
 
   public static styles = [
@@ -72,6 +88,10 @@ export class DeesHarnessQuestionCard extends DeesElement {
         }
       }
 
+      :host(.no-entry) {
+        animation: none;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         :host {
           animation: none;
@@ -230,7 +250,7 @@ export class DeesHarnessQuestionCard extends DeesElement {
                     <div class="options" role=${request.multiSelect ? 'group' : 'radiogroup'}>
                       ${request.options.map((option) => html`
                         <button
-                          class="option ${this.selected.has(option.label) ? 'selected' : ''}"
+                          class="option ${this.effectiveSelected.has(option.label) ? 'selected' : ''}"
                           type="button"
                           ?disabled=${disabled}
                           @click=${() => this.handleOptionClick(option.label)}
@@ -249,23 +269,24 @@ export class DeesHarnessQuestionCard extends DeesElement {
                     <div class="customRow">
                       <input
                         placeholder="Answer in your own words…"
-                        .value=${this.customText}
+                        .value=${this.effectiveCustomText}
                         ?disabled=${disabled}
                         @input=${(event: Event) => {
                           this.customText = (event.currentTarget as HTMLInputElement).value;
+                          if (this.viewState) this.viewState.customText = this.customText;
                         }}
                         @keydown=${(event: KeyboardEvent) => {
-                          if (event.key === 'Enter' && this.customText.trim()) {
-                            this.respond([...this.selected, this.customText.trim()]);
+                          if (event.key === 'Enter' && this.effectiveCustomText.trim()) {
+                            this.respond([...this.effectiveSelected, this.effectiveCustomText.trim()]);
                           }
                         }}
                       />
                       <dees-button
                         size="sm"
-                        ?disabled=${disabled || (!this.customText.trim() && !this.selected.size)}
+                        ?disabled=${disabled || (!this.effectiveCustomText.trim() && !this.effectiveSelected.size)}
                         @clicked=${() => {
-                          const answers = [...this.selected];
-                          if (this.customText.trim()) answers.push(this.customText.trim());
+                          const answers = [...this.effectiveSelected];
+                          if (this.effectiveCustomText.trim()) answers.push(this.effectiveCustomText.trim());
                           this.respond(answers);
                         }}
                       >Send Answer</dees-button>
@@ -278,8 +299,8 @@ export class DeesHarnessQuestionCard extends DeesElement {
                       <dees-button
                         type="accent"
                         size="sm"
-                        ?disabled=${disabled || !this.selected.size}
-                        @clicked=${() => this.respond([...this.selected])}
+                        ?disabled=${disabled || !this.effectiveSelected.size}
+                        @clicked=${() => this.respond([...this.effectiveSelected])}
                       >Confirm</dees-button>
                     </div>
                   `
@@ -292,10 +313,11 @@ export class DeesHarnessQuestionCard extends DeesElement {
   private handleOptionClick(label: string): void {
     if (this.busy || this.effectiveResponse !== undefined) return;
     if (this.request.multiSelect) {
-      const next = new Set(this.selected);
+      const next = new Set(this.effectiveSelected);
       if (next.has(label)) next.delete(label);
       else next.add(label);
       this.selected = next;
+      if (this.viewState) this.viewState.selected = [...next];
       return;
     }
     this.respond([label]);
@@ -304,6 +326,7 @@ export class DeesHarnessQuestionCard extends DeesElement {
   private respond(answers: string[]): void {
     if (this.busy || this.effectiveResponse !== undefined || !answers.length) return;
     this.answered = answers;
+    if (this.viewState) this.viewState.answered = answers;
     this.dispatchEvent(
       new CustomEvent('harness-question-response', {
         detail: {
@@ -316,4 +339,9 @@ export class DeesHarnessQuestionCard extends DeesElement {
       }),
     );
   }
+
+  public firstUpdated(changedPropertiesArg: Map<string, unknown>): void {
+    super.firstUpdated(changedPropertiesArg);
+    if (this.suppressEntry) this.classList.add('no-entry');
+  }
 }

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

@@ -10,7 +10,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessReasoningPart } from '../interfaces.js';
+import type { IHarnessMessageViewState, IHarnessReasoningPart } from '../interfaces.js';
 import { harnessFormatDuration } from '../harness.helpers.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
@@ -37,6 +37,9 @@ export class DeesHarnessReasoning extends DeesElement {
   @property({ attribute: false })
   accessor reasoningParts: IHarnessReasoningPart[] = [];
 
+  @property({ attribute: false })
+  accessor viewState: IHarnessMessageViewState | undefined = undefined;
+
   @state()
   accessor expanded: boolean | undefined = undefined;
 
@@ -178,7 +181,7 @@ export class DeesHarnessReasoning extends DeesElement {
   }
 
   public get isOpen(): boolean {
-    return this.expanded ?? this.isStreaming;
+    return this.expanded ?? this.viewState?.reasoningExpanded ?? this.isStreaming;
   }
 
   /** All parts joined into the one full trace the expanded body shows. */
@@ -224,6 +227,7 @@ export class DeesHarnessReasoning extends DeesElement {
           aria-expanded=${this.isOpen ? 'true' : 'false'}
           @click=${() => {
             this.expanded = !this.isOpen;
+            if (this.viewState) this.viewState.reasoningExpanded = this.expanded;
           }}
         >
           <span class="chevron ${this.isOpen ? 'open' : ''}">

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

@@ -65,6 +65,7 @@ interface IResourcePointerDragGesture {
   source: HTMLElement;
   resourceId: string;
   fromSessionId: string | null;
+  eligibleSessionIds: ReadonlySet<string>;
   startClientX: number;
   startClientY: number;
   grabOffsetX: number;
@@ -1196,9 +1197,18 @@ export class DeesHarnessSessionList extends DeesElement {
       ) this.closeResourceContext(this.resourceContextGeneration);
       this.reconcilePendingResourceAssociation();
     }
-    if (changedProperties.has('eligibleSessionIdsByResourceId')) {
+    if (
+      changedProperties.has('sessions')
+      || changedProperties.has('eligibleSessionIdsByResourceId')
+    ) {
       const gesture = this.pointerDragGesture;
-      if (gesture?.type === 'resource') this.finishPointerDrag(false);
+      if (
+        gesture?.type === 'resource'
+        && !this.sameSessionIds(
+          gesture.eligibleSessionIds,
+          new Set(this.eligibleSessionIds(gesture.resourceId)),
+        )
+      ) this.finishPointerDrag(false);
     }
   }
 
@@ -1832,6 +1842,7 @@ export class DeesHarnessSessionList extends DeesElement {
       source,
       resourceId: resourceArg.id,
       fromSessionId: fromSessionIdArg,
+      eligibleSessionIds: new Set(this.eligibleSessionIds(resourceArg.id)),
       startClientX: eventArg.clientX,
       startClientY: eventArg.clientY,
       grabOffsetX: eventArg.clientX - sourceRect.left,
@@ -2316,6 +2327,11 @@ export class DeesHarnessSessionList extends DeesElement {
     return result;
   }
 
+  private sameSessionIds(firstArg: ReadonlySet<string>, secondArg: ReadonlySet<string>): boolean {
+    return firstArg.size === secondArg.size
+      && [...firstArg].every((sessionId) => secondArg.has(sessionId));
+  }
+
   private isResourceTargetEligible(resourceIdArg: string, sessionIdArg: string): boolean {
     return this.eligibleSessionIds(resourceIdArg).includes(sessionIdArg);
   }

package/ts_web/elements/00group-harness/dees-harness-session-sidebar/dees-harness-session-sidebar.ts

@@ -694,8 +694,14 @@ export class DeesHarnessSessionSidebar extends DeesElement {
           <span class="sectionHeadingText">${labelArg}</span>
           ${summaryArg ? html`<span class="sectionSummary">${summaryArg}</span>` : ''}
         </button>
-        <div id=${contentId} class="sectionContent" ?hidden=${!expanded}>
-          ${contentArg}
+        <div
+          id=${contentId}
+          class="sectionContent"
+          role="region"
+          aria-hidden=${String(!expanded)}
+          ?hidden=${!expanded}
+        >
+          ${expanded ? contentArg : ''}
         </div>
       </section>
     `;

package/ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
 import type {
+  IHarnessMessageViewState,
   IHarnessToolCall,
   THarnessContentBlock,
   THarnessMessageStreamDelta,
@@ -69,6 +70,9 @@ export class DeesHarnessToolCard extends DeesElement {
   @property({ type: Boolean })
   accessor allowSubtaskStreams: boolean = true;
 
+  @property({ attribute: false })
+  accessor viewState: IHarnessMessageViewState | undefined = undefined;
+
   @state()
   accessor expanded: boolean | undefined = undefined;
 
@@ -102,9 +106,12 @@ export class DeesHarnessToolCard extends DeesElement {
   private observedBodyInner: Element | null = null;
   private fullscreenPortal: HTMLElementTagNameMap['dees-harness-tool-fullscreen'] | null = null;
   private disclosureFrame: number | null = null;
+  private returnScrollFrame: number | null = null;
   private subtaskResultElement: HTMLElement | null = null;
   private subtaskResultResizeObserver: ResizeObserver | null = null;
   private terminalTailFollowing = true;
+  private terminalScrollHydrated = false;
+  private terminalScrollHydrationFrame: number | null = null;
   private terminalTailReturnTimeout: ReturnType<typeof setTimeout> | null = null;
   private terminalTailReturnDelayMs = 5000;
 
@@ -669,6 +676,7 @@ export class DeesHarnessToolCard extends DeesElement {
 
   public get isOpen(): boolean {
     if (this.expanded !== undefined) return this.expanded;
+    if (this.viewState?.toolExpanded !== undefined) return this.viewState.toolExpanded;
     const descriptor = this.descriptor;
     if (descriptor.kind === 'subtask' && this.call.subtask) {
       return this.allowSubtaskStreams
@@ -778,12 +786,14 @@ export class DeesHarnessToolCard extends DeesElement {
       if (this.disclosureFrame !== null) cancelAnimationFrame(this.disclosureFrame);
       this.disclosureFrame = null;
       this.expanded = false;
+      if (this.viewState) this.viewState.toolExpanded = false;
       return;
     }
     if (this.bodyMounted) {
       if (this.disclosureFrame !== null) cancelAnimationFrame(this.disclosureFrame);
       this.disclosureFrame = null;
       this.expanded = true;
+      if (this.viewState) this.viewState.toolExpanded = true;
       return;
     }
     this.bodyMounted = true;
@@ -795,12 +805,18 @@ export class DeesHarnessToolCard extends DeesElement {
         if (!this.isConnected || this.expanded !== false) return;
         this.shadowRoot?.querySelector<HTMLElement>('.bodyDisclosure')?.getBoundingClientRect();
         this.expanded = true;
+        if (this.viewState) this.viewState.toolExpanded = true;
       });
     });
   };
 
   private readonly openFullscreen = (): void => {
     if (this.fullscreenPortal || this.hasSubtaskPreview) return;
+    this.dispatchEvent(new CustomEvent('harness-card-retention', {
+      detail: { active: true },
+      bubbles: true,
+      composed: true,
+    }));
     // Appended to document.body: content-visibility containment in the
     // transcript would trap a position: fixed layer inside this card.
     const portal = document.createElement('dees-harness-tool-fullscreen');
@@ -830,7 +846,10 @@ export class DeesHarnessToolCard extends DeesElement {
     // reduced-motion skips the animation, so animationend never fires there
     if (this.flashFallbackTimeout) clearTimeout(this.flashFallbackTimeout);
     this.flashFallbackTimeout = setTimeout(() => this.endReturnFlash(), 900);
-    requestAnimationFrame(() => {
+    if (this.returnScrollFrame !== null) cancelAnimationFrame(this.returnScrollFrame);
+    this.returnScrollFrame = requestAnimationFrame(() => {
+      this.returnScrollFrame = null;
+      if (!this.isConnected) return;
       this.scrollIntoView({ block: 'center', behavior: 'smooth' });
     });
   };
@@ -842,6 +861,11 @@ export class DeesHarnessToolCard extends DeesElement {
     }
     if (!this.returnFlash) return;
     this.returnFlash = false;
+    this.dispatchEvent(new CustomEvent('harness-card-retention', {
+      detail: { active: false },
+      bubbles: true,
+      composed: true,
+    }));
     this.dispatchEvent(new CustomEvent('harness-card-flash', {
       detail: { active: false },
       bubbles: true,
@@ -865,11 +889,44 @@ export class DeesHarnessToolCard extends DeesElement {
 
   public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
     super.willUpdate(changedProperties);
+    if (changedProperties.has('viewState') || changedProperties.has('call')) {
+      this.terminalScrollHydrated = false;
+      if (this.terminalScrollHydrationFrame !== null) {
+        cancelAnimationFrame(this.terminalScrollHydrationFrame);
+        this.terminalScrollHydrationFrame = null;
+      }
+      if (this.expanded === undefined && this.viewState?.toolExpanded !== undefined) {
+        this.expanded = this.viewState.toolExpanded;
+      }
+      if (!this.outputExpanded && this.viewState?.toolOutputExpanded === true) this.outputExpanded = true;
+      if (this.diffViewOverride === null && this.viewState?.toolDiffView !== undefined) {
+        this.diffViewOverride = this.viewState.toolDiffView;
+      }
+      if (this.viewState?.toolTerminalTailFollowing !== undefined) {
+        this.terminalTailFollowing = this.viewState.toolTerminalTailFollowing;
+      }
+      if (this.viewState) {
+        const subtask = this.call.subtask;
+        const ownsLiveTranscript = Boolean(
+          this.hasLiveSubtaskPreview && subtask?.previewState === 'ready',
+        );
+        if (!subtask || !ownsLiveTranscript) {
+          delete this.viewState.subtaskTranscript;
+          delete this.viewState.subtaskTranscriptSessionId;
+        } else if (
+          this.viewState.subtaskTranscriptSessionId !== subtask.sessionId
+          || !this.viewState.subtaskTranscript
+        ) {
+          this.viewState.subtaskTranscriptSessionId = subtask.sessionId;
+          this.viewState.subtaskTranscript = { messages: {}, permissions: {}, questions: {} };
+        }
+      }
+    }
     const previousCall = changedProperties.get('call') as IHarnessToolCall | undefined;
     if (!previousCall) return;
     if (previousCall.id !== this.call.id) {
-      this.diffViewOverride = null;
-      this.terminalTailFollowing = true;
+      this.diffViewOverride = this.viewState?.toolDiffView ?? null;
+      this.terminalTailFollowing = this.viewState?.toolTerminalTailFollowing ?? true;
       this.cancelTerminalTailReturn();
       return;
     }
@@ -891,6 +948,10 @@ export class DeesHarnessToolCard extends DeesElement {
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
     if (!this.isConnected) return;
+    this.terminalScrollHydrationFrame ??= requestAnimationFrame(() => {
+      this.terminalScrollHydrationFrame = null;
+      if (this.isConnected) this.terminalScrollHydrated = true;
+    });
     if (this.isOpen && !this.bodyMounted) this.bodyMounted = true;
     if (changedProperties.has('call') && this.fullscreenPortal) {
       this.fullscreenPortal.call = this.enrichedCall;
@@ -927,12 +988,21 @@ export class DeesHarnessToolCard extends DeesElement {
     });
     this.bodyResizeObserver.observe(bodyInner);
     if (this.terminalTailFollowing) this.scrollTerminalToTail();
+    else if (this.viewState?.toolTerminalScrollTop !== undefined) {
+      const frame = this.shadowRoot?.querySelector<HTMLElement>('.bodyClipFrame');
+      if (frame) this.setTerminalScrollTop(frame, this.viewState.toolTerminalScrollTop);
+    }
   }
 
   private readonly handleBodyScroll = (eventArg: Event): void => {
     if (this.descriptor.kind !== 'terminal' || this.uncapped) return;
+    if (!this.terminalScrollHydrated) return;
     const frame = eventArg.currentTarget as HTMLElement;
     this.terminalTailFollowing = frame.scrollHeight - frame.scrollTop - frame.clientHeight <= 2;
+    if (this.viewState) {
+      this.viewState.toolTerminalTailFollowing = this.terminalTailFollowing;
+      this.viewState.toolTerminalScrollTop = frame.scrollTop;
+    }
     if (this.terminalTailFollowing) this.cancelTerminalTailReturn();
   };
 
@@ -940,7 +1010,16 @@ export class DeesHarnessToolCard extends DeesElement {
     if (this.descriptor.kind !== 'terminal' || this.uncapped || !this.isOpen) return;
     const frame = this.shadowRoot?.querySelector<HTMLElement>('.bodyClipFrame');
     if (!frame) return;
-    frame.scrollTop = frame.scrollHeight;
+    if (this.viewState?.toolTerminalTailFollowing === false) {
+      this.terminalTailFollowing = false;
+      this.setTerminalScrollTop(frame, this.viewState.toolTerminalScrollTop ?? frame.scrollTop);
+      return;
+    }
+    this.setTerminalScrollTop(frame, frame.scrollHeight);
+  }
+
+  private setTerminalScrollTop(frameArg: HTMLElement, scrollTopArg: number): void {
+    frameArg.scrollTop = scrollTopArg;
   }
 
   private readonly scheduleTerminalTailReturn = (): void => {
@@ -949,7 +1028,12 @@ export class DeesHarnessToolCard extends DeesElement {
     this.terminalTailReturnTimeout = setTimeout(() => {
       this.terminalTailReturnTimeout = null;
       this.terminalTailFollowing = true;
+      if (this.viewState) this.viewState.toolTerminalTailFollowing = true;
       this.scrollTerminalToTail();
+      if (this.viewState) {
+        const frame = this.shadowRoot?.querySelector<HTMLElement>('.bodyClipFrame');
+        if (frame) this.viewState.toolTerminalScrollTop = frame.scrollTop;
+      }
     }, this.terminalTailReturnDelayMs);
   };
 
@@ -961,6 +1045,7 @@ export class DeesHarnessToolCard extends DeesElement {
 
   private readonly handleDiffViewChange = (eventArg: CustomEvent<IDiffViewChangeDetail>): void => {
     this.diffViewOverride = eventArg.detail.diffView;
+    if (this.viewState) this.viewState.toolDiffView = this.diffViewOverride;
   };
 
   private readonly syncSubtaskResultScroll = (): void => {
@@ -1002,6 +1087,15 @@ export class DeesHarnessToolCard extends DeesElement {
       cancelAnimationFrame(this.disclosureFrame);
       this.disclosureFrame = null;
     }
+    if (this.returnScrollFrame !== null) {
+      cancelAnimationFrame(this.returnScrollFrame);
+      this.returnScrollFrame = null;
+    }
+    if (this.terminalScrollHydrationFrame !== null) {
+      cancelAnimationFrame(this.terminalScrollHydrationFrame);
+      this.terminalScrollHydrationFrame = null;
+    }
+    this.terminalScrollHydrated = false;
     if (this.flashFallbackTimeout) {
       clearTimeout(this.flashFallbackTimeout);
       this.flashFallbackTimeout = null;
@@ -1011,8 +1105,16 @@ export class DeesHarnessToolCard extends DeesElement {
       this.outcomeScanFallbackTimeout = null;
     }
     this.cancelTerminalTailReturn();
+    if (this.fullscreenPortal || this.returnFlash) {
+      this.dispatchEvent(new CustomEvent('harness-card-retention', {
+        detail: { active: false },
+        bubbles: true,
+        composed: true,
+      }));
+    }
     this.fullscreenPortal?.remove();
     this.fullscreenPortal = null;
+    this.returnFlash = false;
     this.bodyResizeObserver?.disconnect();
     this.bodyResizeObserver = null;
     this.observedBodyInner = null;
@@ -1068,6 +1170,7 @@ export class DeesHarnessToolCard extends DeesElement {
                 .questions=${subtask.questions ?? []}
                 .status=${subtask.status}
                 .toolRegistry=${this.toolRegistry}
+                .viewState=${this.viewState?.subtaskTranscript}
                 .allowSubtaskStreams=${false}
                 .autoFollow=${this.isOpen}
                 .hideScrollbar=${true}
@@ -1164,6 +1267,7 @@ export class DeesHarnessToolCard extends DeesElement {
                   type="button"
                   @click=${() => {
                     this.outputExpanded = true;
+                    if (this.viewState) this.viewState.toolOutputExpanded = true;
                   }}
                 >
                   Show all

package/ts_web/elements/00group-harness/interfaces.ts

@@ -49,6 +49,40 @@ export interface IHarnessTranscriptOrder {
   partIndex: number;
 }
 
+/** View state retained by a virtualized transcript while a message is unmounted. */
+export interface IHarnessMessageViewState {
+  reasoningExpanded?: boolean;
+  markdownText?: string;
+  markdownHtml?: string;
+  toolExpanded?: boolean;
+  toolOutputExpanded?: boolean;
+  toolDiffView?: 'inline' | 'split' | null;
+  toolTerminalTailFollowing?: boolean;
+  toolTerminalScrollTop?: number;
+  subtaskTranscriptSessionId?: string;
+  subtaskTranscript?: IHarnessTranscriptViewState;
+}
+
+/** Optimistic permission state retained while a virtualized card is unmounted. */
+export interface IHarnessPermissionViewState {
+  remember?: boolean;
+  answered?: THarnessPermissionResponse;
+}
+
+/** In-progress question state retained while a virtualized card is unmounted. */
+export interface IHarnessQuestionViewState {
+  answered?: string[];
+  selected?: string[];
+  customText?: string;
+}
+
+/** Complete interaction state for rows that a virtual transcript may evict. */
+export interface IHarnessTranscriptViewState {
+  messages: Record<string, IHarnessMessageViewState>;
+  permissions: Record<string, IHarnessPermissionViewState>;
+  questions: Record<string, IHarnessQuestionViewState>;
+}
+
 /** Session-level token facts. Unknown metrics stay undefined. */
 export interface IHarnessSessionMetrics {
   /** Cumulative token usage across the complete session. */

package/ts_web/elements/00group-harness/toolregistry.ts

@@ -239,6 +239,11 @@ export class DeesHarnessToolRegistry {
   private descriptors: IHarnessToolDescriptor[] = [];
   private byName = new Map<string, IHarnessToolDescriptor>();
   private byKind = new Map<string, IHarnessToolDescriptor>();
+  private registryRevision = 0;
+
+  public get revision(): number {
+    return this.registryRevision;
+  }
 
   constructor(seedDescriptors: IHarnessToolDescriptor[] = []) {
     for (const descriptor of seedDescriptors) {
@@ -260,6 +265,7 @@ export class DeesHarnessToolRegistry {
     for (const name of descriptor.names ?? []) {
       this.byName.set(name.toLowerCase(), descriptor);
     }
+    this.registryRevision += 1;
     return this;
   }
 
@@ -271,6 +277,7 @@ export class DeesHarnessToolRegistry {
     for (const [name, mapped] of this.byName) {
       if (mapped === existing) this.byName.delete(name);
     }
+    this.registryRevision += 1;
     return this;
   }