@design.estate/dees-catalog 6.2.0 → 6.4.0

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-chat/dees-harness-chat.ts

@@ -11,7 +11,9 @@ import {
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
 import type {
+  IHarnessAccountChangeDetail,
   IHarnessAttachment,
+  IHarnessComposerOption,
   IHarnessMessage,
   IHarnessPermissionRequest,
   IHarnessQuestionRequest,
@@ -148,6 +150,12 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property()
+  accessor account: string = '';
+
+  @property({ attribute: false })
+  accessor accountOptions: IHarnessComposerOption[] = [];
+
   @property()
   accessor model: string = '';
 
@@ -641,6 +649,8 @@ export class DeesHarnessChat extends DeesElement {
           .disabled=${this.disabled}
           .busy=${this.busy || this.status.type === 'busy'}
           .queuedCount=${this.queuedCount}
+          .account=${this.account}
+          .accountOptions=${this.accountOptions}
           .model=${this.model}
           .modelOptions=${this.modelOptions}
           .reasoningEffort=${this.reasoningEffort}
@@ -653,6 +663,9 @@ export class DeesHarnessChat extends DeesElement {
           @harness-attachments-change=${(event: CustomEvent<{ attachments: IHarnessAttachment[] }>) => {
             this.attachments = event.detail?.attachments ?? [];
           }}
+          @harness-account-change=${(event: CustomEvent<IHarnessAccountChangeDetail>) => {
+            if (event.detail?.account) this.account = event.detail.account;
+          }}
           @harness-model-change=${(event: CustomEvent<{ model?: string; reasoningEffort?: string }>) => {
             if (event.detail?.model) this.model = event.detail.model;
             if (event.detail?.reasoningEffort) this.reasoningEffort = event.detail.reasoningEffort;

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

@@ -29,15 +29,21 @@ export const demoFunc = () => html`
     @harness-input=${logEvent}
     @harness-attachments-change=${logEvent}
     @harness-attachment-error=${logEvent}
+    @harness-account-change=${logEvent}
     @harness-model-change=${logEvent}
     @harness-mode-change=${logEvent}
   >
     <div class="label">default with mode switcher + model controls (events log to console)</div>
     <dees-harness-composer
+      account="account-1"
       model="gpt-5.5"
       reasoningEffort="high"
       mode="Planning"
       .modeOptions=${['Planning', 'Building']}
+      .accountOptions=${[
+        { label: 'Personal · alex@example.com', value: 'account-1' },
+        { label: 'Team · alex@example.com', value: 'account-2' },
+      ]}
       .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
       .effortOptions=${['xhigh', 'high', 'medium', 'low']}
     ></dees-harness-composer>

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

@@ -9,7 +9,11 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessAttachment, IHarnessComposerSendDetail } from '../interfaces.js';
+import type {
+  IHarnessAttachment,
+  IHarnessComposerOption,
+  IHarnessComposerSendDetail,
+} from '../interfaces.js';
 import {
   harnessFileToBase64,
   harnessFormatBytes,
@@ -33,16 +37,19 @@ type TDropdownOption = { option: string; key: string };
 const toDropdownOptions = (values: string[]): TDropdownOption[] =>
   values.map((value) => ({ option: value, key: value }));
 
+const toLabeledDropdownOptions = (values: IHarnessComposerOption[]): TDropdownOption[] =>
+  values.map((value) => ({ option: value.label, key: value.value }));
+
 /**
  * Prompt composer: autogrow textarea, attachments (picker / paste /
- * drag-drop with per-file and total size limits), optional model and
- * reasoning-effort dropdowns. Cmd/Ctrl+Enter sends. While busy, Stop is an
+ * drag-drop with per-file and total size limits), optional account, model,
+ * and reasoning-effort dropdowns. Cmd/Ctrl+Enter sends. While busy, Stop is an
  * additional button and Send stays available for queueing; an empty prompt
  * with queued messages offers "Steer now".
  *
  * Controlled component: `value` and `attachments` are owned by the host;
  * the composer emits `harness-input`, `harness-attachments-change`,
- * `harness-attachment-error`, `harness-model-change`, `harness-send`,
+ * `harness-attachment-error`, `harness-account-change`, `harness-model-change`, `harness-send`,
  * `harness-steer`, and `harness-abort` (all bubbling + composed).
  */
 @customElement('dees-harness-composer')
@@ -90,6 +97,12 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ type: Number })
   accessor maxTotalAttachmentBytes: number = harnessMaxTotalAttachmentBytes;
 
+  @property()
+  accessor account: string = '';
+
+  @property({ attribute: false })
+  accessor accountOptions: IHarnessComposerOption[] = [];
+
   @property()
   accessor model: string = '';
 
@@ -122,6 +135,7 @@ export class DeesHarnessComposer extends DeesElement {
       :host {
         display: block;
         font-family: var(--dees-font-family);
+        container-type: inline-size;
       }
 
       .composer {
@@ -296,6 +310,12 @@ export class DeesHarnessComposer extends DeesElement {
         margin: 0;
       }
 
+      .accountSelect {
+        flex: 0 1 180px;
+        width: 180px;
+        min-width: 120px;
+      }
+
       /* Model identifiers are provider-qualified ("anthropic/claude-opus-5"),
          so the control grows into the free space instead of truncating,
          while still shrinking on narrow hosts. */
@@ -313,6 +333,25 @@ export class DeesHarnessComposer extends DeesElement {
       .spacer {
         flex: 1;
       }
+
+      @container (max-width: 760px) {
+        .controlsRow {
+          flex-wrap: wrap;
+        }
+
+        .modelControls {
+          order: 3;
+          flex: 1 0 100%;
+          flex-wrap: wrap;
+        }
+
+        .accountSelect,
+        .modelSelect {
+          flex: 1 1 140px;
+          width: auto;
+          min-width: 0;
+        }
+      }
     `,
   ];
 
@@ -386,9 +425,28 @@ export class DeesHarnessComposer extends DeesElement {
                 </div>
               `
             : ''}
-          ${this.showModelControls && (this.modelOptions.length || this.effortOptions.length)
+          ${this.showModelControls && (
+            this.accountOptions.length || this.modelOptions.length || this.effortOptions.length
+          )
             ? html`
                 <div class="modelControls">
+                  ${this.accountOptions.length
+                    ? html`
+                        <dees-input-dropdown
+                          class="accountSelect"
+                          .options=${toLabeledDropdownOptions(this.accountOptions)}
+                          .selectedOption=${this.account
+                            ? toLabeledDropdownOptions(this.accountOptions)
+                                .find((option) => option.key === this.account) ?? null
+                            : null}
+                          .disabled=${this.disabled}
+                          @selectedOption=${(event: CustomEvent<TDropdownOption>) => {
+                            this.account = event.detail?.key ?? this.account;
+                            this.emit('harness-account-change', { account: this.account });
+                          }}
+                        ></dees-input-dropdown>
+                      `
+                    : ''}
                   ${this.modelOptions.length
                     ? html`
                         <dees-input-dropdown
@@ -589,6 +647,7 @@ export class DeesHarnessComposer extends DeesElement {
     const detail: IHarnessComposerSendDetail = {
       text: this.value,
       attachments: this.attachments,
+      account: this.account || undefined,
       model: this.model || undefined,
       reasoningEffort: this.reasoningEffort || undefined,
     };

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) => {