Skip to main content
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║     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                   ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝
Git viewers take raw Git data and present it visually. Instead of reading text in your terminal, you see interactive, color-coded documents.

​
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  ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝
All Git viewers inherit from a common foundation. This means:
  • 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   │                                                    ║
║      └──────────────────┘                                                    ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝
Viewers load only when needed. This keeps the app fast even with 15+ viewer types available.

​
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.                           ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝
Git viewers extend the terminal experience. What works in the terminal (CodexMono alignment, consistent spacing) works in Git viewers too.

​
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                 │          ║
║   └────────────────────────────────────────────────────────────────┘          ║
║                                                                               ║
╚═══════════════════════════════════════════════════════════════════════════════╝

Git Viewer Implementations

Detailed look at Diff, Commit, and Branch Diagram viewers

CodexMono Typography

The font that powers Git viewer alignment