JSON breadcrumbs for the response viewer (YK-724) - #653
Open
vlad-solomon wants to merge 4 commits into
Open
vlad-solomon wants to merge 4 commits into
vlad-solomon wants to merge 4 commits into
Conversation
Show where the cursor sits inside a JSON response as a row of clickable crumbs above the body (e.g. `$ > sort > link > filter > "category.id" > 0`). Array indices are their own crumbs so a click can isolate a single element. Clicking a crumb writes the corresponding JSONPath into the filter box and applies it, so orientation and filtering are the same gesture. Keys that aren't bare identifiers use bracket-quote notation (`["category.id"]`), matching the JSONPath the filter already accepts. Implemented by walking the CodeMirror JSONC syntax tree from the cursor to the root; selection works in the read-only viewer, so the path updates live as you click around. The bar scrolls horizontally with arrows when the path is deeper than the pane is wide. Closes YK-724. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RzhRSKbv99YXc6myv8PhyH
- Show the breadcrumb bar for any JSON response, not just once a cursor has landed, so it reads as a permanent part of the viewer. - Rename the leftmost crumb to "Root" and make clicking it reset to the whole response with the filter box closed, instead of applying `$` (which JSONPath wraps in an array) or opening an empty filter. - Hide the crumbs while a filter is applied, since the AppliedFilterBar already reports the active path and the crumbs would only stack a redundant bar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RzhRSKbv99YXc6myv8PhyH
A caret in a line's leading whitespace resolved to the enclosing object or array, which dropped the leaf key (or collapsed the path to the root). The first attempt at picking the nearest child by distance guessed wrong between adjacent keys. Instead, anchor a whitespace caret to the first non-whitespace token on its line. Yaak pretty-prints the response so each key and array element starts its own line, making that token the line's own member. The breadcrumb now tracks "the line I'm on" with no guessing, and the two distance heuristics are gone. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RzhRSKbv99YXc6myv8PhyH
Author
|
Here are a few screenshots:
|
gschier
marked this pull request as ready for review
September 15, 2026 15:51
|
Thanks for the PR. This appears to match Yaak's contribution policy and is awaiting review by @gschier. This only means the PR is in scope for review. It does not mean the change has been reviewed or accepted for merge. |
github-actions
Bot
added
contribution: missing template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a breadcrumb bar above the JSON response body that shows where the caret is inside a deeply nested response, and turns a click into a JSONPath filter. Addresses YK-724, greenlit by @gschier.
What it does
Root > sort > link > filter > "category.id" > 0. Array indices are their own crumbs.["category.id"]), matching what the JSONPath filter accepts.Rootresets to the whole response (clears the filter, leaves the box closed).How it works
The path is derived from the CodeMirror JSONC syntax tree by walking from the caret to the root. A caret in a line's leading whitespace is anchored to the first non-whitespace token on that line — since the response is pretty-printed, each key/element starts its own line, so this tracks "the line I'm on" without guessing between neighbours. No new dependencies.
Files
components/core/Editor/json/jsonPath.ts— path extraction + JSONPath serialization (unit-tested, 13 cases)components/core/Editor/json/breadcrumbExtension.ts— CodeMirror extension emitting the path on selection changecomponents/responseViewers/JsonBreadcrumbBar.tsx— the bar (horizontal scroll + arrows on overflow)components/responseViewers/TextViewer.tsx— wiringFor discussion (interaction / discoverability)
Submission
CONTRIBUTING.md.Explicit permission feedback item (required if not a bug fix):
https://yaak.app/feedback/posts/breadcrumbs-for-json-responses
Related
🤖 Generated with Claude Code
https://claude.ai/code/session_01RzhRSKbv99YXc6myv8PhyH