Description

Make function call errors appear inline so that they are not too disruptive to the reading experience, but they can effectively guide editors towards successfully understanding and fixing the issue.

Desired behavior/Acceptance criteria

• In Read pages:
  • Failing function calls are rendered inline with a minimal text and style according to the specified design.
  • Failing function calls inline blocks can still redirect the relevant error section in the user help page.
• In Visual Editor article preview:
  • Failing function calls are rendered exactly as in Read pages
  • Click on the failing function call inline block renders the Context popup
• In Visual Editor context popup:
  • The context popup has a clear error state and message.
  • The "Learn more" link redirects the user to the relevant error section in the user help page.
• There is continuity with Q3 error detection and reporting (same links for same error cases)

Devices and Design (URLs or screenshots)

https://www.figma.com/design/sMOc0itmJIm6qthj8XKfMd/T363391-Design-prototype-for-WF-use-case-in-WP?node-id=474-11464&p=f&t=00vxBg3FpCCs7jIn-0

1. Read page	2. VE Article preview	3. VE Context popup
-	-	-

Subtasks

• Design clarifications needed: T391117: Design: Revisit the early designs for inline display of Wikifunctions errors in Wikipedia articles
• ClientHook: Refactor buildErrorDom method so that it produces an inline element with the appropriate style and icons.
  • Element must have specific styling, preceding error icon and must be displayed inline. The message rendered is minimal.
  • There should be continuity from Q3 features: error messages contain a link to the error page and particular section for this error, the new error display should also be able to redirect to the exact help page section.
  • If there's need to share the error key with VE, add the particular error message key (e.g. "wikilambda-functioncall-error-unclear") as a data-* DOM attribute so that it can be extracted and used from the VE context item.

Completion checklist

• Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist