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)                                      |
|                              |                                                |
|          +-------------------+-------------------+                            |
|          |         |         |         |         |                            |
|          v         v         v         v         v                            |
|       +------+  +------+  +------+  +------+  +------+                       |
|       | Diff |  |Commit|  |Branch|  |Blame |  | Heat |                       |
|       |      |  |      |  |      |  |      |  | map  |                       |
|       +------+  +------+  +------+  +------+  +------+                       |
|          |         |         |         |         |                            |
|          v         v         v         v         v                            |
|       +------+  +------+  +------+  +------+  +------+                       |
|       |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"    |                                                     |
|      +--------+---------+                                                     |
|               |                                                               |
|               v                                                               |
|   2. Only that viewer code loads (lazy loading)                               |
|      +------------------+                                                     |
|      |  Load on demand  |  <-- Keeps app fast                                |
|      +--------+---------+                                                     |
|               |                                                               |
|               v                                                               |
|   3. Viewer initializes with your settings                                    |
|      +------------------+                                                     |
|      |  Apply font,     |                                                     |
|      |  colors, size    |                                                     |
|      +--------+---------+                                                     |
|               |                                                               |
|               v                                                               |
|   4. Data fetched from Rust backend                                           |
|      +------------------+                                                     |
|      |  Git operations  |  <-- Fast native performance                       |
|      +--------+---------+                                                     |
|               |                                                               |
|               v                                                               |
|   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