feat(renderer): add metadata and user confirmation hooks #453

Extend renderToolResult to support metadata display and add optional hooks for user confirmation requests and live terminal sessions in BaseRenderer. Subclasses can override these for enhanced interactivity.

Author: phodal

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

@@ -48,6 +48,7 @@ export type AgentEvent =
   | { type: 'llm_chunk'; chunk: string }
   | { type: 'tool_call'; toolName: string; params: string }
   | { type: 'tool_result'; toolName: string; success: boolean; output?: string }
+  | { type: 'user_confirmation'; toolName: string; params: Record<string, any> }
   | { type: 'error'; message: string }
   | { type: 'complete'; success: boolean; message: string; iterations: number; steps: AgentStepInfo[]; edits: AgentEditInfo[] };
 

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

@@ -1,14 +1,18 @@
 /**
  * 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 {
+
+import {cc} from "autodev-mpp-core/autodev-mpp-core";
+import JsCodingAgentRenderer = cc.unitmesh.agent.JsCodingAgentRenderer;
+
+export abstract class BaseRenderer implements JsCodingAgentRenderer {
   // Required by Kotlin JS export interface
   readonly __doNotUseOrImplementIt: any = {};
 
@@ -24,7 +28,7 @@ export abstract class BaseRenderer {
   protected 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) {
@@ -34,11 +38,11 @@ export abstract class BaseRenderer {
         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;
   }
 
@@ -49,11 +53,11 @@ export abstract class BaseRenderer {
     // Check if there's an incomplete devin block
     const lastOpenDevin = content.lastIndexOf('<devin');
     const lastCloseDevin = content.lastIndexOf('</devin>');
-    
+
     // 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;
   }
 
@@ -62,13 +66,13 @@ export abstract class BaseRenderer {
    */
   protected calculateSimilarity(str1: string, str2: string): number {
     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;
   }
 
@@ -83,18 +87,32 @@ export abstract class BaseRenderer {
   // 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, metadata?: Record<string, string>): 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;
+  /**
+   * Optional policy/permission prompt. Default: no-op; subclasses can override.
+   */
+  renderUserConfirmationRequest(toolName: string, params: Record<string, any>): void {
+    // Default to an info/error line if desired; keeping no-op to avoid extra noise in CLI/Server outputs.
+  }
+
+  /**
+   * Live terminal sessions are optional; default no-op implementation.
+   * Subclasses that support PTY streaming can override.
+   */
+  addLiveTerminal(sessionId: string, command: string, workingDirectory?: string | null, ptyHandle?: any): void {
+    // no-op by default
+  }
 
   /**
    * Common implementation for LLM response start
@@ -131,7 +149,7 @@ export abstract class BaseRenderer {
     }
 
     this.lastIterationReasoning = currentReasoning;
-    
+
     // 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')) {

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

@@ -1,9 +1,9 @@
 /**
  * CLI Renderer for CodingAgent
- * 
+ *
  * Implements JsCodingAgentRenderer interface from Kotlin Multiplatform.
  * Provides enhanced CLI output with colors, syntax highlighting, and formatting.
- * 
+ *
  * @see mpp-core/src/jsMain/kotlin/cc/unitmesh/agent/RendererExports.kt - Interface definition
  */
 
@@ -169,7 +169,7 @@ export class CliRenderer extends BaseRenderer {
     return params;
   }
 
-  renderToolResult(toolName: string, success: boolean, output: string | null, fullOutput: string | null): void {
+  renderToolResult(toolName: string, success: boolean, output: string | null, fullOutput: string | null, metadata?: Record<string, string>): void {
     if (success && output) {
       const summary = this.generateToolSummary(toolName, output);
       console.log('  ⎿ ' + semanticChalk.success(summary));
@@ -187,6 +187,42 @@ export class CliRenderer extends BaseRenderer {
     } else if (!success && output) {
       console.log('  ⎿ ' + semanticChalk.error(`Error: ${output.substring(0, 200)}`));
     }
+    // Display metadata if provided
+    if (metadata && Object.keys(metadata).length > 0) {
+      this.displayMetadata(metadata);
+    }
+  }
+
+  private displayMetadata(metadata: Record<string, string>): void {
+    const entries = Object.entries(metadata);
+    if (entries.length === 0) return;
+
+    // Format metadata with icons based on common keys
+    const formattedEntries = entries.map(([key, value]) => {
+      switch (key) {
+        case 'duration':
+        case 'elapsed':
+        case 'time':
+          return `⏱  ${key}: ${semanticChalk.accent(value)}`;
+        case 'size':
+        case 'fileSize':
+        case 'bytes':
+          return `📦 ${key}: ${semanticChalk.accent(value)}`;
+        case 'lines':
+        case 'lineCount':
+          return `📄 ${key}: ${semanticChalk.accent(value)}`;
+        case 'status':
+        case 'exitCode':
+          return `📊 ${key}: ${semanticChalk.accent(value)}`;
+        default:
+          return `   ${key}: ${semanticChalk.muted(value)}`;
+      }
+    });
+
+    console.log(semanticChalk.muted('  ├─ metadata:'));
+    formattedEntries.forEach(entry => {
+      console.log(semanticChalk.muted(`  │  ${entry}`));
+    });
   }
 
   private generateToolSummary(toolName: string, output: string): string {

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

@@ -91,6 +91,25 @@ export class ServerRenderer extends BaseRenderer {
     console.log('');
   }
 
+  renderUserConfirmationRequest(toolName: string, params: Record<string, any>): void {
+    console.log('');
+    console.log(semanticChalk.warningBold('🔐 User Confirmation Required'));
+    console.log(semanticChalk.accent('━'.repeat(50)));
+    console.log(semanticChalk.warning(`Tool: ${toolName}`));
+
+    const paramEntries = Object.entries(params);
+    if (paramEntries.length > 0) {
+      console.log(semanticChalk.muted('Parameters:'));
+      paramEntries.forEach(([key, value]) => {
+        console.log(semanticChalk.muted(`  • ${key}: ${JSON.stringify(value)}`));
+      });
+    }
+
+    console.log(semanticChalk.success('\n✓ Auto-approved for non-interactive mode'));
+    console.log(semanticChalk.accent('━'.repeat(50)));
+    console.log('');
+  }
+
   // ============================================================================
   // Server-Specific Event Handler
   // ============================================================================
@@ -119,6 +138,9 @@ export class ServerRenderer extends BaseRenderer {
       case 'tool_result':
         this.renderToolResult(event.toolName, event.success, event.output);
         break;
+      case 'user_confirmation':
+        this.renderUserConfirmationRequest(event.toolName, event.params || {});
+        break;
       case 'error':
         this.renderError(event.message);
         break;

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

@@ -12,12 +12,20 @@
 
 import type { ModeContext } from '../../modes/Mode.js';
 import type { Message } from '../../ui/App.js';
+import {BaseRenderer} from "./BaseRenderer";
 
 /**
  * TUI 渲染器
  * 实现 Kotlin CodingAgent 期望的 JsCodingAgentRenderer 接口
  */
-export class TuiRenderer {
+export class TuiRenderer extends BaseRenderer {
+  protected outputContent(content: string): void {
+
+  }
+  protected outputNewline(): void {
+
+  }
+
   // Required by Kotlin JS export interface
   readonly __doNotUseOrImplementIt: any = {};
 
@@ -32,6 +40,7 @@ export class TuiRenderer {
   private readonly VERBOSE_MODE = process.env.AUTODEV_VERBOSE === 'true';
 
   constructor(context: ModeContext) {
+    super();
     this.context = context;
   }
 
@@ -168,6 +177,18 @@ export class TuiRenderer {
     this.renderSystemMessage(message);
   }
 
+  /**
+   * 渲染用户确认请求
+   */
+  renderUserConfirmationRequest(toolName: string, params: Record<string, any>): void {
+    const paramStr = Object.entries(params)
+      .map(([k, v]) => `${k}=${JSON.stringify(v)}`)
+      .join(', ');
+
+    const message = `🔐 Tool '${toolName}' needs approval: ${paramStr} (Auto-approved)`;
+    this.renderSystemMessage(message);
+  }
+
   // Helper methods
 
   /**

mpp-ui/tsconfig.json

@@ -18,7 +18,9 @@
     "sourceMap": true,
     "types": ["node"],
     "paths": {
-      "mpp-core": ["../mpp-core/build/js/packages/mpp-core/kotlin/mpp-core.mjs"]
+      "mpp-core": ["../mpp-core/build/js/packages/mpp-core/kotlin/mpp-core.mjs"],
+      "autodev-mpp-core": ["../build/js/packages/autodev-mpp-core/kotlin/autodev-mpp-core.js"],
+      "autodev-mpp-core/*": ["../build/js/packages/autodev-mpp-core/kotlin/*"]
     }
   },
   "include": [