sepehr
4f7e808855
Next.js dashboard with git statistics, AI-powered summaries via Ollama, and research documents for project planning. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1047 lines
50 KiB
HTML
1047 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GitPulse — UX Design Directions</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; background: #0a0a0a; color: #fafafa; }
|
|
|
|
/* Navigation */
|
|
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #171717; border-bottom: 1px solid #404040; padding: 12px 24px; display: flex; gap: 12px; align-items: center; overflow-x: auto; }
|
|
.nav h1 { font-size: 14px; font-weight: 600; white-space: nowrap; margin-right: 12px; color: #fafafa; }
|
|
.nav button { padding: 6px 14px; border-radius: 6px; border: 1px solid #404040; background: #262626; color: #d4d4d4; cursor: pointer; font-size: 13px; white-space: nowrap; transition: all 0.15s; }
|
|
.nav button:hover { background: #404040; color: #fafafa; }
|
|
.nav button.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
|
|
|
|
/* Direction Sections */
|
|
.direction { display: none; padding-top: 60px; min-height: 100vh; }
|
|
.direction.active { display: block; }
|
|
|
|
/* Section headers */
|
|
.dir-header { padding: 32px 24px 16px; max-width: 1400px; margin: 0 auto; }
|
|
.dir-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
|
|
.dir-header p { font-size: 14px; color: #737373; max-width: 600px; }
|
|
.dir-header .tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
|
|
.dir-header .tag { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: #262626; border: 1px solid #404040; color: #d4d4d4; }
|
|
|
|
/* Mockup Container */
|
|
.mockup-container { max-width: 1400px; margin: 0 auto; padding: 16px 24px 48px; }
|
|
.mockup-frame { background: #171717; border: 1px solid #404040; border-radius: 12px; overflow: hidden; }
|
|
|
|
/* Top Bar shared */
|
|
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 48px; background: #171717; border-bottom: 1px solid #404040; }
|
|
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
|
.topbar-title { font-size: 14px; font-weight: 600; }
|
|
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
|
|
|
/* Status Colors */
|
|
.s-clean { color: #22c55e; }
|
|
.s-dirty { color: #ef4444; }
|
|
.s-ahead { color: #3b82f6; }
|
|
.s-behind { color: #f97316; }
|
|
.s-dormant { color: #737373; }
|
|
.bg-clean { background: rgba(34,197,94,0.1); }
|
|
.bg-dirty { background: rgba(239,68,68,0.1); }
|
|
.bg-ahead { background: rgba(59,130,246,0.1); }
|
|
.bg-behind { background: rgba(249,115,22,0.1); }
|
|
.bg-dormant { background: rgba(115,115,115,0.1); }
|
|
|
|
/* Privacy Badge */
|
|
.privacy { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 4px; }
|
|
.privacy-local { background: rgba(34,197,94,0.1); color: #22c55e; }
|
|
.privacy-cloud { background: rgba(245,158,11,0.1); color: #f59e0b; }
|
|
|
|
/* Toggle buttons */
|
|
.toggle-group { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid #404040; }
|
|
.toggle-btn { padding: 4px 10px; font-size: 12px; background: #262626; color: #737373; border: none; cursor: pointer; }
|
|
.toggle-btn.active { background: #404040; color: #fafafa; }
|
|
|
|
/* Filter pills */
|
|
.filter-pill { font-size: 12px; padding: 4px 10px; border-radius: 12px; border: 1px solid #404040; background: transparent; color: #d4d4d4; cursor: pointer; }
|
|
.filter-pill.active { background: #404040; border-color: #404040; color: #fafafa; }
|
|
|
|
/* ============== DIRECTION 1: Compact Grid ============== */
|
|
.d1-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px; }
|
|
.d1-card { background: #171717; border: 1px solid #262626; border-radius: 8px; padding: 12px; transition: all 0.15s; cursor: pointer; }
|
|
.d1-card:hover { border-color: #404040; background: #1c1c1c; }
|
|
.d1-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
.d1-card-name { font-size: 14px; font-weight: 500; }
|
|
.d1-card-branch { font-size: 12px; color: #737373; font-family: "SF Mono", "Cascadia Code", monospace; }
|
|
.d1-card-stats { display: flex; gap: 8px; font-size: 11px; color: #737373; margin-top: 8px; }
|
|
.d1-card-stats span { display: flex; align-items: center; gap: 3px; }
|
|
.d1-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; }
|
|
.d1-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #262626; }
|
|
.d1-time { font-size: 11px; color: #737373; }
|
|
|
|
/* ============== DIRECTION 2: Spacious Cards ============== */
|
|
.d2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 24px; }
|
|
.d2-card { background: #171717; border: 1px solid #262626; border-radius: 12px; padding: 20px; transition: all 0.15s; cursor: pointer; }
|
|
.d2-card:hover { border-color: #404040; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
|
|
.d2-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
|
|
.d2-card-name { font-size: 16px; font-weight: 500; margin-bottom: 2px; }
|
|
.d2-card-path { font-size: 11px; color: #737373; }
|
|
.d2-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
|
|
.d2-branch { font-size: 13px; font-family: "SF Mono", "Cascadia Code", monospace; color: #d4d4d4; background: #262626; padding: 2px 8px; border-radius: 4px; }
|
|
.d2-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
|
|
.d2-metric { text-align: center; padding: 8px; background: #0a0a0a; border-radius: 6px; }
|
|
.d2-metric-val { font-size: 16px; font-weight: 600; }
|
|
.d2-metric-label { font-size: 10px; color: #737373; margin-top: 2px; }
|
|
.d2-ai-line { font-size: 12px; color: #737373; font-style: italic; padding: 8px; background: #0a0a0a; border-radius: 6px; border-left: 2px solid #3b82f6; }
|
|
.d2-card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
|
|
|
|
/* ============== DIRECTION 3: List-First ============== */
|
|
.d3-list { padding: 16px; }
|
|
.d3-row { display: grid; grid-template-columns: 32px 32px 1fr 140px 80px 80px 120px 40px; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #1a1a1a; transition: background 0.1s; cursor: pointer; }
|
|
.d3-row:hover { background: #1c1c1c; }
|
|
.d3-row-header { font-size: 11px; color: #737373; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #404040; padding-bottom: 8px; }
|
|
.d3-row-header:hover { background: transparent; cursor: default; }
|
|
.d3-checkbox { width: 16px; height: 16px; border-radius: 3px; border: 1px solid #404040; }
|
|
.d3-name { font-size: 14px; font-weight: 500; }
|
|
.d3-branch { font-size: 12px; font-family: "SF Mono", "Cascadia Code", monospace; color: #737373; }
|
|
.d3-count { font-size: 13px; font-weight: 500; text-align: center; }
|
|
.d3-time { font-size: 12px; color: #737373; }
|
|
.d3-action { font-size: 14px; color: #737373; cursor: pointer; }
|
|
|
|
/* ============== DIRECTION 4: Stats Bar + Grid ============== */
|
|
.d4-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 16px; }
|
|
.d4-stat-card { background: #171717; border: 1px solid #262626; border-radius: 8px; padding: 12px 16px; text-align: center; }
|
|
.d4-stat-num { font-size: 28px; font-weight: 700; }
|
|
.d4-stat-label { font-size: 11px; color: #737373; margin-top: 2px; }
|
|
.d4-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 0 16px 16px; }
|
|
|
|
/* ============== DIRECTION 5: Hybrid Detail Panel ============== */
|
|
.d5-layout { display: grid; grid-template-columns: 1fr 340px; min-height: 600px; }
|
|
.d5-main { padding: 16px; border-right: 1px solid #262626; }
|
|
.d5-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
|
|
.d5-mini-card { background: #171717; border: 1px solid #262626; border-radius: 6px; padding: 10px; cursor: pointer; transition: all 0.1s; }
|
|
.d5-mini-card:hover { border-color: #404040; }
|
|
.d5-mini-card.selected { border-color: #3b82f6; background: #1a1f2e; }
|
|
.d5-mini-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
|
|
.d5-mini-meta { font-size: 11px; color: #737373; display: flex; gap: 8px; }
|
|
.d5-detail { padding: 20px; background: #0f0f0f; }
|
|
.d5-detail h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
|
|
.d5-detail-path { font-size: 12px; color: #737373; margin-bottom: 16px; }
|
|
.d5-detail-section { margin-bottom: 16px; }
|
|
.d5-detail-label { font-size: 11px; color: #737373; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
|
.d5-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.d5-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; border: 1px solid #404040; background: #262626; color: #d4d4d4; cursor: pointer; }
|
|
.d5-btn:hover { background: #404040; }
|
|
.d5-btn-primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
|
|
.d5-btn-primary:hover { background: #2563eb; }
|
|
|
|
/* ============== DIRECTION 6: Minimal Zen ============== */
|
|
.d6-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 24px; }
|
|
.d6-card { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 16px; text-align: center; transition: all 0.15s; cursor: pointer; }
|
|
.d6-card:hover { background: #171717; border-color: #262626; }
|
|
.d6-icon { font-size: 28px; margin-bottom: 8px; }
|
|
.d6-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
|
|
.d6-status-text { font-size: 12px; }
|
|
.d6-time { font-size: 11px; color: #737373; margin-top: 4px; }
|
|
|
|
/* Prose descriptions */
|
|
.prose { max-width: 700px; }
|
|
.prose h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; color: #fafafa; }
|
|
.prose ul { padding-left: 20px; }
|
|
.prose li { font-size: 14px; color: #d4d4d4; margin-bottom: 4px; }
|
|
.prose p { font-size: 14px; color: #d4d4d4; line-height: 1.6; margin-bottom: 8px; }
|
|
.prose .note { background: #171717; border-left: 3px solid #3b82f6; padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 16px 0; }
|
|
.prose .note p { margin: 0; font-size: 13px; color: #737373; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<div class="nav">
|
|
<h1>GitPulse Design Directions</h1>
|
|
<button class="active" onclick="showDir(1)">D1: Compact Grid</button>
|
|
<button onclick="showDir(2)">D2: Spacious Cards</button>
|
|
<button onclick="showDir(3)">D3: List-First</button>
|
|
<button onclick="showDir(4)">D4: Stats + Grid</button>
|
|
<button onclick="showDir(5)">D5: Hybrid Panel</button>
|
|
<button onclick="showDir(6)">D6: Minimal Zen</button>
|
|
<button onclick="showDir('rec')">Recommendation</button>
|
|
</div>
|
|
|
|
<!-- ============== DIRECTION 1: Compact Grid ============== -->
|
|
<div class="direction active" id="dir1">
|
|
<div class="dir-header">
|
|
<h2>Direction 1: Compact Grid</h2>
|
|
<p>Maximum information density. Every pixel earns its place. Inspired by Docker Desktop's container list and lazygit's TUI density.</p>
|
|
<div class="tags">
|
|
<span class="tag">Dense</span>
|
|
<span class="tag">Developer-native</span>
|
|
<span class="tag">Scan-first</span>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-container">
|
|
<div class="mockup-frame">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title">GitPulse</span>
|
|
<span style="font-size:12px;color:#737373">12 repos</span>
|
|
<div class="toggle-group">
|
|
<button class="toggle-btn active">Grid</button>
|
|
<button class="toggle-btn">List</button>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<button class="filter-pill active">All</button>
|
|
<button class="filter-pill">Dirty</button>
|
|
<button class="filter-pill">Behind</button>
|
|
<button class="filter-pill">Dormant</button>
|
|
<div class="privacy privacy-local">Shield Local</div>
|
|
</div>
|
|
</div>
|
|
<div class="d1-grid">
|
|
<!-- Clean repos -->
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">react-dashboard</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong class="s-ahead">3</strong></span>
|
|
<span>Behind: <strong>0</strong></span>
|
|
<span>Stash: <strong>0</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">2h ago</span>
|
|
<span class="d1-badge" style="background:#262626;color:#737373;">3 commits ahead</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">api-gateway</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong>0</strong></span>
|
|
<span>Behind: <strong>0</strong></span>
|
|
<span>Stash: <strong>0</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">5h ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dirty repo -->
|
|
<div class="d1-card" style="border-color:#3b1a1a;">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">auth-service</span>
|
|
<span class="d1-badge bg-dirty s-dirty">Dirty</span>
|
|
</div>
|
|
<div class="d1-card-branch">feature/sso</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong class="s-ahead">7</strong></span>
|
|
<span>Behind: <strong>0</strong></span>
|
|
<span>Stash: <strong>1</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">30m ago</span>
|
|
<span class="d1-badge bg-dirty s-dirty">3 uncommitted</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">design-system</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong>0</strong></span>
|
|
<span>Behind: <strong>0</strong></span>
|
|
<span>Stash: <strong>0</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">1d ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Behind repo -->
|
|
<div class="d1-card" style="border-color:#3b2a10;">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">shared-libs</span>
|
|
<span class="d1-badge bg-behind s-behind">Behind</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong>0</strong></span>
|
|
<span>Behind: <strong class="s-behind">12</strong></span>
|
|
<span>Stash: <strong>0</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">3d ago</span>
|
|
<span class="d1-badge bg-behind s-behind">12 commits behind</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">docs-site</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong>0</strong></span>
|
|
<span>Behind: <strong>0</strong></span>
|
|
<span>Stash: <strong>0</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">6h ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dormant repo -->
|
|
<div class="d1-card" style="opacity:0.6;">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">old-experiment</span>
|
|
<span class="d1-badge bg-dormant s-dormant">Dormant</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong>0</strong></span>
|
|
<span>Behind: <strong class="s-behind">24</strong></span>
|
|
<span>Stash: <strong>0</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">3 months ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">mobile-app</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">develop</div>
|
|
<div class="d1-card-stats">
|
|
<span>Ahead: <strong class="s-ahead">1</strong></span>
|
|
<span>Behind: <strong>0</strong></span>
|
|
<span>Stash: <strong>2</strong></span>
|
|
</div>
|
|
<div class="d1-card-footer">
|
|
<span class="d1-time">4h ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dir-header">
|
|
<div class="prose">
|
|
<h3>Strengths</h3>
|
|
<ul>
|
|
<li>Maximum info density — up to 20+ repos visible without scrolling on 1200px width</li>
|
|
<li>Status badges pop immediately — clean/dirty/behind distinguishable in < 1 second</li>
|
|
<li>Familiar pattern — card grids are well understood by developers</li>
|
|
</ul>
|
|
<h3>Trade-offs</h3>
|
|
<ul>
|
|
<li>Less room for AI summaries — Smart Status would be a subtle one-liner</li>
|
|
<li>Dense feel might be overwhelming for Jay (< 10 repos)</li>
|
|
<li>Card height varies with content — grid alignment can shift</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============== DIRECTION 2: Spacious Cards ============== -->
|
|
<div class="direction" id="dir2">
|
|
<div class="dir-header">
|
|
<h2>Direction 2: Spacious Cards</h2>
|
|
<p>Breathing room for each repo. Metrics front-and-center. AI summaries visible. Premium feel inspired by Linear and Vercel dashboards.</p>
|
|
<div class="tags">
|
|
<span class="tag">Spacious</span>
|
|
<span class="tag">Metric-rich</span>
|
|
<span class="tag">AI-forward</span>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-container">
|
|
<div class="mockup-frame">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title">GitPulse</span>
|
|
<span style="font-size:12px;color:#737373">12 repos</span>
|
|
<div class="toggle-group">
|
|
<button class="toggle-btn active">Grid</button>
|
|
<button class="toggle-btn">List</button>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<button class="filter-pill active">All</button>
|
|
<button class="filter-pill">Dirty</button>
|
|
<button class="filter-pill">Behind</button>
|
|
<button class="filter-pill">Dormant</button>
|
|
<div class="privacy privacy-local">Shield Local</div>
|
|
</div>
|
|
</div>
|
|
<div class="d2-grid">
|
|
<div class="d2-card">
|
|
<div class="d2-card-top">
|
|
<div>
|
|
<div class="d2-card-name">react-dashboard</div>
|
|
<div class="d2-card-path">~/projects/react-dashboard</div>
|
|
</div>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d2-status-row">
|
|
<span class="d2-branch">main</span>
|
|
<span class="d1-badge bg-ahead s-ahead" style="font-size:11px;">+3 ahead</span>
|
|
</div>
|
|
<div class="d2-metrics">
|
|
<div class="d2-metric"><div class="d2-metric-val s-ahead">3</div><div class="d2-metric-label">Ahead</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Behind</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Stash</div></div>
|
|
</div>
|
|
<div class="d2-ai-line">AI: 3 unpushed commits on feature branch. Ready for PR.</div>
|
|
<div class="d2-card-bottom">
|
|
<span class="d1-time">Last commit: 2h ago</span>
|
|
<span class="d2-branch" style="font-size:11px;">main</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d2-card" style="border-color:#3b1a1a;">
|
|
<div class="d2-card-top">
|
|
<div>
|
|
<div class="d2-card-name">auth-service</div>
|
|
<div class="d2-card-path">~/projects/auth-service</div>
|
|
</div>
|
|
<span class="d1-badge bg-dirty s-dirty">Dirty</span>
|
|
</div>
|
|
<div class="d2-status-row">
|
|
<span class="d2-branch">feature/sso</span>
|
|
<span class="d1-badge bg-ahead s-ahead" style="font-size:11px;">+7 ahead</span>
|
|
</div>
|
|
<div class="d2-metrics">
|
|
<div class="d2-metric"><div class="d2-metric-val s-ahead">7</div><div class="d2-metric-label">Ahead</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Behind</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">1</div><div class="d2-metric-label">Stash</div></div>
|
|
</div>
|
|
<div class="d2-ai-line">AI: 3 uncommitted changes in auth module. SSO integration in progress.</div>
|
|
<div class="d2-card-bottom">
|
|
<span class="d1-time">Last commit: 30m ago</span>
|
|
<span class="d1-badge bg-dirty s-dirty">3 uncommitted</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d2-card">
|
|
<div class="d2-card-top">
|
|
<div>
|
|
<div class="d2-card-name">api-gateway</div>
|
|
<div class="d2-card-path">~/projects/api-gateway</div>
|
|
</div>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d2-status-row">
|
|
<span class="d2-branch">main</span>
|
|
</div>
|
|
<div class="d2-metrics">
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Ahead</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Behind</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Stash</div></div>
|
|
</div>
|
|
<div class="d2-card-bottom">
|
|
<span class="d1-time">Last commit: 5h ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dir-header">
|
|
<div class="prose">
|
|
<h3>Strengths</h3>
|
|
<ul>
|
|
<li>AI summaries have prominent space — Smart Status is a key feature</li>
|
|
<li>Metric boxes give immediate numeric context</li>
|
|
<li>Premium feel — more visual whitespace, less "dense tool" impression</li>
|
|
</ul>
|
|
<h3>Trade-offs</h3>
|
|
<ul>
|
|
<li>Fewer repos visible at once — 6-8 cards max on 1200px width</li>
|
|
<li>More vertical scrolling needed for 20+ repos</li>
|
|
<li>Higher card height = more mouse travel between actions</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============== DIRECTION 3: List-First ============== -->
|
|
<div class="direction" id="dir3">
|
|
<div class="dir-header">
|
|
<h2>Direction 3: List-First</h2>
|
|
<p>Table/list as the primary view. Maximum scanability for power users. Batch operations are natural with checkboxes.</p>
|
|
<div class="tags">
|
|
<span class="tag">Table</span>
|
|
<span class="tag">Batch-native</span>
|
|
<span class="tag">Power user</span>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-container">
|
|
<div class="mockup-frame">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title">GitPulse</span>
|
|
<span style="font-size:12px;color:#737373">12 repos</span>
|
|
<div class="toggle-group">
|
|
<button class="toggle-btn">Grid</button>
|
|
<button class="toggle-btn active">List</button>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<button class="filter-pill active">All</button>
|
|
<button class="filter-pill">Dirty</button>
|
|
<button class="filter-pill">Behind</button>
|
|
<button class="filter-pill">Dormant</button>
|
|
<div class="privacy privacy-local">Shield Local</div>
|
|
</div>
|
|
</div>
|
|
<div class="d3-list">
|
|
<div class="d3-row d3-row-header">
|
|
<div></div>
|
|
<div>Status</div>
|
|
<div>Repository</div>
|
|
<div>Branch</div>
|
|
<div style="text-align:center">Ahead</div>
|
|
<div style="text-align:center">Behind</div>
|
|
<div>Last Commit</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="d3-row">
|
|
<div class="d3-checkbox"></div>
|
|
<div class="s-clean">Check</div>
|
|
<div class="d3-name">react-dashboard</div>
|
|
<div class="d3-branch">main</div>
|
|
<div class="d3-count s-ahead">3</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-time">2h ago</div>
|
|
<div class="d3-action">⋮</div>
|
|
</div>
|
|
<div class="d3-row" style="background:#1a1210;">
|
|
<div class="d3-checkbox"></div>
|
|
<div class="s-dirty">Alert</div>
|
|
<div class="d3-name">auth-service</div>
|
|
<div class="d3-branch">feature/sso</div>
|
|
<div class="d3-count s-ahead">7</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-time">30m ago</div>
|
|
<div class="d3-action">⋮</div>
|
|
</div>
|
|
<div class="d3-row">
|
|
<div class="d3-checkbox"></div>
|
|
<div class="s-clean">Check</div>
|
|
<div class="d3-name">api-gateway</div>
|
|
<div class="d3-branch">main</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-time">5h ago</div>
|
|
<div class="d3-action">⋮</div>
|
|
</div>
|
|
<div class="d3-row">
|
|
<div class="d3-checkbox"></div>
|
|
<div class="s-clean">Check</div>
|
|
<div class="d3-name">design-system</div>
|
|
<div class="d3-branch">main</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-time">1d ago</div>
|
|
<div class="d3-action">⋮</div>
|
|
</div>
|
|
<div class="d3-row" style="background:#1a1510;">
|
|
<div class="d3-checkbox"></div>
|
|
<div class="s-behind">Arrow</div>
|
|
<div class="d3-name">shared-libs</div>
|
|
<div class="d3-branch">main</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-count s-behind">12</div>
|
|
<div class="d3-time">3d ago</div>
|
|
<div class="d3-action">⋮</div>
|
|
</div>
|
|
<div class="d3-row">
|
|
<div class="d3-checkbox"></div>
|
|
<div class="s-clean">Check</div>
|
|
<div class="d3-name">docs-site</div>
|
|
<div class="d3-branch">main</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-time">6h ago</div>
|
|
<div class="d3-action">⋮</div>
|
|
</div>
|
|
<div class="d3-row" style="opacity:0.5;">
|
|
<div class="d3-checkbox"></div>
|
|
<div class="s-dormant">Moon</div>
|
|
<div class="d3-name">old-experiment</div>
|
|
<div class="d3-branch">main</div>
|
|
<div class="d3-count">0</div>
|
|
<div class="d3-count s-behind">24</div>
|
|
<div class="d3-time">3 months ago</div>
|
|
<div class="d3-action">⋮</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dir-header">
|
|
<div class="prose">
|
|
<h3>Strengths</h3>
|
|
<ul>
|
|
<li>Maximum scanability — all repos in a compact table, easy to compare</li>
|
|
<li>Batch operations natural — checkboxes + select all + batch toolbar</li>
|
|
<li>Sortable columns — click "Behind" header to sort by behind count</li>
|
|
</ul>
|
|
<h3>Trade-offs</h3>
|
|
<ul>
|
|
<li>Less visual than cards — status colors smaller, less "at a glance"</li>
|
|
<li>No room for AI summaries in list rows</li>
|
|
<li>Less engaging for first-time users and Jay persona</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============== DIRECTION 4: Stats Bar + Grid ============== -->
|
|
<div class="direction" id="dir4">
|
|
<div class="dir-header">
|
|
<h2>Direction 4: Stats Dashboard + Grid</h2>
|
|
<p>Summary metrics at the top, then card grid below. "Mission control" feel with aggregate stats before individual repos.</p>
|
|
<div class="tags">
|
|
<span class="tag">Dashboard</span>
|
|
<span class="tag">Metrics-first</span>
|
|
<span class="tag">Executive view</span>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-container">
|
|
<div class="mockup-frame">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title">GitPulse</span>
|
|
<span style="font-size:12px;color:#737373">12 repos</span>
|
|
<div class="toggle-group">
|
|
<button class="toggle-btn active">Grid</button>
|
|
<button class="toggle-btn">List</button>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="privacy privacy-local">Shield Local</div>
|
|
</div>
|
|
</div>
|
|
<div class="d4-stats">
|
|
<div class="d4-stat-card"><div class="d4-stat-num s-clean">7</div><div class="d4-stat-label">Clean</div></div>
|
|
<div class="d4-stat-card"><div class="d4-stat-num s-dirty">1</div><div class="d4-stat-label">Dirty</div></div>
|
|
<div class="d4-stat-card"><div class="d4-stat-num s-ahead">3</div><div class="d4-stat-label">Ahead</div></div>
|
|
<div class="d4-stat-card"><div class="d4-stat-num s-behind">2</div><div class="d4-stat-label">Behind</div></div>
|
|
<div class="d4-stat-card"><div class="d4-stat-num s-dormant">1</div><div class="d4-stat-label">Dormant</div></div>
|
|
</div>
|
|
<div class="d4-grid">
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">react-dashboard</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong class="s-ahead">3</strong></span><span>Behind: <strong>0</strong></span></div>
|
|
</div>
|
|
<div class="d1-card" style="border-color:#3b1a1a;">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">auth-service</span>
|
|
<span class="d1-badge bg-dirty s-dirty">Dirty</span>
|
|
</div>
|
|
<div class="d1-card-branch">feature/sso</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong class="s-ahead">7</strong></span><span>Behind: <strong>0</strong></span></div>
|
|
</div>
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">api-gateway</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong>0</strong></span><span>Behind: <strong>0</strong></span></div>
|
|
</div>
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">design-system</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong>0</strong></span><span>Behind: <strong>0</strong></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dir-header">
|
|
<div class="prose">
|
|
<h3>Strengths</h3>
|
|
<ul>
|
|
<li>Instant health overview — "7 clean, 1 dirty, 2 behind" visible without scanning cards</li>
|
|
<li>"Mission control" feel matches the product positioning</li>
|
|
<li>Stats bar provides context before diving into individual repos</li>
|
|
</ul>
|
|
<h3>Trade-offs</h3>
|
|
<ul>
|
|
<li>Takes vertical space from the card grid — fewer cards visible</li>
|
|
<li>Stats may be redundant with visual card scanning</li>
|
|
<li>Two "layers" of information could feel slower for experienced users</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============== DIRECTION 5: Hybrid Panel ============== -->
|
|
<div class="direction" id="dir5">
|
|
<div class="dir-header">
|
|
<h2>Direction 5: Hybrid Detail Panel</h2>
|
|
<p>Split view — compact repo list on the left, detailed view on the right. Click a repo to see full details, AI summary, and actions.</p>
|
|
<div class="tags">
|
|
<span class="tag">Split view</span>
|
|
<span class="tag">Detail-rich</span>
|
|
<span class="tag">IDE-inspired</span>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-container">
|
|
<div class="mockup-frame">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title">GitPulse</span>
|
|
<span style="font-size:12px;color:#737373">12 repos</span>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="privacy privacy-cloud">Cloud DeepSeek</div>
|
|
</div>
|
|
</div>
|
|
<div class="d5-layout">
|
|
<div class="d5-main">
|
|
<div style="padding:0 0 8px;font-size:12px;color:#737373;">Repositories</div>
|
|
<div class="d5-grid">
|
|
<div class="d5-mini-card">
|
|
<div class="d5-mini-name">react-dashboard</div>
|
|
<div class="d5-mini-meta"><span class="s-clean">Clean</span><span>main</span><span>+3</span></div>
|
|
</div>
|
|
<div class="d5-mini-card" style="border-color:#3b1a1a;">
|
|
<div class="d5-mini-name">auth-service</div>
|
|
<div class="d5-mini-meta"><span class="s-dirty">Dirty</span><span>feature/sso</span><span>+7</span></div>
|
|
</div>
|
|
<div class="d5-mini-card selected">
|
|
<div class="d5-mini-name">api-gateway</div>
|
|
<div class="d5-mini-meta"><span class="s-clean">Clean</span><span>main</span><span>synced</span></div>
|
|
</div>
|
|
<div class="d5-mini-card">
|
|
<div class="d5-mini-name">design-system</div>
|
|
<div class="d5-mini-meta"><span class="s-clean">Clean</span><span>main</span><span>synced</span></div>
|
|
</div>
|
|
<div class="d5-mini-card">
|
|
<div class="d5-mini-name">shared-libs</div>
|
|
<div class="d5-mini-meta"><span class="s-behind">Behind</span><span>main</span><span>-12</span></div>
|
|
</div>
|
|
<div class="d5-mini-card">
|
|
<div class="d5-mini-name">docs-site</div>
|
|
<div class="d5-mini-meta"><span class="s-clean">Clean</span><span>main</span><span>synced</span></div>
|
|
</div>
|
|
<div class="d5-mini-card" style="opacity:0.5;">
|
|
<div class="d5-mini-name">old-experiment</div>
|
|
<div class="d5-mini-meta"><span class="s-dormant">Dormant</span><span>main</span><span>-24</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d5-detail">
|
|
<h3>api-gateway</h3>
|
|
<div class="d5-detail-path">~/projects/api-gateway</div>
|
|
<div class="d5-detail-section">
|
|
<div class="d5-detail-label">Status</div>
|
|
<div style="display:flex;align-items:center;gap:8px;">
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
<span class="d2-branch">main</span>
|
|
<span style="font-size:12px;color:#737373;">Synced with remote</span>
|
|
</div>
|
|
</div>
|
|
<div class="d5-detail-section">
|
|
<div class="d5-detail-label">Metrics</div>
|
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;">
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Ahead</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Behind</div></div>
|
|
<div class="d2-metric"><div class="d2-metric-val">0</div><div class="d2-metric-label">Stash</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="d5-detail-section">
|
|
<div class="d5-detail-label">Smart Status (DeepSeek)</div>
|
|
<div class="d2-ai-line">Repo is clean and synced. Last commit 5h ago updated rate limiting middleware. No pending changes or open issues.</div>
|
|
</div>
|
|
<div class="d5-detail-section">
|
|
<div class="d5-detail-label">Actions</div>
|
|
<div class="d5-detail-actions">
|
|
<button class="d5-btn d5-btn-primary">Pull</button>
|
|
<button class="d5-btn">Push</button>
|
|
<button class="d5-btn">Fetch</button>
|
|
<button class="d5-btn">Open Terminal</button>
|
|
</div>
|
|
</div>
|
|
<div class="d5-detail-section">
|
|
<div class="d5-detail-label">Recent Commits</div>
|
|
<div style="font-size:12px;color:#737373;">
|
|
<div style="padding:4px 0;border-bottom:1px solid #1a1a1a;">a3f2b1c — Update rate limiter config (5h ago)</div>
|
|
<div style="padding:4px 0;border-bottom:1px solid #1a1a1a;">e7d4c2a — Add health check endpoint (1d ago)</div>
|
|
<div style="padding:4px 0;">b1f8a3d — Fix timeout handling (2d ago)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dir-header">
|
|
<div class="prose">
|
|
<h3>Strengths</h3>
|
|
<ul>
|
|
<li>Rich detail panel — AI summaries, commits, metrics all visible without navigation</li>
|
|
<li>Actions always accessible — pull/push/fetch buttons right there</li>
|
|
<li>IDE-inspired split — developers know this pattern from VS Code, editors</li>
|
|
</ul>
|
|
<h3>Trade-offs</h3>
|
|
<ul>
|
|
<li>Only one repo visible at a time in detail — loses multi-repo "at a glance"</li>
|
|
<li>Left panel becomes a narrow list — less visual than Card Grid</li>
|
|
<li>More complex layout — harder to implement, more layout shifts</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============== DIRECTION 6: Minimal Zen ============== -->
|
|
<div class="direction" id="dir6">
|
|
<div class="dir-header">
|
|
<h2>Direction 6: Minimal Zen</h2>
|
|
<p>Ultra-clean, almost invisible UI. Status as color blocks. Click to expand. Maximum whitespace, minimum chrome.</p>
|
|
<div class="tags">
|
|
<span class="tag">Minimal</span>
|
|
<span class="tag">Zen</span>
|
|
<span class="tag">Progressive reveal</span>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-container">
|
|
<div class="mockup-frame">
|
|
<div class="topbar" style="border-bottom:none;">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title" style="font-weight:400;color:#737373;">GitPulse</span>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="privacy privacy-local" style="border:none;background:none;">Shield Local</div>
|
|
</div>
|
|
</div>
|
|
<div class="d6-grid">
|
|
<div class="d6-card">
|
|
<div class="d6-icon s-clean">●</div>
|
|
<div class="d6-name">react-dashboard</div>
|
|
<div class="d6-status-text s-ahead">+3 ahead</div>
|
|
<div class="d6-time">2h ago</div>
|
|
</div>
|
|
<div class="d6-card">
|
|
<div class="d6-icon s-dirty">●</div>
|
|
<div class="d6-name">auth-service</div>
|
|
<div class="d6-status-text s-dirty">3 uncommitted</div>
|
|
<div class="d6-time">30m ago</div>
|
|
</div>
|
|
<div class="d6-card">
|
|
<div class="d6-icon s-clean">●</div>
|
|
<div class="d6-name">api-gateway</div>
|
|
<div class="d6-status-text s-clean">Synced</div>
|
|
<div class="d6-time">5h ago</div>
|
|
</div>
|
|
<div class="d6-card">
|
|
<div class="d6-icon s-clean">●</div>
|
|
<div class="d6-name">design-system</div>
|
|
<div class="d6-status-text s-clean">Synced</div>
|
|
<div class="d6-time">1d ago</div>
|
|
</div>
|
|
<div class="d6-card">
|
|
<div class="d6-icon s-behind">●</div>
|
|
<div class="d6-name">shared-libs</div>
|
|
<div class="d6-status-text s-behind">-12 behind</div>
|
|
<div class="d6-time">3d ago</div>
|
|
</div>
|
|
<div class="d6-card">
|
|
<div class="d6-icon s-clean">●</div>
|
|
<div class="d6-name">docs-site</div>
|
|
<div class="d6-status-text s-clean">Synced</div>
|
|
<div class="d6-time">6h ago</div>
|
|
</div>
|
|
<div class="d6-card" style="opacity:0.4;">
|
|
<div class="d6-icon s-dormant">●</div>
|
|
<div class="d6-name">old-experiment</div>
|
|
<div class="d6-status-text s-dormant">Dormant</div>
|
|
<div class="d6-time">3 months ago</div>
|
|
</div>
|
|
<div class="d6-card">
|
|
<div class="d6-icon s-clean">●</div>
|
|
<div class="d6-name">mobile-app</div>
|
|
<div class="d6-status-text s-ahead">+1 ahead</div>
|
|
<div class="d6-time">4h ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dir-header">
|
|
<div class="prose">
|
|
<h3>Strengths</h3>
|
|
<ul>
|
|
<li>Maximum repos visible at once — 15+ on 1200px width</li>
|
|
<li>Beautiful in its simplicity — status dots create a visual pattern</li>
|
|
<li>Click-to-expand model keeps the base view uncluttered</li>
|
|
</ul>
|
|
<h3>Trade-offs</h3>
|
|
<ul>
|
|
<li>Too minimal for power users — no metrics, branch names, or counts visible</li>
|
|
<li>No room for AI summaries, batch operations, or filters</li>
|
|
<li>Risks feeling like a prototype rather than a complete product</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============== RECOMMENDATION ============== -->
|
|
<div class="direction" id="dir-rec">
|
|
<div class="dir-header">
|
|
<h2>Recommended Direction: D1 Compact Grid + D4 Stats Bar</h2>
|
|
<p>Combining the density of D1 with the summary context of D4. The stats bar is collapsible — visible by default, hideable for power users who just want the grid.</p>
|
|
<div class="tags">
|
|
<span class="tag">Recommended</span>
|
|
<span class="tag">Best of both</span>
|
|
<span class="tag">Collapsible stats</span>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-container">
|
|
<div class="mockup-frame">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title">GitPulse</span>
|
|
<div class="toggle-group">
|
|
<button class="toggle-btn active">Grid</button>
|
|
<button class="toggle-btn">List</button>
|
|
</div>
|
|
<button class="filter-pill active">All (12)</button>
|
|
<button class="filter-pill">Dirty (1)</button>
|
|
<button class="filter-pill">Behind (2)</button>
|
|
<button class="filter-pill">Dormant (1)</button>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<span style="font-size:12px;color:#737373;">Rescan</span>
|
|
<div class="privacy privacy-local">Shield Local</div>
|
|
</div>
|
|
</div>
|
|
<!-- Collapsible Stats Bar -->
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px 16px;background:#0f0f0f;border-bottom:1px solid #262626;">
|
|
<div style="text-align:center;padding:6px;border-radius:6px;background:#171717;"><span style="font-size:18px;font-weight:700;color:#22c55e;">7</span><div style="font-size:10px;color:#737373;">Clean</div></div>
|
|
<div style="text-align:center;padding:6px;border-radius:6px;background:#171717;"><span style="font-size:18px;font-weight:700;color:#ef4444;">1</span><div style="font-size:10px;color:#737373;">Dirty</div></div>
|
|
<div style="text-align:center;padding:6px;border-radius:6px;background:#171717;"><span style="font-size:18px;font-weight:700;color:#3b82f6;">3</span><div style="font-size:10px;color:#737373;">Ahead</div></div>
|
|
<div style="text-align:center;padding:6px;border-radius:6px;background:#171717;"><span style="font-size:18px;font-weight:700;color:#f97316;">2</span><div style="font-size:10px;color:#737373;">Behind</div></div>
|
|
<div style="text-align:center;padding:6px;border-radius:6px;background:#171717;"><span style="font-size:18px;font-weight:700;color:#737373;">1</span><div style="font-size:10px;color:#737373;">Dormant</div></div>
|
|
</div>
|
|
<div class="d1-grid" style="padding-bottom:24px;">
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">react-dashboard</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong class="s-ahead">3</strong></span><span>Behind: <strong>0</strong></span><span>Stash: <strong>0</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">2h ago</span><span class="d1-badge" style="background:#262626;color:#737373;">3 unpushed</span></div>
|
|
</div>
|
|
<div class="d1-card" style="border-color:#3b1a1a;">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">auth-service</span>
|
|
<span class="d1-badge bg-dirty s-dirty">Dirty</span>
|
|
</div>
|
|
<div class="d1-card-branch">feature/sso</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong class="s-ahead">7</strong></span><span>Behind: <strong>0</strong></span><span>Stash: <strong>1</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">30m ago</span><span class="d1-badge bg-dirty s-dirty">3 uncommitted</span></div>
|
|
</div>
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">api-gateway</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong>0</strong></span><span>Behind: <strong>0</strong></span><span>Stash: <strong>0</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">5h ago</span></div>
|
|
</div>
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">design-system</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong>0</strong></span><span>Behind: <strong>0</strong></span><span>Stash: <strong>0</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">1d ago</span></div>
|
|
</div>
|
|
<div class="d1-card" style="border-color:#3b2a10;">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">shared-libs</span>
|
|
<span class="d1-badge bg-behind s-behind">Behind</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong>0</strong></span><span>Behind: <strong class="s-behind">12</strong></span><span>Stash: <strong>0</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">3d ago</span><span class="d1-badge bg-behind s-behind">12 behind</span></div>
|
|
</div>
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">docs-site</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong>0</strong></span><span>Behind: <strong>0</strong></span><span>Stash: <strong>0</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">6h ago</span></div>
|
|
</div>
|
|
<div class="d1-card" style="opacity:0.5;">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">old-experiment</span>
|
|
<span class="d1-badge bg-dormant s-dormant">Dormant</span>
|
|
</div>
|
|
<div class="d1-card-branch">main</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong>0</strong></span><span>Behind: <strong class="s-behind">24</strong></span><span>Stash: <strong>0</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">3 months ago</span></div>
|
|
</div>
|
|
<div class="d1-card">
|
|
<div class="d1-card-header">
|
|
<span class="d1-card-name">mobile-app</span>
|
|
<span class="d1-badge bg-clean s-clean">Clean</span>
|
|
</div>
|
|
<div class="d1-card-branch">develop</div>
|
|
<div class="d1-card-stats"><span>Ahead: <strong class="s-ahead">1</strong></span><span>Behind: <strong>0</strong></span><span>Stash: <strong>2</strong></span></div>
|
|
<div class="d1-card-footer"><span class="d1-time">4h ago</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dir-header">
|
|
<div class="prose">
|
|
<h3>Why This Combination</h3>
|
|
<p>The compact card grid (D1) gives the 2-second pattern recognition that defines GitPulse's core experience. The collapsible stats bar (D4) adds a "mission control" overview without sacrificing grid density.</p>
|
|
<div class="note">
|
|
<p>The stats bar is collapsible — power users who just want the grid can hide it. Jay (< 10 repos) sees it as reassuring context. The list view (D3) is available as a toggle for batch operations and power-user workflows.</p>
|
|
</div>
|
|
<h3>Key Elements</h3>
|
|
<ul>
|
|
<li><strong>Stats bar:</strong> Always visible by default, collapsible via toggle. Shows clean/dirty/ahead/behind/dormant counts with status colors.</li>
|
|
<li><strong>Card Grid:</strong> Compact cards from D1 with status badge, branch, ahead/behind/stash counts, last commit time.</li>
|
|
<li><strong>Filter pills:</strong> In top bar with counts — "All (12)", "Dirty (1)", "Behind (2)". Click to filter.</li>
|
|
<li><strong>Privacy Badge:</strong> Always visible in top-right corner. Local = green shield, Cloud = amber cloud icon.</li>
|
|
<li><strong>List View:</strong> D3 table layout available via Grid/List toggle. Natural for batch operations.</li>
|
|
<li><strong>AI Smart Status:</strong> Optional one-liner in card footer (blue left border), visible when AI is configured.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showDir(n) {
|
|
document.querySelectorAll('.direction').forEach(d => d.classList.remove('active'));
|
|
document.querySelectorAll('.nav button').forEach(b => b.classList.remove('active'));
|
|
const id = n === 'rec' ? 'dir-rec' : 'dir' + n;
|
|
document.getElementById(id).classList.add('active');
|
|
event.target.classList.add('active');
|
|
window.scrollTo(0, 0);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |