fix(ui): render SQL as workflow code blocks

[zxuexingzhijie]

What changed

• split mixed workflow output into consecutive text and typed-code segments
• reuse the existing highlighted code renderer for SQL, Python, and JSON segments
• add regression coverage for streamed SQL generation and SQL execution output

Root cause

One workflow step contains status text before and after its typed SQL events. The timeline only rendered a code block when every event in the step was a code type, so mixed TEXT -> SQL -> TEXT output was concatenated and displayed as plain text.

User impact

Generated and executed SQL now appears in a dedicated highlighted code block with preserved whitespace and horizontal scrolling, while the surrounding execution status remains normal text.

Validation

• pnpm test:unit — 16 tests passed
• pnpm build
• ESLint on the changed Vue and TypeScript files
• browser verification against the running local application: SQL generation and SQL execution both render as visible pre.tl-code blocks