wpmx 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wpmx",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A minimal, fast typing test for the terminal",
   "type": "module",
   "bin": {

package/src/app.tsx

@@ -21,9 +21,8 @@ export type GameResults = {
 
 export function App() {
   const { exit } = useApp();
-  const settings = loadSettings();
   const [screen, setScreen] = useState<Screen>("menu");
-  const [duration, setDuration] = useState<Duration>(settings.lastDuration);
+  const [duration, setDuration] = useState<Duration>(() => loadSettings().lastDuration);
   const [results, setResults] = useState<GameResults | null>(null);
   const [gameKey, setGameKey] = useState(0);
 

package/src/components/Game.tsx

@@ -71,20 +71,9 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
 
   const liveWpm = useMemo(() => {
     if (!game.isRunning || game.isFinished) return 0;
-    let correct = 0;
-    for (let i = 0; i < game.currentWordIndex; i++) {
-      const word = game.words[i];
-      const input = game.charInputs[i].join("");
-      if (input === word) correct += word.length + 1;
-      else {
-        for (let j = 0; j < word.length; j++) {
-          if (input[j] === word[j]) correct++;
-        }
-      }
-    }
     const elapsed = (duration - game.timeLeft) || 1;
-    return Math.round((correct / 5) / (elapsed / 60));
-  }, [game.currentWordIndex, game.timeLeft, game.isRunning, game.isFinished]);
+    return Math.round((game.correctCharsAcc / 5) / (elapsed / 60));
+  }, [game.correctCharsAcc, game.timeLeft, game.isRunning, game.isFinished, duration]);
 
   return (
     <Box flexDirection="column" paddingX={2} paddingY={1}>

package/src/hooks/useGame.ts

@@ -8,11 +8,11 @@ export type GameState = {
   timeLeft: number;
   isRunning: boolean;
   isFinished: boolean;
-  wordResults: Array<"correct" | "incorrect" | "pending">;
 };
 
 export type GameHook = GameState & {
   charInputs: string[][];
+  correctCharsAcc: number;
   startGame: () => void;
   handleChar: (char: string) => void;
   handleBackspace: () => void;
@@ -39,15 +39,27 @@ export function useGame(duration: number) {
   const charInputsRef = useRef<string[][]>(
     Array.from({ length: wordCount }, () => [])
   );
-  const [state, setState] = useState<GameState>(() => ({
-    words: generateWords(wordCount),
-    currentWordIndex: 0,
-    currentInput: "",
-    timeLeft: duration,
-    isRunning: false,
-    isFinished: false,
-    wordResults: Array(wordCount).fill("pending"),
-  }));
+  const wordsRef = useRef<string[]>([]);
+  const currentWordIndexRef = useRef(0);
+  const isFinishedRef = useRef(false);
+  const isRunningRef = useRef(false);
+  const correctCharsAccRef = useRef(0);
+  const totalCharsAccRef = useRef(0);
+  const wordCorrectCharsRef = useRef<number[]>([]);
+  const wordTotalCharsRef = useRef<number[]>([]);
+
+  const [state, setState] = useState<GameState>(() => {
+    const generatedWords = generateWords(wordCount);
+    wordsRef.current = generatedWords;
+    return {
+      words: generatedWords,
+      currentWordIndex: 0,
+      currentInput: "",
+      timeLeft: duration,
+      isRunning: false,
+      isFinished: false,
+    };
+  });
 
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const startTimeRef = useRef<number>(0);
@@ -55,116 +67,123 @@ export function useGame(duration: number) {
   useEffect(() => {
     if (state.isRunning && !state.isFinished) {
       timerRef.current = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+        const newTimeLeft = Math.max(duration - elapsed, 0);
         setState((prev) => {
-          const newTimeLeft = prev.timeLeft - 1;
+          if (prev.timeLeft === newTimeLeft) return prev;
           if (newTimeLeft <= 0) {
             if (timerRef.current) clearInterval(timerRef.current);
+            isFinishedRef.current = true;
+            isRunningRef.current = false;
             return { ...prev, timeLeft: 0, isRunning: false, isFinished: true };
           }
           return { ...prev, timeLeft: newTimeLeft };
         });
-      }, 1000);
+      }, 200);
     }
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [state.isRunning, state.isFinished]);
+  }, [state.isRunning, state.isFinished, duration]);
 
   const startGame = useCallback(() => {
     startTimeRef.current = Date.now();
+    isRunningRef.current = true;
     setState((prev) => ({ ...prev, isRunning: true }));
   }, []);
 
   const handleChar = useCallback((char: string) => {
-    setState((prev) => {
-      if (prev.isFinished) return prev;
-      charInputsRef.current[prev.currentWordIndex].push(char);
-      if (!prev.isRunning) {
-        startTimeRef.current = Date.now();
-        return {
-          ...prev,
-          isRunning: true,
-          currentInput: prev.currentInput + char,
-        };
-      }
-      return {
-        ...prev,
-        currentInput: prev.currentInput + char,
-      };
-    });
+    if (isFinishedRef.current) return;
+    charInputsRef.current[currentWordIndexRef.current].push(char);
+    if (!isRunningRef.current) {
+      startTimeRef.current = Date.now();
+      isRunningRef.current = true;
+    }
+    setState((prev) => ({
+      ...prev,
+      isRunning: true,
+      currentInput: prev.currentInput + char,
+    }));
   }, []);
 
   const handleBackspace = useCallback(() => {
-    setState((prev) => {
-      if (prev.isFinished) return prev;
-
-      if (prev.currentInput.length === 0) {
-        if (prev.currentWordIndex === 0) return prev;
-        const prevIndex = prev.currentWordIndex - 1;
-        const prevInput = charInputsRef.current[prevIndex].join("");
-        const newWordResults = [...prev.wordResults];
-        newWordResults[prevIndex] = "pending";
-        return {
-          ...prev,
-          currentWordIndex: prevIndex,
-          currentInput: prevInput,
-          wordResults: newWordResults,
-        };
-      }
-
-      charInputsRef.current[prev.currentWordIndex].pop();
-      return {
+    if (isFinishedRef.current) return;
+
+    const currentIdx = currentWordIndexRef.current;
+    const currentChars = charInputsRef.current[currentIdx];
+
+    if (currentChars.length === 0) {
+      if (currentIdx === 0) return;
+      const prevIndex = currentIdx - 1;
+      currentWordIndexRef.current = prevIndex;
+      const lastCorrect = wordCorrectCharsRef.current.pop() || 0;
+      const lastTotal = wordTotalCharsRef.current.pop() || 0;
+      correctCharsAccRef.current -= lastCorrect;
+      totalCharsAccRef.current -= lastTotal;
+      const prevInput = charInputsRef.current[prevIndex].join("");
+      setState((prev) => ({
+        ...prev,
+        currentWordIndex: prevIndex,
+        currentInput: prevInput,
+      }));
+    } else {
+      charInputsRef.current[currentIdx].pop();
+      setState((prev) => ({
         ...prev,
         currentInput: prev.currentInput.slice(0, -1),
-      };
-    });
+      }));
+    }
   }, []);
 
   const handleSpace = useCallback(() => {
-    setState((prev) => {
-      if (prev.isFinished || !prev.isRunning) return prev;
-      const word = prev.words[prev.currentWordIndex];
-      const isCorrect = prev.currentInput === word;
-      const newWordResults = [...prev.wordResults];
-      newWordResults[prev.currentWordIndex] = isCorrect
-        ? "correct"
-        : "incorrect";
-      return {
-        ...prev,
-        currentWordIndex: prev.currentWordIndex + 1,
-        currentInput: "",
-        wordResults: newWordResults,
-      };
-    });
-  }, []);
-
-  const getResults = useCallback((): GameResults => {
-    let correctChars = 0;
-    let totalChars = 0;
-
-    for (let i = 0; i < state.currentWordIndex; i++) {
-      const word = state.words[i];
-      const input = charInputsRef.current[i].join("");
-      totalChars += Math.max(word.length, input.length) + 1;
-      if (input === word) {
-        correctChars += word.length + 1;
-      } else {
-        for (let j = 0; j < word.length; j++) {
-          if (input[j] === word[j]) correctChars++;
-        }
+    if (isFinishedRef.current || !isRunningRef.current) return;
+
+    const currentIdx = currentWordIndexRef.current;
+    const word = wordsRef.current[currentIdx];
+    const inputChars = charInputsRef.current[currentIdx];
+    const input = inputChars.join("");
+
+    let correct = 0;
+    if (input === word) {
+      correct = word.length + 1;
+    } else {
+      for (let j = 0; j < word.length; j++) {
+        if (inputChars[j] === word[j]) correct++;
       }
     }
+    const total = Math.max(word.length, input.length) + 1;
+
+    wordCorrectCharsRef.current.push(correct);
+    wordTotalCharsRef.current.push(total);
+    correctCharsAccRef.current += correct;
+    totalCharsAccRef.current += total;
+    currentWordIndexRef.current = currentIdx + 1;
+
+    setState((prev) => ({
+      ...prev,
+      currentWordIndex: currentIdx + 1,
+      currentInput: "",
+    }));
+  }, []);
 
-    const timeElapsed = duration;
-    const wpm = totalChars > 0 ? Math.round((correctChars / 5) / (timeElapsed / 60)) : 0;
-    const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 1000) / 10 : 0;
-
+  const getResults = useCallback((): GameResults => {
+    const correctChars = correctCharsAccRef.current;
+    const totalChars = totalCharsAccRef.current;
+    const wpm =
+      totalChars > 0
+        ? Math.round((correctChars / 5) / (duration / 60))
+        : 0;
+    const accuracy =
+      totalChars > 0
+        ? Math.round((correctChars / totalChars) * 1000) / 10
+        : 0;
     return { wpm, accuracy, time: duration };
-  }, [state.currentWordIndex, state.words, duration]);
+  }, [duration]);
 
   return {
     ...state,
     charInputs: charInputsRef.current,
+    correctCharsAcc: correctCharsAccRef.current,
     startGame,
     handleChar,
     handleBackspace,

package/video/src/CLAUDE.md

@@ -1,7 +0,0 @@
-<claude-mem-context>
-# Recent Activity
-
-<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
-
-*No recent activity*
-</claude-mem-context>

package/video/src/WpmxDemo.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import { TransitionSeries, linearTiming } from "@remotion/transitions";
-import { fade } from "@remotion/transitions/fade";
-import { InstallScene } from "./scenes/InstallScene";
-import { MenuScene } from "./scenes/MenuScene";
-import { GameScene } from "./scenes/GameScene";
-import { ResultsScene } from "./scenes/ResultsScene";
-
-const FADE_DURATION = 10;
-
-export const WpmxDemo: React.FC = () => {
-  return (
-    <TransitionSeries>
-      <TransitionSeries.Sequence durationInFrames={90}>
-        <InstallScene />
-      </TransitionSeries.Sequence>
-
-      <TransitionSeries.Transition
-        presentation={fade()}
-        timing={linearTiming({ durationInFrames: FADE_DURATION })}
-      />
-
-      <TransitionSeries.Sequence durationInFrames={60}>
-        <MenuScene />
-      </TransitionSeries.Sequence>
-
-      <TransitionSeries.Transition
-        presentation={fade()}
-        timing={linearTiming({ durationInFrames: FADE_DURATION })}
-      />
-
-      <TransitionSeries.Sequence durationInFrames={300}>
-        <GameScene />
-      </TransitionSeries.Sequence>
-
-      <TransitionSeries.Transition
-        presentation={fade()}
-        timing={linearTiming({ durationInFrames: FADE_DURATION })}
-      />
-
-      <TransitionSeries.Sequence durationInFrames={90}>
-        <ResultsScene />
-      </TransitionSeries.Sequence>
-    </TransitionSeries>
-  );
-};

package/video/src/components/CLAUDE.md

@@ -1,7 +0,0 @@
-<claude-mem-context>
-# Recent Activity
-
-<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
-
-*No recent activity*
-</claude-mem-context>

package/video/src/scenes/CLAUDE.md

@@ -1,22 +0,0 @@
-<claude-mem-context>
-# Recent Activity
-
-<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
-
-### Feb 20, 2026
-
-| ID | Time | T | Title | Read |
-|----|------|---|-------|------|
-| #1722 | 6:31 PM | 🟣 | MenuScene created with frame-driven duration selector animation | ~423 |
-| #1723 | " | 🟣 | ResultsScene created with spring-animated WPM counter and cascading fade-in effects | ~496 |
-| #1724 | " | 🟣 | GameScene created with character-level color feedback and live WPM calculation | ~569 |
-| #1720 | 6:30 PM | 🟣 | MenuScene created with frame-driven duration selection animation | ~440 |
-| #1721 | " | 🟣 | ResultsScene created with spring-animated WPM counter and staggered fade-ins | ~508 |
-| #1719 | " | 🟣 | MenuScene created with frame-driven duration selector animation | ~525 |
-| #1718 | 6:29 PM | 🟣 | GameScene implements sophisticated typing simulation with real-time feedback | ~580 |
-| #1717 | " | 🟣 | Results scene implemented with animated score and staggered fade-ins | ~476 |
-| #1716 | " | 🟣 | Install scene implements typewriter command entry animation | ~455 |
-| #1715 | " | 🟣 | InstallScene created with typewriter effect for terminal command entry | ~446 |
-| #1714 | 6:28 PM | 🟣 | MenuScene component displays duration selector with animated selection change | ~497 |
-| #1713 | " | 🟣 | InstallScene component implements typewriter command prompt animation | ~494 |
-</claude-mem-context>

package/video/src/scenes/GameScene.tsx

@@ -1,193 +0,0 @@
-import React from "react";
-import { useCurrentFrame, useVideoConfig } from "remotion";
-import { Terminal } from "../components/Terminal";
-import { monoFont } from "../Root";
-import { GAME_WORDS, TYPING_EVENTS } from "../data/typing-script";
-
-interface WordState {
-  typed: string[];
-  submitted: boolean;
-}
-
-interface FrameState {
-  words: WordState[];
-  currentWordIndex: number;
-}
-
-function computeStateAtFrame(frame: number): FrameState {
-  const words: WordState[] = GAME_WORDS.map(() => ({
-    typed: [],
-    submitted: false,
-  }));
-
-  let currentWordIndex = 0;
-
-  for (const event of TYPING_EVENTS) {
-    if (event.frame > frame) break;
-
-    if (event.type === "char" && event.char !== undefined) {
-      words[currentWordIndex].typed.push(event.char);
-    } else if (event.type === "space") {
-      words[currentWordIndex].submitted = true;
-      currentWordIndex = Math.min(currentWordIndex + 1, GAME_WORDS.length - 1);
-    } else if (event.type === "backspace") {
-      if (words[currentWordIndex].typed.length > 0) {
-        words[currentWordIndex].typed.pop();
-      }
-    }
-  }
-
-  return { words, currentWordIndex };
-}
-
-export const GameScene: React.FC = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const timeLeft = Math.max(0, Math.ceil(15 - frame / fps));
-
-  const { words, currentWordIndex } = computeStateAtFrame(frame);
-
-  // Live WPM calculation
-  const elapsed = frame / fps;
-  let correctChars = 0;
-  for (let wi = 0; wi < currentWordIndex; wi++) {
-    const target = GAME_WORDS[wi];
-    const typedStr = words[wi].typed.join("");
-    if (typedStr === target) {
-      correctChars += target.length + 1; // +1 for space
-    } else {
-      for (let ci = 0; ci < target.length; ci++) {
-        if (ci < words[wi].typed.length && words[wi].typed[ci] === target[ci]) {
-          correctChars++;
-        }
-      }
-    }
-  }
-  const wpm = elapsed > 0 ? Math.round((correctChars / 5) / (elapsed / 60)) : 0;
-
-  return (
-    <Terminal title="wpmx">
-      <div
-        style={{
-          fontFamily: monoFont,
-          color: "#cdd6f4",
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-        }}
-      >
-        {/* Top bar */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            marginBottom: 24,
-            fontSize: 20,
-            fontWeight: 700,
-            color: "#f9e2af",
-          }}
-        >
-          <span>{timeLeft}s</span>
-          <span>{wpm} wpm</span>
-        </div>
-
-        {/* Word display */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: "wrap",
-            gap: 8,
-            fontSize: 22,
-            lineHeight: 1.8,
-          }}
-        >
-          {GAME_WORDS.map((word, wi) => {
-            const wordState = words[wi];
-            const typed = wordState.typed;
-
-            const isFuture = wi > currentWordIndex;
-            const isCurrent = wi === currentWordIndex;
-            const isPast = wi < currentWordIndex;
-
-            const chars: React.ReactNode[] = [];
-
-            // Render each target character
-            for (let ci = 0; ci < word.length; ci++) {
-              let color: string;
-              let fontWeight: number | undefined;
-              let textDecoration: string | undefined;
-
-              if (isFuture) {
-                color = "#6c7086";
-              } else if (isCurrent) {
-                if (ci < typed.length) {
-                  if (typed[ci] === word[ci]) {
-                    color = "#a6e3a1";
-                  } else {
-                    color = "#f38ba8";
-                  }
-                } else if (ci === typed.length) {
-                  color = "#cdd6f4";
-                  fontWeight = 700;
-                  textDecoration = "underline";
-                } else {
-                  color = "#6c7086";
-                }
-              } else {
-                // isPast
-                if (ci < typed.length) {
-                  if (typed[ci] === word[ci]) {
-                    color = "#a6e3a1";
-                  } else {
-                    color = "#f38ba8";
-                  }
-                } else {
-                  color = "#6c7086";
-                }
-              }
-
-              chars.push(
-                <span
-                  key={`${wi}-${ci}`}
-                  style={{
-                    color,
-                    fontWeight,
-                    textDecoration,
-                  }}
-                >
-                  {word[ci]}
-                </span>
-              );
-            }
-
-            // Render extra characters beyond word length
-            if ((isCurrent || isPast) && typed.length > word.length) {
-              for (let ei = word.length; ei < typed.length; ei++) {
-                chars.push(
-                  <span
-                    key={`${wi}-extra-${ei}`}
-                    style={{
-                      color: "#f38ba8",
-                      textDecoration: isPast ? "line-through" : undefined,
-                    }}
-                  >
-                    {typed[ei]}
-                  </span>
-                );
-              }
-            }
-
-            return (
-              <span key={wi}>
-                {chars}
-              </span>
-            );
-          })}
-        </div>
-      </div>
-    </Terminal>
-  );
-};

package/video/src/scenes/InstallScene.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import { useCurrentFrame } from "remotion";
-import { Terminal } from "../components/Terminal";
-import { Cursor } from "../components/Cursor";
-import { monoFont } from "../Root";
-
-const COMMAND = "npx wpmx";
-const TYPING_START_FRAME = 10;
-const FRAMES_PER_CHAR = 4;
-
-export const InstallScene: React.FC = () => {
-  const frame = useCurrentFrame();
-
-  const charsTyped = Math.min(
-    Math.max(0, Math.floor((frame - TYPING_START_FRAME) / FRAMES_PER_CHAR)),
-    COMMAND.length
-  );
-
-  const typingComplete = charsTyped >= COMMAND.length;
-  const typedText = COMMAND.slice(0, charsTyped);
-
-  return (
-    <Terminal title="Terminal">
-      <div
-        style={{
-          fontFamily: monoFont,
-          fontSize: 22,
-          color: "#cdd6f4",
-          lineHeight: 1.6,
-        }}
-      >
-        <span style={{ color: "#a6e3a1" }}>$ </span>
-        <span>{typedText}</span>
-        {!typingComplete && <Cursor />}
-        {typingComplete && (
-          <div
-            style={{
-              color: "#6c7086",
-              marginTop: 8,
-            }}
-          >
-            Loading wpmx...
-          </div>
-        )}
-      </div>
-    </Terminal>
-  );
-};

package/video/src/scenes/MenuScene.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-import { useCurrentFrame } from "remotion";
-import { Terminal } from "../components/Terminal";
-import { monoFont } from "../Root";
-
-const DURATIONS = ["15s", "30s", "60s"];
-
-export const MenuScene: React.FC = () => {
-  const frame = useCurrentFrame();
-
-  // Before frame 25: index 1 ("30s") is selected; at/after frame 25: index 0 ("15s")
-  const selectedIndex = frame < 25 ? 1 : 0;
-
-  return (
-    <Terminal title="wpmx">
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          flex: 1,
-          gap: 24,
-        }}
-      >
-        {/* Title */}
-        <div
-          style={{
-            fontFamily: monoFont,
-            fontWeight: 700,
-            fontSize: 36,
-            color: "#f9e2af",
-          }}
-        >
-          wpmx
-        </div>
-
-        {/* Duration selector */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            gap: 24,
-            fontSize: 20,
-            fontFamily: monoFont,
-          }}
-        >
-          {DURATIONS.map((label, i) => {
-            const isSelected = i === selectedIndex;
-            return (
-              <span
-                key={label}
-                style={{
-                  color: isSelected ? "#cdd6f4" : "#6c7086",
-                  fontWeight: isSelected ? 700 : 400,
-                  textDecoration: isSelected ? "underline" : "none",
-                }}
-              >
-                {label}
-              </span>
-            );
-          })}
-        </div>
-
-        {/* Hint text */}
-        <div
-          style={{
-            fontFamily: monoFont,
-            fontSize: 14,
-            color: "#6c7086",
-          }}
-        >
-          h / l or ← / → to choose, Enter to start
-        </div>
-      </div>
-    </Terminal>
-  );
-};

package/video/src/scenes/ResultsScene.tsx

@@ -1,112 +0,0 @@
-import React from "react";
-import {
-  useCurrentFrame,
-  useVideoConfig,
-  spring,
-  interpolate,
-} from "remotion";
-import { Terminal } from "../components/Terminal";
-import { monoFont } from "../Root";
-
-export const ResultsScene: React.FC = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const springValue = spring({ frame, fps, config: { damping: 200 } });
-  const wpm = Math.round(interpolate(springValue, [0, 1], [0, 87]));
-
-  const personalBestOpacity = interpolate(frame, [15, 30], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
-  const statsOpacity = interpolate(frame, [25, 40], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
-  return (
-    <Terminal title="wpmx">
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          flex: 1,
-          gap: 12,
-          fontFamily: monoFont,
-        }}
-      >
-        {/* Title */}
-        <div
-          style={{
-            fontSize: 28,
-            fontWeight: 700,
-            color: "#f9e2af",
-            marginBottom: 16,
-          }}
-        >
-          wpmx
-        </div>
-
-        {/* WPM number */}
-        <div
-          style={{
-            fontSize: 48,
-            fontWeight: 700,
-            color: "#cdd6f4",
-          }}
-        >
-          {wpm}
-        </div>
-
-        {/* New personal best */}
-        <div
-          style={{
-            fontSize: 18,
-            fontWeight: 700,
-            color: "#a6e3a1",
-            opacity: personalBestOpacity,
-          }}
-        >
-          new personal best!
-        </div>
-
-        {/* Accuracy */}
-        <div
-          style={{
-            fontSize: 20,
-            color: "#cdd6f4",
-            opacity: statsOpacity,
-          }}
-        >
-          96.2% accuracy
-        </div>
-
-        {/* Duration */}
-        <div
-          style={{
-            fontSize: 16,
-            color: "#6c7086",
-            opacity: statsOpacity,
-          }}
-        >
-          15s
-        </div>
-
-        {/* Hints */}
-        <div
-          style={{
-            fontSize: 14,
-            color: "#6c7086",
-            marginTop: 24,
-            opacity: statsOpacity,
-          }}
-        >
-          {`Tab → restart   Esc → menu   q → quit`}
-        </div>
-      </div>
-    </Terminal>
-  );
-};