Proposal: Tool execution lifecycle events

[hemanth]

Context

The current WebMCP proposal mentions toolactivated and toolcancel events but doesn't specify a complete lifecycle. Our implementation revealed the need for more granular events.

Problem

When an AI agent uses WebMCP tools, the page (and user) needs visibility into:

• When a tool is about to execute (for user consent/preview)
• Execution progress (for long-running tools)
• Success/failure outcomes
• Tool result inspection

Current Events (from proposal)

window.addEventListener('toolactivated', ({ toolName }) => { ... });
window.addEventListener('toolcancel', ({ toolName }) => { ... });

Proposed Additional Events

// Before execution - allows cancellation
window.addEventListener('toolwillexecute', (event) => {
  console.log('Tool:', event.toolName);
  console.log('Arguments:', event.arguments);
  console.log('Agent:', event.agentInfo); // Which agent is calling
  
  // User can inspect and cancel
  if (!userApproves(event.arguments)) {
    event.preventDefault(); // Cancel execution
  }
});

// Execution started
window.addEventListener('toolexecuting', (event) => {
  showSpinner(event.toolName);
});

// Execution completed
window.addEventListener('toolcomplete', (event) => {
  console.log('Tool:', event.toolName);
  console.log('Result:', event.result);
  console.log('Duration:', event.duration);
  hideSpinner(event.toolName);
});

// Execution failed
window.addEventListener('toolerror', (event) => {
  console.log('Tool:', event.toolName);
  console.log('Error:', event.error);
  showError(event.toolName, event.error);
});

Use Cases

1. Audit logging: Track all tool executions for compliance
2. User consent UI: Show confirmation dialogs before sensitive operations
3. Progress indication: Visual feedback during execution
4. Debugging: Inspect arguments and results in dev tools
5. Analytics: Track tool usage patterns

Visual Feedback Integration

// Highlight active tool in UI
window.addEventListener('toolexecuting', ({ toolName }) => {
  document.querySelector(`[data-tool="${toolName}"]`)
    .classList.add('executing');
});

window.addEventListener('toolcomplete', ({ toolName }) => {
  document.querySelector(`[data-tool="${toolName}"]`)
    .classList.remove('executing');
});

This aligns with WebMCP's goal of human-in-the-loop workflows by giving users visibility and control over tool execution.