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
141 lines (138 loc) • 6.82 kB
JavaScript
/**
* Handler for monitoring SPA route changes
* Tracks navigation performance, history state, and route patterns
*/
export class RouteHandler {
localEngine;
tools = [
{
name: 'track_route_changes',
description: 'Monitor SPA route changes, navigation performance, and history state. Works with any client-side router.',
inputSchema: {
type: 'object',
properties: {
sessionId: {
type: 'string',
description: 'Debug session ID'
}
},
required: ['sessionId']
}
}
];
constructor(localEngine) {
this.localEngine = localEngine;
}
async handle(toolName, args, sessions) {
if (toolName !== 'track_route_changes') {
throw new Error(`Unknown tool: ${toolName}`);
}
const { sessionId } = args;
const session = sessions.get(sessionId);
if (!session) {
throw new Error(`Debug session ${sessionId} not found`);
}
try {
const analysis = await this.localEngine.getRouteChanges();
// Format route tracking report
let report = `## Route Navigation Analysis
**Current Route:** \`${analysis.currentRoute}\`
**Framework:** ${analysis.framework}
### Navigation History:\n\n`;
if (analysis.routeHistory.length === 0) {
report += `No navigation history recorded yet.
Navigate through your app to track route changes and performance metrics.\n\n`;
}
else {
// Show route history in reverse chronological order
const reversedHistory = [...analysis.routeHistory].reverse();
reversedHistory.forEach((route, index) => {
const isLatest = index === 0;
const prevIndex = analysis.routeHistory.length - index - 2;
const prevRoute = prevIndex >= 0 ? analysis.routeHistory[prevIndex] : null;
if (route.type === 'initial') {
report += `- **Initial Load:** \`${route.path}\`\n`;
}
else {
const fromPath = prevRoute ? prevRoute.path : 'unknown';
report += `- \`${fromPath}\` → \`${route.path}\``;
// Add duration and warning for slow navigations
if (route.duration > 0) {
report += ` (${route.duration}ms)`;
if (route.duration > 1000) {
report += ' ⚠️ Slow navigation';
}
}
report += '\n';
}
// Add timestamp
const timeAgo = this.getTimeAgo(route.timestamp);
report += ` - ${timeAgo}\n`;
});
report += '\n';
}
// Add performance metrics
if (analysis.performanceMetrics.averageNavigationTime > 0) {
report += `### Performance Metrics:\n\n`;
report += `- **Average Navigation Time:** ${analysis.performanceMetrics.averageNavigationTime.toFixed(1)}ms\n`;
if (analysis.performanceMetrics.slowestRoute) {
report += `- **Slowest Route:** \`${analysis.performanceMetrics.slowestRoute.path}\` (${analysis.performanceMetrics.slowestRoute.duration}ms)\n`;
}
if (analysis.performanceMetrics.fastestRoute) {
report += `- **Fastest Route:** \`${analysis.performanceMetrics.fastestRoute.path}\` (${analysis.performanceMetrics.fastestRoute.duration}ms)\n`;
}
report += '\n';
// Add performance warnings
if (analysis.performanceMetrics.averageNavigationTime > 500) {
report += `### ⚠️ Performance Issues Detected:\n\n`;
report += `- Average navigation time exceeds 500ms\n`;
report += `- Consider lazy loading route components\n`;
report += `- Optimize data fetching strategies\n`;
report += `- Review route transition animations\n\n`;
}
}
// Add optimization tips
report += `### Route Optimization Tips:\n\n`;
report += `1. **Prefetch critical routes** - Load route bundles before navigation\n`;
report += `2. **Implement route-level code splitting** - Reduce initial bundle size\n`;
report += `3. **Cache route data** - Avoid redundant API calls\n`;
report += `4. **Use skeleton screens** - Improve perceived performance\n`;
report += `5. **Optimize route guards** - Minimize authentication checks\n\n`;
// Add router-specific documentation
report += `### Router Documentation:\n\n`;
report += `- **React Router**: https://reactrouter.com/en/main/start/concepts\n`;
report += `- **Vue Router**: https://router.vuejs.org/guide/\n`;
report += `- **Angular Router**: https://angular.io/guide/router\n`;
report += `- **Next.js Router**: https://nextjs.org/docs/routing/introduction\n`;
report += `- **Svelte Routing**: https://kit.svelte.dev/docs/routing\n\n`;
// Add debugging tips
report += `### Debugging Route Issues:\n\n`;
report += `- **Route not updating?** Check for missing \`key\` props or router configuration\n`;
report += `- **Back button broken?** Verify history.pushState vs replaceState usage\n`;
report += `- **Deep links failing?** Ensure server-side routing matches client routes\n`;
report += `- **Query params lost?** Check router's query preservation settings\n`;
report += `- **Scroll position issues?** Configure scroll restoration behavior\n`;
return {
content: [{
type: 'text',
text: report
}]
};
}
catch (error) {
throw new Error(`Failed to track route changes: ${error.message}`);
}
}
getTimeAgo(timestamp) {
const now = Date.now();
const diff = now - timestamp;
if (diff < 1000)
return 'just now';
if (diff < 60000)
return `${Math.floor(diff / 1000)}s ago`;
if (diff < 3600000)
return `${Math.floor(diff / 60000)}m ago`;
return `${Math.floor(diff / 3600000)}h ago`;
}
}
//# sourceMappingURL=route-handler.js.map