feat(editor): enhance interactive JSON schema validation errors

[itvi-1234]

Description

This PR introduces a major upgrade to the JSON Schema validation UX within the Monaco Editor. We have replaced the static error reporting system with an interactive, highly visual overlay that guides users precisely to the source of their schema errors and provides actionable documentation links.

closes #335

Key Features & Improvements

• Detailed Validation Reporting: Upgraded @hyperjump/json-schema execution to use the "BASIC" output format, successfully exposing the exact rule and JSON pointer path of schema violations.
• Interactive Error Overlay: When validation fails, a sleek backdrop-blur-sm overlay appears over the graph visualization panel displaying a list of errors.
• Click-to-Locate Functionality:
  • Reused the existing AST calculation engine (getHighlightedNodeRangeFromPath) to sync the editor with validation errors.
  • Clicking an error seamlessly scrolls the Monaco Editor to the exact line/column and highlights it.
  • Added active state tracking: Clicking an error retains its highlighted background in the error list (even on hover-out), providing clear context of the currently selected error.
• Contextual Documentation Links:
  • Implemented an intelligent mapping system (getKeywordDocLink) that reads the failed Hyperjump keyword (e.g. maxLength, enum) and provides a direct target="_blank" link to the relevant section of the official Understanding JSON Schema documentation.
  • Ensures users not only know where they failed, but why and how to fix it.

Technical Changes

• Modified MonacoEditor.tsx to handle the new SchemaValidationError type containing path and docLink.
• Replaced the bottom status bar error text with a top-level error count and informative links.

Testing Instructions

1. Open the studio editor and input an invalid schema (e.g., set "type": "int" instead of "integer").
2. Observe the blurred overlay appearing with the error list.
3. Hover over an error to see the text turn blue (indicating interactivity).
4. Click the error—the editor should instantly scroll to highlight the offending line, and the list item should remain highlighted gray.
5. Click the external link icon (<BsBoxArrowUpRight>) to confirm it opens the correct Official JSON Schema documentation page.

[github-actions]

Preview Deployed!

Item	Status
Latest Deploy	Visit Preview
Environment	Preview (PR-354)
Action	View Logs

Last updated at 2026-06-29T18:05:45Z

[itvi-1234]

Hi @AgniveshChaubey & @jagpreetrahi , COuld you please review the PR whenever you have time ,I think preview is failing , It is not showing all the changes

Original one -

Preview -

[AgniveshChaubey]

Actions status looks successful. Will need to check what can be issue here.

Anyways, here are couple of points based on local deployment:

• right now, the error popup opens up only for JSON Schema related error, not for JSON syntax errors. Figuring out JSON syntax error can be a bit tricky, but we'll have to somehow cover JSON syntax errors as well.

• I can see clicking the json schema doc button takes us to the official json schema page. But I highly doubt if JSON Schema has a dedicated page for each keyword. Maybe we can use the learnjsonschema.com website in our case, because as of now, it has a dedicated page for keyword of dialect 2020-12.

[AgniveshChaubey]

Left some comments. We're definitely moving in the right direction.

[AgniveshChaubey]

Let's not remove the comment from here. It is providing an importaent info and might ve very useful in future during debugging.

[itvi-1234]

Yes , I have refractored it

[AgniveshChaubey]

Currently, because of this filtering, we're missing important information that should be surfaced to the user. Indeed we're properly tracing and following the error, but when we look at the error message (for example when I put a value of type as objec instead of object), it says some misleadning things ("/type: invalid anyOf", in case of above example). Actually all the repititive errors blocks for the same location contains different meta-validation failures. We need to figure out a way to utilize those error blocks and detrive a meaningful error message for the end user. With quick google search, i found one library under Hyperjump unbrella itself (https://github.com/hyperjump-io/json-schema-errors). We can explore how helpful this can be in our case.

[itvi-1234]

Nice suggestion , We are getting more readable errors now

[AgniveshChaubey]

haven't checked the updated code, but how are we constructing this custom message?

[itvi-1234]

Hi @AgniveshChaubey ,Here we are using the @hyperjump/json-schema-errors library

It acts as a smart translator. Instead of us manually hacking the output, we just pass the raw validation result to it.
Then,

1. It traverses the error tree, understands the context, and correctly identifies the root cause instead of just the symptoms.
2. It has built-in handlers for specific keywords. https://github.com/hyperjump-io/json-schema-errors/tree/main/src/error-handlers So, instead of returning an enum failure, it translates the root cause into a clean, human-readable string: https://github.com/hyperjump-io/json-schema-errors/blob/main/src/translations/en-US.js Expected one of 'array', 'boolean', 'integer'...

Also Previously, because Hyperjump outputs a flat list of all meta-validation failures (a chain of errors), multiple errors were being thrown for a single instanceLocation. To prevent the UI from being spammed, we used a manual Set to deduplicate errors by path. The downside of this was that we ended up keeping the top-level generic "symptom" (like invalid anyOf) while accidentally filtering out the actual root cause (the enum failure).

[AgniveshChaubey]

I think we should wrap this into a separate component.

[itvi-1234]

yes , I have wrapped it up in a seperate file

[itvi-1234]

Hi @AgniveshChaubey , I have addressed all the sugggetions , could you please take a look whenever have some time