Implement the following plan:

Plan: Markov Babbler Interactive Walkthrough

Context

The current Markov Babbler (apps/web/components/mdx/markov-babbler.tsx) lets users train a bigram model and generate text, but doesn't explain how the model works. This enhancement adds a visual, step-by-step walkthrough between clicking "Train" and entering generation mode — showing scanning word pairs, counting followers, building the probability table, and demonstrating how generation samples from it.

Phase Model

After clicking "Train", the user enters a walkthrough with these phases:

select → scanning → counting → table → probabilities → generation

Each phase has play/pause controls. Users can auto-play or step manually. A persistent control bar provides Back / Continue / Skip to Generation.

File Structure (3 files)

Extract shared logic first, then the walkthrough is a single component with internal phase routing.

Phase Designs

Phase 1: Scanning Pairs

• Display training text as inline <span> elements
• Highlight current word (amber) and next word (contrasting blue) as a pair
• Below the text, show current pair annotation: "the" → "cat"
• Auto-play steps through pairs at adjustable speed (400ms / 800ms / 1600ms)
• Limit to first 50 word pairs — note "Showing first 50 of N pairs"
• Manual step with play/pause toggle

Phase 2: Counting Followers

• Pick 2-3 words with the most diverse follower sets
• Left panel: source text with all occurrences of focus word highlighted
• Right panel: followers revealed one at a time with stagger animation (slide in, 300ms each)
• Each entry: cat: 3 with inline proportional bar
• Summary after reveal: "the" appears N times, followed by M different words
• "Show another word" cycles through focus words, or auto-advances

Phase 3: Table View

• Compact table showing bigram counts for the 15 most diverse words (default)
• "Show all N words" button expands to full model
• Rows animate in with 50ms stagger delay
• Follower entries as small pills/badges with counts

Phase 4: Normalizing to Probabilities

• Same table, but counts morph to percentages via CSS transition
• Pill widths transition from count-proportional to probability-proportional
• Labels cross-fade: "3" → "50.0%"
• Triggered with 1s delay on entering phase, or immediately on manual advance

Phase 5: Generation Demo (brief)

• Show a starting word with its probability distribution (reuse ProbabilityBars)
• Visualize sampling: a sweep/pointer across the cumulative distribution landing on a word
• Repeat for 2-3 steps to show the chain effect
• "Start Generating" transitions to full generation mode

Controls

Persistent control bar at bottom of walkthrough:

[▶/⏸ Play/Pause] [← Back] [Phase 2 of 5: Counting] [Continue →] [Skip to Generation ≫]

Speed control (visible during auto-play phases):

Speed: [Slow] [Normal] [Fast]

Three toggle buttons mapping to 1600ms / 800ms / 400ms intervals.

Integration with Existing Flow

Modified handleTrain:

1. Compute bigramCounts (un-normalized) and words[] for walkthrough
2. Set phase = "scanning" (enter walkthrough)
3. When walkthrough completes or user clicks "Skip":
   • Build normalized model (existing buildBigramModel)
   • Pick random starting word
   • Set phase = "generation" — existing generation UI renders unchanged

Existing generation UI renders when phase === "generation" (replaces the current isTrained check). All generation code stays the same.

Animation Strategy (No Libraries)

• CSS transitions on Tailwind classes for highlights, opacity, transforms
• setTimeout in useEffect for auto-advance, cleaned up on phase change
• Stagger delays via inline style={{ transitionDelay: \${i * 50}ms` }}`
• GPU-friendly: only animate opacity, transform, width (composited properties)

Performance

• Scanning limited to first 50 word pairs
• Table defaults to 15 rows (expandable to full model)
• bigramCounts, words[], sorted follower lists computed once via useMemo
• No DOM thrashing — all CSS transitions

E2E Test Updates

testing/e2e/tests/markov-babbler.spec.ts:

• Add data-testid="skip-walkthrough" button to the walkthrough controls
• Update existing tests to click "Skip" after "Train" so current test semantics are preserved
• Add new tests for walkthrough phases: scanning highlights visible, counting reveals followers, table renders, skip button works

Files to Modify/Create

Verification

1. Select "Nursery Rhymes", click Train → walkthrough starts with scanning phase
2. Play/pause works, speed control changes animation timing
3. Step through all phases manually with Back/Continue
4. "Skip to Generation" from any phase drops into existing generation UI
5. Generation still works exactly as before (temperature, next word, start over)
6. Mobile: all phases render stacked, controls wrap properly
7. bun run tsc — type check passes
8. bun run lint — lint passes
9. CI=true bunx playwright test --project=markov-babbler — existing + new tests pass

If you need specific details from before exiting plan mode (like exact code snippets, error messages, or content you generated), read the full transcript at: ~/.claude/projects/-Users-challen-www-usingandunderstanding-ai/f200b03e-94c1-4f55-86f4-44e4c1bd665c.jsonl

Your task

First, run git status, git diff, and git log --oneline -10 to understand the current state.

Then add and commit all modified files with a descriptive message. Break the changes into multiple commits if appropriate. If there are untracked files, ask if they should be added or added to the appropriate .gitignore file. The user may also want to take over at this point, so provide an abort option as well. Always check changes for unnecessary debugging statements or logging that might have been accidentally included. Prompt the user if you find any, and offer to remove each one by one. Do not use interactive git staging (git add -p) as it does not work.