Render pi-computed edit diffs in chat UIs

apps/cli/ai/tools/validate-blocks.ts

@@ -1,8 +1,8 @@
 import { readFile, writeFile } from 'fs/promises';
+import { generateUnifiedPatch } from '@earendil-works/pi-coding-agent';
 import { Type } from 'typebox';
 import { validateHtmlBlockPolicy } from 'cli/ai/block-content-policy';
 import { validateBlocks, type ValidationReportBase } from 'cli/ai/block-validator';
-import { createUnifiedDiff } from 'cli/ai/content-diff';
 import { getSiteUrl } from 'cli/lib/cli-config/sites';
 import { emitProgress } from 'cli/logger';
 import { defineTool } from './define-tool';
@@ -146,12 +146,7 @@ export const validateBlocksTool = defineTool(
 					lines.push( '', `Auto-fix proposal failed validation: ${ fixedReport.error }` );
 				} else if ( fixedReport.invalidBlocks === 0 ) {
 					const fixedContent = report.proposedFix.fixedContent;
-					const diff = createUnifiedDiff(
-						blockContent,
-						fixedContent,
-						fileName,
-						`${ fileName } (editor-fixed)`
-					);
+					const diff = generateUnifiedPatch( fileName, blockContent, fixedContent );
 					if ( shouldApplyFixToFile && args.filePath ) {
 						await writeFile( args.filePath, fixedContent, 'utf-8' );
 						emitProgress( `${ fileName }: editor serialization fix applied` );

apps/cli/ai/ui.ts

@@ -1576,30 +1576,6 @@ export class AiChatUI implements AiOutputAdapter {
 		}
 	}
 
-	private showFilePreview(
-		toolName: string,
-		input: Record< string, unknown >,
-		target: Container = this.messages
-	): void {
-		let preview: { collapsed: string; expanded: string } | null = null;
-
-		if ( toolName === 'Write' && typeof input.content === 'string' ) {
-			preview = this.generateWritePreview( input.content );
-		} else if (
-			toolName === 'Edit' &&
-			typeof input.old_string === 'string' &&
-			typeof input.new_string === 'string'
-		) {
-			preview = this.generateEditPreview( input.old_string, input.new_string );
-		}
-
-		if ( ! preview ) {
-			return;
-		}
-
-		this.addExpandablePreview( preview, target );
-	}
-
 	private addExpandablePreview(
 		preview: { collapsed: string; expanded: string },
 		target: Container = this.messages
@@ -1671,22 +1647,45 @@ export class AiChatUI implements AiOutputAdapter {
 		);
 	}
 
-	private generateEditPreview(
-		oldStr: string,
-		newStr: string
-	): { collapsed: string; expanded: string } {
-		const oldLines = oldStr.split( '\n' );
-		const newLines = newStr.split( '\n' );
+	private generateDiffPreview( diff: string ): { collapsed: string; expanded: string } {
+		const rawLines = diff.replace( /\n$/, '' ).split( '\n' );
+		const coloredLines = rawLines.map( ( line ) => {
+			if ( line.startsWith( '+' ) ) {
+				return chalk.green( line );
+			}
+			if ( line.startsWith( '-' ) ) {
+				return chalk.red( line );
+			}
+			return chalk.dim( line );
+		} );
+		const expanded = formatToolOutputLines( coloredLines );
 
-		const diffLines: string[] = [];
-		for ( const line of oldLines ) {
-			diffLines.push( chalk.red( '- ' + line ) );
-		}
-		for ( const line of newLines ) {
-			diffLines.push( chalk.green( '+ ' + line ) );
+		if ( rawLines.length <= DEFAULT_COLLAPSE_THRESHOLD_LINES ) {
+			return { collapsed: expanded, expanded };
 		}
 
-		return this.generateExpandablePreview( diffLines );
+		// Window the collapsed view around the first change so the +/- lines
+		// are visible instead of the diff's leading context lines.
+		const firstChanged = rawLines.findIndex(
+			( line ) => line.startsWith( '+' ) || line.startsWith( '-' )
+		);
+		const start = Math.max(
+			0,
+			Math.min( firstChanged - 1, rawLines.length - DEFAULT_COLLAPSE_THRESHOLD_LINES )
+		);
+		const windowLines = coloredLines.slice( start, start + DEFAULT_COLLAPSE_THRESHOLD_LINES );
+		const collapsed =
+			formatToolOutputLines( windowLines ) +
+			'\n     ' +
+			chalk.dim(
+				sprintf(
+					/* translators: %d: number of hidden lines */
+					__( '... %d more lines · ctrl+o to expand' ),
+					rawLines.length - windowLines.length
+				)
+			);
+
+		return { collapsed, expanded };
 	}
 
 	private toggleExpandablePreview(): void {
@@ -1887,8 +1886,23 @@ export class AiChatUI implements AiOutputAdapter {
 		if ( ! toolCall ) {
 			this.renderToolUseLine( isError, label, null, target );
 		}
-		if ( toolCall && ( toolCall.name === 'Write' || toolCall.name === 'Edit' ) ) {
-			this.showFilePreview( toolCall.name, toolCall.input, target );
+		if ( toolCall && ! isError ) {
+			let preview: { collapsed: string; expanded: string } | null = null;
+			if ( toolCall.name === 'Write' && typeof toolCall.input.content === 'string' ) {
+				preview = this.generateWritePreview( toolCall.input.content );
+			} else if ( toolCall.name === 'Edit' ) {
+				const details = result.details as { diff?: string } | undefined;
+				if ( typeof details?.diff === 'string' && details.diff.length > 0 ) {
+					preview = this.generateDiffPreview( details.diff );
+				}
+			}
+			if ( preview ) {
+				const summary = toolCall.name === 'Write' ? __( 'File written' ) : __( 'File edited' );
+				target.addChild( new Text( formatToolOutputLines( [ chalk.dim( summary ) ] ), 0, 0 ) );
+				this.addExpandablePreview( preview, target );
+				this.tui.requestRender();
+				return;
+			}
 		}
 
 		const content = typedResult.content;

apps/studio/src/components/studio-code-session/conversation/index.tsx

@@ -6,6 +6,7 @@ import {
 import {
 	getToolDetail,
 	getToolDisplayName,
+	getToolResultDiff,
 	type NormalizedToolResult,
 } from '@studio/common/ai/tools';
 import { __ } from '@wordpress/i18n';
@@ -60,6 +61,7 @@ interface PiToolResultLike {
 	role: 'toolResult';
 	toolCallId: string;
 	content?: Array< { type: string; text?: string } >;
+	details?: unknown;
 	isError?: boolean;
 }
 
@@ -80,6 +82,7 @@ export function entriesToRenderItems( entries: SessionEntry[] ): RenderItem[] {
 		resultsByToolCallId.set( message.toolCallId, {
 			text,
 			isError: message.isError === true,
+			diff: message.isError === true ? undefined : getToolResultDiff( message.details ),
 		} );
 	}
 
@@ -260,8 +263,11 @@ function ToolUseRow( {
 	const detail = getToolDetail( name, input );
 	const [ expanded, setExpanded ] = useState( false );
 	const resultText = result?.text?.trim() ?? '';
-	const hasOutput = resultText.length > 0;
-	const isLong = resultText.split( '\n' ).length > TOOL_RESULT_PREVIEW_MAX_LINES;
+	const diff = result?.diff;
+	const hasOutput = resultText.length > 0 || Boolean( diff );
+	const isLong =
+		resultText.split( '\n' ).length > TOOL_RESULT_PREVIEW_MAX_LINES ||
+		( diff ? diff.split( '\n' ).length > TOOL_RESULT_PREVIEW_MAX_LINES : false );
 
 	return (
 		<div className={ styles.toolBlock }>
@@ -271,15 +277,41 @@ function ToolUseRow( {
 			</div>
 			{ hasOutput ? (
 				<div className={ styles.toolOutputWrap }>
-					<pre
-						className={ cx(
-							styles.toolOutput,
-							result?.isError && styles.toolOutputError,
-							! expanded && isLong && styles.toolOutputCollapsed
-						) }
-					>
-						{ resultText }
-					</pre>
+					{ resultText.length > 0 ? (
+						<pre
+							className={ cx(
+								styles.toolOutput,
+								result?.isError && styles.toolOutputError,
+								! expanded && isLong && styles.toolOutputCollapsed
+							) }
+						>
+							{ resultText }
+						</pre>
+					) : null }
+					{ diff ? (
+						<pre
+							className={ cx(
+								styles.toolDiff,
+								! expanded && isLong && styles.toolOutputCollapsed
+							) }
+						>
+							{ diff
+								.replace( /\n$/, '' )
+								.split( '\n' )
+								.map( ( line, index ) => (
+									<span
+										key={ index }
+										className={ cx(
+											styles.diffLine,
+											line.startsWith( '+' ) && styles.diffLineAdded,
+											line.startsWith( '-' ) && styles.diffLineRemoved
+										) }
+									>
+										{ line.length > 0 ? line : ' ' }
+									</span>
+								) ) }
+						</pre>
+					) : null }
 					{ isLong ? (
 						<button
 							type="button"

apps/studio/src/components/studio-code-session/conversation/style.module.css

@@ -126,6 +126,34 @@
 	color: var(--color-frame-error);
 }
 
+.toolDiff {
+	margin: 0;
+	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md);
+	border-left: 2px solid var(--color-frame-border);
+	display: flex;
+	flex-direction: column;
+	font-family: var(--wpds-typography-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+	font-size: var(--wpds-typography-font-size-xs);
+	line-height: 1.5;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow: hidden;
+}
+
+.diffLine {
+	color: var(--color-frame-text-secondary);
+}
+
+.diffLineAdded {
+	color: var(--color-frame-diff-add-text);
+	background-color: var(--color-frame-diff-add-bg);
+}
+
+.diffLineRemoved {
+	color: var(--color-frame-diff-remove-text);
+	background-color: var(--color-frame-diff-remove-bg);
+}
+
 .toolOutputToggle {
 	align-self: flex-start;
 	background: none;

apps/studio/src/index.css

@@ -18,6 +18,10 @@
 	--color-frame-running: #008a20;
 	--color-frame-error: #d63638;
 	--color-frame-tab-active: #000;
+	--color-frame-diff-add-text: #008a20;
+	--color-frame-diff-add-bg: #edfaef;
+	--color-frame-diff-remove-text: #d63638;
+	--color-frame-diff-remove-bg: #fcf0f1;
 	--wp-admin-theme-color: var( --color-frame-theme );
 	--wp-admin-theme-color-darker-20: var( --color-frame-theme-hover );
 }
@@ -39,6 +43,10 @@
 		--color-frame-running: #1ed15a;
 		--color-frame-error: #f87171;
 		--color-frame-tab-active: #fff;
+		--color-frame-diff-add-text: #1ed15a;
+		--color-frame-diff-add-bg: rgba( 30, 209, 90, 0.12 );
+		--color-frame-diff-remove-text: #f87171;
+		--color-frame-diff-remove-bg: rgba( 248, 113, 113, 0.12 );
 	}
 }