@design.estate/dees-catalog 6.7.0 → 6.8.0

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

@@ -367,6 +367,8 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       .itemInner {
+        position: relative;
+        isolation: isolate;
         min-width: 0;
         overflow: hidden;
         border: 1px solid var(--card-inner-border);
@@ -399,24 +401,34 @@ export class DeesHarnessSessionList extends DeesElement {
 
       @keyframes workingBackgroundScan {
         from {
-          background-position: 100% 0;
+          transform: translate3d(-60%, 0, 0);
         }
         to {
-          background-position: 0 0;
+          transform: translate3d(0, 0, 0);
         }
       }
 
       .item.state-working .itemInner {
-        background:
-          linear-gradient(
-            105deg,
-            transparent 40%,
-            color-mix(in srgb, var(--session-working) 6%, transparent) 45%,
-            color-mix(in srgb, var(--session-working) 20%, transparent) 50%,
-            color-mix(in srgb, var(--session-working) 6%, transparent) 55%,
-            transparent 60%
-          ) 100% 0 / 250% 100% no-repeat,
-          var(--dees-color-bg-primary);
+        background: var(--dees-color-bg-primary);
+      }
+
+      .item.state-working .itemInner::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        inset: 0 auto 0 0;
+        width: 250%;
+        pointer-events: none;
+        background: linear-gradient(
+          105deg,
+          transparent 40%,
+          color-mix(in srgb, var(--session-working) 6%, transparent) 45%,
+          color-mix(in srgb, var(--session-working) 20%, transparent) 50%,
+          color-mix(in srgb, var(--session-working) 6%, transparent) 55%,
+          transparent 60%
+        );
+        transform: translate3d(-60%, 0, 0);
+        will-change: transform;
         animation: workingBackgroundScan 2s linear infinite;
       }
 
@@ -923,12 +935,18 @@ export class DeesHarnessSessionList extends DeesElement {
         .item,
         .itemInner,
         .item.state-attention .itemInner,
+        .item.state-working .itemInner::before,
         .item.state-working .itemHeader .stateDot,
         .scrollShadow,
         .expandToggle dees-icon {
           animation: none;
           transition: none;
         }
+
+        .item.state-working .itemInner::before {
+          transform: translate3d(-60%, 0, 0);
+          will-change: auto;
+        }
       }
 
       @media (pointer: coarse) {

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;
 
@@ -208,18 +215,18 @@ export class DeesHarnessToolCard extends DeesElement {
 
       @keyframes harness-card-open-chat-scan {
         0% {
-          background-position: 100% 0;
+          transform: translate3d(-60%, 0, 0);
           opacity: 0;
         }
         1% {
           opacity: 0.35;
         }
         20% {
-          background-position: 0 0;
+          transform: translate3d(0, 0, 0);
           opacity: 0.35;
         }
         24%, 100% {
-          background-position: 0 0;
+          transform: translate3d(0, 0, 0);
           opacity: 0;
         }
       }
@@ -608,7 +615,8 @@ export class DeesHarnessToolCard extends DeesElement {
       .harness-card.outcomeScan::after {
         content: '';
         position: absolute;
-        inset: 0;
+        inset: 0 auto 0 0;
+        width: 250%;
         pointer-events: none;
         background: linear-gradient(
           105deg,
@@ -617,7 +625,9 @@ export class DeesHarnessToolCard extends DeesElement {
           color-mix(in srgb, var(--harness-outcome-scan-color) 14%, transparent) 50%,
           color-mix(in srgb, var(--harness-outcome-scan-color) 3%, transparent) 55%,
           transparent 60%
-        ) 100% 0 / 250% 100% no-repeat;
+        );
+        transform: translate3d(-60%, 0, 0);
+        will-change: transform;
         animation: harness-tool-outcome-scan 0.48s linear 0.08s both;
       }
 
@@ -631,8 +641,8 @@ export class DeesHarnessToolCard extends DeesElement {
       }
 
       @keyframes harness-tool-outcome-scan {
-        from { background-position: 100% 0; }
-        to { background-position: 0 0; }
+        from { transform: translate3d(-60%, 0, 0); }
+        to { transform: translate3d(0, 0, 0); }
       }
 
       @media (prefers-reduced-motion: reduce) {
@@ -647,6 +657,7 @@ export class DeesHarnessToolCard extends DeesElement {
         .harness-card.outcomeScan::after {
           animation: none;
           opacity: 0;
+          will-change: auto;
         }
       }
     `,
@@ -665,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
@@ -774,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;
@@ -791,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');
@@ -826,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' });
     });
   };
@@ -838,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,
@@ -861,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;
     }
@@ -887,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;
@@ -923,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();
   };
 
@@ -936,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 => {
@@ -945,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);
   };
 
@@ -957,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 => {
@@ -998,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;
@@ -1007,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;
@@ -1064,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}
@@ -1160,6 +1267,7 @@ export class DeesHarnessToolCard extends DeesElement {
                   type="button"
                   @click=${() => {
                     this.outputExpanded = true;
+                    if (this.viewState) this.viewState.toolOutputExpanded = true;
                   }}
                 >
                   Show all