@design.estate/dees-catalog 6.1.0 → 6.3.0

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

@@ -10,7 +10,11 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessToolCall, THarnessContentBlock } from '../interfaces.js';
+import type {
+  IHarnessToolCall,
+  THarnessContentBlock,
+  THarnessMessageStreamDelta,
+} from '../interfaces.js';
 import {
   DeesHarnessToolRegistry,
   parseMcpName,
@@ -19,8 +23,16 @@ import {
 } from '../toolregistry.js';
 import { builtinBodyRenderers } from './renderers.js';
 import { harnessCardStyles, harnessPillStyles, harnessMonoStyles } from '../harness.styles.js';
-import { harnessFormatClockTime, harnessFormatDuration, harnessTruncate } from '../harness.helpers.js';
+import {
+  harnessApplyMessageDelta,
+  harnessEffectiveToolStatus,
+  harnessFormatClockTime,
+  harnessFormatDuration,
+  harnessTruncate,
+} from '../harness.helpers.js';
+import { DeesHarnessMessageList } from '../dees-harness-message-list/dees-harness-message-list.js';
 import '../dees-harness-content-blocks/dees-harness-content-blocks.js';
+import '../dees-harness-overflow-text.js';
 import '../../00group-dataview/dees-dataview-codebox/dees-dataview-codebox.js';
 import './dees-harness-tool-fullscreen.js';
 import '../../00group-feedback/dees-badge/dees-badge.js';
@@ -49,12 +61,19 @@ export class DeesHarnessToolCard extends DeesElement {
   @property({ attribute: false })
   accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
 
+  /** Nested lists disable this to keep inline subtask streams one level deep. */
+  @property({ type: Boolean })
+  accessor allowSubtaskStreams: boolean = true;
+
   @state()
   accessor expanded: boolean | undefined = undefined;
 
   @state()
   accessor outputExpanded: boolean = false;
 
+  @state()
+  accessor bodyMounted: boolean = false;
+
   /** Body height cap; taller content scrolls in place and offers fullscreen. */
   @property({ type: Number })
   accessor bodyCapPx: number = 360;
@@ -75,6 +94,9 @@ export class DeesHarnessToolCard extends DeesElement {
   private bodyResizeObserver: ResizeObserver | null = null;
   private observedBodyInner: Element | null = null;
   private fullscreenPortal: HTMLElementTagNameMap['dees-harness-tool-fullscreen'] | null = null;
+  private disclosureFrame: number | null = null;
+  private subtaskResultElement: HTMLElement | null = null;
+  private subtaskResultResizeObserver: ResizeObserver | null = null;
 
   public static styles = [
     themeDefaultStyles,
@@ -88,6 +110,56 @@ export class DeesHarnessToolCard extends DeesElement {
         font-family: var(--dees-font-family);
       }
 
+      .harness-card.subtaskPreviewCard {
+        max-height: var(--dees-harness-active-subtask-height, 320px);
+      }
+
+      .harness-card.subtaskPreviewOpen {
+        display: flex;
+        flex-direction: column;
+        height: var(--dees-harness-active-subtask-height, 320px);
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+      .harness-card.subtaskPreviewOpen .bodyDisclosure.open,
+      .harness-card.subtaskPreviewOpen .bodyDisclosureInner,
+      .harness-card.subtaskPreviewOpen .bodyClipFrame {
+        flex: 1;
+        min-height: 0;
+      }
+
+      .harness-card.subtaskPreviewOpen .bodyDisclosure.open {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .harness-card.subtaskPreviewOpen .bodyDisclosureInner {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .harness-card.subtaskPreviewOpen .bodyClipFrame {
+        max-height: none !important;
+        overflow: hidden;
+      }
+
+      .harness-card.subtaskPreviewOpen .body,
+      .harness-card.subtaskPreviewOpen .subtaskPreview {
+        min-height: 0;
+        height: 100%;
+      }
+
+      .harness-card.subtaskPreviewOpen .body {
+        grid-template-rows: auto minmax(0, 1fr) auto;
+        box-sizing: border-box;
+      }
+
+      .harness-card.subtaskPreviewOpen .body.liveSubtaskBody {
+        grid-template-rows: minmax(0, 1fr) auto;
+      }
+
       .header {
         display: flex;
         align-items: center;
@@ -119,6 +191,37 @@ export class DeesHarnessToolCard extends DeesElement {
         color: var(--dees-color-accent-primary);
       }
 
+      .harness-card.subtaskPreviewOpen.status-running::before,
+      .harness-card.subtaskPreviewOpen.status-pending::before {
+        animation: harness-card-open-chat-scan 10s linear infinite;
+      }
+
+      @keyframes harness-card-open-chat-scan {
+        0% {
+          background-position: 100% 0;
+          opacity: 0;
+        }
+        1% {
+          opacity: 0.35;
+        }
+        20% {
+          background-position: 0 0;
+          opacity: 0.35;
+        }
+        24%, 100% {
+          background-position: 0 0;
+          opacity: 0;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .harness-card.subtaskPreviewOpen.status-running::before,
+        .harness-card.subtaskPreviewOpen.status-pending::before {
+          animation: none;
+          opacity: 0;
+        }
+      }
+
       .titleBlock {
         min-width: 0;
         flex: 1;
@@ -147,12 +250,10 @@ export class DeesHarnessToolCard extends DeesElement {
       }
 
       .subtitle {
+        display: block;
         margin-top: 1px;
         color: var(--dees-color-text-secondary);
         font-size: var(--dees-font-caption1-size, 11px);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
 
       .metaColumn {
@@ -176,7 +277,7 @@ export class DeesHarnessToolCard extends DeesElement {
            inner overflow-x scrollers engage instead. */
         grid-template-columns: minmax(0, 1fr);
         gap: var(--dees-spacing-sm);
-        padding: 0 var(--dees-spacing-md) var(--dees-spacing-md);
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
       }
 
       .kvGrid {
@@ -211,6 +312,30 @@ export class DeesHarnessToolCard extends DeesElement {
       /* Three body modes: collapsed (no body), normal (content fits the
          cap), capped (content taller than the cap scrolls inside the frame
          and offers the fullscreen modal). */
+      .bodyDisclosure {
+        display: grid;
+        grid-template-rows: 0fr;
+        min-width: 0;
+        opacity: 0;
+        transform: translateY(-3px);
+        transition:
+          grid-template-rows var(--dees-transition-default) var(--dees-ease-standard),
+          opacity var(--dees-transition-fast) var(--dees-ease-standard),
+          transform var(--dees-transition-default) var(--dees-ease-standard);
+      }
+
+      .bodyDisclosure.open {
+        grid-template-rows: 1fr;
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .bodyDisclosureInner {
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+      }
+
       .bodyClipFrame {
         position: relative;
         overflow-y: auto;
@@ -219,6 +344,129 @@ export class DeesHarnessToolCard extends DeesElement {
         scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
 
+      .subtaskPreview {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        block-size: 260px;
+        margin-inline: calc(0px - var(--dees-spacing-md));
+        overflow: hidden;
+      }
+
+      .subtaskPreview dees-harness-message-list {
+        flex: 1;
+        min-height: 0;
+      }
+
+      .subtaskPreviewState {
+        flex: 1;
+        display: grid;
+        place-content: center;
+        gap: var(--dees-spacing-xs);
+        min-height: 0;
+        padding: var(--dees-spacing-md);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        text-align: center;
+      }
+
+      .subtaskNotice {
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      .harness-subtask-detail {
+        display: grid;
+        align-content: start;
+        align-self: start;
+        gap: 3px;
+        min-width: 0;
+      }
+
+      .body:not(.liveSubtaskBody) > .harness-subtask-detail-brief {
+        grid-row: 1;
+        max-height: 35%;
+      }
+
+      .body:not(.liveSubtaskBody) > .harness-subtask-detail-brief,
+      .body:not(.liveSubtaskBody) > .harness-subtask-detail-result {
+        grid-template-rows: auto minmax(0, 1fr);
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      .body:not(.liveSubtaskBody) > .harness-subtask-detail-result {
+        grid-row: 2;
+        align-self: stretch;
+      }
+
+      .body:not(.liveSubtaskBody) > .harness-subtask-open {
+        grid-row: 3;
+        align-self: end;
+      }
+
+      .harness-subtask-detail + .harness-subtask-detail {
+        padding-top: var(--dees-spacing-sm);
+        border-top: 1px solid var(--dees-color-border-subtle);
+      }
+
+      .harness-subtask-detail-label {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
+
+      .harness-subtask-detail-text {
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        line-height: 1.5;
+        overflow-wrap: anywhere;
+        white-space: pre-wrap;
+      }
+
+      .harness-subtask-detail-brief .harness-subtask-detail-text,
+      .harness-subtask-detail-result .harness-subtask-detail-text {
+        min-height: 0;
+        overflow-y: auto;
+        scrollbar-width: none;
+      }
+
+      .harness-subtask-detail-brief .harness-subtask-detail-text::-webkit-scrollbar,
+      .harness-subtask-detail-result .harness-subtask-detail-text::-webkit-scrollbar {
+        display: none;
+      }
+
+      .harness-subtask-detail-text.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%);
+      }
+
+      .harness-subtask-detail-text.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%);
+      }
+
+      .harness-subtask-detail-text.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%
+        );
+      }
+
       .maximizeBar {
         display: flex;
         align-items: center;
@@ -378,6 +626,10 @@ export class DeesHarnessToolCard extends DeesElement {
       }
 
       @media (prefers-reduced-motion: reduce) {
+        .bodyDisclosure {
+          transition: none;
+        }
+
         .harness-card.returnFlash {
           animation: none;
         }
@@ -404,20 +656,41 @@ export class DeesHarnessToolCard extends DeesElement {
   public get isOpen(): boolean {
     if (this.expanded !== undefined) return this.expanded;
     const descriptor = this.descriptor;
+    if (descriptor.kind === 'subtask' && this.call.subtask) {
+      return this.allowSubtaskStreams
+        && (this.call.subtask.status.type === 'busy' || this.call.subtask.status.type === 'error');
+    }
     if (this.call.status === 'error' || this.call.isError) return true;
     if (typeof descriptor.defaultExpanded === 'function') return descriptor.defaultExpanded(this.enrichedCall);
     return descriptor.defaultExpanded ?? false;
   }
 
+  private get hasSubtaskPreview(): boolean {
+    return this.allowSubtaskStreams
+      && this.descriptor.kind === 'subtask'
+      && this.call.subtask !== undefined;
+  }
+
+  private get hasLiveSubtaskPreview(): boolean {
+    return this.hasSubtaskPreview && this.call.subtask?.status.type === 'busy';
+  }
+
+  private get activeSubtaskPreview(): boolean {
+    return this.hasSubtaskPreview && this.call.subtask?.status.type === 'busy';
+  }
+
   public render(): TemplateResult {
     const call = this.enrichedCall;
     const descriptor = this.descriptor;
+    const open = this.isOpen;
+    const renderBody = this.bodyMounted || open;
     const label = typeof descriptor.label === 'function' ? descriptor.label(call) : descriptor.label;
     const subtitle = descriptor.subtitle?.(call) ?? '';
-    const statusTone = call.isError ? 'error' : call.status === 'completed' ? 'success' : call.status;
+    const effectiveStatus = harnessEffectiveToolStatus(call);
+    const statusTone = effectiveStatus === 'completed' ? 'success' : effectiveStatus;
     const duration = harnessFormatDuration(call.startedAt, call.finishedAt);
     return html`
-      <div class="harness-card status-${call.isError ? 'error' : call.status} ${descriptor.destructive ? 'destructive' : ''} ${this.returnFlash ? 'returnFlash' : ''} ${this.outcomeScanTone ? `outcomeScan outcomeScan-${this.outcomeScanTone}` : ''}"
+      <div class="harness-card status-${effectiveStatus} ${descriptor.destructive ? 'destructive' : ''} ${this.hasSubtaskPreview ? 'subtaskPreviewCard' : ''} ${this.hasSubtaskPreview && open ? 'subtaskPreviewOpen' : ''} ${this.returnFlash ? 'returnFlash' : ''} ${this.outcomeScanTone ? `outcomeScan outcomeScan-${this.outcomeScanTone}` : ''}"
         @animationend=${(event: AnimationEvent) => {
           if (event.animationName === 'harness-card-return-flash') {
             this.endReturnFlash();
@@ -429,10 +702,8 @@ export class DeesHarnessToolCard extends DeesElement {
         <button
           class="header"
           type="button"
-          aria-expanded=${this.isOpen ? 'true' : 'false'}
-          @click=${() => {
-            this.expanded = !this.isOpen;
-          }}
+          aria-expanded=${open ? 'true' : 'false'}
+          @click=${this.toggleDisclosure}
         >
           <span class="toolIcon"><dees-icon .icon=${descriptor.icon} iconSize="15"></dees-icon></span>
           <span class="titleBlock">
@@ -440,7 +711,9 @@ export class DeesHarnessToolCard extends DeesElement {
               <span class="toolLabel">${label}</span>
               ${this.renderMcpBadges(call)}
             </span>
-            ${subtitle ? html`<span class="subtitle" title=${subtitle}>${subtitle}</span>` : ''}
+            ${subtitle
+              ? html`<dees-harness-overflow-text class="subtitle" title=${subtitle}>${subtitle}</dees-harness-overflow-text>`
+              : ''}
           </span>
           <span class="metaColumn">
             ${call.startedAt
@@ -448,34 +721,69 @@ export class DeesHarnessToolCard extends DeesElement {
               : ''}
             ${duration ? html`<span class="duration">${duration}</span>` : ''}
             <span class="harness-pill tone-${statusTone}">
-              ${call.isError ? 'error' : call.status}
+              ${effectiveStatus}
             </span>
           </span>
         </button>
-        ${this.isOpen
+        ${renderBody
           ? html`
               <div
-                class="bodyClipFrame"
-                style=${this.uncapped ? '' : `max-height: ${this.bodyCapPx}px;`}
+                class=${`bodyDisclosure ${open ? 'open' : ''}`}
+                aria-hidden=${String(!open)}
               >
-                <div class="body bodyInner">${this.renderBody(call)}</div>
+                <div class="bodyDisclosureInner" ?inert=${!open}>
+                  <div
+                    class="bodyClipFrame"
+                    style=${this.uncapped || this.activeSubtaskPreview ? '' : `max-height: ${this.bodyCapPx}px;`}
+                  >
+                    <div class=${`body bodyInner ${this.hasLiveSubtaskPreview ? 'liveSubtaskBody' : ''}`}>
+                      ${this.renderBody(call)}
+                    </div>
+                  </div>
+                  ${this.bodyOverflowing && !this.uncapped && !this.hasSubtaskPreview
+                    ? html`
+                        <button class="maximizeBar" type="button" @click=${this.openFullscreen}>
+                          <dees-icon icon="lucide:Maximize2" iconSize="12"></dees-icon>
+                          Show everything
+                        </button>
+                      `
+                    : ''}
+                </div>
               </div>
-              ${this.bodyOverflowing && !this.uncapped
-                ? html`
-                    <button class="maximizeBar" type="button" @click=${this.openFullscreen}>
-                      <dees-icon icon="lucide:Maximize2" iconSize="12"></dees-icon>
-                      Show everything
-                    </button>
-                  `
-                : ''}
             `
           : ''}
       </div>
     `;
   }
 
+  private readonly toggleDisclosure = (): void => {
+    if (this.isOpen) {
+      if (this.disclosureFrame !== null) cancelAnimationFrame(this.disclosureFrame);
+      this.disclosureFrame = null;
+      this.expanded = false;
+      return;
+    }
+    if (this.bodyMounted) {
+      if (this.disclosureFrame !== null) cancelAnimationFrame(this.disclosureFrame);
+      this.disclosureFrame = null;
+      this.expanded = true;
+      return;
+    }
+    this.bodyMounted = true;
+    this.expanded = false;
+    void this.updateComplete.then(() => {
+      if (!this.isConnected || this.expanded !== false) return;
+      this.disclosureFrame = requestAnimationFrame(() => {
+        this.disclosureFrame = null;
+        if (!this.isConnected || this.expanded !== false) return;
+        this.shadowRoot?.querySelector<HTMLElement>('.bodyDisclosure')?.getBoundingClientRect();
+        this.expanded = true;
+      });
+    });
+  };
+
   private readonly openFullscreen = (): void => {
-    if (this.fullscreenPortal) return;
+    if (this.fullscreenPortal || this.hasSubtaskPreview) return;
     // 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');
@@ -542,10 +850,12 @@ export class DeesHarnessToolCard extends DeesElement {
     super.willUpdate(changedProperties);
     const previousCall = changedProperties.get('call') as IHarnessToolCall | undefined;
     if (!previousCall || previousCall.id !== this.call.id) return;
-    const wasActive = previousCall.status === 'pending' || previousCall.status === 'running';
-    const outcomeTone = this.call.status === 'error' || this.call.isError
+    const previousStatus = harnessEffectiveToolStatus(previousCall);
+    const currentStatus = harnessEffectiveToolStatus(this.call);
+    const wasActive = previousStatus === 'pending' || previousStatus === 'running';
+    const outcomeTone = currentStatus === 'error'
       ? 'error'
-      : this.call.status === 'completed'
+      : currentStatus === 'completed'
         ? 'success'
         : null;
     if (wasActive && outcomeTone) {
@@ -557,10 +867,18 @@ export class DeesHarnessToolCard extends DeesElement {
 
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
+    if (!this.isConnected) return;
+    if (this.isOpen && !this.bodyMounted) this.bodyMounted = true;
     if (changedProperties.has('call') && this.fullscreenPortal) {
       this.fullscreenPortal.call = this.enrichedCall;
     }
-    if (this.uncapped) return;
+    this.connectSubtaskResultScroll();
+    if (!this.isOpen || this.uncapped || this.hasSubtaskPreview) {
+      this.bodyResizeObserver?.disconnect();
+      this.observedBodyInner = null;
+      this.bodyOverflowing = false;
+      return;
+    }
     const bodyInner = this.shadowRoot?.querySelector('.bodyInner') ?? null;
     if (bodyInner === this.observedBodyInner) return;
     this.bodyResizeObserver?.disconnect();
@@ -578,7 +896,45 @@ export class DeesHarnessToolCard extends DeesElement {
     this.bodyResizeObserver.observe(bodyInner);
   }
 
+  private readonly syncSubtaskResultScroll = (): void => {
+    const result = this.subtaskResultElement;
+    if (!result) return;
+    result.classList.toggle('fadeTop', result.scrollTop > 1);
+    result.classList.toggle(
+      'fadeBottom',
+      result.scrollHeight - result.scrollTop - result.clientHeight > 1,
+    );
+  };
+
+  private connectSubtaskResultScroll(): void {
+    const nextResult = this.shadowRoot?.querySelector<HTMLElement>(
+      '.harness-subtask-detail-result .harness-subtask-detail-text',
+    ) ?? null;
+    if (nextResult === this.subtaskResultElement) {
+      this.syncSubtaskResultScroll();
+      return;
+    }
+    this.subtaskResultElement?.removeEventListener('scroll', this.syncSubtaskResultScroll);
+    this.subtaskResultResizeObserver?.disconnect();
+    this.subtaskResultElement = nextResult;
+    if (!nextResult) return;
+    nextResult.addEventListener('scroll', this.syncSubtaskResultScroll, { passive: true });
+    this.subtaskResultResizeObserver ??= new ResizeObserver(this.syncSubtaskResultScroll);
+    this.subtaskResultResizeObserver.observe(nextResult);
+    this.syncSubtaskResultScroll();
+  }
+
+  public async connectedCallback(): Promise<void> {
+    const connected = super.connectedCallback();
+    if (this.hasUpdated) this.requestUpdate();
+    await connected;
+  }
+
   public async disconnectedCallback(): Promise<void> {
+    if (this.disclosureFrame !== null) {
+      cancelAnimationFrame(this.disclosureFrame);
+      this.disclosureFrame = null;
+    }
     if (this.flashFallbackTimeout) {
       clearTimeout(this.flashFallbackTimeout);
       this.flashFallbackTimeout = null;
@@ -592,6 +948,10 @@ export class DeesHarnessToolCard extends DeesElement {
     this.bodyResizeObserver?.disconnect();
     this.bodyResizeObserver = null;
     this.observedBodyInner = null;
+    this.subtaskResultElement?.removeEventListener('scroll', this.syncSubtaskResultScroll);
+    this.subtaskResultElement = null;
+    this.subtaskResultResizeObserver?.disconnect();
+    this.subtaskResultResizeObserver = null;
     await super.disconnectedCallback();
   }
 
@@ -612,9 +972,95 @@ export class DeesHarnessToolCard extends DeesElement {
   private renderBody(call: IHarnessToolCall): TemplateResult {
     const descriptor = this.descriptor;
     const helpers = this.createHelpers();
-    if (descriptor.renderBody) return descriptor.renderBody(call, helpers);
-    const builtin = builtinBodyRenderers[descriptor.kind] ?? builtinBodyRenderers.unknown;
-    return builtin(call, helpers);
+    const base = descriptor.renderBody
+      ? descriptor.renderBody(call, helpers)
+      : (builtinBodyRenderers[descriptor.kind] ?? builtinBodyRenderers.unknown)(
+          descriptor.kind === 'subtask' && this.hasLiveSubtaskPreview
+            ? { ...call, output: undefined, errorText: undefined }
+            : call,
+          helpers,
+        );
+    const subtaskAction = descriptor.kind === 'subtask'
+      ? this.renderSubtaskAction(call)
+      : html``;
+    if (!this.hasLiveSubtaskPreview || !call.subtask) {
+      return descriptor.kind === 'subtask' ? html`${base}${subtaskAction}` : base;
+    }
+    const subtask = call.subtask;
+    return html`
+      <section class="subtaskPreview" role="region" aria-label="Live subagent transcript">
+        ${subtask.previewState === 'ready' && (subtask.notice || subtask.truncated)
+          ? html`<div class="subtaskNotice">${subtask.notice ?? 'Earlier child messages were omitted.'}</div>`
+          : ''}
+        ${subtask.previewState === 'ready'
+          ? html`
+              <dees-harness-message-list
+                .messages=${subtask.messages}
+                .permissions=${subtask.permissions ?? []}
+                .questions=${subtask.questions ?? []}
+                .status=${subtask.status}
+                .toolRegistry=${this.toolRegistry}
+                .allowSubtaskStreams=${false}
+                .autoFollow=${this.isOpen}
+                .hideScrollbar=${true}
+                .fadeScrollEdges=${true}
+                .showRoles=${true}
+                .showTimestamps=${false}
+                emptyTitle="Waiting for subagent output"
+                emptyText="The child session is active."
+              >
+                <div slot="leading" class="subtaskThreadBrief">${base}</div>
+              </dees-harness-message-list>
+            `
+          : html`
+              <div class="subtaskPreviewState">
+                ${base}
+                <dees-harness-status .status=${subtask.status}></dees-harness-status>
+                <span>${subtask.notice ?? (subtask.previewState === 'loading'
+                  ? 'Loading live subagent transcript…'
+                  : 'Live preview unavailable. Open the subagent chat to follow it.')}</span>
+              </div>
+            `}
+      </section>
+      ${subtaskAction}
+    `;
+  }
+
+  private renderSubtaskAction(callArg: IHarnessToolCall): TemplateResult {
+    const childSessionId = callArg.subtask?.sessionId ?? callArg.childSessionId;
+    if (!childSessionId) return html``;
+    return html`
+      <button
+        class="harness-subtask-open"
+        type="button"
+        @click=${() => {
+          this.dispatchEvent(new CustomEvent('harness-subtask-open', {
+            detail: { sessionId: childSessionId, call: callArg },
+            bubbles: true,
+            composed: true,
+          }));
+        }}
+      >
+        ${(callArg.subtask
+          ? callArg.subtask.status.type !== 'busy'
+          : callArg.status === 'completed' || callArg.status === 'error')
+          ? 'Open subagent chat'
+          : 'Follow subagent live'}
+      </button>
+    `;
+  }
+
+  public applySubtaskDelta(delta: THarnessMessageStreamDelta): boolean {
+    if (!this.allowSubtaskStreams || this.call.subtask?.previewState !== 'ready') return false;
+    if (!this.call.subtask.messages.some((message) => message.id === delta.messageId)) return false;
+    const list = this.shadowRoot?.querySelector('.subtaskPreview > dees-harness-message-list');
+    if (list instanceof DeesHarnessMessageList) {
+      list.applyDelta(delta);
+      return true;
+    }
+    if (!harnessApplyMessageDelta(this.call.subtask.messages, delta)) return false;
+    this.requestUpdate();
+    return true;
   }
 
   private createHelpers(): IHarnessToolRenderHelpers {