feat(course): audit fixes and twelve extensions (Modules 7b, 12, 13)

Audit pass:
- Frame rule counts frames since the last move, so every step lasts
  exactly movesEvery(score) frames, also right after a speed-up
- clampTime + MAX_GAP_MS: a hidden tab no longer replays the whole gap
- Pong Restart keeps held keys
- Fact corrections (mulberry32 output coverage, Haskell IO, uniform)
- New fixture cases from a mutation analysis

Extensions (all three tracks, shared fixtures, course text):
- Turn queue (Exercise 10.6), persisted high score (10.7),
  replay viewer (10.8), play() end-to-end helper (9.5)
- Optional State (4.7) and optional Module 7b, stack-safe IO
- Module 12, property-based testing with generators, shrinking,
  invariants and a model-based oracle
- Module 13, Conway's Life with a Click event
- JS type checking via jsconfig, JSDoc and types.d.ts
- Maintainer tools: scripts/mutate.mjs, scripts/typecheck-js.sh,
  Playwright end-to-end suite (e2e/, scripts/e2e.sh)

Docs: docs/contract.md is the canonical contract; specs and build log
under docs/superpowers.

Verified: JS 728, Scala 689, F# 691 unit tests; stubs and progression
M01-M13 and M07b; 176 end-to-end tests on Chromium and WebKit.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>

js/solutions/pong/app.js

@@ -3,7 +3,9 @@ import { initialPong, PongAction } from './model.js'
 import { pongUpdate } from './rules.js'
 import { pongView } from './view.js'
 import { map as mapIO, randomSeed, drawScene } from '../io.js'
-import { keyDowns, keyUps, interval, map, filterMap, merge, scan, startWith } from '../stream.js'
+import { keyDowns, keyUps, interval, map, filterMap, merge, scan, startWith, clampTime } from '../stream.js'
+import { MAX_GAP_MS } from '../app.js'
+/** @import { PongState, Stream, Program } from '../types' */
 
 export const FRAME_MS_PONG = 30
 
@@ -13,19 +15,23 @@ const keys = {
 }
 
 // hasOwn, not `key in keys`: "constructor" and "toString" are inherited, not keys we mapped.
+/** @type {(isDown: boolean, key: string) => PongAction | null} */
 export const pongKey = (isDown, key) =>
   Object.hasOwn(keys, key) ? (isDown ? PongAction.Press : PongAction.Release)(keys[key])
     : (key === 'r' || key === 'R') && isDown ? PongAction.Restart
     : null
 
+/** @type {Stream<PongAction>} */
 export const pongActions = merge(
   map(interval(FRAME_MS_PONG), () => PongAction.Frame),
   merge(
     filterMap(keyDowns, (key) => pongKey(true, key)),
     filterMap(keyUps, (key) => pongKey(false, key))))
 
+/** @type {(seed: number, actions: Stream<PongAction>) => Stream<PongState>} */
 export const pongStates = (seed, actions) =>
   startWith(scan(actions, pongUpdate, initialPong(seed)), initialPong(seed))
 
+/** @type {Program} */
 export const pongMain = mapIO(randomSeed, (seed) =>
-  map(pongStates(seed, pongActions), (state) => drawScene(pongView(state))))
+  clampTime(map(pongStates(seed, pongActions), (state) => drawScene(pongView(state))), MAX_GAP_MS))

js/solutions/pong/main.js

@@ -2,4 +2,4 @@ import { runApp } from '../runtime.js'
 import { browserPlatform } from '../browser.js'
 import { pongMain } from './app.js'
 
-runApp(pongMain, browserPlatform(document.getElementById('game'), window))
+runApp(pongMain, browserPlatform(/** @type {HTMLCanvasElement} */ (document.getElementById('game')), window))

js/solutions/pong/model.js

@@ -3,6 +3,7 @@
 /** @typedef {{ball: {x: number, y: number}, vel: {dx: number, dy: number}, player: number, cpu: number,
  *   held: {up: boolean, down: boolean}, score: {player: number, cpu: number},
  *   status: 'Playing'|'Over', seed: number, frame: number}} PongState */
+/** @typedef {{tag: 'Press', key: 'Up'|'Down'} | {tag: 'Release', key: 'Up'|'Down'} | {tag: 'Frame'} | {tag: 'Restart'}} PongAction */
 
 // The court, in cells. `player` and `cpu` are the y of the top cell of each paddle.
 export const W = 80
@@ -17,6 +18,7 @@ export const CPU_X = 77
 /** Points needed to win the match. */
 export const WIN = 5
 
+/** @type {(seed: number) => PongState} */
 export const initialPong = (seed) => ({
   ball: { x: 40, y: 25 },
   vel: { dx: 1, dy: 1 },
@@ -29,7 +31,8 @@ export const initialPong = (seed) => ({
   frame: 0,
 })
 
-/** Everything that can happen in a match, as data. */
+/** Everything that can happen in a match, as data.
+ * @type {{Press: (key: 'Up'|'Down') => PongAction, Release: (key: 'Up'|'Down') => PongAction, Frame: PongAction, Restart: PongAction}} */
 export const PongAction = {
   Press: (key) => ({ tag: 'Press', key }),
   Release: (key) => ({ tag: 'Release', key }),

js/solutions/pong/rules.js

@@ -1,7 +1,9 @@
 // m11 pong rules: one pure `pongUpdate`, built from small steps that each return a new piece of state.
 import { H, W, PADDLE, PLAYER_X, CPU_X, WIN, initialPong } from './model.js'
 import { nextUint32 } from '../random.js'
+/** @import { PongState, PongAction } from '../types' */
 
+/** @type {(lo: number, hi: number, x: number) => number} */
 export const clamp = (lo, hi, x) => Math.min(hi, Math.max(lo, x))
 
 const clampPaddle = (y) => clamp(0, H - PADDLE, y)
@@ -62,11 +64,13 @@ const heldFlag = { Up: 'up', Down: 'down' }
 const setHeld = (state, key, value) =>
   Object.hasOwn(heldFlag, key) ? { ...state, held: { ...state.held, [heldFlag[key]]: value } } : state
 
+/** @type {(state: PongState, action: PongAction) => PongState} */
 export const pongUpdate = (state, action) => {
   switch (action.tag) {
     case 'Press': return setHeld(state, action.key, true)
     case 'Release': return setHeld(state, action.key, false)
-    case 'Restart': return initialPong(state.seed)
+    // A new match, but the keys are still where the player's fingers are.
+    case 'Restart': return { ...initialPong(state.seed), held: state.held }
     case 'Frame': return frame(state)
     default: return state
   }

js/solutions/pong/view.js

@@ -1,7 +1,10 @@
 // m11 pong view: the same Scene shapes as the snake view, so the same drawScene and runtime draw it.
 import { PCELL, PADDLE, PLAYER_X, CPU_X } from './model.js'
+/** @import { PongState, Scene, Shape } from '../types' */
 
+/** @type {(x: number, y: number, w: number, h: number, color: string) => Shape} */
 const rect = (x, y, w, h, color) => ({ tag: 'Rect', x, y, w, h, color })
+/** @type {(x: number, y: number, str: string, size: number) => Shape} */
 const text = (x, y, str, size) => ({ tag: 'Text', x, y, text: str, color: '#ffffff', size, align: 'center' })
 
 const paddle = (column, y) => rect(column * PCELL, y * PCELL, PCELL, PADDLE * PCELL, '#ffffff')
@@ -14,6 +17,7 @@ const overlay = (state) =>
     ]
     : []
 
+/** @type {(state: PongState) => Scene} */
 export const pongView = (state) => [
   rect(0, 0, 640, 400, '#111111'),
   paddle(PLAYER_X, state.player),