Polish browser runner experience

[leonshimizu]

What changed

• distinguish runtime loading, code execution, terminal input, completion, failure, and timeout states with clear student-facing language
• retain successful workers so Ruby, JavaScript, and Python repeat runs reuse their loaded runtimes
• reset Python project files, local module cache, paths, and input hooks before each warm run so edited or deleted student files never go stale
• add a visible Send action, 44px controls, and 16px mobile input text for accessible program input without iOS zoom
• improve runtime-load timeout and network failure recovery messages
• add component coverage for warm-worker reuse and terminal input submission

Validation

• ./scripts/gate.sh: 7 frontend files / 22 tests, 51 Rails tests / 406 assertions, production CSP/runtime verification, and npm audit with 0 vulnerabilities
• bundle exec bundler-audit check: no vulnerabilities
• local Chrome smoke at 1440x1000 and 390x844
• measured Python cold/warm runs around 1.25s then 4-5ms
• edited an imported helper between warm runs and confirmed the new module value was used
• mobile terminal input: 44px input and Send targets, 16px text, 390px viewport with no horizontal overflow

Guardrails

The existing 30-second startup deadline, 3-second execution deadline, Stop behavior, per-project component boundary, and browser-only execution model remain intact.

Greptile Summary

The PR improves browser-runner status messaging, accessibility, timeout recovery, and warm-worker reuse while resetting Python project and module state between runs.

• Adds explicit loading, execution, input, completion, error, and timeout presentation.
• Reuses successful workers and refreshes Python files, paths, imported project modules, and input hooks for warm runs.
• Adds accessible terminal input controls and focused coverage for worker reuse and overlapping run requests.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
web/src/components/RunnerPanel.tsx	Adds detailed run phases, guarded timeout handling, warm-worker reuse, network-aware errors, and accessible input submission; the previously reported orphaned-timer failure is fixed.
web/src/components/RunnerPanel.test.tsx	Covers warm-worker reuse, terminal input submission, and rapid overlapping requests without stale startup timers stopping the replacement.
web/src/workers/pythonRunner.worker.ts	Caches Pyodide while rebuilding project files and clearing project-module state between runs; the prior student-mutable input-restoration path is replaced with JS-held state and nested cleanup.
web/src/App.css	Adds touch-friendly terminal controls and clearer runner progress styling, including mobile-safe input sizing.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  A[Run requested] --> B{Active run?}
  B -->|Yes| C[Stop worker and clear timer]
  B -->|No| D[Clear stale timer]
  C --> E[Create replacement worker]
  D --> F{Warm worker available?}
  F -->|Yes| G[Reuse worker]
  F -->|No| E
  E --> H[Load runtime]
  G --> I[Reset project and runtime state]
  H --> I
  I --> J[Execute code]
  J -->|Input requested| K[Wait for terminal input]
  K --> J
  J -->|Success| L[Retain idle worker]
  J -->|Error or timeout| M[Stop worker]

Loading

_{Reviews (2): Last reviewed commit: "Harden warm runner lifecycle" | Re-trigger Greptile}

[netlify]

✅ Deploy Preview for hafa-code ready!

Name	Link
🔨 Latest commit	9864d92
🔍 Latest deploy log	https://app.netlify.com/projects/hafa-code/deploys/6a75c39789c2ee0008ee07c4
😎 Deploy Preview	https://deploy-preview-15--hafa-code.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1ded8903-e46f-43a7-b71b-44a099833bcd

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}