fix(web): make composer session mention pills ellipsize

[junmo-kim]

Problem

In the rich composer, a long session mention pill is hard-clipped without any ellipsis:

The pill class uses inline-flex ... truncate, but text-overflow: ellipsis does not apply to a flex container itself (the text node becomes a flex item), so overflow: hidden just cuts the text mid-glyph. Additionally, an inline-block with non-visible overflow aligns by its bottom margin edge, so naive fixes break vertical alignment.

Fix

Keep the pill as an inline-flex atom but move truncation to an inner label span: the outer pill stays align-baseline (its baseline remains the text baseline since it no longer clips), while the inner label carries min-w-0 truncate for working ellipsis. Cap relaxed from 12rem to 16rem for readability with longer (e.g. CJK) titles:

• data-composer-* attributes, tooltip aria-label, and segment parsing/caret logic are unchanged.
• Verified backspace deletion of a pill still removes exactly the atom.

Testing

• Added a vitest case asserting the inner label is truncate and the pill keeps baseline alignment (RED before / GREEN after).
• bun run typecheck and full bun run test pass.

[github-actions]

Findings

• None.

Summary

• Review mode: initial
• No issues found in the added or modified lines. Residual testing risk: web/src/components/AssistantChat/RichComposerInput.test.tsx:108 verifies Tailwind class placement under jsdom, but does not exercise actual ellipsis or baseline layout in a browser.

Testing

• Not run (automation)

HAPI Bot