@design.estate/dees-catalog 9.6.2 → 9.8.0

package/ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -13,6 +13,7 @@ import { DeesInputCheckbox } from '../../00group-input/dees-input-checkbox/dees-
 import { DeesInputCode } from '../../00group-input/dees-input-code/dees-input-code.js';
 import { DeesInputDatepicker } from '../../00group-input/dees-input-datepicker/index.js';
 import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import { DeesInputTextarea } from '../../00group-input/dees-input-textarea/dees-input-textarea.js';
 import { DeesInputQuantitySelector } from '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
 import { DeesInputRadiogroup } from '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
 import { DeesInputDropdown } from '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
@@ -44,6 +45,7 @@ const FORM_INPUT_TYPES = [
   DeesInputQuantitySelector,
   DeesInputRadiogroup,
   DeesInputText,
+  DeesInputTextarea,
   DeesInputToggle,
   DeesInputTypelist,
   DeesInputTags,
@@ -65,6 +67,9 @@ export interface IFormCompatibleElement extends HTMLElement {
   };
   getValue?: () => unknown;
   setValue?: (value: unknown) => void;
+  checkValidity?: () => boolean;
+  reportValidity?: () => boolean;
+  reset?: () => void;
 }
 
 export type TFormDataValue =
@@ -96,6 +101,7 @@ export type TFormInputElement =
   | DeesInputQuantitySelector
   | DeesInputRadiogroup
   | DeesInputText
+  | DeesInputTextarea
   | DeesInputToggle
   | DeesInputTypelist
   | DeesInputTags
@@ -281,7 +287,9 @@ export class DeesForm extends DeesElement {
   public async updateRequiredStatus() {
     let requiredOK = true;
     for (const childArg of this.getFormElements()) {
-      if (childArg.required && !getFormElementValue(childArg)) {
+      if (childArg.disabled) continue;
+      if ((childArg.required && !getFormElementValue(childArg))
+        || (childArg as IFormCompatibleElement).checkValidity?.() === false) {
         requiredOK = false;
       }
     }
@@ -312,6 +320,15 @@ export class DeesForm extends DeesElement {
   }
 
   public async gatherAndDispatch() {
+    for (const child of this.getFormElements()) {
+      if (child.disabled) continue;
+      const input = child as IFormCompatibleElement;
+      if (input.checkValidity?.() === false) {
+        input.reportValidity?.();
+        child.focus();
+        return;
+      }
+    }
     const valueObject = await this.collectFormData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
@@ -371,12 +388,18 @@ export class DeesForm extends DeesElement {
     const inputChildren = this.getFormElements();
 
     for (const inputChild of inputChildren) {
-      setFormElementValue(inputChild, null);
+      const input = inputChild as IFormCompatibleElement;
+      if (input.reset) input.reset();
+      else setFormElementValue(inputChild, null);
     }
     this.setStatus('normal', 'Submit');
+    void this.updateRequiredStatus();
   }
 
   public async addBehaviours() {
+    this.addEventListener('validation-change', event => {
+      if (this.getFormElements().includes(event.target as TFormInputElement)) void this.updateRequiredStatus();
+    });
     // Use event delegation
     this.addEventListener('keydown', (event: KeyboardEvent) => {
       const target = event.target as DeesElement;

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

@@ -203,6 +203,9 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property({ attribute: false })
+  accessor attachmentsEnabled: boolean = true;
+
   @property({ attribute: false })
   accessor suggestions: IHarnessComposerSuggestion[] = [];
 
@@ -763,6 +766,7 @@ export class DeesHarnessChat extends DeesElement {
           .contextDescription=${this.heading ? `Replying to ${this.heading}` : ''}
           .value=${this.composerValue}
           .attachments=${this.attachments}
+          .attachmentsEnabled=${this.attachmentsEnabled}
           .suggestions=${this.suggestions}
           .maxAttachmentCount=${this.maxAttachmentCount}
           .maxAttachmentBytes=${this.maxAttachmentBytes}

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

@@ -44,6 +44,9 @@ export const demoFunc = () => demoPage('Composer', 'Write, attach files, choose
     <dees-harness-composer busy queuedCount="2"></dees-harness-composer>
     <div class="dees-demo-label">Waiting for a connection</div>
     <dees-harness-composer disabled placeholder="Connect to a project to chat."></dees-harness-composer>
+    <div class="dees-demo-label">Text-only conversation</div>
+    <dees-harness-composer .attachmentsEnabled=${false} .showModelControls=${false}
+      value="Summarize the outstanding invoices."></dees-harness-composer>
     <div class="dees-demo-label">Files ready to send</div>
     <dees-harness-composer
       .showModelControls=${false}

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

@@ -112,6 +112,10 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  /** Host capability: false disables every attachment entry point and sends text only. */
+  @property({ attribute: false })
+  accessor attachmentsEnabled: boolean = true;
+
   @property({ attribute: false })
   accessor suggestions: IHarnessComposerSuggestion[] = [];
 
@@ -260,7 +264,12 @@ export class DeesHarnessComposer extends DeesElement {
         border: 0;
         border-top: 1px solid var(--dees-color-border-subtle);
         border-radius: 0;
-        padding: 10px 16px 12px;
+        /*
+         * The docked bar stays full-bleed — its background and top border belong to the whole
+         * column — while its content is inset to the transcript's measure, so the prompt lines up
+         * with the messages above it instead of floating as a narrower block.
+         */
+        padding: 10px max(16px, calc((100% - var(--dees-harness-content-width, 820px)) / 2)) 12px;
       }
 
       :host([docked]) .composer.dragOver {
@@ -463,7 +472,7 @@ export class DeesHarnessComposer extends DeesElement {
     this.value = '';
     this.resetSuggestionInteraction();
     this.emitInput('');
-    this.autogrow();
+    // Height is resized in updated(); measuring here would read the textarea before it rerenders.
   }
 
   public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
@@ -473,6 +482,14 @@ export class DeesHarnessComposer extends DeesElement {
 
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
+    if (['attachmentsEnabled', 'disabled'].some(key => changedProperties.has(key) && changedProperties.get(key) !== undefined)) {
+      this.attachmentGeneration++;
+      if (!this.attachmentsEnabled || this.disabled) this.handleDragLeave();
+    }
+    // The grown height is an inline style, so it has to be recomputed for every value change
+    // regardless of origin. A host that clears its bound value after send would otherwise leave
+    // the composer stuck at the height of the message it just sent.
+    if (changedProperties.has('value')) this.autogrow();
     this.syncTextareaSuggestionAria();
   }
 
@@ -486,13 +503,13 @@ export class DeesHarnessComposer extends DeesElement {
           @dragleave=${this.handleDragLeave}
           @drop=${this.handleDrop}
         >
-        <input
+        ${this.attachmentsEnabled ? html`<input
           class="fileInput"
           type="file"
           multiple
           @change=${this.handleFileInputChange}
-        />
-        ${this.attachments.length
+        />` : ''}
+        ${this.attachmentsEnabled && this.attachments.length
           ? html`
               <div class="attachmentRow">
                 ${this.attachments.map((attachment) => this.renderChip(attachment))}
@@ -505,7 +522,7 @@ export class DeesHarnessComposer extends DeesElement {
             .value=${this.value}
             aria-label="Message"
             aria-description=${this.contextDescription}
-            placeholder=${this.placeholder}
+            placeholder=${!this.attachmentsEnabled && this.placeholder === 'Message the agent — drop or paste files to attach…' ? 'Message the agent…' : this.placeholder}
             ?disabled=${this.disabled}
             rows="1"
             @input=${this.handleTextInput}
@@ -518,14 +535,16 @@ export class DeesHarnessComposer extends DeesElement {
           ></textarea>
         </div>
         <div class="controlsRow">
-          <dees-button
+          ${this.attachmentsEnabled ? html`<dees-button
+            class="attachButton"
             size="sm"
             type="ghost"
+            title="Attach files"
             ?disabled=${this.disabled}
             @clicked=${() => this.shadowRoot?.querySelector<HTMLInputElement>('.fileInput')?.click()}
           >
             <dees-icon icon="lucide:Paperclip" iconSize="14"></dees-icon>
-          </dees-button>
+          </dees-button>` : ''}
           ${this.modeOptions.length
             ? html`
                 <dees-input-multitoggle class="modeSwitch" label="Agent mode" .labelPosition=${'none'}
@@ -704,7 +723,7 @@ export class DeesHarnessComposer extends DeesElement {
     this.value = (event.currentTarget as HTMLTextAreaElement).value;
     this.resetSuggestionInteraction();
     this.emitInput(this.value);
-    this.autogrow();
+    // updated() grows the textarea for every value change, so typing needs no separate call.
   };
 
   private handleKeydown = (event: KeyboardEvent): void => {
@@ -869,6 +888,7 @@ export class DeesHarnessComposer extends DeesElement {
   };
 
   private handlePaste = (event: ClipboardEvent): void => {
+    if (!this.attachmentsEnabled || this.disabled) return;
     const files = Array.from(event.clipboardData?.files ?? []);
     if (!files.length) return;
     event.preventDefault();
@@ -878,6 +898,10 @@ export class DeesHarnessComposer extends DeesElement {
   private handleDragOver = (event: DragEvent): void => {
     if (!event.dataTransfer?.types.includes('Files')) return;
     event.preventDefault();
+    if (!this.attachmentsEnabled || this.disabled) {
+      event.dataTransfer.dropEffect = 'none';
+      return;
+    }
     this.shadowRoot?.querySelector('.composer')?.classList.add('dragOver');
   };
 
@@ -890,23 +914,32 @@ export class DeesHarnessComposer extends DeesElement {
     const files = Array.from(event.dataTransfer?.files ?? []);
     if (!files.length) return;
     event.preventDefault();
+    if (!this.attachmentsEnabled || this.disabled) {
+      if (event.dataTransfer) event.dataTransfer.dropEffect = 'none';
+      return;
+    }
     void this.addFiles(files);
   };
 
   private attachmentAdditionTail = Promise.resolve();
+  private attachmentGeneration = 0;
 
   public addFiles(fileList: FileList | File[] | null): Promise<void> {
     const files = Array.from(fileList ?? []);
-    if (!files.length) return Promise.resolve();
-    const addition = this.attachmentAdditionTail.then(() => this.addFilesSequential(files));
+    if (!files.length || !this.attachmentsEnabled || this.disabled) return Promise.resolve();
+    const generation = this.attachmentGeneration;
+    const addition = this.attachmentAdditionTail.then(() => this.addFilesSequential(files, generation));
     this.attachmentAdditionTail = addition.catch(() => undefined);
     return addition;
   }
 
-  private async addFilesSequential(files: File[]): Promise<void> {
+  private async addFilesSequential(files: File[], generation: number): Promise<void> {
+    const allowed = () => this.attachmentsEnabled && !this.disabled && generation === this.attachmentGeneration;
+    if (!allowed()) return;
     const added: IHarnessAttachment[] = [];
     let totalBytes = this.attachments.reduce((sum, attachment) => sum + attachment.size, 0);
     for (const file of files) {
+      if (!allowed()) return;
       if (this.attachments.length + added.length >= this.maxAttachmentCount) {
         this.emit('harness-attachment-error', {
           message: `A maximum of ${this.maxAttachmentCount} attachments is allowed.`,
@@ -928,6 +961,7 @@ export class DeesHarnessComposer extends DeesElement {
       }
       try {
         const dataBase64 = await harnessFileToBase64(file);
+        if (!allowed()) return;
         const kind = harnessAttachmentKindFor(mediaType);
         added.push({
           id: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`,
@@ -939,12 +973,13 @@ export class DeesHarnessComposer extends DeesElement {
         });
         totalBytes += file.size;
       } catch (error) {
+        if (!allowed()) return;
         this.emit('harness-attachment-error', {
           message: error instanceof Error ? error.message : String(error),
         });
       }
     }
-    if (added.length) {
+    if (added.length && allowed()) {
       this.emitAttachments([...this.attachments, ...added]);
     }
   }
@@ -957,7 +992,7 @@ export class DeesHarnessComposer extends DeesElement {
       && (!this.busy || !this.inputSteeringEnabled || !this.value.trim())) return;
     const detail: IHarnessComposerSendDetail = {
       text: this.value,
-      attachments: this.attachments,
+      attachments: this.attachmentsEnabled ? this.attachments : [],
       account: this.account || undefined,
       model: this.model || undefined,
       reasoningEffort: this.reasoningEffort || undefined,

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

@@ -325,8 +325,42 @@ export class DeesHarnessMessageList extends DeesElement {
         transform: translate3d(0, var(--harness-virtual-offset), 0);
       }
 
+      /*
+       * Prose is held to a readable measure while wide payloads keep the whole pane. Applied to
+       * the transcript rows themselves because a message host clips on both axes, so nothing
+       * nested inside one can bleed back out.
+       */
+      .stack > *,
+      .virtualItem {
+        width: min(var(--dees-harness-content-width, 820px), 100%);
+        margin-inline: auto;
+      }
+
+      .stack > [data-tool-layout='full-row'],
+      .stack > [data-tool-layout='subtask'],
+      .virtualItem[data-tool-layout='full-row'],
+      .virtualItem[data-tool-layout='subtask'] {
+        width: 100%;
+      }
+
+      /*
+       * One or two subagents are read like any other content, so they stay on the measure. The
+       * pane is only worth taking once three or more cards have to sit side by side.
+       */
+      .stack > [data-tool-layout='subtask'][data-tool-count='1'],
+      .stack > [data-tool-layout='subtask'][data-tool-count='2'],
+      .virtualItem[data-tool-layout='subtask'][data-tool-count='1'],
+      .virtualItem[data-tool-layout='subtask'][data-tool-count='2'] {
+        width: min(var(--dees-harness-content-width, 820px), 100%);
+      }
+
       .toolGroup {
         min-width: 0;
+        /*
+         * Column packing has to measure the row it happens in, not the scroller, now that a
+         * compact row is narrower than the pane.
+         */
+        container: harness-transcript / inline-size;
       }
 
       .toolGrid {
@@ -882,6 +916,8 @@ export class DeesHarnessMessageList extends DeesElement {
             <article
               class="virtualItem"
               data-virtual-key=${entry.item.key}
+              data-tool-layout=${this.timelineItemLayout(entry.item)}
+              data-tool-count=${this.timelineItemCount(entry.item)}
               aria-posinset=${entry.index + 1}
               aria-setsize=${this.timelineRenderItems.length}
               style=${`--harness-virtual-offset: ${this.virtualOffsets[entry.index] ?? 0}px;`}
@@ -906,6 +942,19 @@ export class DeesHarnessMessageList extends DeesElement {
     return indexes.sort((left, right) => left - right);
   }
 
+  /** Mirrors the row's layout onto the virtual wrapper so width rules match the flowed stack. */
+  private timelineItemLayout(itemArg: TTimelineRenderItem): string {
+    if (itemArg.kind === 'tool-group') return itemArg.layout;
+    if (itemArg.kind === 'message') return itemArg.toolLayout ?? 'message';
+    return itemArg.kind;
+  }
+
+  /** Group size, mirrored onto the virtual wrapper so width rules match the flowed stack. */
+  private timelineItemCount(itemArg: TTimelineRenderItem): number {
+    if (itemArg.kind !== 'tool-group') return 1;
+    return itemArg.messages.length >= 4 ? 4 : itemArg.messages.length;
+  }
+
   private renderTimelineItem(itemArg: TTimelineRenderItem, logicalIndexArg: number): TemplateResult {
     if (itemArg.kind === 'tool-group') return this.renderToolGroup(itemArg);
     if (itemArg.kind === 'message') return this.renderMessage(itemArg, itemArg.key);
@@ -978,6 +1027,7 @@ export class DeesHarnessMessageList extends DeesElement {
         data-timeline-key=${groupArg.key}
         data-tool-group-id=${groupArg.key}
         data-tool-layout=${groupArg.layout}
+        data-tool-count=${count >= 4 ? 4 : count}
       >
         <div class=${`toolGrid ${countClass}`}>
           ${repeat(

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

@@ -111,7 +111,7 @@ export class DeesHarnessToolCard extends DeesElement {
   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 subtaskDetailElements: HTMLElement[] = [];
   private subtaskResultResizeObserver: ResizeObserver | null = null;
   private terminalTailFollowing = true;
   private terminalScrollHydrated = false;
@@ -141,7 +141,11 @@ export class DeesHarnessToolCard extends DeesElement {
       .harness-card.subtaskPreviewOpen {
         display: flex;
         flex-direction: column;
-        height: var(--dees-harness-active-subtask-height, 320px);
+        /*
+         * A cap, not a fixed height: a short brief and result let the card size to their own
+         * text, and only content taller than the cap hands the overflow to the inner scrollers.
+         */
+        max-height: var(--dees-harness-active-subtask-height, 320px);
         box-sizing: border-box;
         overflow: hidden;
       }
@@ -169,7 +173,27 @@ export class DeesHarnessToolCard extends DeesElement {
         overflow: hidden;
       }
 
-      .harness-card.subtaskPreviewOpen .body,
+      /*
+       * The body takes its height from flex layout rather than a percentage: a capped card has no
+       * definite height for a percentage to resolve against, so a 100% height would collapse to
+       * auto and the inner scrollers would never engage. As a flex item it shrinks to the cap when
+       * the content overflows and sizes to its text when it does not.
+       */
+      .harness-card.subtaskPreviewOpen .bodyClipFrame {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .harness-card.subtaskPreviewOpen .body {
+        flex: 1;
+        min-height: 0;
+      }
+
+      /* A streaming child fills the cap so its transcript has a stable window to scroll in. */
+      .harness-card.subtaskPreviewOpen:has(.liveSubtaskBody) {
+        height: var(--dees-harness-active-subtask-height, 320px);
+      }
+
       .harness-card.subtaskPreviewOpen .subtaskPreview {
         min-height: 0;
         height: 100%;
@@ -259,6 +283,15 @@ export class DeesHarnessToolCard extends DeesElement {
         font-size: 12px;
       }
 
+      /* Stands in for the body while a finished card is collapsed. */
+      .resultSummary {
+        display: block;
+        margin-top: 2px;
+        color: var(--dees-color-text-secondary);
+        font-family: var(--dees-font-family-mono, monospace);
+        font-size: 11px;
+      }
+
       .metaColumn {
         display: flex;
         align-items: center;
@@ -680,10 +713,27 @@ export class DeesHarnessToolCard extends DeesElement {
         && (this.call.subtask.status.type === 'busy' || this.call.subtask.status.type === 'error');
     }
     if (this.call.status === 'error' || this.call.isError) return true;
+    // A card that opened while it was live closes again once the work has settled, so a finished
+    // run stops holding transcript height. 'stopped' is deliberately excluded: a killed command
+    // keeps its partial output on screen, like an error does.
+    if (this.call.status === 'completed' && this.resolvedCollapseWhenFinished) return false;
     if (typeof descriptor.defaultExpanded === 'function') return descriptor.defaultExpanded(this.enrichedCall);
     return descriptor.defaultExpanded ?? false;
   }
 
+  private get resolvedCollapseWhenFinished(): boolean {
+    const collapseWhenFinished = this.descriptor.collapseWhenFinished;
+    if (typeof collapseWhenFinished === 'function') return collapseWhenFinished(this.enrichedCall);
+    return collapseWhenFinished ?? false;
+  }
+
+  /** Outcome line shown only while collapsed; the subtitle already carries the request. */
+  private get collapsedSummary(): string {
+    if (this.isOpen || !this.descriptor.summary) return '';
+    if (this.call.status !== 'completed' && this.call.status !== 'stopped') return '';
+    return this.descriptor.summary(this.enrichedCall).trim();
+  }
+
   private get hasSubtaskPreview(): boolean {
     return this.allowSubtaskStreams
       && this.descriptor.kind === 'subtask'
@@ -704,11 +754,19 @@ export class DeesHarnessToolCard extends DeesElement {
     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 derivedSubtitle = descriptor.subtitle?.(call) ?? '';
+    // A producer-supplied title describes the call in its own words — "Read SKILL.md" rather than
+    // the sed invocation behind it — so it leads, and the derived line stays as the tooltip.
+    const producerTitle = typeof call.title === 'string' ? call.title.trim() : '';
+    const subtitle = producerTitle || derivedSubtitle;
+    const subtitleTooltip = producerTitle && derivedSubtitle && derivedSubtitle !== producerTitle
+      ? `${producerTitle}\n${derivedSubtitle}`
+      : subtitle;
     const effectiveStatus = harnessEffectiveToolStatus(call);
     const statusTone = effectiveStatus === 'completed' ? 'success'
       : effectiveStatus === 'stopped' ? 'warning' : effectiveStatus;
     const duration = harnessFormatDuration(call.startedAt, call.finishedAt);
+    const collapsedSummary = this.collapsedSummary;
     return html`
       <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}` : ''}"
         @mouseenter=${this.cancelTerminalTailReturn}
@@ -734,7 +792,10 @@ export class DeesHarnessToolCard extends DeesElement {
               ${this.renderMcpBadges(call)}
             </span>
             ${subtitle
-              ? html`<dees-harness-overflow-text class="subtitle" title=${subtitle}>${subtitle}</dees-harness-overflow-text>`
+              ? html`<dees-harness-overflow-text class="subtitle" title=${subtitleTooltip}>${subtitle}</dees-harness-overflow-text>`
+              : ''}
+            ${collapsedSummary
+              ? html`<dees-harness-overflow-text class="resultSummary" title=${collapsedSummary}>${collapsedSummary}</dees-harness-overflow-text>`
               : ''}
           </span>
           <span class="metaColumn">
@@ -1047,30 +1108,39 @@ export class DeesHarnessToolCard extends DeesElement {
   };
 
   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,
-    );
+    // Both panels hide their scrollbar, so the mask is the only cue that there is more text.
+    // Leaving the brief unwired made a long brief look truncated rather than scrollable.
+    for (const panel of this.subtaskDetailElements) {
+      panel.classList.toggle('fadeTop', panel.scrollTop > 1);
+      panel.classList.toggle(
+        'fadeBottom',
+        panel.scrollHeight - panel.scrollTop - panel.clientHeight > 1,
+      );
+    }
   };
 
   private connectSubtaskResultScroll(): void {
-    const nextResult = this.shadowRoot?.querySelector<HTMLElement>(
-      '.harness-subtask-detail-result .harness-subtask-detail-text',
-    ) ?? null;
-    if (nextResult === this.subtaskResultElement) {
+    const nextPanels = [...(this.shadowRoot?.querySelectorAll<HTMLElement>(
+      '.harness-subtask-detail-brief .harness-subtask-detail-text,'
+      + ' .harness-subtask-detail-result .harness-subtask-detail-text',
+    ) ?? [])];
+    const unchanged = nextPanels.length === this.subtaskDetailElements.length
+      && nextPanels.every((panel, index) => panel === this.subtaskDetailElements[index]);
+    if (unchanged) {
       this.syncSubtaskResultScroll();
       return;
     }
-    this.subtaskResultElement?.removeEventListener('scroll', this.syncSubtaskResultScroll);
+    for (const panel of this.subtaskDetailElements) {
+      panel.removeEventListener('scroll', this.syncSubtaskResultScroll);
+    }
     this.subtaskResultResizeObserver?.disconnect();
-    this.subtaskResultElement = nextResult;
-    if (!nextResult) return;
-    nextResult.addEventListener('scroll', this.syncSubtaskResultScroll, { passive: true });
+    this.subtaskDetailElements = nextPanels;
+    if (!nextPanels.length) return;
     this.subtaskResultResizeObserver ??= new ResizeObserver(this.syncSubtaskResultScroll);
-    this.subtaskResultResizeObserver.observe(nextResult);
+    for (const panel of nextPanels) {
+      panel.addEventListener('scroll', this.syncSubtaskResultScroll, { passive: true });
+      this.subtaskResultResizeObserver.observe(panel);
+    }
     this.syncSubtaskResultScroll();
   }
 
@@ -1116,8 +1186,10 @@ export class DeesHarnessToolCard extends DeesElement {
     this.bodyResizeObserver?.disconnect();
     this.bodyResizeObserver = null;
     this.observedBodyInner = null;
-    this.subtaskResultElement?.removeEventListener('scroll', this.syncSubtaskResultScroll);
-    this.subtaskResultElement = null;
+    for (const panel of this.subtaskDetailElements) {
+      panel.removeEventListener('scroll', this.syncSubtaskResultScroll);
+    }
+    this.subtaskDetailElements = [];
     this.subtaskResultResizeObserver?.disconnect();
     this.subtaskResultResizeObserver = null;
     await super.disconnectedCallback();

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

@@ -6,7 +6,9 @@ import {
   harnessLanguageForPath,
   harnessParseTodos,
   harnessStringifyValue,
+  harnessStripAnsi,
   harnessSummarizeValue,
+  harnessTerminalOutcome,
 } from '../harness.helpers.js';
 import '../dees-harness-todos/dees-harness-todos.js';
 
@@ -125,35 +127,20 @@ export const applyPatchFirstPath = (call: IHarnessToolCall): string => {
   return match ? match[1].trim() : '';
 };
 
-// eslint-disable-next-line no-control-regex
-const ansiEscapePattern = /\x1b\[[0-9;?]*[A-Za-z]|\x1b\][^\x07]*(?:\x07|\x1b\\)|\x1b[=>]/g;
-
-const stripAnsi = (text: string): string => text.replace(ansiEscapePattern, '');
-
 const renderTerminal = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
   const input = inputRecord(call);
   const command = String(input.command ?? '');
-  const output = call.output;
-  let stdout = '';
-  let stderr = '';
-  let nestedExitCode: number | undefined;
-  if (harnessIsRecord(output)) {
-    stdout = typeof output.stdout === 'string' ? output.stdout : harnessStringifyValue(output.stdout ?? '');
-    stderr = typeof output.stderr === 'string' ? output.stderr : '';
-    nestedExitCode = typeof output.exitCode === 'number' ? output.exitCode : undefined;
-  } else {
-    stdout = harnessStringifyValue(output);
-  }
-  const exitCode = typeof call.exitCode === 'number' ? call.exitCode : nestedExitCode;
+  // Shared with the collapsed-card summary so both read the same outcome.
+  const { stdout, stderr, exitCode } = harnessTerminalOutcome(call);
   const running = call.status === 'pending' || call.status === 'running';
   return html`
     <div class="harness-terminal">
       ${command
         ? html`<div class="harness-terminal-command"><span class="prompt">$</span> ${command}</div>`
         : ''}
-      ${stdout ? html`<pre class="harness-terminal-output">${stripAnsi(stdout)}</pre>` : ''}
-      ${stderr ? html`<pre class="harness-terminal-output tone-error">${stripAnsi(stderr)}</pre>` : ''}
-      ${call.errorText ? html`<pre class="harness-terminal-output tone-error">${stripAnsi(call.errorText)}</pre>` : ''}
+      ${stdout ? html`<pre class="harness-terminal-output">${harnessStripAnsi(stdout)}</pre>` : ''}
+      ${stderr ? html`<pre class="harness-terminal-output tone-error">${harnessStripAnsi(stderr)}</pre>` : ''}
+      ${call.errorText ? html`<pre class="harness-terminal-output tone-error">${harnessStripAnsi(call.errorText)}</pre>` : ''}
       ${running && !stdout && !stderr
         ? html`<div class="harness-terminal-running"><span class="cursor"></span> running…</div>`
         : ''}