Git Viewer Implementations
Copy
+==============================================================================+
| |
| 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.Copy
+==============================================================================+
| HOW DIFF VIEWER WORKS |
+==============================================================================+
| |
| Your Code Change |
| | |
| v |
| +----------------+ |
| | Git Diff Data | <-- Raw change information |
| +----------------+ |
| | |
| v |
| +----------------+ |
| | Rust Parser | <-- Fast, accurate parsing |
| +----------------+ |
| | |
| +----+----+----+ |
| | | | |
| v v v |
| Unified Side Word |
| View View Diff |
| |
+==============================================================================+
View Modes
- Unified View
- Side-by-Side View
Copy
+==============================================================================+
| 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 |
| |
+==============================================================================+
Copy
+==============================================================================+
| 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.Copy
+==============================================================================+
| 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.Copy
+==============================================================================+
| 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.Copy
+==============================================================================+
| 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
Copy
+==============================================================================+
| 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
Copy
+==============================================================================+
| INTERACTIVE NAVIGATION |
+==============================================================================+
| |
| Click any file to see its diff: |
| |
| +--------------------+ |
| | [M] auth.ts +50 -10| <-- Click |
| +--------------------+ |
| | |
| v |
| +--------------------+ |
| | Diff Viewer | <-- Opens with full file diff |
| | (Side-by-Side) | |
| +--------------------+ |
| |
+==============================================================================+
Branch Diagram Viewer
The most sophisticated viewer: transforms branch relationships into interactive visualizations.Copy
+==============================================================================+
| 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:Copy
+==============================================================================+
| 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.Copy
+==============================================================================+
| 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:Copy
+==============================================================================+
| 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:Copy
+==============================================================================+
| 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.Copy
+==============================================================================+
| 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
Copy
+==============================================================================+
| 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.
Copy
+==============================================================================+
| 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
Copy
+==============================================================================+
| 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.”