From 2863ec16b418bcd60540982cac7746995a2cee54 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 21 Apr 2026 12:49:32 +0000
Subject: [PATCH] computing-pi: Propp footnote, in-progress counter, per-tile
 clicks, note
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

T5: Added a centered <footer> below the Card crediting Jim Propp's
paper, the LinkedIn post, and Arghya Dutta — markdown links rendered
as anchor tags with target=_blank rel=noopener noreferrer.

T6: Reset button shows a mono ({stoppedCount}/{n}) suffix while any
run is still active; the suffix disappears once all runs stop.

T7: Tile clickability is now per-run (run.stopped) instead of gated
on allStopped. Since stopped runs are immutable, the detail Dialog
stays accurate while unrelated tiles keep ticking.

T8: Added a small instruction note between the header and the tile
grid: 'Click on any of the completed runs to view the full sequence.'
The old 'All runs complete' banner is reduced to the discarded-runs
callout only.
---
 src/components/interactives/ComputingPi.tsx | 88 ++++++++++++++-------
 src/data/admin-data.json                    | 24 ++++--
 2 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/src/components/interactives/ComputingPi.tsx b/src/components/interactives/ComputingPi.tsx
index d975e9f..f8a62af 100644
--- a/src/components/interactives/ComputingPi.tsx
+++ b/src/components/interactives/ComputingPi.tsx
@@ -79,6 +79,7 @@ const ComputingPi: React.FC = () => {
 
   const started = runs.length > 0;
   const allStopped = started && runs.every((r) => r.stopped);
+  const stoppedCount = runs.filter((r) => r.stopped).length;
   const discardedCount = runs.filter((r) => r.discarded).length;
 
   const avgTimes4 = useMemo(() => {
@@ -165,51 +166,84 @@ const ComputingPi: React.FC = () => {
                 <Button size="lg" variant="outline" onClick={handleReset}>
                   <RotateCcw className="w-4 h-4 mr-2" />
                   Reset
+                  {!allStopped && (
+                    <span className="ml-2 font-mono text-xs tabular-nums text-muted-foreground">
+                      ({stoppedCount}/{runs.length})
+                    </span>
+                  )}
                 </Button>
               )}
             </div>
           </div>
 
-          {/* Grid of runs */}
+          {/* Instruction + grid of runs */}
           {started ? (
-            <div
-              className="grid gap-2"
-              style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))' }}
-            >
-              {runs.map((run, idx) => (
-                <RunTile
-                  key={idx}
-                  index={idx}
-                  run={run}
-                  clickable={allStopped}
-                  onClick={() => allStopped && setSelectedIdx(idx)}
-                />
-              ))}
-            </div>
+            <>
+              <p className="text-xs text-center text-muted-foreground">
+                Click on any of the completed runs to view the full sequence.
+              </p>
+              <div
+                className="grid gap-2"
+                style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))' }}
+              >
+                {runs.map((run, idx) => (
+                  <RunTile
+                    key={idx}
+                    index={idx}
+                    run={run}
+                    clickable={run.stopped}
+                    onClick={() => run.stopped && setSelectedIdx(idx)}
+                  />
+                ))}
+              </div>
+            </>
           ) : (
             <div className="text-center text-muted-foreground py-10">
               Pick a number of runs and press <span className="font-medium">Start</span>.
             </div>
           )}
 
-          {allStopped && (
+          {allStopped && discardedCount > 0 && (
             <p className="text-sm text-center text-muted-foreground">
-              All {runs.length} runs complete
-              {discardedCount > 0 && (
-                <>
-                  {' '}(
-                  <span className="text-destructive">
-                    {discardedCount} discarded after hitting the {MAX_TOSSES_PER_RUN}-toss cap
-                  </span>
-                  )
-                </>
-              )}
-              . Click any tile to see its full toss sequence.
+              <span className="text-destructive">
+                {discardedCount} run{discardedCount === 1 ? '' : 's'} discarded after hitting the {MAX_TOSSES_PER_RUN}-toss cap.
+              </span>
             </p>
           )}
         </CardContent>
       </Card>
 
+      <footer className="mt-6 text-center text-xs text-muted-foreground">
+        This method is due to Jim Propp (see{' '}
+        <a
+          href="https://arxiv.org/abs/2602.14487"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline underline-offset-2 hover:text-foreground"
+        >
+          this paper
+        </a>
+        ). I found out about it from a{' '}
+        <a
+          href="https://www.linkedin.com/feed/update/urn:li:activity:7429512673958043648/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline underline-offset-2 hover:text-foreground"
+        >
+          LinkedIn post
+        </a>{' '}
+        by{' '}
+        <a
+          href="https://arghyadutta.github.io/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline underline-offset-2 hover:text-foreground"
+        >
+          Arghya Dutta
+        </a>
+        .
+      </footer>
+
       <Dialog
         open={selectedIdx !== null}
         onOpenChange={(open) => {
diff --git a/src/data/admin-data.json b/src/data/admin-data.json
index 6133abd..1f33edd 100644
--- a/src/data/admin-data.json
+++ b/src/data/admin-data.json
@@ -416,26 +416,34 @@
       {
         "id": "0e5f38ac-efb5-434a-a6fd-9eb7878da97e",
         "text": "add a source: say \"This method is due to Jim Propp (see [this paper](https://arxiv.org/abs/2602.14487)). I found out about it from a [LinkedIn post](https://www.linkedin.com/feed/update/urn:li:activity:7429512673958043648/) by [Arghya Dutta](https://arghyadutta.github.io/).\" Add this as a footnote at the bottom of the page, centered (and render the markdown in this comment as proper HTML, of course).",
-        "done": false,
-        "refId": "T5"
+        "done": true,
+        "refId": "T5",
+        "remark": "Added a <footer> after the Card (outside so it reads as a page-level footnote). Centered text-xs text-muted-foreground; the three markdown links render as <a> with underline underline-offset-2, target=_blank rel=noopener noreferrer.",
+        "doneDate": "2026-04-21"
       },
       {
         "id": "ab08ba8b-c9ba-4de1-bcc2-392e102b865b",
         "text": "while simulations are running, just after \"Reset\", add (x/y) where x = number of completed simulations and y = n",
-        "done": false,
-        "refId": "T6"
+        "done": true,
+        "refId": "T6",
+        "remark": "Reset button now renders a mono ({stoppedCount}/{n}) suffix while any run is still active. Suffix hides once allStopped so the completed-state button stays clean.",
+        "doneDate": "2026-04-21"
       },
       {
         "id": "b8bc7e4e-4ad6-428a-9620-7b3a7a354420",
         "text": "for completed billboards, it should be possible for the user to click on them and view the full sequence in a modal, even while other sims are running",
-        "done": false,
-        "refId": "T7"
+        "done": true,
+        "refId": "T7",
+        "remark": "Per-tile clickable is now driven by run.stopped instead of allStopped. Stopped runs are immutable so the Dialog stays accurate while other tiles keep ticking.",
+        "doneDate": "2026-04-21"
       },
       {
         "id": "e3faf449-8698-437a-a690-48a677c687f6",
         "text": "add a note just below the grey header box and above the row of tiny billboards saying: \"Click on any of the completed runs to view the full sequence.\"",
-        "done": false,
-        "refId": "T8"
+        "done": true,
+        "refId": "T8",
+        "remark": "Small text-xs text-muted-foreground note sits between the header Card block and the tile grid whenever runs exist. The old 'All runs complete' banner is now only shown when discarded runs need flagging, since the top note already covers the 'click to view' point.",
+        "doneDate": "2026-04-21"
       }
     ]
   }