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.Copy
┌─────────────────────────────────────────────────────────────────┐
│ 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:Copy
// FILE: src-tauri/src/modules/git_branch_relationships.rs
// MODIFICATIONS: Add ~500 lines
// New Structs
#[derive(Serialize, Clone)]
pub struct CommitGraphNode {
pub sha: String,
pub short_sha: String,
pub message: String,
pub author: String,
pub email: String,
pub timestamp: i64,
pub parents: Vec<String>,
pub lane: usize,
pub branches: Vec<String>,
pub tags: Vec<String>,
pub is_head: bool,
}
#[derive(Serialize, Clone)]
pub struct CommitGraphConnection {
pub from_sha: String,
pub to_sha: String,
pub from_lane: usize,
pub to_lane: usize,
pub is_merge: bool,
}
#[derive(Serialize)]
pub struct CommitGraph {
pub nodes: Vec<CommitGraphNode>,
pub connections: Vec<CommitGraphConnection>,
pub total_commits: usize,
pub has_more: bool,
pub max_lane: usize,
}
Lane Assignment Algorithm
Copy
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
Copy
// FILE: src/modules/misc/git-branch-diagram-viewer.ts
// MODIFICATIONS: Add ~500 lines
// Interfaces
interface CommitGraphNode {
sha: string;
short_sha: string;
message: string;
author: string;
email: string;
timestamp: number;
parents: string[];
lane: number;
branches: string[];
tags: string[];
is_head: boolean;
}
// View mode toggle
class GitBranchDiagramViewer {
private viewMode: 'branches' | 'commits' = 'branches';
private commitGraph: CommitGraph | null = null;
private toggleViewMode(): void {
this.viewMode = this.viewMode === 'branches' ? 'commits' : 'branches';
this.render();
}
private render(): void {
if (this.viewMode === 'branches') {
this.renderBranchGraph(); // Existing
} else {
this.renderCommitGraph(); // NEW
}
}
}
Extended Viewers Technical Plans
Blame Annotation View
Technical plan for line-by-line authorship visualization:Copy
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)
Copy
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:Copy
type DiffViewMode = '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:Copy
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:Copy
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:Copy
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
Copy
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:Copy
+-----------------------------------------------------------------------+
| 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):Copy
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
Copy
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.
Impact Analysis
Understanding the transformative effect on Human ◈ AI collaboration