@cloudkinetix/bmad-enhanced
Version:
Cloud-Kinetix enhanced fork of BMAD-METHOD - Breakthrough Method of Agile AI-driven Development with robust versioning and unified validation.
365 lines (318 loc) • 10.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMAD-JIRA Sync Dashboard</title>
<style>
:root {
--green: #10b981;
--yellow: #f59e0b;
--red: #ef4444;
--bg-primary: #ffffff;
--bg-secondary: #f3f4f6;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--border: #e5e7eb;
--shadow: rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-secondary);
color: var(--text-primary);
line-height: 1.6;
}
.dashboard {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/* Header */
.header {
background: var(--bg-primary);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 1px 3px var(--shadow);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.header h1 {
font-size: 2rem;
font-weight: 700;
}
.overall-health {
display: flex;
align-items: center;
gap: 2rem;
}
.health-score {
font-size: 3rem;
font-weight: 800;
color: var(--green);
}
.health-trend {
font-size: 1.2rem;
color: var(--green);
}
.last-sync {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* System Grid */
.system-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.system-card {
background: var(--bg-primary);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px var(--shadow);
transition: transform 0.2s, box-shadow 0.2s;
}
.system-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px var(--shadow);
}
.system-card h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.metrics {
margin-bottom: 1rem;
}
.metrics div {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.sync-status {
padding: 0.5rem 1rem;
border-radius: 6px;
text-align: center;
font-weight: 600;
}
.sync-status.green {
background: #d1fae5;
color: #065f46;
}
.sync-status.yellow {
background: #fef3c7;
color: #92400e;
}
.sync-status.red {
background: #fee2e2;
color: #991b1b;
}
/* Connection Visual */
.connection-visual {
background: var(--bg-primary);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 1px 3px var(--shadow);
text-align: center;
}
.connection-diagram {
font-size: 2rem;
line-height: 1.8;
font-family: monospace;
}
/* Action Queue */
.action-queue {
background: var(--bg-primary);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px var(--shadow);
}
.action-queue h3 {
margin-bottom: 1rem;
font-size: 1.25rem;
}
.action-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 0.75rem;
}
.priority {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
}
.priority.high {
background: #fee2e2;
color: #991b1b;
}
.priority.medium {
background: #fef3c7;
color: #92400e;
}
.description {
flex: 1;
}
.sync-btn {
padding: 0.5rem 1rem;
background: var(--green);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
.sync-btn:hover {
background: #059669;
}
/* Responsive */
@media (max-width: 768px) {
.header {
flex-direction: column;
text-align: center;
}
.overall-health {
flex-direction: column;
gap: 0.5rem;
}
.health-score {
font-size: 2.5rem;
}
.system-grid {
grid-template-columns: 1fr;
}
}
/* Animations */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.syncing {
animation: pulse 1.5s infinite;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #1f2937;
--bg-secondary: #111827;
--text-primary: #f9fafb;
--text-secondary: #9ca3af;
--border: #374151;
--shadow: rgba(0, 0, 0, 0.3);
}
}
</style>
</head>
<body>
<div class="dashboard">
<!-- Header -->
<div class="header">
<h1>🔄 Three-Way Sync Dashboard</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 -->
<div class="system-grid">
<div class="system-card">
<h3>📁 Git Repository</h3>
<div class="metrics">
<div>Commits: 1,247</div>
<div>Active branches: 12</div>
<div>Last activity: 2 hours ago</div>
<div>Contributors: 8</div>
</div>
<div class="sync-status green">Fully Synced</div>
</div>
<div class="system-card">
<h3>📚 BMAD Documentation</h3>
<div class="metrics">
<div>Stories: 47 total</div>
<div>Epics: 8 active</div>
<div>Last update: Today 2:30 PM</div>
<div>Completion: 72%</div>
</div>
<div class="sync-status yellow">3 pending updates</div>
</div>
<div class="system-card">
<h3>🎯 JIRA Tracking</h3>
<div class="metrics">
<div>Issues: 52 open</div>
<div>Current Sprint: Week 3</div>
<div>Velocity: 27 points</div>
<div>Blockers: 2</div>
</div>
<div class="sync-status green">Fully Synced</div>
</div>
</div>
<!-- Connection Visual -->
<div class="connection-visual">
<h3>System Connections</h3>
<div class="connection-diagram">
Git 🟢 ←→ 🟢 BMAD<br>
↘ ↗<br>
🟡 JIRA
</div>
<p style="margin-top: 1rem; color: var(--text-secondary);">
Yellow indicates 3 stories need status updates in JIRA
</p>
</div>
<!-- Action Queue -->
<div class="action-queue">
<h3>🚀 Recommended Sync Actions</h3>
<div class="action-item">
<span class="priority high">HIGH</span>
<span class="description">Sync 3 updated BMAD stories to JIRA (Auth epic)</span>
<button class="sync-btn" onclick="alert('Syncing stories...')">Sync Now</button>
</div>
<div class="action-item">
<span class="priority medium">MED</span>
<span class="description">Update JIRA status from recent git commits</span>
<button class="sync-btn" onclick="alert('Updating status...')">Update</button>
</div>
<div class="action-item">
<span class="priority medium">MED</span>
<span class="description">Archive 5 completed stories from last sprint</span>
<button class="sync-btn" onclick="alert('Archiving...')">Archive</button>
</div>
</div>
</div>
<script>
// Simple interactivity
document.addEventListener('DOMContentLoaded', function() {
// Auto-refresh timestamp
setInterval(() => {
const now = new Date();
const timeStr = now.toLocaleTimeString();
document.querySelector('.last-sync').textContent = `Last sync: ${timeStr}`;
}, 60000);
// Click handlers for drill-down
document.querySelectorAll('.system-card').forEach(card => {
card.style.cursor = 'pointer';
card.addEventListener('click', () => {
alert('Drill-down view would show detailed items here');
});
});
});
</script>
</body>
</html>