> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Git Base Viewer > Template Method Pattern foundation for all Git viewer components ## 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 │ │ │ └─────────────────────────────────────────────────────┘ ``` Explore the Dashboard Viewers implementation