feat(diff-viewer): improved chips, switch, and unified diff #6093
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
Introduces an inline diff viewer for comparing two eval runs (via eval IDs or local JSON). Adds structured comparison UI, drawer view for detailed diffs, and minor styling updates to the existing Results page.
⸻
Changes
• Inline Compare Mode
• Automatically enabled when both baseline and current query params are present (/eval?baseline=…¤t=…)
• Displays aggregated comparison summary and per-row deltas
• Results Table
• Added Status, Pass Δ, and Score Δ columns
• Zebra striping and sticky header for readability
• Row click opens detailed diff drawer
• “same” status renamed to “unchanged”
• Diff Drawer
• Shows baseline and current outputs
• Unified diff rendering with clear additions/removals
• Graceful empty state when no textual change is detected
• UI Improvements
• “Show only changed” implemented as an on/off switch
• Additional spacing for summary chip section
• Minor adjustments for chip layout consistency
⸻
Implementation Details
• New files under src/app/src/pages/eval/diff/:
• components/ResultsTable.tsx
• components/DiffDrawer.tsx
• components/InlineDiff.tsx
• hooks/useRunSummary.ts
• hooks/useRunComparison.ts
• lib/match.ts, match.test.ts, types.ts
• Integrated into ResultsView.tsx to conditionally render inline diff mode when baseline and current params are detected.
• Includes basic sample data under public/diff-sample/ for local testing.
⸻
Testing
1. Place test JSONs in public/diff-sample/:
• baseline.json
• current.json
2. Run dev server and open
/eval?baseline=/diff-sample/baseline.json¤t=/diff-sample/current.json
3. Verify:
• Correct summary chip counts
• Table rows reflect expected added/removed/changed items
• Drawer shows unified diff output
• “Show only changed” filters rows correctly
⸻
Follow-ups
• Add color-coded summary chips for improved readability
• Add word-level diff highlighting
• Add copy buttons in drawer
• Add scroll-into-view behavior on row selection