feat(quiz): render anchored code inline (clipped to the anchored lines) - #29
Merged
Conversation
The anchored hunk now renders inline with the question (always visible, fetched on render) instead of behind a click-to-expand panel — the code context is right there next to the prompt. To keep that readable when a question anchors into a large diff hunk, the inline view is clipped to a tight window around the anchored lines (± a few context lines), with the anchored lines highlighted and trimmed regions marked by an ellipsis. Falls back to the full hunk when there's no window to clip to. Verified end-to-end by generating a real quiz with `cognit` against PR #27 and serving it through the real web app: 5 questions (4 anchored + mermaid + open), each inline hunk clipped to 12–20 lines (from 46) with ellipsis + highlighting, plus the diff coverage map. Frontend only. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
What
Makes the per-question code context inline with the question instead of behind a click-to-expand disclosure: the anchored hunk now renders directly under the prompt (fetched on render, always visible).
To keep that readable when a question anchors into a large diff hunk, the inline view is clipped to a tight window around the anchored lines (± 3 context lines), with the anchored lines highlighted and trimmed regions marked by an ellipsis (
⋯). Falls back to the full hunk when there's no anchor window to clip to.Why
The collapsible panel hid the code behind a click; "inline together with the question" is what makes the context actually useful while answering. But always-showing a full 40+ line hunk under every question (and repeated across questions that anchor the same hunk) is overwhelming — hence the clip.
Changes
renderAnchor→ an always-visible inline panel (file:line header + hunk), fetched on render; cached per path so re-renders don't re-fetch or flash.renderDiff→ after scoping to the overlapping hunk(s), clips to[start-3, end+3]on the new side, emits⋯for trimmed head/tail, keeps the@@header, and highlights anchored lines.Frontend only — no backend/schema change.
Testing
node --check; fullmcp/enginesuite green;ruff+ruff format --checkclean.cognitagainst PR feat(quiz): diff coverage map in the sidebar #27 (5 questions — 4 anchored + mermaid + open) and served it through the real web app +_DiffProvider. Confirmed via DOM that each inline hunk clipped to 12–20 lines (from 46), each with 2 ellipsis markers and the anchored lines highlighted; mermaid diagrams and the diff coverage map ("1 of 5 files probed") all render. Screenshots shared.🤖 Generated with Claude Code