@design.estate/dees-catalog 6.3.0 → 6.4.0

package/readme.md

@@ -1201,7 +1201,7 @@ Code display component with syntax highlighting and line numbers.
 ></dees-dataview-codebox>
 ```
 
-Diff rendering includes word-level intraline change highlighting, unchanged-context folding with expandable "N unchanged lines" rows, `+added −removed` stats in the footer, and a "Copy Unified Diff" context-menu action. The copy button yields the after-state text. The dependency-free engine (`computeLineDiff`, `parseUnifiedDiff`, `foldContextRows`, `buildSplitRows`, `diffStats`, `toUnifiedDiff`) is exported for programmatic use.
+Diff rendering includes word-level intraline change highlighting, unchanged-context folding with expandable "N unchanged lines" rows, `+added −removed` stats in the footer, and a "Copy Unified Diff" context-menu action. The app bar switches between inline and split layouts and emits the bubbling, composed `diff-view-change` event with `IDiffViewChangeDetail` (`{ diffView: TDiffView }`). The exported `TDiffView` type is `'inline' | 'split'`. Split mode keeps a fixed center divider and gives each side an independent horizontal scroll position while the containing surface owns their shared vertical movement. Set `showDiffLineNumbers` to `false` when snippet inputs do not carry trustworthy source positions. The copy button yields the after-state text. The dependency-free engine (`computeLineDiff`, `parseUnifiedDiff`, `foldContextRows`, `buildSplitRows`, `diffStats`, `toUnifiedDiff`) is exported for programmatic use.
 
 #### `DeesDataviewStatusobject`
 Status display component for complex objects with nested status indicators.
@@ -1821,7 +1821,7 @@ One message: role accent, markdown (assistant default, `message.markdown` overri
 
 #### `DeesHarnessToolCard`
 
-Tool-call card: shared chrome (icon, label, subtitle, status pill, duration, MCP badges) with a per-kind body. Kind resolution goes through `DeesHarnessToolRegistry` (see below); bodies for the seeded kinds — terminal, file-read, file-write (renders a before/after diff via `dees-dataview-codebox` when the input carries previous content), file-delete, dir-list, browser (inline screenshots), http, json, search, subtask, todo, mcp, unknown — live in `renderers.ts`. Overflowing subtitles use a 40px right-edge fade and reveal the full line on hover plus once after a two-second initial delay. Expand/collapse always uses a smooth disclosure transition. Initially closed bodies mount lazily on first expansion, then retain the same DOM and become inert plus `aria-hidden` while closed. Long outputs truncate at 6,000 chars with a "Show all" expander. Terminal and error cards open by default. Terminal calls may provide `exitCode` separately when `output` is one combined process stream; the renderer retains support for `{ stdout, stderr, exitCode }` output objects.
+Tool-call card: shared chrome (icon, label, subtitle, status pill, duration, MCP badges) with a per-kind body. Kind resolution goes through `DeesHarnessToolRegistry` (see below); bodies for the seeded kinds — terminal, file-read, file-write (renders a before/after diff via `dees-dataview-codebox` when the input carries previous content), file-delete, dir-list, browser (inline screenshots), http, json, search, subtask, todo, mcp, unknown — live in `renderers.ts`. File-write cards retain the user's inline/split choice while the same call updates. Numeric patch hunks preserve their source line numbers; patches and replacement snippets without coordinates hide gutters rather than presenting fabricated positions. Overflowing subtitles use a 40px right-edge fade and reveal the full line on hover plus once after a two-second initial delay. Expand/collapse always uses a smooth disclosure transition. Initially closed bodies mount lazily on first expansion, then retain the same DOM and become inert plus `aria-hidden` while closed. Long outputs truncate at 6,000 chars with a "Show all" expander. Terminal and error cards open by default. Terminal output uses a black inner log surface and follows the live tail after reaching the card-height cap. Scrolling upward detaches the tail; leaving the card returns to the bottom after five seconds, while re-entering cancels that pending return. Terminal calls may provide `exitCode` separately when `output` is one combined process stream; the renderer retains support for `{ stdout, stderr, exitCode }` output objects.
 
 Subtask calls may carry `subtask: IHarnessSubtaskStream`. While a projected child is busy, its Agent Brief is the leading item inside the same independently scrolling child transcript as its messages, permissions, questions, and status; no extra pinned or boxed brief sits above it. Dynamic 40px edge fades appear at the top only when content exists above and at the bottom only when content exists below, while wheel/touch scrolling remains available without visible scrollbars. Loading and unavailable projections reserve the same stable space. Once the child becomes idle or errored, the live transcript is removed from the card body and the disclosure cleanly renders Agent Brief followed by a scrollbar-free scrolling Result with the same position-aware edge fades; the full transcript remains available through the final bottom-positioned Open subagent chat action. `subtask.sessionId` is authoritative for drill-in when a projection exists; calls without a projection continue to use the existing `childSessionId` field. Authoritatively busy previews open by default and every expanded preview is bounded by `--dees-harness-active-subtask-height` (default `320px`), including its completion transition. The user's local expand/collapse choice wins. Completed subtask cards stay in their subtask-only chronological grid and untouched cards collapse individually without a grid-level summary. Hidden retained previews pause auto-follow observation without unmounting their DOM and catch up to the newest child content when reopened. Set `allowSubtaskStreams` false on a direct tool-card consumer to suppress the preview. The host remains responsible for hydration, transfer limits, authorization, gap recovery, and updating the shared objects; `truncated` projections visibly disclose omitted earlier messages.
 
@@ -1854,6 +1854,8 @@ DeesHarnessToolRegistry.default.register({
 });
 ```
 
+Custom tool renderers receive `IHarnessToolRenderHelpers`. Its `diffBlock(before, after, options)` helper accepts `language`, `filename`, and `view`, plus `unifiedDiff` for a positioned patch and `showLineNumbers` to suppress untrustworthy gutters.
+
 `server__tool` names resolve automatically to the MCP kind with server + annotation badges (`readOnlyHint` → success, `destructiveHint` → error, `openWorldHint` → warning). Per-element isolation: assign a forked registry to `.toolRegistry`.
 
 Descriptors may set `layout: 'compact' | 'full-row' | 'subtask'` to control transcript grid packing; omitted custom descriptors default to `compact`. The built-in terminal and file-write descriptors are `full-row`, while the built-in subtask descriptor uses the isolated `subtask` lane.

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '6.3.0',
+  version: '6.4.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -40,6 +40,12 @@ declare global {
   }
 }
 
+export type TDiffView = 'inline' | 'split';
+
+export interface IDiffViewChangeDetail {
+  diffView: TDiffView;
+}
+
 @customElement('dees-dataview-codebox')
 export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
@@ -69,7 +75,11 @@ export class DeesDataviewCodebox extends DeesElement {
 
   /** '' = regular code view; 'inline' = unified rows; 'split' = side by side */
   @property({ type: String })
-  accessor diffView: '' | 'inline' | 'split' = '';
+  accessor diffView: '' | TDiffView = '';
+
+  /** Hide gutters when a diff source does not provide trustworthy positions. */
+  @property({ type: Boolean })
+  accessor showDiffLineNumbers: boolean = true;
 
   @state()
   accessor highlightedCode: string = '';
@@ -123,9 +133,40 @@ export class DeesDataviewCodebox extends DeesElement {
       .appbar .actions {
         grid-column: 3;
         display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
         justify-content: flex-end;
       }
 
+      .viewToggle {
+        display: flex;
+        padding: 2px;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-md);
+        background: var(--dees-color-bg-tertiary);
+      }
+
+      .viewButton {
+        padding: 3px 7px;
+        border: 0;
+        border-radius: calc(var(--dees-radius-md) - 2px);
+        background: transparent;
+        color: var(--dees-color-text-muted);
+        cursor: pointer;
+        font: inherit;
+        font-size: var(--dees-font-caption2-size);
+        line-height: 1.2;
+      }
+
+      .viewButton:hover {
+        color: var(--dees-color-text-primary);
+      }
+
+      .viewButton.active {
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
+      }
+
       .copyButton {
         display: flex;
         align-items: center;
@@ -247,8 +288,37 @@ export class DeesDataviewCodebox extends DeesElement {
         grid-template-columns: minmax(3ch, auto) minmax(3ch, auto) 2ch minmax(0, 1fr);
       }
 
-      .diffGrid.split {
-        grid-template-columns: minmax(3ch, auto) 2ch minmax(24ch, 1fr) minmax(3ch, auto) 2ch minmax(24ch, 1fr);
+      .diffGrid.inline.withoutLineNumbers {
+        grid-template-columns: 2ch minmax(0, 1fr);
+      }
+
+      .diffSplit {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
+        align-items: start;
+        min-width: 0;
+        padding: var(--dees-spacing-sm) 0;
+      }
+
+      .diffSplitDivider {
+        align-self: stretch;
+        background: var(--dees-color-border-default);
+      }
+
+      .diffSplitPane {
+        min-width: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .diffGrid.splitSide {
+        grid-template-columns: minmax(3ch, auto) 2ch minmax(24ch, 1fr);
+      }
+
+      .diffGrid.splitSide.withoutLineNumbers {
+        grid-template-columns: 2ch minmax(24ch, 1fr);
       }
 
       .diffGrid > div {
@@ -336,10 +406,6 @@ export class DeesDataviewCodebox extends DeesElement {
         color: var(--dees-color-link-hover);
       }
 
-      .diffSplitSep {
-        border-left: 1px solid var(--dees-color-border-subtle);
-      }
-
       .diffStat {
         font-weight: 600;
       }
@@ -382,6 +448,24 @@ export class DeesDataviewCodebox extends DeesElement {
         <div slot="header" class="appbar">
           <div class="fileName">${this.filename}</div>
           <div class="actions">
+            ${this.isDiffActive
+              ? html`
+                  <div class="viewToggle" role="group" aria-label="Diff layout">
+                    <button
+                      class="viewButton ${this.effectiveDiffView === 'inline' ? 'active' : ''}"
+                      type="button"
+                      aria-pressed=${String(this.effectiveDiffView === 'inline')}
+                      @click=${() => this.setDiffView('inline')}
+                    >Inline</button>
+                    <button
+                      class="viewButton ${this.effectiveDiffView === 'split' ? 'active' : ''}"
+                      type="button"
+                      aria-pressed=${String(this.effectiveDiffView === 'split')}
+                      @click=${() => this.setDiffView('split')}
+                    >Split</button>
+                  </div>
+                `
+              : ''}
             <div
               class="copyButton ${this.copied ? 'copied' : ''}"
               title="Copy code"
@@ -431,18 +515,14 @@ export class DeesDataviewCodebox extends DeesElement {
 
   private renderDiff(): TemplateResult {
     const displayRows = this.displayRowsWithFolds();
-    return html`
-      <div class="diffScroll">
-        ${this.effectiveDiffView === 'split'
-          ? this.renderSplitGrid(displayRows)
-          : this.renderInlineGrid(displayRows)}
-      </div>
-    `;
+    return this.effectiveDiffView === 'split'
+      ? this.renderSplitGrid(displayRows)
+      : html`<div class="diffScroll">${this.renderInlineGrid(displayRows)}</div>`;
   }
 
   private renderInlineGrid(displayRows: TDiffDisplayRow[]): TemplateResult {
     return html`
-      <div class="diffGrid inline">
+      <div class="diffGrid inline ${this.showDiffLineNumbers ? '' : 'withoutLineNumbers'}">
         ${displayRows.map((displayRow) => {
           if (displayRow.kind === 'fold') {
             return this.renderFoldRow(displayRow.rows.length, displayRow.ordinal ?? 0);
@@ -452,8 +532,12 @@ export class DeesDataviewCodebox extends DeesElement {
           }
           const rowClass = displayRow.kind === 'add' ? 'row-add' : displayRow.kind === 'remove' ? 'row-remove' : '';
           return html`
-            <div class="diffNum ${rowClass}">${displayRow.oldLine ?? ''}</div>
-            <div class="diffNum ${rowClass}">${displayRow.newLine ?? ''}</div>
+            ${this.showDiffLineNumbers
+              ? html`
+                  <div class="diffNum ${rowClass}">${displayRow.oldLine ?? ''}</div>
+                  <div class="diffNum ${rowClass}">${displayRow.newLine ?? ''}</div>
+                `
+              : ''}
             <div class="diffSign ${rowClass}">${displayRow.kind === 'add' ? '+' : displayRow.kind === 'remove' ? '−' : ''}</div>
             <div class="diffText ${rowClass}">${this.renderDiffLine(displayRow.text, displayRow.segments, displayRow.kind)}</div>
           `;
@@ -463,18 +547,17 @@ export class DeesDataviewCodebox extends DeesElement {
   }
 
   private renderSplitGrid(displayRows: TDiffDisplayRow[]): TemplateResult {
-    // pair each contiguous non-fold run; folds render as full-width rows
-    const rendered: TemplateResult[] = [];
+    const leftRendered: TemplateResult[] = [];
+    const rightRendered: TemplateResult[] = [];
     let run: IDiffRow[] = [];
     const flushRun = () => {
       for (const splitRow of buildSplitRows(run)) {
         if (splitRow.kind === 'hunk') {
-          rendered.push(html`<div class="diffHunk">${splitRow.text}</div>`);
+          leftRendered.push(html`<div class="diffHunk">${splitRow.text}</div>`);
+          rightRendered.push(html`<div class="diffHunk">${splitRow.text}</div>`);
         } else {
-          rendered.push(html`
-            ${this.renderSplitCell(splitRow.left, 'left')}
-            ${this.renderSplitCell(splitRow.right, 'right')}
-          `);
+          leftRendered.push(this.renderSplitCell(splitRow.left));
+          rightRendered.push(this.renderSplitCell(splitRow.right));
         }
       }
       run = [];
@@ -482,27 +565,38 @@ export class DeesDataviewCodebox extends DeesElement {
     for (const displayRow of displayRows) {
       if (displayRow.kind === 'fold') {
         flushRun();
-        rendered.push(this.renderFoldRow(displayRow.rows.length, displayRow.ordinal ?? 0));
+        leftRendered.push(this.renderFoldRow(displayRow.rows.length, displayRow.ordinal ?? 0));
+        rightRendered.push(this.renderFoldRow(displayRow.rows.length, displayRow.ordinal ?? 0));
       } else {
         run.push(displayRow);
       }
     }
     flushRun();
-    return html`<div class="diffGrid split">${rendered}</div>`;
+    const lineNumberClass = this.showDiffLineNumbers ? '' : 'withoutLineNumbers';
+    return html`
+      <div class="diffSplit">
+        <div class="diffSplitPane" data-side="left" aria-label="Before">
+          <div class="diffGrid splitSide ${lineNumberClass}">${leftRendered}</div>
+        </div>
+        <div class="diffSplitDivider" aria-hidden="true"></div>
+        <div class="diffSplitPane" data-side="right" aria-label="After">
+          <div class="diffGrid splitSide ${lineNumberClass}">${rightRendered}</div>
+        </div>
+      </div>
+    `;
   }
 
-  private renderSplitCell(cell: ISplitCell | undefined, side: 'left' | 'right'): TemplateResult {
-    const separatorClass = side === 'right' ? 'diffSplitSep' : '';
+  private renderSplitCell(cell: ISplitCell | undefined): TemplateResult {
     if (!cell) {
       return html`
-        <div class="diffNum row-filler ${separatorClass}"></div>
+        ${this.showDiffLineNumbers ? html`<div class="diffNum row-filler"></div>` : ''}
         <div class="diffSign row-filler"></div>
         <div class="diffText row-filler"></div>
       `;
     }
     const rowClass = cell.kind === 'add' ? 'row-add' : cell.kind === 'remove' ? 'row-remove' : '';
     return html`
-      <div class="diffNum ${rowClass} ${separatorClass}">${cell.line || ''}</div>
+      ${this.showDiffLineNumbers ? html`<div class="diffNum ${rowClass}">${cell.line || ''}</div>` : ''}
       <div class="diffSign ${rowClass}">${cell.kind === 'add' ? '+' : cell.kind === 'remove' ? '−' : ''}</div>
       <div class="diffText ${rowClass}">${this.renderDiffLine(cell.text, cell.segments, cell.kind)}</div>
     `;
@@ -552,10 +646,20 @@ export class DeesDataviewCodebox extends DeesElement {
     return Boolean(this.unifiedDiff || this.codeBefore || this.diffView);
   }
 
-  public get effectiveDiffView(): 'inline' | 'split' {
+  public get effectiveDiffView(): TDiffView {
     return this.diffView === 'split' ? 'split' : 'inline';
   }
 
+  private setDiffView(diffViewArg: TDiffView): void {
+    if (this.effectiveDiffView === diffViewArg) return;
+    this.diffView = diffViewArg;
+    this.dispatchEvent(new CustomEvent<IDiffViewChangeDetail>('diff-view-change', {
+      detail: { diffView: diffViewArg },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
   public willUpdate(changedProperties: Map<string, any>) {
     super.willUpdate(changedProperties);
     if (changedProperties.has('codeToDisplay')) {

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

@@ -31,6 +31,10 @@ import {
   harnessTruncate,
 } from '../harness.helpers.js';
 import { DeesHarnessMessageList } from '../dees-harness-message-list/dees-harness-message-list.js';
+import type {
+  IDiffViewChangeDetail,
+  TDiffView,
+} from '../../00group-dataview/dees-dataview-codebox/dees-dataview-codebox.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';
@@ -91,12 +95,18 @@ export class DeesHarnessToolCard extends DeesElement {
   @state()
   accessor outcomeScanTone: 'success' | 'error' | null = null;
 
+  @state()
+  accessor diffViewOverride: TDiffView | null = null;
+
   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;
+  private terminalTailFollowing = true;
+  private terminalTailReturnTimeout: ReturnType<typeof setTimeout> | null = null;
+  private terminalTailReturnDelayMs = 5000;
 
   public static styles = [
     themeDefaultStyles,
@@ -496,7 +506,7 @@ export class DeesHarnessToolCard extends DeesElement {
         border: 1px solid var(--dees-color-border-subtle);
         border-radius: var(--dees-radius-md);
         corner-shape: var(--dees-corner-shape);
-        background: var(--dees-color-code-block-bg, #0c0c0e);
+        background: #0c0c0e;
         overflow: hidden;
         font-family: var(--dees-font-family-mono);
         font-size: var(--dees-font-control-size-sm, 12px);
@@ -506,7 +516,7 @@ export class DeesHarnessToolCard extends DeesElement {
       .harness-terminal-command {
         padding: var(--dees-spacing-xs) var(--dees-spacing-md);
         border-bottom: 1px solid var(--dees-color-border-subtle);
-        color: var(--dees-color-text-primary);
+        color: #f5f5f7;
         font-weight: 600;
         white-space: pre-wrap;
         overflow-wrap: anywhere;
@@ -521,7 +531,7 @@ export class DeesHarnessToolCard extends DeesElement {
         margin: 0;
         padding: var(--dees-spacing-xs) var(--dees-spacing-md) var(--dees-spacing-sm);
         max-height: 100%;
-        color: var(--dees-color-text-secondary);
+        color: #c7c7cc;
         white-space: pre-wrap;
         overflow-wrap: anywhere;
       }
@@ -535,7 +545,7 @@ export class DeesHarnessToolCard extends DeesElement {
         align-items: center;
         gap: var(--dees-spacing-xs);
         padding: var(--dees-spacing-xs) var(--dees-spacing-md) var(--dees-spacing-sm);
-        color: var(--dees-color-text-muted);
+        color: #8e8e93;
       }
 
       .harness-terminal-running .cursor {
@@ -691,6 +701,8 @@ export class DeesHarnessToolCard extends DeesElement {
     const duration = harnessFormatDuration(call.startedAt, call.finishedAt);
     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}
+        @mouseleave=${this.scheduleTerminalTailReturn}
         @animationend=${(event: AnimationEvent) => {
           if (event.animationName === 'harness-card-return-flash') {
             this.endReturnFlash();
@@ -735,6 +747,7 @@ export class DeesHarnessToolCard extends DeesElement {
                   <div
                     class="bodyClipFrame"
                     style=${this.uncapped || this.activeSubtaskPreview ? '' : `max-height: ${this.bodyCapPx}px;`}
+                    @scroll=${this.handleBodyScroll}
                   >
                     <div class=${`body bodyInner ${this.hasLiveSubtaskPreview ? 'liveSubtaskBody' : ''}`}>
                       ${this.renderBody(call)}
@@ -849,7 +862,13 @@ export class DeesHarnessToolCard extends DeesElement {
   public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
     super.willUpdate(changedProperties);
     const previousCall = changedProperties.get('call') as IHarnessToolCall | undefined;
-    if (!previousCall || previousCall.id !== this.call.id) return;
+    if (!previousCall) return;
+    if (previousCall.id !== this.call.id) {
+      this.diffViewOverride = null;
+      this.terminalTailFollowing = true;
+      this.cancelTerminalTailReturn();
+      return;
+    }
     const previousStatus = harnessEffectiveToolStatus(previousCall);
     const currentStatus = harnessEffectiveToolStatus(this.call);
     const wasActive = previousStatus === 'pending' || previousStatus === 'running';
@@ -880,7 +899,15 @@ export class DeesHarnessToolCard extends DeesElement {
       return;
     }
     const bodyInner = this.shadowRoot?.querySelector('.bodyInner') ?? null;
-    if (bodyInner === this.observedBodyInner) return;
+    if (bodyInner === this.observedBodyInner) {
+      if (
+        (changedProperties.has('call') || changedProperties.has('bodyCapPx'))
+        && this.terminalTailFollowing
+      ) {
+        this.scrollTerminalToTail();
+      }
+      return;
+    }
     this.bodyResizeObserver?.disconnect();
     this.observedBodyInner = bodyInner;
     if (!bodyInner) {
@@ -892,10 +919,46 @@ export class DeesHarnessToolCard extends DeesElement {
       if (!inner) return;
       // small slack so a few px never trigger the cap chrome
       this.bodyOverflowing = inner.scrollHeight > this.bodyCapPx + 24;
+      if (this.terminalTailFollowing) this.scrollTerminalToTail();
     });
     this.bodyResizeObserver.observe(bodyInner);
+    if (this.terminalTailFollowing) this.scrollTerminalToTail();
   }
 
+  private readonly handleBodyScroll = (eventArg: Event): void => {
+    if (this.descriptor.kind !== 'terminal' || this.uncapped) return;
+    const frame = eventArg.currentTarget as HTMLElement;
+    this.terminalTailFollowing = frame.scrollHeight - frame.scrollTop - frame.clientHeight <= 2;
+    if (this.terminalTailFollowing) this.cancelTerminalTailReturn();
+  };
+
+  private scrollTerminalToTail(): void {
+    if (this.descriptor.kind !== 'terminal' || this.uncapped || !this.isOpen) return;
+    const frame = this.shadowRoot?.querySelector<HTMLElement>('.bodyClipFrame');
+    if (!frame) return;
+    frame.scrollTop = frame.scrollHeight;
+  }
+
+  private readonly scheduleTerminalTailReturn = (): void => {
+    if (this.descriptor.kind !== 'terminal' || this.terminalTailFollowing || this.uncapped) return;
+    this.cancelTerminalTailReturn();
+    this.terminalTailReturnTimeout = setTimeout(() => {
+      this.terminalTailReturnTimeout = null;
+      this.terminalTailFollowing = true;
+      this.scrollTerminalToTail();
+    }, this.terminalTailReturnDelayMs);
+  };
+
+  private readonly cancelTerminalTailReturn = (): void => {
+    if (!this.terminalTailReturnTimeout) return;
+    clearTimeout(this.terminalTailReturnTimeout);
+    this.terminalTailReturnTimeout = null;
+  };
+
+  private readonly handleDiffViewChange = (eventArg: CustomEvent<IDiffViewChangeDetail>): void => {
+    this.diffViewOverride = eventArg.detail.diffView;
+  };
+
   private readonly syncSubtaskResultScroll = (): void => {
     const result = this.subtaskResultElement;
     if (!result) return;
@@ -943,6 +1006,7 @@ export class DeesHarnessToolCard extends DeesElement {
       clearTimeout(this.outcomeScanFallbackTimeout);
       this.outcomeScanFallbackTimeout = null;
     }
+    this.cancelTerminalTailReturn();
     this.fullscreenPortal?.remove();
     this.fullscreenPortal = null;
     this.bodyResizeObserver?.disconnect();
@@ -1076,9 +1140,12 @@ export class DeesHarnessToolCard extends DeesElement {
         <dees-dataview-codebox
           .progLang=${options?.language ?? 'plaintext'}
           .filename=${options?.filename ?? ''}
-          .diffView=${options?.view ?? 'inline'}
+          .diffView=${this.diffViewOverride ?? options?.view ?? 'inline'}
+          .unifiedDiff=${options?.unifiedDiff ?? ''}
+          .showDiffLineNumbers=${options?.showLineNumbers ?? true}
           .codeBefore=${before}
           .codeToDisplay=${after}
+          @diff-view-change=${this.handleDiffViewChange}
         ></dees-dataview-codebox>
       `,
       monoBlock: (text, options) => {

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

@@ -34,6 +34,8 @@ interface IApplyPatchFile {
   path: string;
   before: string;
   after: string;
+  unifiedDiff?: string;
+  lineNumbersKnown: boolean;
 }
 
 /**
@@ -43,14 +45,27 @@ interface IApplyPatchFile {
  */
 export const parseApplyPatch = (patchText: string): IApplyPatchFile[] => {
   const files: IApplyPatchFile[] = [];
-  let current: { op: IApplyPatchFile['op']; path: string; before: string[]; after: string[] } | null = null;
+  let current: {
+    op: IApplyPatchFile['op'];
+    path: string;
+    before: string[];
+    after: string[];
+    patch: string[];
+    sawHunk: boolean;
+    lineNumbersKnown: boolean;
+  } | null = null;
   const flush = (): void => {
     if (!current) return;
+    const unifiedDiff = current.op === 'update' && current.sawHunk && current.lineNumbersKnown
+      ? [`--- a/${current.path}`, `+++ b/${current.path}`, ...current.patch].join('\n')
+      : undefined;
     files.push({
       op: current.op,
       path: current.path,
       before: current.before.join('\n'),
       after: current.after.join('\n'),
+      unifiedDiff,
+      lineNumbersKnown: Boolean(unifiedDiff),
     });
     current = null;
   };
@@ -63,15 +78,31 @@ export const parseApplyPatch = (patchText: string): IApplyPatchFile[] => {
         path: header[2].trim(),
         before: [],
         after: [],
+        patch: [],
+        sawHunk: false,
+        lineNumbersKnown: true,
       };
       continue;
     }
-    if (/^\*\*\* (Begin|End) Patch/.test(line) || /^\*\*\* Move to: /.test(line)) {
+    if (
+      /^\*\*\* (Begin|End) Patch/.test(line)
+      || line === '*** End of File'
+      || /^\*\*\* Move to: /.test(line)
+    ) {
       if (/End Patch/.test(line)) flush();
       continue;
     }
     if (!current) continue;
-    if (line.startsWith('@@')) continue;
+    if (line.startsWith('@@')) {
+      current.sawHunk = true;
+      if (/^@@ -\d+(?:,\d+)? \+\d+(?:,\d+)? @@/.test(line)) {
+        current.patch.push(line);
+      } else {
+        current.lineNumbersKnown = false;
+      }
+      continue;
+    }
+    current.patch.push(line);
     if (line.startsWith('+')) {
       current.after.push(line.slice(1));
     } else if (line.startsWith('-')) {
@@ -154,6 +185,8 @@ const renderFileWrite = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelp
             language: patchLanguage,
             filename: patchFilename,
             view: 'split',
+            unifiedDiff: file.unifiedDiff,
+            showLineNumbers: file.lineNumbersKnown,
           });
         }
         if (file.op === 'add') {
@@ -180,7 +213,13 @@ const renderFileWrite = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelp
   const filename = path.split('/').pop() || undefined;
   const language = harnessLanguageForPath(path);
   if (previousContent) {
-    return helpers.diffBlock(previousContent, newContent, { language, filename, view: 'split' });
+    const isStringReplacement = input.oldString !== undefined || input.old_string !== undefined;
+    return helpers.diffBlock(previousContent, newContent, {
+      language,
+      filename,
+      view: 'split',
+      showLineNumbers: !isStringReplacement,
+    });
   }
   if (newContent) {
     return helpers.codeBlock(newContent, language, filename);

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

@@ -11,7 +11,13 @@ export interface IHarnessToolRenderHelpers {
   /** highlighted code block (dees-dataview-codebox) with optional filename */
   codeBlock(code: string, language?: string, filename?: string): TemplateResult;
   /** before/after diff (dees-dataview-codebox diff mode) */
-  diffBlock(before: string, after: string, options?: { language?: string; filename?: string; view?: 'inline' | 'split' }): TemplateResult;
+  diffBlock(before: string, after: string, options?: {
+    language?: string;
+    filename?: string;
+    view?: 'inline' | 'split';
+    unifiedDiff?: string;
+    showLineNumbers?: boolean;
+  }): TemplateResult;
   /** plain monospace block with truncation + expand */
   monoBlock(text: string, options?: { maxChars?: number; tone?: 'default' | 'error' }): TemplateResult;
   /** two-column key/value summary */