╔══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THE BRICK EXTENDS TO GIT ║
║ ║
║ Git viewers transform terminal commands into rich visual documents. ║
║ Each viewer type serves a specific purpose in your Git workflow. ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
What Are Git Viewers?
╔══════════════════════════════════════════════════════════════════════════════╗
║ FROM TERMINAL TO VISUAL DOCUMENTS ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ TERMINAL VISUAL DOCUMENT ║
║ ┌──────────────────┐ ┌──────────────────┐ ║
║ │ │ │ │ ║
║ │ $ git log │ ──────→ │ Commit Graph │ ║
║ │ $ git diff │ │ Side-by-Side │ ║
║ │ $ git blame │ │ Author Colors │ ║
║ │ │ │ │ ║
║ └──────────────────┘ └──────────────────┘ ║
║ Text output only Rich visualization ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
The Viewer Family
╔══════════════════════════════════════════════════════════════════════════════╗
║ GIT VIEWER TYPE HIERARCHY ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ GitBaseViewer ║
║ (shared foundation) ║
║ │ ║
║ ┌───────────────────┼───────────────────┐ ║
║ │ │ │ │ │ ║
║ ▼ ▼ ▼ ▼ ▼ ║
║ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ║
║ │ Diff │ │Commit│ │Branch│ │Blame │ │ Heat │ ║
║ │ │ │ │ │ │ │ │ │ map │ ║
║ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ ║
║ │ │ │ │ │ ║
║ ▼ ▼ ▼ ▼ ▼ ║
║ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ║
║ │Stash │ │Reflog│ │Impact│ │Remote│ │Time- │ ║
║ │ │ │ │ │ │ │Status│ │ line │ ║
║ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ ║
║ ║
║ All viewers share: CodexMono typography, consistent colors, same controls ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
- Consistent look and feel across all viewers
- Same keyboard shortcuts work everywhere
- Settings apply to all viewers at once
Viewer Categories
╔══════════════════════════════════════════════════════════════════════════════╗
║ VIEWER CATEGORIES ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ CHANGE VIEWERS HISTORY VIEWERS ║
║ See what changed See when and who ║
║ ┌──────────────────────┐ ┌──────────────────────┐ ║
║ │ │ │ │ ║
║ │ Diff Viewer │ │ Commit Search │ ║
║ │ Line-by-line view │ │ Find any commit │ ║
║ │ │ │ │ ║
║ │ Hunk Viewer │ │ Author Timeline │ ║
║ │ Grouped changes │ │ Activity over time │ ║
║ │ │ │ │ ║
║ └──────────────────────┘ └──────────────────────┘ ║
║ ║
║ STRUCTURE VIEWERS ANALYSIS VIEWERS ║
║ See how code is organized See patterns and insights ║
║ ┌──────────────────────┐ ┌──────────────────────┐ ║
║ │ │ │ │ ║
║ │ Branch Diagram │ │ Heatmap │ ║
║ │ Visual branch tree │ │ Hotspots in code │ ║
║ │ │ │ │ ║
║ │ Remote Status │ │ Impact Analysis │ ║
║ │ Sync with remote │ │ Change magnitude │ ║
║ │ │ │ │ ║
║ └──────────────────────┘ └──────────────────────┘ ║
║ ║
║ RECOVERY VIEWERS OVERVIEW VIEWERS ║
║ Recover lost work Big picture view ║
║ ┌──────────────────────┐ ┌──────────────────────┐ ║
║ │ │ │ │ ║
║ │ Stash Viewer │ │ Dashboard │ ║
║ │ Saved changes │ │ All stats at once │ ║
║ │ │ │ │ ║
║ │ Reflog Viewer │ │ Project Summary │ ║
║ │ Every action log │ │ Health check │ ║
║ │ │ │ │ ║
║ └──────────────────────┘ └──────────────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
15 Git Viewers at a Glance
╔══════════════════════════════════════════════════════════════════════════════╗
║ ALL GIT VIEWERS ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ VIEWER WHAT IT SHOWS WHEN TO USE ║
║ ─────────────── ─────────────────────────── ──────────────── ║
║ ║
║ Dashboard Overall repository status Start of day ║
║ Blame Who wrote each line Find author ║
║ Commit Single commit details Review change ║
║ Commit Search Find commits by message Looking for code ║
║ Branch Current branch info Check status ║
║ Branch Diagram Visual branch tree Merge planning ║
║ Stash Saved work-in-progress Recover work ║
║ Author Timeline Activity over time Team review ║
║ Project Summary Repository health Project review ║
║ Heatmap Code hotspots Find busy files ║
║ Hunk Grouped code changes Quick diff review ║
║ Impact Change magnitude Risk assessment ║
║ Reflog All Git operations Recover lost ║
║ Remote Status Sync with server Before push/pull ║
║ Operation Timeline Git action history Debug workflow ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
How Viewers Load
╔══════════════════════════════════════════════════════════════════════════════╗
║ VIEWER LOADING FLOW ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ 1. You select a viewer ║
║ ┌──────────────────┐ ║
║ │ "Show Blame" │ ║
║ └────────┬─────────┘ ║
║ │ ║
║ ▼ ║
║ 2. Only that viewer code loads (lazy loading) ║
║ ┌──────────────────┐ ║
║ │ Load on demand │ ← Keeps app fast ║
║ └────────┬─────────┘ ║
║ │ ║
║ ▼ ║
║ 3. Viewer initializes with your settings ║
║ ┌──────────────────┐ ║
║ │ Apply font, │ ║
║ │ colors, size │ ║
║ └────────┬─────────┘ ║
║ │ ║
║ ▼ ║
║ 4. Data fetched from Rust backend ║
║ ┌──────────────────┐ ║
║ │ Git operations │ ← Fast native performance ║
║ └────────┬─────────┘ ║
║ │ ║
║ ▼ ║
║ 5. Visual document rendered ║
║ ┌──────────────────┐ ║
║ │ Your Git view │ ║
║ └──────────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
Shared Settings
╔══════════════════════════════════════════════════════════════════════════════╗
║ VIEWER SETTINGS ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ All Git viewers share the same settings: ║
║ ║
║ ┌───────────────────┬──────────────────┐ ║
║ │ SETTING │ PURPOSE │ ║
║ ├───────────────────┼──────────────────┤ ║
║ │ Font Size │ Readability │ ║
║ │ Font Weight │ Bold/Light │ ║
║ │ Line Height │ Spacing │ ║
║ │ Opacity │ Contrast │ ║
║ │ Font Family │ CodexMono │ ║
║ └───────────────────┴──────────────────┘ ║
║ ║
║ Change once, applies everywhere. ║
║ ║
║ Font Stack: ║
║ ┌──────────────────────────────────────────────────┐ ║
║ │ CodexMono →→ CodexMono EA →→ monospace │ ║
║ ├──────────────────────────────────────────────────┤ ║
║ │ Primary East Asian System │ ║
║ │ Fallback Fallback │ ║
║ └──────────────────────────────────────────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
Icon System
╔══════════════════════════════════════════════════════════════════════════════╗
║ VIEWER ICONS ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ STATUS GIT ACTIONS ║
║ ┌────────────────┐ ┌────────────────┐ ║
║ │ ✓ Success │ │ Y Branch │ ║
║ │ ! Warning │ │ <> Merge │ ║
║ │ X Error │ │ +- Diff │ ║
║ │ O Loading │ │ @ Commit │ ║
║ └────────────────┘ └────────────────┘ ║
║ ║
║ ATTRIBUTION NAVIGATION ║
║ ┌────────────────┐ ┌────────────────┐ ║
║ │ [AI] Bot work │ │ > Expand │ ║
║ │ [H] Human work │ │ v Collapse │ ║
║ │ ~ Activity │ │ [] Folder │ ║
║ │ * New │ │ - File │ ║
║ └────────────────┘ └────────────────┘ ║
║ ║
║ Icons powered by Lucide - consistent across all viewers. ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
Viewer Communication
╔══════════════════════════════════════════════════════════════════════════════╗
║ HOW VIEWERS TALK ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Viewers communicate through events: ║
║ ║
║ Branch Diagram Commit Search ║
║ ┌──────────────────┐ ┌──────────────────┐ ║
║ │ │ "branch │ │ ║
║ │ Select branch │ ────selected───→ │ Filter commits │ ║
║ │ │ │ │ ║
║ └──────────────────┘ └──────────────────┘ ║
║ ║
║ Diff Viewer Blame Viewer ║
║ ┌──────────────────┐ ┌──────────────────┐ ║
║ │ │ "file │ │ ║
║ │ Click file │ ────selected───→ │ Show blame │ ║
║ │ │ │ │ ║
║ └──────────────────┘ └──────────────────┘ ║
║ ║
║ This enables coordinated views without tight coupling. ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
The Extended Brick
╔══════════════════════════════════════════════════════════════════════════════╗
║ TERMINAL TO DOCUMENT ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ The "Brick" is our fundamental unit of display: ║
║ ║
║ TERMINAL BRICK DOCUMENT BRICK ║
║ ┌──────────────────┐ ┌──────────────────┐ ║
║ │ │ │ │ ║
║ │ Raw PTY output │ extends to │ Rich Git view │ ║
║ │ ANSI codes │ ─────────────→ │ Syntax colors │ ║
║ │ xterm.js buffer │ │ Interactive UI │ ║
║ │ │ │ │ ║
║ └──────────────────┘ └──────────────────┘ ║
║ ║
║ Same rendering pipeline: ║
║ - CodexMono typography ║
║ - Consistent cell spacing ║
║ - Predictable visual alignment ║
║ ║
║ Different content types, same visual experience. ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
Summary
╔═══════════════════════════════════════════════════════════════════════════════╗
║ KEY TAKEAWAYS ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ 15 Git Viewers ║
║ ┌────────────────────────────────────────────────────────────────┐ ║
║ │ Dashboard │ Blame │ Commit │ Search │ Branch │ Diagram │ Stash │ ║
║ │ Timeline │ Summary │ Heatmap │ Hunk │ Impact │ Reflog │ Remote │ ║
║ │ Operation Timeline │ ║
║ └────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Shared Foundation ║
║ ┌────────────────────────────────────────────────────────────────┐ ║
║ │ All viewers inherit from GitBaseViewer │ ║
║ │ Same settings, same typography, same icons │ ║
║ │ Lazy loading for performance │ ║
║ └────────────────────────────────────────────────────────────────┘ ║
║ ║
║ The Brick Paradigm ║
║ ┌────────────────────────────────────────────────────────────────┐ ║
║ │ Terminal and document viewers share visual foundation │ ║
║ │ CodexMono ensures consistent character alignment │ ║
║ │ Predictable experience across all viewer types │ ║
║ └────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Related
Git Viewer Implementations
Detailed look at Diff, Commit, and Branch Diagram viewers
VariableMD Overview
The font that powers Git viewer alignment