computing-pi: Propp footnote, in-progress counter, per-tile clicks, note

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

@@ -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,13 +166,22 @@ 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 ? (
+            <>
+              <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))' }}
@@ -181,35 +191,59 @@ const ComputingPi: React.FC = () => {
                     key={idx}
                     index={idx}
                     run={run}
-                  clickable={allStopped}
+                    clickable={run.stopped}
-                  onClick={() => allStopped && setSelectedIdx(idx)}
+                    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
+                {discardedCount} run{discardedCount === 1 ? '' : 's'} discarded after hitting the {MAX_TOSSES_PER_RUN}-toss cap.
               </span>
-                  )
-                </>
-              )}
-              . Click any tile to see its full toss sequence.
             </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) => {

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,
+        "done": true,
-        "refId": "T5"
+        "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,
+        "done": true,
-        "refId": "T6"
+        "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,
+        "done": true,
-        "refId": "T7"
+        "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,
+        "done": true,
-        "refId": "T8"
+        "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"
       }
     ]
   }