@design.estate/dees-catalog 9.7.0 → 9.8.0

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>`
         : ''}

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

@@ -313,3 +313,66 @@ export const harnessSummarizeValue = (value: unknown): string => {
 export const harnessSummaryLine = (value: unknown): string => {
   return harnessSummarizeValue(value).split('\n')[0] || '';
 };
+
+// eslint-disable-next-line no-control-regex
+const ansiEscapePattern = /\x1b\[[0-9;?]*[A-Za-z]|\x1b\][^\x07]*(?:\x07|\x1b\\)|\x1b[=>]/g;
+
+/** Terminal output carries raw escape sequences; they must never reach a header or a summary. */
+export const harnessStripAnsi = (text: string): string => text.replace(ansiEscapePattern, '');
+
+export interface IHarnessTerminalOutcome {
+  stdout: string;
+  stderr: string;
+  /** Top-level exitCode wins over a nested one, matching how producers report it. */
+  exitCode?: number;
+}
+
+/**
+ * Normalizes the three shapes producers use for shell output: a `{stdout, stderr, exitCode}`
+ * record, a combined string with a separate top-level `exitCode`, or an arbitrary value.
+ */
+export const harnessTerminalOutcome = (callArg: IHarnessToolCall): IHarnessTerminalOutcome => {
+  const output = callArg.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 callArg.exitCode === 'number' ? callArg.exitCode : nestedExitCode;
+  return { stdout, stderr, ...(exitCode === undefined ? {} : { exitCode }) };
+};
+
+const harnessLastMeaningfulLine = (text: string): string => {
+  const lines = harnessStripAnsi(text).split('\n');
+  for (let index = lines.length - 1; index >= 0; index -= 1) {
+    const line = lines[index].trim();
+    if (line) return line;
+  }
+  return '';
+};
+
+/**
+ * One-line outcome for a finished shell call, for the collapsed card header. The command itself
+ * is already the card subtitle, so this describes the RESULT: exit code, how much came back, and
+ * the last meaningful line. Harness support for a richer summary is uneven — only OpenCode
+ * supplies a model-authored description, so this is derived from output that every harness has.
+ */
+export const harnessTerminalResultSummary = (callArg: IHarnessToolCall): string => {
+  const { stdout, stderr, exitCode } = harnessTerminalOutcome(callArg);
+  const parts: string[] = [];
+  if (exitCode !== undefined) parts.push(exitCode === 0 ? 'exit 0' : `exit ${exitCode}`);
+  const combined = `${stdout}${stdout && stderr ? '\n' : ''}${stderr}`;
+  const lineCount = combined ? harnessStripAnsi(combined).split('\n').filter((line) => line.trim()).length : 0;
+  if (lineCount > 0) parts.push(`${lineCount} ${lineCount === 1 ? 'line' : 'lines'}`);
+  else if (exitCode !== undefined) parts.push('no output');
+  const lastLine = harnessLastMeaningfulLine(stderr) || harnessLastMeaningfulLine(stdout);
+  const prefix = parts.join(' · ');
+  if (!lastLine) return prefix;
+  const trimmed = lastLine.length > 160 ? `${lastLine.slice(0, 160)}…` : lastLine;
+  return prefix ? `${prefix} · ${trimmed}` : trimmed;
+};

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

@@ -230,6 +230,12 @@ export interface IHarnessToolCall {
   subtask?: IHarnessSubtaskStream;
   /** model the spawned session runs on, e.g. "anthropic/claude-opus-5" */
   model?: string;
+  /**
+   * Producer-supplied one-line description of the call, e.g. OpenCode's tool title or a parsed
+   * shell action. Single line, already bounded by the producer. Preferred over any line the card
+   * derives for itself; absent whenever the producer offers nothing.
+   */
+  title?: string;
   /** epoch ms */
   startedAt?: number;
   finishedAt?: number;

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

@@ -1,7 +1,12 @@
 import type { TemplateResult } from '@design.estate/dees-element';
 import type { TDiffViewRequest } from '../00group-dataview/dees-dataview-codebox/dees-dataview-codebox.js';
 import type { IHarnessToolCall, THarnessContentBlock } from './interfaces.js';
-import { harnessIsRecord, harnessSummaryLine } from './harness.helpers.js';
+import {
+  harnessIsRecord,
+  harnessSummaryLine,
+  harnessTerminalOutcome,
+  harnessTerminalResultSummary,
+} from './harness.helpers.js';
 
 /**
  * Render helpers handed to tool body renderers. Implemented by
@@ -49,6 +54,14 @@ export interface IHarnessToolDescriptor {
    */
   renderBody?: (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers) => TemplateResult;
   defaultExpanded?: boolean | ((call: IHarnessToolCall) => boolean);
+  /**
+   * Collapses a card that opened while it was live once its work is done, so a finished run
+   * stops occupying the transcript. Evaluated only for a settled call, and always subordinate to
+   * an explicit user toggle.
+   */
+  collapseWhenFinished?: boolean | ((call: IHarnessToolCall) => boolean);
+  /** One-line outcome shown in the header while the card is collapsed. */
+  summary?: (call: IHarnessToolCall) => string;
   /** Transcript grid packing; omitted descriptors use the compact layout. */
   layout?: THarnessToolLayout;
   /** styles the card with a destructive accent regardless of status */
@@ -101,6 +114,14 @@ const defaultDescriptors: IHarnessToolDescriptor[] = [
     },
     defaultExpanded: true,
     layout: 'full-row',
+    /*
+     * Only a command that can be PROVEN to have succeeded collapses. An absent exit code is not
+     * evidence of success: a producer that reports a failed command as completed and encodes the
+     * failure in its output would otherwise have that failure hidden behind a one-line summary.
+     * Such a card stays open, and the producer reporting an exit code is the real fix.
+     */
+    collapseWhenFinished: (call) => harnessTerminalOutcome(call).exitCode === 0,
+    summary: harnessTerminalResultSummary,
   },
   {
     kind: 'file-read',