QOL: Add Automatic Code Block & Syntax Highlighting In Chat Input

[jjjrmy]

Summary

• Detect pasted code automatically (via IDE clipboard detection, language-specific patterns, and structural analysis) and render it as a styled, non-editable code block in the chat input
• Syntax-highlight code blocks using Shiki in the input editor, sent message bubbles, and full message modal
• Support user-typed fenced code blocks (```lang) — including consuming an opening fence when code is pasted after it
• Dynamically load Shiki languages on demand so any supported language highlights without pre-bundling

Details

New file: parse-user-code-blocks.ts

• parseCodeBlocks() / hasCodeBlocks() — split text by triple-backtick fences into typed segments
• detectLanguage() — identify 20+ languages (PHP, TypeScript, Python, Java, C#, Ruby, Go, Rust, SQL, etc.) from text patterns
• looksLikeCode() — two-pass detection: language-specific patterns then structural analysis (indentation, line endings, special char density, balanced delimiters)

Editor (agents-mentions-editor.tsx)

• createCodeBlockNode() — creates a contenteditable=false block with language header, remove button, and async Shiki highlighting
• Fixed serialization ordering: data-code-block is now checked before the generic <div> handler in serializeContent(), which was causing backtick fences to be lost
• Debounced code block detection on input (converts typed ```lang...``` into styled blocks)
• Extracted skipSubtree() helper for TreeWalker traversal
• Code blocks re-highlight on theme change via onThemeChange subscription

Paste handling (paste-text.ts)

• isPastedFromCodeEditor() — detects VS Code, IntelliJ, etc. via clipboard HTML (monospace fonts, colored spans)
• consumeOpenFence() — if the user typed ```php before pasting, consumes the fence and uses its language
• insertCodeBlockAtCursor() — extracted helper for code block DOM insertion (was duplicated 3x)
• Paste priority: opening fence > fenced blocks in pasted text > IDE clipboard detection > heuristic code detection > plain text

Sent message rendering (render-file-mentions.tsx)

• UserCodeBlock component — read-only Shiki-highlighted code block for sent messages, re-highlights on theme toggle
• RenderUserContent — wraps RenderFileMentions, splits text by fenced code blocks and renders UserCodeBlock for code segments

Bug fixes

• Fixed extractTextMentions() stripping code indentation (removed per-line .trim())
• Fixed RenderUserContent wrapper from <span> to <div> (code blocks are block-level elements)
• Dynamic language loading in shiki-theme-loader.ts — languages not in the initial bundle load on demand

Test plan

• Paste PHP/Python/TypeScript code into chat input — should auto-detect and render as styled code block with syntax highlighting
• Paste code from VS Code — should detect via clipboard HTML and render as code block
• Type ```php, then paste code — fence should be consumed, code block created with php language
• Paste text containing ```lang...``` fences — should render as code blocks with surrounding text preserved
• Send a message with a code block — verify it renders with syntax highlighting in the message bubble and full message modal
• Verify code indentation is preserved in sent messages
• Toggle dark/light mode — code blocks should re-highlight with the correct theme
• Click the X button on an input code block — should remove it
• Paste plain English text — should NOT be detected as code
• Undo (Cmd+Z) after pasting a code block — should restore previous state

[jjjrmy]