Error message is hard to read in validation panel

[Muawiya-contact]

Problem

When I enter invalid JSON, the validation message is shown, but it is not easy to notice or read quickly. The error area should be clearer and easier to scan.

Before

The error message is difficult to read and the validation area is not draggable.

After

The error message is now easily readable and the validation window is draggable (like VS Code terminal).

Solution

Changes Made:

1. Better Error Messages (src/utils/parseSchema.ts)

   • Enhanced JSON/YAML error parsing to include line number, column, and character position
   • Format: Invalid JSON: [error message] (line X column Y) (near character N)

2. Resizable Validation Panel (src/components/MonacoEditor.tsx)

   • Converted validation area from fixed-height to draggable vertical split
   • Added PanelResizeHandle to allow users to expand/collapse the error panel
   • Validation panel always visible and readable

3. Improved UI Styling (src/App.css)

   • Added visual drag handle indicator
   • Smooth cursor feedback (cursor-row-resize)
   • Better visual hierarchy for the validation section

Result:

• ✅ Error messages now clearly show exact location of JSON syntax errors
• ✅ Validation panel is resizable like VS Code terminal
• ✅ Users can easily expand the panel to read full error messages

[Muawiya-contact]

@AgniveshChaubey Can I work on it?

[AgniveshChaubey]

I think we only need to make the validation section resizable. Rest of things are already in place.