bashstats 0.2.0 → 0.2.2

package/dist/static/index.html

@@ -26,7 +26,9 @@
       --tier-silver: #C0C0C0;
       --tier-gold: #FFD700;
       --tier-diamond: #B9F2FF;
-      --tier-obsidian: #2D1B69;
+      --tier-singularity: #2D1B69;
+      --tier-obsidian: #1a0a3e;
+      --tier-system-anomaly: #00ff41;
     }
 
     :root[data-theme="dark"] {
@@ -371,6 +373,148 @@
       }
     }
 
+    /* ===== OVERVIEW MIDDLE ROW ===== */
+    .overview-mid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 16px;
+      margin-bottom: 16px;
+    }
+
+    .overview-mid > .card {
+      display: flex;
+      flex-direction: column;
+    }
+
+    @media (max-width: 768px) {
+      .overview-mid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .weekly-challenge-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 8px 0;
+      border-bottom: 1px solid var(--bg-accent);
+    }
+
+    .weekly-challenge-item:last-child {
+      border-bottom: none;
+    }
+
+    .weekly-challenge-desc {
+      font-size: 12px;
+      color: var(--text-primary);
+    }
+
+    .weekly-challenge-meta {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    .weekly-challenge-xp {
+      color: var(--accent);
+      font-weight: 600;
+    }
+
+    .weekly-multiplier {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px;
+      color: var(--accent);
+      font-weight: 700;
+    }
+
+    .today-streak {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    .today-streak-number {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 36px;
+      font-weight: 700;
+      color: var(--accent);
+    }
+
+    .today-streak-label {
+      font-size: 12px;
+      color: var(--text-secondary);
+      line-height: 1.3;
+    }
+
+    .today-stat-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    .today-stat-item {
+      text-align: center;
+      padding: 8px;
+      background: var(--bg-accent);
+      border-radius: 2px;
+    }
+
+    .today-stat-value {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .today-stat-label {
+      font-size: 10px;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+    }
+
+    .badge-progress-summary {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+
+    .badge-progress-count {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 28px;
+      font-weight: 700;
+    }
+
+    .badge-progress-total {
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .badge-next-item {
+      padding: 8px;
+      background: var(--bg-accent);
+      border-radius: 2px;
+      border-left: 3px solid var(--accent);
+    }
+
+    .badge-next-name {
+      font-size: 13px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .badge-next-meta {
+      display: flex;
+      justify-content: space-between;
+      font-size: 11px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text-secondary);
+      margin-top: 4px;
+    }
+
     /* ===== RECENT BADGES ===== */
     .recent-badges-list {
       display: flex;
@@ -608,6 +752,17 @@
       line-height: 1.4;
     }
 
+    .badge-trigger {
+      font-size: 11px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--accent);
+      line-height: 1.3;
+      padding: 3px 6px;
+      background: var(--bg-accent);
+      border-radius: 2px;
+      border-left: 2px solid var(--accent);
+    }
+
     .badge-progress-row {
       display: flex;
       align-items: center;
@@ -982,19 +1137,19 @@
     }
 
     /* ===== TIER COLORS ===== */
-    .tier-locked   { color: var(--text-secondary); }
-    .tier-bronze   { color: var(--tier-bronze); }
-    .tier-silver   { color: var(--tier-silver); }
-    .tier-gold     { color: var(--tier-gold); }
-    .tier-diamond  { color: var(--tier-diamond); }
-    .tier-obsidian { color: var(--tier-obsidian); }
-
-    .tier-bg-locked   { background: var(--text-secondary); }
-    .tier-bg-bronze   { background: var(--tier-bronze); }
-    .tier-bg-silver   { background: var(--tier-silver); }
-    .tier-bg-gold     { background: var(--tier-gold); }
-    .tier-bg-diamond  { background: var(--tier-diamond); }
-    .tier-bg-obsidian { background: var(--tier-obsidian); }
+    .tier-locked      { color: var(--text-secondary); }
+    .tier-bronze      { color: var(--tier-bronze); }
+    .tier-silver      { color: var(--tier-silver); }
+    .tier-gold        { color: var(--tier-gold); }
+    .tier-diamond     { color: var(--tier-diamond); }
+    .tier-singularity { color: var(--tier-singularity); }
+
+    .tier-bg-locked      { background: var(--text-secondary); }
+    .tier-bg-bronze      { background: var(--tier-bronze); }
+    .tier-bg-silver      { background: var(--tier-silver); }
+    .tier-bg-gold        { background: var(--tier-gold); }
+    .tier-bg-diamond     { background: var(--tier-diamond); }
+    .tier-bg-singularity { background: var(--tier-singularity); }
 
     /* ===== REFRESH INDICATOR ===== */
     .refresh-indicator {
@@ -1010,6 +1165,304 @@
       padding: 4px 8px;
       box-shadow: 3px 3px 0 var(--shadow);
     }
+
+    .agent-filter {
+      background: var(--bg-card);
+      color: var(--text-primary);
+      border: 3px solid var(--border);
+      border-radius: 2px;
+      padding: 4px 12px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      outline: none;
+      box-shadow: 3px 3px 0 var(--shadow);
+    }
+    .agent-filter:focus {
+      border-color: var(--accent);
+    }
+
+    .agent-badge {
+      display: inline-block;
+      font-size: 0.65rem;
+      padding: 1px 5px;
+      border-radius: 2px;
+      background: var(--bg-card);
+      border: 2px solid var(--border);
+      margin-left: 6px;
+      vertical-align: middle;
+    }
+    .agent-badge.claude-code { border-color: #d97706; color: #d97706; }
+    .agent-badge.gemini-cli { border-color: #4285f4; color: #4285f4; }
+    .agent-badge.copilot-cli { border-color: #6e40c9; color: #6e40c9; }
+    .agent-badge.opencode { border-color: #10b981; color: #10b981; }
+
+    .stat-na {
+      opacity: 0.4;
+      font-style: italic;
+    }
+
+    .agent-breakdown-card {
+      margin-top: 1rem;
+    }
+    .agent-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 6px 0;
+    }
+    .agent-bar-label {
+      width: 100px;
+      font-size: 0.8rem;
+      text-align: right;
+      white-space: nowrap;
+    }
+    .agent-bar-track {
+      flex: 1;
+      background: var(--border);
+      border-radius: 2px;
+      height: 20px;
+      overflow: hidden;
+    }
+    .agent-bar-fill {
+      height: 100%;
+      border-radius: 2px;
+      transition: width 0.3s ease;
+      min-width: 3px;
+    }
+    .agent-bar-value {
+      font-size: 0.8rem;
+      width: 100px;
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    /* ===== RANK PROGRESSION MODAL ===== */
+    .rank-modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      backdrop-filter: blur(4px);
+      z-index: 200;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .rank-modal {
+      background: var(--bg-card);
+      border: 3px solid var(--border);
+      border-radius: 2px;
+      box-shadow: 8px 8px 0 var(--shadow);
+      width: 100%;
+      max-width: 520px;
+      max-height: 85vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .rank-modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 3px solid var(--border);
+      flex-shrink: 0;
+    }
+
+    .rank-modal-title {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .rank-modal-close {
+      background: none;
+      border: 2px solid var(--border);
+      border-radius: 2px;
+      width: 32px;
+      height: 32px;
+      font-size: 20px;
+      line-height: 1;
+      cursor: pointer;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 2px 2px 0 var(--shadow);
+      transition: transform 0.1s, box-shadow 0.1s;
+    }
+
+    .rank-modal-close:hover {
+      transform: translate(-1px, -1px);
+      box-shadow: 3px 3px 0 var(--shadow);
+    }
+
+    .rank-modal-body {
+      overflow-y: auto;
+      padding: 20px;
+      flex: 1;
+    }
+
+    /* Tier sections */
+    .rank-tier-section {
+      margin-bottom: 24px;
+      padding-left: 16px;
+      border-left: 3px solid var(--text-secondary);
+    }
+
+    .rank-tier-section:last-child {
+      margin-bottom: 0;
+    }
+
+    .rank-tier-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--bg-accent);
+    }
+
+    .rank-tier-name {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .rank-tier-range {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    /* Track nodes */
+    .rank-track {
+      position: relative;
+      padding-left: 20px;
+    }
+
+    .rank-track::before {
+      content: '';
+      position: absolute;
+      left: 7px;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: var(--bg-accent);
+    }
+
+    .rank-node {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 6px 0;
+    }
+
+    .rank-node-dot {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      border: 2px solid var(--text-secondary);
+      background: var(--bg-card);
+      flex-shrink: 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    .rank-node-dot.unlocked {
+      border-color: currentColor;
+      background: currentColor;
+    }
+
+    .rank-node-dot.milestone {
+      width: 20px;
+      height: 20px;
+    }
+
+    .rank-node-info {
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .rank-node-number {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 13px;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+
+    .rank-node-xp {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+    }
+
+    .rank-node-label {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10px;
+      font-weight: 700;
+      padding: 1px 6px;
+      border: 2px solid;
+      border-radius: 2px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    /* Current rank node */
+    .rank-node.current .rank-node-dot {
+      width: 22px;
+      height: 22px;
+      box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px currentColor;
+      animation: rankPulse 2s ease-in-out infinite;
+    }
+
+    .rank-node.current {
+      padding: 10px 0;
+    }
+
+    /* Locked/future nodes */
+    .rank-node.locked .rank-node-number {
+      color: var(--text-secondary);
+    }
+
+    .rank-node.locked .rank-node-xp {
+      color: var(--text-secondary);
+      opacity: 0.6;
+    }
+
+    @keyframes rankPulse {
+      0%, 100% { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px currentColor; }
+      50% { box-shadow: 0 0 0 3px var(--bg-card), 0 0 8px 5px currentColor; }
+    }
+
+    /* Clickable rank badge and rank card */
+    #header-rank-badge {
+      cursor: pointer;
+      transition: transform 0.1s, box-shadow 0.1s;
+    }
+
+    #header-rank-badge:hover {
+      transform: translate(-2px, -2px);
+      box-shadow: 5px 5px 0 var(--shadow);
+    }
+
+    .overview-rank-clickable {
+      cursor: pointer;
+      transition: transform 0.1s, box-shadow 0.1s;
+    }
+
+    .overview-rank-clickable:hover {
+      transform: translate(-2px, -2px);
+      box-shadow: 8px 8px 0 var(--shadow);
+    }
   </style>
 </head>
 <body>
@@ -1025,12 +1478,13 @@
         </div>
       </div>
       <div class="header-right">
-        <div class="xp-bar-container" id="header-xp-container" style="display:none;">
-          <span class="xp-bar-label" id="header-xp-label">0 XP</span>
-          <div class="xp-bar-track">
-            <div class="xp-bar-fill" id="header-xp-fill" style="width:0%"></div>
-          </div>
-        </div>
+        <select id="agent-filter" class="agent-filter" title="Filter by agent">
+          <option value="">All Agents</option>
+          <option value="claude-code">Claude Code</option>
+          <option value="gemini-cli">Gemini CLI</option>
+          <option value="copilot-cli">Copilot CLI</option>
+          <option value="opencode">OpenCode</option>
+        </select>
         <div class="streak-display" id="header-streak" style="display:none;">
           <span id="streak-icon">&#128293;</span>
           <span id="streak-days">0d</span>
@@ -1063,13 +1517,30 @@
             <div class="card-title">Recent Badges</div>
             <div id="overview-recent-badges" class="recent-badges-list"></div>
           </div>
-          <div class="card">
+          <div class="card overview-rank-clickable" onclick="openRankModal()">
             <div class="card-title">Current Rank</div>
             <div id="overview-rank-card" class="rank-card-inner"></div>
           </div>
         </div>
+        <!-- Middle row: Weekly Goals + Streak & Today + Badge Progress -->
+        <div class="overview-mid">
+          <div class="card">
+            <div class="card-title">Weekly Goals <span class="weekly-multiplier" id="weekly-multiplier-label"></span></div>
+            <div id="overview-weekly-goals"></div>
+          </div>
+          <div class="card">
+            <div class="card-title">Streak & Today</div>
+            <div id="overview-streak-today"></div>
+          </div>
+          <div class="card">
+            <div class="card-title">Badge Progress</div>
+            <div id="overview-badge-progress"></div>
+          </div>
+        </div>
         <!-- Stat cards -->
         <div class="stat-grid" id="overview-stat-cards"></div>
+        <!-- Agent breakdown -->
+        <div id="overview-agent-breakdown"></div>
         <!-- Sparkline -->
         <div class="sparkline-section card" id="overview-sparkline-card">
           <div class="card-title">30-Day Activity</div>
@@ -1159,6 +1630,7 @@
             <a class="settings-link" href="/api/achievements" target="_blank">/api/achievements</a>
             <a class="settings-link" href="/api/activity" target="_blank">/api/activity</a>
             <a class="settings-link" href="/api/sessions" target="_blank">/api/sessions</a>
+            <a class="settings-link" href="/api/weekly-goals" target="_blank">/api/weekly-goals</a>
           </div>
         </div>
       </div>
@@ -1180,23 +1652,38 @@
     <span id="refresh-text"></span>
   </div>
 
+  <!-- Rank Progression Modal -->
+  <div id="rank-modal-overlay" class="rank-modal-overlay" style="display:none">
+    <div class="rank-modal">
+      <div class="rank-modal-header">
+        <div class="rank-modal-title">Rank Progression</div>
+        <button class="rank-modal-close" onclick="closeRankModal()">&times;</button>
+      </div>
+      <div class="rank-modal-body" id="rank-modal-body"></div>
+    </div>
+  </div>
+
   <script>
     /* ===================================================================
        bashstats Dashboard - Single Page Application
        =================================================================== */
 
     // ===== STATE =====
+    let selectedAgent = ''
+    let agentBreakdown = null
+
     const state = {
       stats: null,
       achievements: null,
       activity: null,
       sessions: null,
+      weeklyGoals: null,
       lastFetch: null,
     };
 
     // ===== TIER HELPERS =====
-    const TIER_NAMES = ['Locked', 'Bronze', 'Silver', 'Gold', 'Diamond', 'Obsidian'];
-    const TIER_CLASSES = ['locked', 'bronze', 'silver', 'gold', 'diamond', 'obsidian'];
+    const TIER_NAMES = ['Locked', 'Bronze', 'Silver', 'Gold', 'Diamond', 'Singularity'];
+    const TIER_CLASSES = ['locked', 'bronze', 'silver', 'gold', 'diamond', 'singularity'];
 
     function tierClass(tier) {
       return TIER_CLASSES[tier] || 'locked';
@@ -1209,20 +1696,21 @@
         'var(--tier-silver)',
         'var(--tier-gold)',
         'var(--tier-diamond)',
-        'var(--tier-obsidian)',
+        'var(--tier-singularity)',
       ];
       return colors[tier] || colors[0];
     }
 
-    function rankColor(rank) {
+    function rankColor(rankTier) {
       const map = {
         'Bronze': 'var(--tier-bronze)',
         'Silver': 'var(--tier-silver)',
         'Gold': 'var(--tier-gold)',
         'Diamond': 'var(--tier-diamond)',
         'Obsidian': 'var(--tier-obsidian)',
+        'System Anomaly': 'var(--tier-system-anomaly)',
       };
-      return map[rank] || 'var(--tier-bronze)';
+      return map[rankTier] || 'var(--tier-bronze)';
     }
 
     // ===== FORMAT HELPERS =====
@@ -1283,17 +1771,22 @@
     }
 
     async function loadAllData() {
-      const [stats, achievements, activity, sessions] = await Promise.all([
-        fetchJSON('/api/stats'),
-        fetchJSON('/api/achievements'),
-        fetchJSON('/api/activity'),
-        fetchJSON('/api/sessions'),
+      const agentParam = selectedAgent ? '?agent=' + selectedAgent : ''
+      const [stats, achievements, activity, sessions, agents, weeklyGoals] = await Promise.all([
+        fetchJSON('/api/stats' + agentParam),
+        fetchJSON('/api/achievements' + agentParam),
+        fetchJSON('/api/activity?days=365'),
+        fetchJSON('/api/sessions' + agentParam),
+        fetchJSON('/api/agents'),
+        fetchJSON('/api/weekly-goals'),
       ]);
 
-      state.stats = stats;
-      state.achievements = achievements;
-      state.activity = activity;
-      state.sessions = sessions;
+      if (stats) state.stats = stats;
+      if (achievements) state.achievements = achievements;
+      if (activity) state.activity = activity;
+      if (sessions) state.sessions = sessions;
+      if (agents) agentBreakdown = agents;
+      if (weeklyGoals) state.weeklyGoals = weeklyGoals;
       state.lastFetch = new Date();
 
       renderAll();
@@ -1324,6 +1817,14 @@
       });
     }
 
+    // ===== AGENT FILTER =====
+    function setupAgentFilter() {
+      document.getElementById('agent-filter').addEventListener('change', (e) => {
+        selectedAgent = e.target.value
+        loadAllData()
+      })
+    }
+
     // ===== THEME SWITCHING =====
     function setupTheme() {
       const sel = document.getElementById('settings-theme');
@@ -1365,15 +1866,8 @@
         const rankDot = document.getElementById('header-rank-dot');
         const rankText = document.getElementById('header-rank-text');
         rankBadge.style.display = 'inline-flex';
-        rankDot.style.background = rankColor(xp.rank);
-        rankText.textContent = xp.rank;
-
-        const xpContainer = document.getElementById('header-xp-container');
-        const xpLabel = document.getElementById('header-xp-label');
-        const xpFill = document.getElementById('header-xp-fill');
-        xpContainer.style.display = 'flex';
-        xpLabel.textContent = formatNumber(xp.totalXP) + ' XP';
-        xpFill.style.width = Math.min(100, (xp.progress || 0) * 100) + '%';
+        rankDot.style.background = rankColor(xp.rankTier);
+        rankText.textContent = `Rank ${xp.rankNumber}`;
       }
 
       if (time) {
@@ -1410,13 +1904,14 @@
       content.style.display = 'block';
 
       const lt = state.stats.lifetime || {};
+      const filesTouched = (lt.totalFilesRead || 0) + (lt.totalFilesEdited || 0) + (lt.totalFilesCreated || 0);
       const cards = [
         { label: 'Sessions', value: formatNumber(lt.totalSessions || 0), sub: 'lifetime' },
         { label: 'Prompts', value: formatNumber(lt.totalPrompts || 0), sub: 'messages sent' },
         { label: 'Tool Calls', value: formatNumber(lt.totalToolCalls || 0), sub: 'total invocations' },
         { label: 'Hours', value: formatHours(lt.totalDurationSeconds || 0), sub: 'coding time' },
-        { label: 'Tokens Used', value: formatTokens(lt.totalTokens || 0), sub: 'input + output' },
-        { label: 'Bash Cmds', value: formatNumber(lt.totalBashCommands || lt.totalToolCalls || 0), sub: 'commands run' },
+        { label: 'Tokens Used', value: formatTokens(lt.totalTokens || 0), sub: 'all token types' },
+        { label: 'Files Touched', value: formatNumber(filesTouched), sub: 'read + edit + create' },
       ];
 
       const cardsEl = document.getElementById('overview-stat-cards');
@@ -1428,6 +1923,10 @@
         </div>
       `).join('');
 
+      // Agent breakdown panel (only shown for "All Agents")
+      const breakdownEl = document.getElementById('overview-agent-breakdown');
+      if (breakdownEl) breakdownEl.innerHTML = renderAgentBreakdown();
+
       // Sparkline
       renderSparkline();
 
@@ -1440,6 +1939,11 @@
 
       // Rank card
       renderOverviewRank();
+
+      // Middle row cards
+      renderWeeklyGoals();
+      renderStreakToday();
+      renderBadgeProgress();
     }
 
     function renderEmptyOverview() {
@@ -1449,7 +1953,7 @@
         <div class="stat-card"><div class="stat-card-label">Tool Calls</div><div class="stat-card-number mono">0</div></div>
         <div class="stat-card"><div class="stat-card-label">Hours</div><div class="stat-card-number mono">0</div></div>
         <div class="stat-card"><div class="stat-card-label">Tokens Used</div><div class="stat-card-number mono">0</div></div>
-        <div class="stat-card"><div class="stat-card-label">Bash Cmds</div><div class="stat-card-number mono">0</div></div>
+        <div class="stat-card"><div class="stat-card-label">Files Touched</div><div class="stat-card-number mono">0</div></div>
       `;
     }
 
@@ -1465,7 +1969,7 @@
       for (let i = 29; i >= 0; i--) {
         const d = new Date(today);
         d.setDate(d.getDate() - i);
-        const dateStr = d.toISOString().split('T')[0];
+        const dateStr = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
         const found = activity.find(a => a.date === dateStr);
         const val = found ? (found.sessions + found.prompts + found.tool_calls) : 0;
         days.push({ date: dateStr, value: val });
@@ -1514,23 +2018,164 @@
       }
 
       const pct = Math.min(100, (xp.progress || 0) * 100);
-      const rc = rankColor(xp.rank);
-      const initial = xp.rank.charAt(0);
+      const rc = rankColor(xp.rankTier);
+      const rankNum = xp.rankNumber || 0;
       el.innerHTML = `
         <div class="rank-card-icon" style="border-color:${rc};background:${rc}22">
-          <span class="rank-card-icon-text" style="color:${rc}">${escapeHtml(initial)}</span>
+          <span class="rank-card-icon-text" style="color:${rc}">${rankNum}</span>
         </div>
         <div class="rank-card-info">
-          <div class="rank-card-rank" style="color:${rc}">${escapeHtml(xp.rank)}</div>
+          <div class="rank-card-rank" style="color:${rc}">Rank ${rankNum} &middot; ${escapeHtml(xp.rankTier)}</div>
           <div class="rank-card-xp">${formatNumber(xp.totalXP)} / ${formatNumber(xp.nextRankXP)} XP</div>
           <div class="rank-progress-track">
             <div class="rank-progress-fill" style="width:${pct}%;background:${rc}"></div>
           </div>
-          <div class="rank-progress-label">${pct.toFixed(1)}% to ${escapeHtml(xp.rank === 'Obsidian' ? 'max rank' : 'next rank')}</div>
+          <div class="rank-progress-label">${pct.toFixed(1)}% to ${escapeHtml(rankNum >= 500 ? 'System Anomaly' : 'Rank ' + (rankNum + 1))}</div>
         </div>
       `;
     }
 
+    // ===== RENDER: WEEKLY GOALS =====
+    function renderWeeklyGoals() {
+      const el = document.getElementById('overview-weekly-goals');
+      const label = document.getElementById('weekly-multiplier-label');
+      const goals = state.weeklyGoals;
+
+      if (!goals || !goals.challenges) {
+        el.innerHTML = '<div style="font-size:12px;color:var(--text-secondary);padding:8px 0;">No weekly goals data</div>';
+        if (label) label.textContent = '';
+        return;
+      }
+
+      if (label) label.textContent = goals.multiplier > 1 ? '\u00B7 ' + goals.multiplier.toFixed(1) + 'x' : '';
+
+      let html = goals.challenges.map(c => {
+        const pct = Math.min(100, c.progress * 100);
+        return '<div class="weekly-challenge-item">' +
+          '<div class="weekly-challenge-desc">' + (c.completed ? '<span style="color:var(--success);font-weight:700">\u2713</span> ' : '') + escapeHtml(c.description) + '</div>' +
+          '<div class="badge-progress-row">' +
+            '<div class="badge-progress-track">' +
+              '<div class="badge-progress-fill' + (c.completed ? ' maxed' : '') + '" style="width:' + pct + '%"></div>' +
+            '</div>' +
+            '<span class="badge-progress-text">' + c.current + '/' + c.threshold + '</span>' +
+          '</div>' +
+          '<div class="weekly-challenge-meta">' +
+            '<span></span>' +
+            '<span class="weekly-challenge-xp">+' + c.xpReward + ' XP</span>' +
+          '</div>' +
+        '</div>';
+      }).join('');
+
+      html += '<div style="margin-top:8px;font-size:11px;color:var(--text-secondary);font-family:\'JetBrains Mono\',monospace;">' +
+        goals.daysActive + '/7 days active \u00B7 ' + goals.multiplier.toFixed(1) + 'x multiplier</div>';
+
+      el.innerHTML = html;
+    }
+
+    // ===== RENDER: STREAK & TODAY =====
+    function renderStreakToday() {
+      const el = document.getElementById('overview-streak-today');
+      const time = state.stats?.time;
+      const activity = state.activity || [];
+
+      const today = new Date();
+      const todayStr = today.getFullYear() + '-' + String(today.getMonth()+1).padStart(2,'0') + '-' + String(today.getDate()).padStart(2,'0');
+      const todayActivity = activity.find(a => a.date === todayStr);
+
+      const streak = time?.currentStreak || 0;
+      const todaySessions = todayActivity?.sessions || 0;
+      const todayPrompts = todayActivity?.prompts || 0;
+      const todayTools = todayActivity?.tool_calls || 0;
+      const todayHours = todayActivity ? (todayActivity.duration_seconds / 3600).toFixed(1) : '0';
+
+      el.innerHTML =
+        '<div class="today-streak">' +
+          '<span class="today-streak-number">' + streak + '</span>' +
+          '<span class="today-streak-label">day streak' + (streak > 0 ? '<br>\uD83D\uDD25' : '') + '</span>' +
+        '</div>' +
+        '<div class="today-stat-grid">' +
+          '<div class="today-stat-item"><div class="today-stat-value">' + todaySessions + '</div><div class="today-stat-label">Sessions</div></div>' +
+          '<div class="today-stat-item"><div class="today-stat-value">' + todayPrompts + '</div><div class="today-stat-label">Prompts</div></div>' +
+          '<div class="today-stat-item"><div class="today-stat-value">' + todayTools + '</div><div class="today-stat-label">Tools</div></div>' +
+          '<div class="today-stat-item"><div class="today-stat-value">' + todayHours + '</div><div class="today-stat-label">Hours</div></div>' +
+        '</div>';
+    }
+
+    // ===== RENDER: BADGE PROGRESS =====
+    function renderBadgeProgress() {
+      const el = document.getElementById('overview-badge-progress');
+      const badges = state.achievements?.badges || [];
+
+      const totalBadges = badges.length;
+      const unlockedBadges = badges.filter(b => b.unlocked).length;
+
+      const locked = badges.filter(b => !b.unlocked && !b.secret);
+      locked.sort((a, b) => (b.progress || 0) - (a.progress || 0));
+      const nextBadge = locked[0];
+
+      const pct = totalBadges > 0 ? Math.round((unlockedBadges / totalBadges) * 100) : 0;
+
+      let html =
+        '<div class="badge-progress-summary">' +
+          '<span class="badge-progress-count">' + unlockedBadges + '</span>' +
+          '<span class="badge-progress-total">/ ' + totalBadges + ' badges unlocked (' + pct + '%)</span>' +
+        '</div>' +
+        '<div class="badge-progress-row" style="margin-bottom:12px;">' +
+          '<div class="badge-progress-track">' +
+            '<div class="badge-progress-fill" style="width:' + pct + '%"></div>' +
+          '</div>' +
+        '</div>';
+
+      if (nextBadge) {
+        const nextPct = Math.min(100, (nextBadge.progress || 0) * 100);
+        html +=
+          '<div class="badge-next-item">' +
+            '<div class="badge-next-name">' + (nextBadge.icon || '\uD83C\uDFC5') + ' ' + escapeHtml(nextBadge.name) + '</div>' +
+            '<div class="badge-progress-row">' +
+              '<div class="badge-progress-track">' +
+                '<div class="badge-progress-fill" style="width:' + nextPct + '%"></div>' +
+              '</div>' +
+              '<span class="badge-progress-text">' + formatNumber(nextBadge.value || 0) + '/' + formatNumber(nextBadge.nextThreshold || 0) + '</span>' +
+            '</div>' +
+            '<div class="badge-next-meta">' +
+              '<span>' + escapeHtml(nextBadge.description || '') + '</span>' +
+              '<span>' + nextPct.toFixed(0) + '%</span>' +
+            '</div>' +
+          '</div>';
+      }
+
+      el.innerHTML = html;
+    }
+
+    // ===== RENDER: AGENT BREAKDOWN =====
+    function renderAgentBreakdown() {
+      if (selectedAgent || !agentBreakdown || !agentBreakdown.sessionsPerAgent) return ''
+      const entries = Object.entries(agentBreakdown.sessionsPerAgent).sort(([,a], [,b]) => b - a)
+      if (entries.length <= 1) return ''
+      const maxSessions = Math.max(...entries.map(([,c]) => c), 1)
+      const agentColors = { 'claude-code': '#d97706', 'gemini-cli': '#4285f4', 'copilot-cli': '#6e40c9', 'opencode': '#10b981' }
+      const agentNames = { 'claude-code': 'Claude Code', 'gemini-cli': 'Gemini CLI', 'copilot-cli': 'Copilot CLI', 'opencode': 'OpenCode' }
+
+      const bars = entries.map(([agent, count]) => {
+        const pct = Math.round(count / maxSessions * 100)
+        const hours = agentBreakdown.hoursPerAgent[agent] ?? 0
+        const color = agentColors[agent] ?? 'var(--accent)'
+        const name = agentNames[agent] ?? agent
+        return '<div class="agent-bar">' +
+          '<span class="agent-bar-label">' + escapeHtml(name) + '</span>' +
+          '<div class="agent-bar-track"><div class="agent-bar-fill" style="width:' + pct + '%;background:' + color + '"></div></div>' +
+          '<span class="agent-bar-value">' + count + ' / ' + hours + 'h</span>' +
+          '</div>'
+      }).join('')
+
+      const favName = agentNames[agentBreakdown.favoriteAgent] ?? agentBreakdown.favoriteAgent
+      return '<div class="card agent-breakdown-card">' +
+        '<h3>Agent Breakdown</h3>' +
+        '<p style="margin:0 0 8px;font-size:0.85rem">Favorite: <strong>' + escapeHtml(favName) + '</strong> &middot; ' + agentBreakdown.distinctAgents + ' agent' + (agentBreakdown.distinctAgents !== 1 ? 's' : '') + ' used</p>' +
+        bars +
+        '</div>'
+    }
+
     // ===== RENDER: STATS =====
     function renderOverviewHeatmap() {
       const wrapper = document.getElementById('overview-heatmap');
@@ -1621,11 +2266,12 @@
           <div>Date</div><div>Project</div><div style="text-align:right">Duration</div><div style="text-align:right">Prompts</div><div style="text-align:right">Tools</div><div style="text-align:right">Tokens</div>
         </div>
         ${recent.map(s => {
-          const sessionTokens = (s.input_tokens || 0) + (s.output_tokens || 0);
+          const sessionTokens = (s.input_tokens || 0) + (s.output_tokens || 0) + (s.cache_creation_input_tokens || 0) + (s.cache_read_input_tokens || 0);
+          const agentBadge = '<span class="agent-badge ' + (s.agent || 'claude-code') + '">' + escapeHtml(s.agent || 'claude-code') + '</span>';
           return `
           <div class="session-item">
             <div class="session-date">${escapeHtml(formatDateTime(s.start_time || s.startTime || s.started_at || ''))}</div>
-            <div class="session-project">${escapeHtml(s.project || s.projectName || 'Unknown')}</div>
+            <div class="session-project">${escapeHtml(s.project || s.projectName || 'Unknown')}${agentBadge}</div>
             <div class="session-stat">${formatDuration(s.duration_seconds || s.durationSeconds || 0)}</div>
             <div class="session-stat">${formatNumber(s.prompt_count || s.prompts || s.promptCount || 0)}</div>
             <div class="session-stat">${formatNumber(s.tool_count || s.tool_calls || s.toolCalls || 0)}</div>
@@ -1671,12 +2317,12 @@
 
       // Token Usage
       html += buildStatsSection('Token Usage', [
-        ['Total Tokens', formatTokens((lt.totalInputTokens || 0) + (lt.totalOutputTokens || 0))],
+        ['Total Tokens', formatTokens(lt.totalTokens || 0)],
         ['Input Tokens', formatTokens(lt.totalInputTokens)],
         ['Output Tokens', formatTokens(lt.totalOutputTokens)],
         ['Cache Read Tokens', formatTokens(lt.totalCacheReadTokens)],
         ['Cache Creation Tokens', formatTokens(lt.totalCacheCreationTokens)],
-        ['Avg Tokens / Session', formatTokens(lt.totalSessions ? Math.round(((lt.totalInputTokens || 0) + (lt.totalOutputTokens || 0)) / lt.totalSessions) : 0)],
+        ['Avg Tokens / Session', formatTokens(lt.totalSessions ? Math.round((lt.totalTokens || 0) / lt.totalSessions) : 0)],
       ]);
 
       // Tool Breakdown
@@ -1757,16 +2403,24 @@
       });
 
       let html = '';
-      const catOrder = ['volume', 'tools', 'streaks', 'time', 'exploration', 'humor', 'secret'];
+      const catOrder = ['volume', 'token_usage', 'tool_mastery', 'time', 'session_behavior', 'behavioral', 'prompt_patterns', 'resilience', 'error_recovery', 'tool_combos', 'shipping', 'project_dedication', 'multi_agent', 'wild_card', 'aspirational', 'secret'];
       const catNames = {
         volume: 'Volume',
-        tools: 'Tools',
-        streaks: 'Streaks',
-        time: 'Time',
-        exploration: 'Exploration',
-        humor: 'Humor',
+        token_usage: 'Token Usage',
+        tool_mastery: 'Tool Mastery',
+        time: 'Time & Patterns',
+        session_behavior: 'Session Behavior',
+        behavioral: 'Behavioral',
+        prompt_patterns: 'Prompt Patterns',
+        resilience: 'Resilience',
+        error_recovery: 'Error & Recovery',
+        tool_combos: 'Tool Combos',
+        shipping: 'Shipping & Projects',
+        project_dedication: 'Project Dedication',
+        multi_agent: 'Multi-Agent',
+        wild_card: 'Wild Card',
+        aspirational: 'Aspirational',
         secret: 'Secret',
-        general: 'General',
       };
 
       // Sort: known categories first, then others
@@ -1786,6 +2440,7 @@
           const cardClass = isSecretLocked ? 'badge-card secret-locked' : (isLocked ? 'badge-card locked' : 'badge-card');
           const displayName = isSecretLocked ? '???' : b.name;
           const displayDesc = isSecretLocked ? 'Unlock this secret badge to reveal it.' : (b.description || '');
+          const displayTrigger = isSecretLocked ? '' : (b.trigger || '');
           const pct = b.maxed ? 100 : Math.min(100, (b.progress || 0) * 100);
           const fillClass = b.maxed ? 'badge-progress-fill maxed' : 'badge-progress-fill';
 
@@ -1799,6 +2454,7 @@
                 <span class="badge-tier-label" style="color:${tierColor(b.tier)};border-color:${tierColor(b.tier)}">${escapeHtml(b.tierName || TIER_NAMES[b.tier] || 'Locked')}</span>
               </div>
               ${displayDesc ? `<div class="badge-description">${escapeHtml(displayDesc)}</div>` : ''}
+              ${displayTrigger ? `<div class="badge-trigger">${escapeHtml(displayTrigger)}</div>` : ''}
               <div class="badge-progress-row">
                 <div class="badge-progress-track">
                   <div class="${fillClass}" style="width:${pct}%"></div>
@@ -1886,6 +2542,106 @@
       }
     }
 
+    // ===== RANK PROGRESSION MODAL =====
+    const RANK_TIER_BRACKETS = [
+      { tier: 'Bronze', minRank: 1, maxRank: 100, color: 'var(--tier-bronze)' },
+      { tier: 'Silver', minRank: 101, maxRank: 200, color: 'var(--tier-silver)' },
+      { tier: 'Gold', minRank: 201, maxRank: 300, color: 'var(--tier-gold)' },
+      { tier: 'Diamond', minRank: 301, maxRank: 400, color: 'var(--tier-diamond)' },
+      { tier: 'Obsidian', minRank: 401, maxRank: 499, color: 'var(--tier-obsidian)' },
+      { tier: 'System Anomaly', minRank: 500, maxRank: 500, color: 'var(--tier-system-anomaly)' },
+    ];
+
+    function xpForRankClient(rank) {
+      if (rank <= 0) return 0;
+      return Math.floor(10 * Math.pow(rank, 2.2));
+    }
+
+    function openRankModal() {
+      const xp = state.achievements?.xp;
+      if (!xp) return;
+
+      const currentRank = xp.rankNumber || 1;
+      const totalXP = xp.totalXP || 0;
+      const body = document.getElementById('rank-modal-body');
+      let html = '';
+
+      RANK_TIER_BRACKETS.forEach(bracket => {
+        const isCurrent = currentRank >= bracket.minRank && currentRank <= bracket.maxRank;
+        const isPast = currentRank > bracket.maxRank;
+        const tierOpacity = !isPast && !isCurrent ? ' opacity:0.5;' : '';
+        const xpStart = formatNumber(xpForRankClient(bracket.minRank));
+        const xpEnd = formatNumber(xpForRankClient(bracket.maxRank));
+
+        html += `<div class="rank-tier-section" style="border-left-color:${bracket.color};${tierOpacity}">`;
+        html += `<div class="rank-tier-header">`;
+        html += `<span class="rank-tier-name" style="color:${bracket.color}">${escapeHtml(bracket.tier)}</span>`;
+        html += `<span class="rank-tier-range">Rank ${bracket.minRank}-${bracket.maxRank} &middot; ${xpStart}-${xpEnd} XP</span>`;
+        html += `</div>`;
+        html += `<div class="rank-track" style="color:${bracket.color}">`;
+
+        // Determine milestone ranks: tier start, every 25th within tier, tier end, plus current rank
+        const milestones = new Set();
+        milestones.add(bracket.minRank);
+        for (let r = bracket.minRank; r <= bracket.maxRank; r += 25) {
+          milestones.add(r);
+        }
+        milestones.add(bracket.maxRank);
+
+        // Always include the current rank if it's in this tier
+        if (isCurrent) {
+          milestones.add(currentRank);
+        }
+
+        const sortedMilestones = [...milestones].sort((a, b) => a - b);
+
+        sortedMilestones.forEach(rank => {
+          const xpRequired = xpForRankClient(rank);
+          const isUnlocked = rank <= currentRank;
+          const isCurrentRank = rank === currentRank;
+          const isMilestoneRank = rank % 25 === 0 || rank === bracket.minRank || rank === bracket.maxRank;
+
+          const nodeClasses = ['rank-node'];
+          if (isCurrentRank) nodeClasses.push('current');
+          if (!isUnlocked) nodeClasses.push('locked');
+
+          const dotClasses = ['rank-node-dot'];
+          if (isUnlocked) dotClasses.push('unlocked');
+          if (isMilestoneRank || isCurrentRank) dotClasses.push('milestone');
+
+          html += `<div class="${nodeClasses.join(' ')}" ${isCurrentRank ? 'id="rank-current-node"' : ''}>`;
+          html += `<div class="${dotClasses.join(' ')}"></div>`;
+          html += `<div class="rank-node-info">`;
+          html += `<span class="rank-node-number" ${isUnlocked ? `style="color:${bracket.color}"` : ''}>Rank ${rank}</span>`;
+          html += `<span class="rank-node-xp">${formatNumber(xpRequired)} XP</span>`;
+          html += `</div>`;
+          if (isCurrentRank) {
+            html += `<span class="rank-node-label" style="color:${bracket.color};border-color:${bracket.color}">CURRENT</span>`;
+          }
+          html += `</div>`;
+        });
+
+        html += `</div></div>`;
+      });
+
+      body.innerHTML = html;
+
+      const overlay = document.getElementById('rank-modal-overlay');
+      overlay.style.display = 'flex';
+
+      // Scroll to current rank after a tick to allow rendering
+      requestAnimationFrame(() => {
+        const currentNode = document.getElementById('rank-current-node');
+        if (currentNode) {
+          currentNode.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      });
+    }
+
+    function closeRankModal() {
+      document.getElementById('rank-modal-overlay').style.display = 'none';
+    }
+
     // ===== AUTO-REFRESH =====
     function startAutoRefresh() {
       setInterval(() => {
@@ -1896,9 +2652,25 @@
     // ===== INIT =====
     function init() {
       setupTabs();
+      setupAgentFilter();
       setupTheme();
       loadAllData();
       startAutoRefresh();
+
+      // Rank modal: header badge click
+      document.getElementById('header-rank-badge').addEventListener('click', openRankModal);
+
+      // Rank modal: overlay click to close
+      document.getElementById('rank-modal-overlay').addEventListener('click', (e) => {
+        if (e.target === e.currentTarget) closeRankModal();
+      });
+
+      // Rank modal: escape key
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && document.getElementById('rank-modal-overlay').style.display !== 'none') {
+          closeRankModal();
+        }
+      });
     }
 
     document.addEventListener('DOMContentLoaded', init);