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.

This also improves trace message rendering for PydanticAI-style message parts. Text parts render as message text, while tool_call and tool_call_response parts keep their JSON payloads structured and expandable instead of being flattened into one opaque string.

Details

• Truncation threshold is 160px.
• Expanded messages no longer keep a sentinel max-height cap, so very large prompts/tool outputs can fully expand.
• A separate measurement ref feeds the ResizeObserver so height detection stays accurate regardless of clamp state.
• Expanded state resets when the message text changes.
• Copy-button keyboard events no longer bubble into the row toggle handler, so pressing Space/Enter on copy does not collapse or expand the row.
• Message parts now handle AI SDK and PydanticAI variants:
  • text: {type: "text", text} and {type: "text", content}
  • tool calls: {type: "tool-call", toolName, input} and {type: "tool_call", name, arguments}
  • tool responses: {type: "tool-result", output} and {type: "tool_call_response", name, result}
• JSON strings inside tool arguments/results are parsed before rendering when possible.

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.
• Keyboard copy and keyboard row expansion are separated so nested controls do not trigger parent row actions.

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

Test plan

• pnpm lint-fix
• Push hook web lint
• Open a trace with a long system/user/assistant message. Verify the message body is clamped with a visible fade and a "Show more" pill.
• Click "Show more". Verify the message expands fully and a "Show less" pill appears.
• Click "Show less". Verify it collapses back smoothly.
• Open a trace with short chat messages. Verify no truncation UI appears.
• Open a PydanticAI agent span with parts containing tool_call. Verify tool arguments render as expandable structured JSON.
• Open a PydanticAI agent span with parts containing tool_call_response. Verify result arrays/objects render as expandable structured JSON.
• Tab to a row copy button and press Space/Enter. Verify it copies without toggling the row.

Notes

pnpm --filter @agenta/oss types:check currently fails on existing repo-wide TypeScript errors outside this change; the local BeautifiedJsonView timer issue surfaced by that command was fixed.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	May 18, 2026 7:07pm

[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: a7919b41-b774-49c6-b064-8e172ee14161

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

Status	Destroyed (PR closed)

Updated at 2026-05-19T14:34:00.110Z