Hi @agegr 👋
First off, thank you for building pi-web — it's been a pleasure to use.
I ran into a small usability issue with the floating toast notifications (the NoticeShelf):
- Long messages get truncated. The single-line
nowrap + ellipsis span inside the fixed 60px / 620px container means longer notifications (e.g. the multi-field health report from the pi-fff extension) can never be read in full — there's no tooltip, expansion, or any other way to see the rest.
- Embedded newlines are lost. Extensions that compose multi-line messages with
lines.join("\n") (again, pi-fff is a real-world example) render as one run-on line, because white-space: nowrap folds every \n into a space.
- The 5-second auto-dismiss can't be paused, so a toast may disappear before you finish reading it.
While looking into a fix I also found two subtle blockers worth mentioning:
- The floating wrapper is intentionally click-through (
pointer-events: none), which means hover events never reach the toast itself.
- The
notice-shelf-in entrance animation runs with fill: both, and its final keyframe pins the height to 60px — a completed forwards-fill animation keeps winning over inline styles, which silently defeats any attempt to let the toast grow.
I've put together a fix in PR #558: toasts now show their full text by default (newlines preserved via pre-line, long lines wrap within the existing max width) and live in the top-right corner with their right edge pinned, so the layout never shifts under the cursor. Hovering a toast no longer drives layout — it only pauses the dismiss timer, which resumes from the remaining time once you move the mouse away. The rest of the overlay stays click-through, and the changes are confined to NoticeShelf and the notice-expiry effect in useAgentSession.
Whenever you have a moment, I'd really appreciate a code review. I'm happy to iterate on the approach, adjust the UX details, or split the PR if you'd prefer smaller pieces. Thanks again for your time and for maintaining the project! 🙏
Hi @agegr 👋
First off, thank you for building pi-web — it's been a pleasure to use.
I ran into a small usability issue with the floating toast notifications (the
NoticeShelf):nowrap + ellipsisspan inside the fixed 60px / 620px container means longer notifications (e.g. the multi-field health report from the pi-fff extension) can never be read in full — there's no tooltip, expansion, or any other way to see the rest.lines.join("\n")(again, pi-fff is a real-world example) render as one run-on line, becausewhite-space: nowrapfolds every\ninto a space.While looking into a fix I also found two subtle blockers worth mentioning:
pointer-events: none), which means hover events never reach the toast itself.notice-shelf-inentrance animation runs withfill: both, and its final keyframe pins the height to 60px — a completed forwards-fill animation keeps winning over inline styles, which silently defeats any attempt to let the toast grow.I've put together a fix in PR #558: toasts now show their full text by default (newlines preserved via
pre-line, long lines wrap within the existing max width) and live in the top-right corner with their right edge pinned, so the layout never shifts under the cursor. Hovering a toast no longer drives layout — it only pauses the dismiss timer, which resumes from the remaining time once you move the mouse away. The rest of the overlay stays click-through, and the changes are confined toNoticeShelfand the notice-expiry effect inuseAgentSession.Whenever you have a moment, I'd really appreciate a code review. I'm happy to iterate on the approach, adjust the UX details, or split the PR if you'd prefer smaller pieces. Thanks again for your time and for maintaining the project! 🙏