╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ DASHBOARD VIEWERS ║
║ Primary Entry Point for Repository State ║
║ ║
║ Human ◈ AI Feedback Loop Environment ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
THE CENTER Contribution
┌─────────────────────────────────────────────────────────────────────────────┐
│ THE CENTER: Human ◈ AI Feedback Loop via Dashboard │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Dashboard enables THE CENTER by: │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 1. DATA AGGREGATION: Multiple Git data sources unified │ │
│ │ ├── Humans see complete picture, not scattered data │ │
│ │ └── AI can trace data flow from source to display │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 2. PROGRESSIVE DISCLOSURE: Summary -> Detail pattern │ │
│ │ ├── Humans get overview first, details on demand │ │
│ │ └── AI can generate appropriate detail levels │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 3. REAL-TIME FEEDBACK: Changes reflected immediately │ │
│ │ ├── Humans see Git state evolve │ │
│ │ └── AI can correlate actions with state changes │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Component Architecture
╔═══════════════════════════════════════════════════════════════════════════════╗
║ DASHBOARD COMPONENT ARCHITECTURE ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ GitDashboardViewer ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ COMPOSITION (aggregates multiple data views): │ ║
║ │ ┌───────────────────────────────────────────────────────────────┐ │ ║
║ │ │ BranchSummary │ Current branch, ahead/behind status │ │ ║
║ │ │ RecentCommits │ Last N commits with author badges │ │ ║
║ │ │ ChangedFiles │ Staged/unstaged/untracked file lists │ │ ║
║ │ │ RemoteStatus │ Push/pull state for all remotes │ │ ║
║ │ │ StashIndicator │ Quick stash count and access │ │ ║
║ │ └───────────────────────────────────────────────────────────────┘ │ ║
║ │ │ ║
║ │ TAURI COMMANDS (Rust backend integration): │ ║
║ │ ┌───────────────────────────────────────────────────────────────┐ │ ║
║ │ │ git_dashboard_summary │ Aggregated repository state │ │ ║
║ │ │ git_recent_commits │ Last N commits with metadata │ │ ║
║ │ │ git_status │ Working directory status │ │ ║
║ │ │ git_branch_info │ Current branch details │ │ ║
║ │ └───────────────────────────────────────────────────────────────┘ │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Parallel Data Loading
╔═══════════════════════════════════════════════════════════════════════════════╗
║ PARALLEL vs SEQUENTIAL LOADING COMPARISON ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ SEQUENTIAL LOADING (NOT USED): ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ Time -> │ ║
║ │ |========| git_dashboard_summary (~50ms) │ ║
║ │ |========| git_recent_commits (~80ms) │ ║
║ │ |========| git_status (~40ms) │ ║
║ │ Total: ~170ms │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ PARALLEL LOADING (ACTUAL IMPLEMENTATION): ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ Time -> │ ║
║ │ |========| git_dashboard_summary (~50ms) │ ║
║ │ |============| git_recent_commits (~80ms) │ ║
║ │ |======| git_status (~40ms) │ ║
║ │ Total: ~80ms (limited by slowest call) │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ PERFORMANCE IMPROVEMENT: 53% faster initialization ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Data Flow Architecture
╔═══════════════════════════════════════════════════════════════════════════════╗
║ DASHBOARD DATA FLOW ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ User Opens Dashboard ║
║ │ ║
║ ▼ ║
║ GitDashboardViewer.init(container, repoPath) ║
║ │ ║
║ ▼ ║
║ Parallel Tauri Invocations (Promise.all) ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ invoke("git_dashboard_summary", { path }) │ ║
║ │ invoke("git_recent_commits", { path, limit: 10 }) │ ║
║ │ invoke("git_status", { path }) │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ │ ║
║ ▼ ║
║ Rust Backend Processing ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ git_dashboard_summary: │ ║
║ │ ├── Repository::open(path) │ ║
║ │ ├── Extract branch, remotes, stash count │ ║
║ │ └── Return DashboardSummary struct │ ║
║ │ │ ║
║ │ git_recent_commits: │ ║
║ │ ├── revwalk() with Sort::TIME │ ║
║ │ ├── Collect N commits with metadata │ ║
║ │ └── Return Vec<CommitInfo> │ ║
║ │ │ ║
║ │ git_status: │ ║
║ │ ├── repo.statuses() with options │ ║
║ │ ├── Categorize: staged, unstaged, untracked │ ║
║ │ └── Return GitStatus struct │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ │ ║
║ ▼ ║
║ Composite HTML Rendering ║
║ │ ║
║ ▼ ║
║ Interactive Event Handlers ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Branch Status Display
╔═══════════════════════════════════════════════════════════════════════════════╗
║ BRANCH STATUS DISPLAY VARIANTS ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ VARIANT 1: Clean, synced ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ [branch-icon] main [Clean] │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ VARIANT 2: Modified, synced ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ [branch-icon] feature/xyz [Modified] │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ VARIANT 3: Clean, ahead of remote ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ [branch-icon] main [Clean] [↑] 3 │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ VARIANT 4: Modified, behind remote ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ [branch-icon] main [Modified] [↓] 5 │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ VARIANT 5: Modified, ahead AND behind ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ [branch-icon] main [Modified] [↑] 2 [↓] 3 │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Color Coding: ║
║ ├── Clean = green ║
║ ├── Modified = yellow/orange ║
║ ├── Ahead = green arrow ║
║ └── Behind = yellow arrow ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Changed Files Categorization
╔═══════════════════════════════════════════════════════════════════════════════╗
║ CHANGED FILES CATEGORIZATION ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Rust Backend categorizes files by Git status: ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ is_index_new/modified/deleted/renamed → STAGED │ ║
║ │ is_wt_modified/deleted/renamed → UNSTAGED │ ║
║ │ is_wt_new → UNTRACKED │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ TypeScript Frontend renders: ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ STAGED (green, check icon) │ Files in index ready to commit │ ║
║ │ src/main.rs │ [A] Added │ ║
║ │ src/lib.rs │ [M] Modified │ ║
║ ├───────────────────────────────────────────────────────────────────────┤ ║
║ │ MODIFIED (yellow, edit icon) │ Working tree changes │ ║
║ │ Cargo.toml │ [M] Modified │ ║
║ │ README.md │ [D] Deleted │ ║
║ ├───────────────────────────────────────────────────────────────────────┤ ║
║ │ UNTRACKED (gray, plus icon) │ New files not in Git │ ║
║ │ temp.log │ [?] Untracked │ ║
║ │ .env.local │ [?] Untracked │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Stash Indicator Interaction
╔═══════════════════════════════════════════════════════════════════════════════╗
║ STASH INDICATOR INTERACTION FLOW ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Dashboard renders with stash_count > 0 ║
║ │ ║
║ ▼ ║
║ Stash Indicator displayed: ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ [package-icon] Stash [3] │ ║
║ │ ^^^ badge with count │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ │ ║
║ │ User clicks ║
║ ▼ ║
║ CustomEvent('open-git-stash-viewer') dispatched ║
║ │ ║
║ ▼ ║
║ GitStashViewer opens with full stash list ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Complete Dashboard Flow
╔═══════════════════════════════════════════════════════════════════════════════╗
║ COMPLETE DASHBOARD DATA FLOW ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ User navigates to repository ║
║ │ ║
║ ▼ ║
║ GitDashboardViewer.init() ║
║ │ ║
║ ├──> renderLoading() -> Display spinner ║
║ │ ║
║ ├──> Promise.all([ ║
║ │ git_dashboard_summary, ║
║ │ git_recent_commits, ║
║ │ git_status ║
║ │ ]) ║
║ │ │ ║
║ │ ▼ ║
║ │ Rust Backend (parallel processing) ║
║ │ │ ║
║ │ ▼ ║
║ │ Results returned as typed structs ║
║ │ ║
║ ├──> render() -> getContent() ║
║ │ ║
║ ├──> renderBranchStatus() ║
║ ├──> renderRecentCommits() ║
║ ├──> renderChangedFiles() ║
║ ├──> renderStashIndicator() ║
║ │ ║
║ ▼ ║
║ Composite HTML ║
║ │ ║
║ ▼ ║
║ setupListeners() ║
║ │ ║
║ ├──> Branch click -> open branch viewer ║
║ ├──> Commit click -> open commit viewer ║
║ ├──> File click -> open diff viewer ║
║ └──> Stash click -> open stash viewer ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Human ◈ AI Benefits
╔═══════════════════════════════════════════════════════════════════════════════╗
║ DASHBOARD BENEFITS FOR THE CENTER ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ HUMAN BENEFITS: ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ 1. AT-A-GLANCE OVERVIEW │ ║
║ │ ├── See branch, commits, changes in one view │ ║
║ │ └── No need to run multiple git commands │ ║
║ │ │ ║
║ │ 2. COLOR-CODED STATUS │ ║
║ │ ├── Green = safe/ready │ ║
║ │ ├── Yellow = attention needed │ ║
║ │ └── Gray = informational │ ║
║ │ │ ║
║ │ 3. PROGRESSIVE DISCLOSURE │ ║
║ │ ├── Summary first, click for details │ ║
║ │ └── Navigate to specialized viewers │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ AI BENEFITS: ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ 1. STRUCTURED DATA ACCESS │ ║
║ │ ├── Typed Tauri commands with predictable responses │ ║
║ │ └── Can generate dashboard updates programmatically │ ║
║ │ │ ║
║ │ 2. TRACEABLE DATA FLOW │ ║
║ │ ├── Clear path from Git repo to UI │ ║
║ │ └── Can verify state consistency │ ║
║ │ │ ║
║ │ 3. EVENT-BASED INTEGRATION │ ║
║ │ ├── CustomEvent for cross-component communication │ ║
║ │ └── Can trigger navigation programmatically │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ FEEDBACK LOOP: ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ Human commits changes -> Dashboard updates -> AI observes state │ ║
║ │ AI suggests actions -> Human clicks -> Dashboard reflects result │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Dashboard Philosophy
The Dashboard is the Human’s first view into repository state.
By aggregating data in parallel and presenting it progressively,
both Human and AI can quickly assess and act on the current state.