feat(frontend): add fade+pill truncation for long chat messages

[mmabrouk]

Summary

Stacked on #4343.

Long chat messages in the beautified JSON view are now clamped with a fade-to-background gradient and a centered "Show more" pill. Clicking the pill expands the message to full height and reveals a "Show less" pill at the bottom. Short messages render as before with no truncation UI.

Details

• Truncation threshold is 160px (~8 lines of text).
• A separate measurement ref (unclamped inner div) feeds the ResizeObserver so height detection stays accurate regardless of the clamp state.
• The clamped container always has an explicit maxHeight (160px when truncated, 9999px when expanded) so the CSS transition-[max-height] animates in both directions.
• Expanded state resets when the message text changes.

Accessibility

• Toggle buttons carry aria-expanded.
• The fade gradient overlay has aria-hidden="true".
• Focus-visible rings and motion-safe transitions are consistent with the rest of the component.

CleanShot.2026-05-15.at.21.46.56.mp4

Test plan

• Open a trace with long chat messages (e.g. a system prompt with multiple paragraphs). Verify the message body is clamped with a visible fade and a "Show more" pill.
• Click "Show more". Verify the message expands with a smooth animation and a "Show less" pill appears.
• Click "Show less". Verify it collapses back smoothly.
• Open a trace with short chat messages (1-2 lines). Verify no truncation UI appears.
• Tab to the pill button with keyboard. Verify focus ring is visible.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	May 15, 2026 8:08pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e5a3feb6-c56d-4cb2-858e-a01236398093

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/message-truncation-pill

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Railway Preview Environment

Preview URL	https://gateway-production-f25e.up.railway.app/w
Project	agenta-oss-pr-4344
Image tag	pr-4344-fb10423
Status	Deployed
Railway logs	Open logs
Workflow logs	View workflow run
Updated at 2026-05-15T19:55:42.878Z