fix(flow-chat): resolve diff card text truncation on long lines

[limityan]

Problem

In the Chat interface, when a diff card renders a very long single-line change, the text beyond the first visual line is cut off and invisible.

Root Cause

InlineDiffPreview uses @tanstack/react-virtual for row virtualization with a fixed row height of 22px (estimateSize: () => ROW_HEIGHT). At the same time, CSS sets white-space: pre-wrap + word-break: break-word to allow text wrapping. These two are fundamentally incompatible:

1. CSS wrapping folds long lines into multiple visual lines (real height > 22px)
2. The virtualizer forces each row container to height: 22px
3. overflow: hidden clips everything beyond 22px

Result: wrapped content is invisible.

Solution

1. Dynamic row measurement (core fix)

• Configure the virtualizer with measureElement so each row reports its actual rendered height
• Remove the hardcoded height: virtualRow.size from row containers
• Apply ref={virtualizer.measureElement} + data-index to all row types (including context-separator)

2. Container resize handling

• Add a ResizeObserver on the scroll container
• When width changes, call virtualizer.measure() to invalidate cached heights and re-measure (wrapping depends on width)

3. Large diff truncation

• Add truncateForDiff() with thresholds: 500 total lines or 50k total chars
• When exceeded, keep head + tail portions with a ... truncated N lines ... marker
• Show a visible truncation notice above the diff content
• This bounds the cost of diffLines() and Prism.tokenize() for very large files

4. CSS cleanup

• Replace overflow: hidden with overflow-wrap: anywhere on .diff-line__content
• Remove redundant word-break: break-word (subsumed by overflow-wrap: anywhere)
• Add .inline-diff-preview__truncation-notice style

Verification

• pnpm run type-check:web — pass
• pnpm run lint:web — pass (0 errors)

Files changed

• src/web-ui/src/flow_chat/components/InlineDiffPreview.tsx
• src/web-ui/src/flow_chat/components/InlineDiffPreview.scss