quackscore 0.2.4 → 0.3.1

package/dist/report/leaderboard.js

@@ -10,9 +10,23 @@ const DISPLAY_LABELS = {
     security: 'Security',
     sre: 'SRE',
 };
-const PROFILES_PER_PAGE = 50;
+function normalizeTeamKey(value) {
+    return String(value ?? '').trim().toLowerCase();
+}
+function collectTeams(profiles) {
+    const labels = new Map();
+    for (const profile of profiles) {
+        for (const team of profile.teams ?? []) {
+            const key = normalizeTeamKey(team);
+            if (!key || labels.has(key))
+                continue;
+            labels.set(key, team);
+        }
+    }
+    return [...labels.values()].sort((left, right) => left.localeCompare(right));
+}
 function escapeHtml(value) {
-    return value
+    return String(value ?? '')
         .replace(/&/g, '&')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
@@ -24,158 +38,18 @@ function formatLabel(value) {
         return 'Unspecified';
     return DISPLAY_LABELS[value] ?? value.split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
 }
-function compactText(value, maxLength = 260) {
-    if (!value)
-        return 'Summary not available yet.';
-    const normalized = value.replace(/\s+/g, ' ').trim();
-    if (normalized.length <= maxLength)
-        return normalized;
-    return `${normalized.slice(0, maxLength - 3).trimEnd()}...`;
-}
-function formatDate(value) {
-    if (!value)
-        return 'N/A';
-    const parsed = Date.parse(value);
-    if (Number.isNaN(parsed))
-        return 'N/A';
-    return new Date(parsed).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
-}
-function calculateLevel(totalPoints) {
-    let level = 1;
-    for (let i = 1; i < LEVEL_THRESHOLDS.length; i++) {
-        if (totalPoints >= LEVEL_THRESHOLDS[i]) {
-            level = i + 1;
-        }
-        else {
-            return level;
-        }
-    }
-    return MAX_LEVEL;
-}
-function compareEntries(left, right) {
-    return right.totalPoints - left.totalPoints
-        || right.analyzedPRs - left.analyzedPRs
-        || Date.parse(right.lastActivityAt ?? right.lastUpdated) - Date.parse(left.lastActivityAt ?? left.lastUpdated)
-        || left.username.localeCompare(right.username);
-}
-function buildEntry(profile) {
-    if (profile.contributions.length === 0) {
-        return {
-            storageKey: profile.storageKey,
-            username: profile.username,
-            totalPoints: profile.totalPoints,
-            level: profile.level,
-            lastUpdated: profile.lastUpdated,
-            lastActivityAt: profile.lastActivityAt,
-            analyzedPRs: profile.analyzedPRs,
-            primaryArea: profile.primaryArea,
-            title: profile.title,
-            summary: profile.summary,
-            reportPath: profile.reportPath,
-        };
-    }
-    const areaTotals = profile.contributions.reduce((totals, contribution) => {
-        for (const area of contribution.areas) {
-            totals[area] = (totals[area] || 0) + contribution.points;
-        }
-        return totals;
-    }, {});
-    const totalPoints = profile.contributions.reduce((sum, contribution) => sum + contribution.points, 0);
-    const primaryArea = Object.entries(areaTotals).sort(([, left], [, right]) => right - left)[0]?.[0];
-    const lastActivityAt = profile.contributions.reduce((latest, contribution) => {
-        if (!latest)
-            return contribution.mergedAt;
-        return Date.parse(contribution.mergedAt) > Date.parse(latest) ? contribution.mergedAt : latest;
-    }, undefined);
-    return {
-        storageKey: profile.storageKey,
-        username: profile.username,
-        totalPoints,
-        level: calculateLevel(totalPoints),
-        lastUpdated: profile.lastUpdated,
-        lastActivityAt,
-        analyzedPRs: profile.contributions.length,
-        primaryArea,
-        title: profile.title,
-        summary: profile.summary,
-        reportPath: profile.reportPath,
-    };
-}
-function renderEntry(entry, index, isOpen) {
-    const preview = compactText(entry.summary, 170);
-    const fullSummary = compactText(entry.summary, 520);
-    const reportAction = entry.reportPath
-        ? `<a class="action-link" href="file:///${entry.reportPath.replace(/\\/g, '/')}" target="_blank" rel="noopener noreferrer">Open report</a>`
-        : '<span class="action-link disabled">Report missing</span>';
-    return `<details class="entry"${isOpen ? ' open' : ''}>
-      <summary class="entry-summary">
-        <div class="rank">${index + 1}</div>
-        <div class="entry-main">
-          <div class="entry-top">
-            <div>
-              <h2>${escapeHtml(entry.username)}</h2>
-              <div class="subtitle">${escapeHtml(entry.title ?? 'Generated profile')}</div>
-            </div>
-            <div class="xp-block">
-              <strong>${entry.totalPoints.toLocaleString()} XP</strong>
-              <span>Level ${entry.level}</span>
-            </div>
-          </div>
-          <div class="meta-row">
-            <span class="meta-pill">${entry.analyzedPRs} PRs</span>
-            <span class="meta-pill">${escapeHtml(formatLabel(entry.primaryArea))}</span>
-            <span class="meta-pill">Last activity ${escapeHtml(formatDate(entry.lastActivityAt))}</span>
-          </div>
-          <p class="summary preview">${escapeHtml(preview)}</p>
-        </div>
-        <div class="entry-side">
-          ${reportAction}
-          <span class="expand-hint">More</span>
-        </div>
-      </summary>
-      <div class="entry-details">
-        <p class="summary full">${escapeHtml(fullSummary)}</p>
-        <div class="detail-grid">
-          <div class="detail-box">
-            <span class="detail-label">Profile</span>
-            <strong>${escapeHtml(entry.title ?? 'Generated profile')}</strong>
-          </div>
-          <div class="detail-box">
-            <span class="detail-label">Specialization</span>
-            <strong>${escapeHtml(formatLabel(entry.primaryArea))}</strong>
-          </div>
-          <div class="detail-box">
-            <span class="detail-label">Scope</span>
-            <strong>${escapeHtml(entry.storageKey)}</strong>
-          </div>
-        </div>
-      </div>
-    </details>`;
-}
-function renderEmptyState(message = 'No generated profiles found in ~/.quackscore yet.') {
-    return `<div class="empty">${escapeHtml(message)}</div>`;
-}
-function renderFilterDropdown(id, dataAttribute, selectedLabel, options) {
-    return `<div class="filter-dropdown" data-filter-dropdown>
-      <input type="hidden" id="${escapeHtml(id)}" value="${escapeHtml(options[0]?.value ?? '')}" ${dataAttribute}>
-      <button class="filter-trigger" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="${escapeHtml(id)}-menu" data-filter-trigger>
-        <span class="filter-trigger-label" data-filter-label>${escapeHtml(selectedLabel)}</span>
-      </button>
-      <div class="filter-menu" id="${escapeHtml(id)}-menu" role="listbox" tabindex="-1" hidden data-filter-menu>
-        ${options.map((option, index) => `<button class="filter-option${index === 0 ? ' is-selected' : ''}" type="button" role="option" data-filter-option data-value="${escapeHtml(option.value)}" aria-selected="${index === 0 ? 'true' : 'false'}">${escapeHtml(option.label)}</button>`).join('')}
-      </div>
-    </div>`;
-}
 function serializeForScript(value) {
     return JSON.stringify(value).replace(/</g, '\\u003c');
 }
-export function generateLeaderboardHTML(profiles) {
-    const initialEntries = profiles.map(buildEntry).sort(compareEntries);
-    const initialRows = initialEntries.length
-        ? initialEntries.slice(0, PROFILES_PER_PAGE).map((entry, index) => renderEntry(entry, index, false)).join('')
-        : renderEmptyState();
-    const initialPageCount = Math.max(1, Math.ceil(initialEntries.length / PROFILES_PER_PAGE));
-    const specializations = Array.from(new Set(profiles.flatMap((profile) => profile.contributions.flatMap((contribution) => contribution.areas)))).sort((left, right) => formatLabel(left).localeCompare(formatLabel(right)));
+export function generateLeaderboardHTML(profiles, options = {}) {
+    const teams = collectTeams(profiles);
+    const specializations = Array.from(new Set(profiles.flatMap((profile) => (profile.contributions ?? []).flatMap((contribution) => contribution.areas)))).sort((left, right) => formatLabel(left).localeCompare(formatLabel(right)));
+    const initialMode = options.initialMode === 'team' ? 'team' : 'profile';
+    const initialTeam = teams.find((team) => normalizeTeamKey(team) === normalizeTeamKey(options.initialTeam)) ?? 'all';
+    const initialPageCount = Math.max(1, Math.ceil(Math.max(profiles.length, 1) / 40));
+    const initialBoard = profiles.length === 0
+        ? '<div class="empty">No generated profiles found in ~/.quackscore yet.</div>'
+        : '<div class="empty">Loading leaderboard…</div>';
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -183,678 +57,568 @@ export function generateLeaderboardHTML(profiles) {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Quackscore Leaderboard</title>
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=IBM+Plex+Mono:wght@400;500;700&family=Manrope:wght@400;500;700;800&display=swap');
 
 :root {
   color-scheme: dark;
-  --bg: #080808;
-  --panel: rgba(16, 16, 16, 0.95);
-  --panel-soft: rgba(24, 24, 24, 0.88);
-  --border: rgba(255,255,255,0.08);
-  --text: #f5f5f5;
-  --muted: #9a9a9a;
-  --amber: #f5b331;
-  --blue: #7da2ff;
-  --violet: #b380ff;
-  --green: #7dd3a7;
+  --bg: #090b10;
+  --panel: rgba(16, 20, 28, 0.88);
+  --panel-strong: rgba(12, 16, 23, 0.96);
+  --text: #eef2ff;
+  --muted: #97a0b4;
+  --line: rgba(255, 255, 255, 0.1);
+  --accent: #f5b331;
+  --accent-soft: rgba(245, 179, 49, 0.14);
+  --forest: #8ca5ff;
+  --gold: #ffd36c;
+  --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
 }
+
 * { box-sizing: border-box; }
+
 body {
   margin: 0;
   min-height: 100vh;
-  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
+  font-family: "Manrope", sans-serif;
   color: var(--text);
   background:
-    radial-gradient(circle at top left, rgba(245,179,49,0.12), transparent 30%),
-    radial-gradient(circle at top right, rgba(125,162,255,0.09), transparent 26%),
-    linear-gradient(180deg, #050505 0%, #0b0b0b 100%);
+    radial-gradient(circle at top left, rgba(245, 179, 49, 0.14), transparent 22%),
+    radial-gradient(circle at 84% 14%, rgba(140, 165, 255, 0.14), transparent 20%),
+    linear-gradient(180deg, #0c1018 0%, #06080d 100%);
 }
+
 .shell {
-  width: min(1100px, calc(100vw - 32px));
+  width: min(1180px, calc(100vw - 28px));
   margin: 0 auto;
-  padding: 32px 0 48px;
+  padding: 28px 0 44px;
 }
+
+.hero,
+.filters,
+.board,
+.pagination {
+  position: relative;
+}
+
 .hero {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 20px;
-  margin-bottom: 20px;
+  gap: 18px;
+  margin-bottom: 18px;
   padding: 26px 28px;
   border-radius: 28px;
-  border: 1px solid rgba(245,179,49,0.16);
   background:
-    radial-gradient(circle at 12% 18%, rgba(245,179,49,0.15), transparent 26%),
-    radial-gradient(circle at 82% 12%, rgba(125,162,255,0.12), transparent 24%),
-    linear-gradient(180deg, rgba(14,14,14,0.96), rgba(10,10,10,0.98));
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
-}
-.hero-copy {
-  display: grid;
-  gap: 10px;
+    linear-gradient(135deg, rgba(20,24,33,0.94), rgba(10,12,19,0.97)),
+    radial-gradient(circle at right top, rgba(245,179,49,0.12), transparent 32%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: var(--shadow);
 }
+
 .hero-topline {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 12px;
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
+  gap: 10px;
+  font-family: "IBM Plex Mono", monospace;
   font-size: 0.78rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
   color: var(--muted);
 }
-.duck-badge {
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border-radius: 16px;
-  background: linear-gradient(180deg, rgba(245,179,49,0.22), rgba(245,179,49,0.08));
-  border: 1px solid rgba(245,179,49,0.28);
-  font-size: 1.6rem;
-  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
-}
+
 .hero h1 {
-  margin: 0 0 8px;
-  font-family: "Cinzel", ui-serif, Georgia, serif;
-  font-size: clamp(2rem, 4vw, 3.7rem);
-  line-height: 1;
-  color: #ffd36f;
-  text-shadow: 0 0 18px rgba(245,179,49,0.18);
+  margin: 10px 0 8px;
+  font-family: "Cinzel", serif;
+  font-size: clamp(2.1rem, 4vw, 4rem);
+  line-height: 0.95;
+  color: #f3c45c;
 }
+
 .hero p {
   margin: 0;
   max-width: 760px;
-  color: var(--muted);
   line-height: 1.7;
+  color: var(--muted);
+}
+
+.hero-stats {
+  min-width: 190px;
+  display: grid;
+  gap: 10px;
+  align-content: end;
 }
-.count {
-  align-self: end;
-  min-width: 168px;
-  padding: 16px 18px;
+
+.hero-stat {
+  padding: 14px 16px;
   border-radius: 18px;
-  border: 1px solid var(--border);
   background: rgba(255,255,255,0.04);
-  font-size: 0.95rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.hero-stat span {
+  display: block;
   color: var(--muted);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-family: "IBM Plex Mono", monospace;
 }
-.count strong {
+
+.hero-stat strong {
   display: block;
-  color: var(--amber);
+  margin-top: 8px;
   font-size: 1.6rem;
-  font-family: "Cinzel", ui-serif, Georgia, serif;
+  color: #dbe4ff;
 }
+
 .filters {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px;
-  margin-bottom: 20px;
-  padding: 18px 20px;
-  border-radius: 22px;
-  border: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(18,18,18,0.96), rgba(12,12,12,0.92));
+  margin-bottom: 18px;
+  padding: 20px 22px;
+  border-radius: 24px;
+  background: var(--panel);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: var(--shadow);
 }
+
 .filter-group {
   display: grid;
   gap: 8px;
 }
+
+.filter-group.wide {
+  grid-column: span 2;
+}
+
 .filter-label {
+  color: var(--muted);
   font-size: 0.76rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--muted);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-family: "IBM Plex Mono", monospace;
 }
-.filter-dropdown {
-  position: relative;
+
+.mode-toggle {
+  display: inline-flex;
+  gap: 8px;
 }
-.filter-trigger {
-  width: 100%;
-  padding: 14px 68px 14px 16px;
-  border-radius: 16px;
-  border: 1px solid rgba(255,255,255,0.1);
-  background:
-    linear-gradient(180deg, rgba(34,34,34,0.96), rgba(25,25,25,0.96));
+
+.mode-button,
+.select,
+.date-input,
+.page-button,
+.member-link,
+.empty-pill {
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: rgba(255,255,255,0.04);
   color: var(--text);
   font: inherit;
-  text-align: left;
-  cursor: pointer;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
-  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
 }
-.filter-trigger:hover {
-  border-color: rgba(125,162,255,0.22);
-  background: linear-gradient(180deg, rgba(38,38,38,0.98), rgba(28,28,28,0.98));
-}
-.filter-trigger:focus-visible,
-.filter-dropdown.is-open .filter-trigger {
-  outline: none;
-  border-color: rgba(125,162,255,0.42);
-  background:
-    radial-gradient(circle at right top, rgba(125,162,255,0.14), transparent 42%),
-    linear-gradient(180deg, rgba(36,36,36,0.98), rgba(24,24,24,0.98));
-  box-shadow:
-    0 0 0 1px rgba(125,162,255,0.18),
-    0 18px 38px rgba(0,0,0,0.26);
-}
-.filter-trigger::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 50px;
-  width: 1px;
-  height: 22px;
-  border-radius: 999px;
-  background: rgba(255,255,255,0.1);
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-.filter-trigger::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 22px;
-  width: 8px;
-  height: 8px;
-  border-right: 2px solid rgba(255,255,255,0.78);
-  border-bottom: 2px solid rgba(255,255,255,0.78);
-  transform: translateY(-65%) rotate(45deg);
-  pointer-events: none;
-}
-.filter-dropdown.is-open .filter-trigger::after {
-  transform: translateY(-20%) rotate(-135deg);
-}
-.filter-trigger-label {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.filter-menu {
-  position: absolute;
-  top: calc(100% + 10px);
-  left: 0;
-  right: 0;
-  z-index: 20;
-  display: grid;
-  gap: 4px;
-  padding: 8px;
-  border-radius: 18px;
-  border: 1px solid rgba(125,162,255,0.18);
-  background:
-    radial-gradient(circle at top right, rgba(125,162,255,0.14), transparent 34%),
-    linear-gradient(180deg, rgba(20,20,20,0.98), rgba(12,12,12,0.98));
-  box-shadow:
-    0 22px 44px rgba(0,0,0,0.46),
-    inset 0 1px 0 rgba(255,255,255,0.04);
-}
-.filter-menu[hidden] {
-  display: none;
-}
-.filter-option {
-  width: 100%;
-  padding: 11px 14px;
-  border: 0;
-  border-radius: 12px;
-  background: transparent;
-  color: #ececec;
-  font: inherit;
-  text-align: left;
+
+.mode-button {
+  padding: 12px 14px;
   cursor: pointer;
-  transition: background 140ms ease, color 140ms ease;
-}
-.filter-option:hover,
-.filter-option:focus-visible {
-  outline: none;
-  background: rgba(255,255,255,0.07);
-  color: #ffffff;
-}
-.filter-option.is-selected {
-  background: linear-gradient(180deg, rgba(125,162,255,0.28), rgba(91,122,219,0.24));
-  color: #ffffff;
-  box-shadow: inset 0 0 0 1px rgba(125,162,255,0.18);
+  font-weight: 700;
 }
-.filter-summary {
-  grid-column: 1 / -1;
-  color: var(--muted);
-  font-size: 0.92rem;
-}
-.filter-summary strong {
-  color: var(--amber);
+
+.mode-button.is-active {
+  background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,0.02));
+  border-color: rgba(245, 179, 49, 0.34);
+  color: #ffd36c;
 }
-.filter-date-input {
+
+.select,
+.date-input {
   width: 100%;
-  padding: 14px 16px;
-  border-radius: 16px;
-  border: 1px solid rgba(255,255,255,0.1);
-  background: linear-gradient(180deg, rgba(34,34,34,0.96), rgba(25,25,25,0.96));
-  color: var(--text);
-  font: inherit;
-  cursor: pointer;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
-  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
-}
-.filter-date-input:hover {
-  border-color: rgba(125,162,255,0.22);
-  background: linear-gradient(180deg, rgba(38,38,38,0.98), rgba(28,28,28,0.98));
-}
-.filter-date-input:focus {
-  outline: none;
-  border-color: rgba(125,162,255,0.42);
-  box-shadow: 0 0 0 1px rgba(125,162,255,0.18), 0 18px 38px rgba(0,0,0,0.26);
-}
-.filter-date-input::-webkit-calendar-picker-indicator {
-  filter: invert(0.8) opacity(0.7);
-  cursor: pointer;
-}
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: grid;
-  place-items: center;
-  background: rgba(0,0,0,0.6);
-  backdrop-filter: blur(4px);
-}
-.modal-overlay[hidden] {
-  display: none;
-}
-.modal {
-  width: min(440px, calc(100vw - 40px));
-  padding: 28px;
-  border-radius: 24px;
-  border: 1px solid rgba(125,162,255,0.22);
-  background:
-    radial-gradient(circle at top right, rgba(125,162,255,0.1), transparent 34%),
-    linear-gradient(180deg, rgba(22,22,22,0.99), rgba(14,14,14,0.99));
-  box-shadow: 0 32px 64px rgba(0,0,0,0.56);
-}
-.modal h3 {
-  margin: 0 0 20px;
-  font-family: "Cinzel", ui-serif, Georgia, serif;
-  font-size: 1.1rem;
-  color: var(--amber);
+  padding: 12px 14px;
 }
-.modal-fields {
+
+.date-range {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  margin-bottom: 22px;
-}
-.modal-field {
-  display: grid;
-  gap: 8px;
-}
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
   gap: 10px;
 }
-.modal-btn {
-  padding: 10px 20px;
-  border-radius: 12px;
-  border: 1px solid rgba(255,255,255,0.1);
-  background: rgba(255,255,255,0.05);
-  color: var(--text);
-  font: inherit;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: background 140ms ease, border-color 140ms ease;
-}
-.modal-btn:hover {
-  background: rgba(255,255,255,0.09);
-}
-.modal-btn.primary {
-  border-color: rgba(125,162,255,0.36);
-  background: linear-gradient(180deg, rgba(125,162,255,0.22), rgba(91,122,219,0.18));
-  color: #dbe5ff;
-  font-weight: 600;
+
+.filter-summary {
+  grid-column: 1 / -1;
+  color: var(--muted);
 }
-.modal-btn.primary:hover {
-  background: linear-gradient(180deg, rgba(125,162,255,0.3), rgba(91,122,219,0.24));
+
+.filter-summary strong {
+  color: var(--forest);
 }
+
 .board {
   display: grid;
-  gap: 12px;
+  gap: 14px;
 }
+
 .entry {
-  border-radius: 22px;
-  border: 1px solid var(--border);
-  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
+  border-radius: 24px;
+  background: var(--panel-strong);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: var(--shadow);
   overflow: hidden;
 }
-.entry-summary {
+
+.entry summary {
   list-style: none;
   cursor: pointer;
+}
+
+.entry summary::-webkit-details-marker,
+.entry summary::marker {
+  display: none;
+}
+
+.entry-head {
   display: grid;
-  grid-template-columns: 64px minmax(0, 1fr) auto;
+  grid-template-columns: 66px minmax(0, 1fr) auto;
   gap: 16px;
   align-items: center;
-  padding: 16px 18px;
-}
-.entry-summary::-webkit-details-marker,
-.entry-summary::marker {
-  display: none;
+  padding: 18px 20px;
 }
+
 .rank {
+  width: 52px;
+  height: 52px;
   display: grid;
   place-items: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 16px;
-  background: linear-gradient(180deg, rgba(245,179,49,0.16), rgba(179,128,255,0.10));
-  color: var(--amber);
+  border-radius: 18px;
   font-weight: 800;
-  font-size: 1.2rem;
-  font-family: "Cinzel", ui-serif, Georgia, serif;
+  font-size: 1.1rem;
+  font-family: "Cinzel", serif;
+  color: #ffd36c;
+  background: linear-gradient(135deg, rgba(245,179,49,0.14), rgba(255,255,255,0.04));
 }
+
 .entry-top {
   display: flex;
-  align-items: start;
   justify-content: space-between;
   gap: 16px;
+  align-items: flex-start;
 }
+
 .entry-top h2 {
   margin: 0;
   font-size: 1.18rem;
 }
+
 .subtitle {
   margin-top: 4px;
-  color: var(--blue);
-  font-size: 0.88rem;
+  color: var(--muted);
+  font-size: 0.92rem;
 }
-.xp-block {
+
+.score {
   text-align: right;
   white-space: nowrap;
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-family: "IBM Plex Mono", monospace;
 }
-.xp-block strong {
+
+.score strong {
   display: block;
-  color: var(--amber);
+  color: var(--gold);
   font-size: 1.05rem;
 }
-.xp-block span,
-.summary,
-.meta-pill,
-.action-link,
-.disabled {
-  color: var(--muted);
-}
-.meta-row {
+
+.meta-row,
+.detail-row,
+.member-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 10px;
 }
-.meta-pill {
+
+.meta-pill,
+.empty-pill {
   padding: 5px 9px;
-  border-radius: 999px;
-  background: rgba(255,255,255,0.05);
-  font-size: 0.78rem;
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.76rem;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.05);
 }
+
 .summary {
-  margin: 10px 0 0;
-  line-height: 1.6;
-  font-size: 0.94rem;
-}
-.summary.preview {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  margin: 12px 0 0;
+  color: var(--muted);
+  line-height: 1.7;
 }
+
 .entry-side {
   display: flex;
   align-items: center;
   gap: 10px;
 }
-.action-link {
+
+.member-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 112px;
-  padding: 10px 13px;
-  border-radius: 12px;
-  border: 1px solid rgba(125,162,255,0.22);
-  background: rgba(125,162,255,0.09);
-  color: #dbe5ff;
+  padding: 10px 12px;
   text-decoration: none;
-  font-weight: 600;
-  font-size: 0.88rem;
+  font-weight: 700;
+  color: #dbe4ff;
 }
-.disabled {
-  border-color: var(--border);
-  background: rgba(255,255,255,0.04);
+
+.member-link.disabled {
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.04);
 }
+
 .expand-hint {
-  min-width: 56px;
-  text-align: center;
-  padding: 8px 10px;
-  border-radius: 10px;
-  background: rgba(255,255,255,0.04);
   color: var(--muted);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: 0.76rem;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.75rem;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.entry[open] .expand-hint {
-  color: var(--green);
 }
+
 .entry-details {
-  padding: 0 18px 18px 98px;
-  border-top: 1px solid rgba(255,255,255,0.06);
-  background: rgba(0,0,0,0.10);
+  padding: 0 20px 20px 102px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.02);
 }
-.detail-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+
+.detail-row {
   margin-top: 14px;
 }
-.detail-box {
+
+.detail-card {
+  min-width: 180px;
   padding: 12px 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255,255,255,0.03);
 }
-.detail-label {
+
+.detail-card span {
   display: block;
-  margin-bottom: 6px;
   color: var(--muted);
   font-size: 0.74rem;
-  font-family: "JetBrains Mono", ui-monospace, monospace;
   text-transform: uppercase;
   letter-spacing: 0.12em;
+  font-family: "IBM Plex Mono", monospace;
 }
-.detail-box strong {
-  color: var(--text);
-  font-size: 0.95rem;
+
+.detail-card strong {
+  display: block;
+  margin-top: 8px;
+}
+
+.member-list {
+  margin-top: 14px;
 }
+
+.member-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255,255,255,0.04);
+}
+
+.member-tag a {
+  color: #dbe4ff;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.member-tag span {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.empty {
+  padding: 28px;
+  border-radius: 24px;
+  background: var(--panel);
+  border: 1px dashed rgba(255, 255, 255, 0.14);
+  color: var(--muted);
+  text-align: center;
+}
+
 .pagination {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 18px;
+  justify-content: center;
+  gap: 14px;
   margin-top: 18px;
-  padding-top: 18px;
-}
-.pagination[hidden] {
-  display: none;
 }
-.page-btn {
-  min-width: 110px;
+
+.page-button {
   padding: 10px 14px;
-  border-radius: 12px;
-  border: 1px solid rgba(255,255,255,0.08);
-  background: rgba(255,255,255,0.04);
-  color: var(--text);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
   cursor: pointer;
 }
-.page-btn:disabled {
-  opacity: 0.45;
+
+.page-button:disabled {
+  opacity: 0.4;
   cursor: not-allowed;
 }
+
 .page-status {
   color: var(--muted);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  text-align: center;
-  flex: 1 1 auto;
+  font-family: "IBM Plex Mono", monospace;
 }
-.page-status strong {
-  color: var(--amber);
+
+.hidden {
+  display: none !important;
 }
-.empty {
-  padding: 32px;
-  border-radius: 22px;
-  border: 1px dashed var(--border);
-  text-align: center;
-  color: var(--muted);
+
+@media (max-width: 980px) {
+  .filters {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .filter-group.wide {
+    grid-column: span 2;
+  }
 }
-@media (max-width: 900px) {
+
+@media (max-width: 720px) {
+  .shell {
+    width: min(100vw - 18px, 1180px);
+    padding-top: 18px;
+  }
+
   .hero,
   .filters,
-  .entry-summary,
-  .detail-grid {
+  .entry-head {
     grid-template-columns: 1fr;
   }
-  .count {
-    min-width: 0;
-  }
-  .entry-side {
-    justify-content: start;
-  }
+
   .entry-details {
-    padding-left: 18px;
+    padding-left: 20px;
   }
-}
-@media (max-width: 720px) {
-  .entry-top {
-    flex-direction: column;
+
+  .entry-side,
+  .score {
+    justify-content: flex-start;
+    text-align: left;
   }
-  .entry-side {
-    flex-wrap: wrap;
+
+  .date-range {
+    grid-template-columns: 1fr;
   }
 }
 </style>
 </head>
 <body>
   <div class="shell">
-    <header class="hero">
-      <div class="hero-copy">
-        <div class="hero-topline"><span class="duck-badge" aria-hidden="true">&#129414;</span><span>Guild Hall Rankings</span></div>
+    <section class="hero">
+      <div>
+        <div class="hero-topline">Guild Hall Rankings</div>
         <h1>Quackscore Leaderboard</h1>
-        <p>Generated from saved local profiles. Filter the hall by recent activity windows or specialization to compare the contributors already analyzed on this machine.</p>
+        <p>Compare saved Quackscore profiles across scopes, narrow the board to a single team, or switch to team rankings to see which group is shipping the strongest work.</p>
+      </div>
+      <div class="hero-stats">
+        <div class="hero-stat">
+          <span>Saved Profiles</span>
+          <strong data-profile-count>${profiles.length}</strong>
+        </div>
+        <div class="hero-stat">
+          <span>Tagged Teams</span>
+          <strong>${teams.length}</strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="filters">
+      <div class="filter-group wide">
+        <div class="filter-label">Mode</div>
+        <div class="mode-toggle">
+          <button class="mode-button${initialMode === 'profile' ? ' is-active' : ''}" type="button" data-mode="profile">Profiles</button>
+          <button class="mode-button${initialMode === 'team' ? ' is-active' : ''}" type="button" data-mode="team">Teams</button>
+        </div>
       </div>
-      <div class="count"><strong data-profile-count>${initialEntries.length}</strong> profiles</div>
-    </header>
-    <section class="filters" aria-label="Leaderboard filters">
+
       <div class="filter-group">
-        <label class="filter-label" for="time-filter">Time</label>
-        ${renderFilterDropdown('time-filter', 'data-time-filter', 'All time', [
-        { value: 'all', label: 'All time' },
-        { value: 'last_week', label: 'Last week' },
-        { value: 'last_month', label: 'Last month' },
-        { value: 'last_3_months', label: 'Last 3 months' },
-        { value: 'last_6_months', label: 'Last 6 months' },
-        { value: 'last_year', label: 'Last year' },
-        { value: 'custom', label: 'Custom range...' },
-    ])}
+        <label class="filter-label" for="time-filter">Time Window</label>
+        <select class="select" id="time-filter" data-time-filter>
+          <option value="all">All time</option>
+          <option value="last_week">Last week</option>
+          <option value="last_month">Last month</option>
+          <option value="last_3_months">Last 3 months</option>
+          <option value="last_6_months">Last 6 months</option>
+          <option value="last_year">Last year</option>
+          <option value="custom">Custom range</option>
+        </select>
       </div>
+
       <div class="filter-group">
         <label class="filter-label" for="specialization-filter">Specialization</label>
-        ${renderFilterDropdown('specialization-filter', 'data-specialization-filter', 'All specializations', [
-        { value: 'all', label: 'All specializations' },
-        ...specializations.map((specialization) => ({ value: specialization, label: formatLabel(specialization) })),
-    ])}
+        <select class="select" id="specialization-filter" data-specialization-filter>
+          <option value="all">All specializations</option>
+          ${specializations.map((specialization) => `<option value="${escapeHtml(specialization)}">${escapeHtml(formatLabel(specialization))}</option>`).join('')}
+        </select>
       </div>
-      <div class="filter-summary" data-filter-summary><strong>${initialEntries.length}</strong> profiles for all time across all specializations.</div>
-    </section>
-    <section class="board" data-board>${initialRows}</section>
-    <div class="pagination" aria-label="Leaderboard pagination" data-pagination${initialPageCount <= 1 ? ' hidden' : ''}>
-      <button class="page-btn" type="button" data-nav="prev">Previous</button>
-      <div class="page-status" data-page-status>Page <strong>1</strong> of ${initialPageCount}</div>
-      <button class="page-btn" type="button" data-nav="next">Next</button>
-    </div>
-  </div>
-  <div class="modal-overlay" id="date-range-modal" hidden>
-    <div class="modal">
-      <h3>Custom Date Range</h3>
-      <div class="modal-fields">
-        <div class="modal-field">
-          <label class="filter-label" for="modal-from">From</label>
-          <input class="filter-date-input" type="date" id="modal-from" data-modal-from>
-        </div>
-        <div class="modal-field">
-          <label class="filter-label" for="modal-to">To</label>
-          <input class="filter-date-input" type="date" id="modal-to" data-modal-to>
-        </div>
+
+      <div class="filter-group">
+        <label class="filter-label" for="team-filter">Team Filter</label>
+        <select class="select" id="team-filter" data-team-filter>
+          <option value="all"${initialTeam === 'all' ? ' selected' : ''}>All teams</option>
+          ${teams.map((team) => `<option value="${escapeHtml(team)}"${initialTeam === team ? ' selected' : ''}>${escapeHtml(team)}</option>`).join('')}
+        </select>
       </div>
-      <div class="modal-actions">
-        <button class="modal-btn" type="button" data-modal-cancel>Cancel</button>
-        <button class="modal-btn primary" type="button" data-modal-apply>Apply</button>
+
+      <div class="filter-group wide hidden" data-custom-range>
+        <div class="filter-label">Custom Range</div>
+        <div class="date-range">
+          <input class="date-input" type="date" data-from-date>
+          <input class="date-input" type="date" data-to-date>
+        </div>
       </div>
+
+      <div class="filter-summary" data-filter-summary><strong>${profiles.length}</strong> saved profiles ready for comparison.</div>
+    </section>
+
+    <section class="board" data-board>
+      ${initialBoard}
+    </section>
+
+    <div class="pagination" data-pagination hidden>
+      <button class="page-button" type="button" data-nav="prev">Previous</button>
+      <div class="page-status" data-page-status>Page <strong>1</strong> of ${initialPageCount}</div>
+      <button class="page-button" type="button" data-nav="next">Next</button>
     </div>
   </div>
+
   <script id="leaderboard-data" type="application/json">${serializeForScript(profiles)}</script>
+  <script id="leaderboard-config" type="application/json">${serializeForScript({ initialMode, initialTeam })}</script>
   <script>
-    (function() {
-      const PROFILES_PER_PAGE = ${PROFILES_PER_PAGE};
+    (function () {
+      const PROFILES_PER_PAGE = 40;
       const DISPLAY_LABELS = ${serializeForScript(DISPLAY_LABELS)};
       const LEVEL_THRESHOLDS = ${serializeForScript(LEVEL_THRESHOLDS)};
       const MAX_LEVEL = ${MAX_LEVEL};
-      const TIME_LABELS = {
-        all: 'all time',
-        last_week: 'the last week',
-        last_month: 'the last month',
-        last_3_months: 'the last 3 months',
-        last_6_months: 'the last 6 months',
-        last_year: 'the last year',
-      };
 
       const dataElement = document.getElementById('leaderboard-data');
+      const configElement = document.getElementById('leaderboard-config');
       const board = document.querySelector('[data-board]');
-      const timeFilter = document.querySelector('[data-time-filter]');
-      const specializationFilter = document.querySelector('[data-specialization-filter]');
-      const count = document.querySelector('[data-profile-count]');
-      const filterSummary = document.querySelector('[data-filter-summary]');
+      const summary = document.querySelector('[data-filter-summary]');
       const pagination = document.querySelector('[data-pagination]');
+      const pageStatus = document.querySelector('[data-page-status]');
       const prevButton = document.querySelector('[data-nav="prev"]');
       const nextButton = document.querySelector('[data-nav="next"]');
-      const pageStatus = document.querySelector('[data-page-status]');
-
-      const modalOverlay = document.getElementById('date-range-modal');
-      const modalFromInput = document.querySelector('[data-modal-from]');
-      const modalToInput = document.querySelector('[data-modal-to]');
-      const modalCancelBtn = document.querySelector('[data-modal-cancel]');
-      const modalApplyBtn = document.querySelector('[data-modal-apply]');
+      const timeFilter = document.querySelector('[data-time-filter]');
+      const specializationFilter = document.querySelector('[data-specialization-filter]');
+      const teamFilter = document.querySelector('[data-team-filter]');
+      const customRange = document.querySelector('[data-custom-range]');
+      const fromDate = document.querySelector('[data-from-date]');
+      const toDate = document.querySelector('[data-to-date]');
+      const modeButtons = Array.from(document.querySelectorAll('[data-mode]'));
 
-      if (!dataElement || !board || !timeFilter || !specializationFilter || !count || !filterSummary || !pagination || !prevButton || !nextButton || !pageStatus || !modalOverlay || !modalFromInput || !modalToInput || !modalCancelBtn || !modalApplyBtn) {
+      if (!dataElement || !configElement || !board || !summary || !pagination || !pageStatus || !prevButton || !nextButton || !timeFilter || !specializationFilter || !teamFilter || !customRange || !fromDate || !toDate || modeButtons.length === 0) {
         return;
       }
 
       const profiles = JSON.parse(dataElement.textContent || '[]');
+      const config = JSON.parse(configElement.textContent || '{}');
+      let currentMode = config.initialMode || 'profile';
       let currentPage = 1;
-      let customFrom = '';
-      let customTo = '';
-      let previousTimeValue = 'all';
-      const timeDropdown = setupDropdown(timeFilter);
-      const dropdowns = [timeDropdown, setupDropdown(specializationFilter)].filter(Boolean);
-
-      document.addEventListener('click', (event) => {
-        dropdowns.forEach((instance) => {
-          if (!instance.dropdown.contains(event.target)) {
-            instance.close();
-          }
-        });
-      });
-
-      document.addEventListener('keydown', (event) => {
-        if (event.key !== 'Escape') return;
-        dropdowns.forEach((instance) => instance.close());
-      });
 
       const escapeHtml = (value) => String(value)
         .replace(/&/g, '&amp;')
@@ -865,7 +629,7 @@ body {
 
       const formatLabel = (value) => {
         if (!value) return 'Unspecified';
-        return DISPLAY_LABELS[value] || value.split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
+        return DISPLAY_LABELS[value] || String(value).split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
       };
 
       const compactText = (value, maxLength) => {
@@ -882,95 +646,35 @@ body {
         return new Date(parsed).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
       };
 
-      function setupDropdown(input) {
-        const dropdown = input.closest('[data-filter-dropdown]');
-        const trigger = dropdown ? dropdown.querySelector('[data-filter-trigger]') : null;
-        const label = dropdown ? dropdown.querySelector('[data-filter-label]') : null;
-        const menu = dropdown ? dropdown.querySelector('[data-filter-menu]') : null;
-        const options = menu ? Array.from(menu.querySelectorAll('[data-filter-option]')) : [];
-
-        if (!dropdown || !trigger || !label || !menu || options.length === 0) {
-          return null;
-        }
-
-        const close = () => {
-          dropdown.classList.remove('is-open');
-          trigger.setAttribute('aria-expanded', 'false');
-          menu.hidden = true;
-        };
-
-        const closeOthers = () => {
-          document.querySelectorAll('[data-filter-dropdown].is-open').forEach((openDropdown) => {
-            if (openDropdown === dropdown) return;
-            openDropdown.classList.remove('is-open');
-            const openTrigger = openDropdown.querySelector('[data-filter-trigger]');
-            const openMenu = openDropdown.querySelector('[data-filter-menu]');
-            if (openTrigger) openTrigger.setAttribute('aria-expanded', 'false');
-            if (openMenu) openMenu.hidden = true;
-          });
-        };
-
-        const open = () => {
-          closeOthers();
-          dropdown.classList.add('is-open');
-          trigger.setAttribute('aria-expanded', 'true');
-          menu.hidden = false;
-        };
-
-        const setValue = (value, shouldDispatch) => {
-          const selectedOption = options.find((option) => option.getAttribute('data-value') === value) || options[0];
-          if (!selectedOption) return;
-
-          input.value = selectedOption.getAttribute('data-value') || '';
-          label.textContent = selectedOption.textContent || '';
-
-          options.forEach((option) => {
-            const isSelected = option === selectedOption;
-            option.classList.toggle('is-selected', isSelected);
-            option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
-          });
-
-          if (shouldDispatch) {
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-          }
-        };
-
-        setValue(input.value, false);
-
-        trigger.addEventListener('click', () => {
-          if (dropdown.classList.contains('is-open')) close();
-          else open();
-        });
-
-        options.forEach((option) => {
-          option.addEventListener('click', () => {
-            setValue(option.getAttribute('data-value') || '', true);
-            close();
-            trigger.focus();
-          });
-        });
-
-        return { dropdown, close, setValue };
-      }
-
       const calculateLevel = (totalPoints) => {
         let level = 1;
         for (let i = 1; i < LEVEL_THRESHOLDS.length; i += 1) {
-          if (totalPoints >= LEVEL_THRESHOLDS[i]) {
-            level = i + 1;
-          } else {
-            return level;
-          }
+          if (totalPoints >= LEVEL_THRESHOLDS[i]) level = i + 1;
+          else return level;
         }
         return MAX_LEVEL;
       };
 
-      const compareEntries = (left, right) =>
+      const compareProfileEntries = (left, right) =>
         right.totalPoints - left.totalPoints
         || right.analyzedPRs - left.analyzedPRs
         || Date.parse(right.lastActivityAt || right.lastUpdated) - Date.parse(left.lastActivityAt || left.lastUpdated)
         || left.username.localeCompare(right.username);
 
+      const compareTeamEntries = (left, right) =>
+        right.totalPoints - left.totalPoints
+        || right.memberCount - left.memberCount
+        || right.analyzedPRs - left.analyzedPRs
+        || Date.parse(right.lastActivityAt || '') - Date.parse(left.lastActivityAt || '')
+        || left.team.localeCompare(right.team);
+
+      const normalizeTeamKey = (value) => String(value || '').trim().toLowerCase();
+
+      const hasTeam = (teams, selectedTeam) => {
+        if (selectedTeam === 'all') return true;
+        return (teams || []).some((team) => normalizeTeamKey(team) === normalizeTeamKey(selectedTeam));
+      };
+
       const cutoffFor = (timeValue) => {
         if (timeValue === 'all' || timeValue === 'custom') return null;
         const now = new Date();
@@ -983,154 +687,239 @@ body {
         return cutoff.getTime();
       };
 
-      const buildEntry = (profile, timeValue, specializationValue) => {
-        if (!profile.contributions.length) {
-          const specializationMatches = specializationValue === 'all' || profile.primaryArea === specializationValue;
-          if (timeValue !== 'all' || !specializationMatches || profile.totalPoints <= 0) {
-            return null;
-          }
-
-          return {
-            storageKey: profile.storageKey,
-            username: profile.username,
-            totalPoints: profile.totalPoints,
-            level: profile.level,
-            lastUpdated: profile.lastUpdated,
-            lastActivityAt: profile.lastActivityAt,
-            analyzedPRs: profile.analyzedPRs,
-            primaryArea: profile.primaryArea,
-            title: profile.title,
-            summary: profile.summary,
-            reportPath: profile.reportPath,
-          };
-        }
+      const getFilteredContributions = (profile) => {
+        const cutoff = cutoffFor(timeFilter.value);
+        const fromMs = timeFilter.value === 'custom' && fromDate.value ? Date.parse(fromDate.value) : null;
+        const toMs = timeFilter.value === 'custom' && toDate.value ? Date.parse(toDate.value + 'T23:59:59.999') : null;
+        const specializationValue = specializationFilter.value;
 
-        const cutoff = cutoffFor(timeValue);
-        const customFromMs = timeValue === 'custom' && customFrom ? Date.parse(customFrom) : null;
-        const customToMs = timeValue === 'custom' && customTo ? Date.parse(customTo + 'T23:59:59.999') : null;
-        const filtered = profile.contributions.filter((contribution) => {
+        return (profile.contributions || []).filter((contribution) => {
           const mergedAt = Date.parse(contribution.mergedAt);
           if (Number.isNaN(mergedAt)) return false;
           if (cutoff != null && mergedAt < cutoff) return false;
-          if (customFromMs != null && mergedAt < customFromMs) return false;
-          if (customToMs != null && mergedAt > customToMs) return false;
+          if (fromMs != null && mergedAt < fromMs) return false;
+          if (toMs != null && mergedAt > toMs) return false;
           if (specializationValue !== 'all' && !contribution.areas.includes(specializationValue)) return false;
           return true;
         });
+      };
 
-        if (!filtered.length) return null;
+      const buildProfileEntries = () => profiles
+        .filter((profile) => hasTeam(profile.teams, teamFilter.value))
+        .map((profile) => {
+          const contributions = getFilteredContributions(profile);
+          if (contributions.length === 0) {
+            if (timeFilter.value !== 'all' && timeFilter.value !== 'custom') return null;
+            if (timeFilter.value === 'custom' && (fromDate.value || toDate.value)) return null;
+            if (specializationFilter.value !== 'all') return null;
+            if ((profile.totalPoints || 0) <= 0) return null;
+            return {
+              kind: 'profile',
+              storageKey: profile.storageKey,
+              username: profile.username,
+              scopeLabel: profile.scopeLabel,
+              teams: profile.teams || [],
+              totalPoints: profile.totalPoints,
+              level: profile.level,
+              lastUpdated: profile.lastUpdated,
+              lastActivityAt: profile.lastActivityAt,
+              analyzedPRs: profile.analyzedPRs,
+              primaryArea: profile.primaryArea,
+              title: profile.title,
+              summary: profile.summary,
+              reportPath: profile.reportPath,
+            };
+          }
 
-        const areaTotals = {};
-        let totalPoints = 0;
-        let lastActivityAt = filtered[0].mergedAt;
+          const areaTotals = {};
+          let totalPoints = 0;
+          let lastActivityAt = contributions[0].mergedAt;
+          contributions.forEach((contribution) => {
+            totalPoints += contribution.points;
+            if (Date.parse(contribution.mergedAt) > Date.parse(lastActivityAt)) lastActivityAt = contribution.mergedAt;
+            contribution.areas.forEach((area) => {
+              areaTotals[area] = (areaTotals[area] || 0) + contribution.points;
+            });
+          });
 
-        filtered.forEach((contribution) => {
-          totalPoints += contribution.points;
-          if (Date.parse(contribution.mergedAt) > Date.parse(lastActivityAt)) {
-            lastActivityAt = contribution.mergedAt;
-          }
-          contribution.areas.forEach((area) => {
-            areaTotals[area] = (areaTotals[area] || 0) + contribution.points;
+          return {
+            kind: 'profile',
+            storageKey: profile.storageKey,
+            username: profile.username,
+            scopeLabel: profile.scopeLabel,
+            teams: profile.teams || [],
+            totalPoints,
+            level: calculateLevel(totalPoints),
+            lastUpdated: profile.lastUpdated,
+            lastActivityAt,
+            analyzedPRs: contributions.length,
+            primaryArea: Object.entries(areaTotals).sort(([, left], [, right]) => right - left)[0]?.[0],
+            title: profile.title,
+            summary: profile.summary,
+            reportPath: profile.reportPath,
+          };
+        })
+        .filter(Boolean)
+        .sort(compareProfileEntries);
+
+      const buildTeamEntries = () => {
+        const aggregate = new Map();
+
+        buildProfileEntries().forEach((profile) => {
+          if (!profile.teams || profile.teams.length === 0) return;
+          profile.teams.forEach((team) => {
+            const teamKey = normalizeTeamKey(team);
+            if (!teamKey) return;
+
+            const bucket = aggregate.get(teamKey) || {
+              kind: 'team',
+              team,
+              totalPoints: 0,
+              level: 1,
+              memberCount: 0,
+              analyzedPRs: 0,
+              primaryArea: undefined,
+              lastActivityAt: undefined,
+              members: [],
+              areaTotals: {},
+            };
+
+            bucket.totalPoints += profile.totalPoints;
+            bucket.analyzedPRs += profile.analyzedPRs;
+            bucket.lastActivityAt = !bucket.lastActivityAt
+              ? profile.lastActivityAt
+              : (Date.parse(profile.lastActivityAt || '') > Date.parse(bucket.lastActivityAt || '') ? profile.lastActivityAt : bucket.lastActivityAt);
+            bucket.members.push({
+              username: profile.username,
+              scopeLabel: profile.scopeLabel,
+              reportPath: profile.reportPath,
+            });
+            if (profile.primaryArea) {
+              bucket.areaTotals[profile.primaryArea] = (bucket.areaTotals[profile.primaryArea] || 0) + profile.totalPoints;
+            }
+            bucket.primaryArea = Object.entries(bucket.areaTotals).sort(([, left], [, right]) => right - left)[0]?.[0];
+            aggregate.set(teamKey, bucket);
           });
         });
 
-        const primaryArea = Object.entries(areaTotals).sort(([, left], [, right]) => right - left)[0]?.[0];
-        return {
-          storageKey: profile.storageKey,
-          username: profile.username,
-          totalPoints,
-          level: calculateLevel(totalPoints),
-          lastUpdated: profile.lastUpdated,
-          lastActivityAt,
-          analyzedPRs: filtered.length,
-          primaryArea,
-          title: profile.title,
-          summary: profile.summary,
-          reportPath: profile.reportPath,
-        };
+        return Array.from(aggregate.values())
+          .map((entry) => ({
+            ...entry,
+            level: calculateLevel(entry.totalPoints),
+            memberCount: entry.members.length,
+          }))
+          .sort(compareTeamEntries);
       };
 
-      const renderEntry = (entry, index) => {
-        const preview = compactText(entry.summary, 170);
-        const fullSummary = compactText(entry.summary, 520);
+      const renderProfileEntry = (entry, index) => {
         const reportAction = entry.reportPath
-          ? '<a class="action-link" href="file:///' + String(entry.reportPath).replace(/\\\\/g, '/') + '" target="_blank" rel="noopener noreferrer">Open report</a>'
-          : '<span class="action-link disabled">Report missing</span>';
+          ? '<a class="member-link" href="file:///' + String(entry.reportPath).replace(/\\\\/g, '/') + '" target="_blank" rel="noopener noreferrer">Open report</a>'
+          : '<span class="member-link disabled">Report missing</span>';
+        const teams = entry.teams.length > 0
+          ? entry.teams.map((team) => '<span class="meta-pill">' + escapeHtml(team) + '</span>').join('')
+          : '<span class="empty-pill">No teams</span>';
 
         return '<details class="entry">'
-          + '<summary class="entry-summary">'
+          + '<summary><div class="entry-head">'
           + '<div class="rank">' + (index + 1) + '</div>'
-          + '<div class="entry-main">'
-          + '<div class="entry-top">'
-          + '<div><h2>' + escapeHtml(entry.username) + '</h2><div class="subtitle">' + escapeHtml(entry.title || 'Generated profile') + '</div></div>'
-          + '<div class="xp-block"><strong>' + entry.totalPoints.toLocaleString() + ' XP</strong><span>Level ' + entry.level + '</span></div>'
-          + '</div>'
+          + '<div>'
+          + '<div class="entry-top"><div><h2>' + escapeHtml(entry.username) + '</h2><div class="subtitle">' + escapeHtml(entry.title || 'Generated profile') + '</div></div>'
+          + '<div class="score"><strong>' + entry.totalPoints.toLocaleString() + ' XP</strong><span>Level ' + entry.level + '</span></div></div>'
           + '<div class="meta-row">'
           + '<span class="meta-pill">' + entry.analyzedPRs + ' PRs</span>'
+          + '<span class="meta-pill">' + escapeHtml(entry.scopeLabel) + '</span>'
           + '<span class="meta-pill">' + escapeHtml(formatLabel(entry.primaryArea)) + '</span>'
           + '<span class="meta-pill">Last activity ' + escapeHtml(formatDate(entry.lastActivityAt)) + '</span>'
           + '</div>'
-          + '<p class="summary preview">' + escapeHtml(preview) + '</p>'
+          + '<p class="summary">' + escapeHtml(compactText(entry.summary, 180)) + '</p>'
           + '</div>'
           + '<div class="entry-side">' + reportAction + '<span class="expand-hint">More</span></div>'
-          + '</summary>'
+          + '</div></summary>'
           + '<div class="entry-details">'
-          + '<p class="summary full">' + escapeHtml(fullSummary) + '</p>'
-          + '<div class="detail-grid">'
-          + '<div class="detail-box"><span class="detail-label">Profile</span><strong>' + escapeHtml(entry.title || 'Generated profile') + '</strong></div>'
-          + '<div class="detail-box"><span class="detail-label">Specialization</span><strong>' + escapeHtml(formatLabel(entry.primaryArea)) + '</strong></div>'
-          + '<div class="detail-box"><span class="detail-label">Scope</span><strong>' + escapeHtml(entry.storageKey) + '</strong></div>'
+          + '<p class="summary">' + escapeHtml(compactText(entry.summary, 520)) + '</p>'
+          + '<div class="detail-row">'
+          + '<div class="detail-card"><span>Scope</span><strong>' + escapeHtml(entry.scopeLabel) + '</strong></div>'
+          + '<div class="detail-card"><span>Teams</span><strong>' + escapeHtml(entry.teams.join(', ') || 'No teams') + '</strong></div>'
+          + '<div class="detail-card"><span>Specialization</span><strong>' + escapeHtml(formatLabel(entry.primaryArea)) + '</strong></div>'
           + '</div>'
+          + '<div class="detail-row">' + teams + '</div>'
+          + '</div></details>';
+      };
+
+      const renderTeamEntry = (entry, index) => {
+        const members = entry.members.map((member) => {
+          if (member.reportPath) {
+            return '<div class="member-tag"><a href="file:///' + String(member.reportPath).replace(/\\\\/g, '/') + '" target="_blank" rel="noopener noreferrer">' + escapeHtml(member.username) + '</a><span>' + escapeHtml(member.scopeLabel) + '</span></div>';
+          }
+          return '<div class="member-tag"><strong>' + escapeHtml(member.username) + '</strong><span>' + escapeHtml(member.scopeLabel) + '</span></div>';
+        }).join('');
+
+        return '<details class="entry">'
+          + '<summary><div class="entry-head">'
+          + '<div class="rank">' + (index + 1) + '</div>'
+          + '<div>'
+          + '<div class="entry-top"><div><h2>' + escapeHtml(entry.team) + '</h2><div class="subtitle">Team leaderboard entry</div></div>'
+          + '<div class="score"><strong>' + entry.totalPoints.toLocaleString() + ' XP</strong><span>Level ' + entry.level + '</span></div></div>'
+          + '<div class="meta-row">'
+          + '<span class="meta-pill">' + entry.memberCount + ' members</span>'
+          + '<span class="meta-pill">' + entry.analyzedPRs + ' PRs</span>'
+          + '<span class="meta-pill">' + escapeHtml(formatLabel(entry.primaryArea)) + '</span>'
+          + '<span class="meta-pill">Last activity ' + escapeHtml(formatDate(entry.lastActivityAt)) + '</span>'
+          + '</div>'
+          + '<p class="summary">Combined output from every saved profile tagged with this team.</p>'
           + '</div>'
-          + '</details>';
+          + '<div class="entry-side"><span class="expand-hint">Members</span></div>'
+          + '</div></summary>'
+          + '<div class="entry-details">'
+          + '<div class="detail-row">'
+          + '<div class="detail-card"><span>Members</span><strong>' + entry.memberCount + '</strong></div>'
+          + '<div class="detail-card"><span>Analyzed PRs</span><strong>' + entry.analyzedPRs + '</strong></div>'
+          + '<div class="detail-card"><span>Primary area</span><strong>' + escapeHtml(formatLabel(entry.primaryArea)) + '</strong></div>'
+          + '</div>'
+          + '<div class="member-list">' + members + '</div>'
+          + '</div></details>';
       };
 
-      const renderEmptyState = () => {
-        const specializationValue = specializationFilter.value;
-        const specializationLabel = specializationValue === 'all' ? 'all specializations' : formatLabel(specializationValue);
-        let timeLabel;
-        if (timeFilter.value === 'custom') {
-          const parts = [];
-          if (customFrom) parts.push('from ' + formatDate(customFrom));
-          if (customTo) parts.push('to ' + formatDate(customTo));
-          timeLabel = parts.length ? parts.join(' ') : 'custom range';
-        } else {
-          timeLabel = TIME_LABELS[timeFilter.value] || 'all time';
+      const renderEmpty = () => {
+        if (currentMode === 'team') {
+          return '<div class="empty">No teams match the current filters. Generate profiles with --team to populate this view.</div>';
         }
-        return '<div class="empty">No leaderboard entries match ' + escapeHtml(timeLabel) + ' and ' + escapeHtml(specializationLabel) + '.</div>';
+        if (teamFilter.value !== 'all') {
+          return '<div class="empty">No profiles match team "' + escapeHtml(teamFilter.value) + '" with the current filters.</div>';
+        }
+        return '<div class="empty">No saved profiles match the current filters.</div>';
       };
 
-      const buildFilteredEntries = () => profiles
-        .map((profile) => buildEntry(profile, timeFilter.value, specializationFilter.value))
-        .filter(Boolean)
-        .sort(compareEntries);
+      const getEntries = () => currentMode === 'team' ? buildTeamEntries() : buildProfileEntries();
+
+      const updateModeUI = () => {
+        modeButtons.forEach((button) => {
+          const active = button.getAttribute('data-mode') === currentMode;
+          button.classList.toggle('is-active', active);
+        });
+        teamFilter.disabled = currentMode === 'team';
+      };
 
       const render = () => {
-        const entries = buildFilteredEntries();
+        customRange.classList.toggle('hidden', timeFilter.value !== 'custom');
+        updateModeUI();
+
+        const entries = getEntries();
         const pageCount = Math.max(1, Math.ceil(entries.length / PROFILES_PER_PAGE));
         if (currentPage > pageCount) currentPage = pageCount;
 
         const start = (currentPage - 1) * PROFILES_PER_PAGE;
-        const currentEntries = entries.slice(start, start + PROFILES_PER_PAGE);
+        const pageEntries = entries.slice(start, start + PROFILES_PER_PAGE);
 
-        board.innerHTML = currentEntries.length
-          ? currentEntries.map((entry, index) => renderEntry(entry, start + index)).join('')
-          : renderEmptyState();
+        board.innerHTML = pageEntries.length
+          ? pageEntries.map((entry, index) => entry.kind === 'team' ? renderTeamEntry(entry, start + index) : renderProfileEntry(entry, start + index)).join('')
+          : renderEmpty();
 
-        count.textContent = String(entries.length);
-
-        const specializationValue = specializationFilter.value;
-        const specializationLabel = specializationValue === 'all' ? 'all specializations' : formatLabel(specializationValue);
-        let timeDescription;
-        if (timeFilter.value === 'custom') {
-          const parts = [];
-          if (customFrom) parts.push('from ' + formatDate(customFrom));
-          if (customTo) parts.push('to ' + formatDate(customTo));
-          timeDescription = parts.length ? parts.join(' ') : 'custom range';
-        } else {
-          timeDescription = TIME_LABELS[timeFilter.value] || 'all time';
-        }
-        filterSummary.innerHTML = '<strong>' + entries.length + '</strong> profiles for ' + escapeHtml(timeDescription) + ' across ' + escapeHtml(specializationLabel) + '.';
+        const subject = currentMode === 'team' ? 'teams' : 'profiles';
+        const scopeDescription = currentMode === 'team'
+          ? 'aggregated team rankings'
+          : (teamFilter.value === 'all' ? 'all teams' : 'team ' + teamFilter.value);
+        summary.innerHTML = '<strong>' + entries.length + '</strong> ' + subject + ' for ' + escapeHtml(scopeDescription) + '.';
 
         pagination.hidden = pageCount <= 1;
         prevButton.disabled = currentPage === 1;
@@ -1138,62 +927,20 @@ body {
         pageStatus.innerHTML = 'Page <strong>' + currentPage + '</strong> of ' + pageCount;
       };
 
-      const openModal = () => {
-        modalFromInput.value = customFrom;
-        modalToInput.value = customTo;
-        modalOverlay.hidden = false;
-        modalFromInput.focus();
-      };
-
-      const closeModal = () => {
-        modalOverlay.hidden = true;
-      };
-
-      timeFilter.addEventListener('change', () => {
-        if (timeFilter.value === 'custom') {
-          openModal();
-        } else {
-          previousTimeValue = timeFilter.value;
+      modeButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+          currentMode = button.getAttribute('data-mode') || 'profile';
+          if (currentMode === 'team') teamFilter.value = 'all';
           currentPage = 1;
           render();
-        }
-      });
-
-      modalCancelBtn.addEventListener('click', () => {
-        closeModal();
-        if (timeDropdown) timeDropdown.setValue(previousTimeValue, false);
-      });
-
-      modalApplyBtn.addEventListener('click', () => {
-        customFrom = modalFromInput.value;
-        customTo = modalToInput.value;
-        const parts = [];
-        if (customFrom) parts.push(formatDate(customFrom));
-        if (customTo) parts.push(formatDate(customTo));
-        const label = timeFilter.closest('[data-filter-dropdown]')?.querySelector('[data-filter-label]');
-        if (label) label.textContent = parts.length ? parts.join(' \u2013 ') : 'Custom range';
-        closeModal();
-        currentPage = 1;
-        render();
-      });
-
-      modalOverlay.addEventListener('click', (event) => {
-        if (event.target === modalOverlay) {
-          closeModal();
-          if (timeDropdown) timeDropdown.setValue(previousTimeValue, false);
-        }
-      });
-
-      document.addEventListener('keydown', (event) => {
-        if (event.key === 'Escape' && !modalOverlay.hidden) {
-          closeModal();
-          if (timeDropdown) timeDropdown.setValue(previousTimeValue, false);
-        }
+        });
       });
 
-      specializationFilter.addEventListener('change', () => {
-        currentPage = 1;
-        render();
+      [timeFilter, specializationFilter, teamFilter, fromDate, toDate].forEach((element) => {
+        element.addEventListener('change', () => {
+          currentPage = 1;
+          render();
+        });
       });
 
       prevButton.addEventListener('click', () => {
@@ -1203,8 +950,7 @@ body {
       });
 
       nextButton.addEventListener('click', () => {
-        const entries = buildFilteredEntries();
-        const pageCount = Math.max(1, Math.ceil(entries.length / PROFILES_PER_PAGE));
+        const pageCount = Math.max(1, Math.ceil(getEntries().length / PROFILES_PER_PAGE));
         if (currentPage === pageCount) return;
         currentPage += 1;
         render();