feat: PR diff visualization with graph-annotated code changes#2
Open
QusayNaserFHS wants to merge 15 commits intomainfrom
Open
feat: PR diff visualization with graph-annotated code changes#2QusayNaserFHS wants to merge 15 commits intomainfrom
QusayNaserFHS wants to merge 15 commits intomainfrom
Conversation
Add a complete diff visualization system that shows code changes between branches overlaid on the knowledge graph. Changed symbols are highlighted in amber on the graph, with affected execution flows traced and risk-assessed. Backend: - POST /api/diff — structured diff with hunks, symbol-to-line mapping, process impact tracing, and risk assessment - GET /api/branches — list available branches/tags for comparison - parseDiffOutput() for unified diff parsing - Line-range precision: symbols marked as directly_changed vs in_changed_file Frontend: - DiffSelector component (branch picker dropdown in header) - DiffPanel component (file list + unified diff view with symbol annotations) - Amber highlighting layer in useSigma nodeReducer/edgeReducer - Diff mode state management in useAppState - Extracted shared syntax-utils from CodeReferencesPanel Testing: - Playwright e2e tests for backend API endpoints (6 passing) - Frontend UI tests (skipped due to COEP cross-origin limitations in dev) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Decompose DiffPanel into a modular component architecture with 10 major
UX improvements for professional-grade code diff visualization.
1. Smart Diff Readability
- Word-level inline diff highlighting (mark changed tokens)
- Change classification: logic (amber), naming (blue), formatting (gray)
- Paired line analysis with structural token comparison
- "Hide formatting" toggle to reduce noise
2. Dual + Unified Hybrid View
- Side-by-side split view with synchronized scrolling
- Toggle between unified and split in toolbar
- Empty placeholder rows for alignment in split mode
3. Change Grouping by Symbol
- Group hunks under their parent function/class
- Collapsible symbol sections with type badges
- "Other Changes" group for unmatched hunks
4. Timeline + Evolution View
- Horizontal commit timeline with scrubbable dots
- "Play" mode: auto-advance through commits (2s interval)
- Click any commit to view its isolated diff
5. Inline Actions
- Copy hunk (appears on hover)
- Copy file path
- Search highlight within diff content
6. AI-Powered Diff Summary (Heuristic)
- TL;DR summary generated from symbol analysis
- Risk explanation based on impact depth
- Per-file summaries with changed symbol names
- Collapsible panel with toggle
7. Visual Indicators & Signals
- File badges: LARGE (>100 lines), breaking (AlertTriangle), refactor
- File border color based on symbol risk level
- Per-hunk warning icons for directly changed symbols
- Icon legend in file list
8. Navigation UX
- Minimap: canvas-based vertical overview with viewport indicator
- Keyboard: j/k (next/prev hunk), n/p (next/prev file)
- Jump to next/prev change buttons
- File-type filter chips (auto-detected extensions)
- Search within diff
9. Collapsible Unchanged Blocks
- Auto-collapse context runs > 8 lines (configurable)
- Show first 3 + last 3 lines with "N lines hidden" expander
- Collapse threshold toggle in toolbar
10. Performance UX
- react-virtuoso and diff packages added
- Smooth scroll-to-top on file selection
- Skeleton loading placeholders in file list
- Minimap click-to-seek for fast navigation
Architecture: diff/ module with 11 sub-components, diff-utils library,
useDiffPreferences hook with localStorage persistence.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Critical: - Show All button now preserves original base/head refs using a ref (previously lost after timeline navigation) High: - Commit tooltip no longer clipped by overflow container — rendered as floating element outside the scrollable area with hover state - Search highlight regex.test() replaced with index-based matching (regex global flag caused alternating false matches) Medium: - Minimap canvas height now responsive via ResizeObserver (was hardcoded 400px) - Split view scroll sync uses percentage-based calculation (handles different content heights between old/new panels) - Collapse range calculation validates start < end (prevents empty ranges) Low: - Risk color fallback for undefined riskLevel in summary header - Timeline interval cleanup on commits prop change (prevents stale intervals) - Toolbar gets scrollbar-thin for visibility when overflowing - Collapsed context ranges can now be re-collapsed after expanding (adds small "collapse" button at range boundaries) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…, intent layer
Transform the diff viewer into a code understanding system with 10 UX
improvements addressing cognitive overload, graph↔diff disconnection,
and missing actionability.
1. View Modes (press 1/2/3):
- Focus (1): DiffPanel full-width, graph/panels hidden
- Structure (2): Graph + floating stats overlay only
- Review (3): Side-by-side diff + graph (default)
2. Bidirectional Diff ↔ Graph:
- Click graph node → auto-navigate to file + scroll to symbol's hunk
- Focused symbol gets pulsing amber glow in nodeReducer
- DiffFileContent watches diffFocusedSymbolId for scroll-to-hunk
3. Granular Risk Chips:
- [Core Logic] [Wide Impact] [Refactor] [Breaking] [Config] [UI Only]
- Clickable: filters file list to matching files
- Categorized from symbol types, process count, file extensions
4. Smart File Grouping:
- Support for flat/module/changeType/risk grouping
- File list accepts groupBy prop
5. Intent Layer:
- Per-file intent labels in file list ("Modifies validateUser, refreshToken")
- Per-hunk intent labels ("[Import change]", "[Function signature change]")
- Heuristic detection of import/class/function/return patterns
6. Diff Readability:
- Glow on changed tokens (text-shadow on word-diff marks)
- Faded context lines (opacity-60)
- Heat bar per file (green-red gradient for add/del ratio)
- Deleted files: red tint + strikethrough
- Added files: green tint
7. Graph Controls for Diff Mode:
- "Only Impacted" toggle button
- Depth slider (1-3 hops from changed nodes)
- Controls appear in graph top-right when diff active
8. Guided Review Flow:
- "Start Guided Review" CTA on initial load
- 4-step wizard: Summary → High Risk → Walk Files → Complete
- Bottom bar with step indicators and Next/Prev navigation
9. Visual Hierarchy:
- Stronger active file borders
- Status-colored file backgrounds
- Risk badge prominently styled in header
- View mode pills with keyboard hints
10. DiffStructureOverlay:
- Compact floating card for Structure mode
- Stats grid + risk chips + "Review Diff" action
New files: DiffStructureOverlay.tsx, GuidedReview.tsx
New state: diffViewMode, diffFocusedSymbolId, diffGraphFilter,
diffGraphDepth, diffRiskChipFilter, diffFileGrouping,
reviewFlowActive, reviewFlowStep
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The useEffect for view mode keyboard shortcuts (1/2/3) was placed AFTER conditional returns (onboarding/loading), violating React's Rules of Hooks. Moved it before all conditional returns alongside other hooks. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…mmary, graph filtering - Add BranchDiffDialog: shown after server connect, lets user pick 2 branches before graph loads. Compare & Load filters to impacted nodes, Skip shows full graph. - Collapsible DiffPanel: slide-out with collapse/expand button, no background overlay. - Condensed summary: one-liner with "see more..." for full stats/risk chips. - Graph filtering: only File nodes visible by default, impacted-only mode hides non-diff nodes, depth slider starts at 0 (changed only). - Inject temporary sigma nodes for diff files missing from knowledge graph. - Show All Nodes banner + inline toggle in summary header. - Node selection shows connected nodes, hides others, with forceLabel on neighbors. - 10 Playwright e2e tests covering all features. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds support for ?server, ?base, and ?head URL query params to enable external embedding (e.g., dashboard iframe) to auto-connect to a GitNexus server and auto-load a branch diff without user interaction. - Auto-connect: ?server=localhost:4747 triggers server connection on load - Auto-diff: ?base=master&head=feature-branch skips the branch picker and directly starts the diff after connection completes - Fixed timing bug: auto-diff effect now guards on pendingServerResult to ensure commitServerConnection has the data it needs - Fixed missing DiffFile import in diff-utils.ts
Replace auto-generated GitNexus tool reference with comprehensive developer documentation covering architecture, monorepo structure, code patterns, critical rules, indexing pipeline, testing strategy, and MCP tools/resources.
… shortcuts Phase 1 — Graph Readability: - Node sizing by change magnitude (log2 scale, capped at 3x) - Label collision avoidance in diff mode (larger grid, forceLabel for top files) - Edge type differentiation (CALLS=amber, IMPORTS=blue, EXTENDS=purple) Phase 2 — Navigation & Interaction: - Bidirectional graph-diff linking (click node → scroll to file, click file → zoom to node) - Keyboard shortcuts: [/] file nav, ? shortcuts dialog, f toggle panel, Escape exit - File list sort dropdown (by changes, risk, alphabetical, directory) Phase 3 — Visual Polish: - Selected node glow ring (double ring, 1.8x size, brighter color) - Fix "unknowns" → "symbols" in diff summary - Sidebar icon tooltips on all graph controls
Graph: node sizing by change magnitude, edge type colors, label collision avoidance Navigation: bidirectional graph-diff linking, keyboard shortcuts ([/] ?/f/Escape) File list: sort dropdown (changes/risk/alpha/directory) Visual: selected node glow ring, sidebar tooltips Package: gitnexus-web is now installable with npm, --mode embedded for subpath deployment
QusayNaserFHS
force-pushed
the
feat/pr-diff-visualization
branch
from
9b5288d to
19f1ff7
Compare
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.
Summary
What's New
Backend (
gitnexus/)POST /api/diff— structured diff with hunks, symbol-to-line mapping, process impact, risk assessmentGET /api/branches— list branches/tags for comparisondirectly_changedvsin_changed_file)Frontend (
gitnexus-web/)Core Diff Viewer
Graph Integration
Intelligence
[Core Logic][Wide Impact][Breaking][Config]— clickable filtersUX
Architecture
src/components/diff/module with 11 sub-componentssrc/lib/diff-utils.ts— classification, word-diff, pairing, grouping, intent, risk categorizationsrc/hooks/useDiffPreferences.ts— localStorage-persisted preferencesTest plan
npx playwright test— 6 API tests pass🤖 Generated with Claude Code