feat: Add JSON repair functionality to JSON utility

[gweakliem]

This PR adds comprehensive JSON repair functionality to the existing JSON utility tool.

Changes

• Added jsonrepair dependency to package.json
• Implemented repairJSON function in json.vue utility
• Added red "Repair" button with wrench icon to UI
• Integrated with existing error handling and success messaging

Features Supported

• Python dict strings (single quotes, None/True/False constants)
• Malformed JSON from LLM output
• Missing quotes around keys
• Missing commas and closing brackets
• Repair truncated JSON
• Replace single quotes with double quotes
• Handle special quote characters and whitespace
• Convert Python constants to JSON equivalents
• Strip trailing commas, comments, JSONP notation
• Handle MongoDB data types
• Concatenate split strings
• Transform newline-delimited JSON into valid arrays

Resolves #13

Generated with Claude Code

[claude]

Claude finished @gweakliem's task —— View job

---

PR Review Complete ✅

I've thoroughly reviewed the JSON repair functionality addition. Here's my comprehensive feedback:

Todo List

• Read and analyze the changed files (package.json and json.vue)
• Review code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage needs
• Provide comprehensive review feedback in GitHub comment

---

✅ Strengths

Clean Integration: The repair functionality integrates seamlessly with the existing UI pattern and error handling system.

Consistent UX: The red "Repair" button with wrench icon follows the established design patterns of other utility buttons.

Proper Error Handling: The repairJSON function correctly handles both success and failure cases with appropriate user feedback.

Library Choice: jsonrepair is a well-established library (v3.8.1) that handles the exact use cases mentioned in the PR description.

⚠️ Areas for Improvement

Code Quality & Best Practices

1. Missing Input Validation (pages/utils/json.vue:333-358):

   const repairJSON = () => {
     try {
       if (!jsonInput.value.trim()) {
         return  // Silent failure - should show user feedback
       }

   Recommendation: Show a message when input is empty, similar to the validateJSON function.

2. Dead Code (pages/utils/json.vue:136-139):

   preErrorText.value = jsonInput.value.substring(0, start)
   errorSection.value = jsonInput.value.substring(start, end)
   postErrorText.value = jsonInput.value.substring(end)

   Issue: These variables (preErrorText, errorSection, postErrorText) are referenced but never declared, and this function appears unused.

Performance Considerations

3. No Input Size Limits: Large JSON strings could cause performance issues during repair operations.
   Recommendation: Consider adding size limits or showing a warning for very large inputs.

4. Synchronous Processing: The repair operation is synchronous and could block the UI for large inputs.
   Recommendation: For production use, consider making repair operations async with a loading state.

Security Considerations

5. Dependency Security: The jsonrepair library is externally maintained.
   Recommendation:

   • Keep the library updated to latest versions
   • Consider adding dependency vulnerability scanning to CI/CD
   • The current version (3.8.1) appears to be recent and well-maintained

6. Input Sanitization: While jsonrepair handles malformed input safely, there's no explicit input size limiting.
   Recommendation: Add reasonable input size limits to prevent potential DoS from extremely large inputs.

Test Coverage

7. No Tests: The new repair functionality lacks test coverage.
   Recommendations:
   • Add unit tests for the repairJSON function
   • Test edge cases: empty input, already valid JSON, completely malformed input
   • Test the specific use cases mentioned (Python dict strings, missing quotes, etc.)
   • Add integration tests for the UI interaction

📋 Suggested Improvements

1. Enhanced Empty Input Handling:

   if (!jsonInput.value.trim()) {
     hasError.value = true
     errorMessage.value = 'Please enter some JSON to repair'
     return
   }

2. Input Size Validation:

   const MAX_INPUT_SIZE = 1024 * 1024 // 1MB limit
   if (jsonInput.value.length > MAX_INPUT_SIZE) {
     hasError.value = true
     errorMessage.value = 'Input too large for repair operation'
     return
   }

3. Clean up unused code in the highlightError function or remove it entirely.

🎯 Overall Assessment

This is a solid implementation that adds valuable functionality to the JSON utility. The code follows existing patterns well and the feature addresses real user needs. The main concerns are around test coverage and minor code quality issues that are easily addressable.

Recommendation: ✅ Approve with minor improvements

The PR successfully implements the requested JSON repair functionality with good integration into the existing codebase. The suggested improvements are non-blocking for the current implementation.

---

[claude]

Claude finished @gweakliem's task —— View job

---

PR Review Complete ✅

I've thoroughly reviewed the JSON repair functionality addition. Here's my comprehensive feedback:

Todo List

• Read and analyze the changed files
• Review code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage needs
• Provide comprehensive review feedback

---

✅ Strengths

Excellent Integration: The repair functionality integrates seamlessly with the existing UI pattern and error handling system (pages/utils/json.vue:333-365).

Consistent UX: The red "Repair" button with wrench icon follows the established design patterns of other utility buttons (pages/utils/json.vue:60-64).

Proper Error Handling: The repairJSON function correctly handles both success and failure cases with appropriate user feedback, including custom error messages.

Smart Input Validation: Good addition of input size limiting with a 1MB cap to prevent performance issues (pages/utils/json.vue:339-344).

Library Choice: jsonrepair v3.8.1 is a well-established, actively maintained library that handles the exact use cases mentioned in the PR description.

⚠️ Areas for Improvement

Code Quality & Best Practices

1. Dead Code Issue (pages/utils/json.vue:136-139):

   preErrorText.value = jsonInput.value.substring(0, start)
   errorSection.value = jsonInput.value.substring(start, end)
   postErrorText.value = jsonInput.value.substring(end)

   Issue: These variables (preErrorText, errorSection, postErrorText) are referenced but never declared in the script setup block. This suggests the highlightError function is unused dead code.
   Recommendation: Remove the unused function or properly declare the missing refs.

2. Silent Failure Inconsistency (pages/utils/json.vue:335-337):

   if (!jsonInput.value.trim()) {
     return  // Silent failure
   }

   Issue: Unlike other functions like validateJSON, this doesn't show user feedback for empty input.
   Recommendation: Consider showing a message for empty input to maintain UX consistency, or document why silent failure is appropriate here.

Performance Considerations

3. Synchronous Processing: The repair operation is synchronous and could potentially block the UI for very large inputs, despite the size limit.
   Impact: Minimal risk given the 1MB limit, but worth monitoring for user experience.

4. Memory Usage: Large malformed JSON could consume significant memory during repair operations.
   Mitigation: The 1MB size limit adequately addresses this concern.

Security Considerations

5. Dependency Security: The jsonrepair library is externally maintained.
   Current Status: Version 3.8.1 appears recent and well-maintained.
   Recommendations:

   • Monitor for security updates
   • Consider adding dependency vulnerability scanning to CI/CD pipeline

6. Input Sanitization: The size limiting provides good protection against potential DoS attacks from extremely large inputs.

Test Coverage

7. Missing Test Coverage: The new repair functionality lacks automated tests.
   Recommendations:
   • Add unit tests for the repairJSON function
   • Test edge cases: empty input, valid JSON, completely malformed input, large inputs
   • Test specific repair scenarios mentioned in PR (Python dict strings, missing quotes, etc.)
   • Add UI integration tests for the repair button interaction

🔍 Detailed Code Review

Positive Implementations:

• Error Message Enhancement (pages/utils/json.vue:361): Good practice prefixing repair-specific errors with "Repair failed:"
• Consistent Success Flow: Properly resets error states and shows success message with timeout
• Input Size Protection: 1MB limit prevents abuse and performance issues

Minor Suggestions:

1. Consider Adding User Feedback for Empty Input:

   if (!jsonInput.value.trim()) {
     hasError.value = true
     errorMessage.value = 'Please enter some JSON to repair'
     return
   }

2. Clean Up Dead Code: Remove the unused highlightError function or implement the missing variable declarations.

🎯 Overall Assessment

This is a high-quality implementation that successfully adds valuable JSON repair functionality. The code follows existing patterns excellently and addresses real user needs for handling malformed JSON from various sources.

Key Strengths:

• Clean integration with existing codebase
• Proper error handling and user feedback
• Good performance safeguards
• Appropriate library choice

Areas for Enhancement:

• Test coverage (non-blocking)
• Minor code cleanup (dead code)
• Optional UX consistency improvement

Recommendation: ✅ Approve - This is a solid implementation that enhances the JSON utility tool. The suggested improvements are minor and non-blocking.

The implementation successfully addresses the requirements from issue #13 and provides a robust solution for repairing malformed JSON from various sources including LLM output, Python dict strings, and other common malformation patterns.

---