fix(collab-web): align transcript wrapping with TUI

[chan1103]

fix(collab-web): align transcript wrapping with TUI

Problem

The collab web transcript did not match the terminal transcript for prose-heavy assistant output.

There were two visible transcript-level issues:

1. Tree-shaped prose collapsed into one paragraph

   Assistant messages can contain intentionally shaped text, such as decision trees or logic trees. The terminal transcript preserves those line breaks, but the collab web Markdown renderer treated soft line breaks as normal spaces.

   As a result, tree-shaped prose could become a single noisy paragraph.

2. Korean/CJK prose could wrap inside readable words

   The terminal transcript prefers word-boundary wrapping and only falls back to breaking inside a token when the token cannot fit.

   The collab web transcript was more aggressive, so Korean/CJK prose could wrap at awkward character-level boundaries. This made otherwise ordinary transcript text harder to scan.

During review, two related edge cases also came up:

• Indentation after soft line breaks must remain visible for nested tree prose.
• Long URLs or identifiers must still emergency-wrap instead of expanding or clipping narrow transcript content.

Examples

Tree-shaped prose

Before this change, tree-shaped prose could collapse into a single paragraph in the collab web transcript:

Decision: ├── Add examples │ └── Reviewers can understand the rendering bug immediately. ├── Avoid full conversation dumps │ └── They make the PR noisy. └── Keep examples short └── This keeps the fix focused.

The same content should remain readable as separate lines, matching the terminal transcript:

Decision:
├── Add examples
│ └── Reviewers can understand the rendering bug immediately.
├── Avoid full conversation dumps
│ └── They make the PR noisy.
└── Keep examples short
└── This keeps the fix focused.

Korean/CJK wrapping

In constrained transcript widths, readable Korean words should stay intact where possible.

Awkward character-level wrapping can split one word across lines:

collab 웹에서도 긴 설명이 어색하
게 끊어져 읽기 어렵습니다.

The preferred wrapping keeps that word intact and breaks at a readable boundary instead:

collab 웹에서도 긴 설명이
어색하게 끊어져 읽기 어렵습니다.

Long unbroken tokens still need emergency wrapping so narrow transcript content does not overflow:

• https://example.com/this/is/a/very/long/url/that/should/wrap
• superLongIdentifierWithoutBreaksThatShouldStillWrap

Fix

This change stays in the collab web display layer. It does not change the collab protocol, session state, or message content.

• Render Markdown soft line breaks as visible line breaks in transcript messages.
• Preserve paragraph whitespace so indentation after generated line breaks remains visible.
• Prefer word-boundary wrapping for Markdown prose, including Korean/CJK keep-all behavior.
• Allow narrow Markdown content to emergency-wrap long URLs and identifiers so it does not overflow or get clipped.
• Keep fenced code blocks on the existing horizontal-scroll path instead of forcing prose-style wrapping.
• Add regression coverage for tree-shaped Korean prose and raw HTML escaping.
• Add a collab-web changelog entry.

Verification

bun --cwd=packages/collab-web test
# 32 pass
# 0 fail
# 94 expect() calls

bun --cwd=packages/collab-web check
# bun check: passed
# root biome: ok

bun --cwd=packages/collab-web run build
# Bundled 101 modules

Additional browser checks:

• Tree-shaped prose stays split across visible lines.
• Indented tree prose keeps leading spaces after line breaks.
• Korean transcript text wraps at readable word/phrase boundaries where possible.
• Narrow content still wraps long URLs instead of overflowing.
• Narrow content still wraps long identifiers instead of overflowing.
• Code blocks retain horizontal scrolling.

Review

Initial review found two blocking edge cases:

• Indentation after soft line breaks could still collapse.
• Long URLs/identifiers could expand past the transcript width.

Both were fixed.

Follow-up review status:

• Reviewer: approved.
• Oracle: approved.

Scope

This PR intentionally does not change:

• collab transport or relay behavior
• guest permissions
• image upload or attachment behavior
• session persistence format
• terminal TUI rendering
• fenced code block wrapping

Risk

Expected risk is low.

• English prose continues to wrap at normal spaces.
• Korean/CJK prose avoids unnecessary character-level breaks.
• Long URLs and identifiers still wrap when they cannot fit.
• Raw HTML escaping and safe-link handling remain unchanged.
• The change is display-only and does not affect stored message content.

Known limitation:

• The web transcript is still rendered by browser fonts and CSS, so it will not be pixel-identical to the terminal transcript.
• The goal is to preserve the same readability rules as the terminal transcript, not to duplicate terminal cell layout exactly.

[roboomp]

P0 / lgtm — tight display-only fix in packages/collab-web: Marked.breaks preserves soft line breaks, CSS keeps prose wrapping readable while leaving pre on the horizontal-scroll path, and the changelog/test coverage match the touched package.

No inline findings. I could not rerun the new test locally because this checkout has no node_modules/react, but the diff review found no correctness or convention blockers.

Thanks for the focused fix.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8d00896c43

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[chatgpt-codex-connector]

Move new changelog entries under Unreleased

These new entries are being added inside the existing 15.13.3 release section while ## [Unreleased] remains empty. The repo instructions say new changelog entries must go under [Unreleased] and released sections are immutable, so the next release flow will omit this fix from the pending release notes and retroactively change an already-published section.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7006e53928

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[chatgpt-codex-connector]

Apply whitespace preservation to tight list items

This only preserves whitespace for <p> elements, but marked renders tight Markdown lists without paragraph wrappers. When assistant output puts a shaped tree under a bullet, such as - Decision:\n │ └── detail, breaks: true emits <br> inside the <li> while the spaces in │ └── still collapse to a single space, so list-contained trees still lose their nesting and do not match the TUI. Please cover the list-item text path as well while preserving normal nested-list layout.

Useful? React with 👍 / 👎.