mirror of
https://github.com/OpenHands/OpenHands.git
synced 2026-10-06 14:33:11 +08:00
Port of OpenHands/OpenHands#14284. The LLM model badge in the conversation header was constrained to max-w-[150px] with an inner `truncate`, which cut off long model identifiers such as `litellm_proxy/claude-sonnet-4-5-20250929` to `litellm_proxy/cl…`. Drop the width cap and inner truncate, and apply `whitespace-nowrap` to the outer span so the full name renders inline. Also adds scripts/record-demo.mjs - a small playwright recorder used to capture the verification GIF under .pr/issue-135/ - and updates the existing test to assert the un-truncated structure. Closes #135. Co-authored-by: openhands <openhands@all-hands.dev>
1.5 KiB
1.5 KiB
Issue #135 — Show full model name in conversation header
Port of OpenHands/OpenHands#14284.
Recording setup
- Branch:
port/full-model-name-header - Backend:
npm run dev(spawns isolatedopenhands-agent-server@mainon:18000) - Frontend:
localhost:12000(exposed athttps://work-1-yrsrggnfhzzshrxo.prod-runtime.all-hands.dev/for the recording) - LLM configured via
PATCH /api/settingswithagent_settings_diff.llm.model = litellm_proxy/claude-sonnet-4-5-20250929and the liveLLM_API_KEY.
The recordings were produced by node scripts/record-demo.mjs full-model-name <out>.webm, then converted to GIF with the ffmpeg snippet documented in that script.
Visual diff
comparison.png stacks the same conversation header band before and after the fix:
- Before (
max-w-[150px] overflow-hidden+ innertruncate):litellm_proxy/claude…cuts off after the first 150 px. - After (
whitespace-nowrap, no inner truncate): the fulllitellm_proxy/claude-sonnet-4-5-20250929renders inline.
before.png / after.png are full 1280×720 captures of the conversation page in each state. demo.gif is the recorded "after" flow (home → New Conversation → header rendered with the un-truncated badge).
Tests
npm test -- conversation-name→ 25/25 passing (includes the new assertions that the outer span haswhitespace-nowrapand nomax-w-[150px]/overflow-hidden, and the inner span has notruncate).npm run typecheck→ clean.