[devtools] Force ANSI colors on overlay code frames regardless of TTY (#93550)
### What?
The dev overlay's code frame loses syntax highlighting whenever `next
dev` runs under a non-TTY parent (VS Code / Cursor's integrated
terminal, Docker without `-t`, `concurrently`, the JavaScript Debug
Terminal, CI logs, etc.). Tokens render as plain monochrome text instead
of the usual colored output.
### Why?
The "syntax highlighting" in the overlay isn't real highlighting. The
server embeds ANSI escape codes into the code frame string, and the
browser overlay parses them via Anser to render colored `<span>`s.
Whether the dev server's stdout is a TTY is irrelevant on this path —
the consumer is the browser.
Since #71860, `getOriginalCodeFrame` defaults `colors` to
`process.stdout.isTTY`, and the overlay middlewares relied on that
default. The moment stdout was a pipe, the overlay had nothing to color.
### How?
`createOriginalStackFrame` and `getOriginalStackFrames` are shared by
five consumers (overlay HTTP endpoint, webpack `Module not found`
plugin, browser-log forwarding, MCP error formatter, hot-reloader
resolver). Hardcoding `colors: true` would leak escape sequences into
the four non-overlay paths.
Thread a `codeFrameOptions: { colors?, maxWidth? }` parameter through
both functions. The overlay HTTP middlewares opt in to `colors: true`
and `maxWidth: DEVTOOLS_CODE_FRAME_MAX_WIDTH`; everyone else keeps the
existing TTY-gated colors and terminal-width wrapping. (The 1000-column
override from #92621 was suffering from the same leak — also scoped to
the overlay now.)
Tested from Cursor's integrated terminal with/without fix:
Before:
<img width="1174" height="1070" alt="CleanShot 2026-05-06 at 22 34
45@2x"
src="https://github.com/user-attachments/assets/16ef1ac2-749b-443d-9e76-42f1318e9cd1"
/>
After:
<img width="1254" height="1066" alt="CleanShot 2026-05-06 at 22 34
30@2x"
src="https://github.com/user-attachments/assets/577ef3c2-3f02-4bb5-9825-63aa5564c593"
/>