Fix token counter anchor + add Life Blocks drill-down visualization

.github/workflows/deploy.yml

@@ -5,35 +5,30 @@ on:
     branches: [main]
   workflow_dispatch:
 
-# Allow only one deployment at a time
+# Allow only one production deployment at a time
 concurrency:
   group: "pages"
   cancel-in-progress: false
 
 permissions:
-  contents: read
-  pages: write
-  id-token: write
+  contents: write
 
 jobs:
   deploy:
+    runs-on: ubuntu-latest
     environment:
       name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
+      url: https://nitrocode.github.io/token-deathclock/
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Configure Pages
-        uses: actions/configure-pages@v4
-
-      - name: Upload Pages artifact
-        uses: actions/upload-pages-artifact@v3
+      - name: Deploy to GitHub Pages (gh-pages branch)
+        uses: peaceiris/actions-gh-pages@v4
         with:
-          # Serve entire repository root (index.html, styles.css, script.js, death-clock-core.js)
-          path: '.'
-
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: .
+          # Preserve any existing PR preview directories across production deploys
+          keep_files: true
+          # Exclude non-site files from the deployment
+          exclude_assets: '.github,node_modules,tests,package-lock.json,package.json'

.github/workflows/preview-cleanup.yml

@@ -0,0 +1,31 @@
+name: PR Preview Cleanup
+
+on:
+  pull_request:
+    types: [closed]
+
+permissions:
+  contents: write
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout gh-pages branch
+        uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+
+      - name: Remove PR preview directory
+        run: |
+          PR_DIR="previews/pr-${{ github.event.number }}"
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          if [ -d "$PR_DIR" ]; then
+            git rm -rf "$PR_DIR"
+            git commit -m "chore: remove preview for PR #${{ github.event.number }}"
+            git push
+            echo "Removed $PR_DIR"
+          else
+            echo "No preview directory found at $PR_DIR — nothing to clean up"
+          fi

.github/workflows/preview.yml

@@ -0,0 +1,69 @@
+name: PR Preview
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Deploy PR preview to gh-pages branch
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: .
+          destination_dir: previews/pr-${{ github.event.number }}
+          # Preserve existing previews and production files
+          keep_files: true
+          # Exclude non-site files
+          exclude_assets: '.github,node_modules,tests,package-lock.json,package.json'
+
+      - name: Post or update preview URL comment
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const prNumber = context.payload.pull_request.number;
+            const sha = context.payload.pull_request.head.sha.slice(0, 7);
+            const url = `https://nitrocode.github.io/token-deathclock/previews/pr-${prNumber}/`;
+            const body = [
+              '## 👁️ PR Preview',
+              '',
+              `🚀 **[Open Preview](${url})**`,
+              '',
+              `> Deployed from commit \`${sha}\` · Updates on every push to this PR`,
+              '> _(Preview is removed automatically when the PR is closed.)_',
+            ].join('\n');
+
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+            });
+
+            const existing = comments.find(c =>
+              c.user.type === 'Bot' && c.body.includes('## 👁️ PR Preview')
+            );
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                body,
+              });
+            }

AGENTS.md

@@ -28,8 +28,10 @@ a Chart.js growth chart with projections, and a prompt/PR quality scoring sectio
 │   └── death-clock.test.js ← 75 Jest unit tests for death-clock-core.js
 └── .github/
     └── workflows/
-        ├── deploy.yml      ← Deploys index.html etc. to GitHub Pages on push to main
-        └── test.yml        ← Runs `npm run test:ci` on every push / PR
+        ├── deploy.yml          ← Deploys site to gh-pages branch (production) on push to main
+        ├── preview.yml         ← Deploys PR preview to previews/pr-N/ and posts URL comment
+        ├── preview-cleanup.yml ← Removes preview directory when a PR is closed
+        └── test.yml            ← Runs `npm run test:ci` on every push / PR
 ```
 
 ---
@@ -95,7 +97,17 @@ Keep the array sorted in ascending `tokens` order — the constants test enforce
 Edit `styles.css`. CSS custom properties for colours live in `:root[data-theme="dark"]` and `:root[data-theme="light"]`. The theme toggle is managed by `applyTheme()` in `script.js`.
 
 ### Deployment
-Merging to `main` triggers the `deploy.yml` workflow automatically. No manual steps are required after the one-time GitHub Pages source has been set to **GitHub Actions** in repository settings.
+Merging to `main` triggers the `deploy.yml` workflow automatically. It pushes the static site to the `gh-pages` branch (root).
+
+**One-time repo setup required** (only needs to be done once by a maintainer):
+> Settings → Pages → Source → **Deploy from a branch** → Branch: `gh-pages` / `(root)` → Save.
+
+### PR Preview URLs
+Every pull request automatically gets a live preview URL:
+- Triggered by `preview.yml` on `pull_request` (opened / synchronize / reopened)
+- Deployed to: `https://nitrocode.github.io/token-deathclock/previews/pr-{number}/`
+- A bot comment is posted (and updated) on the PR with the link
+- Preview directory is removed automatically by `preview-cleanup.yml` when the PR is closed
 
 ---
 

index.html

@@ -82,6 +82,23 @@ <h2>Global Token Counter</h2>
   </div>
 </section>
 
+<!-- ── Life Blocks ────────────────────────────────────────── -->
+<section id="life-blocks-section">
+  <div class="container">
+    <p class="section-label">&#x25A0; Countdown</p>
+    <h2>Life Blocks — Days Until Extinction 💀</h2>
+    <p class="lb-desc">
+      Each block is one day. Click any block to zoom into its hours → minutes → seconds.
+      Watch them die.
+    </p>
+    <div class="lb-controls">
+      <nav id="lb-breadcrumb" class="lb-breadcrumb" aria-label="Life blocks drill-down navigation"></nav>
+      <div id="lb-info" class="lb-info"></div>
+    </div>
+    <div id="lb-container" class="lb-container" aria-live="polite"></div>
+  </div>
+</section>
+
 <!-- ── Milestones ──────────────────────────────────────────── -->
 <section id="milestones-section">
   <div class="container">