Improve friendly error message

[cocomarine]

❗ This branch was created by rebasing #1485 to #1483.

Decisions made upon adding pfem v. 0.7.0

• For now, we are showing title and summary of friendly errors (potentially why bit might also be added later on)
• ErrorMessage now optionally includes FriendlyErrorMessage
• Moved ErrorMessage to the bottom of input panel above Run button
  • In mobile screens (MobileProject), when the error is triggered after run, the input panel becomes the selected tab so that users can see the error (if no error triggered, the output panel becomes selected)
  • For Skulpt runner, the logic of showing error when not in output only mode is now removed, keeping the same behaviour of no error in output only mode.
  • For Pyodide runner, a logic for showing error message when in output only mode is now added
    • As in WebcomponentProject.jsx, EditorInput is not rendered at all in output only mode, resulting in ErrorMessage displayed only by Output panel of Pyodide
• When there are multiple Python files:
  • An error from main.py shows first.
  • When there are errors only in files other than main.py, they will show (one at a time).
  • Whatever error is shown will stay even when you select other tabs within the input panel.

WIP and future pfem

• More discussion needed in terms of the possibility of adding why of friendly error in terms of copy and UI

Screen recordings of editor with friendly messages

• Multiple python files
  https://github.com/user-attachments/assets/a70727a4-121a-4c05-859f-f60f2cc29046

• Responsiveness
  https://github.com/user-attachments/assets/6697cfd4-fca9-4c04-af66-92b181a8e34d

• Mobile screen (< 600 px)
  https://github.com/user-attachments/assets/48736879-ff09-439d-8b1f-fb633a215333

[Copilot]

Pull request overview

Updates the Python error UI to support pfem v0.7.0 “friendly” error messages, and repositions error display so it appears in the input panel (and appropriately in output-only mode), including mobile tab-selection behavior.

Changes:

• Bumps @raspberrypifoundation/python-friendly-error-messages to 0.7.0 and updates runners to use the new adapter + sections: ["title","summary"].
• Introduces FriendlyErrorMessage and refactors ErrorMessage styling/markup; moves ErrorMessage rendering into EditorInput.
• Adds/updates unit + Cypress coverage for friendly errors and mobile error-tab selection.

Reviewed changes

Copilot reviewed 25 out of 28 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
.yarnrc.yml	Pre-approves the pfem package for Yarn’s restricted installs.
package.json	Bumps pfem dependency to 0.7.0.
yarn.lock	Lockfile update for pfem 0.7.0.
src/web-component.html	Web component test page formatting tweaks and attribute changes.
src/utils/setupTests.js	Updates Jest mock exports for pfem adapter changes.
src/PyodideWorker.js	Adds rawTraceback to worker error payload for friendlier parsing.
src/components/Mobile/MobileProject/MobileProject.jsx	Switches mobile tabs to input when Python errors occur after running.
src/components/Mobile/MobileProject/MobileProject.test.js	Adds tests for mobile error display/tab selection.
src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx	Updates pfem adapter usage and friendlyExplain options; removes runner-local ErrorMessage rendering.
src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js	Removes outdated error-message placement tests.
src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx	Updates pfem adapter usage; uses rawTraceback; shows ErrorMessage only in output-only mode.
src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js	Updates error message expectations and adds friendly-error edge case tests.
src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx	New component to render sanitized friendly error HTML.
src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js	New tests for friendly error rendering + sanitization.
src/components/Editor/ErrorMessage/ErrorMessage.jsx	Refactors error UI markup; embeds FriendlyErrorMessage and icon.
src/components/Editor/ErrorMessage/ErrorMessage.test.js	Updates assertions for new class naming.
src/components/Editor/EditorInput/EditorInput.jsx	Renders ErrorMessage at the bottom of the input panel (above Run).
src/components/Editor/EditorInput/EditorInput.test.js	Adds a test asserting error message appears in EditorInput.
src/assets/stylesheets/InternalStyles.scss	Includes FriendlyErrorMessage styles in internal stylesheet bundle.
src/assets/stylesheets/FriendlyErrorMessage.scss	New styling for pfem HTML elements (title/summary/code/file/line).
src/assets/stylesheets/ErrorMessage.scss	Updates styling and class structure for new ErrorMessage layout.
src/assets/stylesheets/EditorPanel.scss	Formatting/cleanup only.
src/assets/icons/cancel_FILL.svg	New icon used in ErrorMessage header row.
src/assets/error_file.svg	New asset used to decorate file references in friendly errors.
cypress/helpers/editor.js	Updates selectors and adds helper for friendly error message container.
cypress/fixtures/copydeck.json	Adds a fixture copydeck for deterministic friendly-error Cypress tests.
cypress/e2e/spec-wc-skulpt.cy.js	Adds Cypress coverage for friendly errors in Skulpt.
cypress/e2e/spec-wc-pyodide.cy.js	Adds Cypress coverage for friendly errors in Pyodide.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.