@vibecodetown/mcp-server 2.1.0

package/build/tools/react_perf/generate_report.js

@@ -0,0 +1,337 @@
+// adapters/mcp-ts/src/tools/react_perf/generate_report.ts
+// Main implementation for react_perf.generate_report
+import * as fs from "fs";
+import * as path from "path";
+import { impactToSeverity, calculateScore } from "./types.js";
+import { checkPatterns } from "./check_patterns.js";
+import { getTotalRuleCount, getRuleCountByCategory } from "./rules/index.js";
+// ============================================================
+// Report Generators
+// ============================================================
+function generateMarkdownReport(summary, violations, includeRecommendations) {
+    const lines = [];
+    // Header
+    lines.push("# React Performance Analysis Report");
+    lines.push("");
+    lines.push(`Generated: ${new Date().toISOString()}`);
+    lines.push("");
+    // Score Badge
+    const scoreEmoji = summary.score >= 80 ? "🟢" : summary.score >= 50 ? "🟡" : "🔴";
+    lines.push(`## Score: ${scoreEmoji} ${summary.score}/100`);
+    lines.push("");
+    // Summary Table
+    lines.push("## Summary");
+    lines.push("");
+    lines.push("| Metric | Value |");
+    lines.push("|--------|-------|");
+    lines.push(`| Files Scanned | ${summary.total_files_scanned} |`);
+    lines.push(`| Total Issues | ${summary.total_issues} |`);
+    lines.push(`| Errors | ${summary.by_severity.error} |`);
+    lines.push(`| Warnings | ${summary.by_severity.warning} |`);
+    lines.push(`| Info | ${summary.by_severity.info} |`);
+    lines.push("");
+    // By Category
+    lines.push("## Issues by Category");
+    lines.push("");
+    lines.push("| Category | Count |");
+    lines.push("|----------|-------|");
+    for (const [category, count] of Object.entries(summary.by_category)) {
+        if (count > 0) {
+            lines.push(`| ${category} | ${count} |`);
+        }
+    }
+    lines.push("");
+    // Rule Coverage
+    const ruleCount = getTotalRuleCount();
+    const categoryCount = getRuleCountByCategory();
+    lines.push("## Rule Coverage");
+    lines.push("");
+    lines.push(`Total rules: ${ruleCount}`);
+    lines.push("");
+    lines.push("| Category | Rules |");
+    lines.push("|----------|-------|");
+    for (const [cat, count] of Object.entries(categoryCount)) {
+        lines.push(`| ${cat} | ${count} |`);
+    }
+    lines.push("");
+    // Violations Detail
+    if (violations.length > 0) {
+        lines.push("## Violations");
+        lines.push("");
+        // Group by severity
+        const errors = violations.filter(v => impactToSeverity(v.impact) === "error");
+        const warnings = violations.filter(v => impactToSeverity(v.impact) === "warning");
+        const infos = violations.filter(v => impactToSeverity(v.impact) === "info");
+        if (errors.length > 0) {
+            lines.push("### 🔴 Errors");
+            lines.push("");
+            for (const v of errors) {
+                lines.push(`- **${v.rule_id}** in \`${v.file}:${v.line}\``);
+                lines.push(`  - ${v.message}`);
+                if (includeRecommendations) {
+                    lines.push(`  - 💡 ${v.suggestion}`);
+                }
+                if (v.code_snippet) {
+                    lines.push(`  - \`${v.code_snippet}\``);
+                }
+            }
+            lines.push("");
+        }
+        if (warnings.length > 0) {
+            lines.push("### 🟡 Warnings");
+            lines.push("");
+            for (const v of warnings) {
+                lines.push(`- **${v.rule_id}** in \`${v.file}:${v.line}\``);
+                lines.push(`  - ${v.message}`);
+                if (includeRecommendations) {
+                    lines.push(`  - 💡 ${v.suggestion}`);
+                }
+            }
+            lines.push("");
+        }
+        if (infos.length > 0) {
+            lines.push("### 🔵 Info");
+            lines.push("");
+            for (const v of infos) {
+                lines.push(`- **${v.rule_id}** in \`${v.file}:${v.line}\``);
+                lines.push(`  - ${v.message}`);
+                if (includeRecommendations) {
+                    lines.push(`  - 💡 ${v.suggestion}`);
+                }
+            }
+            lines.push("");
+        }
+    }
+    else {
+        lines.push("## ✅ No violations found!");
+        lines.push("");
+        lines.push("Great job! Your code follows React performance best practices.");
+        lines.push("");
+    }
+    // Recommendations
+    if (includeRecommendations && violations.length > 0) {
+        lines.push("## Top 5 Recommendations");
+        lines.push("");
+        // Get unique suggestions by rule_id
+        const seen = new Set();
+        const topSuggestions = [];
+        for (const v of violations) {
+            if (!seen.has(v.rule_id) && topSuggestions.length < 5) {
+                seen.add(v.rule_id);
+                topSuggestions.push({ impact: v.impact, suggestion: v.suggestion });
+            }
+        }
+        for (let i = 0; i < topSuggestions.length; i++) {
+            const s = topSuggestions[i];
+            lines.push(`${i + 1}. **[${s.impact}]** ${s.suggestion}`);
+        }
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+function generateHtmlReport(summary, violations, includeRecommendations) {
+    const scoreColor = summary.score >= 80 ? "#22c55e" : summary.score >= 50 ? "#eab308" : "#ef4444";
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>React Performance Report</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; padding: 2rem; max-width: 1200px; margin: 0 auto; background: #f5f5f5; }
+    h1 { color: #1a1a1a; margin-bottom: 1rem; }
+    h2 { color: #333; margin: 2rem 0 1rem; border-bottom: 2px solid #ddd; padding-bottom: 0.5rem; }
+    h3 { color: #555; margin: 1.5rem 0 0.5rem; }
+    .card { background: white; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .score { font-size: 3rem; font-weight: bold; color: ${scoreColor}; }
+    .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
+    .summary-item { text-align: center; }
+    .summary-item .value { font-size: 2rem; font-weight: bold; }
+    .summary-item .label { color: #666; font-size: 0.9rem; }
+    table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
+    th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #eee; }
+    th { background: #f9f9f9; font-weight: 600; }
+    .error { color: #dc2626; }
+    .warning { color: #ca8a04; }
+    .info { color: #2563eb; }
+    .violation { padding: 1rem; margin: 0.5rem 0; border-left: 4px solid; background: white; border-radius: 4px; }
+    .violation.error { border-color: #dc2626; }
+    .violation.warning { border-color: #ca8a04; }
+    .violation.info { border-color: #2563eb; }
+    .violation-title { font-weight: 600; }
+    .violation-file { color: #666; font-size: 0.9rem; font-family: monospace; }
+    .violation-message { margin: 0.5rem 0; }
+    .violation-suggestion { color: #059669; font-size: 0.9rem; }
+    code { background: #f3f4f6; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9rem; }
+    .timestamp { color: #888; font-size: 0.9rem; }
+  </style>
+</head>
+<body>
+  <h1>🚀 React Performance Analysis Report</h1>
+  <p class="timestamp">Generated: ${new Date().toISOString()}</p>
+
+  <div class="card">
+    <h2 style="margin-top: 0;">Score</h2>
+    <div class="score">${summary.score}/100</div>
+  </div>
+
+  <div class="card">
+    <h2 style="margin-top: 0;">Summary</h2>
+    <div class="summary-grid">
+      <div class="summary-item">
+        <div class="value">${summary.total_files_scanned}</div>
+        <div class="label">Files Scanned</div>
+      </div>
+      <div class="summary-item">
+        <div class="value">${summary.total_issues}</div>
+        <div class="label">Total Issues</div>
+      </div>
+      <div class="summary-item">
+        <div class="value error">${summary.by_severity.error}</div>
+        <div class="label">Errors</div>
+      </div>
+      <div class="summary-item">
+        <div class="value warning">${summary.by_severity.warning}</div>
+        <div class="label">Warnings</div>
+      </div>
+      <div class="summary-item">
+        <div class="value info">${summary.by_severity.info}</div>
+        <div class="label">Info</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2 style="margin-top: 0;">Issues by Category</h2>
+    <table>
+      <thead>
+        <tr><th>Category</th><th>Count</th></tr>
+      </thead>
+      <tbody>
+        ${Object.entries(summary.by_category)
+        .filter(([, count]) => count > 0)
+        .map(([cat, count]) => `<tr><td>${cat}</td><td>${count}</td></tr>`)
+        .join("\n        ")}
+      </tbody>
+    </table>
+  </div>
+
+  ${violations.length > 0 ? `
+  <div class="card">
+    <h2 style="margin-top: 0;">Violations</h2>
+    ${violations.map(v => {
+        const severity = impactToSeverity(v.impact);
+        return `
+      <div class="violation ${severity}">
+        <div class="violation-title">${v.rule_id}</div>
+        <div class="violation-file">${v.file}:${v.line}</div>
+        <div class="violation-message">${v.message}</div>
+        ${includeRecommendations ? `<div class="violation-suggestion">💡 ${v.suggestion}</div>` : ""}
+        ${v.code_snippet ? `<div><code>${escapeHtml(v.code_snippet)}</code></div>` : ""}
+      </div>`;
+    }).join("")}
+  </div>
+  ` : `
+  <div class="card">
+    <h2 style="margin-top: 0;">✅ No violations found!</h2>
+    <p>Great job! Your code follows React performance best practices.</p>
+  </div>
+  `}
+</body>
+</html>`;
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+function generateJsonReport(summary, violations, includeRecommendations) {
+    const report = {
+        generated_at: new Date().toISOString(),
+        summary,
+        violations: violations.map(v => ({
+            rule_id: v.rule_id,
+            category: v.category,
+            file: v.file,
+            line: v.line,
+            column: v.column,
+            impact: v.impact,
+            severity: impactToSeverity(v.impact),
+            message: v.message,
+            ...(includeRecommendations ? { suggestion: v.suggestion } : {}),
+            ...(v.code_snippet ? { code_snippet: v.code_snippet } : {})
+        })),
+        rules: {
+            total: getTotalRuleCount(),
+            by_category: getRuleCountByCategory()
+        }
+    };
+    return JSON.stringify(report, null, 2);
+}
+// ============================================================
+// Main Entry Point
+// ============================================================
+export async function generateReport(input) {
+    // Run check_patterns to get violations
+    const checkResult = await checkPatterns({
+        target_paths: input.target_paths,
+        min_impact: "LOW" // Get all violations for the report
+    });
+    // Calculate severity counts
+    const bySeverity = {
+        error: 0,
+        warning: 0,
+        info: 0
+    };
+    const byCategory = {};
+    for (const v of checkResult.violations) {
+        const severity = impactToSeverity(v.impact);
+        bySeverity[severity]++;
+        byCategory[v.category] = (byCategory[v.category] || 0) + 1;
+    }
+    // Build summary
+    const summary = {
+        total_files_scanned: checkResult.total_files_scanned,
+        total_issues: checkResult.total_violations,
+        by_severity: bySeverity,
+        by_category: byCategory,
+        score: calculateScore(bySeverity)
+    };
+    // Generate report content
+    const format = input.format || "markdown";
+    const includeRecommendations = input.include_recommendations !== false;
+    let reportContent;
+    switch (format) {
+        case "html":
+            reportContent = generateHtmlReport(summary, checkResult.violations, includeRecommendations);
+            break;
+        case "json":
+            reportContent = generateJsonReport(summary, checkResult.violations, includeRecommendations);
+            break;
+        case "markdown":
+        default:
+            reportContent = generateMarkdownReport(summary, checkResult.violations, includeRecommendations);
+            break;
+    }
+    // Save to file if output_path is specified
+    let savedTo;
+    if (input.output_path) {
+        const outputPath = path.resolve(input.output_path);
+        const dir = path.dirname(outputPath);
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+        }
+        fs.writeFileSync(outputPath, reportContent, "utf-8");
+        savedTo = outputPath;
+    }
+    return {
+        status: "OK",
+        summary,
+        report_content: reportContent,
+        ...(savedTo ? { saved_to: savedTo } : {})
+    };
+}

package/build/tools/react_perf/index.js

@@ -0,0 +1,119 @@
+// adapters/mcp-ts/src/tools/react_perf/index.ts
+// react_perf.* MCP tools registration and export
+import { checkPatternsInputSchema, checkPatternsOutputSchema, generateReportInputSchema, generateReportOutputSchema } from "./types.js";
+import { checkPatterns } from "./check_patterns.js";
+import { generateReport } from "./generate_report.js";
+import { getTotalRuleCount, getRuleCountByCategory } from "./rules/index.js";
+import { ToolErrorOutputSchema } from "../../generated/tool_error_output.js";
+import { decorateToolOutputText, notifyDesktopBestEffort } from "../../dx/activity.js";
+function toolResult(data) {
+    // react_perf tools are surfaced through VibePM as well; keep output decoration consistent.
+    const toolName = "react_perf";
+    const jsonText = JSON.stringify(data, null, 2);
+    void notifyDesktopBestEffort({ toolName, data, outcome: "success" });
+    return {
+        content: decorateToolOutputText(toolName, jsonText, data, "success"),
+        structuredContent: data
+    };
+}
+function err(toolName, reason, extra) {
+    const out = ToolErrorOutputSchema.parse({
+        status: "ERROR",
+        reason,
+        message: extra?.message ?? "요청을 처리하는 중 문제가 생겼습니다.",
+        recovery: extra?.recovery,
+        is_retryable: extra?.is_retryable,
+        details: extra?.details,
+        debug: extra?.debug
+    });
+    const jsonText = JSON.stringify(out, null, 2);
+    void notifyDesktopBestEffort({ toolName, data: out, outcome: "error" });
+    return {
+        content: decorateToolOutputText(toolName, jsonText, out, "error"),
+        structuredContent: out,
+        isError: true
+    };
+}
+// ============================================================
+// Tool Handlers (with error handling)
+// ============================================================
+async function reactPerfCheckPatterns(input) {
+    const startedAt = Date.now();
+    try {
+        const result = await checkPatterns(input);
+        const validated = checkPatternsOutputSchema.parse(result);
+        const durationMs = Date.now() - startedAt;
+        const jsonText = JSON.stringify(validated, null, 2);
+        void notifyDesktopBestEffort({ toolName: "react_perf.check_patterns", data: validated, outcome: "success", durationMs });
+        return {
+            content: decorateToolOutputText("react_perf.check_patterns", jsonText, validated, "success", durationMs),
+            structuredContent: validated
+        };
+    }
+    catch (e) {
+        const msg = e instanceof Error ? e.message : String(e);
+        return err("react_perf.check_patterns", "check_patterns_failed", { message: msg });
+    }
+}
+async function reactPerfGenerateReport(input) {
+    const startedAt = Date.now();
+    try {
+        const result = await generateReport(input);
+        const validated = generateReportOutputSchema.parse(result);
+        const durationMs = Date.now() - startedAt;
+        const jsonText = JSON.stringify(validated, null, 2);
+        void notifyDesktopBestEffort({ toolName: "react_perf.generate_report", data: validated, outcome: "success", durationMs });
+        return {
+            content: decorateToolOutputText("react_perf.generate_report", jsonText, validated, "success", durationMs),
+            structuredContent: validated
+        };
+    }
+    catch (e) {
+        const msg = e instanceof Error ? e.message : String(e);
+        return err("react_perf.generate_report", "generate_report_failed", { message: msg });
+    }
+}
+// ============================================================
+// Export
+// ============================================================
+export function defineReactPerfTools() {
+    return {
+        // Input schemas (for validation)
+        checkPatternsInputSchema,
+        generateReportInputSchema,
+        // Tool handlers
+        reactPerfCheckPatterns,
+        reactPerfGenerateReport,
+        // Rule info (for introspection)
+        getTotalRuleCount,
+        getRuleCountByCategory
+    };
+}
+// ============================================================
+// Tool Descriptions (for MCP registration)
+// ============================================================
+export const REACT_PERF_TOOL_DESCRIPTIONS = {
+    "react_perf.check_patterns": `React/Next.js 코드에서 성능 anti-pattern을 탐지합니다.
+
+탐지 가능한 패턴 (48개 규칙):
+- async: 순차 await (waterfall), 루프 내 await
+- bundle: barrel import, 대용량 라이브러리 import
+- server: Server Action 인증/검증 누락
+- rendering: Suspense 바운더리, 스트리밍, Error Boundary
+- client: 과도한 'use client', window 객체 접근, hydration
+- rerender: 인라인 객체/함수, Context value, memo
+- advanced: Parallel Routes, PPR, Optimistic Updates
+- js: lodash 전체 import, moment.js, 안전하지 않은 JSON.parse
+
+사용 시점: 성능 최적화가 필요하거나 코드 리뷰 시`,
+    "react_perf.generate_report": `React/Next.js 성능 분석 리포트를 생성합니다.
+
+출력 형식:
+- markdown: 마크다운 형식 (기본값)
+- html: HTML 형식 (시각적 대시보드)
+- json: JSON 형식 (자동화용)
+
+점수 계산: 100 - (error × 10) - (warning × 3) - (info × 1)
+
+사용 시점: 팀 공유용 리포트 생성, CI/CD 품질 게이트`
+};