Polish terminal gutters and shell strings

[max-sixty]

The homepage merge transcript rendered its ANSI gutter as separate glyph-height blocks, leaving visible gaps between consecutive rows. Quoted prompts in the parallel-agent example also shared the same color as ordinary shell arguments.

This extends the existing gutter spans to fill the line box and adds a shell-specific quoted-string role to the paired syntax themes. The role stays scoped to Bash strings, retains distinct accessible colors in both themes, and leaves TOML strings unchanged. WebKit coverage pins the complete gutter rail, line geometry, scope boundary, theme contrast, and mobile containment.

This was written by Codex on behalf of max-sixty

[worktrunk-bot]

The gutter gap is real and display: inline-block is the right lever, but the margin-block/padding-block pair on top of it is doing harm rather than work. An inline-block span inherits the line's line-height, so its box already resolves to exactly the line-box height — the extra ±0.25em only makes the rail taller than the rows it sits in.

Measured on a minimal reproduction of the .ec-line > .code > span structure at the site's 16px / 1.65 code metrics:

variant	gutter box	join between adjacent rows	overhang past its own row
before this PR	19.00px in a 26.39px line	+7.39px (the reported gap)	—
display: inline-block alone	26.39px	0.00px	0 top, 0 bottom
this PR	34.39px	−8.00px	+4px top, +4px bottom

That overhang is visible where a run of gutter rows ends. The test itself pins gutterIndexes as [1, 4, 5, 6, 7], so on the homepage merge transcript row 1 is a single gutter row with plain rows above and below — the rail there renders 4px taller than its row at both ends, and the 4–7 run does the same at its two ends. Dropping the two extra declarations gives a rail that is flush at the joins and stops exactly at the run boundary.

Two notes on the assertions, since they currently pass either way:

• joins.every((gap) => gap <= 0) is satisfied by both flush (0) and overhanging (−8), so it pins "no gap" rather than "correct box". Suggested below.
• gutterIndexes is derived from tests/snapshots/integration__integration_tests__list__quickstart_merge.snap via the auto-generated homepage block. When that snapshot moves, this fails as a bare array diff on a docs-regeneration PR; a message pointing at the snapshot saves the next reader the trace.

One judgment call, not a request: #1d4ed8 / #93c5fd are exactly --wt-terminal-blue, and also exactly --wt-code-option, which is what .wt-command-reference .wt-help-option paints flags with. So the color is on-palette, but on a command page a blue span now means "flag" in the help frame and "quoted string" in the Bash example just below it. Within a Bash block there's no collision — the shell grammar leaves -x/-c unscoped, which is what makes the new role read — so this is only about cross-block consistency, and picking blue may well be deliberate.

How the geometry was measured

WebKit can't launch in this sandbox (libgtk-4.so.1, libgraphene-1.0.so.0 missing, and installing them needs root), so the numbers above come from Chromium against a minimal page reproducing pre { font-size: 16px; line-height: 1.65 } with .ec-line > .code > span.gutter rows. The behaviour is CSS2.1 baseline alignment of an atomic inline rather than anything engine-specific, and check-docs is green on this head, so the WebKit suite is the authoritative confirmation either way.