feat(agent): implement customizable output rendering for CodingAgent #453

Author: phodal

mpp-core/src/commonMain/kotlin/cc/unitmesh/agent/CodingAgent.kt

@@ -41,18 +41,28 @@ ${'$'}{toolList}
 4. **Test Your Changes**: Run tests or build commands to verify changes
 5. **Signal Completion**: When done, respond with "TASK_COMPLETE" in your message
 
+## IMPORTANT: One Tool Per Response
+
+**You MUST execute ONLY ONE tool per response.** Do not include multiple tool calls in a single response.
+
+- ✅ CORRECT: One <devin> block with ONE tool call
+- ❌ WRONG: Multiple <devin> blocks or multiple tools in one block
+
+After each tool execution, you will see the result and can decide the next step.
+
 ## Response Format
 
 For each step, respond with:
-1. Your reasoning about what to do next
-2. The DevIns command(s) to execute (wrapped in <devin></devin> tags)
+1. Your reasoning about what to do next (explain your thinking)
+2. **EXACTLY ONE** DevIns command (wrapped in <devin></devin> tags)
 3. What you expect to happen
 
 Example:
-I need to check the existing implementation first.
+I need to check the existing implementation first to understand the current code structure.
 <devin>
 /read-file path="src/main.ts"
 </devin>
+I expect to see the main entry point of the application.
 
 ## Making Code Changes
 
@@ -108,18 +118,28 @@ ${'$'}{toolList}
 4. **测试更改**: 运行测试或构建命令来验证更改
 5. **完成信号**: 完成后，在消息中响应 "TASK_COMPLETE"
 
+## 重要：每次响应只执行一个工具
+
+**你必须每次响应只执行一个工具。** 不要在单个响应中包含多个工具调用。
+
+- ✅ 正确：一个 <devin> 块包含一个工具调用
+- ❌ 错误：多个 <devin> 块或一个块中有多个工具
+
+每次工具执行后，你会看到结果，然后可以决定下一步。
+
 ## 响应格式
 
 对于每一步，请回复：
-1. 你对下一步该做什么的推理
-2. 要执行的 DevIns 命令（包装在 <devin></devin> 标签中）
+1. 你对下一步该做什么的推理（解释你的思考）
+2. **恰好一个** DevIns 命令（包装在 <devin></devin> 标签中）
 3. 你期望发生什么
 
 示例：
-我需要先检查现有实现。
+我需要先检查现有实现以了解当前的代码结构。
 <devin>
 /read-file path="src/main.ts"
 </devin>
+我期望看到应用程序的主入口点。
 
 ## 进行代码更改
 

mpp-core/src/commonMain/kotlin/cc/unitmesh/agent/CodingAgentTemplate.kt

@@ -225,13 +225,15 @@ class JsCodingAgentContextBuilder {
 class JsCodingAgent(
     private val projectPath: String,
     private val llmService: cc.unitmesh.llm.JsKoogLLMService,
-    private val maxIterations: Int = 100
+    private val maxIterations: Int = 100,
+    private val renderer: JsCodingAgentRenderer? = null
 ) {
     // 内部使用 Kotlin 的 CodingAgent
     private val agent: CodingAgent = CodingAgent(
         projectPath = projectPath,
         llmService = llmService.service,  // 访问内部 KoogLLMService
-        maxIterations = maxIterations
+        maxIterations = maxIterations,
+        renderer = if (renderer != null) JsRendererAdapter(renderer) else DefaultCodingAgentRenderer()
     )
 
     /**

mpp-core/src/jsMain/kotlin/cc/unitmesh/agent/CodingAgentExports.kt

@@ -0,0 +1,68 @@
+package cc.unitmesh.agent
+
+import kotlin.js.JsExport
+import kotlin.js.JsName
+
+/**
+ * JS-friendly renderer interface
+ * Allows TypeScript to provide custom rendering implementations
+ */
+@JsExport
+interface JsCodingAgentRenderer {
+    fun renderIterationHeader(current: Int, max: Int)
+    fun renderLLMResponseStart()
+    fun renderLLMResponseChunk(chunk: String)
+    fun renderLLMResponseEnd()
+    fun renderToolCall(toolName: String, paramsStr: String)
+    fun renderToolResult(toolName: String, success: Boolean, output: String?, fullOutput: String?)
+    fun renderTaskComplete()
+    fun renderFinalResult(success: Boolean, message: String, iterations: Int)
+    fun renderError(message: String)
+    fun renderRepeatWarning(toolName: String, count: Int)
+}
+
+/**
+ * Adapter to convert JS renderer to Kotlin renderer
+ */
+class JsRendererAdapter(private val jsRenderer: JsCodingAgentRenderer) : CodingAgentRenderer {
+    override fun renderIterationHeader(current: Int, max: Int) {
+        jsRenderer.renderIterationHeader(current, max)
+    }
+
+    override fun renderLLMResponseStart() {
+        jsRenderer.renderLLMResponseStart()
+    }
+
+    override fun renderLLMResponseChunk(chunk: String) {
+        jsRenderer.renderLLMResponseChunk(chunk)
+    }
+
+    override fun renderLLMResponseEnd() {
+        jsRenderer.renderLLMResponseEnd()
+    }
+
+    override fun renderToolCall(toolName: String, paramsStr: String) {
+        jsRenderer.renderToolCall(toolName, paramsStr)
+    }
+
+    override fun renderToolResult(toolName: String, success: Boolean, output: String?, fullOutput: String?) {
+        jsRenderer.renderToolResult(toolName, success, output, fullOutput)
+    }
+
+    override fun renderTaskComplete() {
+        jsRenderer.renderTaskComplete()
+    }
+
+    override fun renderFinalResult(success: Boolean, message: String, iterations: Int) {
+        jsRenderer.renderFinalResult(success, message, iterations)
+    }
+
+    override fun renderError(message: String) {
+        jsRenderer.renderError(message)
+    }
+
+    override fun renderRepeatWarning(toolName: String, count: Int) {
+        jsRenderer.renderRepeatWarning(toolName, count)
+    }
+}
+

mpp-core/src/jsMain/kotlin/cc/unitmesh/agent/RendererExports.kt

@@ -0,0 +1,174 @@
+/**
+ * CLI Renderer for CodingAgent
+ * Implements JsCodingAgentRenderer interface from Kotlin
+ */
+
+import chalk from 'chalk';
+
+/**
+ * Parse code blocks from LLM response
+ * Simplified version of Kotlin's CodeFence.parseAll
+ */
+interface CodeBlock {
+  languageId: string;
+  text: string;
+}
+
+function parseCodeBlocks(response: string): CodeBlock[] {
+  const blocks: CodeBlock[] = [];
+  const lines = response.split('\n');
+
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Check for devin block
+    if (trimmed === '<devin>') {
+      const devinLines: string[] = [];
+      i++;
+      while (i < lines.length && lines[i].trim() !== '</devin>') {
+        devinLines.push(lines[i]);
+        i++;
+      }
+      blocks.push({
+        languageId: 'devin',
+        text: devinLines.join('\n').trim()
+      });
+      i++; // Skip </devin>
+      continue;
+    }
+
+    // Check for markdown code block
+    if (trimmed.startsWith('```')) {
+      const lang = trimmed.substring(3).trim();
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      blocks.push({
+        languageId: lang,
+        text: codeLines.join('\n')
+      });
+      i++; // Skip closing ```
+      continue;
+    }
+
+    // Regular text - collect until next code block
+    const textLines: string[] = [];
+    while (i < lines.length) {
+      const currentLine = lines[i];
+      const currentTrimmed = currentLine.trim();
+      if (currentTrimmed.startsWith('```') || currentTrimmed === '<devin>') {
+        break;
+      }
+      textLines.push(currentLine);
+      i++;
+    }
+
+    if (textLines.length > 0) {
+      blocks.push({
+        languageId: 'markdown',
+        text: textLines.join('\n').trim()
+      });
+    }
+  }
+
+  return blocks;
+}
+
+/**
+ * CLI Renderer implementation
+ */
+export class CliRenderer {
+  // Required by Kotlin JS export interface
+  readonly __doNotUseOrImplementIt: any = {};
+
+  private reasoningBuffer: string = '';
+  private isInDevinBlock: boolean = false;
+
+  renderIterationHeader(current: number, max: number): void {
+    console.log(`\n${chalk.bold.blue(`[${current}/${max}]`)} Analyzing and executing...`);
+  }
+
+  renderLLMResponseStart(): void {
+    this.reasoningBuffer = '';
+    this.isInDevinBlock = false;
+    process.stdout.write(chalk.gray('💭 '));
+  }
+
+  renderLLMResponseChunk(chunk: string): void {
+    // Parse chunk to detect devin blocks
+    this.reasoningBuffer += chunk;
+
+    // Check if we're entering or leaving a devin block
+    if (this.reasoningBuffer.includes('<devin>')) {
+      this.isInDevinBlock = true;
+    }
+    if (this.reasoningBuffer.includes('</devin>')) {
+      this.isInDevinBlock = false;
+    }
+
+    // Only print if not in devin block
+    if (!this.isInDevinBlock && !chunk.includes('<devin>') && !chunk.includes('</devin>')) {
+      process.stdout.write(chalk.white(chunk));
+    }
+  }
+
+  renderLLMResponseEnd(): void {
+    console.log('\n');
+  }
+
+  renderToolCall(toolName: string, paramsStr: string): void {
+    console.log(chalk.cyan('🔧 ') + `/${toolName} ${paramsStr}`);
+  }
+
+  renderToolResult(toolName: string, success: boolean, output: string | null, fullOutput: string | null): void {
+    const icon = success ? chalk.green('✓') : chalk.red('✗');
+    let line = `   ${icon} ${toolName}`;
+
+    if (success && output) {
+      // For read-file, show full content (no truncation) so LLM can see complete file
+      // For other tools, show preview (300 chars)
+      const shouldTruncate = toolName !== 'read-file';
+      const maxLength = shouldTruncate ? 300 : Number.MAX_SAFE_INTEGER;
+
+      const preview = output.substring(0, Math.min(output.length, maxLength)).replace(/\n/g, ' ');
+      if (preview.length > 0 && !preview.startsWith('Successfully')) {
+        line += chalk.gray(` → ${preview}`);
+        if (shouldTruncate && output.length > maxLength) {
+          line += chalk.gray('...');
+        }
+      }
+    } else if (!success && output) {
+      line += chalk.red(` → ${output.substring(0, 300)}`);
+    }
+
+    console.log(line);
+  }
+
+  renderTaskComplete(): void {
+    console.log(chalk.green('\n✓ Task marked as complete\n'));
+  }
+
+  renderFinalResult(success: boolean, message: string, iterations: number): void {
+    console.log();
+    if (success) {
+      console.log(chalk.green('✅ Task completed successfully'));
+    } else {
+      console.log(chalk.yellow('⚠️  Task incomplete'));
+    }
+    console.log(chalk.gray(`Task completed after ${iterations} iterations`));
+  }
+
+  renderError(message: string): void {
+    console.log(chalk.red('❌ ') + message);
+  }
+
+  renderRepeatWarning(toolName: string, count: number): void {
+    console.log(chalk.yellow(`⚠️  Warning: Tool '${toolName}' has been called ${count} times in a row`));
+  }
+}
+

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

@@ -12,6 +12,7 @@ import { render } from 'ink';
 import { Command } from 'commander';
 import { App } from './ui/App.js';
 import { ConfigManager } from './config/ConfigManager.js';
+import { CliRenderer } from './agents/CliRenderer.js';
 // Use Kotlin CodingAgent instead of TypeScript implementation
 import mppCore from '@autodev/mpp-core';
 import * as path from 'path';
@@ -61,19 +62,23 @@ async function runCodingAgent(projectPath: string, task: string, quiet: boolean
       )
     );
 
-    // Create and run Kotlin CodingAgent
+    // Create CLI renderer
+    const renderer = new CliRenderer();
+
+    // Create and run Kotlin CodingAgent with custom renderer
     const agent = new KotlinCC.unitmesh.agent.JsCodingAgent(
       resolvedPath,
       llmService,
-      10 // maxIterations
+      10, // maxIterations
+      renderer // custom renderer
     );
-    
+
     // Create task object
     const taskObj = new KotlinCC.unitmesh.agent.JsAgentTask(
       task,
       resolvedPath
     );
-    
+
     const result = await agent.executeTask(taskObj);
 
     if (!quiet) {