[3757] feat(observability): improve inputs and outputs rendering

[mmabrouk]

This PR improves how observability tables render inputs and outputs. It replaces flat string previews with typed cell renderers. It keeps row height stable for long conversations. It still shows full content on hover.

Changes

• Use shared cell renderers from @agenta/ui/cell-renderers in the observability traces and sessions tables.
• Show only the last input message in the row. Show the full conversation in the hover popover.
• Add directional chat extraction so the input column prefers input side messages and the output column prefers output side messages.
• Harden chat detection. Validate every candidate array. Add wrapper search order. Add cycle guard and depth cap.
• Use default text color for rendered messages and JSON.
• Add design docs for view improvements and the chat extraction algorithm.
• Add a manual test script for chat extraction edge cases.
• Extend the OpenInference tracing script to generate long chat and JSON mode examples.

CleanShot.2026-02-13.at.19.50.05.mp4

Closes #3757

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Feb 13, 2026 7:06pm

[devin-ai-integration]

Devin Review found 1 potential issue.

View 6 additional findings in Devin Review.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 8 additional findings in Devin Review.

[devin-ai-integration]

🚩 Observability output column missing keyPrefix may cause poor React reconciliation

The SmartCellContent in the observability outputs column (getObservabilityColumns.tsx:104-109) does not provide a keyPrefix prop, so all output cells use the default "cell". This means every output cell's chat messages get React keys like cell-0, cell-1, etc.

While React keys only need to be unique among siblings (and each cell is in a different table row subtree), this could cause suboptimal reconciliation if React ever needs to diff these cells during table updates — identical keys across rows may prevent React from detecting that cell content has changed.

Contrast with the inputs column (getObservabilityColumns.tsx:89-90) which passes keyPrefix={\trace-input-${record.span_id}`}for unique keys. The sessions table cells similarly use unique prefixes. Consider addingkeyPrefix={`trace-output-${record.span_id}`}` for consistency.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[mmabrouk]

Fixed in 2ef6746. I added stable output key prefixes for both traces and sessions output cells: trace-output-{span_id} and session-{sessionId}-output.