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
- Side-by-Side View
╔══════════════════════════════════════════════════════════════════════════════╗
║ 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.”