From 0c2215c7f131c91681e83ea0efc31eb64a8f7098 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 22 Apr 2026 14:38:29 +0000
Subject: [PATCH] Add hide completed milestones checkbox

Agent-Logs-Url: https://github.com/nitrocode/token-deathclock/sessions/fbc5adbd-ea76-4925-a49c-323b72351b1c

Co-authored-by: nitrocode <7775707+nitrocode@users.noreply.github.com>
---
 index.html |  4 ++++
 script.js  |  9 +++++++++
 styles.css | 22 ++++++++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/index.html b/index.html
index c559919..ee5b2f7 100644
--- a/index.html
+++ b/index.html
@@ -171,6 +171,10 @@ <h2>Token Consumption Milestones</h2>
       Each threshold represents the cumulative global AI token count at which a symbolic environmental
       event occurs.  Triggered milestones are highlighted in red.
     </p>
+    <label class="milestone-filter-label">
+      <input type="checkbox" id="hideCompletedMilestones" />
+      Hide completed milestones
+    </label>
     <div class="milestones-grid" id="milestonesGrid">
       <!-- populated by script.js -->
     </div>
diff --git a/script.js b/script.js
index cab185d..338ca9e 100644
--- a/script.js
+++ b/script.js
@@ -2315,6 +2315,15 @@
     const toggleBtn = document.getElementById('themeToggle');
     if (toggleBtn) toggleBtn.addEventListener('click', toggleTheme);
 
+    // Hide completed milestones toggle
+    const hideCompletedCb = document.getElementById('hideCompletedMilestones');
+    if (hideCompletedCb) {
+      hideCompletedCb.addEventListener('change', function () {
+        const grid = document.getElementById('milestonesGrid');
+        if (grid) grid.classList.toggle('hide-completed', this.checked);
+      });
+    }
+
     // Render static sections once
     renderMilestones();
     renderPredictionsTable();
diff --git a/styles.css b/styles.css
index 98151e1..b09e467 100644
--- a/styles.css
+++ b/styles.css
@@ -301,6 +301,28 @@ header::after {
 /* ---- Milestones ---- */
 #milestones-section { background: var(--bg); }
 
+.milestone-filter-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 0.5rem;
+}
+
+.milestone-filter-label input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--accent);
+  width: 1rem;
+  height: 1rem;
+}
+
+.milestones-grid.hide-completed .milestone-card.triggered {
+  display: none;
+}
+
 .milestones-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));