From 57e1cc172e27649b0d79a2708ffb7d619c550ed9 Mon Sep 17 00:00:00 2001
From: Bhuvanesh S <YOUR_GITHUB_EMAIL>
Date: Fri, 29 May 2026 18:30:56 +0530
Subject: [PATCH 1/2] feat: add AI Developer Reputation Engine dashboard

Signed-off-by: Bhuvanesh S <YOUR_GITHUB_EMAIL>
---
 .../lib/components/ContributionRadar.svelte   | 193 +++++++++++++++
 .../src/lib/components/OSSImpactGraph.svelte  | 149 +++++++++++
 .../lib/components/ReputationScoreCard.svelte | 204 +++++++++++++++
 apps/web/src/routes/dashboard/+page.svelte    | 233 ++++++++++++++++++
 4 files changed, 779 insertions(+)
 create mode 100644 apps/web/src/lib/components/ContributionRadar.svelte
 create mode 100644 apps/web/src/lib/components/OSSImpactGraph.svelte
 create mode 100644 apps/web/src/lib/components/ReputationScoreCard.svelte
 create mode 100644 apps/web/src/routes/dashboard/+page.svelte

diff --git a/apps/web/src/lib/components/ContributionRadar.svelte b/apps/web/src/lib/components/ContributionRadar.svelte
new file mode 100644
index 00000000..dc6951d6
--- /dev/null
+++ b/apps/web/src/lib/components/ContributionRadar.svelte
@@ -0,0 +1,193 @@
+<script lang="ts">
+  let {
+    data = [
+      { label: 'Frontend', value: 85 },
+      { label: 'Backend', value: 60 },
+      { label: 'DevOps', value: 40 },
+      { label: 'Community', value: 75 },
+      { label: 'Architecture', value: 50 }
+    ],
+    size = 240
+  } = $props<{
+    data?: { label: string, value: number }[];
+    size?: number;
+  }>();
+
+  // Radar chart logic
+  let center = $derived(size / 2);
+  let radius = $derived(center * 0.7); // Leave room for labels
+  let sides = $derived(data.length);
+  let angle = $derived((Math.PI * 2) / sides);
+
+  // Calculate coordinates for a given value (0-100) at a specific index
+  function getCoordinates(value: number, index: number) {
+    const r = (value / 100) * radius;
+    // -Math.PI/2 to start at the top
+    const theta = index * angle - Math.PI / 2;
+    return {
+      x: center + r * Math.cos(theta),
+      y: center + r * Math.sin(theta)
+    };
+  }
+
+  // Generate the polygon points string for the data
+  let dataPoints = $derived(
+    data.map((d, i) => {
+      const { x, y } = getCoordinates(d.value, i);
+      return `${x},${y}`;
+    }).join(' ')
+  );
+
+  // Generate grid levels (20, 40, 60, 80, 100)
+  let gridLevels = [20, 40, 60, 80, 100];
+  
+  function getGridPolygon(level: number) {
+    let points = [];
+    for (let i = 0; i < sides; i++) {
+      const { x, y } = getCoordinates(level, i);
+      points.push(`${x},${y}`);
+    }
+    return points.join(' ');
+  }
+
+  // Generate label coordinates
+  let labels = $derived(
+    data.map((d, i) => {
+      // Push labels out slightly further than 100%
+      const { x, y } = getCoordinates(120, i);
+      return { x, y, text: d.label };
+    })
+  );
+</script>
+
+<div class="radar-container glass">
+  <h3>Contribution Radar</h3>
+  
+  <div class="svg-wrapper">
+    <svg width={size} height={size} viewBox="0 0 {size} {size}">
+      <!-- Grid polygons -->
+      {#each gridLevels as level}
+        <polygon 
+          points={getGridPolygon(level)} 
+          class="grid-polygon" 
+        />
+      {/each}
+
+      <!-- Axes lines -->
+      {#each data as _, i}
+        {@const { x, y } = getCoordinates(100, i)}
+        <line 
+          x1={center} y1={center} 
+          x2={x} y2={y} 
+          class="axis-line" 
+        />
+      {/each}
+
+      <!-- Data Polygon -->
+      <polygon 
+        points={dataPoints} 
+        class="data-polygon" 
+      />
+
+      <!-- Data Points -->
+      {#each data as d, i}
+        {@const { x, y } = getCoordinates(d.value, i)}
+        <circle 
+          cx={x} cy={y} r="4" 
+          class="data-point" 
+          role="button"
+          aria-label="{d.label}: {d.value}%"
+          tabindex="0"
+        >
+          <title>{d.label}: {d.value}%</title>
+        </circle>
+      {/each}
+
+      <!-- Labels -->
+      {#each labels as label}
+        <text 
+          x={label.x} y={label.y} 
+          class="radar-label"
+          text-anchor="middle"
+          dominant-baseline="middle"
+        >
+          {label.text}
+        </text>
+      {/each}
+    </svg>
+  </div>
+</div>
+
+<style>
+  .radar-container {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    height: 100%;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+    align-self: flex-start;
+  }
+
+  .svg-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .grid-polygon {
+    fill: rgba(255, 255, 255, 0.02);
+    stroke: rgba(255, 255, 255, 0.1);
+    stroke-width: 1;
+  }
+
+  .axis-line {
+    stroke: rgba(255, 255, 255, 0.1);
+    stroke-width: 1;
+  }
+
+  .data-polygon {
+    fill: rgba(99, 102, 241, 0.3);
+    stroke: var(--primary);
+    stroke-width: 2;
+    stroke-linejoin: round;
+    transition: all 0.3s ease;
+  }
+
+  .data-polygon:hover {
+    fill: rgba(99, 102, 241, 0.45);
+  }
+
+  .data-point {
+    fill: var(--bg-primary);
+    stroke: var(--primary);
+    stroke-width: 2;
+    cursor: pointer;
+    transition: transform 0.2s ease, stroke-width 0.2s ease;
+  }
+
+  .data-point:hover, .data-point:focus-visible {
+    transform: scale(1.5);
+    stroke-width: 3;
+    outline: none;
+  }
+
+  .data-point:focus-visible {
+    stroke: #818cf8;
+  }
+
+  .radar-label {
+    fill: var(--text-secondary);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+</style>
diff --git a/apps/web/src/lib/components/OSSImpactGraph.svelte b/apps/web/src/lib/components/OSSImpactGraph.svelte
new file mode 100644
index 00000000..3fe7518b
--- /dev/null
+++ b/apps/web/src/lib/components/OSSImpactGraph.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+  let {
+    data = [
+      { label: 'Jan', value: 45 },
+      { label: 'Feb', value: 72 },
+      { label: 'Mar', value: 58 },
+      { label: 'Apr', value: 89 },
+      { label: 'May', value: 114 },
+      { label: 'Jun', value: 92 }
+    ],
+    title = 'OSS Impact (Commits/PRs)',
+    maxExpected = 150
+  } = $props<{
+    data?: { label: string, value: number }[];
+    title?: string;
+    maxExpected?: number;
+  }>();
+
+  let maxVal = $derived(Math.max(...data.map(d => d.value), maxExpected));
+</script>
+
+<div class="impact-graph glass">
+  <div class="graph-header">
+    <h3>{title}</h3>
+  </div>
+
+  <div class="graph-container">
+    <div class="y-axis">
+      <span>{maxVal}</span>
+      <span>{Math.round(maxVal / 2)}</span>
+      <span>0</span>
+    </div>
+    
+    <div class="bars-area">
+      {#each data as item}
+        <div class="bar-group">
+          <div 
+            class="bar" 
+            style="height: {(item.value / maxVal) * 100}%"
+            title="{item.value} contributions in {item.label}"
+            role="button"
+            aria-label="{item.value} contributions in {item.label}"
+            tabindex="0"
+          >
+            <div class="bar-fill"></div>
+          </div>
+          <span class="x-label">{item.label}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .impact-graph {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    height: 100%;
+  }
+
+  .graph-header h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .graph-container {
+    display: flex;
+    flex: 1;
+    gap: 1rem;
+    min-height: 200px;
+  }
+
+  .y-axis {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    padding-bottom: 24px; /* Space for x-labels */
+    text-align: right;
+  }
+
+  .bars-area {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 24px; /* Space for x-labels */
+    position: relative;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .bar-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+    position: relative;
+    width: 32px;
+  }
+
+  .bar {
+    width: 100%;
+    background: rgba(99, 102, 241, 0.15);
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .bar-fill {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background: linear-gradient(to top, rgba(99, 102, 241, 0.6), var(--primary));
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+  }
+
+  .bar:hover, .bar:focus-visible {
+    transform: translateY(-2px);
+    background: rgba(99, 102, 241, 0.25);
+  }
+
+  .bar:hover .bar-fill, .bar:focus-visible .bar-fill {
+    opacity: 1;
+    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
+  }
+
+  .bar:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 4px;
+  }
+
+  .x-label {
+    position: absolute;
+    bottom: -24px;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+</style>
diff --git a/apps/web/src/lib/components/ReputationScoreCard.svelte b/apps/web/src/lib/components/ReputationScoreCard.svelte
new file mode 100644
index 00000000..f59f4133
--- /dev/null
+++ b/apps/web/src/lib/components/ReputationScoreCard.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+  let { 
+    score = 850,
+    tier = 'Diamond',
+    rank = 42,
+    percentile = 'Top 1%',
+    trend = '+15'
+  } = $props<{
+    score?: number;
+    tier?: string;
+    rank?: number;
+    percentile?: string;
+    trend?: string;
+  }>();
+
+  // Basic animation for score could be added later, static for now
+</script>
+
+<div class="reputation-card glass">
+  <div class="header">
+    <div class="title-group">
+      <h3>AI Reputation Score</h3>
+      <span class="tier-badge {tier.toLowerCase()}">{tier} Tier</span>
+    </div>
+    <div class="trend positive">
+      ↑ {trend} pts
+    </div>
+  </div>
+
+  <div class="score-display">
+    <svg class="progress-ring" width="120" height="120" viewBox="0 0 120 120">
+      <circle class="ring-bg" cx="60" cy="60" r="54" />
+      <circle 
+        class="ring-progress {tier.toLowerCase()}" 
+        cx="60" cy="60" r="54" 
+        stroke-dasharray="339.292" 
+        stroke-dashoffset="{339.292 - (339.292 * (score / 1000))}" 
+      />
+    </svg>
+    <div class="score-value">
+      <span class="number">{score}</span>
+      <span class="label">/ 1000</span>
+    </div>
+  </div>
+
+  <div class="stats-footer">
+    <div class="stat">
+      <span class="stat-label">Global Rank</span>
+      <span class="stat-value">#{rank}</span>
+    </div>
+    <div class="divider"></div>
+    <div class="stat">
+      <span class="stat-label">Percentile</span>
+      <span class="stat-value">{percentile}</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .reputation-card {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .tier-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    width: max-content;
+  }
+
+  .tier-badge.diamond { background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
+  .tier-badge.gold { background: rgba(250, 204, 21, 0.15); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.3); }
+  .tier-badge.silver { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }
+
+  .trend {
+    font-size: 0.875rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+  }
+
+  .trend.positive {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+  }
+
+  .score-display {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .progress-ring {
+    transform: rotate(-90deg);
+  }
+
+  .ring-bg {
+    fill: none;
+    stroke: rgba(255, 255, 255, 0.05);
+    stroke-width: 8;
+  }
+
+  .ring-progress {
+    fill: none;
+    stroke-width: 8;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 1s ease-out;
+  }
+
+  .ring-progress.diamond { stroke: #818cf8; }
+  .ring-progress.gold { stroke: #facc15; }
+  .ring-progress.silver { stroke: #94a3b8; }
+
+  .score-value {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .score-value .number {
+    font-size: 2.5rem;
+    font-weight: 800;
+    font-family: 'Outfit', sans-serif;
+    color: var(--text-primary);
+    line-height: 1;
+  }
+
+  .score-value .label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+  }
+
+  .stats-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1.25rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1;
+  }
+
+  .stat:last-child {
+    text-align: right;
+  }
+
+  .divider {
+    width: 1px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .stat-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .stat-value {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+</style>
diff --git a/apps/web/src/routes/dashboard/+page.svelte b/apps/web/src/routes/dashboard/+page.svelte
new file mode 100644
index 00000000..ca1bd9c3
--- /dev/null
+++ b/apps/web/src/routes/dashboard/+page.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+  import AnalyticsWidget from '$lib/components/AnalyticsWidget.svelte';
+  import ActivityHeatmap from '$lib/components/ActivityHeatmap.svelte';
+  import ReputationScoreCard from '$lib/components/ReputationScoreCard.svelte';
+  import OSSImpactGraph from '$lib/components/OSSImpactGraph.svelte';
+  import ContributionRadar from '$lib/components/ContributionRadar.svelte';
+
+  // Sample data for the dashboard
+  const stats = [
+    { title: 'Total Contributions', value: '1,429', trend: '12%', isPositive: true, icon: '🔥' },
+    { title: 'Merge Success Rate', value: '98.5%', trend: '2.1%', isPositive: true, icon: '✅' },
+    { title: 'Avg PR Review Time', value: '2.4h', trend: '1.2h', isPositive: false, icon: '⏱️' },
+    { title: 'Global Rank (GSSOC)', value: '#42', trend: '15', isPositive: true, icon: '🏆' }
+  ];
+</script>
+
+<svelte:head>
+  <title>Analytics Command Center | DevCard</title>
+</svelte:head>
+
+<div class="dashboard-layout">
+  <header class="dashboard-header">
+    <div class="title-group">
+      <h1 class="gradient-text">GitHub Analytics Command Center</h1>
+      <p class="subtitle">Realtime insights into contributor intelligence and repository health.</p>
+    </div>
+    <div class="actions">
+      <button class="btn-secondary">Export Report</button>
+      <button class="btn-primary">Sync GitHub</button>
+    </div>
+  </header>
+
+  <main class="dashboard-content">
+    <section class="kpi-grid">
+      {#each stats as stat}
+        <AnalyticsWidget 
+          title={stat.title} 
+          value={stat.value} 
+          trend={stat.trend} 
+          isPositive={stat.isPositive} 
+          icon={stat.icon} 
+        />
+      {/each}
+    </section>
+
+    <section class="main-widgets">
+      <div class="heatmap-section">
+        <ActivityHeatmap />
+      </div>
+      
+      <div class="ai-insights glass">
+        <div class="insights-header">
+          <h3>🤖 AI Contribution Insights</h3>
+        </div>
+        <ul class="insights-list">
+          <li class="insight-item positive">
+            <span class="bullet"></span>
+            <p><strong>High merge probability</strong> detected for your recent frontend PRs based on historical maintainer behavior.</p>
+          </li>
+          <li class="insight-item warning">
+            <span class="bullet"></span>
+            <p>Your PR review time is slightly above average today. Consider smaller, isolated commits.</p>
+          </li>
+          <li class="insight-item neutral">
+            <span class="bullet"></span>
+            <p>Found 3 open issues matching your <strong>React/Next.js</strong> skillset with "critical" priority.</p>
+          </li>
+        </ul>
+        <button class="btn-secondary view-all">View All Insights</button>
+      </div>
+    </section>
+
+    <div class="section-title">
+      <h2>AI Reputation & Impact</h2>
+    </div>
+
+    <section class="reputation-widgets">
+      <div class="rep-card">
+        <ReputationScoreCard />
+      </div>
+      <div class="rep-graph">
+        <OSSImpactGraph />
+      </div>
+      <div class="rep-radar">
+        <ContributionRadar />
+      </div>
+    </section>
+  </main>
+</div>
+
+<style>
+  .dashboard-layout {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+
+  .dashboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+  }
+
+  .title-group h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .subtitle {
+    color: var(--text-secondary);
+    font-size: 1.125rem;
+    font-weight: 500;
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .dashboard-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  .kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .main-widgets {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 1024px) {
+    .main-widgets {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .ai-insights {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .insights-header h3 {
+    font-size: 1.25rem;
+    color: var(--text-primary);
+  }
+
+  .insights-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    flex-grow: 1;
+  }
+
+  .insight-item {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: var(--text-secondary);
+  }
+
+  .bullet {
+    min-width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-top: 0.4rem;
+  }
+
+  .insight-item.positive .bullet { background-color: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.4); }
+  .insight-item.warning .bullet { background-color: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.4); }
+  .insight-item.neutral .bullet { background-color: var(--primary); box-shadow: 0 0 8px rgba(99,102,241,0.4); }
+
+  .insight-item p strong {
+    color: var(--text-primary);
+  }
+
+  .view-all {
+    width: 100%;
+    margin-top: auto;
+  }
+
+  .section-title {
+    margin-top: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .section-title h2 {
+    font-size: 1.5rem;
+    color: var(--text-primary);
+  }
+
+  .reputation-widgets {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 1200px) {
+    .reputation-widgets {
+      grid-template-columns: 1fr 1fr;
+    }
+    .rep-graph {
+      grid-column: span 2;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .reputation-widgets {
+      grid-template-columns: 1fr;
+    }
+    .rep-graph {
+      grid-column: span 1;
+    }
+  }
+</style>

From 43044c908418fe3b6fa15d1c16b00641c1adb420 Mon Sep 17 00:00:00 2001
From: Bhuvanesh S <YOUR_GITHUB_EMAIL>
Date: Fri, 29 May 2026 18:47:24 +0530
Subject: [PATCH 2/2] fix: restore missing components from previous branch

---
 .../src/lib/components/ActivityHeatmap.svelte | 189 ++++++++++++++++++
 .../src/lib/components/AnalyticsWidget.svelte | 126 ++++++++++++
 2 files changed, 315 insertions(+)
 create mode 100644 apps/web/src/lib/components/ActivityHeatmap.svelte
 create mode 100644 apps/web/src/lib/components/AnalyticsWidget.svelte

diff --git a/apps/web/src/lib/components/ActivityHeatmap.svelte b/apps/web/src/lib/components/ActivityHeatmap.svelte
new file mode 100644
index 00000000..acb0577a
--- /dev/null
+++ b/apps/web/src/lib/components/ActivityHeatmap.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  // Generate some dummy data for the heatmap
+  // 52 weeks * 7 days
+  const weeks = 52;
+  const daysPerWeek = 7;
+  
+  let heatmapData = $state<{ intensity: number, date: Date }[][]>([]);
+  
+  onMount(() => {
+    const today = new Date();
+    const generatedData = [];
+    for (let w = 0; w < weeks; w++) {
+      let weekData = [];
+      for (let d = 0; d < daysPerWeek; d++) {
+        const date = new Date(today);
+        date.setDate(date.getDate() - ((weeks - 1 - w) * 7 + (6 - d)));
+        const random = Math.random();
+        let intensity = 0;
+        if (random > 0.85) intensity = 4;
+        else if (random > 0.7) intensity = 3;
+        else if (random > 0.5) intensity = 2;
+        else if (random > 0.3) intensity = 1;
+        
+        weekData.push({ intensity, date });
+      }
+      generatedData.push(weekData);
+    }
+    heatmapData = generatedData;
+  });
+
+  function getIntensityColor(intensity: number): string {
+    switch(intensity) {
+      case 1: return 'var(--color-level-1)';
+      case 2: return 'var(--color-level-2)';
+      case 3: return 'var(--color-level-3)';
+      case 4: return 'var(--color-level-4)';
+      default: return 'var(--color-level-0)';
+    }
+  }
+</script>
+
+<div class="heatmap-container glass">
+  <div class="heatmap-header">
+    <h3>Realtime Contributor Activity</h3>
+    <span class="pulse-indicator">
+      <span class="pulse-dot"></span> Live
+    </span>
+  </div>
+  
+  <div class="heatmap-scroll-wrapper">
+    <div class="heatmap-grid">
+      {#each heatmapData as week, wIndex}
+        <div class="week">
+          {#each week as day, dIndex}
+            <div 
+              class="day" 
+              role="button"
+              aria-label="Contribution activity on {day.date.toDateString()}"
+              tabindex="0"
+              style="background-color: {getIntensityColor(day.intensity)};"
+              title="{day.date.toDateString()}: {day.intensity * 3} contributions"
+            ></div>
+          {/each}
+        </div>
+      {/each}
+    </div>
+  </div>
+  
+  <div class="heatmap-legend">
+    <span class="legend-text">Less</span>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-0);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-1);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-2);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-3);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-4);"></div>
+    <span class="legend-text">More</span>
+  </div>
+</div>
+
+<style>
+  .heatmap-container {
+    --color-level-0: rgba(100, 116, 139, 0.1);
+    --color-level-1: rgba(99, 102, 241, 0.4);
+    --color-level-2: rgba(99, 102, 241, 0.6);
+    --color-level-3: rgba(99, 102, 241, 0.8);
+    --color-level-4: var(--primary);
+    
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .heatmap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .heatmap-header h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+  }
+
+  .pulse-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    font-weight: 500;
+  }
+
+  .pulse-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #22c55e;
+    border-radius: 50%;
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+    animation: pulse 2s infinite;
+  }
+
+  @keyframes pulse {
+    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
+    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+  }
+
+  .heatmap-scroll-wrapper {
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+  }
+
+  /* Custom scrollbar for heatmap */
+  .heatmap-scroll-wrapper::-webkit-scrollbar {
+    height: 6px;
+  }
+  .heatmap-scroll-wrapper::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+    border-radius: 999px;
+  }
+  .heatmap-scroll-wrapper::-webkit-scrollbar-thumb {
+    background: rgba(99, 102, 241, 0.3);
+    border-radius: 999px;
+  }
+
+  .heatmap-grid {
+    display: flex;
+    gap: 4px;
+    min-width: max-content;
+  }
+
+  .week {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .day {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    cursor: pointer;
+  }
+
+  .day:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 8px var(--primary-glow);
+    z-index: 10;
+  }
+
+  .heatmap-legend {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: flex-end;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+  
+  .legend-text {
+    margin: 0 0.25rem;
+  }
+</style>
diff --git a/apps/web/src/lib/components/AnalyticsWidget.svelte b/apps/web/src/lib/components/AnalyticsWidget.svelte
new file mode 100644
index 00000000..17d25bfe
--- /dev/null
+++ b/apps/web/src/lib/components/AnalyticsWidget.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+
+  let { 
+    title, 
+    value, 
+    trend, 
+    isPositive = true, 
+    icon = '📊' 
+  } = $props<{
+    title: string;
+    value: string;
+    trend: string;
+    isPositive?: boolean;
+    icon?: string;
+  }>();
+</script>
+
+<div class="analytics-widget glass">
+  <div class="widget-header">
+    <div class="icon-wrapper">
+      <span class="icon">{icon}</span>
+    </div>
+    <span class="trend {isPositive ? 'positive' : 'negative'}">
+      {isPositive ? '↑' : '↓'} {trend}
+    </span>
+  </div>
+  
+  <div class="widget-content">
+    <h3 class="title">{title}</h3>
+    <div class="value gradient-text">{value}</div>
+  </div>
+</div>
+
+<style>
+  .analytics-widget {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+    cursor: default;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .analytics-widget::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at top right, var(--primary-glow), transparent 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  }
+
+  .analytics-widget:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .analytics-widget:hover::before {
+    opacity: 1;
+  }
+
+  .widget-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .icon-wrapper {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: var(--bg-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-glass);
+  }
+  
+  .icon {
+    font-size: 1.25rem;
+  }
+
+  .trend {
+    font-size: 0.875rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+  }
+
+  .trend.positive {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+  }
+
+  .trend.negative {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+  }
+
+  .widget-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .title {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-family: 'Inter', sans-serif;
+  }
+
+  .value {
+    font-size: 2.25rem;
+    font-weight: 800;
+    font-family: 'Outfit', sans-serif;
+  }
+</style>