@cloudkinetix/bmad-enhanced/expansion-packs/ck-jira-integration/utils/visual-sync-dashboard.md

Cloud-Kinetix enhanced fork of BMAD-METHOD - Breakthrough Method of Agile AI-driven Development with robust versioning and unified validation.

# Visual Sync Dashboard Utility

## Purpose

Create an intuitive, visual representation of three-way sync health between Git, BMAD, and JIRA systems. This utility generates interactive HTML dashboards that make sync status immediately understandable.

## Visual Design Principles

### 1. Traffic Light System

- **Green**: Fully synchronized (>95% alignment)
- **Yellow**: Minor divergence (70-95% alignment)
- **Red**: Significant drift (<70% alignment)

### 2. Connection Visualization

```
    Git 🟢 ←→ 🟢 BMAD
     ↘     ↗
      🟡 JIRA
```

Shows real-time connection health between systems.

### 3. Sync Health Score

Large, prominent score (0-100) with trend indicator:

- ↑ Improving
- → Stable
- ↓ Degrading

## Dashboard Components

### Header Widget

```html
<div class="sync-header">
  <h1>Three-Way Sync Status</h1>
  <div class="overall-health">
    <div class="health-score">87%</div>
    <div class="health-trend">↑ +3%</div>
    <div class="last-sync">Last sync: 5 mins ago</div>
  </div>
</div>
```

### System Status Cards

```html
<div class="system-grid">
  <div class="system-card git">
    <h3>📁 Git Repository</h3>
    <div class="metrics">
      <div>Commits: 1,247</div>
      <div>Branches: 12 active</div>
      <div>Last activity: 2 hours ago</div>
    </div>
    <div class="sync-status green">Fully Synced</div>
  </div>

  <div class="system-card bmad">
    <h3>📚 BMAD Docs</h3>
    <div class="metrics">
      <div>Stories: 47</div>
      <div>Epics: 8</div>
      <div>Last update: Today</div>
    </div>
    <div class="sync-status yellow">3 pending updates</div>
  </div>

  <div class="system-card jira">
    <h3>🎯 JIRA</h3>
    <div class="metrics">
      <div>Issues: 52</div>
      <div>Sprint: Active</div>
      <div>Velocity: 27</div>
    </div>
    <div class="sync-status green">Fully Synced</div>
  </div>
</div>
```

### Divergence Heatmap

Visual grid showing sync status by epic/component:

```html
<div class="heatmap">
  <table>
    <tr>
      <th>Epic/Component</th>
      <th>Git↔BMAD</th>
      <th>BMAD↔JIRA</th>
      <th>Git↔JIRA</th>
    </tr>
    <tr>
      <td>Authentication</td>
      <td class="cell green">✓</td>
      <td class="cell yellow">⚠</td>
      <td class="cell green">✓</td>
    </tr>
  </table>
</div>
```

### Action Queue

Prioritized sync actions with one-click execution:

```html
<div class="action-queue">
  <h3>🚀 Recommended Actions</h3>
  <div class="action-item high">
    <span class="priority">HIGH</span>
    <span class="description">Sync 3 BMAD stories to JIRA</span>
    <button class="sync-btn">Sync Now</button>
  </div>
  <div class="action-item medium">
    <span class="priority">MED</span>
    <span class="description">Update JIRA status from git commits</span>
    <button class="sync-btn">Update</button>
  </div>
</div>
```

### Timeline View

Shows sync events over time:

```html
<div class="timeline">
  <div class="timeline-event success">
    <time>10:30 AM</time>
    <span>✓ Synced 5 stories to JIRA</span>
  </div>
  <div class="timeline-event warning">
    <time>9:15 AM</time>
    <span>⚠ Detected drift in Epic-001</span>
  </div>
</div>
```

## Interactive Features

### 1. Drill-Down Navigation

Click any metric to see details:

- System card → List of items
- Heatmap cell → Specific divergences
- Action item → Preview changes

### 2. Real-Time Updates

[[LLM: Generate JavaScript for WebSocket or polling updates]]

```javascript
// Auto-refresh every 30 seconds
setInterval(refreshDashboard, 30000);

// Visual feedback during sync
function showSyncProgress(system) {
  document.querySelector(`.${system}-card`).classList.add("syncing");
}
```

### 3. Filters and Views

- Time range selector
- System toggle (show/hide)
- Severity filter
- Team member view

## Responsive Design

### Mobile-First Layout

```css
.sync-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .system-grid {
    grid-template-columns: 1fr;
  }
}
```

### Dark Mode Support

```css
:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #ffffff;
}
```

## Generation Instructions

[[LLM: When generating visual sync dashboard:

1. Use semantic HTML5 elements
2. Include accessibility attributes
3. Implement smooth animations
4. Ensure mobile responsiveness
5. Add keyboard navigation
6. Include print stylesheet
7. Generate inline CSS for portability
8. Add export functionality
   ]]

## Example Usage

### Command

```
"show visual sync dashboard"
"create sync health visualization"
"generate three-way sync status"
```

### Output Location

```
.bmad-workspace/ck-jira-integration/dashboards/sync-dashboard-{{timestamp}}.html
```

### Features

- Standalone HTML file (no dependencies)
- Inline CSS and JavaScript
- Print-friendly version
- CSV data export
- Screenshot capability

## Advanced Visualizations

### 1. Sankey Diagram

Shows data flow between systems:

```
Git (47 stories) ═══╗
                    ╠═══ BMAD (45 matched)
JIRA (52 issues) ═══╝     └─ 2 orphaned
```

### 2. Radar Chart

Multi-dimensional sync health:

- Completeness
- Accuracy
- Timeliness
- Consistency
- Coverage

### 3. Burndown Overlay

Sprint progress with sync indicators:

- Ideal burndown line
- Actual progress
- Sync lag indicators

## Customization Options

### Team Preferences

```yaml
dashboard_preferences:
  refresh_interval: 30
  default_view: "compact"
  show_animations: true
  color_scheme: "default"
  priority_system: "critical/high/medium/low"
```

### Metric Selection

Users can choose which metrics to display:

- Story counts
- Commit frequency
- Update lag time
- Sync success rate
- Error counts

## Benefits

1. **Instant Understanding**: Visual representation eliminates confusion
2. **Proactive Monitoring**: See issues before they impact work
3. **One-Click Actions**: Execute sync operations from dashboard
4. **Team Alignment**: Shared view of system state
5. **Historical Tracking**: Understand sync patterns over time

This visual sync dashboard transforms complex three-way synchronization into an intuitive, actionable interface that any team member can understand and use effectively.