agentsqripts/cli/lib/frontendBackendOutputFormatter.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

/**
 * @file Frontend-Backend integration output formatter
 * @description Handles formatting and display of integration analysis results
 */

const { createSummaryFormatter, createRecommendationsSection, createTopIssuesSection } = require('./summaryFormatter');
const { createDetailedFormatter } = require('./detailedFormatter');

// Create shared summary formatter
const formatSummary = createSummaryFormatter({
  title: '🔌 Frontend-Backend Integration Analysis',
  scoreField: 'integrationScore',
  gradeField: 'integrationGrade',
  filesField: null, // Custom fields
  issuesField: 'totalIssues',
  showEffort: true,
  effortField: 'totalEffort',
  customFields: [
    { label: '📁 Frontend Files', value: s => s.frontendFiles },
    { label: '📁 Backend Files', value: s => s.backendFiles },
    { label: '🔗 API Calls', value: s => s.frontendCalls },
    { label: '🔗 Endpoints', value: s => s.backendEndpoints }
  ],
  breakdowns: [
    {
      field: 'severityBreakdown',
      icon: '📈',
      title: 'Issue Breakdown',
      icons: { 'HIGH': '🔥', 'MEDIUM': '⚡', 'LOW': '💡' }
    },
    {
      field: 'categoryBreakdown',
      icon: '🏷️',
      title: 'Category Breakdown',
      icons: {
        'Dead Code': '🗑️', 'API Mismatch': '🔌', 'HTTP Method': '🔄',
        'CORS': '🌐', 'Authentication': '🔐', 'Data Format': '📊'
      }
    }
  ],
  customSections: [
    createTopIssuesSection({
      field: 'issues',
      title: 'Top Issues',
      formatItem: (issue, i) => {
        const description = typeof issue.description === 'string' ? issue.description : JSON.stringify(issue.description);
        const recommendation = typeof issue.recommendation === 'string' ? issue.recommendation : JSON.stringify(issue.recommendation);
        const lines = [`${i + 1}. [${issue.severity}] ${issue.type}`, `   ${description}`];
        if (issue.frontend) lines.push(`   Frontend: ${issue.frontend}`);
        if (issue.backend) lines.push(`   Backend: ${issue.backend}`);
        lines.push(`   Fix: ${recommendation}`);
        lines.push(`   Effort: ${issue.effort} | Impact: ${issue.impact}`);
        return lines.join('\n');
      }
    }),
    createRecommendationsSection('Recommendations', '💡', (rec) => {
      if (typeof rec === 'string') return rec;
      if (rec.recommendation) return rec.recommendation;
      if (rec.type && rec.count) return `Address ${rec.count} instances of ${rec.type} across the project`;
      return JSON.stringify(rec);
    })
  ]
});

// Create shared detailed formatter
const formatDetailed = createDetailedFormatter({
  title: '🔌 FRONTEND-BACKEND INTEGRATION ANALYSIS - DETAILED REPORT',
  formatSummary: formatSummary,
  filesField: null, // Custom handling
  issuesField: 'issues',
  formatIssue: null, // Custom issue formatting
  customSections: [
    {
      title: 'Integration Summary',
      format: (results) => {
        const { summary } = results;
        return [
          `   Integration Score: ${summary.integrationScore}/100 (Grade ${summary.integrationGrade})`,
          `   API Coverage: ${summary.apiCoverage}%`,
          `   Endpoint Utilization: ${summary.endpointUtilization}%`,
          `   Method Alignment: ${summary.methodAlignment}%`
        ].join('\n');
      }
    },
    {
      title: 'Issues by Category',
      format: (results, options) => {
        const filteredIssues = filterIssues(results.issues, options.severity || 'LOW', options.category);
        const issuesByCategory = groupIssuesByCategory(filteredIssues);
        const lines = [];
        
        Object.entries(issuesByCategory).forEach(([cat, issues]) => {
          lines.push(`\n${getCategoryIcon(cat)} ${cat} (${issues.length} issues):`);
          lines.push('-'.repeat(40));
          
          issues.forEach((issue, index) => {
            const description = typeof issue.description === 'string' ? issue.description : JSON.stringify(issue.description);
            const recommendation = typeof issue.recommendation === 'string' ? issue.recommendation : JSON.stringify(issue.recommendation);
            lines.push(`\n${index + 1}. [${issue.severity}] ${issue.type}`);
            lines.push(`   Description: ${description}`);
            if (issue.frontend) lines.push(`   Frontend: ${issue.frontend}`);
            if (issue.backend) lines.push(`   Backend: ${issue.backend}`);
            lines.push(`   Recommendation: ${recommendation}`);
            lines.push(`   Effort: ${issue.effort} points | Impact: ${issue.impact}`);
          });
        });
        
        return lines.join('\n');
      }
    },
    {
      title: 'Detailed Metrics',
      format: (results) => {
        const { summary } = results;
        return [
          `   Frontend API Calls: ${summary.frontendCalls}`,
          `   Matched Endpoints: ${summary.matchedEndpoints}`,
          `   Missing Endpoints: ${summary.missingEndpoints}`,
          `   Unused Endpoints: ${summary.unusedEndpoints}`,
          `   Method Mismatches: ${summary.methodMismatches}`
        ].join('\n');
      }
    }
  ]
});

/**
 * Format results for display
 */
function formatResults(results, format, options = {}) {
  switch (format) {
    case 'json':
      return JSON.stringify(results, null, 2);
      
    case 'detailed':
      return formatDetailed(results, options);
      
    case 'summary':
    default:
      return formatSummary(results, options);
  }
}

/**
 * Filter issues based on severity and category
 */
function filterIssues(issues, minSeverity, category) {
  const severityOrder = { LOW: 0, MEDIUM: 1, HIGH: 2 };
  const minSeverityLevel = severityOrder[minSeverity] || 0;
  
  return issues.filter(issue => {
    const severityMatch = severityOrder[issue.severity] >= minSeverityLevel;
    const categoryMatch = !category || issue.category === category;
    return severityMatch && categoryMatch;
  });
}

/**
 * Group issues by category
 */
function groupIssuesByCategory(issues) {
  const groups = {};
  
  issues.forEach(issue => {
    if (!groups[issue.category]) {
      groups[issue.category] = [];
    }
    groups[issue.category].push(issue);
  });
  
  return groups;
}

/**
 * Get icon for category
 */
function getCategoryIcon(category) {
  const icons = {
    'Dead Code': '🗑️',
    'API Mismatch': '🔌',
    'HTTP Method': '🔄',
    'CORS': '🌐',
    'Authentication': '🔐',
    'Data Format': '📊'
  };
  return icons[category] || '📋';
}

module.exports = {
  formatResults
};