> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Git Viewer Implementations > How Diff, Commit, and Branch viewers transform Git data into visual documents # Git Viewer Implementations ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ THE CENTER ║ ║ ║ ║ "What you see in `git log --graph` is what you see in the viewer." ║ ║ ║ ║ CodexMono bridges Terminal to Document: ║ ║ ║ ║ Terminal Output CodexMono Font Visual Document ║ ║ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ║ ║ │ git show │ ───→ │ Fixed Width │ ───→ │ Diff Viewer │ ║ ║ │ git log │ ───→ │ Same Glyphs │ ───→ │ Commit View │ ║ ║ │ git branch │ ───→ │ Every Char │ ───→ │ Branch Map │ ║ ║ └──────────────┘ └──────────────┘ └──────────────┘ ║ ║ ║ ║ The Brick guarantees: Terminal → Document → Trust ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` **THE CENTER**: "VariableMD extends the Brick from Terminal to Documents" *** ## Diff Viewer The Diff Viewer transforms raw Git differences into a visual comparison. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ HOW DIFF VIEWER WORKS ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Your Code Change ║ ║ │ ║ ║ ▼ ║ ║ ┌────────────────┐ ║ ║ │ Git Diff Data │ ← Raw change information ║ ║ └────────────────┘ ║ ║ │ ║ ║ ▼ ║ ║ ┌────────────────┐ ║ ║ │ Rust Parser │ ← Fast, accurate parsing ║ ║ └────────────────┘ ║ ║ │ ║ ║ ┌────┴────┬────┐ ║ ║ │ │ │ ║ ║ ▼ ▼ ▼ ║ ║ Unified Side Word ║ ║ View View Diff ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### View Modes ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ UNIFIED VIEW ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ All changes in a single column: ║ ║ ║ ║ ┌────────────────────────────────────────────────────────────────────┐ ║ ║ │ @@ -10,5 +10,7 @@ │ ║ ║ ├────────────────────────────────────────────────────────────────────┤ ║ ║ │ 10 │ 10 │ context line │ ║ ║ │ 11 │ │ - deleted line [RED] │ ║ ║ │ │ 11 │ + added line [GREEN] │ ║ ║ │ 12 │ 12 │ context line │ ║ ║ │ │ 13 │ + another addition [GREEN] │ ║ ║ └────────────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ Best for: Sequential reading, smaller changes ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ SIDE-BY-SIDE VIEW ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Old and new versions displayed in parallel: ║ ║ ║ ║ ┌────────────────────────────────┬───────────────────────────────────┐ ║ ║ │ OLD │ NEW │ ║ ║ ├────────────────────────────────┼───────────────────────────────────┤ ║ ║ │ 10 │ context line │ 10 │ context line │ ║ ║ │ 11 │ deleted line [RED] │ │ │ ║ ║ │ │ │ 11 │ added line [GREEN] │ ║ ║ │ 12 │ context line │ 12 │ context line │ ║ ║ │ │ │ 13 │ another add [GREEN] │ ║ ║ └────────────────────────────────┴───────────────────────────────────┘ ║ ║ ║ ║ Best for: Comparing complex changes, code review ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### Word-Level Diff One of the most powerful features: highlighting exactly what changed within a line. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ WORD-LEVEL DIFF ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Before: const value = 42; ║ ║ After: const value = 100; ║ ║ ║ ║ ┌─────────────────────────────────────────────────────────────┐ ║ ║ │ │ ║ ║ │ Line-level diff: │ ║ ║ │ - const value = 42; ← Entire line marked red │ ║ ║ │ + const value = 100; ← Entire line marked green │ ║ ║ │ │ ║ ║ └─────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ ┌─────────────────────────────────────────────────────────────┐ ║ ║ │ │ ║ ║ │ Word-level diff: │ ║ ║ │ const value = [42]; ← Only "42" highlighted red │ ║ ║ │ const value = [100]; ← Only "100" highlighted green │ ║ ║ │ │ ║ ║ └─────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ Result: See exactly which characters changed ║ ║ Accuracy: 99.88% (matches Git's native algorithm) ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### AI Attribution Integration See how much AI contributed to each code section. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ AI ATTRIBUTION ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ ┌────────────────────────────────────────────────────────────────────────┐ ║ ║ │ @@ -10,5 +10,7 @@ [Bot] 45% │ ║ ║ └────────────────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ Color Scale: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ 0-25% │ Green │ Low AI (mostly human written) │ ║ ║ │ 26-50% │ Yellow │ Medium AI collaboration │ ║ ║ │ 51-75% │ Accent │ High AI assistance │ ║ ║ │ 76-100% │ Purple │ AI-dominant (review recommended) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` *** ## Commit Viewer The Commit Viewer displays all details of a single commit. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ COMMIT VIEWER LAYOUT ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ ┌───────────────────────────────────────────────────────────────────────┐ ║ ║ │ │ ║ ║ │ Commit: a3f5c2d Author: John Doe │ ║ ║ │ Message: Fix authentication bug Date: 2025-01-15 │ ║ ║ │ │ ║ ║ ├───────────────────────────────────────────────────────────────────────┤ ║ ║ │ │ ║ ║ │ Statistics: +120 additions -15 deletions 3 files changed │ ║ ║ │ │ ║ ║ ├───────────────────────────────────────────────────────────────────────┤ ║ ║ │ │ ║ ║ │ Changed Files: │ ║ ║ │ ┌────────────┐ ┌─────────────┐ ┌─────────────┐ │ ║ ║ │ │ [M] auth.ts│ │ [A] test.ts │ │ [D] old.ts │ │ ║ ║ │ │ +50 -10 │ │ +70 -0 │ │ +0 -5 │ │ ║ ║ │ └────────────┘ └─────────────┘ └─────────────┘ │ ║ ║ │ │ ║ ║ └───────────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### File Status Badges ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ FILE STATUS COLORS ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ ┌────────────────────────────────────────────────────────────────────┐ ║ ║ │ [M] Modified │ Yellow │ File was changed │ ║ ║ │ [A] Added │ Green │ New file created │ ║ ║ │ [D] Deleted │ Red │ File was removed │ ║ ║ │ [R] Renamed │ Blue │ File was moved or renamed │ ║ ║ │ [U] Unmerged │ Red │ Merge conflict (needs resolution) │ ║ ║ └────────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### Click-to-Navigate ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ INTERACTIVE NAVIGATION ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Click any file to see its diff: ║ ║ ║ ║ ┌────────────────────┐ ║ ║ │ [M] auth.ts +50 -10│ ← Click ║ ║ └────────────────────┘ ║ ║ │ ║ ║ ▼ ║ ║ ┌────────────────────┐ ║ ║ │ Diff Viewer │ ← Opens with full file diff ║ ║ │ (Side-by-Side) │ ║ ║ └────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` *** ## Branch Diagram Viewer The most sophisticated viewer: transforms branch relationships into interactive visualizations. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ BRANCH DIAGRAM OVERVIEW ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Multiple ways to visualize your branches: ║ ║ ║ ║ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ ║ ║ │ Heatmap │ │ Timeline │ │ Impact │ ║ ║ │ (Activity by │ │ (Swimlane │ │ (Branch │ ║ ║ │ day/branch) │ │ view) │ │ importance) │ ║ ║ └────────────────┘ └────────────────┘ └────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### Time-Based Heatmap See when each branch was active: ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ ACTIVITY HEATMAP ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Jan 1 Jan 2 Jan 3 Jan 4 Jan 5 Jan 6 Jan 7 ║ ║ ┌────────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┐ ║ ║ │ main │ [] │ [] │ [] │ [] │ [] │ [] │ [] │ ║ ║ ├────────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤ ║ ║ │ feat-a │ │ [] │ [] │ [] │ [] │ │ │ ║ ║ ├────────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤ ║ ║ │ feat-b │ │ │ │ [] │ [] │ [] │ [] │ ║ ║ ├────────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤ ║ ║ │ bugfix │ │ │ │ │ │ [] │ │ ║ ║ └────────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┘ ║ ║ ║ ║ Legend: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ [] = Commit on this day (colored by branch) │ ║ ║ │ = No activity (gray) │ ║ ║ │ [B] = Merge point (shows connection between branches) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### OKLab Color Science Branch colors are generated using OKLab color space for perceptually uniform distinction. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ WHY OKLAB COLORS? ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Problem: Traditional color generation (HSL) ║ ║ ║ ║ ┌────┬────┬────┬────┬────┬────┐ ║ ║ │ R │ O │ Y │ G │ B │ P │ ← Some colors look similar ║ ║ └────┴────┴────┴────┴────┴────┘ Yellow vs Green hard to distinguish ║ ║ ║ ║ Solution: OKLab color space ║ ║ ║ ║ ┌────┬────┬────┬────┬────┬────┐ ║ ║ │ │ │ │ │ │ │ ← All colors equally distinct ║ ║ └────┴────┴────┴────┴────┴────┘ Even in grayscale or colorblind view ║ ║ ║ ║ Result: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ Traditional: Some branches hard to tell apart (variance: 5.7) │ ║ ║ │ OKLab: All branches clearly distinct (variance: 1.3) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### Merge Line Visualization Merge relationships shown with smooth gradient curves: ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ MERGE VISUALIZATION ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ ┌──────────┐ ┌──────────┐ ║ ║ │ feat-a │ │ main │ ║ ║ │ (source) │ │ (target) │ ║ ║ └────┬─────┘ └────┬─────┘ ║ ║ │ │ ║ ║ │ Gradient Curve │ ║ ║ │ (color blends from source to target) │ ║ ║ └~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~──────┘ ║ ║ ║ ║ The gradient shows the merge direction: ║ ║ - Starts with source branch color ║ ║ - Smoothly transitions to target branch color ║ ║ - OKLab ensures smooth visual blend ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### Impact Analysis Understand which branches matter most: ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ IMPACT SCORES ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ ┌───────────────────────────────────┐ ┌───────────────────────────────┐ ║ ║ │ main [Active] │ │ feat-auth [Stale] │ ║ ║ ├───────────────────────────────────┤ ├───────────────────────────────┤ ║ ║ │ Commits [========] 156 │ │ Commits [==== ] 45 │ ║ ║ │ Merges [====== ] 12 │ │ Merges [= ] 2 │ ║ ║ │ Fresh [========] │ │ Fresh [= ] │ ║ ║ ├───────────────────────────────────┤ ├───────────────────────────────┤ ║ ║ │ Impact Score 87% │ │ Impact Score 34% │ ║ ║ └───────────────────────────────────┘ └───────────────────────────────┘ ║ ║ ║ ║ Impact Score combines: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ 40% - Commit count (activity level) │ ║ ║ │ 30% - Merge connections (integration importance) │ ║ ║ │ 30% - Freshness (recent vs stale) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` *** ## CodexMono: The Typography Bridge CodexMono ensures visual consistency from Terminal to Document. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ CODEXMONO: THE BRICK ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Why monospace matters for Git viewers: ║ ║ ║ ║ Terminal Document ║ ║ ┌──────────────────┐ ┌──────────────────┐ ║ ║ │ a3f5c2d │ │ a3f5c2d │ ║ ║ │ 7 chars = 50.4px │ │ 7 chars = 50.4px │ ← EXACT same width ║ ║ └──────────────────┘ └──────────────────┘ ║ ║ ║ ║ This guarantees: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ - Commit hashes align perfectly │ ║ ║ │ - Diff content preserves code formatting │ ║ ║ │ - Branch names stay readable at any size │ ║ ║ │ - File paths display with consistent spacing │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` ### Usage Across Viewers ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ WHERE CODEXMONO IS USED ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Diff Viewer: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ - Code content (every line of diff) │ ║ ║ │ - Line numbers (gutter alignment) │ ║ ║ │ - Hunk headers (@@ markers) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ Commit Viewer: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ - Commit hashes (a3f5c2d displays) │ ║ ║ │ - File paths (src/modules/...) │ ║ ║ │ - Statistics (+120 -15) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ Branch Diagram: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ - Branch names (main, feature-auth) │ ║ ║ │ - Commit labels (node identifiers) │ ║ ║ │ - Timeline text (date/time markers) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` *** ## THE CENTER: Terminal to Document THE CENTER principle: Git terminal commands become interactive visualizations. ``` ╔══════════════════════════════════════════════════════════════════════════════╗ ║ TERMINAL COMMANDS → VISUAL VIEWS ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Terminal Commands Branch Diagram Viewer ║ ║ ┌────────────────────────────┐ ┌────────────────────────────┐ ║ ║ │ │ │ │ ║ ║ │ $ git branch -a │ ──→ │ Interactive branch chips │ ║ ║ │ $ git log --graph │ ──→ │ SVG DAG visualization │ ║ ║ │ $ git merge-base A B │ ──→ │ Merge line gradients │ ║ ║ │ $ git log --after=... │ ──→ │ Time-based heatmap │ ║ ║ │ $ git shortlog -sn │ ──→ │ Impact score cards │ ║ ║ │ │ │ │ ║ ║ │ (5+ separate commands, │ ──→ │ (Single unified view, │ ║ ║ │ text output only, │ ──→ │ interactive graphics, │ ║ ║ │ no visualization) │ ──→ │ filtering & zoom) │ ║ ║ │ │ │ │ ║ ║ └────────────────────────────┘ └────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ ``` *** ## Verified Results ``` ╔═══════════════════════════════════════════════════════════════════════════════╗ ║ VERIFICATION SUMMARY ║ ╠═══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ CodexMono Width Consistency: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ Terminal: 7.2px per character │ ║ ║ │ Document: 7.2px per character │ ║ ║ │ Delta: 0.0px (perfect match) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ Word-Level Diff Accuracy: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ Test: 500 real commits, 12,847 diff lines │ ║ ║ │ Result: 99.88% accuracy (matches Git's native algorithm) │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ OKLab Color Uniformity: ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ Traditional HSL: Some colors hard to distinguish (variance: 5.7)│ ║ ║ │ OKLab: All colors equally distinct (variance: 1.3)│ ║ ║ │ Improvement: 4.4x better uniformity │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════╝ ``` *** ## Key Principles > "What you see in `git log --graph` is what you see in the viewer." > \-- **Terminal-Document Trust Contract** > "The Brick guarantees: Terminal → Document → Trust." > \-- **CodexMono Foundation Principle** > "Equal steps in lightness produce equal perceived brightness changes." > \-- **OKLab Perceptual Uniformity** *** **Summary**: * **Diff Viewer**: Unified and side-by-side views with word-level diff and AI attribution * **Commit Viewer**: Complete commit details with interactive file navigation * **Branch Diagram**: Time-based heatmap, OKLab colors, merge visualization, impact scores * **CodexMono**: Typography bridge ensuring Terminal-to-Document visual consistency *** *"The Brick extends from Terminal to Document: What aligns in git output MUST align in visualization."*