Overview
The Git Commit Graph upgrade is part of a larger visualization ecosystem planned for Monolex. This plan serves THE CENTER by creating a comprehensive transparency layer where every aspect of AI development work becomes visible to the human collaborator.┌─────────────────────────────────────────────────────────────────┐
│ VISUALIZATION ECOSYSTEM │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ CORE: Commit Graph │ │
│ │ (Foundation for all other viewers) │ │
│ └────────────────────┬────────────────────────────────┘ │
│ │ │
│ ┌─────────────┼─────────────┐ │
│ │ │ │ │
│ v v v │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ History │ │ Code │ │ People │ │
│ │ Viewers │ │ Viewers │ │ Viewers │ │
│ ├───────────┤ ├───────────┤ ├───────────┤ │
│ │ Reflog │ │ Blame │ │ Ownership │ │
│ │ Timeline │ │ Diff │ │ Bus Factor│ │
│ │ Stash │ │ Heatmap │ │ Impact │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ Total: 14 visualization components │
│ Estimated effort: 37 days │
│ │
└─────────────────────────────────────────────────────────────────┘
Core Commit Graph Technical Plan
Rust Backend Implementation
The Rust backend implementation follows this structure:┌───────────────────────────────────────────────────────────────────────┐
│ COMMIT GRAPH DATA STRUCTURES │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ CommitGraphNode │
│ ───────────────── │
│ sha: String // Full commit hash │
│ short_sha: String // Abbreviated hash │
│ message: String // Commit message │
│ author: String // Author name │
│ email: String // Author email │
│ timestamp: i64 // Unix timestamp │
│ parents: Vec<String> // Parent commit hashes │
│ lane: usize // Visual lane assignment │
│ branches: Vec<String> // Branch names at this commit │
│ tags: Vec<String> // Tag names at this commit │
│ is_head: bool // Is current HEAD │
│ │
│ CommitGraphConnection │
│ ───────────────────── │
│ from_sha: String // Source commit │
│ to_sha: String // Target commit │
│ from_lane: usize // Source visual lane │
│ to_lane: usize // Target visual lane │
│ is_merge: bool // Is this a merge connection │
│ │
│ CommitGraph (Top-level response) │
│ ───────────────────────────────── │
│ nodes: Vec<CommitGraphNode> │
│ connections: Vec<CommitGraphConnection> │
│ total_commits: usize │
│ has_more: bool │
│ max_lane: usize │
│ │
└───────────────────────────────────────────────────────────────────────┘
Lane Assignment Algorithm
ALGORITHM STEPS:
1. Process commits in topological order (newest first)
2. For each commit:
a. Check if lane already assigned (from child processing)
b. If not, find first free lane
c. Assign lane to commit
d. First parent inherits same lane
e. Other parents (merge) get new lanes
VISUAL EXAMPLE:
Lane 0 Lane 1 Lane 2
* c1 c1 gets lane 0 (first commit)
|
* c2 c2 inherits lane 0 from c1
+-----------* c3 c3 gets lane 1 (branch point)
| |
* c4 | c4 inherits lane 0
| * c5 c5 inherits lane 1
| |
* c6 | c6 inherits lane 0
| |
<-----------+ c6 is merge: lane 1 freed
|
* c7 c7 inherits lane 0
LANE LIFECYCLE:
├── Created: When commit needs new lane
├── Inherited: First parent keeps lane
├── Branched: Non-first parents get new lanes
└── Freed: When lane merges back
TypeScript Frontend Implementation
┌───────────────────────────────────────────────────────────────────────┐
│ FRONTEND COMMIT GRAPH VIEWER │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ CommitGraphNode Interface │
│ ───────────────────────── │
│ Mirrors Rust struct for IPC serialization │
│ All fields map 1:1 to backend │
│ │
│ GitBranchDiagramViewer Class │
│ ───────────────────────────── │
│ STATE: │
│ viewMode: 'branches' | 'commits' = 'branches' │
│ commitGraph: CommitGraph | null = null │
│ │
│ METHODS: │
│ │
│ toggleViewMode() │
│ │ │
│ └──► viewMode === 'branches'? │
│ │ │
│ YES ─┴──► viewMode = 'commits' │
│ NO ────► viewMode = 'branches' │
│ │ │
│ └──► render() │
│ │
│ render() │
│ │ │
│ └──► viewMode? │
│ │ │
│ 'branches' ──► renderBranchGraph() [existing] │
│ 'commits' ──► renderCommitGraph() [new] │
│ │
└───────────────────────────────────────────────────────────────────────┘
Extended Viewers Technical Plans
Blame Annotation View
Technical plan for line-by-line authorship visualization:GUTTER VARIANTS:
Compact: SHA only
[a1b2c3d] line content
Standard: SHA + Author
[a1b2c3d] John line content
Detailed: SHA + Author + Date
[a1b2c3d] John 2024-01-15 line content
COLOR CODING BY AGE:
######## Very recent (< 1 week)
######.. Recent (1-4 weeks)
####.... Medium (1-3 months)
##...... Old (> 3 months)
DETAILED VIEW:
+--------------------------------------------------------------------------+
| [a1b2c3d] Alice 01-15 | function calculateTotal(items) { |
| [a1b2c3d] Alice 01-15 | let sum = 0; |
| [f4e5d6c] AI 01-17 | for (const item of items) { <- AI change |
| [f4e5d6c] AI 01-17 | sum += item.price * item.qty; |
| [a1b2c3d] Alice 01-15 | } |
+--------------------------------------------------------------------------+
| | |
| | └── Timestamp
| └── Author name
└── Commit SHA (hover for full message)
Diff Visualization
Multiple view modes for code changes:┌───────────────────────────────────────────────────────────────────────┐
│ DIFF VIEW MODES │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ Four display modes: │
│ 'side-by-side' | 'unified' | 'word-level' | 'character-level' │
│ │
│ SIDE-BY-SIDE: │
│ +---------------------+---------------------+ │
│ | OLD | NEW | │
│ +---------------------+---------------------+ │
│ | - removed line | | │
│ | context line | context line | │
│ | | + added line | │
│ +---------------------+---------------------+ │
│ │
│ UNIFIED: │
│ +---------------------------------------------+ │
│ | @@ -10,5 +10,6 @@ | │
│ +---------------------------------------------+ │
│ | - removed line | │
│ | context line | │
│ | + added line | │
│ +---------------------------------------------+ │
│ │
└───────────────────────────────────────────────────────────────────────┘
Hunk-Aware Diff (GitButler-Informed)
Dependency analysis for intelligent code review:FILE: src/utils/math.ts
+-------------------------------------------------------------------------+
| @@ -10,5 +10,6 @@ |
| - export function add(a: number, b: number): number { |
| + export function add(a: number, b: number, c: number = 0): number { |
| return a + b + c; |
| } |
| |
| DEPENDENCIES: |
| ├── SignatureChange: add() signature modified |
| └── Affects 3 files: |
| ├── src/components/Calculator.tsx:45 |
| ├── src/components/Form.tsx:78 |
| └── src/tests/math.test.ts:12 |
+-------------------------------------------------------------------------+
AFFECTED FILE: src/components/Calculator.tsx
+-------------------------------------------------------------------------+
| Line 45: const result = add(x, y); // May need update |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ |
| Calls modified function 'add' |
| |
| SUGGESTION: |
| - Review if third parameter 'c' should be provided |
| - Current call still valid (c defaults to 0) |
+-------------------------------------------------------------------------+
Operation Timeline
Git operation history with recovery guidance:TODAY
|
+-* 14:32 [COMMIT] feat: add user authentication
| | sha: a1b2c3d files: 5 +120 -30
| |
+-* 14:28 [PUSH] origin/main (3 commits)
| |
+-* 14:25 [MERGE] feature/auth -> main
| | Warning: May have conflicts if reverted
| |
+-* 14:20 [COMMIT] fix: resolve merge conflicts
| |
+-* 13:40 [RESET --hard] HEAD~3
| | DESTRUCTIVE: Lost 3 commits
| | Recovery: git reflog; git checkout <sha>
| | Lost commits:
| | - x1y2z3a: "temp: debugging"
| | - b4c5d6e: "wip: partial impl"
| | - f7g8h9i: "broken: needs fix"
| |
+-* 13:30 [STASH] "WIP: user form validation"
| Can be recovered with: git stash apply stash@{0}
|
YESTERDAY
|
+-* 18:00 [COMMIT] docs: update README
LEGEND:
* Normal operation Warning: Potentially destructive X: Destructive
Implementation Roadmap
Phase Overview
Implementation in 3 phases over 6 weeks:PHASE 1: CORE (Weeks 1-2)
-------------------------
Focus: Commit graph visualization
Effort: 10 days
Week 1: Rust implementation
├── Day 1-2: Structs + git_commit_graph command
├── Day 3-4: Lane algorithm
└── Day 5: Testing + edge cases
Week 2: TypeScript implementation
├── Day 6-7: Interfaces + view mode toggle
├── Day 8-9: Rendering methods
└── Day 10: Integration testing
PHASE 2: HISTORY & CODE VIEWERS (Weeks 3-4)
-------------------------------------------
Focus: Blame, Diff, Heatmap, Stash
Effort: 15 days
Week 3: Blame + Diff
├── Day 1-3: Blame annotation view
└── Day 4-5: Basic diff visualization
Week 4: Heatmap + Stash + Remote
├── Day 6-7: File heatmap
├── Day 8-9: Stash visualization
└── Day 10: Remote tracking status
PHASE 3: ADVANCED & INTEGRATION (Weeks 5-6)
--------------------------------------------
Focus: Conflict resolution, Timeline, Ownership, Dashboard
Effort: 12 days
Week 5: Advanced viewers
├── Day 1-2: Merge conflict visualization
├── Day 3-4: Reflog time machine
└── Day 5: Hunk-aware diff
Week 6: People & Dashboard
├── Day 6-7: Operation timeline
├── Day 8-9: File ownership + Impact analyzer
└── Day 10-12: Integrated dashboard
TOTAL: 37 days estimated effort
Priority Matrix
HIGH VALUE
|
+------------------+------------------+
| | |
| HIGH PRIORITY | STRATEGIC |
| (Do First) | (Plan Well) |
| | |
| * Commit Graph | * Dashboard |
| * Blame | * Hunk-Aware |
| * Diff | * Impact |
| | |
LOW--+------------------+------------------+-- HIGH
EFFORT | EFFORT
| | |
| QUICK WINS | DEFER |
| (Do When Free) | (Do Last) |
| | |
| * Lane Algo | * Conflict |
| * Testing | * Reflog |
| * Remote | * Timeline |
| * Stash | * Ownership |
| * Heatmap | |
| | |
+------------------+------------------+
|
LOW VALUE
Integrated Dashboard Plan
The dashboard aggregates all visualization components:+-----------------------------------------------------------------------+
| GIT REPOSITORY DASHBOARD |
| Repository: monolex-tauri Branch: main Last fetch: 2 min ago |
+-----------------------------------------------------------------------+
+-------------------------------+-----------------+---------------------+
| | | |
| COMMIT GRAPH | RECENT OPS | BRANCH STATUS |
| | | |
| * a1b2c3d feat: auth | * 14:32 COMMIT | main V synced |
| | | * 14:28 PUSH | feature/x ^2 |
| * d4e5f6g fix: validation | * 14:25 MERGE | hotfix/y v1 |
| | | * 14:20 COMMIT | |
| +-* h7i8j9k WIP | W 13:40 RESET | |
| | | | | |
| *<-+ merge | [View All ->] | [Sync ->] |
| | | |
| [Open Full Graph ->] | | |
+-------------------------------+-----------------+---------------------+
| | |
| FILE HEATMAP | HOT FILES & TOP CONTRIBUTORS |
| | |
| src/ | * src/lib.rs (42 changes) |
| +-- lib.rs ***** | * src/modules/git.rs (38 changes) |
| +-- modules/ | * src/main.ts (25 changes) |
| | +-- git.rs **** | |
| | +-- ui.rs ** | Alice 45% ############..... |
| | +-- config.rs * | Bob 30% ##########....... |
| +-- tests/ .. | AI 25% ########......... |
+---------------+---------------+---------------+-----------------------+
| | | |
| STASH STACK | MERGE CONFLICTS | BUS FACTOR |
| | | |
| stash@{0} | Warning: 2 files conflicts | Risk: MEDIUM |
| "WIP: auth" | | |
| | src/auth.rs | Sole owners: 3 files |
| stash@{1} | - 5 conflicts | - config.rs (Alice) |
| "backup" | src/config.rs | - db.rs (Bob) |
| | - 2 conflicts | - auth.rs (AI) |
| [Apply ->] | | |
| | [Resolve ->] | [Details ->] |
+---------------+-------------------------------+-----------------------+
GitButler to Monolex Mapping
GitButler concepts mapped to Monolex (visualization-only):GITBUTLER FEATURE | MONOLEX ADAPTATION
---------------------------+------------------------------------------
Hunk staging | Hunk visualization only
(Interactive staging) | (Show hunk boundaries, no staging)
Hunk dependencies | Dependency visualization
(Auto-detect dependencies) | (Show dependencies, highlight impact)
Virtual branches | N/A (Monolex uses standard git branches)
Oplog | Operation timeline (read-only view)
(Undo/redo operations) | (Show history, no modification)
Ownership attribution | File ownership map (visualization)
AI-assisted messages | N/A (Monolex focuses on visualization)
Cloud sync | N/A (Monolex is local-only)
KEY PRINCIPLE:
Monolex provides TRANSPARENCY (visualization) for Human ◈ AI feedback loop.
Monolex does NOT modify the repository - only shows what is there.
GitButler provides modification capabilities that Monolex intentionally excludes.
Summary
Technical Plans Summary
| Plan Area | Documents | Lines of Code | Effort |
|---|---|---|---|
| Core Commit Graph | 01-05 | ~1000 | 10 days |
| Blame View | 07 | ~800 | 3 days |
| Diff Views | 09, 15 | ~1500 | 5 days |
| Remote/Stash/Heat | 08, 10, 11 | ~1200 | 5 days |
| Conflict/Reflog | 12, 13 | ~1000 | 4 days |
| Timeline/Ownership | 16, 17, 18 | ~1500 | 5 days |
| Dashboard | 14 | ~800 | 5 days |
| Total | 18 docs | ~7800 | 37 days |
Key Technical Decisions
- SVG-based Rendering - All graphs rendered as SVG for quality
- Rust Backend - git2-rs for all git operations
- Lane Algorithm - Topological + time ordering for visual clarity
- Pagination - 50 commits initial load, load more on scroll
- Caching - 30-second TTL for expensive operations
- Visualization Only - No repository modifications (unlike GitButler)
THE CENTER
How This Plan Serves the Human ◈ AI Feedback Loop
This chapter contributes by:
1. TRANSPARENCY
├── Documents complete implementation plans
├── Shows exact code that will be written
└── Reveals full scope of visualization ecosystem
2. VISUALIZATION
├── Provides mockups of all planned views
├── Shows data flow diagrams
└── Illustrates dashboard integration
3. FEEDBACK ENABLEMENT
├── Roadmap enables Human to prioritize features
├── Priority matrix shows value vs effort tradeoffs
└── Dependency graph reveals implementation order
CONNECTION TO MONOKINETICS:
These plans define the TOOLS that will enable Human ◈ AI unity.
By visualizing every aspect of AI work (commits, diffs, ownership, impact),
we create the environment where Human and AI can operate as ONE motion.
Current State
Understanding the transformative effect on Human ◈ AI collaboration