From 80ae2ecaa8034ffe74cef50df525a9c90f7f7683 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 21 Apr 2026 12:31:11 +0000
Subject: [PATCH] computing-pi: fraction-indicator dot on the H/T header

Small black dot on the H/T row at left: (H / total) * 100%. The
midpoint corresponds to H = T, so the dot crosses the middle exactly
when a run hits the stopping condition (H > T). Discarded runs end
the simulation with their dot still left of center.
---
 src/components/interactives/ComputingPi.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/interactives/ComputingPi.tsx b/src/components/interactives/ComputingPi.tsx
index e1ea674..70a5d99 100644
--- a/src/components/interactives/ComputingPi.tsx
+++ b/src/components/interactives/ComputingPi.tsx
@@ -287,10 +287,18 @@ const RunTile: React.FC<RunTileProps> = ({ index, run, clickable, onClick }) =>
         clickable ? 'cursor-pointer hover:border-primary' : 'cursor-default'
       }`}
     >
-      {/* H / T counters */}
-      <div className="flex justify-between items-center text-[10px] font-mono tabular-nums bg-black/5 dark:bg-white/5 px-2 py-0.5 text-muted-foreground">
+      {/* H / T counters with a fraction indicator dot — position = H/N,
+          midpoint = H=T, so the dot crosses the middle exactly when the run stops. */}
+      <div className="relative flex justify-between items-center text-[10px] font-mono tabular-nums bg-black/5 dark:bg-white/5 px-2 py-0.5 text-muted-foreground">
         <span>H:{run.heads}</span>
         <span>T:{run.tails}</span>
+        {run.sequence.length > 0 && (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-foreground"
+            style={{ left: `${(run.heads / run.sequence.length) * 100}%` }}
+          />
+        )}
       </div>
 
       {/* Billboard + footer */}