refactor(renderer): extract BaseRenderer for shared logic

Refactor CliRenderer and ServerRenderer to extend a new BaseRenderer class, centralizing common rendering logic and buffer handling. This reduces code duplication and improves maintainability.

Author: phodal

mpp-ui/src/jsMain/typescript/agents/render/BaseRenderer.ts

@@ -1,8 +1,13 @@
 /**
  * Base TypeScript renderer implementing JsCodingAgentRenderer interface
  * Provides common functionality for all TypeScript renderer implementations
+ * 
+ * This mirrors the Kotlin BaseRenderer from mpp-core.
+ * All TypeScript renderers (CliRenderer, ServerRenderer, TuiRenderer) should extend this class.
+ * 
+ * @see mpp-core/src/commonMain/kotlin/cc/unitmesh/agent/render/BaseRenderer.kt
+ * @see mpp-core/src/jsMain/kotlin/cc/unitmesh/agent/RendererExports.kt - JsCodingAgentRenderer interface
  */
-
 export abstract class BaseRenderer {
   // Required by Kotlin JS export interface
   readonly __doNotUseOrImplementIt: any = {};
@@ -74,17 +79,22 @@ export abstract class BaseRenderer {
     return content.replace(/\n{3,}/g, '\n\n');
   }
 
-  // Abstract methods that must be implemented by subclasses
+  // ============================================================================
+  // JsCodingAgentRenderer Interface - Abstract methods
+  // These must be implemented by subclasses (CliRenderer, ServerRenderer, TuiRenderer)
+  // ============================================================================
+  
   abstract renderIterationHeader(current: number, max: number): void;
   abstract renderLLMResponseStart(): void;
   abstract renderLLMResponseChunk(chunk: string): void;
   abstract renderLLMResponseEnd(): void;
   abstract renderToolCall(toolName: string, paramsStr: string): void;
-  abstract renderToolResult(toolName: string, success: boolean, output: string | null, fullOutput: string | null): void;
+  abstract renderToolResult(toolName: string, success: boolean, output: string | null, fullOutput?: string | null): void;
   abstract renderTaskComplete(): void;
   abstract renderFinalResult(success: boolean, message: string, iterations: number): void;
   abstract renderError(message: string): void;
   abstract renderRepeatWarning(toolName: string, count: number): void;
+  abstract renderRecoveryAdvice(recoveryAdvice: string): void;
 
   /**
    * Common implementation for LLM response start

mpp-ui/src/jsMain/typescript/agents/render/CliRenderer.ts

@@ -10,101 +10,76 @@
 import chalk from 'chalk';
 import hljs from 'highlight.js';
 import { semanticChalk, dividers } from '../../design-system/theme-helpers.js';
+import { BaseRenderer } from './BaseRenderer.js';
 
 /**
- * CliRenderer implements the unified JsCodingAgentRenderer interface
+ * CliRenderer extends BaseRenderer and implements the unified JsCodingAgentRenderer interface
  */
-export class CliRenderer {
-  readonly __doNotUseOrImplementIt: any = {};
+export class CliRenderer extends BaseRenderer {
+  // BaseRenderer already has __doNotUseOrImplementIt
+  // BaseRenderer already has reasoningBuffer, isInDevinBlock, lastIterationReasoning, consecutiveRepeats, lastOutputLength
 
-  private reasoningBuffer: string = '';
-  private isInDevinBlock: boolean = false;
-  private lastIterationReasoning: string = '';
-  private consecutiveRepeats: number = 0;
+  // ============================================================================
+  // Platform-specific output methods (required by BaseRenderer)
+  // ============================================================================
+
+  protected outputContent(content: string): void {
+    process.stdout.write(chalk.white(content));
+  }
+
+  protected outputNewline(): void {
+    console.log(); // Single line break
+  }
+
+  // ============================================================================
+  // JsCodingAgentRenderer Interface Implementation
+  // ============================================================================
 
   renderIterationHeader(current: number, max: number): void {
     // Don't show iteration headers - they're not in the reference format
     // The reference format shows tools directly without iteration numbers
   }
 
   renderLLMResponseStart(): void {
-    this.reasoningBuffer = '';
-    this.isInDevinBlock = false;
-    this.lastOutputLength = 0;
+    this.baseLLMResponseStart(); // Use BaseRenderer helper
     process.stdout.write(semanticChalk.muted('💭 '));
   }
 
   renderLLMResponseChunk(chunk: string): void {
     // Add chunk to buffer
     this.reasoningBuffer += chunk;
 
-    // Wait for more content if we detect an incomplete devin block
+    // Wait for more content if we detect an incomplete devin block (from BaseRenderer)
     if (this.hasIncompleteDevinBlock(this.reasoningBuffer)) {
       return; // Don't output anything yet, wait for more chunks
     }
 
-    // Process the buffer to filter out devin blocks
+    // Process the buffer to filter out devin blocks (from BaseRenderer)
     let processedContent = this.filterDevinBlocks(this.reasoningBuffer);
 
     // Only output new content that hasn't been printed yet
     if (processedContent.length > 0) {
       // Find what's new since last output
       const newContent = processedContent.slice(this.lastOutputLength || 0);
       if (newContent.length > 0) {
-        // Clean up excessive newlines - replace multiple consecutive newlines with at most 2
-        const cleanedContent = newContent.replace(/\n{3,}/g, '\n\n');
+        // Clean up excessive newlines (from BaseRenderer)
+        const cleanedContent = this.cleanNewlines(newContent);
         process.stdout.write(chalk.white(cleanedContent));
         this.lastOutputLength = processedContent.length;
       }
     }
   }
 
-  private lastOutputLength: number = 0;
-
-  private hasIncompleteDevinBlock(content: string): boolean {
-    // Check if there's an incomplete devin block
-    const lastOpenDevin = content.lastIndexOf('<devin');
-    const lastCloseDevin = content.lastIndexOf('</devin>');
-
-    // If we have an opening tag without a closing tag after it, it's incomplete
-    // Also check for partial opening tags like '<de' or '<dev' or just '<'
-    const partialDevinPattern = /<de(?:v(?:i(?:n)?)?)?$|<$/;
-    const hasPartialTag = partialDevinPattern.test(content);
-
-    return lastOpenDevin > lastCloseDevin || hasPartialTag;
-  }
-
-  private filterDevinBlocks(content: string): string {
-    // Remove all complete devin blocks
-    let filtered = content.replace(/<devin[^>]*>[\s\S]*?<\/devin>/g, '');
-
-    // Handle incomplete devin blocks at the end - remove them completely
-    const openDevinIndex = filtered.lastIndexOf('<devin');
-    if (openDevinIndex !== -1) {
-      const closeDevinIndex = filtered.indexOf('</devin>', openDevinIndex);
-      if (closeDevinIndex === -1) {
-        // Incomplete devin block, remove it
-        filtered = filtered.substring(0, openDevinIndex);
-      }
-    }
-
-    // Also remove partial devin tags at the end and any standalone '<' that might be part of a devin tag
-    const partialDevinPattern = /<de(?:v(?:i(?:n)?)?)?$|<$/;
-    filtered = filtered.replace(partialDevinPattern, '');
-
-    return filtered;
-  }
-
   renderLLMResponseEnd(): void {
     // Force output any remaining content after filtering devin blocks
     const finalContent = this.filterDevinBlocks(this.reasoningBuffer);
     const remainingContent = finalContent.slice(this.lastOutputLength || 0);
 
     if (remainingContent.length > 0) {
-      process.stdout.write(chalk.white(remainingContent));
+      this.outputContent(remainingContent);
     }
 
-    // Check if this reasoning is similar to the last one
+    // Check if this reasoning is similar to the last one (from BaseRenderer)
     const currentReasoning = finalContent.trim();
     const similarity = this.calculateSimilarity(currentReasoning, this.lastIterationReasoning);
 
@@ -122,23 +97,10 @@ export class CliRenderer {
     // Only add a line break if the content doesn't already end with one
     const trimmedContent = finalContent.trimEnd();
     if (trimmedContent.length > 0 && !trimmedContent.endsWith('\n')) {
-      console.log(); // Single line break after reasoning only if needed
+      this.outputNewline();
     }
   }
 
-  private calculateSimilarity(str1: string, str2: string): number {
-    // Simple similarity calculation based on common words
-    if (!str1 || !str2) return 0;
-
-    const words1 = str1.toLowerCase().split(/\s+/);
-    const words2 = str2.toLowerCase().split(/\s+/);
-
-    const commonWords = words1.filter(word => words2.includes(word));
-    const totalWords = Math.max(words1.length, words2.length);
-
-    return totalWords > 0 ? commonWords.length / totalWords : 0;
-  }
-
   renderToolCall(toolName: string, paramsStr: string): void {
     const toolInfo = this.formatToolCallDisplay(toolName, paramsStr);
     console.log(chalk.bold('● ') + chalk.bold(toolInfo.name) + semanticChalk.muted(' - ' + toolInfo.description));

mpp-ui/src/jsMain/typescript/agents/render/ServerRenderer.ts

@@ -7,23 +7,34 @@
 
 import { semanticChalk } from '../../design-system/theme-helpers.js';
 import type { AgentEvent, AgentStepInfo, AgentEditInfo } from '../ServerAgentClient.js';
+import { BaseRenderer } from './BaseRenderer.js';
 
 /**
- * ServerRenderer implements the unified JsCodingAgentRenderer interface
+ * ServerRenderer extends BaseRenderer and implements the unified JsCodingAgentRenderer interface
  * defined in mpp-core/src/jsMain/kotlin/cc/unitmesh/agent/RendererExports.kt
  */
-export class ServerRenderer {
-  // Required by Kotlin JS export interface
-  readonly __doNotUseOrImplementIt: any = {};
+export class ServerRenderer extends BaseRenderer {
+  // BaseRenderer already has __doNotUseOrImplementIt
 
   private currentIteration: number = 0;
   private maxIterations: number = 20;
-  private llmBuffer: string = '';
+  // llmBuffer removed - use reasoningBuffer from BaseRenderer
   private toolCallsInProgress: Map<string, { toolName: string; params: string }> = new Map();
   private isCloning: boolean = false;
   private lastCloneProgress: number = 0;
   private hasStartedLLMOutput: boolean = false;
-  private lastOutputLength: number = 0;
+
+  // ============================================================================
+  // Platform-specific output methods (required by BaseRenderer)
+  // ============================================================================
+
+  protected outputContent(content: string): void {
+    process.stdout.write(content);
+  }
+
+  protected outputNewline(): void {
+    console.log();
+  }
 
   // ============================================================================
   // JsCodingAgentRenderer Interface Implementation
@@ -34,8 +45,8 @@ export class ServerRenderer {
   }
 
   renderLLMResponseStart(): void {
+    this.baseLLMResponseStart(); // Use BaseRenderer helper
     this.hasStartedLLMOutput = false;
-    this.lastOutputLength = 0;
   }
 
   renderLLMResponseChunk(chunk: string): void {
@@ -44,14 +55,14 @@ export class ServerRenderer {
 
   renderLLMResponseEnd(): void {
     // Flush any buffered LLM output
-    if (this.llmBuffer.trim()) {
-      const finalContent = this.filterDevinBlocks(this.llmBuffer);
+    if (this.reasoningBuffer.trim()) {
+      const finalContent = this.filterDevinBlocks(this.reasoningBuffer);
       const remainingContent = finalContent.slice(this.lastOutputLength || 0);
       if (remainingContent.trim()) {
-        process.stdout.write(remainingContent);
+        this.outputContent(remainingContent);
       }
-      console.log(''); // Ensure newline
-      this.llmBuffer = '';
+      this.outputNewline(); // Ensure newline
+      this.reasoningBuffer = '';
       this.hasStartedLLMOutput = false;
       this.lastOutputLength = 0;
     }
@@ -182,15 +193,15 @@ export class ServerRenderer {
     }
 
     // Add chunk to buffer
-    this.llmBuffer += chunk;
+    this.reasoningBuffer += chunk;
 
     // Wait for more content if we detect an incomplete devin block
-    if (this.hasIncompleteDevinBlock(this.llmBuffer)) {
+    if (this.hasIncompleteDevinBlock(this.reasoningBuffer)) {
       return; // Don't output anything yet, wait for more chunks
     }
 
     // Process the buffer to filter out devin blocks
-    const processedContent = this.filterDevinBlocks(this.llmBuffer);
+    const processedContent = this.filterDevinBlocks(this.reasoningBuffer);
 
     // Only output new content that hasn't been printed yet
     if (processedContent.length > 0) {
@@ -204,49 +215,15 @@ export class ServerRenderer {
     }
   }
 
-  private hasIncompleteDevinBlock(content: string): boolean {
-    // Check if there's an incomplete devin block
-    const lastOpenDevin = content.lastIndexOf('<devin');
-    const lastCloseDevin = content.lastIndexOf('</devin>');
-
-    // If we have an opening tag without a closing tag after it, it's incomplete
-    // Also check for partial opening tags like '<de' or '<dev' or just '<'
-    const partialDevinPattern = /<de(?:v(?:i(?:n)?)?)?$|<$/;
-    const hasPartialTag = partialDevinPattern.test(content);
-
-    return lastOpenDevin > lastCloseDevin || hasPartialTag;
-  }
-
-  private filterDevinBlocks(content: string): string {
-    // Remove all complete devin blocks
-    let filtered = content.replace(/<devin[^>]*>[\s\S]*?<\/devin>/g, '');
-
-    // Handle incomplete devin blocks at the end - remove them completely
-    const openDevinIndex = filtered.lastIndexOf('<devin');
-    if (openDevinIndex !== -1) {
-      const closeDevinIndex = filtered.indexOf('</devin>', openDevinIndex);
-      if (closeDevinIndex === -1) {
-        // Incomplete devin block, remove it
-        filtered = filtered.substring(0, openDevinIndex);
-      }
-    }
-
-    // Also remove partial devin tags at the end and any standalone '<' that might be part of a devin tag
-    const partialDevinPattern = /<de(?:v(?:i(?:n)?)?)?$|<$/;
-    filtered = filtered.replace(partialDevinPattern, '');
-
-    return filtered;
-  }
-
   // ============================================================================
   // Tool Execution Methods (JsCodingAgentRenderer)
   // ============================================================================
 
   renderToolCall(toolName: string, params: string): void {
     // Flush any buffered LLM output first
-    if (this.llmBuffer.trim()) {
+    if (this.reasoningBuffer.trim()) {
       console.log(''); // New line before tool
-      this.llmBuffer = '';
+      this.reasoningBuffer = '';
       this.hasStartedLLMOutput = false;
       this.lastOutputLength = 0;
     }
@@ -480,9 +457,9 @@ export class ServerRenderer {
     this.maxIterations = max;
 
     // Flush any buffered LLM output
-    if (this.llmBuffer.trim()) {
+    if (this.reasoningBuffer.trim()) {
       console.log(''); // Just a newline
-      this.llmBuffer = '';
+      this.reasoningBuffer = '';
     }
 
     // Reset LLM output state for new iteration
@@ -501,14 +478,14 @@ export class ServerRenderer {
     edits: AgentEditInfo[]
   ): void {
     // Flush any buffered LLM output
-    if (this.llmBuffer.trim()) {
-      const finalContent = this.filterDevinBlocks(this.llmBuffer);
+    if (this.reasoningBuffer.trim()) {
+      const finalContent = this.filterDevinBlocks(this.reasoningBuffer);
       const remainingContent = finalContent.slice(this.lastOutputLength || 0);
       if (remainingContent.trim()) {
         process.stdout.write(remainingContent);
       }
       console.log(''); // Ensure newline
-      this.llmBuffer = '';
+      this.reasoningBuffer = '';
     }
 
     console.log('');