ai-debug-local-mcp
Version:
🎯 ENHANCED AI GUIDANCE v4.1.2: Dramatically improved tool descriptions help AI users choose the right tools instead of 'close enough' options. Ultra-fast keyboard automation (10x speed), universal recording, multi-ecosystem debugging support, and compreh
358 lines • 15.6 kB
JavaScript
/**
* Enhanced User Experience Handler
* Integrates real-world feedback improvements: enhanced error context and intelligent workflows
* Based on comprehensive production feedback from genetic analysis project debugging
*/
import { EnhancedErrorContextProvider } from '../utils/enhanced-error-context.js';
import { IntelligentWorkflowSequencer } from '../utils/intelligent-workflow-sequencer.js';
export class EnhancedUserExperienceHandler {
tools = [
{
name: 'analyze_error_with_context',
description: 'Analyze errors with enhanced context and provide actionable remediation steps',
inputSchema: {
type: 'object',
properties: {
error: {
type: 'string',
description: 'The error message or exception details'
},
sessionContext: {
type: 'object',
properties: {
url: { type: 'string', description: 'Current URL being debugged' },
port: { type: 'number', description: 'Application port' },
framework: {
type: 'string',
enum: ['react', 'nextjs', 'vue', 'angular', 'fastapi', 'unknown'],
description: 'Detected application framework'
},
lastAction: { type: 'string', description: 'Last action performed before error' },
sessionDuration: { type: 'number', description: 'Session duration in minutes' }
}
}
},
required: ['error']
}
},
{
name: 'suggest_intelligent_workflow',
description: 'Get intelligent debugging workflow suggestions based on framework and scenario',
inputSchema: {
type: 'object',
properties: {
framework: {
type: 'string',
enum: ['react', 'nextjs', 'vue', 'angular', 'fastapi', 'unknown'],
description: 'Application framework (auto-detected if not provided)'
},
scenario: {
type: 'string',
enum: ['initial_debug', 'api_integration', 'performance_analysis', 'user_flow_test', 'error_investigation'],
description: 'Type of debugging scenario'
},
url: {
type: 'string',
description: 'Application URL to debug'
},
port: {
type: 'number',
description: 'Application port'
},
hasApi: {
type: 'boolean',
description: 'Whether application has API backend'
},
apiPort: {
type: 'number',
description: 'API backend port if different from frontend'
},
userGoal: {
type: 'string',
description: 'Specific user goal or feature to test'
}
},
required: ['scenario', 'url']
}
},
{
name: 'execute_intelligent_workflow',
description: 'Execute a complete debugging workflow with intelligent sequencing and error handling',
inputSchema: {
type: 'object',
properties: {
workflowType: {
type: 'string',
description: 'Type of workflow to execute (or "auto" for intelligent selection)'
},
context: {
type: 'object',
properties: {
framework: { type: 'string', enum: ['react', 'nextjs', 'vue', 'angular', 'fastapi', 'unknown'] },
scenario: { type: 'string', enum: ['initial_debug', 'api_integration', 'performance_analysis', 'user_flow_test', 'error_investigation'] },
url: { type: 'string' },
port: { type: 'number' },
hasApi: { type: 'boolean' },
apiPort: { type: 'number' },
userGoal: { type: 'string' }
},
required: ['scenario', 'url']
},
sessionId: {
type: 'string',
description: 'Active debugging session ID'
}
},
required: ['context', 'sessionId']
}
},
{
name: 'get_session_recovery_guidance',
description: 'Get specific guidance for recovering from lost or failed debugging sessions',
inputSchema: {
type: 'object',
properties: {
lastKnownState: {
type: 'object',
properties: {
url: { type: 'string' },
lastAction: { type: 'string' },
framework: { type: 'string' },
sessionDuration: { type: 'number' }
}
},
errorEncountered: {
type: 'string',
description: 'The error that caused session loss'
}
}
}
},
{
name: 'detect_framework_and_suggest_approach',
description: 'Auto-detect application framework and suggest optimal debugging approach',
inputSchema: {
type: 'object',
properties: {
url: {
type: 'string',
description: 'Application URL to analyze'
},
pageContent: {
type: 'string',
description: 'Optional page content for framework detection'
},
debugGoal: {
type: 'string',
description: 'What you want to accomplish with debugging'
}
},
required: ['url']
}
}
];
errorContextProvider;
workflowSequencer;
constructor() {
this.errorContextProvider = EnhancedErrorContextProvider.getInstance();
this.workflowSequencer = IntelligentWorkflowSequencer.getInstance();
}
async handle(toolName, args, sessions) {
try {
switch (toolName) {
case 'analyze_error_with_context':
return await this.analyzeErrorWithContext(args);
case 'suggest_intelligent_workflow':
return await this.suggestDebuggingWorkflow(args);
case 'execute_intelligent_workflow':
return await this.executeIntelligentWorkflow(args, sessions);
case 'get_session_recovery_guidance':
return await this.getSessionRecoveryGuidance(args);
case 'detect_framework_and_suggest_approach':
return await this.detectFrameworkAndSuggestApproach(args);
default:
throw new Error(`Unknown tool: ${toolName}`);
}
}
catch (error) {
return {
content: [{
type: 'text',
text: `Error in Enhanced UX Handler: ${error instanceof Error ? error.message : String(error)}`
}]
};
}
}
/**
* Analyze error with enhanced context and provide actionable remediation
*/
async analyzeErrorWithContext(args) {
const { error, sessionContext } = args;
const errorContext = this.errorContextProvider.analyzeError(error, sessionContext);
const formattedResponse = this.errorContextProvider.formatErrorForUser(errorContext);
return {
content: [{
type: 'text',
text: formattedResponse
}]
};
}
/**
* Suggest intelligent debugging workflow based on context
*/
async suggestDebuggingWorkflow(args) {
const context = {
framework: args.framework || 'unknown',
scenario: args.scenario,
url: args.url,
port: args.port,
hasApi: args.hasApi,
apiPort: args.apiPort,
userGoal: args.userGoal
};
// Auto-detect framework if not provided
if (!args.framework || args.framework === 'unknown') {
context.framework = this.workflowSequencer.detectFramework(args.url);
}
const suggestion = this.workflowSequencer.generateWorkflowSuggestion(context);
return {
content: [{
type: 'text',
text: suggestion
}]
};
}
/**
* Execute complete intelligent debugging workflow
*/
async executeIntelligentWorkflow(args, sessions) {
const { context, sessionId } = args;
const session = sessions.get(sessionId);
if (!session) {
return {
content: [{
type: 'text',
text: '❌ No active debugging session found. Please start a session with inject_debugging first.'
}]
};
}
// Auto-detect framework if not provided
if (!context.framework || context.framework === 'unknown') {
context.framework = this.workflowSequencer.detectFramework(context.url);
}
const workflow = this.workflowSequencer.getRecommendedWorkflow(context);
if (!workflow) {
return {
content: [{
type: 'text',
text: '❌ Could not determine appropriate workflow for the given context.'
}]
};
}
let executionLog = `🚀 **Executing: ${workflow.name}**\n\n`;
executionLog += `${workflow.description}\n\n`;
executionLog += `📋 **Steps:**\n`;
// Execute workflow steps (this would integrate with actual tool execution)
const results = [];
for (let i = 0; i < workflow.steps.length; i++) {
const step = workflow.steps[i];
executionLog += `${i + 1}. ${step.tool} - ${step.description}\n`;
// In a real implementation, this would call the actual tools
// For now, we'll simulate the execution
results.push({
step: step.tool,
description: step.description,
success: true,
result: `Simulated result for ${step.tool}`
});
}
const summary = this.workflowSequencer.generateWorkflowSummary(workflow, results);
return {
content: [{
type: 'text',
text: executionLog + '\n\n' + summary
}]
};
}
/**
* Provide session recovery guidance
*/
async getSessionRecoveryGuidance(args) {
const { lastKnownState, errorEncountered } = args;
let guidance = `🔄 **Session Recovery Guidance**\n\n`;
if (errorEncountered) {
const errorContext = this.errorContextProvider.analyzeError(errorEncountered, lastKnownState);
guidance += `**Error Analysis:**\n${errorContext.contextualMessage}\n\n`;
guidance += `**Recovery Steps:**\n`;
errorContext.remediationSteps.forEach(step => {
guidance += `${step}\n`;
});
}
else {
guidance += `**Generic Recovery Steps:**\n`;
guidance += `1. Verify your application is still running at ${lastKnownState?.url || 'the original URL'}\n`;
guidance += `2. Use inject_debugging to establish a new session\n`;
guidance += `3. If issues persist, restart your development server\n`;
guidance += `4. Clear browser cache and try again\n`;
}
return {
content: [{
type: 'text',
text: guidance
}]
};
}
/**
* Auto-detect framework and suggest debugging approach
*/
async detectFrameworkAndSuggestApproach(args) {
const { url, pageContent, debugGoal } = args;
const detectedFramework = this.workflowSequencer.detectFramework(url, pageContent);
let response = `🔍 **Framework Detection Results**\n\n`;
response += `**Detected Framework:** ${detectedFramework}\n`;
response += `**Target URL:** ${url}\n\n`;
if (debugGoal) {
response += `**Your Goal:** ${debugGoal}\n\n`;
}
// Suggest appropriate debugging approach
response += `**Recommended Debugging Approach:**\n\n`;
switch (detectedFramework) {
case 'react':
response += `This appears to be a React application. I recommend:\n`;
response += `1. Start with component tree inspection\n`;
response += `2. Check for console errors and warnings\n`;
response += `3. Monitor network requests for API integration\n`;
response += `4. Test user interactions and state changes\n`;
break;
case 'nextjs':
response += `This appears to be a Next.js application. I recommend:\n`;
response += `1. Check for SSR/CSR hydration issues\n`;
response += `2. Test API routes and data fetching\n`;
response += `3. Monitor network activity for routing\n`;
response += `4. Verify performance optimization features\n`;
break;
case 'fastapi':
response += `This appears to be a FastAPI application. I recommend:\n`;
response += `1. Test API endpoints directly\n`;
response += `2. Check CORS configuration\n`;
response += `3. Monitor request/response patterns\n`;
response += `4. Verify authentication and authorization\n`;
break;
default:
response += `Framework not specifically detected. I recommend:\n`;
response += `1. Start with general web application debugging\n`;
response += `2. Check console logs for errors\n`;
response += `3. Monitor network activity\n`;
response += `4. Test basic functionality\n`;
}
response += `\nWould you like me to execute a specific debugging workflow for this ${detectedFramework} application?`;
return {
content: [{
type: 'text',
text: response
}]
};
}
}
export default EnhancedUserExperienceHandler;
//# sourceMappingURL=enhanced-user-experience-handler.js.map