[agegr]

Problem

Long lines in code fences scrolled sideways, by over 2,000px on a phone, which makes model output in ``` blocks hard to read (#1360). The issue asked for a wrap toggle; instead fences now wrap by default, as pi's TUI does (it passes every rendered line, code blocks included, through wrapTextWithAnsi). No toggle, no setting.

Change

• components/MermaidBlock.tsx: CodeBlock gives react-syntax-highlighter a small renderer (renderCodeLines()) that makes each line a flex row of its number and its text. The text wraps (pre-wrap, overflow-wrap: anywhere for URLs and paths with no space), and a wrapped line continues under its text, never under the number. The text span keeps the row's classes, so the middle lines of a block comment keep their color. The streamed <pre> wraps the same way. Copy still copies the source text.
• app/globals.css: the row rules (flex: 1 1 0, so layout does not first measure every line unwrapped); code fences leave the sideways scroll-edge fade.
• components/ChatWindow.tsx: extension dialogs widen for code that would scroll sideways ([Feature] 扩展弹窗尺寸可配置：长内容（如格式化 SQL）在 560px 宽弹窗里显示局促 #947, fix(chat): let extension dialogs and the custom panel be widened (#947) #1032). With wrapping it never does, so the fit measures fences unwrapped for a moment (.extension-dialog-measuring) and still grows where the screen allows; code wraps only past that.
• Everything that renders Markdown through CodeBlock follows (custom and compaction messages, skills and subagent viewers, the file viewer's Markdown preview, the Mermaid source view). The file viewer's source view and tool cards are unchanged.
• Side effect: each line is now exactly lineHeight tall (about 1px less than before, when the <pre>'s theme font and the code font mixed), the same as while streaming.
• e2e/extension-dialog.mjs, demo/ mirror, docs/agents/sessions.md, tests in components/MermaidBlock.test.mjs.

Verification

• Headless Chrome on production builds: no fence scrolls sideways at 1280 or 390px, light and dark (main: 2,214–2,737px); continuation lines start at the text column; indentation, empty lines, CRLF and tabs keep their rows; colors match main character for character across tsx / html / markdown samples; mouse copy and Cmd+C give byte-identical text to main (no line numbers); Find-in-page works.
• Layout cost with flex: 1 1 0: 75 fences / ~2,300 lines ≈ 220 ms vs 217 ms on main (4× CPU throttle).
• Extension dialogs: same widths as main (680px at 1280, 350px at 390); the new e2e assertion fails on main and passes here.
• tsc --noEmit (root and demo), eslint, npm test 2,872 tests, 0 fail; full e2e/run.mjs passes except the minimap step that already fails on local macOS runs.
• Not verified: Firefox and Safari.

Fixes #1360

🤖 Generated with Claude Code