Overview
The GitBaseViewer class serves as the abstract foundation for all Git-related viewer components in Monolex. Through the Template Method Pattern, it provides shared infrastructure while allowing specialized implementations in derived classes. This system represents a core component of the Human-AI feedback loop by providing consistent, reliable abstractions that enable both humans and AI to understand Git data through standardized viewer interfaces.╔═══════════════════════════════════════════════════════════════╗
║ TEMPLATE METHOD PATTERN IN GITBASEVIEWER ║
╠═══════════════════════════════════════════════════════════════╣
║ ║
║ ABSTRACT BASE CLASS ║
║ ┌───────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ ABSTRACT METHODS (must be implemented): │ ║
║ │ ┌───────────────────────────────────────────────┐ │ ║
║ │ │ init(container, repoPath) │ │ ║
║ │ │ getContent() │ │ ║
║ │ │ refresh() │ │ ║
║ │ └───────────────────────────────────────────────┘ │ ║
║ │ │ ║
║ │ SHARED METHODS (inherited by all): │ ║
║ │ ┌───────────────────────────────────────────────┐ │ ║
║ │ │ initBase() -> Common initialization │ │ ║
║ │ │ loadSettings() -> Load from localStorage │ │ ║
║ │ │ renderLoading() -> Show loading spinner │ │ ║
║ │ │ renderError() -> Show error state │ │ ║
║ │ │ renderHeader() -> Render viewer header │ │ ║
║ │ │ escapeHtml() -> XSS protection │ │ ║
║ │ │ formatRelativeTime() -> Human-readable dates │ │ ║
║ │ │ renderBadge() -> Styled badge component │ │ ║
║ │ │ renderAuthorBadge() -> Author with AI badge │ │ ║
║ │ └───────────────────────────────────────────────┘ │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
Inheritance Architecture
GitBaseViewer (ABSTRACT)
│
│ abstract methods:
│ ├── init()
│ └── getContent()
│
│ shared methods:
│ ├── initBase()
│ ├── loadSettings()
│ ├── renderLoading()
│ ├── renderError()
│ └── (11 more methods)
│
┌─────────────────────┼─────────────────────┐
│ │ │
▼ ▼ ▼
GitStashViewer GitReflogViewer GitDiffViewer
(EXTENDS) (EXTENDS) (EXTENDS)
GitBlameViewer
(STANDALONE - NO EXTENDS)
Template Method Execution Flow
The Template Method Pattern defines the skeleton of an algorithm in a base class, deferring specific steps to subclasses.User requests viewer initialization
│
▼
Concrete Viewer.init(container, repoPath)
│
│ Call inherited method
▼
GitBaseViewer.initBase(container, repoPath)
│
│ Sets container, repoPath
│ Calls loadSettings()
▼
GitBaseViewer.loadSettings()
│
│ Extract CSS variables for theme colors
▼
Return to Concrete Viewer.init()
│
│ Call inherited method
▼
GitBaseViewer.renderLoading()
│
│ Render loading spinner HTML
▼
Return to Concrete Viewer.init()
│
│ Viewer-specific initialization
│ (invoke IPC, process data)
▼
this.render() -> calls this.getContent()
│
▼
Concrete Viewer.getContent() [ABSTRACT - MUST IMPLEMENT]
│
│ Returns HTML string specific to viewer type
▼
Display rendered content
Settings Management
Theme colors are loaded from CSS variables and shared across all viewers.CSS Variables (document.documentElement)
┌───────────────────────────────────────────────┐
│ --color-primary: #3B82F6 │
│ --color-success: #22C55E │
│ --color-warning: #F59E0B │
│ --color-error: #EF4444 │
│ --color-info: #6366F1 │
└───────────────────────────────────────────────┘
│
│ getComputedStyle()
▼
loadSettings()
┌───────────────────────────────────────────────┐
│ this.themeColors = { │
│ primary: "#3B82F6", │
│ success: "#22C55E", │
│ warning: "#F59E0B", │
│ error: "#EF4444", │
│ info: "#6366F1" │
│ } │
└───────────────────────────────────────────────┘
│
│ Used by rendering methods
▼
renderBadge(), renderAuthorBadge(), renderStats()
Author Badge with AI Detection
The system automatically detects AI/LLM authors and applies appropriate styling.┌─────────────────────────────────────────────────────────┐
│ AI DETECTION IN AUTHOR BADGE │
├─────────────────────────────────────────────────────────┤
│ │
│ Check patterns: │
│ ┌───────────────────────────────────────────────┐ │
│ │ includes("llm") -> AI detected │ │
│ │ includes("agent") -> AI detected │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Style Selection: │
│ ┌───────────────────────────────────────────────┐ │
│ │ AI detected: │ │
│ │ bgColor = --color-info-bg (blue) │ │
│ │ textColor = --color-info (blue text) │ │
│ │ icon = Bot icon │ │
│ │ │ │
│ │ Human: │ │
│ │ bgColor = --color-success-bg (green) │ │
│ │ textColor = --color-success (green text) │ │
│ │ icon = User icon │ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
Cross-Viewer Integration Patterns
Different viewers integrate with the system through appropriate patterns based on their use cases.Pattern 1: Inheritance + Direct Import (GitStashViewer)
class GitStashViewer extends GitBaseViewer
Integration:
├── Inherits shared methods from GitBaseViewer
├── Imports showToast directly from utils-core
└── No event emission (self-contained)
Suitable for: Self-contained viewers with toast notifications
Pattern 2: Standalone + Callbacks (GitBlameViewer)
class GitBlameViewer (no extends)
Integration:
├── No inheritance (implements own shared methods)
├── Public callback properties:
│ ├── onCommitClick: ((hash: string) => void) | null
│ └── onLineClick: ((line: number) => void) | null
└── Consumer sets callbacks to handle events
Suitable for: Viewers requiring parent component integration
Pattern 3: Inheritance + CustomEvent (GitReflogViewer)
class GitReflogViewer extends GitBaseViewer
Integration:
├── Inherits shared methods from GitBaseViewer
├── Emits CustomEvent for cross-component communication
└── Any component can listen for events
Suitable for: Viewers needing loose coupling with multiple consumers
THE CENTER
┌─────────────────────────────────────────────────────┐
│ Human-AI Feedback Loop via GitBaseViewer │
├─────────────────────────────────────────────────────┤
│ │
│ HUMAN SIDE: │
│ ┌───────────────────────────────────────────┐ │
│ │ LEARNS ONE INTERFACE │ │
│ │ All viewers share common patterns │ │
│ │ │ │
│ │ PREDICTABLE BEHAVIOR │ │
│ │ Settings always loaded same way │ │
│ │ │ │
│ │ EXTENSIBLE MENTAL MODEL │ │
│ │ Understanding one helps understand all │ │
│ └───────────────────────────────────────────┘ │
│ │
│ AI SIDE: │
│ ┌───────────────────────────────────────────┐ │
│ │ CONSISTENT CODE GENERATION │ │
│ │ Can generate new viewers following │ │
│ │ the pattern │ │
│ │ │ │
│ │ RELIABLE ANALYSIS │ │
│ │ Can trace code paths through │ │
│ │ inheritance │ │
│ │ │ │
│ │ ACCURATE DOCUMENTATION │ │
│ │ Can describe system architecture │ │
│ │ precisely │ │
│ └───────────────────────────────────────────┘ │
│ │
│ SYNERGY: │
│ Human writes new viewer -> AI verifies pattern │
│ AI generates viewer code -> Human reviews against │
│ known patterns │
│ │
└─────────────────────────────────────────────────────┘
Learn More
Explore the Dashboard Viewers implementation