Draw indent guides in the code editor

[sidney-Hung]

Summary

The code editor is a plain textarea, so when writing nested loops or branches there is no visual cue for which block a line belongs to. In Python that cue decides whether the code is correct. This adds vertical indent guides to the interview editor, one per indent level.

How it works

The syntax highlighter draws the guides, so they share the overlay's layout and scroll instead of needing a layer of their own. The textarea is unchanged.

• web/indent-guides.js (new): indentGuides(code, tokens) measures the level width and returns one run per line that has guides: the line's leading whitespace wrapped in <span class="indent-guide"> elements.
• web/highlight.js: highlight() splices each run into the line's leading whitespace.
• web/interview.js: passes the runs to the highlighter, and re-syncs the overlay's scroll after each paint (see below).
• web/styles.css: guide style, plus a --code-guide token next to --code-gutter-border: #404040 in the dark theme and #d3d3d3, VS Code Light+'s indent-guide color, in both light-theme blocks.

Design notes

• Width from the buffer. The level width is the most common indent step between code lines, from 2 to 8 columns, with ties going to the smaller. With nothing to measure it is 4, what web/editor.js inserts for Tab. Lines continuing a comment or string don't vote, since a doc comment's * body would otherwise measure 1. JavaScript starters come out at 2; Python, Java, C and C++ at 4.
• Partial levels keep their guide. A guide is drawn at every level column inside the leading whitespace, so 7 spaces at width 4 gives guides at columns 0 and 4. Lines continuing a comment or string are the exception, so no guide sits beside every *.
• Whitespace-only lines take their own depth clamped between their neighbours'. An empty line inside a block keeps the guides it sits between, an empty line after a block drops the inner guide, a line just opened with Enter at the end of a block keeps the depth the caret is at, and stray spaces can't draw guides deeper than the surrounding code.
• Guides are inline blocks; a plain inline span is shorter than the line height and the guides would render as dashes.
• Scroll fix. The paint waits for the next frame but a scroll event doesn't, so Enter at the bottom of a long buffer could clamp the overlay's scrollTop to the old height and leave every row one above its code. The overlay's scroll is now re-synced when each paint finishes.
• Trade-off: a buffer that mixes a 2-space starter with the 4 spaces web/editor.js inserts gets guides at 2. Making Enter and Tab insert the detected width is left for a separate change.

Screenshot

Tests

• tests/browser/indent-guides.test.js (new, 21 tests): width detection, partial levels, whitespace-only lines, comment and string lines, HTML escaping.
• tests/browser/editor-font-size.test.js: a regression test for the scroll fix, which fails with the post-paint re-sync removed.

Closes #254

[jserv]

Rebase latest main branch and resolve conflicts.

[sidney-Hung]

Rebased onto main and added --code-guide next to --code-gutter-border:
#404040 in the dark default, so dark is unchanged,
and #d3d3d3, VS Code Light+'s indent-guide color, in both light blocks.
Fixed in 22fb99e.

[sidney-Hung]

Pushed an update addressing the review comments, and updated the PR description to match.

[ColtenOuO]

LGTM, thanks for working on this.

[jserv]

Thank @sidney-Hung for contributing!