[Codex] microsoft/pxt#​10590 — Error Help - Part 1

[IanMatthewHuff]

Overview

This is the first set of front-end changes for the "Error Help" feature. It adds a "Help me understand" button to the error list, which sends a request to our backend for assistance on the current errors in the error list. In blocks, it then displays help in the form of an editor tour. In text, it simply adds a small chunk of explanatory text to the top of the error list.

Part of https://​github.com/microsoft/pxt-microbit/issues/6138

Breakdown

The key components of the change are:

1. The actual error-help logic (packaging up code, processing the response). This mostly happens in the errorHelp.ts file.
2. Some refactoring for the editor tour.
   • This was already pretty flexible, but I wanted to support different colors and some tour-level settings (like whether or not to show confetti or include the final step in the step count).
   • To make that change, I introduced a TourConfig with tour-level settings, but I kept colors at the bubble-level in case we ever want to have different colors within one tour.
   • It also seemed prudent to pull all of the "current step" vs "total steps" comparisons into the Tour instead of the Bubble, since tour-level settings affect it. This was the biggest component of the refactor.
3. Sign-in is required. If you're not signed-in, clicking the button will trigger the sign-in modal with some custom text.
4. Error handling & glue connecting various layers. I tried to minimize passing the "parent" around, and I tried to keep block-specific stuff inside blocks.tsx while text-specific stuff stayed in monaco.tsx...but I'll admit, it still feels a little scattered.

What is NOT in this change

In the interest of keeping this change to a (somewhat) manageable size, I've decided to postpone the following items for future changes. Sub-issues filed here: https://​github.com/microsoft/pxt-microbit/issues/6138
Must Haves

1. Permissions popup (to get user permission to send to AI)
2. Feedback (helpful / not helpful)
3. AI Disclaimer

Nice to Haves

1. Caching responses in case the user clicks it several times for the same error
2. Possibly "repairing" invalid block ids (i.e. checking if it's a variable/function id instead, and if we can map that to a block)
3. Premade responses for some error types, so we can skip the AI altogether
4. Trimming overly-repetitive stack traces (like stack overflows) to save on tokens
5. Mobile layout
6. Better icon. It's currently a question mark. Ideally, it'd be fun for this to be some "helper" themed to the target (like the duck), but I'm not sure what that would be for microbit. Would also be nice to include them in the error tour header. But could also just use a better icon, if people have ideas.
7. Nicer loading animation - I may need some help on this, can't think of how to make it look good. I've gone with "simple" for now.

Try it: https://microbit.staging.pxt.io/app/67201f689bf390a088508664dd715cfef4585b54-3712e8e736

---

Mirrored from upstream PR: https://​github.com/microsoft/pxt/pull/10590
Created automatically by pr-sxs-human-evals for code-review agent comparison.
(URL wrapped in a code span so GitHub does not create a cross-reference on the upstream timeline.)

[IanMatthewHuff]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b5b0c0a4e8

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Guard against empty tour steps before rendering bubble

If the AI returns an empty explanationSteps list, config.steps is empty and this passes undefined as targetContent, which later gets dereferenced in TeachingBubble (for example targetContent.onStepBegin / targetContent.title) and can crash the UI when users click “Help me understand” in blocks. Add a precondition to handle steps.length === 0 (e.g., show an error and close the tour) before rendering.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Use the intended step-hide class name in teaching bubble

The component applies "hidden" when forceHideSteps is true, but the new stylesheet rule is defined for .teaching-bubble-steps.hide. Because of the mismatch, this rule is never used and the global .hidden { display:none } behavior takes over, which changes layout behavior from the intended visibility:hidden and causes the footer to reflow on the final step.

Useful? React with 👍 / 👎.